/* Layout: container, sections, header, footer. Grid per guidelines p.11. */

.container {
	width: 100%;
	max-width: calc(var(--container) + var(--margin-m) * 2);
	margin-inline: auto;
	padding-inline: var(--margin-m);
}
@media (min-width: 768px) {
	.container { max-width: calc(var(--container) + var(--margin-t) * 2); padding-inline: var(--margin-t); }
}
@media (min-width: 1024px) {
	.container { max-width: calc(var(--container) + var(--margin-d) * 2); padding-inline: var(--margin-d); }
}

.container.narrow { max-width: calc(var(--space-24) * 8 + var(--margin-m) * 2); }
@media (min-width: 768px) {
	.container.narrow { max-width: calc(var(--space-24) * 8 + var(--margin-t) * 2); }
}

/* Off-screen rendering: sections that always start below the first screen
   skip style, layout and paint until they are near the viewport. Traced on a
   4x-throttled CPU, style and layout were the whole main-thread cost.
   contain-intrinsic-size "auto" remembers each section's real height once it
   has rendered, so the scrollbar settles after one pass. Kept off anything an
   in-page link jumps to (#reviews) and off the first screen. */
:where(.finder, .in-use, .compare, .proof, .cod, .guides, .faq, .related, .site-footer) {
	content-visibility: auto;
	contain-intrinsic-size: auto calc(var(--space-24) * var(--cv, 6));
}
@media print {
	:where(.finder, .in-use, .compare, .proof, .cod, .guides, .faq, .related, .site-footer) { content-visibility: visible; }
}
/* Placeholder heights in rows of 96px, measured from each section at 375,
   768 and 1280, so a jump or a restored scroll lands where it should even
   before a section has rendered once */
.finder { --cv: 12; }
.in-use { --cv: 14.5; }
.compare { --cv: 10; }
.proof { --cv: 9.5; }
.cod { --cv: 9.5; }
.guides { --cv: 14; }
.faq { --cv: 6.5; }
.related { --cv: 11; }
.site-footer { --cv: 10.5; }
@media (min-width: 768px) {
	.finder { --cv: 8; }
	.in-use { --cv: 9.5; }
	.compare { --cv: 9.5; }
	.cod { --cv: 6.5; }
	.guides { --cv: 9.5; }
	.related { --cv: 12.5; }
	.site-footer { --cv: 8; }
}
@media (min-width: 1024px) {
	.finder { --cv: 5.25; }
	.in-use { --cv: 13; }
	.proof { --cv: 7; }
	.cod { --cv: 5.5; }
	.guides { --cv: 6; }
	.faq { --cv: 3.75; }
	.related { --cv: 7.25; }
	.site-footer { --cv: 5; }
}

/* Sections: 48px between major sections on mobile, 64px from 1024 (p.11) */
.section { padding-block: var(--space-6); }
.section.theme-dark { padding-block: var(--space-12); }
@media (min-width: 1024px) {
	.section { padding-block: var(--space-8); }
	.section.theme-dark { padding-block: var(--space-16); }
}

.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-2) var(--space-6);
	margin-bottom: var(--space-6);
}
.section-head__note {
	margin-top: var(--space-2);
	max-width: var(--measure);
	color: var(--color-text-muted);
	font-size: var(--small-m);
	line-height: var(--lh-small);
}
@media (min-width: 768px) {
	.section-head__note { font-size: var(--small); }
}
@media (min-width: 1024px) {
	.section-head { margin-bottom: var(--space-8); }
}

/* Announcement bar ------------------------------------------------------ */
.announcement-bar { border-bottom: var(--border-dark); }
.announcement-bar__list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-6);
	min-height: var(--tap-min);
	list-style: none;
	color: var(--color-text-muted);
	font-size: var(--small-m);
	line-height: var(--lh-small);
}
.announcement-bar__item--wide { display: none; }
.announcement-bar__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-min);
	color: var(--color-text);
}
@media (min-width: 768px) {
	.announcement-bar__list { justify-content: flex-start; font-size: var(--small); }
	.announcement-bar__item--wide { display: block; margin-right: auto; }
}

/* Site header ------------------------------------------------------------
   The lockup is --logo-h tall; padding and row gaps keep 1x its cap height
   clear on every side (p.5). */
.site-header { position: relative; z-index: 20; }
@media (min-width: 1024px) {
	.site-header { position: sticky; top: 0; border-bottom: var(--border-dark); }
}

.site-header__bar {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"logo actions"
		"search search"
		"nav nav";
	align-items: center;
	column-gap: var(--space-6);
	row-gap: var(--space-4);
	padding-block: var(--space-4);
}
@media (min-width: 768px) {
	.site-header__bar {
		grid-template-columns: auto 1fr auto;
		grid-template-areas:
			"logo search actions"
			"nav nav nav";
	}
}
@media (min-width: 1024px) {
	.site-header__bar {
		grid-template-columns: auto 1fr auto auto;
		grid-template-areas: "logo nav search actions";
		column-gap: var(--space-8);
	}
}

.site-header__logo {
	grid-area: logo;
	justify-self: start;
	display: flex;
	align-items: center;
	min-height: var(--tap-min);
	border-radius: var(--r-control);
}
.site-header__logo img { width: auto; height: var(--logo-h); }

.site-header__search { grid-area: search; }
@media (min-width: 1024px) {
	.site-header__search { width: calc(var(--space-24) * 3); }
}

.site-header__actions {
	grid-area: actions;
	display: flex;
	align-items: center;
	gap: var(--space-2);
}
/* Below 1024 the account link lives in the menu panel instead */
.icon-btn.site-header__account { display: none; }
@media (min-width: 1024px) {
	.icon-btn.site-header__account { display: inline-grid; }
}

/* Menu toggle: only when the script can drive it, only below 1024 */
.icon-btn.site-header__menu { display: none; }
/* The scripting media feature is known before first paint; a class added by a
   deferred script is not, and toggling it shifted the page by up to 226px. */
@media (scripting: enabled) {
	.icon-btn.site-header__menu { display: inline-grid; }
}
.site-header__menu .icon--close,
.site-header__menu[aria-expanded="true"] .icon--menu { display: none; }
.site-header__menu[aria-expanded="true"] .icon--close { display: block; }
@media (min-width: 1024px) {
	.icon-btn.site-header__menu { display: none !important; }
}

/* Primary navigation */
.site-nav { grid-area: nav; }
.site-nav__list { list-style: none; }
.site-nav__link {
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--tap-min);
	color: var(--color-text);
	font-weight: var(--fw-medium);
	text-decoration: none;
	border-radius: var(--r-control);
}
.site-nav__link:hover { color: var(--color-link); }
.site-nav__link[aria-current="page"] { color: var(--color-link); }

@media (max-width: 1023px) {
	.site-nav__list { border-top: var(--border-dark); }
	.site-nav__item { border-bottom: var(--border-dark); }
}
@media (max-width: 1023px) and (scripting: enabled) {
	.site-nav { display: none; }
	.site-nav.is-open {
		display: block;
		animation: nav-in var(--dur-base) var(--ease);
	}
}

@media (min-width: 1024px) {
	.site-nav__list { display: flex; gap: var(--space-6); }
	.site-nav__item--account { display: none; }
	/* 2px accent rule grows in from the left on hover (p.11 reserves 2px for it) */
	.site-nav__link::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: var(--space-2);
		left: 0;
		height: var(--rule-accent);
		background: currentColor;
		transform: scaleX(0);
		transform-origin: left;
		transition: transform var(--dur-base) var(--ease);
	}
	.site-nav__link:hover::after,
	.site-nav__link[aria-current="page"]::after { transform: scaleX(1); }
}

@keyframes nav-in {
	from { opacity: 0; transform: translateY(calc(var(--space-2) * -1)); }
}

/* Site footer ------------------------------------------------------------ */
.site-footer { padding-block: var(--space-12) var(--space-8); }

.site-footer__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-8) var(--gutter-m);
}
.site-footer__brand { grid-column: 1 / -1; }
@media (min-width: 768px) {
	.site-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8) var(--gutter-t); }
}
@media (min-width: 1024px) {
	.site-footer__grid { grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); gap: var(--space-8) var(--gutter); }
	.site-footer__brand { grid-column: auto; }
}

.site-footer__logo { display: inline-flex; align-items: center; min-height: var(--tap-min); border-radius: var(--r-control); }
.site-footer__logo img { width: auto; height: var(--logo-h); }
.site-footer__about {
	max-width: var(--measure);
	margin-top: var(--space-6);
	color: var(--color-text-muted);
	font-size: var(--small-m);
	line-height: var(--lh-small);
}
.site-footer__title {
	color: var(--color-text);
	font-family: var(--stack-body);
	font-size: var(--caption);
	font-weight: var(--fw-medium);
	line-height: var(--lh-caption);
	letter-spacing: var(--tr-caption);
	text-transform: uppercase;
}
.site-footer__list { margin-top: var(--space-2); list-style: none; }
.site-footer__link,
.site-footer__placeholder {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-min);
	color: var(--color-text-muted);
	font-size: var(--small-m);
	text-decoration: none;
	overflow-wrap: anywhere;
}
.site-footer__link:hover { color: var(--color-text); text-decoration: underline; }

/* Newsletter: native validation; the message names the fix (p.14) */
.newsletter { max-width: var(--measure); margin-top: var(--space-8); }
.newsletter__label {
	display: block;
	color: var(--color-text);
	font-size: var(--small-m);
	font-weight: var(--fw-medium);
}
.newsletter__row { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.newsletter__input {
	flex: 1;
	min-width: 0;
	min-height: var(--tap-min);
	padding: var(--space-2) var(--space-3);
	border: var(--hairline) solid var(--color-dark-border);
	border-radius: var(--r-control);
	background: var(--color-dark-surface);
	color: var(--color-text);
	font-size: var(--body);
	transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.newsletter__input::placeholder { color: var(--color-text-muted); opacity: 1; }
.newsletter__input:focus-visible {
	outline: var(--hairline) solid transparent;
	border-color: var(--color-focus);
	box-shadow: var(--focus);
}
.newsletter__input:user-invalid { border-color: var(--danger-dark); }
.newsletter__error {
	display: none;
	margin-top: var(--space-2);
	color: var(--danger-dark);
	font-size: var(--small-m);
}
.newsletter:has(.newsletter__input:user-invalid) .newsletter__error { display: block; }
@media (min-width: 768px) {
	.newsletter__label,
	.newsletter__error { font-size: var(--small); }
}

.site-footer__legal {
	display: grid;
	gap: var(--space-2);
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: var(--border-dark);
	color: var(--color-text-muted);
	font-size: var(--small-m);
	line-height: var(--lh-small);
}
@media (min-width: 768px) {
	.site-footer__about,
	.site-footer__link,
	.site-footer__placeholder,
	.site-footer__legal { font-size: var(--small); }
}

/* Coming-soon stub -------------------------------------------------------- */
.stub { padding-block: var(--space-16); }
.stub__inner { display: grid; justify-items: start; gap: var(--space-4); }
.stub__text { color: var(--color-text-muted); }
@media (min-width: 1024px) {
	.stub { padding-block: var(--space-24); }
}