/* DHMS marketing site.
 *
 * This stylesheet is a faithful reproduction of the reference design at
 * katagoge.com (which the client owns): its typefaces, its colour set, its
 * padding scale, its breakpoints, and its section rhythm -- an uppercase
 * eyebrow, a two-line heading whose second line is the same colour at low
 * opacity, one framing sentence, then a grid of numbered cards, over
 * alternating light and dark full-bleed bands with 20px rounded tops.
 *
 * It is deliberately NOT style.css. The product UI is a dense operational
 * dashboard on a system font stack (a site PC may be offline and must never
 * wait on a font). This page is public, always online, and has one job:
 * convince someone who has never seen the product. Different job, different
 * stylesheet. Do not merge them.
 *
 * Breakpoints are the reference's own, and they are RANGES, not the usual
 * mobile-first cascade:
 *     xm  <= 400px      sm  401-768      md  769-1024
 *     lg  1025-1490     xl  >= 1491
 */

@font-face {
	font-family: NeueMontreal;
	src: url(/static/fonts/NeueMontreal.woff) format("woff");
	font-display: swap;
}

@font-face {
	font-family: FoundersGrotesk;
	src: url(/static/fonts/FoundersGrotesk.woff) format("woff");
	font-display: swap;
}

:root {
	/* DHMS's own palette. The reference's warm near-white and near-black
	 * forest green (#faf9f7 / #102c26) are gone: this is the same structure
	 * rendered cool, in Digitech's own hue family, so the marketing site, the
	 * logo sitting on it and the product it sells read as one company.
	 *
	 * --accent is sampled from the Digitech logo artwork itself. Swap it for
	 * the product UI's #2563eb if the two should match exactly; everything
	 * accented reads from this one token.
	 *
	 * --ground-dark is the near-black the full-bleed bands are built on -- a
	 * deep navy carrying a cyan cast, which is what makes it sit under the
	 * accent rather than fight it. */
	--ground-hero: #f7f9fb;
	--ground-white: #ffffff;
	--ground-grey: #eef2f6;
	--ground-dark: #0e2436;
	--ink: #16202b;
	--on-dark: #ffffff;

	--accent: #0090c0;
	--brand: #0090c0;

	/* Operational colours, carried over from the product so a status dot on
	 * the marketing page means what it means on the dashboard. */
	--up: #16a34a;
	--down: #dc2626;

	--font-body: NeueMontreal, "Segoe UI", system-ui, sans-serif;
	--font-display: FoundersGrotesk, NeueMontreal, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

body {
	margin: 0;
	background: var(--ground-hero);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------- layout */

.padding-x { padding-left: 50px; padding-right: 50px; }
.padding-y { padding-top: 100px; padding-bottom: 100px; }

@media (max-width: 400px) {
	.padding-x { padding-left: 20px; padding-right: 20px; }
	.padding-y { padding-top: 40px; padding-bottom: 40px; }
}
@media (min-width: 401px) and (max-width: 768px) {
	.padding-x { padding-left: 20px; padding-right: 20px; }
	.padding-y { padding-top: 40px; padding-bottom: 40px; }
}
@media (min-width: 769px) and (max-width: 1024px) {
	.padding-x { padding-left: 30px; padding-right: 30px; }
	.padding-y { padding-top: 60px; padding-bottom: 60px; }
}
@media (min-width: 1025px) and (max-width: 1490px) {
	.padding-y { padding-top: 80px; padding-bottom: 80px; }
}

section { width: 100%; position: relative; }

/* Each band lifts over the one before it with a rounded top -- the
 * reference's signature stacking. */
.band-round { border-top-left-radius: 20px; border-top-right-radius: 20px; }

.band-white { background: var(--ground-white); }
.band-grey  { background: var(--ground-grey); }
.band-dark  { background: var(--ground-dark); color: var(--on-dark); }

/* ------------------------------------------------------------------- nav */

.nav {
	height: 10vh;
	min-height: 64px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	background: rgba(250, 249, 247, 0.72);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.nav-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-brand img { height: 30px; width: auto; }

.nav-word {
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.4px;
	color: var(--ink);
	text-transform: uppercase;
	white-space: nowrap;
}

.nav-links { display: flex; align-items: center; gap: 34px; min-width: 0; flex-shrink: 1; }

.nav-links a {
	font-size: 16px;
	color: var(--ink);
	opacity: 0.65;
	transition: opacity 0.25s ease;
}
.nav-links a:hover { opacity: 1; }

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 26px;
	border-radius: 40px;
	border: 1px solid var(--ink);
	background: var(--ink);
	color: var(--ground-white);
	font-family: var(--font-body);
	font-size: 15px;
	cursor: pointer;
	transition: background 0.28s ease, color 0.28s ease, transform 0.28s ease;
	white-space: nowrap;
}
.btn:hover { background: transparent; color: var(--ink); }

.btn-light {
	background: var(--on-dark);
	border-color: var(--on-dark);
	color: var(--ground-dark);
}
.btn-light:hover { background: transparent; color: var(--on-dark); }

.btn-lg { padding: 17px 38px; font-size: 17px; }

.nav .btn { flex-shrink: 0; }

.nav-toggle { display: none; }

/* ----------------------------------------------------------------- hero */

.hero {
	min-height: 100vh;
	background: var(--ground-hero);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* A flex column stretches its children by default, which pulled the
	 * inline-flex pill out to the full width of the hero. */
	align-items: flex-start;
	padding-top: 14vh;
	padding-bottom: 60px;
}

.pill {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 15px;
	border: 1px solid rgba(22, 32, 43, 0.16);
	border-radius: 40px;
	font-size: 13.5px;
	letter-spacing: 0.02em;
	color: rgba(22, 32, 43, 0.72);
	margin-bottom: 26px;
	background: rgba(255, 255, 255, 0.5);
}

.dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--up);
	flex: none;
	animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}

h1 {
	font-family: var(--font-body);
	font-weight: 600;
	color: var(--ink);
	font-size: 76px;
	line-height: 1;
	letter-spacing: -2.5px;
	margin: 0;
	max-width: 15ch;
}

h1 .muted { color: rgba(22, 32, 43, 0.25); }

.hero-sub {
	font-size: 20px;
	line-height: 1.45;
	color: rgba(22, 32, 43, 0.66);
	max-width: 52ch;
	margin: 30px 0 0;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

.hero-note {
	margin: 20px 0 0;
	font-size: 14.5px;
	color: rgba(22, 32, 43, 0.45);
}

/* The product shot sits half out of the fold, exactly as the reference's
 * dashboard preview does. */
.hero-shot {
	align-self: stretch;
	margin-top: 64px;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(22, 32, 43, 0.1);
	background: var(--ground-white);
	box-shadow: 0 40px 80px -40px rgba(16, 44, 38, 0.35);
}

/* ------------------------------------------------- section heading block */

.eyebrow {
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(22, 32, 43, 0.4);
	margin: 0 0 26px;
}

.band-dark .eyebrow { color: rgba(255, 255, 255, 0.4); }

h2 {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 40px;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0;
	max-width: 22ch;
}

/* The reference's signature: the heading's second line is the same colour
 * held at low opacity, so a two-line statement reads as one thought with a
 * quiet half. */
h2 .fade { display: block; color: rgba(22, 32, 43, 0.2); margin-top: 8px; }

.band-dark h2 { color: var(--on-dark); }
.band-dark h2 .fade { color: rgba(255, 255, 255, 0.4); }
.band-dark h2.lead-fade { color: rgba(255, 255, 255, 0.65); }
.band-dark h2.lead-fade .fade { color: var(--on-dark); }

.section-intro {
	font-size: 18px;
	line-height: 1.5;
	color: rgba(22, 32, 43, 0.6);
	max-width: 60ch;
	margin: 26px 0 0;
}

.band-dark .section-intro { color: rgba(255, 255, 255, 0.6); }

.section-head { margin-bottom: 64px; }

/* ------------------------------------------------------ numbered card grid */

.cards {
	display: grid;
	gap: 1px;
	background: rgba(22, 32, 43, 0.12);
	border: 1px solid rgba(22, 32, 43, 0.12);
	border-radius: 14px;
	overflow: hidden;
}

.band-dark .cards {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.14);
}

.cards-2 { grid-template-columns: repeat(2, 1fr); }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-4 { grid-template-columns: repeat(4, 1fr); }

.card {
	position: relative;
	background: var(--ground-white);
	padding: 38px 32px 44px;
	display: flex;
	flex-direction: column;
	gap: 0;
	overflow: hidden;
}

.band-grey .card { background: var(--ground-grey); }
.band-dark .card { background: var(--ground-dark); }

/* The giant ghosted numeral watermarking each card. */
.card .n {
	position: absolute;
	top: 14px;
	right: 20px;
	font-family: var(--font-body);
	font-size: 62px;
	font-weight: 500;
	line-height: 1;
	color: rgba(22, 32, 43, 0.07);
	pointer-events: none;
	user-select: none;
}

.band-dark .card .n { color: rgba(255, 255, 255, 0.08); }

.card .role {
	font-size: 12.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(22, 32, 43, 0.4);
	margin: 0 0 14px;
}
.band-dark .card .role { color: rgba(255, 255, 255, 0.45); }

.card h3 {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 24px;
	line-height: 1.2;
	color: var(--ink);
	margin: 0 0 12px;
	max-width: 20ch;
}
.band-dark .card h3 { color: var(--on-dark); }

.card p {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: rgba(22, 32, 43, 0.62);
}
.band-dark .card p { color: rgba(255, 255, 255, 0.62); }

/* The technical layer. Plain sentence on the surface; the mechanism one
 * click down, for the reader who wants it. Costs a non-technical reader
 * nothing. */
.deeper {
	margin-top: 18px;
	border-top: 1px solid rgba(22, 32, 43, 0.12);
	padding-top: 14px;
}
.band-dark .deeper { border-top-color: rgba(255, 255, 255, 0.14); }

.deeper summary {
	cursor: pointer;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(22, 32, 43, 0.45);
	list-style: none;
	display: flex;
	align-items: center;
	gap: 7px;
	transition: color 0.2s ease;
}
.deeper summary::-webkit-details-marker { display: none; }
.deeper summary::after {
	content: "+";
	font-size: 15px;
	line-height: 1;
}
.deeper[open] summary::after { content: "\2212"; }
.deeper summary:hover { color: var(--ink); }

.band-dark .deeper summary { color: rgba(255, 255, 255, 0.45); }
.band-dark .deeper summary:hover { color: var(--on-dark); }

.deeper p {
	margin: 12px 0 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: rgba(22, 32, 43, 0.55);
}
.band-dark .deeper p { color: rgba(255, 255, 255, 0.55); }

/* ------------------------------------------------------------- step rows */

.steps { display: flex; flex-direction: column; }

.step {
	display: grid;
	grid-template-columns: 90px 1fr 1.1fr;
	gap: 40px;
	padding: 38px 0;
	border-top: 1px solid rgba(22, 32, 43, 0.14);
	align-items: start;
}
.step:last-child { border-bottom: 1px solid rgba(22, 32, 43, 0.14); }

.band-dark .step { border-top-color: rgba(255, 255, 255, 0.16); }
.band-dark .step:last-child { border-bottom-color: rgba(255, 255, 255, 0.16); }

.step .n {
	font-size: 42px;
	font-weight: 500;
	line-height: 1;
	color: rgba(22, 32, 43, 0.2);
}
.band-dark .step .n { color: rgba(255, 255, 255, 0.25); }

.step h3 {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 28px;
	line-height: 1.2;
	margin: 0;
	color: var(--ink);
}
.band-dark .step h3 { color: var(--on-dark); }

.step p {
	margin: 0;
	font-size: 17px;
	line-height: 1.55;
	color: rgba(22, 32, 43, 0.62);
}
.band-dark .step p { color: rgba(255, 255, 255, 0.62); }

/* ------------------------------------------------------------ pull quote */

.quote {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 38px;
	line-height: 1.25;
	letter-spacing: -0.02em;
	margin: 0;
	max-width: 24ch;
	color: var(--on-dark);
}

.quote-side { font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, 0.62); margin: 0; }
.quote-wrap { display: grid; grid-template-columns: 1.15fr 1fr; gap: 70px; align-items: start; }

/* -------------------------------------------------------------- gallery */

.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.shot {
	border: 1px solid rgba(22, 32, 43, 0.12);
	border-radius: 12px;
	overflow: hidden;
	background: var(--ground-white);
	display: flex;
	flex-direction: column;
}

.shot .frame {
	aspect-ratio: 16 / 10;
	background: linear-gradient(135deg, #eceff2 0%, #dfe4e9 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(22, 32, 43, 0.35);
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
	padding: 20px;
}

.shot .cap { padding: 18px 20px 22px; }
.shot .cap b { display: block; font-weight: 500; font-size: 17px; margin-bottom: 5px; }
.shot .cap span { font-size: 14.5px; color: rgba(22, 32, 43, 0.58); line-height: 1.45; }

/* -------------------------------------------------------------- pricing */

.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }

.plan {
	border: 1px solid rgba(22, 32, 43, 0.14);
	border-radius: 14px;
	padding: 32px 26px 30px;
	background: var(--ground-white);
	display: flex;
	flex-direction: column;
	gap: 14px;
	position: relative;
}

/* The yearly plan is the one we want chosen, so it is the only card that
 * changes weight: a solid dark ground against three outlined neighbours. */
.plan.featured {
	background: var(--ground-dark);
	border-color: var(--ground-dark);
	color: var(--on-dark);
}

.plan .term {
	font-size: 12.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(22, 32, 43, 0.45);
}
.plan.featured .term { color: rgba(255, 255, 255, 0.55); }

.plan .amount {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 42px;
	line-height: 1;
	letter-spacing: -1.5px;
	font-variant-numeric: tabular-nums;
}

.plan .unit { font-size: 14.5px; color: rgba(22, 32, 43, 0.5); margin-top: -6px; }
.plan.featured .unit { color: rgba(255, 255, 255, 0.55); }

.plan .save {
	font-size: 15px;
	line-height: 1.45;
	color: rgba(22, 32, 43, 0.62);
	border-top: 1px solid rgba(22, 32, 43, 0.12);
	padding-top: 14px;
	margin-top: auto;
}
.plan.featured .save { color: rgba(255, 255, 255, 0.72); border-top-color: rgba(255, 255, 255, 0.2); }

.plan .tag {
	position: absolute;
	top: -11px;
	left: 26px;
	background: var(--up);
	color: #fff;
	font-size: 11.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 40px;
}

.price-note {
	margin: 30px 0 0;
	font-size: 15px;
	color: rgba(22, 32, 43, 0.55);
	max-width: 70ch;
}

/* ------------------------------------------------------------------ faq */

.faq { border-top: 1px solid rgba(22, 32, 43, 0.14); }

.faq details {
	border-bottom: 1px solid rgba(22, 32, 43, 0.14);
	padding: 26px 0;
}

.faq summary {
	cursor: pointer;
	list-style: none;
	display: grid;
	grid-template-columns: 150px 1fr 30px;
	gap: 24px;
	align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }

.faq .cat {
	font-size: 12.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(22, 32, 43, 0.4);
}

.faq .q {
	font-size: 22px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--ink);
}

.faq .sign { justify-self: end; font-size: 22px; color: rgba(22, 32, 43, 0.4); line-height: 1; }
.faq details[open] .sign { color: var(--ink); }

.faq .a {
	margin: 18px 0 0;
	padding-left: 174px;
	font-size: 17px;
	line-height: 1.6;
	color: rgba(22, 32, 43, 0.62);
	max-width: 80ch;
}

/* ------------------------------------------------------------- waitlist */

.wl-type {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 12vw;
	line-height: 0.92;
	letter-spacing: -0.04em;
	margin: 0 0 50px;
	color: var(--on-dark);
	text-transform: uppercase;
}
.wl-type span { display: block; }
.wl-type span:nth-child(2) { color: rgba(255, 255, 255, 0.45); }

.wl-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; }

.wl-form { display: flex; flex-direction: column; gap: 16px; }

.field { display: flex; flex-direction: column; gap: 7px; }

.field label {
	font-size: 12.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.field input,
.field select,
.field textarea {
	font-family: var(--font-body);
	font-size: 16px;
	padding: 14px 16px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.05);
	color: var(--on-dark);
	width: 100%;
}

.field input::placeholder,
.field textarea::placeholder { color: rgba(255, 255, 255, 0.35); }

.field input:focus,
.field select:focus,
.field textarea:focus {
	border-color: rgba(255, 255, 255, 0.6);
	outline: none;
	background: rgba(255, 255, 255, 0.09);
}

.field select option { background: var(--ground-dark); color: var(--on-dark); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* The honeypot. Never shown, never focusable, never announced -- a real
 * person cannot fill it, so anything that does is a bot. */
.hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.wl-consent { font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.45); margin: 4px 0 0; }

.wl-status {
	margin: 0;
	padding: 14px 16px;
	border-radius: 8px;
	font-size: 15.5px;
	line-height: 1.5;
	display: none;
}
.wl-status.ok { display: block; background: rgba(22, 163, 74, 0.18); border: 1px solid rgba(22, 163, 74, 0.5); color: #b8f5d0; }
.wl-status.err { display: block; background: rgba(220, 38, 38, 0.16); border: 1px solid rgba(220, 38, 38, 0.5); color: #ffc9c9; }

.wl-aside p { color: rgba(255, 255, 255, 0.62); font-size: 17px; line-height: 1.6; }
.wl-aside .or {
	font-size: 12.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
	margin: 34px 0 14px;
}
.wl-aside a.big {
	font-size: 30px;
	font-weight: 500;
	color: var(--on-dark);
	letter-spacing: -0.5px;
	display: inline-block;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	padding-bottom: 3px;
	transition: border-color 0.25s ease;
}
.wl-aside a.big:hover { border-bottom-color: var(--on-dark); }

/* ---------------------------------------------------------------- footer */

.foot { background: var(--ground-dark); color: var(--on-dark); padding-bottom: 40px; }

.foot-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: 40px;
	padding-top: 70px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.foot h4 {
	font-size: 12.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
	margin: 0 0 18px;
	font-weight: 400;
}

.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.foot li, .foot address {
	font-size: 15.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.66);
	font-style: normal;
}
.foot a:hover { color: var(--on-dark); }

.foot-brand img { height: 34px; width: auto; margin-bottom: 16px; }
.foot-brand p { font-size: 15.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.55); margin: 0; max-width: 34ch; }

.foot-base {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	justify-content: space-between;
	margin-top: 56px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.42);
}

/* ---------------------------------------------------------- responsive */

@media (max-width: 1024px) {
	h1 { font-size: 52px; letter-spacing: -1.5px; }
	h2 { font-size: 38px; }
	.cards-4 { grid-template-columns: repeat(2, 1fr); }
	.plans { grid-template-columns: repeat(2, 1fr); }
	.shots { grid-template-columns: repeat(2, 1fr); }
	.quote-wrap, .wl-wrap { grid-template-columns: 1fr; gap: 40px; }
	.foot-grid { grid-template-columns: 1fr 1fr; }
	.step { grid-template-columns: 60px 1fr; gap: 24px; }
	.step p { grid-column: 2; }
	.nav-links { display: none; }
}

@media (max-width: 768px) {
	h1 { font-size: 40px; letter-spacing: -1px; }
	h2 { font-size: 30px; }
	.hero-sub { font-size: 17px; }
	.section-head { margin-bottom: 40px; }
	.cards-2, .cards-3, .cards-4 { grid-template-columns: 1fr; }
	.plans, .shots { grid-template-columns: 1fr; }
	.foot-grid { grid-template-columns: 1fr; gap: 34px; }
	.card { padding: 30px 24px 34px; }
	.card .n { font-size: 48px; }
	.faq summary { grid-template-columns: 1fr 26px; }
	.faq .cat { display: none; }
	.faq .q { font-size: 19px; }
	.faq .a { padding-left: 0; font-size: 16px; }
	.wl-type { font-size: 15vw; }
	.field-row { grid-template-columns: 1fr; }
	.quote { font-size: 28px; }
	.plan .amount { font-size: 36px; }
}

@media (max-width: 400px) {
	h1 { font-size: 32px; }
	h2 { font-size: 26px; }
	.nav-word { font-size: 16px; }
	.btn { padding: 11px 20px; font-size: 14px; }
}

/* ======================================================== motion
 *
 * The reference's animation, reproduced from its own bundle rather than
 * guessed at. It runs Framer Motion; this is the same specification in plain
 * CSS driven by one IntersectionObserver, because shipping React to a
 * marketing page to fade some text in would be absurd -- and this page has to
 * stay fast on mobile data.
 *
 * Its two easing curves, and what each is for:
 *   --ease-enter  cubic-bezier(.22, 1, .36, 1)    the hero's arrival
 *   --ease-reveal cubic-bezier(.25, .1, .25, 1)   everything scrolled into view
 *   --ease-accordion cubic-bezier(.76, 0, .24, 1) the FAQ opening
 *
 * Everything is gated on html.anim, which landing.js sets before first paint.
 * With JavaScript off the class never lands, nothing is ever hidden, and the
 * page renders complete and static -- which is the correct no-JS outcome for a
 * page whose job is to be read.
 */

:root {
	--ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-reveal: cubic-bezier(0.25, 0.1, 0.25, 1);
	--ease-accordion: cubic-bezier(0.76, 0, 0.24, 1);
}

/* Scroll reveal: opacity 0 -> 1, y 14px -> 0, 0.35s, staggered per item by
 * --d (the reference uses 0.03s and 0.04s per index). */
.anim [data-reveal] {
	opacity: 0;
	transform: translateY(14px);
	will-change: opacity, transform;
}

.anim [data-reveal].is-in {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.35s var(--ease-reveal) var(--d, 0s),
		transform 0.35s var(--ease-reveal) var(--d, 0s);
}

/* The hero arrives on load rather than on scroll: it is already in view, so
 * waiting for an intersection would mean waiting forever. */
.anim [data-enter] {
	opacity: 0;
	transform: translateY(var(--y, 24px));
	animation: enter 0.65s var(--ease-enter) var(--d, 0s) forwards;
}

@keyframes enter {
	to { opacity: 1; transform: none; }
}

/* height:auto is not animatable, so the answer is measured and driven in
 * pixels, then released to auto so it can reflow afterwards. */
.faq-item .a-wrap {
	overflow: hidden;
	height: 0;
	opacity: 0;
	transition:
		height 0.5s var(--ease-accordion),
		opacity 0.5s var(--ease-accordion);
}

.faq-item[open] .a-wrap { opacity: 1; }

/* Without JS the <details> still opens; it just opens instantly. */
html:not(.anim) .faq-item .a-wrap { height: auto; opacity: 1; }


/* The nav is transparent over the hero and only takes its backdrop once the
 * page has moved -- so the first frame is the page, not a bar over it. */
.nav {
	transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
	border-bottom: 1px solid transparent;
}

.nav.scrolled {
	background: rgba(247, 249, 251, 0.82);
	border-bottom-color: rgba(22, 32, 43, 0.08);
}

.anim .nav:not(.scrolled) {
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Cards lift very slightly under the pointer. Kept to 2px: this is a grid of
 * facts, not a set of buttons, and anything more reads as clickable. */
.card, .plan, .shot {
	transition: transform 0.35s var(--ease-reveal), border-color 0.35s var(--ease-reveal);
}
.card:hover, .shot:hover { transform: translateY(-2px); }
.plan:not(.featured):hover { transform: translateY(-2px); border-color: var(--accent); }

.btn { transform: translateY(0); }
.btn:active { transform: translateY(1px); }

/* Reduced motion: no travel, no stagger. Content still arrives, it simply
 * arrives immediately -- never left hidden waiting on an animation. */
@media (prefers-reduced-motion: reduce) {
	.anim [data-reveal],
	.anim [data-reveal].is-in {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.anim [data-enter] {
		opacity: 1;
		transform: none;
		animation: none;
	}
	.faq-item .a-wrap { transition: none; }
	.card:hover, .shot:hover, .plan:not(.featured):hover { transform: none; }
}


/* The hero's outline CTA, beside the solid one. */
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--ground-white); }

/* The hero product shot is a wide crop rather than the gallery's 16:10. */
.frame-tall { aspect-ratio: 16 / 9; }

.price-note a { border-bottom: 1px solid currentColor; }