/*
 * Chrome extension landing page and the homepage call to action.
 *
 * Loaded on the homepage (for the CTA band) and on the landing page itself.
 * Everything reads from the theme's design tokens, so it follows the
 * Customizer palette and dark mode without a second set of rules.
 *
 * Layout note: every grid and flex child that can receive long text carries
 * min-width: 0. Grid items default to min-width: auto and refuse to shrink
 * below their content, which is what caused horizontal overflow elsewhere in
 * this theme. It is cheaper to set it everywhere than to rediscover it later.
 */

/* ------------------------------------------------------------------ *
 * Shared pieces
 * ------------------------------------------------------------------ */

.cw-chrome-logo { display: block; flex: 0 0 auto; }

/* The install button. Slightly heavier than a normal primary button, because
   it is the one action every one of these surfaces exists to produce. */
.cw-ext-btn {
	gap: 10px;
	padding-inline: 22px;
	box-shadow: 0 1px 2px rgba(17, 24, 39, 0.10);
}
.cw-ext-btn .cw-chrome-logo {
	/* Keep Google's colors on their own white disc, so the mark stays correct
	   whatever the theme's primary color happens to be. */
	background: #fff;
	border-radius: 50%;
	padding: 1px;
}
.cw-btn--lg {
	min-height: 52px;
	padding: 14px 26px;
	font-size: 1.02rem;
}

.cw-section-sub {
	text-align: center;
	color: var(--cw-color-muted);
	max-width: 62ch;
	margin: -10px auto 26px;
}

.cw-ext-center { text-align: center; margin-top: 30px; }

/* Any wide element gets its own scroll container rather than pushing the
   page sideways. */
.cw-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	min-width: 0;
}

/* ------------------------------------------------------------------ *
 * Homepage call to action
 * ------------------------------------------------------------------ */

.cw-ext-cta {
	margin: 28px 0 8px;
	background: var(--cw-color-card);
	border: 1px solid var(--cw-color-border);
	border-radius: var(--cw-radius);
	box-shadow: var(--cw-shadow);
	overflow: hidden;
	position: relative;
}
/* A thin accent edge instead of a filled panel: it marks the band as an offer
   without competing with the tool directly above it. */
.cw-ext-cta::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block: 0;
	width: 4px;
	background: linear-gradient(180deg, #EA4335 0%, #FBBC05 33%, #34A853 66%, #4285F4 100%);
}

.cw-ext-cta-inner {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 20px 22px 20px 26px;
	min-width: 0;
}

.cw-ext-cta-mark { flex: 0 0 auto; }
.cw-ext-cta-copy { flex: 1 1 auto; min-width: 0; }

.cw-ext-cta-title {
	font-size: 1.14rem;
	line-height: 1.35;
	margin: 0 0 6px;
	color: var(--cw-color-heading);
}
.cw-ext-cta-text {
	margin: 0;
	color: var(--cw-color-text);
	font-size: 0.95rem;
}

.cw-ext-cta-points {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	font-size: 0.86rem;
	color: var(--cw-color-muted);
}
.cw-ext-cta-points li {
	display: flex;
	align-items: center;
	gap: 6px;
}
.cw-ext-cta-points li::before {
	content: "";
	width: 14px; height: 14px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--cw-color-success);
	/* A tick drawn with a mask, so it takes the success color from the tokens
	   and needs no icon font or extra request. */
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5" fill="none" stroke="black" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 11px 11px no-repeat,
	        linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5" fill="none" stroke="black" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 11px 11px no-repeat,
	      linear-gradient(#000 0 0);
	mask-composite: exclude;
}

.cw-ext-cta-actions {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	text-align: center;
}
.cw-ext-cta-more {
	font-size: 0.85rem;
	color: var(--cw-color-muted);
}
.cw-ext-cta-more:hover, .cw-ext-cta-more:focus { color: var(--cw-color-primary); }

@media (max-width: 860px) {
	.cw-ext-cta-inner { flex-wrap: wrap; gap: 16px; }
	.cw-ext-cta-actions { width: 100%; }
	.cw-ext-cta-actions .cw-btn { width: 100%; }
}
@media (max-width: 560px) {
	.cw-ext-cta-inner { padding: 18px 16px 18px 20px; }
	.cw-ext-cta-mark { display: none; }
	.cw-ext-cta-title { font-size: 1.06rem; }
}
@media (max-width: 360px) {
	/* On a 320px screen the install label was about six pixels too wide and
	   broke onto a second line, doubling the button's height. Trimming the
	   horizontal padding buys back more than enough room. */
	.cw-ext-btn { padding-inline: 12px; gap: 8px; }
}

/* ------------------------------------------------------------------ *
 * Landing page: hero
 * ------------------------------------------------------------------ */

/*
 * .site-main is the content + sidebar grid, so its direct children become
 * grid items. This template puts full-bleed sections there, which would land
 * them in a two column track. State the single column explicitly rather than
 * relying on the no-sidebar body class, exactly as .cw-tool-main does.
 */
.site-main.cw-ext-page {
	grid-template-columns: 1fr;
	gap: 0;
	padding-bottom: 20px;
}

.cw-ext-hero {
	padding-block: 46px 40px;
	background: linear-gradient(180deg, var(--cw-color-card) 0%, var(--cw-color-bg) 100%);
	border-bottom: 1px solid var(--cw-color-border);
}

.cw-ext-hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: 42px;
	align-items: center;
}

.cw-ext-hero-copy { min-width: 0; }


.cw-ext-title {
	font-size: clamp(1.9rem, 4.4vw, 2.75rem);
	line-height: 1.14;
	margin: 0 0 14px;
	color: var(--cw-color-heading);
}

.cw-ext-lede {
	font-size: 1.06rem;
	color: var(--cw-color-text);
	margin: 0 0 24px;
	max-width: 56ch;
}

.cw-ext-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
}

.cw-ext-trust {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	font-size: 0.87rem;
	color: var(--cw-color-muted);
}
.cw-ext-trust li { display: flex; align-items: center; gap: 7px; }
.cw-ext-trust li::before {
	content: "";
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--cw-color-primary);
	flex: 0 0 auto;
}

/* ------------------------------------------------------------------ *
 * Landing page: hero illustration
 * ------------------------------------------------------------------ */

.cw-ext-hero-visual { min-width: 0; }

.cw-ext-mock {
	background: var(--cw-color-card);
	border: 1px solid var(--cw-color-border);
	border-radius: var(--cw-radius);
	box-shadow: var(--cw-shadow-lg);
	overflow: hidden;
}

.cw-ext-mock-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 12px;
	background: var(--cw-color-bg);
	border-bottom: 1px solid var(--cw-color-border);
}
.cw-ext-mock-bar > span {
	width: 9px; height: 9px;
	border-radius: 50%;
	background: var(--cw-color-border);
	flex: 0 0 auto;
}
.cw-ext-mock-url {
	flex: 1 1 auto;
	height: 16px;
	margin-inline-start: 8px;
	border-radius: 999px;
	background: var(--cw-color-border);
	opacity: 0.65;
	min-width: 0;
}

.cw-ext-mock-body { padding: 20px 18px 22px; position: relative; }

.cw-ext-mock-line {
	height: 9px;
	margin: 0 0 10px;
	border-radius: 4px;
	background: var(--cw-color-border);
}
.cw-ext-mock-line--short { width: 58%; }
.cw-ext-mock-line--sel {
	background: color-mix(in srgb, var(--cw-color-primary) 26%, transparent);
}
/* color-mix is widely supported now, but the fallback above must not be the
   selection color, so restate it for browsers that skip the rule. */
@supports not (background: color-mix(in srgb, red 20%, transparent)) {
	.cw-ext-mock-line--sel { background: var(--cw-color-accent); opacity: 0.35; }
}

.cw-ext-badge {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	margin-top: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--cw-color-primary);
	color: var(--cw-color-on-primary);
	font-size: 0.82rem;
	font-weight: 600;
	box-shadow: var(--cw-shadow);
}
.cw-ext-badge strong { font-size: 0.95rem; }

.cw-ext-card {
	margin-top: 12px;
	padding: 14px;
	border: 1px solid var(--cw-color-border);
	border-radius: var(--cw-radius-sm);
	background: var(--cw-color-bg);
}
.cw-ext-card-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	text-align: center;
}
.cw-ext-card-grid > div { min-width: 0; }
.cw-ext-card-grid strong {
	display: block;
	font-size: 1.02rem;
	color: var(--cw-color-primary);
	line-height: 1.2;
}
.cw-ext-card-grid span {
	display: block;
	font-size: 0.7rem;
	color: var(--cw-color-muted);
	margin-top: 2px;
}

/* ------------------------------------------------------------------ *
 * Landing page: features
 * ------------------------------------------------------------------ */

.cw-ext-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.cw-ext-feature {
	min-width: 0;
	padding: 22px 20px;
	background: var(--cw-color-card);
	border: 1px solid var(--cw-color-border);
	border-radius: var(--cw-radius);
}
.cw-ext-feature h3 {
	font-size: 1.06rem;
	margin: 12px 0 8px;
	color: var(--cw-color-heading);
}
.cw-ext-feature p {
	margin: 0;
	color: var(--cw-color-text);
	font-size: 0.94rem;
}

.cw-ext-feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px; height: 46px;
	border-radius: var(--cw-radius-sm);
	background: color-mix(in srgb, var(--cw-color-primary) 12%, transparent);
	color: var(--cw-color-primary);
}
@supports not (background: color-mix(in srgb, red 20%, transparent)) {
	.cw-ext-feature-icon { background: var(--cw-color-bg); }
}

/* ------------------------------------------------------------------ *
 * Landing page: steps
 * ------------------------------------------------------------------ */

.cw-ext-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	counter-reset: cw-step;
}
.cw-ext-step {
	min-width: 0;
	padding: 24px 20px;
	background: var(--cw-color-card);
	border: 1px solid var(--cw-color-border);
	border-radius: var(--cw-radius);
	position: relative;
}
.cw-ext-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--cw-color-primary);
	color: var(--cw-color-on-primary);
	font-weight: 700;
	font-size: 0.95rem;
}
.cw-ext-step h3 {
	font-size: 1.02rem;
	margin: 12px 0 8px;
	color: var(--cw-color-heading);
}
.cw-ext-step p { margin: 0; color: var(--cw-color-text); font-size: 0.94rem; }

/* ------------------------------------------------------------------ *
 * Landing page: privacy
 * ------------------------------------------------------------------ */

.cw-ext-privacy {
	background: var(--cw-color-card);
	border-block: 1px solid var(--cw-color-border);
}
.cw-ext-privacy h2 { margin-top: 0; }
.cw-ext-privacy p { color: var(--cw-color-text); }

/* ------------------------------------------------------------------ *
 * Landing page: where it helps
 * ------------------------------------------------------------------ */

.cw-ext-places-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 26px;
}
.cw-ext-places-list li {
	min-width: 0;
	padding-inline-start: 16px;
	border-inline-start: 3px solid var(--cw-color-border);
}
.cw-ext-places-list strong {
	display: block;
	color: var(--cw-color-heading);
	margin-bottom: 3px;
}
.cw-ext-places-list span { color: var(--cw-color-muted); font-size: 0.93rem; }

/* ------------------------------------------------------------------ *
 * Landing page: comparison table
 * ------------------------------------------------------------------ */

.cw-compare-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--cw-color-card);
	border: 1px solid var(--cw-color-border);
	border-radius: var(--cw-radius);
	overflow: hidden;
	font-size: 0.94rem;
}
.cw-compare-table th,
.cw-compare-table td {
	padding: 12px 14px;
	text-align: start;
	border-bottom: 1px solid var(--cw-color-border);
	vertical-align: top;
}
.cw-compare-table thead th {
	background: var(--cw-color-bg);
	color: var(--cw-color-heading);
	font-size: 0.86rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
}
.cw-compare-table tbody th {
	font-weight: 500;
	color: var(--cw-color-text);
}
.cw-compare-table td { text-align: center; white-space: nowrap; }
.cw-compare-table tbody tr:last-child th,
.cw-compare-table tbody tr:last-child td { border-bottom: 0; }
.cw-compare-table .cw-yes { color: var(--cw-color-success); font-weight: 600; }
.cw-compare-table .cw-no { color: var(--cw-color-muted); }

.cw-ext-compare-note { color: var(--cw-color-muted); font-size: 0.94rem; }

/* ------------------------------------------------------------------ *
 * Landing page: FAQ
 * ------------------------------------------------------------------ */

.cw-ext-faq-item {
	border-bottom: 1px solid var(--cw-color-border);
	padding: 4px 0;
}
.cw-ext-faq-item summary {
	cursor: pointer;
	list-style: none;
	padding: 14px 34px 14px 0;
	position: relative;
	min-height: var(--cw-tap);
	display: flex;
	align-items: center;
}
.cw-ext-faq-item summary::-webkit-details-marker { display: none; }
.cw-ext-faq-item summary h3 {
	margin: 0;
	font-size: 1.02rem;
	color: var(--cw-color-heading);
	font-weight: 600;
}
.cw-ext-faq-item summary::after {
	content: "";
	position: absolute;
	inset-inline-end: 6px;
	top: 50%;
	width: 10px; height: 10px;
	margin-top: -6px;
	border-inline-end: 2px solid var(--cw-color-muted);
	border-block-end: 2px solid var(--cw-color-muted);
	transform: rotate(45deg);
	transition: transform 0.18s ease;
}
.cw-ext-faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.cw-ext-faq-item p {
	margin: 0 0 16px;
	color: var(--cw-color-text);
	padding-inline-end: 34px;
}
.cw-ext-faq-item summary:focus-visible {
	outline: 2px solid var(--cw-color-primary);
	outline-offset: 2px;
	border-radius: var(--cw-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
	.cw-ext-faq-item summary::after { transition: none; }
}

/* ------------------------------------------------------------------ *
 * Landing page: closing call to action
 * ------------------------------------------------------------------ */

.cw-ext-final {
	background: var(--cw-color-card);
	border-top: 1px solid var(--cw-color-border);
}
.cw-ext-final-inner {
	text-align: center;
	max-width: 620px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.cw-ext-final-inner h2 { margin: 0; }
.cw-ext-final-inner p { margin: 0; color: var(--cw-color-text); }
.cw-ext-final-note { font-size: 0.87rem; color: var(--cw-color-muted); }

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */

@media (max-width: 1023px) {
	.cw-ext-grid,
	.cw-ext-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/*
	 * The hero stacks here rather than at some narrower width. Between roughly
	 * 900 and 1020px the copy column lands about ten pixels short of holding
	 * both hero buttons on one line, so they broke into a stack beside a
	 * half-empty illustration. Going single column earlier gives the buttons
	 * the full width and reads better than a cramped two column hero.
	 */
	.cw-ext-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	/* The illustration is decoration. Below the copy it delays nothing that
	   matters, and on the smallest screens it is hidden entirely. */
	.cw-ext-hero-visual { order: 2; }
}

@media (max-width: 900px) {
	.cw-ext-places-list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
	/*
	 * Make the comparison table fit rather than leaving it to scroll inside its
	 * container. A horizontally scrolling table gives no visual hint that there
	 * is more to the right, so on a phone the third column simply looked cut
	 * off. Tighter cells and wrapping values fit all three columns instead.
	 * The scroll container stays as the safety net for long translations.
	 */
	.cw-compare-table { font-size: 0.82rem; }
	.cw-compare-table th,
	.cw-compare-table td { padding: 10px 8px; }
	.cw-compare-table td,
	.cw-compare-table thead th { white-space: normal; }
	.cw-compare-table thead th { font-size: 0.7rem; letter-spacing: 0.02em; }
}

@media (max-width: 680px) {
	.cw-ext-hero { padding-block: 32px 30px; }
	.cw-ext-grid,
	.cw-ext-steps { grid-template-columns: minmax(0, 1fr); }
	.cw-ext-actions .cw-btn { width: 100%; }
	.cw-ext-hero-visual { display: none; }
	.cw-ext-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}