/* WorldThread: plain CSS, no build step.
   Theme: dark only (cinematic brand). One accent: lantern amber.
   Shape system: buttons and tabs are full pills; panels use 18px radius. */

@font-face {
  font-family: "Geist";
  src: url("fonts/geist.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #08090c;
  --surface: #0f1116;
  --surface-2: #151820;
  --line: rgb(235 232 226 / 0.09);
  --line-strong: rgb(235 232 226 / 0.16);
  --text: #ece9e3;
  --muted: #9ba1a9;
  --dim: #5d636b;
  --accent: #e8a54e;
  --accent-ink: #15110b;
  --accent-soft: rgb(232 165 78 / 0.14);
  --radius: 18px;
  --wrap: 1240px;
  --nav-h: 68px;
  --mono: "Geist Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* Film grain: fixed, non-interactive layer. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0.06;
  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.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.035em; line-height: 1.04; }
p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--accent); color: var(--accent-ink); padding: 8px 14px; border-radius: 999px; }
.skip:focus { left: 16px; z-index: 50; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.eyebrow { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.8rem; color: var(--accent); margin-bottom: 18px; }
.section-title { font-size: clamp(2rem, 4.2vw, 3.4rem); max-width: 20ch; margin-bottom: 52px; }
.prompt-mark {
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent); border-radius: 999px; padding: 3px 10px; margin-right: 14px; vertical-align: 2px;
}
.typed .t-off { color: transparent; }
.js .typed .t-on::after { content: ""; display: inline-block; width: 2px; height: 1.05em; background: var(--accent); margin-left: 3px; vertical-align: -0.15em; }
/* The caret blinks three times once a line is typed, then rests out of sight. */
@media (prefers-reduced-motion: no-preference) { .typed.done .t-on::after { animation: blink 0.9s steps(1) 3, caret-rest 0.3s ease 2.7s forwards; } }
@media (prefers-reduced-motion: reduce) { .js .typed .t-on::after { display: none; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes caret-rest { to { opacity: 0; } }

/* Demo footers: the honesty note, and a Replay control where replaying helps. */
.demo-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.demo-foot .demo-note { margin-top: 0; }
.replay, .copy {
  flex: none; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); background: none; border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 14px; cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.replay:hover, .copy:hover { color: var(--text); border-color: var(--accent); }
/* A larger invisible hit area for these small pills. */
.replay, .copy { position: relative; }
.replay::after, .copy::after { content: ""; position: absolute; inset: -8px -4px; }
@media (prefers-reduced-motion: reduce) { .replay { display: none; } }

/* Navigation */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: var(--nav-h); border-bottom: 1px solid transparent; transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease); }
.nav.solid { background: rgb(8 9 12 / 0.78); border-bottom-color: var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.wordmark { font-weight: 650; font-size: 1.15rem; letter-spacing: -0.02em; text-decoration: none; }
.wordmark span { color: var(--accent); }
.nav ul { display: flex; gap: 30px; align-items: center; }
.nav a { padding-block: 12px; text-decoration: none; color: var(--muted); font-size: 0.95rem; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.nav a:hover { color: var(--text); }
.nav .nav-cta { color: var(--text); border: 1px solid var(--line-strong); padding: 7px 16px; border-radius: 999px; }
.nav .nav-cta:hover { border-color: var(--accent); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 28px; border: 0; border-radius: 999px; font-weight: 550; font-size: 1rem; text-decoration: none; white-space: nowrap; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 40px -12px rgb(232 165 78 / 0.55); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 50px -14px rgb(232 165 78 / 0.7); }
.btn-ghost { border: 1px solid var(--line-strong); background: rgb(8 9 12 / 0.35); backdrop-filter: blur(6px); }
.btn-ghost:hover { border-color: var(--accent); }

/* 1. Hero */
/* A soft amber light behind the season loom, like a lamp behind frosted glass. */
.hero { position: relative; min-height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: radial-gradient(34vw 30vw at 75% 52%, rgb(232 165 78 / 0.07), transparent 70%); }
#hero-threads { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgb(8 9 12 / 0.92) 0%, rgb(8 9 12 / 0.7) 38%, rgb(8 9 12 / 0) 70%), linear-gradient(0deg, var(--bg) 0%, rgb(8 9 12 / 0) 28%); }
/* Centered in the space above the status band; on short screens the hero grows instead of overlapping. */
.hero-inner { position: relative; margin: auto; padding-top: calc(var(--nav-h) + 24px); padding-bottom: 48px; }
.hero-title { font-size: clamp(3rem, 7.4vw, 6.8rem); line-height: 0.98; letter-spacing: -0.045em; }
.hero-title .w { display: inline-block; }
.hero-title .accent { color: var(--accent); }
.lede { margin-top: 30px; color: var(--muted); font-size: 1.25rem; max-width: 44ch; }
.actions { display: flex; gap: 12px; margin-top: 40px; flex-wrap: wrap; }
@media (prefers-reduced-motion: no-preference) {
  .hero-title .w { opacity: 0; transform: translateY(0.45em); animation: word-in 1s var(--ease) forwards; }
  .hero-title .w:nth-of-type(1) { animation-delay: 0.10s; } .hero-title .w:nth-of-type(2) { animation-delay: 0.18s; }
  .hero-title .w:nth-of-type(3) { animation-delay: 0.26s; } .hero-title .w:nth-of-type(4) { animation-delay: 0.50s; }
  .hero-title .w:nth-of-type(5) { animation-delay: 0.58s; } .hero-title .w:nth-of-type(6) { animation-delay: 0.66s; }
  .rise { opacity: 0; transform: translateY(16px); animation: word-in 1s var(--ease) 0.9s forwards; }
  .actions.rise { animation-delay: 1.05s; }
}
@keyframes word-in { to { opacity: 1; transform: none; } }

/* Where things stand, using only facts stated elsewhere on the page. */
/* Columns weighted to their content, so every value fits on one line at desktop widths. */
.hero-status { position: relative; margin: 0 auto 30px; display: grid; grid-template-columns: 0.85fr 1fr 1fr 0.95fr 1.2fr; }
.hero-status li { padding: 14px 18px 0; border-top: 1px solid var(--line-strong); }
.hero-status li:first-child { padding-left: 0; }
.hero-status li + li { border-left: 1px solid var(--line); }
.hs-label { display: block; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.hs-value { display: block; margin-top: 6px; font-size: 1rem; color: var(--text); }
.hs-value em { font-style: normal; color: var(--accent); }
@media (prefers-reduced-motion: no-preference) { .hero-status.rise { animation-delay: 1.25s; } }

/* 2. Manifesto */
.manifesto { padding: 140px 0 110px; }
.manifesto-text { font-size: clamp(1.9rem, 4.2vw, 3.5rem); line-height: 1.18; letter-spacing: -0.03em; font-weight: 550; max-width: 22ch; }
.manifesto-answer { margin-top: 40px; color: var(--muted); font-size: 1.3rem; max-width: 50ch; }
.manifesto-answer strong { color: var(--accent); font-weight: 600; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .manifesto-text span { color: var(--dim); animation: lit linear both; animation-timeline: view(); animation-range: entry 60% cover 45%; }
  }
}
@keyframes lit { to { color: var(--text); } }

/* The season memory: written episodes stay lit, and arcs reach back to what they draw on. */
.memory { margin: 52px 0 0; }
.map.map-memory { height: 150px; margin-top: 0; }
.m-knot.kept { fill: rgb(232 165 78 / 0.55); }
.m-head circle { fill: var(--text); filter: drop-shadow(0 0 6px rgb(236 233 227 / 0.85)); }
.m-head text { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; fill: var(--text); }
.memory-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.memory-text { display: grid; gap: 4px; }
.memory-text .demo-note { margin-top: 0; }
.memory-promise { color: var(--muted); }
.memory-caption { font-size: 1.1rem; font-weight: 550; color: var(--text); }
@media (prefers-reduced-motion: no-preference) {
  .js .memory-caption, .js .memory-promise { opacity: 0.2; transition: opacity 0.6s var(--ease); }
  .js .memory-caption.lit, .js .memory-promise.lit { opacity: 1; }
}

/* 2b. Idea to show */
.idea { padding: 60px 0 120px; }
.idea-stage { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, var(--surface-2), var(--surface)); padding: 36px; position: relative; overflow: hidden; }
.idea-stage::before { content: ""; position: absolute; left: 50%; top: -40%; width: 70%; height: 80%; transform: translateX(-50%); pointer-events: none; background: radial-gradient(closest-side, rgb(232 165 78 / 0.10), transparent); }
.idea-input { position: relative; font-size: clamp(1.15rem, 2.2vw, 1.6rem); font-weight: 500; letter-spacing: -0.01em; min-height: 2.6em; }
.idea-cols { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
.idea-col { border-top: 1px solid var(--line-strong); padding-top: 18px; }
.idea-col h3 { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 500; margin-bottom: 14px; }
.idea-col li { color: #cdd0d4; padding: 7px 0; }
.idea-col em { color: var(--text); }
.idea-out { position: relative; margin-top: 30px; display: flex; align-items: center; gap: 12px; font-weight: 550; font-size: 1.1rem; }
.idea-check { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 24px rgb(232 165 78 / 0.6); position: relative; }
.idea-check::after { content: ""; position: absolute; left: 7px; top: 4px; width: 6px; height: 11px; border: solid var(--accent-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.idea-caption { margin-top: 28px; color: var(--muted); max-width: 62ch; font-size: 1.1rem; }
.idea-asks { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.idea-asks span { font-size: 0.95rem; color: var(--text); border: 1px solid rgb(232 165 78 / 0.35); background: var(--accent-soft); border-radius: 999px; padding: 6px 14px; }
/* The season plan Genesis builds: 50 episodes in five arcs of ten, a hook tick at the end of each.
   Episode 1 turns white when it is ready for review. */
.season-plan { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 30px; }
.plan-arc { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.plan-arc i { position: relative; height: 12px; border-radius: 3px; background: rgb(235 232 226 / 0.08); }
.plan-arc i::after { content: ""; position: absolute; right: 1px; top: -6px; width: 2px; height: 4px; border-radius: 1px; background: var(--accent); opacity: 0.25; }
.plan-arc i.on { background: rgb(232 165 78 / 0.78); }
.plan-arc i.on::after { opacity: 1; }
.plan-arc i.first { background: var(--text); box-shadow: 0 0 12px rgb(236 233 227 / 0.5); }
@media (prefers-reduced-motion: no-preference) {
  .plan-arc i, .plan-arc i::after { transition: background-color 0.3s var(--ease), opacity 0.3s var(--ease); }
}

/* Nothing starts empty: the foundation waits, dimmed, and lights up as Genesis builds it. */
@media (prefers-reduced-motion: no-preference) {
  .js .idea-asks span, .js .idea-col li, .js .idea-col h3, .js .idea-out { opacity: 0.16; transition: opacity 0.45s var(--ease); }
  .js .idea-stage .lit { opacity: 1; }
}

/* 2c. Creative Lab */
.lab { padding: 100px 0 120px; border-top: 1px solid var(--line); }
.lab-board { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; }
.lab-left, .lab-right { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 32px; }
.lab-left { background: radial-gradient(80% 60% at 0% 0%, var(--accent-soft), transparent 60%), var(--surface); }
.lab-pitch { font-size: clamp(1.15rem, 2.1vw, 1.5rem); font-weight: 500; min-height: 2.4em; }
.lab-ideas { display: grid; gap: 10px; margin-top: 22px; }
.lab-card {
  text-align: left; cursor: pointer; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface-2);
  padding: 16px 18px; font-size: 1.08rem; display: flex; flex-direction: column; gap: 4px;
  transition: opacity 0.5s var(--ease), border-color 0.3s var(--ease), background-color 0.3s var(--ease), transform 0.4s var(--ease), box-shadow 0.3s var(--ease);
}
.lab-card:hover { border-color: rgb(232 165 78 / 0.5); transform: translateX(4px); }
.lab-card[aria-pressed="true"] { border-color: var(--accent); background: linear-gradient(90deg, var(--accent-soft), var(--surface-2) 70%); box-shadow: 0 10px 40px -20px rgb(232 165 78 / 0.6); }
.lab-card-n { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.lab-card[aria-pressed="true"] .lab-card-n { color: var(--accent); }
.lab-right h3 { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 500; }
.checks { margin-top: 16px; display: grid; gap: 12px; min-height: 132px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; color: #cdd0d4; }
.checks li::before { content: ""; flex: 0 0 18px; height: 18px; margin-top: 3px; border-radius: 50%; border: 2px solid var(--accent); }
.checks li.ok::before { background: var(--accent); box-shadow: inset 0 0 0 3px var(--surface); }
.checks li.warn::before { border-style: dashed; }
.checks li.warn { color: var(--text); }
.lab-impact { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 18px; }
.lab-impact p { color: #cdd0d4; }
.lab-impact strong { color: var(--accent); }
/* The Lab's small season map: marked for review once added, parked while kept in the Lab. */
.map.map-mini { height: 66px; margin: 0 0 8px; }
.map-svg[data-state="marked"] .m-knot.hit { stroke: var(--text); stroke-width: 1.6; }
.map-svg[data-state="parked"] .m-knot.hit { fill: rgb(232 165 78 / 0.28); filter: none; }
.map-svg[data-state="parked"] .m-label.hit { fill: var(--muted); }
.lab-actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.btn-sm { height: 42px; padding: 0 20px; font-size: 0.95rem; cursor: pointer; }
.lab-result { margin-top: 14px; min-height: 1.6em; color: var(--text); font-size: 0.98rem; }
@media (prefers-reduced-motion: no-preference) {
  .js .lab-card { opacity: 0.16; }
  .js .lab-card.lit { opacity: 1; }
  /* The first fit check is in the page; it waits dimmed until the Lab plays. */
  .js .lab-board:not(.played) .checks { opacity: 0.16; }
  .checks li { animation: swap-in 0.4s var(--ease) both; }
}
@keyframes swap-in { from { opacity: 0; transform: translateY(6px); } }

/* 5. Ask */
.ask { padding: 110px 0 120px; border-top: 1px solid var(--line); }
.demo-tabs { display: inline-flex; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.demo-tab { border: 0; background: none; padding: 10px 20px; border-radius: 999px; color: var(--muted); cursor: pointer; font-weight: 500; transition: background-color 0.25s var(--ease), color 0.25s var(--ease); }
.demo-tab[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
.demo-panel { margin-top: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(90% 140% at 0% 0%, rgb(232 165 78 / 0.05), transparent 55%), var(--surface); padding: 30px 36px; }
.query { font-size: clamp(1.1rem, 2vw, 1.45rem); font-weight: 500; min-height: 2.4em; }
.answer { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 22px; }
.answer p { color: #cdd0d4; font-size: 1.15rem; max-width: 60ch; }
.answer strong { color: var(--accent); }
.count { font-variant-numeric: tabular-nums; }
.sources { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.sources li { font-family: var(--mono); font-size: 0.8rem; color: var(--text); border: 1px solid var(--line-strong); border-radius: 999px; padding: 5px 12px; }
.demo-note { margin-top: 14px; color: var(--muted); font-size: 0.85rem; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The season map: one thread, 50 episode knots in five arcs of ten. */
.map { height: 190px; margin-top: 16px; }
.map-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.m-thread { stroke: rgb(235 232 226 / 0.16); stroke-width: 1.5; }
.m-knot { fill: rgb(235 232 226 / 0.24); }
.m-knot.src { fill: var(--text); }
.m-knot.hit { fill: var(--accent); filter: drop-shadow(0 0 5px rgb(232 165 78 / 0.85)); }
.m-arc { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-opacity: 0.62; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.m-arc.on { stroke-dashoffset: 0; }
.m-label { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; fill: var(--accent); }
.m-label.src { fill: var(--text); }
.m-axis { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--muted); }
.m-ring { fill: none; stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: ring 0.9s var(--ease) forwards; }
.m-ring.src { stroke: var(--text); }
.m-ring.hit { stroke: var(--accent); }
@keyframes ring { from { transform: scale(0.6); opacity: 0.9; } to { transform: scale(3.2); opacity: 0; } }

/* What does he know: the answer, built from its clues. Two clues feed what Nate knows;
   what nobody knows yet stays open. */
.know { display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1.15fr) 48px minmax(0, 0.8fr); grid-template-rows: 1fr 1fr auto; row-gap: 12px; }
.know-card { border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface-2); padding: 14px 16px; }
.answer .know-card p { font-size: 1rem; line-height: 1.45; color: var(--text); max-width: none; }
.answer .know-card .know-label { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.know-clue-1 { grid-area: 1 / 1; }
.know-clue-2 { grid-area: 2 / 1; }
.know-fact { grid-area: 1 / 3 / 3 / 4; align-self: center; border-color: var(--accent); background: linear-gradient(160deg, var(--accent-soft), var(--surface-2) 70%); box-shadow: 0 16px 44px -26px rgb(232 165 78 / 0.8); }
.answer .know-fact p { font-size: 1.14rem; }
.answer .know-fact .know-label { color: var(--accent); }
.know-open { grid-area: 1 / 5 / 3 / 6; align-self: center; border-style: dashed; background: none; }
.know-link { position: relative; }
.know-link-in { grid-area: 1 / 2 / 3 / 3; }
.know-link-out { grid-area: 1 / 4 / 3 / 5; }
.know-link::before, .know-link::after { content: ""; position: absolute; }
.know-link-in::before { left: 0; width: 50%; top: 25%; bottom: 25%; border: 1.5px solid var(--accent); border-left: 0; border-radius: 0 10px 10px 0; }
.know-link-in::after { left: 50%; right: 6px; top: 50%; border-top: 1.5px solid var(--accent); }
.know-link-out::after { left: 6px; right: 6px; top: 50%; border-top: 1.5px dashed var(--accent); }
.know .sources { grid-area: 3 / 1 / 4 / 6; margin-top: 4px; }

@media (prefers-reduced-motion: no-preference) {
  .js .demo-panel .answer { opacity: 0.16; transition: opacity 0.5s var(--ease); }
  .js .demo-panel.shown .answer { opacity: 1; }
  .js .demo-panel .answer.know { opacity: 1; }
  .js .know-card, .js .know .sources { opacity: 0.16; transition: opacity 0.45s var(--ease); }
  .js .know-card.lit, .js .know .sources.lit { opacity: 1; }
  .js .know-link::before, .js .know-link::after { transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }
  .js .know-link-in::after { transition-delay: 0.12s; }
  .js .know-link.lit::before, .js .know-link.lit::after { transform: none; }
  .m-arc { transition: stroke-dashoffset 0.36s var(--ease); }
  .m-arc.still { transition: none; }
}

/* 6. Engine */
.engine { padding: 110px 0 120px; border-top: 1px solid var(--line); }
.pipeline { position: relative; display: grid; grid-template-columns: repeat(9, 1fr); gap: 10px; counter-reset: none; }
.pipeline::before { content: ""; position: absolute; left: 4%; right: 4%; top: 22px; height: 2px; background: var(--line-strong); }
/* Progress: the line fills behind the steps as they light, then rests full. */
.pipeline::after { content: ""; position: absolute; left: 4%; right: 4%; top: 22px; height: 2px; background: var(--accent); box-shadow: 0 0 12px rgb(232 165 78 / 0.55); transform-origin: left; transform: scaleX(var(--lit, 0)); transition: transform 0.2s linear; }
.pipeline li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding-top: 0; }
.pipeline li::before { content: ""; width: 14px; height: 14px; margin-top: 16px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s; }
.pl-step { font-weight: 600; font-size: 1.1rem; margin-top: 4px; }
.pl-tag { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--muted); }
.pipeline li.pl-you .pl-tag { color: var(--accent); }
.pipeline li.lit::before { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 18px rgb(232 165 78 / 0.7); }
.pipeline li.lit .pl-step { color: var(--accent); }
/* The episode traveling the pipeline, and the wait at Approve. Around it, drawn by script: the
   cost guard rail over the paid steps and the world model bus under the steps up to Approve. */
.pipe { position: relative; padding: 44px 0 48px; }
.pipe-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pipe-rail, .pipe-link, .pipe-bus { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-opacity: 0.5; }
.pipe-link { stroke-opacity: 0.32; stroke-dasharray: 2 4; }
.pipe-rail.hot, .pipe-link.hot { stroke-opacity: 1; stroke-dasharray: none; filter: drop-shadow(0 0 6px rgb(232 165 78 / 0.9)); }
.pipe-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .pipe-rail, .pipe-link { transition: stroke-opacity 0.25s var(--ease); }
  .pipe-bus.commit { animation: commit 1s var(--ease); }
}
@keyframes commit { 30% { stroke-opacity: 1; stroke-width: 3; filter: drop-shadow(0 0 8px rgb(232 165 78 / 0.9)); } }
.pl-token { position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, #fff3dc 0 28%, var(--accent) 52%, rgb(232 165 78 / 0) 72%); box-shadow: 0 0 22px 5px rgb(232 165 78 / 0.5); transition: opacity 0.3s var(--ease); }
.pipe.running .pl-token { opacity: 1; }
/* At rest each step shows its department's status from the board: filled built, half filled
   building, an open ring not built yet. The line steps back so the statuses lead. */
.pipe:not(.running) .pipeline li.lit[data-status="building"]::before { background: linear-gradient(90deg, var(--accent) 50%, var(--surface) 50%); box-shadow: none; }
.pipe:not(.running) .pipeline li.lit[data-status="later"]::before { background: var(--surface); border-color: var(--line-strong); box-shadow: none; }
.pipe:not(.running) .pipeline li.lit[data-status="later"] .pl-step { color: var(--text); }
.pipe:not(.running) .pipeline::after { opacity: 0.4; }
.pipeline::after { transition: transform 0.2s linear, opacity 0.6s var(--ease); }
.pl-key { position: absolute; top: 2px; right: 0; display: flex; gap: 16px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.pl-key .k::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 7px; vertical-align: -1px; border-radius: 50%; border: 1.5px solid var(--accent); }
.pl-key .built::before { background: var(--accent); }
.pl-key .building::before { background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); }
.pl-key .later::before { border-color: var(--line-strong); }
.pipe-replay { position: absolute; right: 0; bottom: 0; }
@media (prefers-reduced-motion: no-preference) {
  .pipeline li.waiting::before { animation: wait-ring 0.45s ease-in-out 2 alternate; }
}
@keyframes wait-ring { to { box-shadow: 0 0 0 9px rgb(232 165 78 / 0.22), 0 0 22px rgb(232 165 78 / 0.8); } }
.partners { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 64px; }
.partner { border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; background: linear-gradient(160deg, var(--accent-soft), transparent 50%), var(--surface); }
.partner h3 { font-size: 1.7rem; }
.partner p { margin-top: 12px; color: var(--muted); max-width: 46ch; }
/* How Claude is used today, and at launch. */
.claude-now { margin: 16px 0 4px; border-top: 1px solid var(--line); }
.claude-now div { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.claude-now dt { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); padding-top: 3px; }
.claude-now dd { margin: 0; color: var(--text); line-height: 1.5; }
.engine-status { margin-top: 28px; color: var(--muted); max-width: 70ch; }
.engine-status strong { color: var(--text); }

/* 6b. Engagement heartbeat */
.pulse { padding: 110px 0 120px; border-top: 1px solid var(--line); }
.pulse-chart { position: relative; border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(70% 90% at 50% 0%, var(--surface-2), var(--surface) 70%); height: 340px; overflow: hidden; cursor: crosshair; touch-action: pan-y; }
#heartbeat { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pulse-axis { position: absolute; left: 28px; right: 28px; bottom: 14px; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pulse-caption { margin-top: 18px; min-height: 1.7em; color: var(--muted); font-size: 1.05rem; }
.pulse-caption strong { color: var(--accent); font-weight: 600; }
.pulse-caption em { font-style: normal; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px 9px; margin-left: 8px; vertical-align: 1px; }
/* All seven devices in one row: no empty slot. */
.devices { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.device {
  text-align: left; cursor: pointer; border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 8px;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.device:hover, .device:focus-visible, .device.on { border-color: var(--accent); background: linear-gradient(160deg, var(--accent-soft), var(--surface) 70%); transform: translateY(-2px); }
.feel { font-size: 1.02rem; color: var(--text); line-height: 1.35; }
.term { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.dev-status { margin-top: auto; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.dev-status::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; vertical-align: 0; border-radius: 50%; border: 1.5px solid var(--accent); }
.dev-status.built::before { background: var(--accent); }
.dev-status.building::before { background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); }
.partner-status { margin-top: 12px; }

/* 7. Dreamless */
.dreamless-title { font-size: clamp(3.6rem, 10vw, 8.5rem); letter-spacing: -0.05em; line-height: 0.95; }
.clock { margin-top: 20px; font-family: var(--mono); font-size: clamp(1.2rem, 2.4vw, 1.75rem); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.clock span { color: var(--accent); font-variant-numeric: tabular-nums; }
/* The clock lands on year 101 with a flash. */
@media (prefers-reduced-motion: no-preference) { .clock span.landed { animation: landed 1.4s var(--ease); } }
@keyframes landed { 15% { color: #fff3dc; text-shadow: 0 0 22px rgb(232 165 78 / 0.95), 0 0 2px #fff; } }
.dreamless-copy { margin-top: 36px; max-width: 52ch; }
.dreamless-copy p { color: #c6c9cd; font-size: 1.15rem; }
.dreamless-copy p + p { margin-top: 16px; }
.dreamless-copy em { color: var(--text); }
.stats { display: grid; grid-template-columns: repeat(3, max-content); gap: 56px; margin-top: 56px; }
/* Numbers sit on one baseline even when a label wraps to two lines. */
.stats div { display: flex; flex-direction: column; border-top: 1px solid var(--line-strong); padding-top: 16px; }
.stats dt { color: var(--muted); font-size: 0.9rem; }
.stats dd { margin-top: auto; padding-top: 6px; font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 550; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.status { margin-top: 40px; font-weight: 550; }

/* Genres strip (inside Genesis) */
.genres { margin-top: 64px; }
.genres-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.genres-title { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.genres-sub { margin-top: 8px; color: var(--muted); max-width: 70ch; }
.genre-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 24px; }
.genre { border: 1px solid var(--line); border-radius: 14px; padding: 22px; background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.genre h4 { margin: 0; font-size: 1.12rem; letter-spacing: -0.02em; font-weight: 600; color: var(--text); }
.genre p { margin-top: 8px; color: var(--muted); font-size: 0.98rem; }

/* 8. Dreamless: one key art image everywhere, so the ship and the Lantern always match */
.dreamless { position: relative; padding: 0 0 120px; border-top: 1px solid var(--line); background: #06070a; }
.dl-band { position: relative; overflow: hidden; }
.dl-art { display: block; width: 100%; height: auto; max-height: 86vh; object-fit: cover; object-position: 70% 50%; transform-origin: 58% 46%; }
.dl-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, #06070a 0%, rgb(6 7 10 / 0.55) 30%, rgb(6 7 10 / 0) 60%), linear-gradient(90deg, rgb(6 7 10 / 0.55) 0%, rgb(6 7 10 / 0) 45%); }
.dl-title-block { position: absolute; left: 0; right: 0; bottom: 36px; }
.dl-body { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 64px; align-items: start; margin-top: 48px; }
.dl-body .stats { grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 6px; }
.dl-body .dreamless-copy { margin-top: 0; }

/* Phone concept: the photo's green screen is covered by a live HTML app screen. */
.phone-shot { margin: 0; justify-self: end; width: min(100%, 440px); }
.phone-frame { position: relative; border-radius: var(--radius); overflow: hidden; container-type: inline-size; }
.phone-frame > img { display: block; width: 100%; height: auto; }
.app-screen {
  position: absolute; left: 27.55%; top: 9.24%; width: 44.9%; height: 78.1%; container-type: inline-size;
  /* The screen's own radius and padding are in phone-frame units (the screen is 44.9% of the frame's width);
     everything inside uses the screen's own width. */
  border-radius: 3.05cqw; overflow: hidden; background: radial-gradient(120% 60% at 50% 0%, #1b1710, #0a0b0e 60%); color: var(--text);
}
/* Front camera, drawn above both modes. Inside the screen, cqw is the screen's width. */
.app-screen::before { content: ""; position: absolute; z-index: 3; left: 50%; top: 3.2cqw; width: 4.4cqw; height: 4.4cqw; transform: translateX(-50%); border-radius: 50%; background: #050506; box-shadow: inset 0 0 0 0.6cqw #111; }
.app-listen, .app-watch { position: absolute; inset: 0; transition: opacity 0.6s var(--ease); }
.app-listen { display: flex; flex-direction: column; align-items: stretch; padding: 13cqw 7cqw 7cqw; }
.app-watch { opacity: 0; background: #050506; }
.app-screen[data-mode="watch"] .app-listen { opacity: 0; }
.app-screen[data-mode="watch"] .app-watch { opacity: 1; }
/* Centered on Nate and the bowl he is looking at. */
.app-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 64% 50%; transform: scale(1.04); }
.app-watch::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(5 5 6 / 0.92) 0%, rgb(5 5 6 / 0.2) 42%, rgb(5 5 6 / 0) 60%); }
.app-line { position: absolute; z-index: 2; left: 7cqw; right: 7cqw; bottom: 16cqw; margin: 0; font-size: 6.4cqw; line-height: 1.35; text-align: center; color: #f3efe8; transition: opacity 0.4s var(--ease); }
.app-line b { display: block; font-family: var(--mono); font-weight: 500; font-size: 4cqw; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.6cqw; }
.app-progress-watch { position: absolute; z-index: 2; left: 7cqw; right: 7cqw; bottom: 8cqw; margin: 0; }
.app-brand { font-size: 4.4cqw; font-weight: 650; letter-spacing: -0.02em; color: var(--muted); }
.app-brand span { color: var(--accent); }
.app-cover { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 4.5cqw; margin-top: 6cqw; box-shadow: 0 6cqw 12cqw -6cqw rgb(232 165 78 / 0.45); }
.app-title { margin-top: 7cqw; font-size: 9cqw; font-weight: 650; letter-spacing: -0.04em; line-height: 1; }
.app-sub { margin-top: 2.4cqw; font-size: 4.6cqw; color: var(--muted); }
.app-wave { margin-top: 6cqw; height: 11cqw; display: flex; align-items: center; gap: 1.2cqw; }
.app-wave i { flex: 1; border-radius: 1cqw; background: var(--accent); opacity: 0.85; height: var(--h, 40%); }
.app-wave i.future { background: rgb(235 232 226 / 0.25); }
.app-progress { margin-top: 4cqw; height: 1.2cqw; border-radius: 1cqw; background: rgb(235 232 226 / 0.15); overflow: hidden; }
.app-progress span { display: block; height: 100%; width: 38%; background: var(--accent); border-radius: inherit; transform-origin: left; }
.app-controls { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 10cqw; }
.app-pause { position: relative; width: 17cqw; height: 17cqw; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8cqw rgb(232 165 78 / 0.45); }
.app-pause::before, .app-pause::after { content: ""; position: absolute; top: 31%; width: 11%; height: 38%; border-radius: 0.6cqw; background: var(--accent-ink); }
.app-pause::before { left: 35%; } .app-pause::after { right: 35%; }
.app-skip { position: relative; width: 9cqw; height: 9cqw; }
.app-skip::before, .app-skip::after { content: ""; position: absolute; top: 25%; border-style: solid; border-color: transparent; border-width: 2.2cqw 3cqw 2.2cqw 0; border-right-color: var(--text); }
.app-skip::before { left: 8%; } .app-skip::after { left: 42%; }
.app-skip-fwd { transform: scaleX(-1); }
.phone-shot figcaption { margin-top: 14px; color: var(--muted); font-size: 0.9rem; text-align: center; }
/* The bars move only while the phone is playing, then rest. */
@media (prefers-reduced-motion: no-preference) {
  .app-screen.playing .app-wave i { animation: bar 0.8s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
}
@keyframes bar { from { transform: scaleY(0.55); } to { transform: scaleY(1); } }

/* 8b. Production tiers */
.tier { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line-strong); }
.tier-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.tier-num { margin: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); color: var(--accent-ink); background: var(--accent); font-weight: 600; }
.tier-head h3 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.hear-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; align-items: start; }
.desk { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 24px; }
.desk-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.desk-title { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.desk-lanes { position: relative; margin-top: 16px; display: grid; gap: 10px; }
.lane { position: relative; display: grid; grid-template-columns: 170px 1fr; gap: 12px; align-items: center; }
/* The line being heard, in time with the playhead; and the effects flagging where they hit. */
.desk-caption { margin-top: 16px; min-height: 3em; font-size: 1.02rem; line-height: 1.45; color: var(--text); }
.desk-caption b { margin-right: 10px; font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.desk-cue { position: absolute; top: -9px; transform: translateX(-50%); font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; color: var(--accent-ink); background: var(--accent); border-radius: 999px; padding: 2px 8px; opacity: 0; pointer-events: none; }
.desk-cue.show { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .desk-cue { transition: opacity 0.25s var(--ease); } }
.lane canvas { width: 100%; height: 44px; display: block; border-radius: 8px; background: rgb(235 232 226 / 0.03); transition: opacity 0.3s var(--ease); }
.lane-btn { text-align: left; cursor: pointer; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-2); padding: 7px 12px; display: flex; flex-direction: column; transition: border-color 0.25s var(--ease), opacity 0.25s var(--ease); }
.lane-btn[aria-pressed="true"] { border-color: rgb(232 165 78 / 0.6); }
.lane-name { font-weight: 600; font-size: 0.95rem; }
.lane-what { font-size: 0.78rem; color: var(--muted); line-height: 1.3; }
.lane.off canvas { opacity: 0.15; }
.lane.off .lane-btn { opacity: 0.55; }
/* Positioned by script where the waveforms start; it crosses the scene once. */
.desk-playhead { position: absolute; top: -6px; bottom: -6px; left: 182px; width: 2px; background: var(--text); box-shadow: 0 0 12px rgb(236 233 227 / 0.6); pointer-events: none; }
.desk-hint { margin-top: 14px; color: var(--muted); font-size: 0.88rem; }
.hear-list { display: grid; gap: 14px; }
.hear-list li { color: #cdd0d4; border-top: 1px solid var(--line); padding-top: 12px; }
.hear-list strong { color: var(--text); font-weight: 600; }
.hear-list .l-status { margin-left: 6px; vertical-align: 2px; }
.see-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; margin-bottom: 36px; }
.see-lede { font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.4; letter-spacing: -0.01em; }
.see-sub { margin-top: 16px; color: var(--muted); font-size: 1.1rem; max-width: 46ch; }
.mode-switch { display: inline-flex; gap: 6px; padding: 6px; margin-top: 28px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.mode-btn { border: 0; background: none; padding: 10px 20px; border-radius: 999px; color: var(--muted); cursor: pointer; font-weight: 500; transition: background-color 0.25s var(--ease), color 0.25s var(--ease); }
.mode-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.tier-last { padding-bottom: 8px; }
.watch-copy { color: #cdd0d4; font-size: 1.2rem; max-width: 60ch; }

/* 8b. Visuals */
.visuals { padding: 110px 0 120px; border-top: 1px solid var(--line); }
.vis-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; }
.places { display: grid; gap: 18px; }
.bible { display: grid; grid-template-columns: 0.95fr 1fr; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.bible > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bible-card { padding: 30px; display: flex; flex-direction: column; }
.bible-label { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bible-card h4 { margin-bottom: 0; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.bible-card h4 { margin-top: 16px; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.bible-card ul { margin-top: 18px; display: grid; gap: 10px; }
.bible-card li { color: #cdd0d4; border-top: 1px solid var(--line); padding-top: 10px; }
.bible-scene { margin: 20px 0 0; }
.bible-scene img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; }
.bible-scene figcaption { margin-top: 8px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.bible-note { margin-top: auto; padding-top: 22px; color: var(--text); font-weight: 550; }
.place { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.place img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.place figcaption { padding: 14px 18px; color: var(--muted); }
.place figcaption strong { color: var(--text); font-weight: 600; }
.l-status.planned { color: var(--muted) !important; }
.contact .proof-grid { margin-bottom: 110px; }

/* A section title with its status beside it. */
.title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-bottom: 52px; }
.title-row .section-title { margin-bottom: 0; }

/* Shared section intro */
.section-intro { color: var(--muted); font-size: 1.2rem; max-width: 56ch; margin: -32px 0 44px; }

/* What each partner's API does next, and the studio board title */
.partner-next, .ledger-title { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 500; }
.partner-next { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.74rem; }
.partner-list { margin-top: 10px; display: grid; gap: 6px; }
.partner-list li { color: #cdd0d4; padding-left: 18px; position: relative; }
.partner-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.ledger-title { margin-top: 64px; }
/* The studio board: every department, grouped by status. A summary bar first, one segment
   per department; Built columns run longest, so the shape of the board is the progress. */
.board { margin-top: 18px; }
.board-sum { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.sum-bar { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; width: min(100%, 420px); }
.sum-bar i { height: 10px; border-radius: 3px; border: 1px solid var(--line-strong); }
.sum-bar i.built { background: var(--accent); border-color: var(--accent); }
.sum-bar i.building { background: rgb(232 165 78 / 0.18); border-color: rgb(232 165 78 / 0.7); }
.sum-key { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.sum-key .built { color: var(--accent); }
.board-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 20px; align-items: start; }
.board-col { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 18px 20px 8px; }
.board-col.built { border-color: rgb(232 165 78 / 0.34); background: linear-gradient(180deg, rgb(232 165 78 / 0.08), transparent 160px), var(--surface); }
.board-col.building { border-style: dashed; border-color: rgb(232 165 78 / 0.32); }
.col-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-weight: 500; }
.col-count { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--muted); }
.dept { padding: 13px 0; }
.dept + .dept { border-top: 1px solid var(--line); }
.dept-name { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-weight: 600; color: var(--text); }
.dept-power { flex: none; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; font-weight: 500; color: var(--muted); }
.dept-what { margin-top: 4px; font-size: 0.92rem; line-height: 1.5; color: #b9bdc2; }
.dept-split { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
/* Lights on: the summary segments take their colors in turn when the board comes into view. */
@media (prefers-reduced-motion: no-preference) {
  .js .sum-bar i { transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); }
  .js .board:not(.lit) .sum-bar i:not(.on) { background: none; border-color: var(--line-strong); }
  .js .sum-bar i.on.built { box-shadow: 0 0 12px rgb(232 165 78 / 0.55); }
  .js .board-col { transition: border-color 0.6s var(--ease); }
  .js .board:not(.lit) .board-col.built { border-color: var(--line); }
}
.l-status { justify-self: start; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 999px; padding: 3px 10px; border: 1px solid var(--line-strong); }
.l-status.built { color: var(--accent-ink) !important; background: var(--accent); border-color: var(--accent); }
.l-status.building { color: var(--accent) !important; border-color: rgb(232 165 78 / 0.55); }
.l-status.next { color: var(--text) !important; }

/* The production roadmap: three stops on one thread, each with its status. The thread runs on
   past the last stop. Next is an open ring, Building half filled, Planned a dashed ring. */
.roadmap { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin: 4px 0 8px; }
.roadmap::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: rgb(232 165 78 / 0.35); }
.rm-stop a { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; text-decoration: none; }
.rm-knot { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--accent); background: var(--bg); }
/* Names and statuses sit on the thread; the page color behind them keeps the line from striking through. */
.rm-name, .rm-stop .l-status { background: var(--bg); }
.rm-name { padding-right: 4px; }
.rm-stop.building .rm-knot { background: linear-gradient(90deg, var(--accent) 50%, var(--bg) 50%); }
.rm-stop.planned .rm-knot { border-style: dashed; border-color: var(--muted); }
.rm-name { font-weight: 600; font-size: 1.15rem; transition: color 0.2s var(--ease); }
.rm-stop a:hover .rm-name { color: var(--accent); }
.tier-last { margin-top: 48px; padding: 26px 30px; border: 1px dashed var(--line-strong); border-radius: var(--radius); }

/* The thread that opens the page ends here, in a knot under the address. */
.mail-row { position: relative; display: inline-flex; align-items: center; gap: 14px; margin-top: 40px; }
.mail-row .mail { position: relative; margin-top: 0; }
/* After the knot, the thread runs on under the address and out to the right edge. */
.mail-row .mail::after { content: ""; position: absolute; left: 100%; bottom: -2px; width: 50vw; height: 2px; background: linear-gradient(90deg, var(--accent), rgb(232 165 78 / 0)); pointer-events: none; }
.mail-thread { position: absolute; right: calc(100% + 2px); bottom: 0; width: 50vw; height: 2px; background: linear-gradient(90deg, rgb(232 165 78 / 0), var(--accent)); }
.mail-thread::after { content: ""; position: absolute; right: -6px; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 16px rgb(232 165 78 / 0.85); }
@media (prefers-reduced-motion: no-preference) {
  .js .mail-thread { transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease); }
  .js .mail-thread::after { opacity: 0; transition: opacity 0.3s var(--ease) 1s; }
  .js .mail-row.drawn .mail-thread { transform: none; }
  .js .mail-row.drawn .mail-thread::after { opacity: 1; }
  .js .mail-row .mail::after { transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease) 1.1s; }
  .js .mail-row.drawn .mail::after { transform: none; }
}

/* Proof and guardrails */
.proof-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: center; }
.proof-num { font-size: clamp(3.4rem, 8vw, 6rem); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.04em; color: var(--accent); line-height: 1; }
.proof-label { margin-top: 14px; color: var(--muted); font-size: 1.15rem; max-width: 26ch; }
.proof-rules h2 { font-size: clamp(2rem, 4vw, 3rem); }
.proof-rules ul { margin-top: 24px; display: grid; gap: 14px; }
.proof-rules li { color: #cdd0d4; font-size: 1.1rem; border-top: 1px solid var(--line); padding-top: 14px; }

/* Founder */
.founder { margin: 64px auto 0; max-width: 46ch; border-top: 1px solid var(--line); padding-top: 28px; }
.founder-photo { display: block; width: 96px; height: 96px; margin: 0 auto 18px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px rgb(232 165 78 / 0.7), 0 12px 40px -12px rgb(232 165 78 / 0.45); }
.founder-name { color: var(--text) !important; font-weight: 600; font-size: 1.1rem; margin: 0 !important; }
.founder p:not(.founder-name) { margin-top: 8px; font-size: 1rem; color: var(--muted); }

/* 9. Contact */
.contact { position: relative; padding: 140px 0 170px; border-top: 1px solid var(--line); overflow: hidden; }
.contact::before { content: ""; position: absolute; left: 50%; top: 55%; width: 900px; height: 520px; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(closest-side, rgb(232 165 78 / 0.12), transparent); }
.contact-inner { position: relative; text-align: center; }
.contact-inner h2 { font-size: clamp(2.8rem, 7vw, 5.6rem); letter-spacing: -0.045em; }
.contact-inner > p { margin: 22px auto 0; color: var(--muted); max-width: 48ch; font-size: 1.15rem; }
.mail { display: inline-block; margin-top: 40px; font-size: clamp(1.4rem, 3.4vw, 2.3rem); font-weight: 550; text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 6px; transition: color 0.25s var(--ease); }
.mail:hover { color: var(--accent); }

/* Footer */
.footer { border-top: 1px solid var(--line); padding: 28px 0; color: var(--muted); font-size: 0.9rem; }
.footer-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-legal { flex-basis: 100%; font-size: 0.8rem; }

/* Reveal on scroll */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
  .js .reveal.in { opacity: 1; transform: none; }
}

/* Tablet and mobile */
@media (max-width: 900px) {
  /* The copy and the status sit at the top; the season loom keeps the foot of the hero. */
  .hero { flex-direction: column; justify-content: flex-start; align-items: stretch; padding-bottom: 128px; background: radial-gradient(60vw 30vw at 55% 92%, rgb(232 165 78 / 0.07), transparent 70%); }
  /* .hero prefix: the phone .wrap padding rule further down must not reset this. */
  .hero .hero-inner { margin: 0 auto; padding-top: calc(var(--nav-h) + 26px); padding-bottom: 0; }
  .hero-status { position: static; margin: 24px auto 0; grid-template-columns: 1fr 1fr; }
  .hero-status li { padding: 11px 14px 12px; }
  .hero-status li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .hs-label { font-size: 0.66rem; }
  .hs-value { margin-top: 4px; font-size: 0.95rem; }
  .hero-status li:last-child { grid-column: 1 / -1; }
  /* Dark behind the copy, clear along the foot of the hero where the season thread runs. */
  .hero-shade { background: linear-gradient(0deg, var(--bg) 0%, rgb(8 9 12 / 0) 5%, rgb(8 9 12 / 0) 16%, rgb(8 9 12 / 0.6) 30%, rgb(8 9 12 / 0.6) 82%, rgb(8 9 12 / 0.35) 100%); }
  .manifesto { padding: 100px 0 80px; }
  .idea { padding: 40px 0 90px; }
  .idea-stage { padding: 24px; }
  .idea-cols { grid-template-columns: 1fr; gap: 6px; }
  .lab { padding: 80px 0 90px; }
  .pulse { padding: 80px 0 90px; }
  .pulse-chart { height: 240px; }
  /* Seven devices become a swipeable row below desktop widths. */
  .devices { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 40%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 28px; margin-inline: -28px; padding: 4px 28px 6px; scrollbar-width: none; }
  .devices::-webkit-scrollbar { display: none; }
  .devices > * { scroll-snap-align: start; }
  .lab-board { grid-template-columns: 1fr; }
  .lab-left, .lab-right { padding: 24px; }
  .ask, .engine { padding: 80px 0 90px; }
  .genre-grid { grid-template-columns: 1fr 1fr; }
  .dreamless { padding-bottom: 80px; }
  .dl-art { max-height: none; }
  .dl-title-block { position: relative; z-index: 1; margin-top: -20px; }
  .dl-shade { bottom: auto; height: 56.25vw; }
  .dl-body { grid-template-columns: 1fr; gap: 36px; margin-top: 32px; }
  .dl-body .stats { grid-template-columns: 1fr 1fr; }
  .hear-grid, .see-grid { grid-template-columns: 1fr; }
  .desk { padding: 18px; }
  .phone-shot { justify-self: center; width: min(100%, 360px); }
  .visuals { padding: 80px 0 90px; }
  .vis-grid { grid-template-columns: 1fr; }
  .bible { grid-template-columns: 1fr; }
  .bible > img { aspect-ratio: 4 / 5; height: auto; object-position: 50% 20%; }
  .contact .proof-grid { margin-bottom: 70px; }
  .board-cols { grid-template-columns: 1fr; gap: 12px; }
  .proof-grid { grid-template-columns: 1fr; gap: 36px; }
  .demo-panel { padding: 24px; }
  .pipeline { grid-template-columns: 1fr; gap: 0; }
  .pipeline::before { left: 6px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .pipeline::after { left: 6px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; transform-origin: top; transform: scaleY(var(--lit, 0)); }
  .pipeline li { flex-direction: row; align-items: center; text-align: left; gap: 16px; padding: 10px 0; }
  /* Room on the left for the cost guard rail, on top for the two labels, below for Replay. */
  .pipe { padding: 26px 0 44px; }
  .pipeline { padding-left: 16px; }
  .pipeline::before, .pipeline::after { left: 22px; }
  .pl-key { top: auto; bottom: 10px; left: 0; right: auto; gap: 10px; font-size: 0.6rem; }
  .pipeline li::before { margin-top: 0; flex: 0 0 auto; }
  .pl-step { margin-top: 0; min-width: 90px; }
  .partners { grid-template-columns: 1fr; margin-top: 40px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 28px; }
  .contact { padding: 100px 0 110px; }
}
/* The knowledge view stacks on narrow screens: clues side by side, then what Nate knows, then
   what is still open, joined by short vertical links. */
@media (max-width: 700px) {
  .know { grid-template-columns: 1fr 1fr; grid-template-rows: auto 28px auto 22px auto auto; column-gap: 10px; row-gap: 0; }
  .know-clue-1 { grid-area: 1 / 1; }
  .know-clue-2 { grid-area: 1 / 2; }
  .know-link-in { grid-area: 2 / 1 / 3 / 3; }
  .know-fact { grid-area: 3 / 1 / 4 / 3; }
  .know-link-out { grid-area: 4 / 1 / 5 / 3; }
  .know-open { grid-area: 5 / 1 / 6 / 3; }
  .know .sources { grid-area: 6 / 1 / 7 / 3; margin-top: 14px; }
  .know-card { padding: 12px 14px; }
  .answer .know-card p { font-size: 0.95rem; }
  .answer .know-fact p { font-size: 1.04rem; }
  .know-link-in::before { left: 25%; right: 25%; width: auto; top: 0; bottom: 50%; border: 1.5px solid var(--accent); border-top: 0; border-radius: 0 0 10px 10px; }
  .know-link-in::after { left: 50%; right: auto; top: 50%; bottom: 0; border-top: 0; border-left: 1.5px solid var(--accent); }
  .know-link-out::after { left: 50%; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 1.5px dashed var(--accent); }
}
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  .js .know-link::before, .js .know-link::after { transform: scaleY(0); transform-origin: top; }
}

@media (max-width: 680px) { .hide-sm { display: none; } }

@media (max-width: 560px) {
  .wrap { padding: 0 18px; }
  .nav ul { gap: 16px; }
  .demo-tab { padding: 9px 14px; font-size: 0.92rem; }
  .demo-panel { padding: 20px 18px; }
  .map { height: 128px; margin-top: 10px; }
  .m-label { font-size: 9.5px; }
  .m-axis { font-size: 9px; }
  .answer { margin-top: 12px; padding-top: 16px; }
  .answer p { font-size: 1.05rem; }

  /* Phone pacing: a tighter rhythm so the strongest moments arrive sooner. */
  .lede { margin-top: 22px; font-size: 1.12rem; }
  .actions { margin-top: 30px; }
  .section-title { margin-bottom: 28px; }
  .title-row { margin-bottom: 28px; }
  .claude-now div { grid-template-columns: 80px 1fr; }
  .section-intro { margin: -12px 0 28px; font-size: 1.06rem; }
  .manifesto { padding: 64px 0 44px; }
  .manifesto-answer { margin-top: 24px; font-size: 1.12rem; }
  .memory { margin-top: 32px; }
  .map.map-memory { height: 112px; }
  .memory-caption { font-size: 1rem; }
  .ask, .engine, .lab, .pulse, .visuals { padding: 64px 0; }
  .idea { padding: 24px 0 64px; }
  .idea-stage { padding: 18px; }
  .idea-cols { margin-top: 22px; }
  .idea-col { padding-top: 12px; }
  .idea-col h3 { margin-bottom: 6px; }
  .idea-col li { padding: 3px 0; }
  .idea-out { margin-top: 18px; }
  .season-plan { grid-template-columns: 1fr; gap: 11px; margin-top: 24px; }
  .plan-arc i { height: 12px; }
  .idea-caption { margin-top: 20px; font-size: 1rem; }
  .genres { margin-top: 44px; }
  .lab-left, .lab-right { padding: 18px; }
  .lab-ideas { margin-top: 16px; gap: 8px; }
  .lab-card { padding: 12px 14px; font-size: 1rem; }
  .lab-impact { margin-top: 14px; padding-top: 14px; }
  .lab-actions { margin-top: 16px; gap: 8px; }
  .btn-sm { padding: 0 14px; }
  .pipeline li { padding: 6px 0; }
  .partners { margin-top: 28px; gap: 12px; }
  .partner { padding: 22px; }
  .partner h3 { font-size: 1.45rem; }
  .partner-next { margin-top: 18px; padding-top: 14px; }
  .ledger-title { margin-top: 40px; }
  .board-col { padding: 14px 16px 4px; }
  .dept { padding: 11px 0; }
  .dept-what { font-size: 0.88rem; }
  .sum-bar { width: 100%; }
  /* Dreamless fills the screen: a tall crop of the same key art (ship and Lantern both in frame),
     with the title over its dark lower third. */
  .dl-art { aspect-ratio: 4 / 5; object-position: 45% 50%; transform-origin: 33% 55%; }
  .dl-shade { bottom: 0; height: auto; background: linear-gradient(0deg, #06070a 0%, rgb(6 7 10 / 0.72) 24%, rgb(6 7 10 / 0) 52%), linear-gradient(180deg, rgb(6 7 10 / 0.5) 0%, rgb(6 7 10 / 0) 18%); }
  .dl-title-block { position: absolute; bottom: 16px; margin-top: 0; }
  .dl-title-block .eyebrow { margin-bottom: 8px; }
  .dreamless-title { font-size: 3.2rem; }
  .clock { margin-top: 10px; }
  .dl-body .stats { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .stats dt { font-size: 0.78rem; line-height: 1.3; }
  .stats dd { font-size: 1.55rem; }
  .status { margin-top: 24px; }
  .tier { margin-top: 40px; padding-top: 24px; }
  .tier-head { margin-bottom: 18px; }
  .desk { padding: 16px; }
  .desk-caption { min-height: 4.4em; font-size: 0.96rem; }
  .lane { grid-template-columns: 116px 1fr; gap: 10px; }
  .lane-btn { padding: 6px 9px; }
  .lane-name { font-size: 0.85rem; }
  .lane-what { font-size: 0.7rem; }
  .lane canvas { height: 40px; }
  .hear-list { gap: 10px; }
  .hear-list li { padding-top: 10px; font-size: 0.98rem; }
  .see-grid { gap: 28px; margin-bottom: 28px; }
  .see-lede { font-size: 1.12rem; }
  .see-sub { font-size: 1rem; margin-top: 12px; }
  .mode-switch { margin-top: 20px; }
  .phone-shot { width: min(100%, 300px); }
  .bible > img { aspect-ratio: 1; object-position: 50% 18%; }
  .bible-card { padding: 20px; }
  .bible-card ul { margin-top: 12px; gap: 6px; }
  .bible-card li { padding-top: 6px; }
  .bible-note { padding-top: 14px; }
  .watch-copy { font-size: 1.05rem; }
  .roadmap { margin-top: 0; }
  .rm-stop a { flex-direction: column; align-items: flex-start; gap: 8px; }
  .rm-name { font-size: 1rem; }
  .tier-last { margin-top: 36px; padding: 20px 18px; }
  .mail-row { flex-direction: column; gap: 14px; }
  .mail-thread { display: none; }
  .contact { padding: 72px 0; }
  .contact .proof-grid { margin-bottom: 56px; gap: 28px; }
  .proof-num { font-size: 3rem; }
  .proof-rules ul { margin-top: 16px; gap: 10px; }
  .proof-rules li { font-size: 1rem; padding-top: 10px; }
  .founder { margin-top: 40px; padding-top: 22px; }

  /* Collections become swipeable rows instead of tall stacks. */
  .genre-grid, .devices, .places {
    display: grid; grid-auto-flow: column; grid-template-columns: none; gap: 10px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 18px;
    margin-inline: -18px; padding: 4px 18px 6px; scrollbar-width: none;
  }
  .genre-grid::-webkit-scrollbar, .devices::-webkit-scrollbar, .places::-webkit-scrollbar { display: none; }
  .genre-grid > *, .devices > *, .places > * { scroll-snap-align: start; }
  .genre-grid { grid-auto-columns: 78%; }
  .devices { grid-auto-columns: 64%; }
  .places { grid-auto-columns: 86%; }
  /* The tour changes the caption; keep room for three lines so the cards below do not jump. */
  .pulse-caption { min-height: 4.9em; }
}

/* Simple pages: privacy and not found. */
.page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.page main { flex: 1; padding: calc(var(--nav-h) + 72px) 0 96px; }
.page h1 { font-size: clamp(2.4rem, 6vw, 4rem); max-width: 18ch; }
.page h2 { font-size: 1.35rem; margin-top: 44px; letter-spacing: -0.02em; }
.page p, .page li { color: var(--muted); font-size: 1.1rem; max-width: 62ch; margin-top: 16px; }
.page ul { margin-top: 8px; padding-left: 1.2em; list-style: disc; }
.page li { margin-top: 8px; }
.page a:not(.btn):not(.wordmark):not(.nav-cta) { color: var(--text); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.page .btn { margin-top: 36px; }
.page .nav { background: rgb(8 9 12 / 0.78); border-bottom-color: var(--line); }
.footer a { color: var(--muted); text-underline-offset: 3px; margin-left: 10px; }
.footer a:hover { color: var(--text); }