/* Lytly landing — "Instrument" (direction 3, with material), 2026-09-03.
   Source of truth: docs/rebrand-2026-09/05-design-system.md and the approved
   artboard docs/rebrand-2026-09/canvas/FullPage.dc.html.

   The material: every panel is a vertical gradient with a 1px inset top
   highlight; every key is a keycap; exactly one saturated element per
   surface (the accent). No second hue, no gradient text, no glassmorphism.
   The panel and key gradients are material, not decoration — they are the
   only gradients this file is allowed.

   Colour literals live ONLY in the two token blocks below; everything else
   uses var(). scripts/check-landing-colors.mjs enforces that.

   Fonts are LOCAL (see /fonts/fonts.css). The page ships a strict CSP that
   allows only 'self' — a webfont CDN would be blocked, and a privacy-first
   product should not call one anyway. */

@import url("/fonts/fonts.css");

:root {
	/* Palette C4 — dark is canonical. Mirrors the :root block in src/styles.css. */
	--surface-base: #0F1214;
	--surface-glow: #181D21;
	--panel-top: #1C2125;
	--panel-bottom: #14181B;
	--row-top: #191E22;
	--row-bottom: #13171A;
	--border-subtle: rgba(205, 215, 225, 0.12);
	--panel-highlight: rgba(255, 255, 255, 0.05);
	--text-primary: #F5F7F9;
	--text-secondary: #C6CDD3;
	--text-muted: #8A939A;
	--accent: #7DD3FC;
	--accent-top: #9BDFFD;
	--accent-bottom: #6CC7F5;
	--on-accent: #0F1214;
	--accent-glow: rgba(125, 211, 252, 0.18);
	--accent-glow-strong: rgba(125, 211, 252, 0.28);
	--key-top: #2A3136;
	--key-bottom: #1B2024;
	--key-ink: #E6EAEE;
	--key-border: rgba(0, 0, 0, 0.60);
	--well: #0B0E10;
	--shadow: rgba(0, 0, 0, 0.45);
	--grid: rgba(245, 247, 249, 0.10);

	/* Material details the artboard uses identically in both themes. */
	--lit-highlight: rgba(255, 255, 255, 0.30);
	--key-inset-dark: rgba(0, 0, 0, 0.25);
	--well-wash: rgba(0, 0, 0, 0.12);
	--sweep-tint: rgba(255, 255, 255, 0.07);
	--mask-ink: #000; /* alpha for mask-image only; never painted */

	/* Type, per 05-design-system.md section 2. */
	--font-voice: "Schibsted Grotesk", Heebo, "Noto Sans", "Segoe UI", system-ui, sans-serif;
	--font-measured: "Martian Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
	--font-he: Heebo, "Noto Sans", sans-serif;
	--font-ru: "Noto Sans", "Schibsted Grotesk", sans-serif;
	--font-ja: "Noto Sans JP", "Schibsted Grotesk", sans-serif;
	--font-zh: "Noto Sans SC", "Schibsted Grotesk", sans-serif;

	--grain-opacity: 0.06;
	--pad: 80px;
	--gap: 40px;
	--section-gap: 110px;
}

:root[data-theme="light"] {
	--surface-base: #F2F4F6;
	--surface-glow: #FFFFFF;
	--panel-top: #FFFFFF;
	--panel-bottom: #F4F6F8;
	--row-top: #FFFFFF;
	--row-bottom: #F6F8FA;
	--border-subtle: #D6DDE3;
	--panel-highlight: rgba(255, 255, 255, 0.90);
	--text-primary: #0F1214;
	--text-secondary: #38424A;
	--text-muted: #63707A;
	--accent: #0E7490;
	--accent-top: #1A9BBC;
	--accent-bottom: #0E7490;
	--on-accent: #FAFBFC;
	--accent-glow: rgba(14, 116, 144, 0.12);
	--accent-glow-strong: rgba(14, 116, 144, 0.28);
	--key-top: #FFFFFF;
	--key-bottom: #E9EDF0;
	--key-ink: #0F1214;
	--key-border: #C9D1D8;
	--well: #E1E6EA;
	--shadow: rgba(15, 18, 20, 0.12);
	--grid: rgba(15, 18, 20, 0.10);

	--grain-opacity: 0.04;
}

/* ── ground ───────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; }

body {
	position: relative;
	background: var(--surface-base);
	color: var(--text-primary);
	font-family: var(--font-voice);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* Grain: an SVG noise filter, so the overlay carries no colour of its own. */
body::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	opacity: var(--grain-opacity);
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; }
button { font: inherit; color: inherit; }

.skip-link {
	position: absolute; top: -100%; inset-inline-start: 0; z-index: 200;
	background: var(--accent); color: var(--on-accent);
	padding: 10px 18px; font-size: 14px; font-weight: 600; border-radius: 0 0 9px 0;
}
.skip-link:focus { top: 0; }

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

/* ── the hero backdrop: ground glow, masked dot grid, breathing glow ── */

.backdrop {
	position: absolute;
	inset-block-start: 0; inset-inline: 0;
	height: 900px;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}
.backdrop-glow {
	position: absolute; inset: 0;
	background: radial-gradient(90% 60% at 70% 30%, var(--surface-glow) 0%, var(--surface-base) 60%);
}
.backdrop-grid {
	position: absolute; inset: 0;
	background-image: radial-gradient(circle, var(--grid) 1px, transparent 1.4px);
	background-size: 28px 28px;
	-webkit-mask-image: radial-gradient(55% 60% at 68% 42%, var(--mask-ink) 0%, transparent 100%);
	mask-image: radial-gradient(55% 60% at 68% 42%, var(--mask-ink) 0%, transparent 100%);
}
.backdrop-breathe {
	position: absolute;
	inset-block-start: 120px; inset-inline-start: 700px;
	width: 760px; height: 560px;
	border-radius: 999px;
	background: radial-gradient(closest-side, var(--accent-glow-strong) 0%, transparent 100%);
	filter: blur(40px);
	opacity: 0.55;
	transition: opacity 1.2s ease;
	animation: breathe 9s ease-in-out infinite;
}
.backdrop-breathe.bright { opacity: 1; transition: opacity 0.4s ease; }

@keyframes breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.85; } }

/* ── shell ────────────────────────────────────────────────────────── */

.shell {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--pad);
}

.section { padding-block-end: var(--section-gap); }
.section-head { display: flex; flex-direction: column; gap: 14px; max-width: 720px; margin-block-end: var(--gap); }

/* ── type ─────────────────────────────────────────────────────────── */

h1 {
	font-size: clamp(34px, 3.5vw, 50px);
	line-height: 1.06;
	font-weight: 600;
	letter-spacing: -0.03em;
}
h2 {
	font-size: clamp(28px, 2.8vw, 40px);
	line-height: 1.1;
	font-weight: 600;
	letter-spacing: -0.025em;
}
h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }

.lede { font-size: 18px; line-height: 1.55; color: var(--text-secondary); }
.lede-sm { font-size: 16px; line-height: 1.55; color: var(--text-secondary); }
.small { font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.final-cta-tagline { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.hero-social-proof { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.mono { font-family: var(--font-measured); font-variant-ligatures: none; }

[lang="he"] { font-family: var(--font-he); }
[lang="ru"] { font-family: var(--font-ru); }
[lang="ja"] { font-family: var(--font-ja); line-height: 1.6; }
[lang="zh"] { font-family: var(--font-zh); line-height: 1.6; }
.latin { font-family: var(--font-voice); }

/* ── material: panel, row, keycap, lit, well, LED, meter ──────────── */

.panel {
	position: relative;
	background: linear-gradient(180deg, var(--panel-top) 0%, var(--panel-bottom) 100%);
	border: 1px solid var(--border-subtle);
	border-radius: 18px;
	box-shadow:
		0 1px 0 var(--panel-highlight) inset,
		0 20px 50px var(--shadow),
		0 2px 6px var(--shadow);
}
.row {
	background: linear-gradient(180deg, var(--row-top) 0%, var(--row-bottom) 100%);
	border: 1px solid var(--border-subtle);
	border-radius: 12px;
	box-shadow: 0 1px 0 var(--panel-highlight) inset;
}

.key {
	display: inline-flex; align-items: center;
	height: 28px; padding: 0 10px;
	border-radius: 7px;
	border: 1px solid var(--key-border);
	font-family: var(--font-measured);
	font-size: 11px;
	color: var(--key-ink);
	background: linear-gradient(180deg, var(--key-top) 0%, var(--key-bottom) 100%);
	box-shadow:
		0 1px 0 var(--panel-highlight) inset,
		0 -2px 0 var(--key-inset-dark) inset,
		0 2px 3px var(--shadow);
	white-space: nowrap;
	cursor: default;
	transition: transform 120ms ease, box-shadow 120ms ease;
}
button.key, a.key { cursor: pointer; }
button.key:hover, a.key:hover {
	transform: translateY(1px);
	box-shadow:
		0 1px 0 var(--panel-highlight) inset,
		0 -1px 0 var(--key-inset-dark) inset,
		0 1px 2px var(--shadow);
}

.lit {
	display: inline-flex; align-items: center; justify-content: center;
	height: 38px; padding: 0 16px;
	border: 0; border-radius: 9px;
	font-family: var(--font-voice); font-size: 15px; font-weight: 600;
	color: var(--on-accent);
	background: linear-gradient(180deg, var(--accent-top) 0%, var(--accent-bottom) 100%);
	box-shadow: 0 1px 0 var(--lit-highlight) inset, 0 10px 28px var(--accent-glow-strong);
	cursor: pointer;
	white-space: nowrap;
	transition: transform 120ms ease, filter 120ms ease;
}
.lit:hover { filter: brightness(1.06); transform: translateY(-1px); }
.lit-lg { height: 50px; padding: 0 22px; border-radius: 11px; font-size: 17px; font-weight: 700; }

.led {
	display: inline-block; flex: none;
	width: 7px; height: 7px; border-radius: 999px;
	background: var(--accent);
	box-shadow: 0 0 8px var(--accent-glow-strong), 0 0 2px var(--accent);
}

.meter { display: flex; align-items: center; gap: 4px; height: 30px; }
.meter span { display: block; width: 5px; border-radius: 3px; background: var(--text-primary); }
.meter span:nth-child(1) { height: 10px; animation: meter1 0.9s ease-in-out infinite; }
.meter span:nth-child(2) { height: 26px; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow-strong); animation: meter2 0.7s ease-in-out infinite; }
.meter span:nth-child(3) { height: 16px; animation: meter3 1.1s ease-in-out infinite; }
.meter span:nth-child(4) { height: 12px; animation: meter1 0.8s ease-in-out infinite; }
.meter span:nth-child(5) { height: 22px; animation: meter3 0.95s ease-in-out infinite; }
.meter-lg { gap: 5px; height: 44px; }
.meter-lg span { width: 6px; }
.meter-lg span:nth-child(1) { height: 14px; }
.meter-lg span:nth-child(2) { height: 30px; }
.meter-lg span:nth-child(3) { height: 20px; }
.meter-lg span:nth-child(4) { height: 12px; }
.meter-lg span:nth-child(5) { height: 24px; }

@keyframes meter1 { 0%, 100% { height: 10px; } 50% { height: 26px; } }
@keyframes meter2 { 0%, 100% { height: 26px; } 50% { height: 14px; } }
@keyframes meter3 { 0%, 100% { height: 16px; } 50% { height: 30px; } }

.caret {
	display: inline-block;
	width: 3px; height: 1em;
	background: var(--accent);
	box-shadow: 0 0 8px var(--accent-glow-strong);
	vertical-align: -0.15em;
	margin-inline-start: 4px;
	animation: blink 1s step-end infinite;
}
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.segmented {
	display: inline-flex; align-items: center; gap: 2px;
	padding: 3px; border-radius: 9px;
	background: var(--well);
	box-shadow: 0 2px 4px var(--shadow) inset;
	font-size: 12px; font-weight: 600;
}
.segmented > span { padding: 5px 12px; border-radius: 7px; color: var(--text-muted); }
.segmented > .key { height: 26px; border-radius: 7px; font-family: var(--font-voice); font-size: 12px; font-weight: 600; padding: 0 12px; }

/* ── nav ──────────────────────────────────────────────────────────── */

.nav {
	display: flex; align-items: center;
	height: 76px;
	gap: 32px;
}
.brand { display: flex; align-items: center; gap: 10px; flex: none; margin-inline-end: auto; }
.brand svg { width: 26px; height: 26px; color: var(--text-primary); }
.brand span { font-size: 19px; font-weight: 700; letter-spacing: -0.03em; }
.nav-actions { display: flex; align-items: center; gap: 32px; }
.nav-links { display: flex; align-items: center; gap: 32px; font-size: 15px; font-weight: 500; color: var(--text-secondary); }
.nav-links a:hover { color: var(--text-primary); }
.themer {
	width: 34px; height: 34px; flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 8px;
	border: 1px solid var(--border-subtle);
	background: none;
	color: var(--text-muted);
	cursor: pointer;
}
.themer:hover { color: var(--text-primary); }

/* ── hero ─────────────────────────────────────────────────────────── */

.hero {
	display: grid;
	grid-template-columns: 560px minmax(0, 1fr);
	gap: var(--gap);
	align-items: center;
	padding-block: 90px var(--section-gap);
}
.hero-copy { display: flex; flex-direction: column; gap: 28px; }
.hero-copy .lede { font-size: 20px; max-width: 500px; }
.hero-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.speak-in { display: flex; flex-direction: column; gap: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; max-width: 520px; }
.chip { font-family: var(--font-voice); font-size: 13px; font-weight: 500; }
.chip[lang="he"] { font-family: var(--font-he); }
.chip[lang="ru"] { font-family: var(--font-ru); }
.chip[lang="ja"] { font-family: var(--font-ja); }
.chip[lang="zh"] { font-family: var(--font-zh); }
.chip.lit {
	height: 28px; padding: 0 10px; border-radius: 7px;
	font-size: 13px; font-weight: 500;
	border: 1px solid transparent;
	box-shadow: 0 1px 0 var(--lit-highlight) inset, 0 6px 16px var(--accent-glow-strong);
	transition: transform 120ms ease, filter 120ms ease;
}
.hero-footnote { max-width: 480px; }

.hero-panel { border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; }
.hero-panel .sweep {
	position: absolute; inset: 0; z-index: 2;
	pointer-events: none;
	background: linear-gradient(115deg, transparent 35%, var(--sweep-tint) 48%, transparent 62%);
	transform: translateX(-120%);
}
.hero-panel.sweep-once .sweep { animation: sweep 2.4s ease-out 0.4s 1 forwards; }
@keyframes sweep { to { transform: translateX(120%); } }

.panel-head {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 18px 26px;
	border-block-end: 1px solid var(--border-subtle);
}
.panel-label { font-size: 11px; color: var(--accent); }
.panel-body { display: flex; flex-direction: column; gap: 22px; padding: 26px 26px 24px; }
/* Three lines at 1440: every one of the eight sentences fits, so the panel
   does not resize as the rotator advances. */
.said { font-size: 22px; line-height: 1.5; color: var(--text-muted); min-height: 99px; }
.landed { font-size: 30px; line-height: 1.35; font-weight: 500; letter-spacing: -0.015em; color: var(--text-primary); }

.log {
	display: flex; flex-direction: column; gap: 10px;
	padding: 18px 26px 22px;
	border-block-start: 1px solid var(--border-subtle);
	background: var(--well-wash);
	font-size: 13px;
	color: var(--text-secondary);
}
.log-row { display: grid; grid-template-columns: 120px 120px minmax(0, 1fr); gap: 28px; }
.log-row .t { color: var(--text-primary); }
.log-row .d { color: var(--text-muted); display: inline-flex; align-items: center; gap: 8px; }
.log-row.dim .t { color: var(--text-muted); }
.log-row.hi .t, .log-row.hi .e { color: var(--accent); }

/* ── how it works ─────────────────────────────────────────────────── */

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.step { display: flex; flex-direction: column; gap: 18px; padding: 28px; }
.step-mark { display: flex; align-items: center; height: 44px; }
.step-mark .key { height: 36px; font-size: 13px; }
.step-cursor { display: flex; align-items: center; height: 44px; font-size: 22px; color: var(--text-primary); }

/* ── one breath, two scripts ──────────────────────────────────────── */

.split-440 { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: var(--gap); align-items: start; }
.scripts-copy { display: flex; flex-direction: column; gap: 14px; }
.script-keys { display: flex; flex-wrap: wrap; gap: 8px; }
.script-keys .key { font-family: var(--font-voice); font-size: 13px; font-weight: 500; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mix { display: flex; flex-direction: column; gap: 10px; padding: 22px 26px; }
.mix p { font-size: 22px; line-height: 1.5; color: var(--text-primary); }
.mix p[dir="rtl"] { text-align: right; }
.mix .cap { font-family: var(--font-measured); font-size: 11px; color: var(--text-muted); margin-block-start: auto; }

/* ── receipt ──────────────────────────────────────────────────────── */

.split-560 { display: grid; grid-template-columns: 560px minmax(0, 1fr); gap: var(--gap); align-items: center; }
.receipt { border-radius: 22px; overflow: hidden; }
.receipt-head { display: flex; flex-direction: column; gap: 10px; padding: 24px 28px; }
.receipt-head .cap { font-family: var(--font-measured); font-size: 11px; color: var(--text-muted); }
.receipt-head .say { font-size: 18px; line-height: 1.45; color: var(--text-primary); }
.receipt-rows {
	display: flex; flex-direction: column; gap: 12px;
	padding: 20px 28px 24px;
	border-block-start: 1px solid var(--border-subtle);
	background: var(--well-wash);
	font-family: var(--font-measured);
	font-size: 14px;
	color: var(--text-secondary);
}
.receipt-rows > div { display: flex; justify-content: space-between; gap: 16px; }
.receipt-rows dt { color: var(--text-secondary); }
.receipt-rows dd { color: var(--text-primary); }
.receipt-rows .hi dd { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); }
.receipt-rows .rule { padding-block-start: 12px; border-block-start: 1px solid var(--border-subtle); }
.receipt-copy { display: flex; flex-direction: column; gap: 14px; max-width: 600px; }

/* ── small on purpose ─────────────────────────────────────────────── */

.small-grid { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 24px; align-items: stretch; }
.appwin { width: 380px; max-width: 100%; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.appwin-head { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 12px 0 14px; }
.appwin-head .brand svg { width: 20px; height: 20px; }
.appwin-head .brand span { font-size: 14px; letter-spacing: -0.02em; }
.appwin-head .mono { font-size: 10px; color: var(--text-muted); }
.appwin-transcript { margin: 0 12px; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border-radius: 12px; }
.appwin-transcript p { font-size: 15px; line-height: 1.5; }
.appwin-actions { display: flex; align-items: center; gap: 8px; }
.appwin-actions .key { height: 34px; font-family: var(--font-voice); font-size: 13px; font-weight: 600; }
.appwin-actions .lit { height: 34px; padding: 0 14px; font-size: 13px; }
.appwin-receipt {
	display: flex; align-items: center; gap: 8px;
	font-family: var(--font-measured); font-size: 11px; color: var(--text-muted);
	padding-block-start: 10px; border-block-start: 1px solid var(--border-subtle);
}
.appwin-hint { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 6px; font-size: 12px; color: var(--text-muted); }
.appwin-hint .keys { display: flex; align-items: center; gap: 7px; }
.appwin-hint .keys .key { height: 24px; font-size: 10px; }
.appwin-hint .state { color: var(--text-secondary); font-weight: 600; }
.appwin-spacer { flex-grow: 1; min-height: 12px; }
.appwin-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 54px; padding: 0 12px; border-block-start: 1px solid var(--border-subtle); }
.appwin-bar .mono { font-size: 11px; color: var(--text-secondary); }

.small-col { display: flex; flex-direction: column; gap: 24px; }
.feature { display: flex; align-items: center; gap: 28px; padding: 24px 28px; }
.feature-copy { display: flex; flex-direction: column; gap: 6px; }
.feature-copy h3 { font-size: 20px; }
.indicator-chip { width: 96px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center; gap: 5px; flex: none; }
.tray-chip { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; border-radius: 10px; flex: none; }
.tray-chip svg { width: 16px; height: 16px; color: var(--text-primary); }
.tray-chip .sep { width: 1px; height: 18px; background: var(--border-subtle); }
.tray-chip .mono { font-size: 11px; color: var(--text-secondary); }
.platforms { display: flex; flex-direction: column; gap: 14px; padding: 24px 28px; }
.platform-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.platform-keys .key { height: 40px; justify-content: center; font-family: var(--font-voice); font-size: 14px; font-weight: 600; }

/* ── plans ────────────────────────────────────────────────────────── */

.plan { display: flex; flex-direction: column; gap: 16px; padding: 28px; }
.plan .tier { font-family: var(--font-measured); font-size: 11px; color: var(--text-muted); }
.plan .amount { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.plan .cta { margin-block-start: auto; }
.plan a.key.cta { height: 40px; justify-content: center; font-family: var(--font-voice); font-size: 14px; font-weight: 600; }
.plan .lit.cta { height: 40px; font-size: 14px; }
.plan .small.cta { height: 40px; display: inline-flex; align-items: center; }

/* ── questions ────────────────────────────────────────────────────── */

.qa { display: flex; flex-direction: column; }
.qa > div { display: flex; flex-direction: column; gap: 8px; padding: 22px 0; border-block-start: 1px solid var(--border-subtle); }
.qa > div:last-child { border-block-end: 1px solid var(--border-subtle); }
.qa h3 { font-size: 18px; }

/* ── final call ───────────────────────────────────────────────────── */

.final { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; padding-block-end: 100px; }
.final h2 { font-size: clamp(30px, 3.1vw, 44px); }
.final-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.final-note { max-width: 640px; }

/* ── footer ───────────────────────────────────────────────────────── */

.footer {
	display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
	padding-block: 28px 40px;
	border-block-start: 1px solid var(--border-subtle);
	font-size: 14px;
	color: var(--text-muted);
}
.footer a:hover { color: var(--text-primary); }
.footer .mark { display: flex; align-items: center; gap: 10px; }
.footer .mark svg { width: 18px; height: 18px; color: var(--text-muted); }
.footer-links { display: flex; gap: 28px; flex-wrap: wrap; }
.footer-langs { display: flex; gap: 16px; flex-wrap: wrap; }

/* ── responsive ───────────────────────────────────────────────────── */

@media (max-width: 1240px) {
	:root { --pad: 48px; --section-gap: 90px; }
	.hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
	.split-440 { grid-template-columns: 340px minmax(0, 1fr); }
	.split-560 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.small-grid { grid-template-columns: 340px minmax(0, 1fr); }
	.appwin { width: 100%; }
}

@media (max-width: 1100px) {
	.hero { grid-template-columns: minmax(0, 1fr); gap: 44px; padding-block-start: 56px; }
	.hero-copy .lede, .chips, .hero-footnote { max-width: none; }
	.split-440, .split-560, .small-grid { grid-template-columns: minmax(0, 1fr); }
	.grid-3 { grid-template-columns: minmax(0, 1fr); }
	.appwin { width: 100%; max-width: 420px; }
	.backdrop { height: 760px; }
	.backdrop-breathe { inset-block-start: 380px; inset-inline-start: 12%; width: 76%; height: 380px; }
}

@media (max-width: 760px) {
	.grid-2 { grid-template-columns: minmax(0, 1fr); }
	.feature { flex-direction: column; align-items: flex-start; gap: 18px; }
	.platform-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.footer { flex-direction: column; align-items: flex-start; gap: 20px; }
}

@media (max-width: 640px) {
	:root { --pad: 20px; --gap: 28px; --section-gap: 72px; }

	.nav { height: auto; padding-block: 14px; flex-wrap: wrap; gap: 12px; }
	.nav-actions { gap: 12px; }
	.nav-links { order: 3; width: 100%; gap: 4px; font-size: 14px; justify-content: space-between; }
	.nav-links a { display: inline-flex; align-items: center; min-height: 44px; }

	.hero { padding-block: 36px var(--section-gap); }
	.hero-panel { border-radius: 18px; }
	.panel-head, .panel-body, .log { padding-inline: 18px; }
	.said { font-size: 19px; min-height: 0; }
	.landed { font-size: 24px; }
	.log { font-size: 11px; gap: 12px; }
	.log-row { grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; }
	.log-row .d { grid-column: 1 / -1; }

	.mix { padding: 18px 20px; }
	.mix p { font-size: 19px; }
	.receipt { border-radius: 18px; }
	.receipt-head, .receipt-rows { padding-inline: 20px; }
	.receipt-rows { font-size: 12px; }
	.step, .plan, .feature, .platforms { padding: 22px 20px; }
	.appwin-transcript { margin-inline: 10px; }
	.final { padding-block-end: 72px; }
}

/* Touch: the accessibility floor in 05-design-system.md section 7 wins over
   the artboard's 28px desktop chips. */
@media (pointer: coarse), (max-width: 640px) {
	.chips { gap: 10px; }
	.chip, .chip.lit { height: 44px; padding: 0 16px; font-size: 14px; border-radius: 9px; }
	.themer { width: 44px; height: 44px; }
	.nav .lit { height: 44px; }
}

/* ── reduced motion: mirrors the app reset at src/styles.css:175–184 ── */

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