/* Narrative — the original editorial layout and interactive story explorer.
   Warm paper, ink and copper; dark appearance follows the system preference. */

:root {
  color-scheme: light dark;

  /* sampled: #f4efe6 dominant, #fcf8f1 raised, #eae3d6 rules, #16130e ink.
     Mute/champagne/off nudged only enough for WCAG AA 4.5:1 on paper/raised. */
  --paper: #f4efe6;
  --raised: #fcf8f1;
  --ink: #16130e;
  --ink-soft: #443b2e;
  --ink-dim: #6b6051;
  --ink-mute: #766553;
  --champagne: #7a5e38;
  --accent: #9a3430;
  --off: #a34a44;
  --line: color-mix(in oklab, #16130e 12%, transparent);
  --wash: color-mix(in oklab, var(--accent) 9%, transparent);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --measure: 72rem;
  --gutter: clamp(18px, 4vw, 36px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #100e0c;
    --raised: #1b1713;
    --ink: #f3ebe1;
    --ink-soft: #d4c9bc;
    --ink-dim: #b0a498;
    --ink-mute: #a39a90;
    --champagne: #d4ba92;
    --accent: #d46a66;
    --off: #c66b72;
    --line: color-mix(in oklab, #efe6dc 10%, transparent);
    --wash: color-mix(in oklab, var(--accent) 15%, transparent);
  }
}

/* Self-hosted Latin subsets only (Cormorant Garamond italic 500, Manrope 400/500). */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/cormorant-garamond-italic-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

html {
  margin: 0;
  scroll-behavior: smooth;
  background: var(--paper);
  color: var(--ink);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--ink) 38%, transparent) var(--paper);
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: Manrope, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--ink) 38%, transparent) var(--paper);
}

/* Own the chrome: thin paper/ink bars. Never display:none — scrolling stays. */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.page *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.page *::-webkit-scrollbar-track {
  background: var(--paper);
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.page *::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--ink) 38%, transparent);
  border-radius: 8px;
  border: 2px solid var(--paper);
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.page *::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklab, var(--ink) 55%, transparent);
}
html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
.page *::-webkit-scrollbar-corner {
  background: var(--paper);
}
.page * {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--ink) 38%, transparent) var(--paper);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(900px 480px at 26% -14%, var(--wash), transparent 62%);
}

:focus-visible { outline: 1px solid var(--champagne); outline-offset: 4px; }

.page {
  position: relative;
  z-index: 1;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(36px, 7vh, 72px);
}

/* ---------- top bar ---------- */

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  padding: 16px 0 14px;
  margin: 0 calc(var(--gutter) * -1);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
}

.top.scrolled { border-bottom-color: var(--line); }

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  text-decoration: none;
  color: var(--ink);
}

.brand em {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.55rem, 2.6vw, 2rem);
  letter-spacing: .04em;
  line-height: 1.15;
}

.brand i {
  font-style: normal;
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.top-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}

.top-nav a {
  font: 500 .68rem/1.4 Manrope, system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-mute);
  border-bottom: 1px solid transparent;
  padding: 6px 0;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}

.top-nav a:hover { color: var(--ink); }

.top-nav a.enter {
  color: var(--ink);
  border-bottom-color: color-mix(in oklab, var(--accent) 70%, transparent);
  padding-bottom: 3px;
}

.top-nav a.enter:hover { color: var(--champagne); border-bottom-color: var(--champagne); }

/* ---------- shared type ---------- */

.eyebrow {
  margin: 0 0 12px;
  font: 500 .66rem/1.35 Manrope, system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--champagne);
}

.lede {
  margin: 0;
  font-size: clamp(1rem, .4vw + .95rem, 1.14rem);
  line-height: 1.62;
  color: var(--ink-soft);
  text-wrap: pretty;
  max-width: 42rem;
}

.section-head {
  max-width: 40rem;
  margin-bottom: clamp(22px, 4vh, 36px);
}

.section-head h2 {
  margin: 0 0 12px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2rem, 4.2vw, 2.85rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font: 500 .7rem/1.35 Manrope, system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  transition: color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), opacity .18s var(--ease);
}

.btn.primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.btn.primary:hover { opacity: .86; }

.btn.ghost {
  color: var(--ink);
  border-color: var(--line);
  background: transparent;
}

.btn.ghost:hover {
  border-color: color-mix(in oklab, var(--champagne) 55%, transparent);
  color: var(--champagne);
}

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

.hero {
  padding: clamp(42px, 9vh, 84px) 0 clamp(48px, 8vh, 76px);
  max-width: 46rem;
}

.hero h1 {
  margin: 0 0 18px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.7rem, 7vw, 4.4rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
}

.hero .lede {
  font-size: clamp(1.05rem, .5vw + 1rem, 1.22rem);
  max-width: 38rem;
}

.hero .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  margin: 28px 0 0;
}

.hero .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 22px 0 0;
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--ink-mute);
}

.hero .meta .offer {
  color: var(--ink-dim);
}

/* ---------- proofs ---------- */

.proof {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding: clamp(36px, 6vh, 60px) 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 72px;
}

.proof.flip .proof-copy { order: 2; }
.proof.flip .proof-media { order: 1; }

.proof-copy h2 {
  margin: 0 0 14px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}

.proof-media {
  margin: 0;
  display: flex;
  justify-content: center;
}

.proof-media .phone {
  position: relative;
  width: min(100%, 280px);
  aspect-ratio: 880 / 1912;
  border-radius: 28px;
  overflow: hidden;
  background-color: var(--ink);
  background-image: var(--poster);
  background-size: cover;
  background-position: center;
  border: 1px solid color-mix(in oklab, var(--ink) 18%, transparent);
  box-shadow:
    0 2px 4px rgb(0 0 0 / 0.06),
    0 24px 60px rgb(0 0 0 / 0.18);
}

.proof-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
}

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

.pricing {
  padding: clamp(48px, 9vh, 96px) 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 72px;
}

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.plan {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 20px 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in oklab, var(--raised) 78%, transparent);
}

a.plan {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease), transform .18s var(--ease);
}
a.plan:hover {
  border-color: color-mix(in oklab, var(--champagne) 55%, var(--line));
  background: color-mix(in oklab, var(--raised) 88%, var(--champagne) 12%);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgb(0 0 0 / 0.08);
}
a.plan:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 3px;
}

.plan.featured {
  border-color: color-mix(in oklab, var(--champagne) 48%, var(--line));
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.06);
}

.plan h3 {
  margin: 0;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--champagne);
}

.plan .price {
  margin: 4px 0 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--ink);
}

.plan .price b {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2rem, 3vw, 2.5rem);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}

.plan .price span {
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.plan .trial {
  margin: 0;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.plan .tagline {
  margin: 8px 0 0;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.pricing-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin: 28px 0 0;
}

.pricing-foot .platforms {
  font-size: .78rem;
  color: var(--ink-mute);
  letter-spacing: .02em;
}

/* ---------- artifact explorer ---------- */

.artifact {
  padding: clamp(48px, 9vh, 96px) 0 clamp(24px, 4vh, 40px);
  border-top: 1px solid var(--line);
  scroll-margin-top: 72px;
}

.explorer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: min(78vh, 760px);
  height: min(78vh, 760px);
  padding: clamp(12px, 2vh, 18px);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: color-mix(in oklab, var(--raised) 55%, transparent);
  overflow: hidden;
}

.explorer .mast {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 16px 24px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

.rail { display: flex; flex-wrap: wrap; gap: 6px 18px; }

.rail button {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 5px 0;
  font: 500 .6rem/1 Manrope, system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom: 1px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}

.rail button:hover { color: var(--ink); }

.rail button.on {
  color: var(--champagne);
  border-bottom-color: color-mix(in oklab, var(--champagne) 55%, transparent);
}

.stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper);
  touch-action: pan-y;
}

.scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(18px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  /* Opaque stock so a fading WORLD graph cannot ghost through PLAYING
     (or any other scene) mid-crossfade. Animation stays; stacking hides
     the scene underneath. */
  background: var(--paper);
  z-index: 0;
}

.scene.on { opacity: 1; pointer-events: auto; transform: none; z-index: 2; }
.scene.out-left { transform: translateX(-18px); z-index: 1; }
.scene.out-right { transform: translateX(18px); z-index: 1; }

/* ---------- world ---------- */

#scene-world { display: block; }

#scene-world::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.7;
  background-image:
    radial-gradient(circle at 37% 44%, color-mix(in oklab, var(--ink) 22%, transparent) 0 2.5px, transparent 3px),
    radial-gradient(circle at 62% 28%, color-mix(in oklab, var(--champagne) 28%, transparent) 0 2px, transparent 2.5px),
    radial-gradient(circle at 48% 62%, color-mix(in oklab, var(--ink) 16%, transparent) 0 2px, transparent 2.5px),
    radial-gradient(circle at 28% 33%, color-mix(in oklab, var(--accent) 22%, transparent) 0 2px, transparent 2.5px),
    radial-gradient(circle at 71% 58%, color-mix(in oklab, var(--ink) 14%, transparent) 0 1.8px, transparent 2.2px),
    radial-gradient(circle at 54% 18%, color-mix(in oklab, var(--champagne) 20%, transparent) 0 1.6px, transparent 2px);
  transition: opacity .45s var(--ease);
}
#scene-world.painted::before { opacity: 0; }

#scene-world canvas { display: block; width: 100%; height: 100%; position: relative; }

/* The prose sits over the web, bottom-left, where it does not fight the hubs. */
#scene-world .beat {
  position: absolute;
  left: 0;
  bottom: clamp(26px, 4vh, 44px);
  margin: 0;
  max-width: min(46ch, 62%);
  padding-left: 14px;
  font-family: ui-serif, Charter, "Iowan Old Style", Georgia, serif;
  font-size: clamp(.95rem, 1.9vh, 1.4rem);
  line-height: 1.46;
  /* Five lines, always, whatever this beat needs. The block is anchored to its
     bottom, so a two-line beat followed by a four-line one used to shove the
     writing a line and a half up the screen between passages. Measured across
     all 49 beats at 390, 1280, 1440 and 1728 wide: the longest is five lines at
     every one of them, so five is the reservation and the text sits at its top.
     A sixth would be a wrong answer as surely as four. */
  height: calc(1.46em * 5);
  color: var(--ink);
  text-shadow: 0 1px 12px var(--paper), 0 0 30px var(--paper), 0 0 60px var(--paper);
  pointer-events: none;
  isolation: isolate;
}

/* The graph is free to run anywhere, including under the writing - excluding a
   region would distort the picture rather than compose it. So the page fades
   the web out behind the paragraph instead: a soft wash of the stock's own
   colour, wider than the text and with no edge to it, so an edge crossing
   underneath thins away instead of striking through a word.

   The three-layer text-shadow above was doing this job alone and could not:
   a halo tight enough not to smear the type is too tight to hide a line
   between two words. */
#scene-world .beat::before {
  content: "";
  position: absolute;
  inset: -1.1em -2.6em -1.1em -1.6em;
  background:
    radial-gradient(120% 130% at 24% 50%,
      var(--paper) 0%, var(--paper) 52%,
      color-mix(in srgb, var(--paper) 72%, transparent) 72%,
      transparent 100%);
  z-index: -1;
  pointer-events: none;
}

/* The ghost holds the beat's full text invisibly so the block owns its final
   geometry from the first frame; the live overlay types over it, wrapping on
   exactly the same lines. Without this the bottom-anchored paragraph grew
   upward on every line wrap. */
#scene-world .beat .prose { position: relative; display: block; }
#scene-world .beat .ghost { visibility: hidden; }
#scene-world .beat .live { position: absolute; inset: 0; }

#scene-world .beat.running .live::after {
  content: "";
  display: inline-block;
  width: .055em;
  height: .9em;
  margin-left: .06em;
  vertical-align: -.08em;
  background: var(--champagne);
  animation: caret 1s steps(2, jump-none) infinite;
}

@keyframes caret { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  #scene-world .beat.running .live::after { animation: none; opacity: 1; }
}

.tally {
  position: absolute;
  left: 14px;
  bottom: 10px;
  margin: 0;
  font-size: .56rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  pointer-events: none;
}

/* Reserved digit space: 9 -> 10 must not nudge the words beside it. */
.tally b {
  font-weight: 500;
  color: var(--champagne);
  font-variant-numeric: tabular-nums;
  display: inline-block;
  min-width: 2ch;
}

/* ---------- writing ---------- */

#scene-writing { display: grid; place-items: center; }

#scene-writing .page {
  margin: 0;
  max-width: 30ch;
  font-family: ui-serif, Charter, "Iowan Old Style", Georgia, serif;
  font-size: clamp(1.3rem, 4.2vh, 2.6rem);
  line-height: 1.44;
  color: var(--ink);
  text-wrap: pretty;
}

/* ---------- asking ---------- */

#scene-asking { display: grid; place-items: center; padding: 18px; }

.ask {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(18px, 4vw, 56px);
  align-items: start;
  width: 100%;
}

.ask .asked {
  margin: 0;
  font-family: ui-serif, Charter, "Iowan Old Style", Georgia, serif;
  font-size: clamp(1.05rem, 2.6vh, 1.6rem);
  line-height: 1.38;
  color: var(--ink);
  text-wrap: balance;
}

.ask .steps { list-style: none; margin: 18px 0 0; padding: 0; }

.ask .steps li {
  position: relative;
  padding: 3px 0 3px 15px;
  font-size: clamp(.62rem, 1.4vh, .72rem);
  letter-spacing: .04em;
  color: var(--ink-mute);
}

.ask .steps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--champagne) 55%, transparent);
}

.ask .steps li:last-child::before { background: var(--champagne); }

.ask .answered {
  margin: 0;
  font-family: ui-serif, Charter, "Iowan Old Style", Georgia, serif;
  font-size: clamp(.9rem, 2vh, 1.2rem);
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* ---------- app ---------- */

#scene-app { display: grid; place-items: center; }

/* ---------- foot ---------- */

.foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 28px;
  flex-wrap: wrap;
  margin-top: clamp(28px, 5vh, 48px);
  padding-top: clamp(14px, 2.2vh, 22px);
  border-top: 1px solid var(--line);
}

.download-note {
  flex-basis: 100%;
  order: 2;
  margin: 4px 0 0;
  font-size: .72rem;
  line-height: 1.5;
  color: var(--ink-mute);
}

.get { display: flex; gap: 10px 26px; flex-wrap: wrap; align-items: baseline; }

.get a, .get span.off {
  font: 500 .6rem/1.5 Manrope, system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}

.get a:hover { color: var(--champagne); border-bottom-color: color-mix(in oklab, var(--champagne) 55%, transparent); }
.get span.off { color: var(--ink-mute); }

.get .state {
  display: block;
  margin-top: 3px;
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: none;
  color: var(--ink-mute);
}

.foot .where {
  font-size: .56rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.foot .enter {
  margin-left: auto;
  margin-right: 18px;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  transition: color 200ms ease, border-color 200ms ease;
}

.foot .enter:hover {
  color: var(--champagne);
  border-bottom-color: var(--champagne);
}

/* ---------- narrow ---------- */

@media (max-width: 900px) {
  .proof,
  .proof.flip {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .proof.flip .proof-copy,
  .proof.flip .proof-media { order: initial; }
  .proof-media .phone { width: min(100%, 240px); }
  .plans { grid-template-columns: 1fr; }
  .explorer {
    min-height: min(72vh, 640px);
    height: min(72vh, 640px);
  }
}

@media (max-width: 760px) {
  .ask { grid-template-columns: 1fr; gap: 16px; }
  .ask .answered { font-size: clamp(.86rem, 1.9vh, 1.05rem); }
  #scene-world .beat { max-width: 92%; font-size: clamp(.85rem, 1.7vh, 1.1rem); }
  .top-nav a:not(.enter) { display: none; }
  .hero { padding-top: clamp(28px, 7vh, 48px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scene { transition: none; }
  #scene-world .beat.running .prose::after { display: none; }
  .proof-media video { /* still frames via poster when JS pauses */ }
}

/* A name that has just been written, in the sentence and on the web at the
   same moment. This pairing is the only explanation the page offers, so it has
   to be unmistakable without being loud. */
#scene-world .beat mark {
  background: none;
  color: var(--accent);
  font-style: italic;
}

/* ---------- the app ----------
   One clip, as large as the screen allows, with the six names under it. A
   phone rendered 200px wide proves a surface exists without letting anyone
   read it, which is the opposite of what this scene is for. */
#scene-app .reel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.4vh, 26px);
  height: 100%;
}
#scene-app .phone {
  position: relative;
  height: min(58vh, 560px);
  aspect-ratio: 880 / 1912;
  flex: none;
  border-radius: clamp(18px, 2.2vh, 26px);
  overflow: hidden;
  background-color: var(--ink);
  background-image: var(--poster);
  background-size: cover;
  background-position: center;
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.06), 0 18px 44px rgb(0 0 0 / 0.14);
}
#scene-app .phone video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 420ms ease;
}
#scene-app .phone video.on { opacity: 1; }
#scene-app .picks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: clamp(18px, 3vw, 44px);
  align-items: baseline;
}
#scene-app .says {
  position: relative;
  z-index: 2;
}
/* Reel names (Arriving / Asking / Ledger / Fixing / Versions / Searching)
   switch clips. Clicks are live only while this scene is on; the inactive
   scene's pointer-events:none is what parks them, so they do not look
   clickable while they cannot be used. */
#scene-app.on .says,
#scene-app.on .picks,
#scene-app.on .picks button {
  pointer-events: auto;
  cursor: pointer;
}
#scene-app .picks button {
  appearance: none;
  border: 0;
  background: none;
  padding: 4px 0;
  cursor: pointer;
  font: inherit;
  font-size: clamp(0.68rem, 1.4vw, 0.8rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  position: relative;
  transition: color 240ms ease;
}
#scene-app .picks button:hover { color: var(--ink-dim); }
#scene-app .picks button.on { color: var(--ink); }
/* The bar grows under the name that is playing, so the row keeps time. */
#scene-app .picks button::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  height: 1px;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms ease;
}
#scene-app .picks button.on::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  #scene-app .phone video { transition: none; }
  #scene-app .picks button::after { transition: none; }
}
@media (max-width: 720px) {
  #scene-app .phone { height: min(52vh, 430px); }
  #scene-app .picks { flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
}

/* ---------- writing ----------
   Two versions the writer produced for one turn. The scene exists to show
   that the prose is chosen, so the words that differ are the only thing
   emphasised; everything they agree on stays quiet. */
#scene-writing .pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 88px);
  align-items: start;
  align-content: center;
  height: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 56px);
}
#scene-writing .take {
  margin: 0;
  font-size: clamp(0.98rem, 1.55vw, 1.22rem);
  line-height: 1.62;
  color: var(--ink);
  position: relative;
  padding-top: 20px;
}
/* A hairline over each column, the accent only on the one the reader kept. */
#scene-writing .take::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 1px;
  background: var(--off);
}
#scene-writing .take[data-take="0"]::before { background: var(--accent); width: 54px; }
#scene-writing .take mark {
  background: none;
  color: var(--accent);
  font-style: italic;
}
#scene-writing .take[data-take="1"] { color: var(--ink-mute); }
#scene-writing .take[data-take="1"] mark { color: var(--champ, var(--accent)); opacity: 0.92; }
@media (max-width: 860px) {
  #scene-writing .pair { grid-template-columns: 1fr; gap: 22px; overflow: hidden; }
  #scene-writing .take[data-take="1"] { display: none; }
}

/* ---------- asking ----------
   The steps tick as the helper takes them, then the answer arrives. A
   finished exchange sitting still hides that the steps are real work. */
#scene-asking .steps li {
  color: var(--ink-mute);
  transition: color 340ms ease;
}
#scene-asking .steps li.at { color: var(--accent); }
#scene-asking .steps li.done { color: var(--ink-dim); }
#scene-asking .answered {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 620ms ease, transform 620ms ease;
}
#scene-asking .answered.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  #scene-asking .steps li,
  #scene-asking .answered { transition: none; }
}

/* ==========================================================================
   ChatOnSite — playing scene (#scene-chat)
   ========================================================================== */

#scene-chat {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 12px;
}

#scene-chat .talk {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  max-width: 44rem;
  height: 100%;
  max-height: min(740px, 80vh);
  margin: 0 auto;
  gap: clamp(12px, 2.2vh, 22px);
}

#scene-chat .log {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(14px, 2.4vh, 24px);
  overflow: hidden;
}

#scene-chat .turn {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.2vh, 10px);
}

/* Move as a ruled aside, matching PlayerMove.swift */
#scene-chat .move {
  position: relative;
  padding-left: clamp(10px, 1.6vw, 14px);
  border-left: 2px solid var(--champagne);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#scene-chat .move[data-mode="speak"] { border-left-color: var(--off); }
#scene-chat .move[data-mode="act"] { border-left-color: var(--champagne); }
#scene-chat .move[data-mode="narrate"] { border-left-color: color-mix(in oklab, var(--champagne) 45%, var(--accent)); }
#scene-chat .move[data-mode="continue"] { border-left-color: var(--line); }

#scene-chat .move b {
  font: 500 .58rem/1 Manrope, system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

#scene-chat .move[data-mode="speak"] b { color: var(--off); }
#scene-chat .move[data-mode="act"] b { color: var(--champagne); }

#scene-chat .move p {
  margin: 0;
  font-size: clamp(.8rem, 1.5vh, .92rem);
  line-height: 1.4;
  color: var(--ink-soft);
}

#scene-chat .said {
  margin: 0;
  font-family: ui-serif, Charter, "Iowan Old Style", Georgia, serif;
  font-size: clamp(.92rem, 1.85vw, 1.14rem);
  line-height: 1.58;
  color: var(--ink);
  text-wrap: pretty;
}

#scene-chat .said em {
  font-style: italic;
}

/* Composer replica: non-interactive visual representation */
#scene-chat .compose {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(10px, 1.6vh, 14px) clamp(12px, 2vw, 18px);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 14px;
}

#scene-chat .modes {
  display: flex;
  gap: 8px;
  margin: 0;
}

#scene-chat .modes span {
  font: 500 .58rem/1 Manrope, system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 8px;
  background: color-mix(in oklab, var(--paper) 70%, transparent);
  color: var(--ink-mute);
  border: 1px solid transparent;
}

#scene-chat .modes span.on {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.04);
}

#scene-chat .hint {
  margin: 0;
  font-size: .62rem;
  letter-spacing: .04em;
  color: var(--ink-mute);
}

#scene-chat .field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 8px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
}

#scene-chat .field span {
  font-size: clamp(.78rem, 1.4vh, .86rem);
  color: var(--ink-mute);
}

#scene-chat .field b {
  font: 500 .62rem/1 Manrope, system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 14px;
  background: var(--wash);
  color: var(--champagne);
  border-radius: 6px;
  border: 1px solid color-mix(in oklab, var(--champagne) 35%, transparent);
}

/* Turn-arrival animation: transform & opacity ONLY */
#scene-chat .turn {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}

#scene-chat.on .turn {
  opacity: 1;
  transform: none;
}

#scene-chat.on .turn:nth-child(2) {
  transition-delay: 120ms;
}

@media (prefers-reduced-motion: reduce) {
  #scene-chat .turn {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 640px) {
  #scene-chat .talk { max-height: 100%; }
  #scene-chat .modes span { padding: 5px 8px; font-size: .52rem; }
  #scene-chat .hint { display: none; }
}

/* ==========================================================================
   the documents — /terms and /privacy

   The marketing page scrolls. A legal document is the other thing on this
   site that has to, so body.doc keeps the stock, the wash, the wordmark and
   the footer, and sets a reading measure.

   The measure is set in ch rather than px because it is a reading decision,
   not a layout one: 68ch is around eleven words a line at this size, which is
   where the eye stops losing its place on the return sweep. Everything else
   here is the vertical rhythm — a clause is a heading and two or three
   paragraphs, and the space above a heading has to be visibly larger than the
   space between its paragraphs or the document reads as one undifferentiated
   column.
   ========================================================================== */

body.doc .sheet {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(18px, 3vh, 34px) clamp(16px, 3vw, 30px) clamp(40px, 8vh, 90px);
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 4vh, 44px);
}

/* The wash is fixed to the viewport, so on a long document it would sit over
   the same band of text the whole way down. Anchored to the sheet instead, it
   behaves like a wash on paper: at the top, where the title is, and gone. */
body.doc::before { display: none; }

body.doc .sheet::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 620px;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(900px 480px at 26% -14%, var(--wash), transparent 62%);
}

body.doc .mast { border-bottom: 1px solid var(--line); padding-bottom: 14px; }

body.doc a.brand {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 3.4vh, 2rem);
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
}

body.doc a.brand em { font-style: italic; }
body.doc a.brand:hover { color: var(--champagne); }

.leaf {
  max-width: 68ch;
  font-size: clamp(.98rem, .35vw + .9rem, 1.08rem);
  line-height: 1.68;
  color: var(--ink-soft);
}

.leaf h1 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.2rem, 6vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--ink);
}

.leaf .dateline {
  margin: 14px 0 0;
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* The one paragraph before the clauses begin, set a step up so the document
   opens with a voice rather than with a subheading. */
.leaf .lede {
  margin: 26px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 1.12em;
  line-height: 1.6;
  color: var(--ink);
  max-width: none;
}

.leaf h2 {
  margin: 42px 0 0;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--champagne);
}

.leaf p { margin: 14px 0 0; }

.leaf a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--champagne) 55%, transparent);
  transition: color .16s var(--ease), border-color .16s var(--ease);
}

.leaf a:hover { color: var(--champagne); border-bottom-color: var(--champagne); }

/* Keep legal pricing aligned with the reading measure. */
.rates {
  margin: 20px 0 0;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.rates th, .rates td {
  padding: 9px 28px 9px 0;
  text-align: left;
  font-weight: 400;
  border-bottom: 1px solid var(--line);
}

.rates thead th {
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom-color: var(--ink-mute);
}

.rates tbody th { color: var(--ink); font-weight: 500; }
.rates tbody tr:last-child th, .rates tbody tr:last-child td { border-bottom: none; }

body.doc .foot { margin-top: auto; }

/* ---------- the fine print, on every page ---------- */

.fine {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
}

.fine a {
  font-size: .56rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-mute);
  border-bottom: 1px solid transparent;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}

.fine a:hover {
  color: var(--champagne);
  border-bottom-color: color-mix(in oklab, var(--champagne) 55%, transparent);
}

@media (max-width: 640px) {
  .leaf { max-width: none; }
  .rates th, .rates td { padding-right: 16px; }
}