/* =========================================================================
   Onsider — Website Styles (W08)
   Field-manual / heist-briefing brand. Pitch green + cream paper.
   JetBrains Mono (headings/labels/UI) + Inter (body) — SELF-HOSTED (no CDN).
   No OS dark-mode variant by design: the alternating cream/green surfaces ARE
   the art direction (W03 §0). All text tokens verified >=4.5:1 (W03 §3a).
   Paths are RELATIVE so the site works at file:// and on Cloudflare Pages.
   ========================================================================= */

/* ---------- @font-face (self-hosted woff2, no Google Fonts) ---------- */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('assets/fonts/jetbrains-mono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2018-2019, U+201C-201D, U+2026, U+2013-2014;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('assets/fonts/jetbrains-mono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2018-2019, U+201C-201D, U+2026, U+2013-2014;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('assets/fonts/jetbrains-mono-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2018-2019, U+201C-201D, U+2026, U+2013-2014;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2018-2019, U+201C-201D, U+2026, U+2013-2014;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2018-2019, U+201C-201D, U+2026, U+2013-2014;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2018-2019, U+201C-201D, U+2026, U+2013-2014;
}

/* =========================================================================
   Design System Tokens (W03 §10 — copied verbatim)
   ========================================================================= */
:root {
  color-scheme: light;   /* opt the document out of OS dark inversion; brand colours stay fixed */

  /* ---- Brand surfaces & ink ---- */
  --color-bg:                 #F5EDD8;  /* Cream Paper — default bg, type-on-dark */
  --color-bg-card:            #FFFFFF;  /* White inner cards on cream */
  --color-surface-green:      #1A3D2B;  /* Pitch Green — dark sections */
  --color-surface-green-soft: #234D37;  /* gradient highlight (stop only) */
  --color-surface-green-deep: #122A1E;  /* deepest section / testimonials */
  --color-bg-dark:            #0D0D0D;  /* GO LIVE dark / footer / button text */

  /* ---- Text ---- */
  --color-text:               #1C1C1C;            /* Ink — any size on cream/white */
  --color-text-muted:         rgba(28,28,28,0.72);/* 6.19:1 on cream */
  --color-text-on-dark:       #F5EDD8;            /* cream on green/dark */
  --color-text-on-dark-muted: rgba(245,237,216,0.78);
  --color-text-on-dark-strong:#FFFFFF;            /* on GO LIVE dark only */

  /* ---- Action / signal ---- */
  --color-action:       #D4870A;  /* Amber — fills/UI/CTA. NOT FOR TEXT on cream/white */
  --color-action-press: #9C6207;  /* button hard-shadow / pressed amber */
  --color-amber-ink:    #945D06;  /* readable amber TEXT on light (4.70:1 cream) */
  --color-signal-red:   #C0392B;  /* NEVER-SAY / risk-high. Text: cream/white (4.66:1) */
  --color-safe-green:   #2ECC71;  /* risk-safe dot / tick FILL. NOT FOR TEXT on light */
  --color-safe-green-ink:#1D7A47; /* darkened safe-green for SAFE label text on white */

  /* ---- Lines / focus / state ---- */
  --color-line:            rgba(28,28,28,0.14);    /* hairline on cream/white */
  --color-line-dark:       rgba(245,237,216,0.16); /* hairline on green/dark */
  --color-focus:           #945D06;  /* focus ring on light (4.70:1 as UI) */
  --color-focus-companion: #0D0D0D;  /* dark inner companion outline */
  --color-success:         #2ECC71;  /* success accent (dot/border; text stays ink/cream) */
  --color-error:           #C0392B;  /* error border + text on cream/white */
  --color-warning:         #D4870A;  /* warning fill/border (ink/dark text) */

  /* ---- Typography ---- */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  --font-size-xs:   0.6875rem;                                  /* 11px mono-label */
  --font-size-sm:   0.8125rem;                                  /* 13px */
  --font-size-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);   /* 16->17px body */
  --font-size-md:   clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);  /* 17->19px subtitle */
  --font-size-lg:   1.25rem;                                    /* 20px H3 */
  --font-size-xl:   clamp(1.25rem, 1rem + 1.2vw, 1.625rem);     /* 20->26px lead */
  --font-size-2xl:  clamp(1.75rem, 1.2rem + 2.6vw, 2.5rem);     /* 28->40px H2 */
  --font-size-3xl:  2.5rem;                                     /* 40px price */
  --font-size-4xl:  clamp(2.125rem, 1.4rem + 3.6vw, 3.5rem);    /* 34->56px H1 */

  --ls-tight: -0.01em; --ls-label: 0.14em; --ls-label-wide: 0.18em; --ls-cta: 0.04em;
  --lh-tight: 1.15; --lh-snug: 1.4; --lh-body: 1.65; --lh-relaxed: 1.7;

  /* ---- Spacing (4pt grid) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --space-xs: var(--s-1); --space-sm: var(--s-2); --space-md: var(--s-3);
  --space-base: var(--s-4); --space-lg: var(--s-5); --space-xl: var(--s-6);
  --space-2xl: var(--s-7); --space-3xl: var(--s-8); --space-4xl: var(--s-9);

  --section-pad-y: var(--s-9); --section-pad-y-mobile: var(--s-8);
  --card-pad: var(--s-6); --grid-gap: var(--s-5);
  --prose-max: 720px; --prose-max-wide: 760px;

  /* ---- Radius ---- */
  --radius: 10px; --radius-chip: 8px; --radius-pill: 20px;

  /* ---- Layout ---- */
  --maxw: 1120px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 24px -12px rgba(0,0,0,0.25);
  --shadow-lg: 0 16px 40px -24px rgba(212,135,10,0.6);
  --shadow-xl: 0 30px 60px -20px rgba(0,0,0,0.55);
  --shadow-key: 0 6px 0 0 #9C6207;          /* button signature (LOCKED) */
  --shadow-key-hover: 0 8px 0 0 #9C6207;
  --shadow-key-active: 0 2px 0 0 #9C6207;

  /* ---- Motion ---- */
  --ease: ease; --dur-fast: 0.12s; --dur: 0.18s;

  /* ---- iOS safe-area insets (W04 §1) ---- */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  /* sticky nav height for scroll-margin-top */
  --nav-h: calc(64px + var(--safe-t));
}

/* No @media (prefers-color-scheme: dark) block — intentional (W03 §0). */

/* =========================================================================
   Reset / base
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: auto;            /* smooth scroll is opt-in below (reduced-motion-safe) */
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--color-action-press) var(--color-bg);
  scrollbar-width: thin;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  /* W14 perf #2: text-rendering:optimizeLegibility removed — it forces pre-paint
     kerning/ligatures on the LCP <h1>; no visual gain for this mono/sans type system. */
}

h1, h2, h3, h4 { font-family: var(--font-mono); }
h1, h2, h3, h4 { line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin: 0 0 var(--s-4); }
h1 { font-size: var(--font-size-4xl); font-weight: var(--fw-bold); }
h2 { font-size: var(--font-size-2xl); font-weight: var(--fw-bold); }
h3 { font-size: var(--font-size-lg); font-weight: var(--fw-bold); letter-spacing: normal; }

p { margin: 0 0 var(--s-4); }
a { color: inherit; }
ul { margin: 0; padding: 0; }
img, svg { max-width: 100%; display: block; }
strong { font-weight: var(--fw-semibold); }

/* Native form controls: never inherit OS dark styling; match the brand (W03 §11) */
input, textarea, select, button {
  font: inherit;
  color: var(--color-text);
}
input::placeholder { color: var(--color-text-muted); opacity: 1; }

input:-webkit-autofill,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-text);
  box-shadow: 0 0 0 1000px var(--color-bg-card) inset;
  caret-color: var(--color-text);
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-action-press); border-radius: var(--radius-pill); border: 3px solid var(--color-bg); }
::selection { background: rgba(212,135,10,0.28); color: var(--color-text); }
* { -webkit-tap-highlight-color: rgba(212,135,10,0.18); }

/* =========================================================================
   Layout primitives
   ========================================================================= */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: max(var(--s-5), var(--safe-l));
  padding-right: max(var(--s-5), var(--safe-r));
}

.section { padding-block: var(--section-pad-y); }
.section--cream      { background: var(--color-bg); color: var(--color-text); }
.section--green      { background: var(--color-surface-green); color: var(--color-text-on-dark); }
.section--green-deep { background: var(--color-surface-green-deep); color: var(--color-text-on-dark); }
.section--gradient   { background: radial-gradient(120% 140% at 20% -20%, var(--color-surface-green-soft), var(--color-surface-green) 55%, var(--color-surface-green-deep)); color: var(--color-text-on-dark); }
.section--dark       { background: var(--color-bg-dark); color: var(--color-text-on-dark); }

/* Anchored sections never hide under the sticky nav */
[id] { scroll-margin-top: var(--nav-h); }

.prose { max-width: var(--prose-max); }
.lead { font-size: var(--font-size-xl); max-width: var(--prose-max-wide); }

/* =========================================================================
   Utilities
   ========================================================================= */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: var(--s-4); top: -120px;
  z-index: 100;
  background: var(--color-action);
  color: var(--color-bg-dark);
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: var(--font-size-sm);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--radius);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex; align-items: center;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: calc(var(--s-2) + var(--safe-t)); }

/* Eyebrow / mono-label — the loudest typographic gesture (sparing) */
.mono-label {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label-wide);
  text-transform: uppercase;
  margin: 0 0 var(--s-4);
  display: inline-block;
}
/* W14 FIX 1 (a11y S-2, WCAG 1.4.3): eyebrows render at 11px/700 — below the
   large-text threshold (≥18.67px bold) — so amber (#D4870A) is NOT contrast-safe
   as text on green/dark (4.16:1 < 4.5:1). On dark/green surfaces use cream
   (10.30:1); on light use amber-ink (4.70:1). Amber stays the FILL/CTA colour
   everywhere; it is simply not used as small-eyebrow TEXT. */
.section--green .mono-label,
.section--green-deep .mono-label,
.section--gradient .mono-label,
.section--dark .mono-label,
.hero .mono-label { color: var(--color-text-on-dark); }
/* On light surfaces, eyebrows use amber-ink (4.70:1) — never raw amber */
.section--cream .mono-label { color: var(--color-amber-ink); }

.section-intro { color: var(--color-text-muted); max-width: 680px; margin-bottom: var(--s-7); }
.section--green .section-intro,
.section--green-deep .section-intro,
.section--gradient .section-intro,
.section--dark .section-intro { color: var(--color-text-on-dark-muted); }

/* =========================================================================
   Focus — surface-aware dual ring (W03 §6.1 / W04 §8)
   ========================================================================= */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  /* W14 FIX 3 (a11y S-1, WCAG 1.4.11 / 2.4.7): 2px companion guarantees a >=3:1
     edge even where the amber outer ring dips on the lightest gradient stop
     (#234D37 -> 3.32:1). Two-tone ring stays visible on every surface. */
  box-shadow: 0 0 0 2px var(--color-focus-companion);
  border-radius: inherit;
}
.section--dark :focus-visible,
.section--green :focus-visible,
.section--green-deep :focus-visible,
.section--gradient :focus-visible,
.hero :focus-visible,
footer :focus-visible { outline-color: var(--color-action); }

/* =========================================================================
   Buttons — the amber hard-shadow signature (LOCKED)
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-cta);
  text-decoration: none;
  padding: var(--s-3) var(--s-6);
  min-height: 44px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.btn-primary {
  background: var(--color-action);
  color: var(--color-bg-dark);
  box-shadow: var(--shadow-key);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-key-hover); }
.btn-primary:active { transform: translateY(2px); box-shadow: var(--shadow-key-active); }

.btn-large { font-size: 17px; padding: var(--s-4) var(--s-7); }

.btn-ghost {
  background: transparent;
  color: var(--color-text-on-dark);
  border-color: var(--color-line-dark);
  box-shadow: none;
}
.btn-ghost:hover { border-color: var(--color-action); color: var(--color-action); }

/* Ghost on a light surface (rare — pricing free card CTA) */
.btn-ghost-light {
  background: transparent;
  color: var(--color-surface-green);
  border-color: var(--color-line);
  box-shadow: none;
}
.btn-ghost-light:hover { border-color: var(--color-amber-ink); color: var(--color-amber-ink); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: var(--shadow-key);
}
.btn-ghost[disabled], .btn-ghost[aria-disabled="true"] { box-shadow: none; }

/* =========================================================================
   Sticky nav (W04 §2)
   ========================================================================= */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(26,61,43,0.92);
  border-bottom: 1px solid var(--color-line-dark);
  box-shadow: 0 2px 16px -8px rgba(0,0,0,0.4);
  padding-top: var(--safe-t);
  transition: padding var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
  .site-nav { background: rgba(26,61,43,0.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}
.site-nav.is-scrolled { box-shadow: 0 4px 22px -8px rgba(0,0,0,0.55); }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--s-3) max(var(--s-5), var(--safe-l));
  padding-right: max(var(--s-5), var(--safe-r));
}
.site-nav.is-scrolled .nav-inner { padding-block: 10px; }

.wordmark {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  color: var(--color-text-on-dark);
  text-decoration: none;
  /* W14 FIX 4 (a11y M-2, WCAG 2.5.8): pad the ~20px-tall wordmark link to the
     44px target goal. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.wordmark::after {
  content: "\25CF";  /* ● decorative live-dot */
  color: var(--color-action);
  font-size: 11px;
  margin-left: 6px;
  vertical-align: middle;
}
/* Nav app-icon mark beside the wordmark — iOS-style rounded square (W08 R1).
   The 44px touch target stays on .wordmark (min-height + inline-flex); this just
   adds the icon and a gap, it does not shrink the hit area. */
.wordmark-icon {
  width: 26px; height: 26px;
  border-radius: 22%;
  margin-right: var(--s-2);
  flex: 0 0 auto;
}

.nav-anchors { display: none; align-items: center; gap: var(--s-6); }
.nav-anchors a {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  /* W14 FIX (a11y, WCAG 1.4.3): nav anchors render over a translucent sticky nav
     that, at the top of the page, sits on the hero's BRIGHT gradient stop — there
     the muted (0.78) cream dipped to ~4.4:1, right at/under the 4.5:1 floor. Use
     full-opacity cream (>=6.2:1 even on the lightest nav stop). Hover still goes amber. */
  color: var(--color-text-on-dark);
  text-decoration: none;
  padding: var(--s-2) 0;
  transition: color var(--dur-fast) var(--ease);
}
.nav-anchors a:hover { color: var(--color-action); }

.nav-cta {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-cta);
  text-decoration: none;
  color: var(--color-bg-dark);
  background: var(--color-action);
  padding: 10px var(--s-4);
  min-height: 44px;
  border: none;
  border-radius: var(--radius-chip);
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: filter var(--dur-fast) var(--ease);
}
.nav-cta:hover { filter: brightness(1.07); }

/* =========================================================================
   Hero (W04 §3.1)
   ========================================================================= */
.hero {
  background: radial-gradient(120% 120% at 80% -10%, var(--color-surface-green-soft), var(--color-surface-green) 55%, var(--color-surface-green-deep));
  color: var(--color-text-on-dark);
  border-bottom: 1px solid var(--color-line-dark);
}
.hero-content {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--s-7) max(var(--s-5), var(--safe-l)) var(--s-6);
  padding-right: max(var(--s-5), var(--safe-r));
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  align-items: center;
}
.hero-copy { max-width: 560px; }
.hero-copy h1 {
  color: var(--color-text-on-dark);
  margin-bottom: var(--s-4);
  /* Slightly gentler than the global H1 clamp (52px cap vs 56px, ~32px on phones)
     so the headline holds to 3 lines in the 560px hero column instead of 4; paired
     with text-wrap:balance for even lines and an &nbsp; bind on "does, though" so
     "though" never orphans onto its own line. */
  font-size: clamp(1.875rem, 1.56rem + 1.88vw, 3.25rem);
  text-wrap: balance;
}
.hero-copy .subtitle {
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  color: var(--color-text-on-dark-muted);
  margin-bottom: var(--s-6);
}
.hero-reassurance {
  margin-top: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  letter-spacing: var(--ls-cta);
  color: var(--color-text-on-dark-muted);
}

/* Hero visual — rotated brief-card (CSS) */
.hero-visual { display: flex; justify-content: center; order: -1; }
.brief-card {
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: var(--radius);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-xl);
  padding: var(--s-5);
  width: 100%;
  max-width: 360px;
  position: relative;
  transform: rotate(0deg);
}
.brief-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--color-action);
  border-radius: var(--radius) var(--radius) 0 0;
}
.brief-card .card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-4); gap: var(--s-3); }
.brief-card .card-head .mono-label { margin: 0; color: var(--color-surface-green); }
.brief-card .kickoff { font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--color-text-muted); letter-spacing: 0.08em; }
.brief-card .line { font-size: 18px; font-weight: var(--fw-semibold); line-height: var(--lh-snug); margin-bottom: var(--s-4); }
.brief-card .why {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--s-1);
}
.brief-card .fact {
  font-size: 14px;
  color: var(--color-text-muted);
  border-left: 2px solid var(--color-line);
  padding-left: var(--s-3);
  margin-bottom: var(--s-4);
}
.risk {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label); text-transform: uppercase;
}
.risk .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.risk.safe .dot { background: var(--color-safe-green); }
.risk.safe { color: var(--color-safe-green-ink); }
.pron-chip {
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  background: var(--color-surface-green);
  color: var(--color-text-on-dark);
  display: inline-block;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-chip);
}

/* =========================================================================
   Dual-state CTA region (W04 §4) — THE central component
   Default DOM = coming-soon visible, live HIDDEN. JS may flip via
   data-launch-state on <html>. No-JS = always shows the safe waitlist state.
   ========================================================================= */
.cta-region { width: 100%; max-width: 480px; }
.cta-section .cta-region, .hero .cta-region.cta-region--center { margin-inline: auto; }

/* Show coming-soon by default; hide live. */
.cta-state--live { display: none; }
.cta-state--coming-soon { display: block; }
/* When the document flips to live, swap. */
html[data-launch-state="live"] .cta-state--coming-soon { display: none; }
html[data-launch-state="live"] .cta-state--live { display: block; }

/* Waitlist form */
.waitlist-form { display: flex; flex-direction: column; gap: var(--s-3); }
.waitlist-field-label {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  display: block;
}
.section--green-deep .waitlist-field-label,
.hero .waitlist-field-label,
.section--gradient .waitlist-field-label { color: var(--color-text-on-dark); }
.waitlist-row { display: flex; flex-direction: column; gap: var(--s-3); }
.waitlist-input {
  width: 100%;
  font-size: 16px;            /* >=16px: prevents iOS zoom */
  background: var(--color-bg-card);
  color: var(--color-text);
  /* W14 FIX 2 (a11y M-1, WCAG 1.4.11): 1px var(--color-line) was 1.33:1 — fails
     the 3:1 control-border floor. 1.5px var(--color-text-muted) is ~4.6:1 on
     white, so the idle field is perceivable before focus/error. Error state's
     2px red border still overrides this. */
  border: 1.5px solid var(--color-text-muted);
  border-radius: var(--radius);
  padding: 12px var(--s-4);
  min-height: 44px;
}
.waitlist-input[aria-invalid="true"] { border: 2px solid var(--color-error); }
.waitlist-form .btn-primary { width: 100%; }
.waitlist-consent {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-text-on-dark-muted);
  margin: 0;
}
.section--cream .waitlist-consent { color: var(--color-text-muted); }

/* Honeypot (hidden from users + AT) */
.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Inline error */
.field-error {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-signal-red);
  margin: 0;
  display: none;
  align-items: center;
  gap: var(--s-2);
}
.field-error.is-visible { display: flex; }
/* On dark hero, put error text in a cream chip so red stays readable */
.hero .field-error.is-visible,
.section--gradient .field-error.is-visible {
  background: var(--color-bg);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-chip);
  border-left: 3px solid var(--color-error);
}
.field-error::before { content: "\26A0"; } /* ⚠ — not colour-alone */

/* Success block (replaces form in place) */
.waitlist-success { display: none; }
.waitlist-success.is-visible { display: block; }
.waitlist-success .success-head {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: var(--font-size-lg);
  margin-bottom: var(--s-3);
}
.waitlist-success .success-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--color-success); flex: 0 0 auto; box-shadow: 0 0 0 4px rgba(46,204,113,0.18); }
.waitlist-success p { color: var(--color-text-on-dark-muted); margin: 0; }
.section--cream .waitlist-success p { color: var(--color-text-muted); }
.success-share { margin-top: var(--s-3); }
.success-share a { color: var(--color-action); font-family: var(--font-mono); font-size: var(--font-size-sm); text-decoration: underline; }

/* Submitting spinner */
.btn-spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(13,13,13,0.35);
  border-top-color: var(--color-bg-dark);
  border-radius: 50%;
  display: none;
  animation: spin 0.7s linear infinite;
}
.is-submitting .btn-spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Dimmed "coming soon" chip (non-clickable; custom — NOT an Apple badge) */
.coming-soon-chip {
  margin-top: var(--s-4);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  padding: 10px var(--s-4);
  min-height: 40px;
  border: 1px dashed var(--color-line-dark);
  border-radius: var(--radius-chip);
  opacity: 0.6;
  user-select: none;
}

/* Live App Store badge */
.appstore-badge {
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* >=44px tap target; badge art >=40px */
}
.appstore-badge img { height: 48px; width: auto; }
.risk-reversal {
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-on-dark-muted);
}
.section--cream .risk-reversal { color: var(--color-text-muted); }
/* W14 FIX (a11y, WCAG 1.4.3): the highlighted "Free to download" span was raw
   amber #D4870A as TEXT — 4.16:1 on green / 3.32:1 on the gradient at 13–19px/400,
   below the 4.5:1 normal-text floor (and not large-text). On dark surfaces use
   full-opacity cream so it still "pops" against the muted (0.78) siblings while
   passing AA (10.30:1). On light surfaces use amber-ink (4.70:1). Same rule as
   FIX 1: amber is a fill/accent, never small-text. */
.risk-reversal span { color: var(--color-text-on-dark); }
.section--cream .risk-reversal span { color: var(--color-amber-ink); }

.hero-actions { margin-top: var(--s-5); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); }
.btn-secondary-link {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-on-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--color-line-dark);
  padding-block: var(--s-3);   /* W14 FIX 6 (a11y M-3): 12px pad -> effective height ~37px, closer to the 44px goal */
}
.btn-secondary-link:hover { color: var(--color-action); border-color: var(--color-action); }

/* =========================================================================
   Problem / PAS (W04 §3.2)
   ========================================================================= */
/* Scene-setter cold-open (W08 R2: relocated from the hero). Inter italic, quiet,
   muted-INK on cream (6.19:1) — it must never compete with the headline that
   follows. Sits above the section eyebrow; breathing room below it (--s-6). */
.scene-setter {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: var(--font-size-base);
  line-height: var(--lh-snug);
  color: var(--color-text-muted);
  max-width: 46ch;
  margin: 0 0 var(--s-6);
}
.scene-setter em { font-style: italic; }
.problem .lead strong { color: var(--color-surface-green); }
.card-grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap); margin-top: var(--s-7); }
.pain-point {
  background: var(--color-bg-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--card-pad) var(--s-5);
}
.pain-point h3 { color: var(--color-signal-red); font-size: 18px; }
.pain-point p { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-base); }

/* "Known casualties" roll-call (W08 R1) — a lighter, denser audience beat below
   the dread cards. One framed list, not three more heavy cards. Tokens only:
   on cream → ink/amber-ink eyebrow, muted-ink body. */
.casualties {
  margin-top: var(--s-7);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-bg-card);
  padding: var(--card-pad) var(--s-5);
}
.casualties .mono-label { color: var(--color-amber-ink); }
.casualties-h { font-size: 18px; margin-bottom: var(--s-2); color: var(--color-text); }
.casualties-intro { color: var(--color-text-muted); font-size: var(--font-size-base); margin-bottom: var(--s-4); }
.casualties-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.casualties-list li {
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  line-height: var(--lh-snug);
  padding-left: var(--s-4);
  position: relative;
}
.casualties-list li::before {
  content: "\2014";  /* — em-dash marker, matches the prose-list idiom */
  position: absolute; left: 0;
  color: var(--color-amber-ink);
}
.casualties-list li strong { color: var(--color-text); }

/* =========================================================================
   How it works (W04 §3.3)
   ========================================================================= */
.steps { display: grid; grid-template-columns: 1fr; gap: var(--s-6); margin-top: var(--s-7); }
.step {
  border: 1px solid var(--color-line-dark);
  border-radius: var(--radius);
  padding: var(--s-6) var(--s-5);
  background: rgba(245,237,216,0.03);
}
.step-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-action);
  color: var(--color-bg-dark);
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: 18px;
  margin-bottom: var(--s-4);
}
.step h3 { color: var(--color-text-on-dark); }
.step p { color: var(--color-text-on-dark-muted); margin: 0; font-size: var(--font-size-base); }
.step .worked { color: var(--color-text-on-dark); font-style: italic; margin-top: var(--s-3); }

/* =========================================================================
   Features (W04 §3.4)
   ========================================================================= */
.feature-grid { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap); margin-top: var(--s-7); }
.feature {
  background: var(--color-bg-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--s-6) var(--s-5);
}
.feature .feature-tag {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-amber-ink);   /* fixed: was amber-on-white (fail) — W03 §12.2 */
  margin-bottom: var(--s-3);
  display: block;
}
.feature h3 { font-size: 19px; margin-bottom: var(--s-3); }
.feature p { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-base); }
.feature .proof { color: var(--color-surface-green); font-family: var(--font-mono); font-size: var(--font-size-sm); margin-top: var(--s-3); }
.feature .soon {
  display: inline-block;
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--color-text-muted);
  border: 1px solid var(--color-line);
  padding: 2px var(--s-2); border-radius: var(--radius-pill);
}

/* =========================================================================
   Testimonials — HIDDEN AT LAUNCH (W04 §3.5)
   Enable: remove the `hidden` attribute on <section id="proof"> AND drop the
   `display:none` below. Slot also doubles as a post-launch press-logo strip.
   ========================================================================= */
.testimonials-section { display: none; }
.testimonial-grid { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap); margin-top: var(--s-7); }
.testimonial {
  margin: 0;
  background: rgba(245,237,216,0.04);
  border: 1px solid var(--color-line-dark);
  border-radius: var(--radius);
  padding: var(--s-6) var(--s-5);
}
.testimonial p { font-size: 17px; line-height: var(--lh-snug); color: var(--color-text-on-dark); margin-bottom: var(--s-5); }
.testimonial cite { font-style: normal; display: block; }
.testimonial cite strong { display: block; font-family: var(--font-mono); color: var(--color-action); font-size: 14px; letter-spacing: var(--ls-cta); }
.testimonial cite span { font-size: var(--font-size-sm); color: var(--color-text-on-dark-muted); }

/* =========================================================================
   Pricing (W04 §3.6)
   When testimonials are hidden, pricing follows features (cream after cream).
   A faint top hairline keeps the two cream bands distinct (W04 §3.5 mitigation).
   ========================================================================= */
.pricing { border-top: 1px solid var(--color-line); }
/* margin-inline:auto centres the capped-width card block (460px stacked / 780px 2-col)
   so it isn't left-aligned with a large empty gap on the right at tablet/desktop. */
.pricing-cards { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap); max-width: 460px; margin: var(--s-7) auto 0; }
.price-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--s-7) var(--s-6);
  position: relative;
}
.price-card.featured {
  border-color: var(--color-action);
  border-width: 2px;
  box-shadow: var(--shadow-lg);
}
.price-card .tier {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--color-surface-green);
  margin-bottom: var(--s-3);
}
.price-card.featured .tier { color: var(--color-amber-ink); }
.price-card .amount {
  font-family: var(--font-mono);
  font-size: var(--font-size-3xl); font-weight: var(--fw-bold); color: var(--color-text);
  line-height: 1; margin-bottom: var(--s-2);
}
.price-card .amount small { font-size: 15px; font-weight: var(--fw-medium); color: var(--color-text-muted); }
.price-card .price-sub { font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--s-5); }
.price-card ul { list-style: none; margin: 0 0 var(--s-6); padding: 0; }
.price-card li { font-size: 15px; padding-left: 26px; position: relative; margin-bottom: var(--s-3); color: var(--color-text); }
.price-card li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--color-safe-green-ink); font-weight: var(--fw-bold); }
.price-card .ribbon {
  position: absolute; top: -12px; right: var(--s-5);
  background: var(--color-action); color: var(--color-bg-dark);
  font-family: var(--font-mono); font-size: var(--font-size-xs); font-weight: var(--fw-bold);
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-pill);
}
.price-card .btn { width: 100%; }
/* Pricing inline dual-state mirror */
.price-card .cta-state--live,
.price-card .cta-state--coming-soon { display: none; }
.price-card .cta-state--coming-soon { display: block; }
html[data-launch-state="live"] .price-card .cta-state--coming-soon { display: none; }
html[data-launch-state="live"] .price-card .cta-state--live { display: block; }

/* =========================================================================
   Final CTA (W04 §3.7)
   ========================================================================= */
.cta-section { text-align: center; padding-block: var(--s-10); }
/* App-icon close (W08 R2: relocated from the hero) — iOS-style rounded square,
   centred above the headline. The classic app-landing finish. */
.cta-icon {
  display: block;
  width: 64px; height: 64px;
  border-radius: 22%;
  margin: 0 auto var(--s-4);
  box-shadow: var(--shadow-md);
}
.cta-section h2 { max-width: 720px; margin-inline: auto; }
.cta-section > .container > p { color: var(--color-text-on-dark-muted); max-width: 560px; margin: 0 auto var(--s-6); font-size: var(--font-size-md); }
.cta-section .cta-region { text-align: left; }
.cta-section .waitlist-success { text-align: left; }

/* =========================================================================
   FAQ (W04 §6)
   ========================================================================= */
.faq-list { max-width: var(--prose-max-wide); }
.faq details {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-bg-card);
  margin-bottom: var(--s-3);
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s-5);
  min-height: 44px;
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: 16px;
  color: var(--color-text);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 22px; color: var(--color-action); line-height: 1;
  transition: transform var(--dur) var(--ease);
  flex: 0 0 auto;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { background: rgba(28,28,28,0.02); }
.faq details p { padding: 0 var(--s-5) var(--s-5); margin: 0; color: var(--color-text-muted); font-size: var(--font-size-base); }

/* =========================================================================
   Footer (W04 §3.9)
   ========================================================================= */
.site-footer {
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  padding-block: var(--s-7);
  padding-bottom: max(var(--s-7), calc(var(--s-7) + var(--safe-b)));
}
.footer-inner { display: grid; grid-template-columns: 1fr; gap: var(--s-6); }
.footer-brand-line { display: inline-flex; align-items: center; gap: var(--s-2); }
.footer-icon { width: 24px; height: 24px; border-radius: 22%; flex: 0 0 auto; }
.footer-brand-name { color: var(--color-text-on-dark); font-weight: var(--fw-bold); letter-spacing: var(--ls-cta); font-size: 18px; }
.footer-tag { color: var(--color-action); display: block; margin-top: var(--s-2); }
.footer-burn { color: var(--color-text-on-dark-muted); display: block; margin-top: var(--s-1); }
.footer-col h2 { font-size: var(--font-size-xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-text-on-dark-muted); margin-bottom: var(--s-3); font-weight: var(--fw-bold); }
.footer-links-list, .footer-contact-list { display: flex; flex-direction: column; }
.site-footer a {
  color: var(--color-text-on-dark-muted);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-block: 10px;
  transition: color var(--dur-fast) var(--ease);
}
.site-footer a:hover { color: var(--color-action); }
.footer-copyright { color: var(--color-text-on-dark-muted); margin-top: var(--s-4); opacity: 0.8; }

/* =========================================================================
   Utility pages (privacy / press / 404) — W04 §12
   ========================================================================= */
.doc-nav {
  background: var(--color-surface-green);
  padding-top: var(--safe-t);
  border-bottom: 1px solid var(--color-line-dark);
}
.doc-nav .nav-inner { padding-block: var(--s-4); }
.doc-page { background: var(--color-bg); color: var(--color-text); }
.doc-content { max-width: var(--prose-max); margin-inline: auto; padding-block: var(--s-8); }
.doc-content h1 { margin-bottom: var(--s-5); }
.doc-content h2 { font-size: var(--font-size-xl); margin-top: var(--s-7); margin-bottom: var(--s-4); }
.doc-content p, .doc-content li { font-size: var(--font-size-base); line-height: var(--lh-body); color: var(--color-text); }
.doc-content .doc-summary { font-size: var(--font-size-md); color: var(--color-text); }
.doc-content ul { padding-left: 0; list-style: none; margin-bottom: var(--s-4); }
.doc-content ul li { padding-left: var(--s-5); position: relative; margin-bottom: var(--s-3); }
.doc-content ul li::before { content: "\2014"; position: absolute; left: 0; color: var(--color-amber-ink); }
.doc-content a { color: var(--color-amber-ink); text-decoration: underline; text-underline-offset: 2px; } /* W14 FIX 5 (a11y 1.4.1): underline prose links — colour alone was borderline */
.doc-meta { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--color-line); font-family: var(--font-mono); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.template-notice {
  background: rgba(212,135,10,0.12);
  border: 1px dashed var(--color-amber-ink);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-6);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  /* W14 FIX (a11y, WCAG 1.4.3): amber-ink text over the rgba(212,135,10,0.12)
     amber-tint-on-cream effective bg (#F1E0BF) computes to 4.22:1 — just under
     4.5:1. Use ink (14.6:1); the dashed amber border + tint keep the warning
     identity. (This notice is removed before publication anyway.) */
  color: var(--color-text);
}

/* Fact-sheet table */
/* W14 FIX (WCAG 1.4.10 reflow): table-layout:fixed + word-break so the table can
   never exceed the viewport at 320–375px (the th nowrap + long td content used to
   force ~434px / horizontal scroll). nowrap on th is restored at >=600px where
   there is room (see responsive block). */
.fact-sheet { width: 100%; table-layout: fixed; border-collapse: collapse; margin-bottom: var(--s-4); }
.fact-sheet th, .fact-sheet td { text-align: left; padding: var(--s-3); border-bottom: 1px solid var(--color-line); vertical-align: top; font-size: var(--font-size-base); overflow-wrap: anywhere; word-break: break-word; }
.fact-sheet th { font-family: var(--font-mono); font-weight: var(--fw-bold); width: 38%; }
@media (min-width: 600px) {
  .fact-sheet th { white-space: nowrap; }
}

/* Brand-asset download grid */
.asset-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-4); margin-bottom: var(--s-5); }
.asset-card { border: 1px solid var(--color-line); border-radius: var(--radius); padding: var(--s-5); background: var(--color-bg-card); }
.asset-card h3 { font-size: 16px; margin-bottom: var(--s-2); }
.asset-card p { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: var(--s-4); }
.color-swatches { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }
.swatch { width: 36px; height: 36px; border-radius: var(--radius-chip); border: 1px solid var(--color-line); }

/* 404 */
.error-page { min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--s-8) var(--s-5); padding-bottom: max(var(--s-8), calc(var(--s-8) + var(--safe-b))); }
.error-inner { max-width: 480px; }
.error-icon { width: 48px; height: 48px; border-radius: 22%; margin: 0 auto var(--s-5); box-shadow: var(--shadow-md); } /* W08 R1: brand-continuity icon */
.error-inner .mono-label { color: var(--color-text-on-dark); } /* W14 FIX 1: cream eyebrow on dark 404 (was amber 4.16:1) */
.error-inner h1 { color: var(--color-text-on-dark); }
.error-inner p { color: var(--color-text-on-dark-muted); margin-bottom: var(--s-6); }
.error-inner .error-secondary { font-size: var(--font-size-sm); margin-top: var(--s-5); }
.error-inner .error-secondary a { color: var(--color-action); }

/* Back-to-top (W04 §7.4) — JS reveals it; no-JS users don't get it */
.to-top {
  position: fixed;
  right: max(var(--s-4), var(--safe-r));
  bottom: max(var(--s-4), var(--safe-b));
  z-index: 40;
  width: 44px; height: 44px;
  display: none;
  align-items: center; justify-content: center;
  background: var(--color-action);
  color: var(--color-bg-dark);
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: var(--fw-bold);
  text-decoration: none;
  border-radius: 50%;
  box-shadow: var(--shadow-md);
}
.to-top.is-visible { display: inline-flex; }

/* Placeholder asset slots (W04 §11.3) — branded, not grey boxes */
/* Flex centred-wrap (not grid): full rows fill edge-to-edge exactly via the calc
   widths below, while an incomplete final row (e.g. 5 shots = 3 + 2) is CENTRED
   rather than left-aligned with a gap. Column count is still controlled precisely
   per breakpoint by the .phone-fig width. */
.screenshot-band { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--grid-gap); margin-top: var(--s-7); }
.placeholder-slot {
  aspect-ratio: 1290 / 2796;
  background: repeating-linear-gradient(135deg, var(--color-surface-green) 0 12px, var(--color-surface-green-deep) 12px 24px);
  color: var(--color-text-on-dark);
  border: 1px solid var(--color-line-dark);
  border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2);
  text-align: center; padding: var(--s-4);
  font-family: var(--font-mono);
}
.placeholder-slot .ph-name { font-size: var(--font-size-sm); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-action); }
.placeholder-slot .ph-dims { font-size: var(--font-size-xs); color: var(--color-text-on-dark-muted); }
/* Real device captures (drop-in band, on a green section so the cream UI pops) */
.phone-fig { margin: 0; display: flex; flex-direction: column; gap: var(--s-3); width: 100%; }
.phone-shot {
  width: 100%; height: auto; display: block;
  aspect-ratio: 1290 / 2796;        /* keeps CLS = 0 with the width/height attrs */
  border-radius: var(--radius);
  border: 1px solid var(--color-line-dark);
  background: var(--color-surface-green-deep);
}
.shot-caption {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: 1.45;
  color: var(--color-text-on-dark-muted);
  text-align: center;
}

/* =========================================================================
   Responsive — mobile-first; enhance upward (W03 §7 / W04 reflow boundaries)
   ========================================================================= */
@media (min-width: 600px) {
  .waitlist-row { flex-direction: row; align-items: stretch; }
  .waitlist-row .waitlist-input { flex: 1 1 auto; }
  .waitlist-form .btn-primary { width: auto; white-space: nowrap; }
  .hero-actions { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .phone-fig { width: calc((100% - var(--grid-gap)) / 2); }   /* 2 per row, centred */
}

@media (min-width: 768px) {
  /* 6-item feature grid → clean 2+2+2; testimonials (hidden) → 2-col */
  .feature-grid, .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  /* 3-item grids skip the 2-col stage (which would orphan as 2+1) and go straight
     to a clean 3-across at tablet width. */
  .card-grid-3, .steps { grid-template-columns: repeat(3, 1fr); }
  .steps { gap: var(--s-6); }
  .footer-inner { grid-template-columns: 1.4fr 1fr 1fr; }
  .asset-grid { grid-template-columns: repeat(2, 1fr); }
  .phone-fig { width: calc((100% - 2 * var(--grid-gap)) / 3); }   /* 3 per row, last row centred */
}

@media (min-width: 1024px) {
  .nav-anchors { display: flex; }
  /* feature-grid (6) promotes 2→3 cols here; .card-grid-3/.steps are already 3-col from 768 */
  .feature-grid, .testimonial-grid { grid-template-columns: repeat(3, 1fr); }
  .pricing-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 780px; }
  .hero-content { grid-template-columns: 1.1fr 0.9fr; gap: var(--s-8); padding-block: var(--s-8) var(--s-6); }
  .hero-visual { order: 0; }
  .brief-card { transform: rotate(-1.5deg); max-width: 340px; }
}

/* =========================================================================
   Reduced motion (W04 §13) — mandatory
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
  .brief-card { transform: rotate(0deg) !important; }
}

/* =========================================================================
   Print
   ========================================================================= */
@media print {
  .site-nav, .cta-region, .coming-soon-chip, .hero-actions, .btn, .placeholder-slot { display: none !important; }
  body { background: #fff; color: #000; }
  .section--green, .section--green-deep, .section--gradient, .section--dark, .hero { background: #fff !important; color: #000 !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}