/* ============================================================
   Zenith - global design system
   Dusk palette · Source Serif 4 / Hanken Grotesk / JetBrains Mono
   Ported from the Claude Design handoff (the source of intent).
   ============================================================ */

:root {
  /* ---- Color (Dusk) ---- */
  --bg: #F6F5F3;
  --bg-rgb: 246, 245, 243;
  --bg2: #EFEDE9;
  --ink: #262420;
  --ink2: #5a5853;
  --ink3: #6f6c67;
  --ink4: #a6a4a0; /* app ink4 — chart axis labels, gridline money figures */
  --accent: #5b80a1;
  --accent-deep: #32597a;
  --accent-cta: #4a7193; /* AA-safe (5.1:1 on white) fill for solid primary CTAs */
  --danger: #9a5a36; /* calm deep rust for form errors — AA (5:1) on paper, never fire-engine red */
  --accent2: #d8a07a;
  --caution: #b07750; /* app "caution" rust — debt-free handle */
  --whatif: #86719d;     /* app what-if violet — dashed hypothesis lines */
  --whatif-ink: #5a4472; /* app what-if ink — live labels while dragging */
  --hair: rgba(38, 36, 32, 0.12);
  --frost: rgba(255, 255, 255, 0.72);
  --frost-strong: rgba(255, 255, 255, 0.86);

  /* ---- Theme surfaces ----
     Every hardcoded white/haze the markup used to carry, named for what it
     means so a dark theme can restyle each with intent. */
  --knob-face: #fff;                        /* handle faces + node strokes on charts */
  --on-accent: #fff;                        /* copy sitting on solid accent fills */
  --chip-bg: rgba(255, 255, 255, 0.7);      /* glass chips (quick moves, modal close) */
  --chip-bg-soft: rgba(255, 255, 255, 0.6); /* quieter chips (waitlist questions) */
  --field-bg: rgba(255, 255, 255, 0.85);    /* modal form inputs */
  --icon-well: rgba(38, 36, 32, 0.05);      /* muted icon squares */
  --band: rgba(91, 128, 161, 0.10);         /* projection band fill */
  --band-soft: rgba(91, 128, 161, 0.08);
  --veil-rgb: 238, 241, 246;                /* haze that lifts copy off WebGL scenes */
  --sky-day: linear-gradient(180deg, #eef3f8 0%, #f3ecdf 56%, #f6e2cf 74%, #f0d8c8 100%);
  --fog-rgb: 90, 88, 83;                    /* fog-scene particles (canvas reads this) */
  --sheen: rgba(255, 255, 255, 0.28);       /* footer top sheen */
  --tint: rgba(255, 255, 255, 0.34);        /* tinted section wash */
  --focus-ring: rgba(91, 128, 161, 0.14);   /* soft form focus halo */
  color-scheme: light;

  /* ---- Elevation ---- */
  --e1: 0 1px 2px rgba(38, 36, 32, 0.04), 0 10px 26px -18px rgba(38, 36, 32, 0.2);
  --e2: 0 2px 5px rgba(38, 36, 32, 0.04), 0 20px 48px -26px rgba(38, 36, 32, 0.28);
  --e3: 0 5px 12px rgba(38, 36, 32, 0.05), 0 34px 74px -36px rgba(38, 36, 32, 0.36);

  /* ---- Radius ---- */
  --r-card: 22px;
  --r-pill: 100px;

  /* ---- Type ---- */
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Layout ---- */
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 56px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Left edge of the centered content column (used to anchor the thread + the
   horizontal lives rail so nothing floats against the viewport edge on wide /
   ultrawide screens). */
:root { --col-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); }

/* ============================================================
   Dusk after dark — the app's real dark palette (Dusk, hue 246),
   converted to hex from OKLCH in the app's palettes.ts. Follows
   the system preference; no toggle, no flash (tokens only).
   Hex (not oklch) on purpose: the WebGL scenes parse --accent
   with THREE.Color, which doesn't read oklch().
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0e1318;
    --bg-rgb: 14, 19, 24;
    --bg2: #0a0f13;
    --ink: #ecf1f5;
    --ink2: #abb2b8;
    --ink3: #8b939b; /* keeps 11px mono (compliance line) comfortably past AA on --bg */
    --ink4: #5d646b;
    --accent: #84b7e4;
    --accent-deep: #96caf8;
    --accent-cta: #77aad7;
    --danger: #e09675;
    --accent2: #e7a875;
    --caution: #e7a875;
    --whatif: #c6a8e8;
    --whatif-ink: #d6b9f6;
    --hair: rgba(236, 241, 245, 0.14);
    --frost: rgba(24, 31, 37, 0.72);
    --frost-strong: rgba(29, 36, 42, 0.9);
    --e1: 0 1px 2px rgba(0, 0, 0, 0.2), 0 10px 26px -18px rgba(0, 0, 0, 0.55);
    --e2: 0 2px 5px rgba(0, 0, 0, 0.22), 0 20px 48px -26px rgba(0, 0, 0, 0.6);
    --e3: 0 5px 12px rgba(0, 0, 0, 0.26), 0 34px 74px -36px rgba(0, 0, 0, 0.66);
    --knob-face: #1d242a;
    --on-accent: #081018;
    --chip-bg: rgba(29, 36, 42, 0.72);
    --chip-bg-soft: rgba(29, 36, 42, 0.6);
    --field-bg: rgba(22, 29, 34, 0.88);
    --icon-well: rgba(236, 241, 245, 0.06);
    --band: rgba(132, 183, 228, 0.14);
    --band-soft: rgba(132, 183, 228, 0.1);
    --veil-rgb: 14, 19, 24;
    --sky-day: linear-gradient(180deg, #0a1016 0%, #0f141d 56%, #26160f 74%, #301812 100%);
    --fog-rgb: 171, 178, 184;
    --sheen: rgba(236, 241, 245, 0.04);
    --tint: rgba(236, 241, 245, 0.05);
    --focus-ring: rgba(132, 183, 228, 0.24);
  }
}

/* ---- Reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga' 1, 'calt' 1;
  overflow-x: hidden;
  min-height: 100vh;
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
button {
  font: inherit;
}
::selection {
  background: rgba(91, 128, 161, 0.18);
}

/* ---- Background system (calm, never pure white) ---- */
.z-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 95% at 16% 8%, #faf7f2 0%, rgba(250, 247, 242, 0) 52%),
    radial-gradient(120% 100% at 88% 6%, #edeef3 0%, rgba(237, 238, 243, 0) 58%),
    radial-gradient(150% 130% at 72% 104%, #f3ece3 0%, rgba(243, 236, 227, 0) 54%),
    linear-gradient(180deg, #F6F5F3 0%, #EFEDE9 100%);
}
.z-bg-drift {
  position: fixed;
  inset: -12%;
  z-index: -2;
  opacity: 0.62;
  pointer-events: none;
  background:
    radial-gradient(46% 40% at 30% 32%, rgba(91, 128, 161, 0.11), transparent 70%),
    radial-gradient(44% 40% at 76% 66%, rgba(231, 160, 121, 0.13), transparent 70%);
  animation: z-drift 24s ease-in-out infinite;
}
.z-warm {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.5;
  background: radial-gradient(135% 95% at 50% 130%, rgba(244, 206, 170, 0.55) 0%, rgba(238, 196, 166, 0.22) 40%, rgba(238, 196, 166, 0) 68%);
}
.z-grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.4;
  display: none; /* was a full-viewport multiply blend; disabled, it was a major scroll-jank source */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.38'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

@keyframes z-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(2.4%, -2.2%, 0) scale(1.07); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* ---- Layout helpers ---- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.section {
  position: relative;
  padding-block: clamp(64px, 10vw, 132px);
}
.stack > * + * {
  margin-top: 1rem;
}

/* ---- Typography ---- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow--muted { color: var(--ink3); }

.display {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.display--xl { font-size: clamp(40px, 7.2vw, 92px); }
.display--l { font-size: clamp(32px, 5vw, 60px); }
.display--m { font-size: clamp(26px, 3.4vw, 40px); }

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.lede {
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.5;
  color: var(--ink2);
}
.muted { color: var(--ink2); }
.mono { font-family: var(--font-mono); }

/* The Zenith Score / hero figures use the SERIF numeral (matches the app). */
.figure {
  font-family: var(--font-serif);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ---- Frosted card ---- */
.card {
  background: var(--frost);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  box-shadow: var(--e1);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  padding: 13px 24px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.btn--primary {
  color: var(--on-accent);
  background: var(--accent-cta);
  box-shadow: 0 4px 16px rgba(91, 128, 161, 0.3);
}
.btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(91, 128, 161, 0.38);
}
.btn--ghost {
  color: var(--ink);
  background: var(--frost);
  border-color: var(--hair);
}
.btn--ghost:hover {
  transform: translateY(-1px);
  box-shadow: var(--e1);
}
/* Press: buttons settle under the finger instead of lifting away from it. */
.btn:active {
  transform: translateY(0) scale(0.985);
  transition-duration: 0.08s;
}

/* ---- Scroll-reveal ----
   Default = visible (so no-JS / crawlers always see content).
   With JS on (html.js), pre-hide; the GSAP engine (zenith.js) animates them in
   on scroll. The .js class is set in <head> before the stylesheet loads, so
   there is no flash. The engine's fallback() re-shows everything if libs fail. */
.js [data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .z-bg-drift { animation: none; }
}

/* ---- Skip link (a11y) ---- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--accent);
  color: var(--on-accent);
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  font-size: 14px;
}
.skip-link:focus {
  left: 0;
}

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

/* ============================================================
   Components
   ============================================================ */

/* ---- Scene grammar (home) ----
   The type patterns the home scenes repeat, extracted from inline styles so
   family + color live in one themable place. Per-scene metrics (font-size
   clamps, spacing, geometry) stay inline where they are genuinely unique. */
.sc-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}
.sc-eyebrow--sm { font-size: 10px; letter-spacing: 0.2em; }
.sc-title { font-family: var(--font-serif); font-weight: 400; color: var(--ink); }
.sc-title--light { font-weight: 300; }
.sc-sub { color: var(--ink2); }
.sc-note { font-family: var(--font-mono); font-size: 11px; color: var(--ink3); }
.sc-item-title { font-family: var(--font-serif); font-size: 21px; color: var(--ink); }
.sc-body { font-size: 14.5px; line-height: 1.55; color: var(--ink2); margin: 0; }

/* ============================================================
   Nav + Footer — the v6 glass shell (shared partials with the
   home page; home.css skins them there, these rules skin them
   on the subpages). Written on global tokens so the Dusk dark
   theme inherits: surfaces ride --veil-rgb, text rides --ink*.
   ============================================================ */
#nav {
  position: fixed;
  top: 16px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 8000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  width: min(1080px, calc(100% - 32px));
  padding: 10px 12px 10px 24px;
  border-radius: 999px;
  background: rgba(var(--veil-rgb), 0.65);
  border: 1px solid var(--hair);
  box-shadow: 0 8px 32px rgba(38, 36, 32, 0.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
#nav.is-scrolled,
#nav.scrolled {
  background: rgba(var(--veil-rgb), 0.88);
  box-shadow: 0 12px 40px rgba(38, 36, 32, 0.12);
}
#nav .mark {
  font-family: var(--font-serif);
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}
#nav .mark svg { display: block; color: var(--accent); }
#nav .nav-links { display: flex; gap: 6px; font-size: 14px; font-weight: 500; }
#nav .nav-links a {
  color: var(--ink2);
  padding: 9px 15px;
  border-radius: 999px;
  text-decoration: none;
  transition: color 0.35s var(--ease), background 0.35s var(--ease);
}
#nav .nav-links a:hover,
#nav .nav-links a[aria-current='page'] {
  color: var(--ink);
  background: rgba(91, 128, 161, 0.1);
}
#nav .nav-right { display: flex; align-items: center; gap: 20px; }
#nav .nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--on-accent);
  background: var(--accent-cta);
  border: 1px solid var(--accent-cta);
  border-radius: 999px;
  padding: 11px 22px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.5s var(--ease);
}
#nav .nav-cta:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  box-shadow: 0 10px 30px rgba(50, 89, 122, 0.28);
}
@media (max-width: 900px) {
  #nav .nav-links { display: none; }
  #nav { padding-left: 20px; }
}
/* mobile menu: hamburger + dropdown under the pill (markup in nav.njk,
   open/close in zenith.js via #nav-toggle/#nav-menu). Token-driven so the
   Dusk dark theme inherits. */
.nav-toggle { display: none; }
.nav-menu { display: none; }
@media (max-width: 900px) {
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    width: 40px; height: 40px; flex: none; border: 0; background: transparent; cursor: pointer; border-radius: 50%; padding: 0;
  }
  .nav-toggle span {
    display: block; width: 16px; height: 1.5px; background: var(--ink); border-radius: 2px;
    transition: transform 0.35s var(--ease);
  }
  .nav-toggle[aria-expanded='true'] span:first-child { transform: translateY(3.25px) rotate(45deg); }
  .nav-toggle[aria-expanded='true'] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  .nav-menu {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 26px;
    background: var(--chip-bg); border: 1px solid var(--hair);
    box-shadow: 0 18px 44px rgba(38, 36, 32, 0.14);
    -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
    opacity: 0; transform: translateY(-8px); pointer-events: none;
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  }
  .nav-menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav-menu a { display: block; font-size: 15px; font-weight: 500; color: var(--ink2); padding: 13px 18px; border-radius: 16px; }
  .nav-menu a:hover,
  .nav-menu a[aria-current='page'] { background: var(--tint); color: var(--ink); }
}

.foot {
  position: relative;
  z-index: 2;
  margin-top: clamp(60px, 9vw, 120px);
  padding: 0 clamp(24px, 6vw, 88px);
}
.foot-card {
  max-width: 1240px;
  margin: 0 auto;
  background: rgba(var(--veil-rgb), 0.6);
  border: 1px solid var(--hair);
  border-bottom: none;
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -12px 44px rgba(38, 36, 32, 0.05);
  padding: clamp(36px, 4vw, 60px) clamp(28px, 3.4vw, 56px) 0;
}
.foot-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(28px, 3vw, 48px);
  padding-bottom: clamp(32px, 3.6vw, 52px);
}
.foot-brand .f-mark {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.f-mark svg { color: var(--accent); }
.foot-badges { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.badge {
  background: rgba(var(--veil-rgb), 0.8);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: default;
}
.badge-glyph { width: 20px; height: 20px; flex: 0 0 auto; color: var(--ink); }
.badge-text { display: flex; flex-direction: column; gap: 2px; }
.badge .b-soon {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.badge .b-store { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.1; }
.foot-col h4 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink3);
  font-weight: 500;
  margin: 0 0 20px;
}
.foot-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
  font-size: 14px;
  margin: 0;
  padding: 0;
}
.foot-col a {
  color: var(--ink2);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.foot-col a:hover { color: var(--accent-deep); }
.foot-bottom {
  border-top: 1px solid var(--hair);
  padding: 22px 0 28px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.foot-bottom .fineprint {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--ink3);
  margin: 0;
}
.foot-bottom .fineprint a { color: var(--ink2); text-decoration: none; }
.foot-bottom .fineprint a:hover { color: var(--accent-deep); }
@media (max-width: 900px) {
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}


/* Horizon "north star": a soft bloom behind the mark, a slow twinkle once risen. */
.z-hstar-glow {
  position: absolute;
  left: 50%; top: 50%;
  width: 220%; height: 220%;
  transform: translate(-50%, -50%) scale(0.6);
  background: radial-gradient(closest-side, rgba(231,160,121,0.45), rgba(231,160,121,0.12) 45%, transparent 72%);
  opacity: 0;
  pointer-events: none;
}
.z-hstar-svg { transform-origin: 50% 50%; }
#z-horizon-star.is-lit .z-hstar-svg { animation: z-hstar-twinkle 4.4s ease-in-out infinite; }
#z-horizon-star.is-lit .z-hstar-glow { animation: z-hstar-breathe 4.4s ease-in-out infinite; }
@keyframes z-hstar-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.08) rotate(45deg); }
}
@keyframes z-hstar-breathe {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.92); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  #z-horizon-star.is-lit .z-hstar-svg,
  #z-horizon-star.is-lit .z-hstar-glow { animation: none; }
}

/* Device frame for real app screenshots (see _includes/device.njk) */
/* A single, realistic phone frame (concentric corners, brushed-titanium edge,
   soft shadow). Radii are computed from the frame width so the corners stay
   truly round on a tall box (percentage radii would skew on a 9:19.5 box). */
.device { --device-w: 300px; margin: 0; width: var(--device-w); max-width: 100%; }
.device__bezel {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 19.5;
  padding: calc(var(--device-w) * 0.03);
  border-radius: calc(var(--device-w) * 0.18);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 16%),
    linear-gradient(150deg, #3c3f46 0%, #191b1f 20%, #131418 50%, #191b1f 80%, #3c3f46 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    0 44px 80px -34px rgba(18, 20, 26, 0.55),
    0 14px 34px -18px rgba(18, 20, 26, 0.4);
}
/* subtle side buttons for realism */
.device__bezel::before,
.device__bezel::after {
  content: "";
  position: absolute;
  width: calc(var(--device-w) * 0.011);
  background: linear-gradient(90deg, #41444b, #1d1f24);
}
.device__bezel::before { left: calc(var(--device-w) * -0.004); top: 23%; height: 7.5%; border-radius: 2px 0 0 2px; }
.device__bezel::after { right: calc(var(--device-w) * -0.004); top: 27%; height: 11%; border-radius: 0 2px 2px 0; }
.device__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--device-w) * 0.15);
  overflow: hidden;
  background: #0c0d10;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.5);
}
.device__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}


/* ============================================================
   Page sections
   ============================================================ */

.measure { max-width: 720px; }
.section--tint {
  background: var(--tint);
  border-block: 1px solid var(--hair);
}
.section .eyebrow { margin: 0 0 16px; }
.section h2 { margin: 0 0 18px; }
.section .lede,
.section .muted { margin: 0; }
.section .lede a,
.section .muted a {
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(50, 89, 122, 0.3);
  white-space: nowrap;
}
.section .lede a:hover,
.section .muted a:hover { border-color: var(--accent-deep); }

/* ---- Line draw-in (JS only; no-JS shows the full line) ---- */
@keyframes z-draw { to { stroke-dashoffset: 0; } }
.js .draw-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: z-draw 1.9s var(--ease) 0.15s forwards;
}
.js [data-reveal] .draw-line,
.js [data-reveal].draw-host .draw-line { animation-play-state: paused; }
.js [data-reveal].is-in .draw-line { animation-play-state: running; }

/* ---- Split (text + figure) ---- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.split--reverse .split__text { order: 2; }
.split__text .muted { margin-top: 16px; }
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__text { order: 0; }
}

/* ---- Lever list ---- */
.lever-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.lever-list li {
  display: flex;
  align-items: baseline;
  gap: 11px;
  color: var(--ink2);
  font-size: 15.5px;
}
.lever-list strong { color: var(--ink); font-weight: 600; }
.lever-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
  transform: translateY(-1px);
}

/* ---- Graph card ---- */
.graph { padding: 22px; }
.graph__svg {
  width: 100%;
  height: auto;
  aspect-ratio: 520 / 320;
  display: block;
}
.graph__cap {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 12px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink3);
}
.graph__cap span:last-child { text-align: right; }
.graph__cap-mid { color: var(--accent-deep); white-space: nowrap; }

/* Live demo layer (how-it-works): a positioned stage so explain.js can pin a
   real, focusable handle over the SVG, exactly like the home graph. */
.graph__stage { position: relative; }
.graph__knobs { position: absolute; inset: 0; pointer-events: none; }
.graph__knob {
  position: absolute;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}
.graph__control { margin-top: 14px; }
.graph .est__compliance { margin-top: 10px; }
/* The score arc glides between values (discrete attribute set under RM). */
.score-arc { transition: stroke-dasharray 0.5s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .score-arc { transition: none; }
}

/* ---- Score card ---- */
.score-card {
  padding: clamp(28px, 4vw, 44px);
  text-align: center;
}
.score-card__num {
  font-size: clamp(72px, 12vw, 120px);
  line-height: 1;
  color: var(--accent-deep);
  font-weight: 400;
}
.score-card__label {
  margin: 10px 0 14px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink3);
}
.score-card__sub {
  margin: 0 auto;
  max-width: 30ch;
  color: var(--ink2);
  font-size: 15px;
}

/* ---- Pricing teaser ---- */
.ptease {
  background: var(--frost);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  box-shadow: var(--e1);
  padding: clamp(32px, 5vw, 56px);
  max-width: 760px;
  margin: 0 auto;
}
.ptease__text .muted { margin: 16px 0 24px; }

/* ---- Waitlist ---- */
.waitlist { text-align: left; }
.wl-form { margin-top: 28px; max-width: 540px; }
.wl-form__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 10px;
}
.wl-form__row {
  display: flex;
  gap: 10px;
}
.wl-form__input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  padding: 13px 20px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.wl-form__input::placeholder { color: var(--ink3); }
.wl-form__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.wl-form__note {
  margin: 14px 0 0;
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--ink3);
}
.wl-form__note.is-ok { color: var(--accent-deep); }
.wl-form__note.is-error { color: #b4533a; }
.wl-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
@media (max-width: 540px) {
  .wl-form__row { flex-direction: column; }
  .wl-form__row .btn { justify-content: center; }
}

/* ============================================================
   Craft layer - cursor, thread, preloader, split text
   ============================================================ */

/* cool dawn wash (engine cross-fades this with .z-warm on scroll) */
#z-cool {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 1;
  background: radial-gradient(120% 80% at 50% -10%, rgba(206, 222, 240, 0.55), rgba(206, 222, 240, 0) 60%);
}

/* the thread - one continuous line down the left margin, drawn by the engine */

/* custom cursor */
#z-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  border: 1.5px solid rgba(91, 128, 161, 0.5);
  border-radius: 50%;
  /* Above the modal (9400) and preloader (9500) so the custom cursor is never
     occluded by an overlay (it has pointer-events:none, so it can't block clicks). */
  z-index: 9600;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width 0.25s ease, height 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
#z-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
  z-index: 9601;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
@media (hover: none), (pointer: coarse) {
  #z-cursor-ring, #z-cursor-dot { display: none !important; }
}
/* Hide the native cursor only while the custom cursor is active (engine adds
   .z-cursor on desktop). If JS fails, native cursors stay normal. */
html.z-cursor, html.z-cursor * { cursor: none !important; }

/* split-text reveal (masked word rise). The wrapper's bottom padding must
   clear serif descenders at our tight display leading; the rise starts at
   130% so the hidden word can never peek through that padding. */
.z-split-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.26em;
  margin-bottom: -0.26em; /* padding is clip room, not line spacing */
}
.z-split-i {
  display: inline-block;
  transform: translateY(130%);
  will-change: transform;
}

@keyframes z-pulse {
  0% { transform: scale(1); opacity: 0.55; }
  70% { transform: scale(2.7); opacity: 0; }
  100% { transform: scale(2.7); opacity: 0; }
}
@keyframes z-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* ============================================================
   Subpages (calmer than the immersive home)
   ============================================================ */
.page-head {
  padding-top: clamp(120px, 16vh, 200px);
  padding-bottom: clamp(8px, 3vh, 32px);
  text-align: center;
}
.page-head .eyebrow { margin: 0 0 18px; }
.page-head h1 { margin: 0 auto 18px; max-width: 16ch; }
.page-head .lede { max-width: 640px; margin: 0 auto; }
/* Left-aligned editorial head: left edges line up with the body measure below. */
.page-head--left { text-align: left; }
.page-head--left h1 { margin-inline: 0; max-width: none; }
.page-head--left .lede { margin-inline: 0; max-width: none; }

/* pricing tiers */
.tiers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  max-width: 880px;
  margin: 0 auto;
  align-items: start;
}
.tier {
  background: var(--frost);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  box-shadow: var(--e1);
  padding: clamp(26px, 3vw, 38px);
}
.tier--plus {
  border: 1.5px solid var(--accent);
  background: linear-gradient(180deg, rgba(91, 128, 161, 0.06), var(--frost));
}
.tier__name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink3);
}
.tier--plus .tier__name { color: var(--accent-deep); }
.tier__price {
  font-family: var(--font-serif);
  font-size: clamp(40px, 6vw, 56px);
  line-height: 1;
  margin: 14px 0 4px;
  color: var(--ink);
}
.tier__price small { font-size: 16px; color: var(--ink3); font-family: var(--font-mono); }
.tier__note { font-size: 13px; color: var(--ink3); margin: 0 0 20px; font-family: var(--font-mono); }
.tier__features { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.tier__features li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.5; color: var(--ink2); }
.tier__features li b { color: var(--ink); font-weight: 600; }
.tier__features li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); transform: translateY(-50%); }
.tier__features li.is-off { color: var(--ink3); }
.tier__features li.is-off::before { background: var(--accent2); }
.tier__cta { margin-top: 24px; }
@media (max-width: 720px) { .tiers { grid-template-columns: 1fr; } }

/* long-form prose (legal, privacy) */
.prose { max-width: 720px; margin: 0 auto; }
.prose h2 { font-size: clamp(22px, 3vw, 30px); margin: 40px 0 12px; }
.prose h3 { font-size: 18px; margin: 28px 0 8px; color: var(--ink); }
.prose h4 { font-size: 15px; margin: 20px 0 6px; color: var(--ink); font-weight: 600; }
.prose p, .prose li { color: var(--ink2); font-size: 16px; line-height: 1.65; }
.prose p { margin: 0 0 14px; }
.prose ul { padding-left: 20px; margin: 0 0 14px; }
.prose li { margin: 0 0 6px; }
.prose a { color: var(--accent-deep); }
.prose .updated { font-family: var(--font-mono); font-size: 12px; color: var(--ink3); letter-spacing: 0.04em; }
.doc-note {
  background: rgba(231, 160, 121, 0.1);
  border: 1px solid rgba(231, 160, 121, 0.4);
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 13.5px;
  color: var(--ink2);
  margin: 0 auto 8px;
  max-width: 720px;
}

/* native FAQ disclosures */
.faq { max-width: 720px; margin: 0 auto; display: grid; gap: 12px; }
.faq details {
  background: var(--frost);
  border: 1px solid var(--hair);
  border-radius: 14px;
  overflow: hidden;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  font-weight: 500;
  font-size: clamp(15px, 1.8vw, 17px);
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--accent); font-size: 20px; flex: 0 0 auto; transition: transform 0.3s ease; }
.faq details[open] summary::after { content: '–'; }
.faq details p { margin: 0; padding: 0 22px 20px; color: var(--ink2); font-size: 15px; line-height: 1.6; }
/* JS-enhanced disclosure (replaces <details> on JS clients). Animate via grid track
   sizing (0fr -> 1fr): robust where height/max-height tweens get suppressed. */
.faq-item {
  background: var(--frost);
  border: 1px solid var(--hair);
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  grid-template-rows: min-content 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item.is-open { grid-template-rows: min-content 1fr; }
.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 18px 22px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(15px, 1.8vw, 17px);
  color: var(--ink);
}
.faq-q .faq-mk { flex: 0 0 auto; color: var(--accent); font-size: 20px; line-height: 1; }
.faq-item .faq-body { overflow: hidden; min-height: 0; }
.faq-item .faq-body p { margin: 0; padding: 0 22px 20px; color: var(--ink2); font-size: 15px; line-height: 1.6; }

/* support contact */
.contact-card {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}
.contact-email {
  font-family: var(--font-mono);
  font-size: clamp(18px, 2.6vw, 24px);
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(50, 89, 122, 0.3);
}

/* ============================================================
   RE-ENVISION - "Travel through the day"
   Pre-dawn night → dawn → luminous day → golden dusk.
   ============================================================ */

/* The night sky (pre-dawn). Engine fades #z-sky-night out over the first screen,
   so the hero opens dark/cinematic and resolves into the daylight bg as you scroll. */

/* ---- Estimator ---- */
.est {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  padding: clamp(26px, 4vw, 48px);
  max-width: 1000px;
  margin: 0 auto;
}
.est__eyebrow {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink3);
  margin: 0 0 6px;
}
.est__age {
  font-size: clamp(72px, 12vw, 132px);
  line-height: 0.9;
  color: var(--accent-deep);
  font-weight: 400;
}
.est__sub {
  margin: 12px 0 18px;
  color: var(--ink2);
  font-size: 15px;
  line-height: 1.5;
  min-height: 3em;
}
.est__sub b { color: var(--ink); font-weight: 600; }
.est__chart {
  width: 100%;
  height: auto;
  aspect-ratio: 560 / 250;
  display: block;
}
.est__cap {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-top: 8px;
}
.est__compliance {
  margin: 12px 0 0;
  font-size: 11px;
  color: var(--ink3);
}
.est__inputs {
  display: grid;
  gap: clamp(18px, 2.4vw, 26px);
}
.est__field label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: var(--ink2);
  margin-bottom: 10px;
}
.est__field label b {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.est__field input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 100px;
  background: linear-gradient(var(--accent), var(--accent)) no-repeat,
    var(--hair);
  background-size: 50% 100%;
  outline: none;
  cursor: pointer;
}
.est__field input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--knob-face);
  border: 2.5px solid var(--accent);
  box-shadow: 0 4px 12px rgba(91, 128, 161, 0.3);
  cursor: grab;
}
.est__field input[type='range']::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--knob-face);
  border: 2.5px solid var(--accent);
  box-shadow: 0 4px 12px rgba(91, 128, 161, 0.3);
  cursor: grab;
}
.est__field input[type='range']:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(91, 128, 161, 0.2);
}

.est-cta {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  padding: clamp(26px, 4vw, 44px);
  max-width: 1000px;
  margin: 22px auto 0;
}
.est-cta__text h2 { margin: 12px 0 12px; }
.est-cta .wl-form { margin-top: 0; }

@media (max-width: 760px) {
  .est, .est-cta { grid-template-columns: 1fr; }
}

/* ---- Touch-the-line handle affordances ---- */
/* `scale` is animated as its own property (not `transform`) so it composes with
   the translate that GSAP writes to position each handle. */
.z-knob { transition: scale 0.18s ease, filter 0.18s ease; }
.z-knob:hover,
.z-knob--grab { scale: 1.14; filter: drop-shadow(0 3px 9px rgba(38, 36, 32, 0.3)); }
.z-knob--hint { animation: zKnobPulse 1.5s ease-in-out 2; }
@keyframes zKnobPulse {
  0%, 100% { scale: 1; }
  50% { scale: 1.17; }
}
/* Keyboard focus: a bold offset outline. Outline (not box-shadow) because the
   knobs carry decorative inline box-shadows that would silently win the cascade;
   outline follows each knob's own border-radius in all modern browsers. */
.z-knob:focus-visible {
  outline: 2.5px solid var(--accent-deep);
  outline-offset: 3px;
}
/* Tap-to-arm (touch): the woken handle wears a soft halo while it listens. */
.z-knob--armed {
  scale: 1.14;
  filter: drop-shadow(0 3px 9px rgba(38, 36, 32, 0.3));
  outline: 3px solid rgba(50, 89, 122, 0.3);
  outline-offset: 2px;
}
/* Comfortable pointer target (~44px, WCAG 2.5.8) without growing the visual knob. */
.z-knob::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(44px, 100%);
  height: max(44px, 100%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
/* Quick-move chips: full-height touch targets on coarse pointers only. */
@media (pointer: coarse) {
  #scene-touch button[data-dsave],
  #scene-touch button[data-dspend] { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .z-knob { transition: none; }
  .z-knob--hint { animation: none; }
  .life-card { transition: none; }
}

/* Lives cards breathe on hover (pointer devices only; motion-safe). */
@media (hover: hover) {
  .life-card {
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  }
  .life-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--e2);
  }
}

/* ---- Waitlist share row (appears after a successful referral join) ---- */
.wl-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.wl-share__label { font-size: 13px; color: var(--ink2); }
.wl-share__link {
  flex: 1 1 200px;
  min-width: 0;
  font-size: 12px;
  color: var(--ink2);
  background: var(--field-bg);
  border: 1px solid var(--hair);
  border-radius: 100px;
  padding: 8px 14px;
}
.wl-share__copy {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-deep);
  background: var(--chip-bg);
  border: 1px solid var(--hair);
  border-radius: 100px;
  padding: 8px 16px;
  cursor: pointer;
}
.wl-share__copy:hover { border-color: var(--accent); }

/* ---- Journal internal links ---- */
.related { margin-top: clamp(40px, 6vh, 64px); }
.related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.related__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px;
  text-decoration: none;
  border-radius: 16px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.related__card:hover { transform: translateY(-2px); box-shadow: var(--e2); }
.related__title { font-family: var(--font-serif); font-size: 19px; line-height: 1.3; color: var(--ink); }
.related__meta { font-size: 11px; color: var(--ink3); }
.journal-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(36px, 6vh, 56px);
  padding-top: 26px;
  border-top: 1px solid var(--hair);
}
.journal-cta p { margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .related__card { transition: none; }
}

/* ---- About ---- */
.about-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 22px);
  max-width: 900px;
  margin: 0 auto;
}
.about-card {
  background: var(--frost);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  padding: clamp(24px, 3vw, 34px);
}
.about-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(91, 128, 161, 0.1);
  color: var(--accent-deep);
  margin-bottom: 16px;
}
.about-card h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 21px;
  color: var(--ink);
  margin: 0 0 8px;
}
.about-card p {
  margin: 0;
  color: var(--ink2);
  font-size: 14.5px;
  line-height: 1.55;
}
@media (max-width: 640px) {
  .about-grid { grid-template-columns: 1fr; }
}

/* ---- Journal ---- */
.journal-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 24px);
  max-width: 980px;
  margin: 0 auto;
}
.journal-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  background: var(--frost);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: var(--e1);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.journal-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--e2);
}
.journal-card__meta {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink3);
  margin: 0;
}
.journal-card__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(21px, 2.4vw, 26px);
  line-height: 1.15;
  color: var(--ink);
  margin: 2px 0 0;
}
.journal-card__excerpt {
  color: var(--ink2);
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  flex: 1;
}
.journal-card__more {
  font-size: 12px;
  color: var(--accent-deep);
  margin-top: 6px;
}
@media (max-width: 640px) {
  .journal-list { grid-template-columns: 1fr; }
}

/* ---- Article (post) ---- */
.article__date {
  color: var(--ink3);
  font-size: 13px;
  margin-top: 8px;
}
.prose.article h2 { margin-top: 38px; }
.prose.article p { margin: 0 0 18px; }
.prose.article em { color: var(--ink); font-style: italic; }
.article-foot {
  max-width: 720px;
  margin: clamp(40px, 6vh, 64px) auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--hair);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.article-foot__back {
  color: var(--ink2);
  text-decoration: none;
  font-size: 13px;
}
.article-foot__back:hover { color: var(--accent-deep); }

/* ---- How it works ---- */
.hiw-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: rgba(91, 128, 161, 0.1);
  color: var(--accent-deep);
  margin-bottom: 18px;
}
.split__text .hiw-ic + .eyebrow { margin-top: 0; }

.glossary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 20px);
  max-width: 1000px;
  margin: 0 auto;
}
.gloss {
  background: var(--frost);
  border: 1px solid var(--hair);
  border-radius: 16px;
  padding: clamp(20px, 2.4vw, 26px);
}
.gloss h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 19px;
  color: var(--ink);
  margin: 0 0 8px;
}
.gloss p { margin: 0; color: var(--ink2); font-size: 14px; line-height: 1.55; }

.compare {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 22px);
  max-width: 1000px;
  margin: 0 auto;
}
.compare__col {
  background: var(--frost);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  padding: clamp(24px, 2.8vw, 32px);
}
.compare__col--zenith {
  border: 1.5px solid var(--accent);
  background: linear-gradient(180deg, rgba(91, 128, 161, 0.07), var(--frost));
}
.compare__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(91, 128, 161, 0.12);
  color: var(--accent-deep);
  margin-bottom: 16px;
}
.compare__ic--muted { background: rgba(38, 36, 32, 0.05); color: var(--ink2); }
.compare__tag {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink3);
  margin: 0 0 10px;
}
.compare__col--zenith .compare__tag { color: var(--accent-deep); }
.compare__col h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 21px;
  color: var(--ink);
  margin: 0 0 8px;
}
.compare__col p { margin: 0; color: var(--ink2); font-size: 14.5px; line-height: 1.55; }

@media (max-width: 800px) {
  .glossary { grid-template-columns: repeat(2, 1fr); }
  .compare { grid-template-columns: 1fr; }
}

/* ---- Icon promise list (Privacy / Support) ---- */
.promise-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.promise-list li {
  display: flex;
  gap: 14px;
  align-items: center;
}
.promise-ic {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(91, 128, 161, 0.1);
  color: var(--accent-deep);
}
.promise-list li div {
  color: var(--ink2);
  font-size: 15px;
  line-height: 1.5;
}
.promise-list strong { color: var(--ink); font-weight: 600; }
@media (max-width: 520px) {
  .glossary { grid-template-columns: 1fr; }
}

/* ============================================================
   HOME 3.0 — the playable journey
   One line from pre-dawn to dusk. All chart geometry comes from
   chart.js (smoothed monotone cubics, strands instead of wedges);
   this block only dresses it. Night-scene colors are literal (the
   night is the same in both themes); everything on paper is tokens,
   so dark mode needs no overrides here.
   ============================================================ */

/* ---- Scene 1 · hero (pre-dawn, playable, full-bleed) ---- */
.zh {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Budgeted so head + stage land inside a 800px-tall window: the promise
     is a playable chart at first paint, not below the fold. */
  padding: clamp(76px, 9.5vh, 110px) 0 40px;
}
.zh__head {
  padding-inline: var(--col-left) var(--gutter);
  max-width: calc(var(--col-left) + 760px);
}
.zh__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.zh__sentence {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(34px, 4.9vw, 76px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 12px;
  text-wrap: balance;
}
.zh__num {
  display: inline-block;
  font-weight: 600;
  font-size: 0.86em;
  font-variant-numeric: tabular-nums;
  color: var(--accent-deep);
}
.zh__sub {
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.45;
  color: var(--ink2);
  max-width: 600px;
  margin: 0;
  min-height: 2.9em; /* fixed band: narration never reflows the page */
  text-wrap: pretty;
}
.zh__cta {
  margin-top: 16px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.zh__note { margin: 14px 0 0; }
/* The stage owns its box entirely in CSS: width capped by the content
   limit AND by the viewport-height budget expressed through the aspect
   ratio, so the ratio always holds exactly. The baked SVG scales
   uniformly (default preserveAspectRatio) and the JS render sets the
   viewBox to the measured pixel size — nothing ever stretches, dash
   patterns and in-SVG text stay true, and there is no layout shift at
   takeover (JS never writes a dimension). */
.zh__stage {
  position: relative;
  flex-shrink: 0; /* never let the flex column crush the aspect box */
  width: min(100%, 1320px, calc(52svh * (1200 / 540)));
  aspect-ratio: 1200 / 540;
  margin-top: clamp(10px, 2vh, 24px);
  margin-inline: auto;
}
.zh__svg { display: block; width: 100%; height: 100%; }
.zh__svg--m { display: none; }
@media (max-width: 719px) {
  .zh__stage {
    width: min(100%, calc(56svh * (360 / 400)));
    aspect-ratio: 360 / 400;
  }
  /* Before JS boots, the mobile bake shows; once live, the JS-driven
     SVG re-renders at measured size and takes over at every width. */
  .zh__stage:not(.is-live) #zh-svg { display: none; }
  .zh__stage:not(.is-live) .zh__svg--m { display: block; }
}

/* ---- The chart grammar, matching the app's Path screen ----
   Gridlines dashed 1 5 with compact money labels, the "enough" rule
   dashed 1 5 in ink4, the p10-p90 band with dashed 3 4 edges and 8
   faint sample strands, the 2.75px gradient line with round joins,
   and the endpoint glow trio. Shared by the hero, the studio, and
   the range scene. */
.zch-grid line {
  stroke: var(--hair);
  stroke-width: 1;
  stroke-dasharray: 1 5;
  stroke-linecap: round;
}
.zch-grid text,
.zch-ticks text {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  fill: var(--ink4);
}
.zch-floor { stroke: var(--hair); stroke-width: 1; }
.zch-thresh {
  stroke: var(--ink4);
  stroke-width: 1;
  stroke-dasharray: 1 5;
  stroke-linecap: round;
  opacity: 0.75;
}
.zch-band { transition: opacity 0.68s var(--ease); }
.zch-samples path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.13;
}
.zch-samples,
.zch-edges { transition: opacity 0.68s var(--ease); }
.zch-edge {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  stroke-linecap: round;
  opacity: 0.35;
  transition: opacity 0.68s var(--ease);
}
.zch-line {
  fill: none;
  stroke-width: 2.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.zch-glow__halo { fill: var(--accent); opacity: 0.16; }
.zch-glow__core { fill: var(--accent); }
.zch-glow__rim { fill: none; stroke: var(--knob-face); stroke-width: 1.5; }
.zch-scrub line {
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
  stroke-linecap: round;
}
.zch-scrub circle { fill: var(--accent); stroke: var(--knob-face); stroke-width: 2; }
/* Mid-drag the fan dims (the app does the same) and glides back after. */
.is-fan-dim .zch-band,
.is-fan-dim .zch-samples,
.is-fan-dim .zch-edge { opacity: 0.05; transition: opacity 0.16s ease; }

.zh__overlay { position: absolute; inset: 0; pointer-events: none; }

/* The starting-age pill: the app's corner-handle idea, riding the
   baseline. Drag it and the whole window re-derives. */
.zh-age0 {
  position: absolute;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 4px 9px;
  pointer-events: auto;
  touch-action: none;
  cursor: ew-resize;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink3);
  white-space: nowrap;
  background: var(--knob-face);
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  box-shadow: var(--e1);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, scale 0.16s ease;
}
.zh-age0 b { color: var(--ink); font-weight: 600; display: inline-block; }
.zh-age0__arr { color: var(--ink4); font-size: 12px; letter-spacing: 0; }
.zh-age0:hover { border-color: var(--accent); box-shadow: var(--e2); }
.zh-age0.z-knob--grab { scale: 1.06; border-color: var(--accent); }

/* The scrub readout pill (drag or tap the open chart to read a year). */
.zh-scrub-pill {
  position: absolute;
  transform: translate(-50%, -130%);
  padding: 3px 8px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--accent-deep);
  white-space: nowrap;
  background: var(--knob-face);
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  box-shadow: var(--e1);
}
.zh__threshcap {
  position: absolute;
  right: 1.2%;
  /* Lifted clear of the star handle, which rides the "enough" rule at the
     crossing and used to collide with this cap on narrow screens. */
  transform: translateY(-185%);
  transition: right 0.3s var(--ease);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--accent-deep);
  opacity: 0.85;
  white-space: nowrap;
}
.zh__threshcap b { font-weight: 600; }
/* Endpoint parked on the enough line: cede the right corner to the ring's
   "$X.XM by 65" label. */
.zh__threshcap--dodge { right: 158px; }
/* ---- Handles, exactly the app's identities ----
   Star: 22px circle, surface face, 1.5px accent border, 12px star.
   Ring: 18px circle, 2px accent border. Tab: 26x18 rounded pill with
   two grip bars. All wear a 44px halo when grabbed and pop 15% for
   160ms, the app's emphasis numbers. Hit area extends to 44px. */
.zh-knob {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent-deep);
  touch-action: none;
  transition: scale 0.16s ease;
}
.zh-knob::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.zh-knob.z-knob--grab { scale: 1.15; }
.zh-knob__halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  scale: 0.85;
  transition: opacity 0.16s ease, scale 0.16s ease;
  pointer-events: none;
}
.zh-knob:hover .zh-knob__halo { opacity: 0.08; scale: 1; }
.zh-knob.z-knob--grab .zh-knob__halo,
.zh-knob.is-armed .zh-knob__halo { opacity: 0.16; scale: 1; }
.zh-knob--star {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  background: var(--knob-face);
  box-shadow: var(--e1);
}
.zh-knob--star svg {
  display: block;
  width: 12px;
  height: 12px;
  max-width: none;
}
.zh-knob--ring {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--knob-face);
  box-shadow: var(--e1);
}
.zh-knob--tab {
  width: 26px;
  height: 18px;
  flex-direction: column;
  gap: 3px;
  border-radius: 6px;
  border: 1px solid var(--hair);
  background: var(--knob-face);
  box-shadow: var(--e1);
}
.zh-knob__grip {
  width: 12px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--ink4);
}
.zh-knob__lab {
  position: absolute;
  top: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--accent-deep);
  white-space: nowrap;
}
.zh-knob__lab--up { top: auto; bottom: calc(100% + 9px); }
/* The ring sits at the frame's right edge: grow its label leftward so it
   can never run past the viewport. */
.zh-knob--ring .zh-knob__lab { left: auto; right: -4px; transform: none; text-align: right; }
.zh-knob--tab .zh-knob__lab { transform: translateX(0); left: 18px; top: calc(100% + 7px); color: var(--ink2); }
.zh-knob--beyond { opacity: 0.75; }
@media (max-width: 720px) {
  .zh { padding-bottom: 44px; }
  .zh__head { padding-inline: var(--gutter); text-align: center; max-width: none; }
  .zh__sub { margin-inline: auto; min-height: 4.2em; }
  .zh__cta { justify-content: center; }
  /* Labels ARE the affordance - keep them on touch, one step smaller. */
  .zh-knob__lab { font-size: 10px; }
}

/* ---- Numeral tick (a figure crossing to a new value under drag) ---- */
.is-tick { animation: zTick 0.3s var(--ease); }
@keyframes zTick {
  0%, 100% { scale: 1; }
  40% { scale: 1.16; }
}

/* ---- Scene 2 · what Zenith is (tell) ---- */
.zwhat { padding: clamp(72px, 10vh, 130px) var(--gutter); }
.zwhat__inner { width: min(1100px, 100%); margin: 0 auto; }
.zwhat__head { text-align: center; max-width: 860px; margin: 0 auto; }
.zwhat__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(28px, 4.6vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 14px 0;
  text-wrap: balance;
}
.zwhat__kicker {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(18px, 2.4vw, 26px);
  line-height: 1.3;
  color: var(--ink2);
  margin: 0 auto;
  max-width: 760px;
  text-wrap: balance;
}
.zwhat__body {
  font-size: clamp(15px, 1.9vw, 18px);
  line-height: 1.6;
  color: var(--ink2);
  max-width: 640px;
  margin: clamp(20px, 3vh, 30px) auto 0;
  text-align: center;
  text-wrap: pretty;
}
.zwhat__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.8vw, 22px);
  margin-top: clamp(30px, 5vh, 52px);
}
@media (max-width: 960px) { .zwhat__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .zwhat__grid { grid-template-columns: 1fr; } }
.zwhat-pillar {
  display: block;
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--hair);
  border-radius: 16px;
  background: var(--chip-bg-soft);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.zwhat-pillar:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--e1); }
.zwhat-pillar .ic { color: var(--accent-deep); }
.zwhat-pillar h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(16px, 1.8vw, 19px);
  color: var(--ink);
  margin: 10px 0 6px;
}
.zwhat-pillar p { font-size: 13.5px; line-height: 1.55; color: var(--ink2); margin: 0; }

/* ---- Scene 4 · how the math works (tell) ---- */
.zmath { padding: clamp(64px, 9vh, 112px) var(--gutter); background: var(--tint); }
.zmath__inner { width: min(1000px, 100%); margin: 0 auto; }
.zmath__head { text-align: center; max-width: 720px; margin: 0 auto clamp(24px, 4vh, 40px); }
.zmath__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(26px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 14px 0 0;
  text-wrap: balance;
}
.zmath__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 2.4vw, 28px) clamp(20px, 3.4vw, 44px);
}
@media (max-width: 680px) { .zmath__grid { grid-template-columns: 1fr; } }
.zmath-item h3 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 7px;
}
.zmath-item p { font-size: clamp(14px, 1.7vw, 16px); line-height: 1.6; color: var(--ink2); margin: 0; }
.zmath__links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: clamp(24px, 4vh, 38px) 0 0;
}
.zmath .sc-note { text-align: center; margin-top: 16px; }

/* ---- Shared scene head + paper-chart grammar ---- */
.zs__head, .zt__head, .zr__head, .zf__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(20px, 3.4vh, 34px);
}
.zs__title, .zt__title, .zr__title, .zq__title, .zf__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(28px, 4.6vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 14px 0;
  text-wrap: balance;
}
.zs__lede, .zt__lede, .zr__lede {
  font-size: clamp(15px, 1.9vw, 19px);
  line-height: 1.5;
  color: var(--ink2);
  margin: 0 auto;
  max-width: 600px;
}
/* Band fill (app: accent 0.20 at top fading to 0.04) and the line's
   horizontal accent2->accent gradient, both via CSS-var stops so dark
   mode follows automatically. */
.z-stop-a { stop-color: var(--accent); stop-opacity: 0.2; }
.z-stop-b { stop-color: var(--accent); stop-opacity: 0.04; }
.z-lstop-a { stop-color: var(--accent-deep); }
.z-lstop-b { stop-color: var(--accent); }

/* ---- Scene 3 · Scenario Studio (no card: the instrument on open paper) ---- */
.zs { padding: clamp(64px, 9vh, 112px) var(--gutter); }
.zs__inner { width: min(1160px, 100%); margin: 0 auto; }
.zs__coins {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-bottom: clamp(12px, 2vh, 20px);
}
.zs-coin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--ink);
  background: var(--chip-bg);
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  padding: 11px 18px; /* 44px+ hit target */
  cursor: pointer;
  box-shadow: var(--e1);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.zs-coin svg { color: var(--accent-deep); }
.zs-coin:hover { transform: translateY(-1px); box-shadow: var(--e2); }
.zs-coin[aria-pressed='true'] {
  border-color: var(--accent);
  background: var(--band);
}
.zs__stage { position: relative; }
.zs__stage svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 440;
}
.zs__area { fill: url(#zsAreaGrad); transition: opacity 0.4s var(--ease); }
.zs__base { transition: opacity 0.4s var(--ease); }
.zs__stage.is-dirty .zs__base { opacity: 0.35; }
.zs__stage.is-dirty .zs__area { opacity: 0.4; }
/* The hypothesis line: the app's what-if violet, dotted "0.5 6". */
.zs__what {
  fill: none;
  stroke: var(--whatif);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 0.5 6;
}
.zs__ghost {
  fill: none;
  stroke: var(--ink3);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-dasharray: 2 5;
  opacity: 0.55;
}
.zs__starmark { fill: var(--accent-deep); }
.zs__overlay { position: absolute; inset: 0; pointer-events: none; }
.zs-node {
  position: absolute;
  bottom: 3%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}
.zs-node.is-drag { cursor: grabbing; }
.zs-node { animation: zsNodeIn 0.45s var(--ease) backwards; }
@keyframes zsNodeIn {
  from { opacity: 0; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}
.zs-node__stem {
  width: 1px;
  height: clamp(20px, 4.5vw, 46px);
  background: linear-gradient(to top, var(--accent), transparent);
  opacity: 0.6;
  transform-origin: bottom;
  animation: zsStem 0.55s var(--ease) 0.08s backwards;
}
@keyframes zsStem { from { transform: scaleY(0); } }
/* Lane markers wear the same icon as their coin button (JS clones it
   in), inside a 20px milestone-style ring — the app's marker identity. */
.zs-node__coin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  background: var(--knob-face);
  box-shadow: 0 3px 9px rgba(38, 36, 32, 0.18);
}
.zs-node__coin svg { width: 11px; height: 11px; color: var(--accent-deep); }
.zs-node__lab {
  margin-top: 5px;
  padding: 1px 6px;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--accent-deep);
  white-space: nowrap;
  /* Solid chip: these ride over axis ticks and, staggered, each other. */
  background: var(--knob-face);
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
}
/* Second row for a chip whose neighbour already owns the first. */
.zs-node__lab--dn { transform: translateY(20px); }
.zs__sub {
  font-family: var(--font-serif);
  font-size: clamp(15px, 1.9vw, 18.5px);
  line-height: 1.4;
  color: var(--ink2);
  text-align: center;
  margin: clamp(10px, 1.8vh, 18px) auto 0;
  max-width: 640px;
  min-height: 3.2em; /* two lines of narration, reserved so nothing below shifts */
  text-wrap: balance;
}
.zs__shelf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
  /* Tall enough for the keep/reset row OR the future-cards row, so
     appearing content can never crawl over the narration above. */
  min-height: 84px;
}
.zs__keep {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13.5px;
  color: #fff;
  background: var(--accent-cta);
  border: none;
  border-radius: var(--r-pill);
  padding: 9px 18px;
  cursor: pointer;
}
.zs__reset {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--ink2);
  background: none;
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  padding: 9px 16px;
  cursor: pointer;
}
/* Hidden buttons leave the row entirely - invisible placeholders held a
   phantom slot that shoved the shelf note off-center when nothing was
   selected. The shelf's min-height alone keeps the page from reflowing. */
.zs__keep[hidden],
.zs__reset[hidden] {
  display: none;
}
.zs__cards { display: flex; gap: 10px; }
.zs-fcard {
  margin: 0;
  padding: 7px 9px 5px;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: var(--frost);
  box-shadow: var(--e1);
}
.zs-fcard svg { width: 96px; height: auto; display: block; }
.zs-fcard__spark {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.zs-fcard figcaption {
  font-size: 9px;
  letter-spacing: 0.05em;
  color: var(--ink3);
  margin-top: 3px;
  white-space: nowrap;
}
.zs__shelf-note {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink3);
}
.zs .sc-note { text-align: center; margin-top: 8px; }

/* ---- Scene 4 · Living Timeline ---- */
.zt { padding: clamp(64px, 9vh, 112px) var(--gutter); }
.zt__road-wrap { width: min(1000px, 100%); margin: 0 auto; }
.zt__road { position: relative; height: clamp(150px, 24vw, 200px); }
.zt__road svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.zt__rail { stroke: var(--hair); stroke-width: 1.4; }
.zt__tick { stroke: var(--hair); stroke-width: 1; }
.zt__rail-lit { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.zt-ms {
  position: absolute;
  top: 50%;
  width: 0;
  transition: left 0.35s var(--ease), opacity 0.7s ease, translate 0.7s var(--ease);
}
.zt-ms--wo { transition: opacity 0.7s ease, translate 0.7s var(--ease); }
.zt-ms--pre { opacity: 0; translate: 0 12px; }
.zt-ms__dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--knob-face);
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 6px rgba(38, 36, 32, 0.2);
}
.zt-ms__flagmark {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--knob-face);
  border: 1.5px solid var(--caution);
  color: var(--caution);
  box-shadow: 0 2px 6px rgba(38, 36, 32, 0.18);
}
/* The glyph's banner sits top-right of its pole, so the geometric center
   reads high-left inside the ring; nudge for optical center. */
.zt-ms__flagmark svg { transform: translate(0.5px, 1px); }
.zt-ms__lab,
.zt-ms__age {
  position: absolute;
  left: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  text-align: center;
}
.zt-ms__lab { bottom: 17px; font-size: clamp(11px, 1.5vw, 13.5px); color: var(--ink2); }
.zt-ms__age { bottom: 36px; font-size: clamp(12px, 1.7vw, 15px); font-weight: 600; color: var(--ink); }
.zt-ms--flag .zt-ms__lab { bottom: 21px; }
.zt-ms--flag .zt-ms__age { bottom: 40px; }
.zt-ms--dn .zt-ms__lab { bottom: auto; top: 17px; }
.zt-ms--dn .zt-ms__age { bottom: auto; top: 36px; }
.zt-ms--wo .zt-ms__lab { color: var(--accent-deep); bottom: 23px; }
.zt-ms--wo .zt-ms__age { color: var(--accent-deep); bottom: 42px; }
.zt-ms.is-beyond { opacity: 0.55; }
.zt-ms__starmark {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--knob-face);
  border: 1.5px solid var(--accent);
  box-shadow: 0 4px 12px rgba(91, 128, 161, 0.32);
  color: var(--accent-deep);
}
/* One plain sentence per milestone: the road's information layer. */
.zt__notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(14px, 2.2vw, 26px);
  width: min(1100px, 100%);
  margin: clamp(20px, 3.4vh, 34px) auto 0;
}
.zt-note dt {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 6px;
}
.zt-note dd { font-size: 13.5px; line-height: 1.55; color: var(--ink2); margin: 0; }
.zt__sub {
  text-align: center;
  font-family: var(--font-serif);
  font-size: clamp(15px, 1.9vw, 19px);
  color: var(--ink2);
  max-width: 620px;
  margin: 26px auto 0;
  min-height: 1.4em;
}
.zt__sub b { display: inline-block; color: var(--ink); font-weight: 600; }
.zt .sc-note { text-align: center; margin-top: 14px; }

/* ---- Scene 5 · range + score ---- */
.zr { padding: clamp(64px, 9vh, 112px) var(--gutter); }
.zr__lede b { color: var(--ink); font-weight: 600; }
.zr__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  width: min(1100px, 100%);
  margin: 0 auto;
}
@media (max-width: 860px) {
  .zr__grid { grid-template-columns: 1fr; }
}
.zr__stage { position: relative; }
.zr__stage svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 440;
}
.zr__sister {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-dasharray: 1 7;
  opacity: 0.5;
}
.zr__caps {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-top: 22px; /* clears the in-SVG age ticks even at parallax extremes */
}
.zr__score { text-align: center; }
.zr__gauge { position: relative; width: clamp(200px, 26vw, 260px); margin: 0 auto; }
.zr__gauge svg { transform: rotate(135deg); width: 100%; height: auto; }
.zr__gauge-track { fill: none; stroke: var(--hair); stroke-width: 14; stroke-linecap: round; }
.zr__gauge-arc { fill: none; stroke: var(--accent); stroke-width: 14; stroke-linecap: round; }
.zr__gauge-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.zr__gauge-num {
  font-family: var(--font-serif);
  font-variant-numeric: tabular-nums;
  font-size: clamp(52px, 7vw, 72px);
  line-height: 0.9;
  color: var(--ink);
}
.zr__gauge-den { font-size: clamp(13px, 1.8vw, 16px); color: var(--ink3); margin-top: 6px; }
.zr__gauge-word {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-top: 8px;
}
.zr__score-copy {
  font-size: clamp(14px, 1.7vw, 16.5px);
  line-height: 1.55;
  color: var(--ink2);
  max-width: 320px;
  margin: 18px auto 0;
}
.zr .sc-note { text-align: center; margin-top: clamp(24px, 4vh, 40px); }

/* ---- Scene 7 · private, calm, yours ---- */
.zq {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(36px, 6vw, 88px);
  padding: clamp(80px, 12vh, 140px) var(--gutter);
}
.zq__copy { max-width: 500px; }
.zq__body {
  font-size: clamp(15px, 1.8vw, 17.5px);
  line-height: 1.6;
  color: var(--ink2);
  margin: 0 0 16px;
}
.zq__list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.zq__list li { display: flex; align-items: flex-start; gap: 10px; }
.zq__list .ic { flex: 0 0 auto; margin-top: 2px; color: var(--accent-deep); }
.zq__list span { font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.zq__plat {
  margin: 22px 0 4px;
  font-size: 11px;
  letter-spacing: 0.08em;
  line-height: 1.8;
  text-transform: uppercase;
  color: var(--ink3);
}
.zq__platlink { margin: 0; font-size: 13.5px; }
.zq__platlink a { color: var(--accent-deep); }
.zq__phone { flex: 0 0 auto; }

/* ---- Scene 7 · FAQ ---- */
.zf { padding: clamp(70px, 11vh, 130px) var(--gutter); }
.zf__list { width: min(760px, 100%); margin: 0 auto; }

/* ---- Scene 8 · dusk ---- */
.zd {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(100px, 16vh, 180px) var(--gutter);
  text-align: center;
}
.zd__sky {
  position: absolute;
  inset: 0;
  background: var(--sky-day);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 90%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 90%, transparent 100%);
}
.zd__star {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0 auto clamp(16px, 4vh, 32px);
  transition: transform 1.6s var(--ease), opacity 1.2s ease;
  pointer-events: none;
}
/* JS-only pre-animation state, so the star is never hidden without JS */
.js .zd__star:not(.is-lit) { transform: translateY(56px) scale(0.55); opacity: 0; }
.zd__star svg { display: block; filter: drop-shadow(0 0 22px rgba(231, 160, 121, 0.55)); }
.zd__star.is-lit svg { animation: zdTwinkle 5.5s ease-in-out 2s infinite; }
@keyframes zdTwinkle { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }
.zd__star-glow {
  position: absolute;
  inset: -26px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(231, 160, 121, 0.4), transparent 70%);
}
.zd__star.is-lit .zd__star-glow { animation: zdGlow 5.5s ease-in-out 2s infinite; }
@keyframes zdGlow { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } }
.zd__inner { position: relative; z-index: 2; width: min(760px, 100%); }
.zd__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(32px, 5.6vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.016em;
  color: var(--ink);
  margin: 0 0 clamp(28px, 5vh, 44px);
  text-wrap: balance;
}
.zd__est {
  display: inline-block;
  background: var(--frost);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  padding: clamp(24px, 3.4vw, 36px) clamp(26px, 4vw, 44px);
  box-shadow: var(--e2);
  margin-bottom: clamp(32px, 6vh, 52px);
}
.zd__est-q {
  font-family: var(--font-serif);
  font-size: clamp(19px, 2.6vw, 26px);
  color: var(--ink);
  margin: 0 0 16px;
}
.zd__est .sc-note { margin-top: 14px; }
.zd__wl-lede {
  font-size: clamp(15px, 1.9vw, 18px);
  color: var(--ink2);
  margin: 0 0 18px;
  line-height: 1.6;
}
.zd__wl-founding { font-size: 12px; letter-spacing: 0.04em; color: var(--accent-deep); }
.zd__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(460px, 100%);
  margin: 0 auto;
}
.zd__form-row { display: flex; gap: 10px; }
.zd__field {
  flex: 1;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--ink);
  background: var(--frost);
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  padding: 13px 20px;
  outline: none;
}
.zd__field:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 4px var(--focus-ring); }
.zd__join {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  color: #fff;
  background: var(--accent-cta);
  border: none;
  border-radius: var(--r-pill);
  padding: 13px 24px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(91, 128, 161, 0.3);
}
.zd__msg { font-size: 12px; color: var(--accent-deep); min-height: 16px; }
.zd__q { margin-top: 20px; }
.zd__q-lab { display: block; font-size: 13px; color: var(--ink3); margin-bottom: 10px; }
.zd__q-chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.zd__q-chips button {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink2);
  background: var(--chip-bg-soft);
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  padding: 8px 15px;
  cursor: pointer;
}
.zd__badges { display: flex; justify-content: center; margin-top: 26px; }

@media (prefers-reduced-motion: reduce) {
  .zs-node, .zs-node__stem { animation: none; }
  .zt-ms, .zt-ms--wo { transition: none; }
  .zd__star.is-lit svg, .zd__star.is-lit .zd__star-glow { animation: none; }
  .is-tick { animation: none; }
  .zh-knob, .zh-knob__halo, .zh-age0 { transition: none; }
  .zch-band, .zch-samples, .zch-edge { transition: none; }
}

/* ============================================================
   Dark-mode component overrides — kept at the end of the sheet
   so they outrank their base rules in the cascade.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  /* Page washes: same structure as the light paper, dusk depths. */
  .z-bg {
    background:
      radial-gradient(120% 95% at 16% 8%, #131a21 0%, rgba(19, 26, 33, 0) 52%),
      radial-gradient(120% 100% at 88% 6%, #10161f 0%, rgba(16, 22, 31, 0) 58%),
      radial-gradient(150% 130% at 72% 104%, #1a1613 0%, rgba(26, 22, 19, 0) 54%),
      linear-gradient(180deg, #0e1318 0%, #0a0f13 100%);
  }
  /* The color drifts + warm horizon read as quiet glows in the dark. */
  .z-bg-drift { opacity: 0.3; }
  .z-warm { opacity: 0.14; }
  ::selection { background: rgba(132, 183, 228, 0.32); }
  .wl-form__note.is-error { color: var(--danger); }
}

/* Estimator dials + app-grammar gridlines (appended last: component
   overrides must stay at the end of this sheet for cascade order). */
.est__assume-row { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 4px; }
.est__seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--hair); border-radius: 999px; }
.est__seg button {
  border: 0; background: none; cursor: pointer; border-radius: 999px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink3); padding: 8px 13px; min-height: 32px;
}
.est__seg button[aria-pressed='true'] { background: rgba(91, 128, 161, 0.14); color: var(--accent-deep); }
.est__seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.est__chart .est-grid-line { stroke: var(--hair); stroke-dasharray: 2 6; }
.est__chart .est-grid-t { fill: var(--ink3); font-family: var(--font-mono); font-size: 9px; }