/* ============================================================
   Presenter Companion — "The Booth"
   One fixed design, two deliberate grounds:
   velvet (the live call) and paper (the record).
   ============================================================ */

:root {
  /* grounds & ink */
  --velvet: #141519;
  --booth:  #1d2026;
  --paper:  #ebedef;
  --ink:    #17181c;
  --bone:   #efede8;
  --muted-v: #9aa0a9;   /* secondary on velvet */
  --muted-p: #565b63;   /* secondary on paper  */
  --line-v: rgba(255,255,255,.09);
  --line-p: rgba(23,24,28,.16);

  /* accents */
  --cue:      #ffb03a;  /* cue-light amber */
  --cue-deep: #8a5a0f;  /* amber for text on paper (AA) */
  --onair:    #e5484d;  /* semantic: consent/recording only */

  /* type */
  --font-display: "League Gothic", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  --font-body: "Public Sans", "Public Fallback", -apple-system, system-ui, sans-serif;
  --font-mono: "Fragment Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* fluid type scale (375 → 1440) */
  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.22vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.11rem + 0.40vw, 1.45rem);
  --step-2:  clamp(1.60rem, 1.42rem + 0.75vw, 2.10rem);
  --step-3:  clamp(2.30rem, 1.95rem + 1.50vw, 3.30rem);
  --hero:    clamp(3.60rem, 2.20rem + 6.80vw, 7.20rem);

  /* fluid space scale */
  --sp-2xs: clamp(0.50rem, 0.46rem + 0.18vw, 0.63rem);
  --sp-xs:  clamp(0.75rem, 0.69rem + 0.26vw, 0.94rem);
  --sp-s:   clamp(1.00rem, 0.92rem + 0.35vw, 1.25rem);
  --sp-m:   clamp(1.50rem, 1.38rem + 0.53vw, 1.88rem);
  --sp-l:   clamp(2.00rem, 1.83rem + 0.70vw, 2.50rem);
  --sp-xl:  clamp(3.00rem, 2.75rem + 1.06vw, 3.75rem);
  --sp-2xl: clamp(4.50rem, 4.00rem + 2.00vw, 6.00rem);
  --sp-3xl: clamp(6.00rem, 5.20rem + 3.20vw, 8.50rem);

  /* motion */
  --ease-out:   cubic-bezier(0.19, 1, 0.22, 1);
  --ease-swift: cubic-bezier(0.32, 0.72, 0, 1);

  /* depth */
  --shadow-rest:
    0 1px 1px rgba(0,0,0,.25),
    0 2px 4px rgba(0,0,0,.18),
    0 10px 24px -6px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.06);
  --shadow-hover:
    0 2px 3px rgba(0,0,0,.26),
    0 12px 26px -6px rgba(0,0,0,.32),
    0 34px 68px -18px rgba(0,0,0,.45);
}

/* self-hosted fonts (latin subsets, ~52KB total) — no third-party requests,
   consistent with the "no analytics on this site" claim */
@font-face {
  font-family: "League Gothic";
  src: url("/fonts/league-gothic.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/fonts/public-sans.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fragment Mono";
  src: url("/fonts/fragment-mono.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
/* metric-matched fallback to soften webfont swap */
@font-face {
  font-family: "Public Fallback";
  src: local("Arial"), local("Helvetica Neue");
  size-adjust: 101.5%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%;
}

/* ---------- reset / base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0; background: var(--velvet); color: var(--bone);
  font-family: var(--font-body); font-size: var(--step-0); line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* film grain — one fixed layer, no blend mode (perf) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .045;
  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");
  background-size: 160px 160px;
}
img, svg { max-width: 100%; }
a { color: inherit; }
::selection { background: var(--cue); color: var(--velvet); }
:focus-visible { outline: 2px solid var(--cue); outline-offset: 3px; border-radius: 3px; }

.wrap { max-width: 75rem; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
.narrow { max-width: 46rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap; }

/* ---------- typography ---------- */
h1, h2 {
  font-family: var(--font-display); text-transform: uppercase; font-weight: 400;
  line-height: 0.92; letter-spacing: 0.005em; margin: 0; text-wrap: balance;
}
h1 { font-size: var(--hero); }
h1 em { font-style: normal; color: var(--cue); }
h2 { font-size: var(--step-3); margin-bottom: var(--sp-s); }
h3 { font-size: var(--step-1); font-weight: 700; margin: 0 0 .35rem; letter-spacing: -0.01em; }
p { margin: 0 0 var(--sp-s); max-width: 62ch; }
.sub { color: var(--muted-v); max-width: 52ch; }

/* mono cue slugs over a hairline */
.slug {
  font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase;
  letter-spacing: .14em; color: var(--cue);
  padding-top: var(--sp-s); border-top: 1px solid var(--line-v);
  margin: 0 0 var(--sp-m); max-width: none;
}
.slug.deep { color: var(--cue); border-top-color: var(--line-v); }
.cue {
  font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase;
  letter-spacing: .12em; color: var(--cue); margin: 0 0 var(--sp-2xs);
}
.cue.deep { color: var(--cue-deep); }

/* ---------- header ---------- */
header.site {
  position: sticky; top: 0; z-index: 100;
  background: transparent; transition: background .3s, box-shadow .3s;
}
header.site.scrolled {
  background: rgba(20,21,25,.94);
  box-shadow: 0 1px 0 var(--line-v);
}
header.site .bar { display: flex; align-items: center; justify-content: space-between;
  min-height: 4.25rem; gap: 1rem; }
.brand { font-family: var(--font-mono); font-size: .95rem; letter-spacing: .04em;
  text-decoration: none; color: var(--bone); display: inline-flex; align-items: center; gap: .55em; }
.brand::before { content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--cue); box-shadow: 0 0 10px rgba(255,176,58,.7); flex: none; }
header.site nav { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.6rem); }
header.site nav a { color: var(--muted-v); text-decoration: none; font-size: var(--step--1);
  font-weight: 500; transition: color .2s; }
header.site nav a:hover { color: var(--bone); }
header.site nav a.active { color: var(--cue); }
header.site nav a.btn, header.site nav a.btn:hover { color: var(--velvet); }
@media (max-width: 46rem) { header.site nav a[data-spy] { display: none; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .1rem; background: var(--cue); color: #141519; text-decoration: none;
  font-weight: 700; font-size: var(--step-0); text-align: center;
  padding: .85rem 1.6rem; border-radius: 10px; border: 0; cursor: pointer;
  position: relative; transition: translate .3s var(--ease-out);
}
.btn small { font-weight: 500; font-size: .72rem; opacity: .75; letter-spacing: .01em; }
.btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  box-shadow: 0 4px 14px -2px rgba(255,176,58,.45), 0 14px 34px -8px rgba(255,176,58,.30);
  opacity: 0; transition: opacity .3s; }
.btn:hover { translate: 0 -2px; }
.btn:hover::after { opacity: 1; }
.btn.small { flex-direction: row; padding: .5rem 1.1rem; font-size: var(--step--1); border-radius: 8px; }
.btn.big { padding: 1.05rem 2.2rem; font-size: var(--step-1); }
.btn.ghost { background: transparent; color: inherit; border: 1px solid var(--line-p); font-weight: 600; }
.velvet .btn.ghost, .final .btn.ghost { border-color: var(--line-v); }
.plan .btn.ghost { border-color: rgba(23,24,28,.25); color: var(--ink); } /* ghost on a white card */
.btn.ghost:hover { border-color: var(--cue); translate: 0 -2px; }
.plan .btn.ghost:hover { border-color: var(--cue-deep); }
.btn.ghost::after { display: none; }
.quiet-link { color: var(--muted-v); font-weight: 600; text-decoration: none;
  font-size: var(--step-0); align-self: center; transition: color .2s; }
.quiet-link:hover { color: var(--cue); }

/* ---------- hero ---------- */
.hero {
  padding: var(--sp-xl) 0 var(--sp-2xl);
  background:
    radial-gradient(56rem 38rem at 72% -14%, rgba(255,176,58,.13), transparent 62%),
    radial-gradient(40rem 30rem at 8% -6%,  rgba(120,140,180,.07), transparent 55%),
    radial-gradient(90rem 60rem at 50% 120%, rgba(255,176,58,.05), transparent 60%),
    var(--velvet);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (max-width: 60rem) { .hero-grid { grid-template-columns: 1fr; } }
/* wide screens: the stage slides under the headline — two layers, one screen */
@media (min-width: 74rem) {
  .hero-copy { position: relative; z-index: 1; }
  .hero-stage { margin-left: -3.5rem; }
}

.hero .lede { font-size: var(--step-1); color: var(--muted-v); max-width: 38ch;
  margin: var(--sp-m) 0 var(--sp-l); text-wrap: pretty; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-s); margin-bottom: var(--sp-l); }
.cta-row.center { justify-content: center; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; padding: 0;
  margin: 0 0 var(--sp-2xs); }
.chips li a { color: var(--muted-v); font-size: var(--step--1); font-weight: 600;
  text-decoration: none; border-bottom: 1px dotted var(--line-v); padding-bottom: 1px;
  transition: color .2s, border-color .2s; }
.chips li a:hover { color: var(--cue); border-color: var(--cue); }
.chips sup { color: var(--cue); }
.chip-foot { font-size: .78rem; color: var(--muted-v); opacity: .8; max-width: 46ch; }
.chip-foot a { color: inherit; }
.chip-foot sup { color: var(--cue); }

/* hero entrance (load-based, once) */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-copy > * { opacity: 0; translate: 0 14px;
    animation: rise .8s var(--ease-out) forwards; }
  .js .hero-copy > *:nth-child(2) { animation-delay: .07s; }
  .js .hero-copy > *:nth-child(3) { animation-delay: .14s; }
  .js .hero-copy > *:nth-child(4) { animation-delay: .21s; }
  .js .hero-copy > *:nth-child(5) { animation-delay: .28s; }
  .js .hero-copy > *:nth-child(6) { animation-delay: .35s; }
  .js .hero-stage { opacity: 0; animation: fade .9s .3s var(--ease-out) forwards; }
}
@keyframes rise { to { opacity: 1; translate: 0 0; } }
@keyframes fade { to { opacity: 1; } }

/* ---------- segmented control ---------- */
.seg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr;
  margin-bottom: var(--sp-s); padding: 4px; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line-v); }
.seg-btn { position: relative; z-index: 1; appearance: none; background: none; border: 0;
  font: 600 var(--step--1)/1 var(--font-body); color: var(--muted-v);
  padding: .62em 1.4em; border-radius: 999px; cursor: pointer; transition: color .3s;
  white-space: nowrap; }
.seg-btn[aria-selected="true"] { color: var(--velvet); }
.seg-thumb { position: absolute; inset: 4px auto 4px 4px; width: calc(50% - 4px);
  border-radius: 999px; background: var(--cue);
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  transition: translate .45s var(--ease-swift); }
.seg[data-active="you"] .seg-thumb { translate: 100% 0; }
@media (max-width: 40rem) { .seg { width: 100%; } }

/* ---------- the stage ---------- */
.hero-stage { min-width: 0; }
.stage { position: relative; aspect-ratio: 16 / 10.5; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line-v); background: #0e1012;
  box-shadow: var(--shadow-rest), 0 40px 90px -30px rgba(0,0,0,.6);
  contain: layout paint; container-type: inline-size; }
@media (max-width: 40rem) { .stage { aspect-ratio: 4 / 5; } }

.view { position: absolute; inset: 0; padding: var(--sp-s);
  display: grid; grid-template-rows: 1fr auto auto; gap: var(--sp-2xs);
  background: #0e1012; /* opaque: the top layer must fully occlude the bottom */ }

/* presenter layer wipes in; audience layer recedes */
.view-you { clip-path: inset(0 100% 0 0); transition: clip-path .8s var(--ease-swift); }
.stage[data-view="you"] .view-you { clip-path: inset(0 0 0 0); }
.view-them { transition: filter .8s var(--ease-swift), scale .8s var(--ease-swift); }
.stage[data-view="you"] .view-them { filter: brightness(.65) saturate(.85); scale: .985; }

/* the traveling amber seam */
.wipe-edge { position: absolute; inset: 0 auto 0 0; width: 2px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--cue) 30% 70%, transparent);
  box-shadow: 0 0 26px 5px rgba(255,176,58,.5);
  translate: -4px 0; opacity: 0;
  transition: translate .8s var(--ease-swift), opacity .2s .7s; }
.stage[data-view="you"] .wipe-edge { translate: 100cqw 0; }
.stage.is-wiping .wipe-edge { opacity: 1;
  transition: translate .8s var(--ease-swift), opacity .1s; }

/* mock call */
.deck { display: grid; grid-template-rows: 1fr auto; gap: var(--sp-2xs); min-height: 0; }
/* the shared slide is LIGHT, like a real deck — the private layer is dark glass.
   the product's whole contrast story, told inside one frame */
.deck-slide { background: #eceef0; border: 1px solid rgba(0,0,0,.08); border-radius: 10px;
  padding: var(--sp-m); display: grid; align-content: start; gap: .7rem; min-height: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.deck-kicker { font: 500 .68rem/1 var(--font-mono); color: var(--cue-deep); letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: .1rem; }
.deck-title { margin: 0 0 .2rem; font-weight: 700; font-size: 1.05rem; color: var(--ink);
  letter-spacing: -.01em; }
.deck-line { height: .7em; border-radius: 4px; background: rgba(23,24,28,.14); }
.w80 { width: 80%; } .w62 { width: 62%; } .w71 { width: 71%; }
.deck-chart { display: flex; align-items: flex-end; gap: 6%; height: 4.2rem; margin-top: .4rem; }
.deck-chart i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0;
  background: linear-gradient(to top, #e09a24, #ffb03a); }
.deck-strip { display: flex; gap: .5rem; }
.tile { flex: 1; aspect-ratio: 16/10; max-width: 5.5rem; border-radius: 7px;
  background: linear-gradient(145deg, #23262d, #191b20); border: 1px solid rgba(255,255,255,.05);
  display: grid; place-items: center; font: 600 .6rem/1 var(--font-mono); color: var(--muted-v); }
.tile.is-you { outline: 1.5px solid var(--cue); outline-offset: -1.5px; }
.deck.is-dimmed { opacity: .5; }
.view-tag { margin: 0; font: 500 .72rem/1.4 var(--font-mono); color: #8d949e;
  letter-spacing: .02em; }

/* caption bar (audience view) */
.ccbar { display: flex; align-items: center; gap: .6rem; min-height: 2.2rem;
  background: rgba(0,0,0,.55); border-radius: 8px; padding: .45rem .8rem;
  font-size: .8rem; color: #d8dce1; }
.wave { display: inline-flex; align-items: center; gap: 3px; }
.wave i { width: 3px; border-radius: 2px; background: var(--cue); height: 6px;
  animation: wavebob .9s ease-in-out infinite; }
.wave i:nth-child(2) { animation-delay: .15s; height: 12px; }
.wave i:nth-child(3) { animation-delay: .3s; height: 8px; }
@keyframes wavebob { 50% { scale: 1 .4; } }

.caret { display: inline-block; width: 1px; height: 1em; background: var(--cue);
  vertical-align: -.15em; margin-left: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* share pill (presenter view) */
.share-pill { position: absolute; top: var(--sp-s); left: var(--sp-s);
  display: inline-flex; align-items: center; gap: .45rem;
  font: 500 .68rem/1 var(--font-mono); color: #b7bec7;
  background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px; padding: .4rem .75rem; }
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: #3fb950; }

/* ---------- companion overlay ---------- */
.companion { position: absolute; right: var(--sp-s); top: var(--sp-s); width: min(23rem, 64%);
  border-radius: 14px; overflow: hidden;
  background: rgba(24,26,31,.8);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 1px rgba(0,0,0,.3), 0 14px 36px -8px rgba(0,0,0,.55),
              inset 0 1px 0 rgba(255,255,255,.09), 0 0 0 1px rgba(255,255,255,.07);
  transform: perspective(1200px) rotateX(1.5deg); }
.companion-bar { display: flex; align-items: center; gap: .5em; padding: .55rem .9rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  font: 500 .66rem/1 var(--font-mono); letter-spacing: .05em; color: var(--muted-v);
  text-transform: uppercase; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--onair);
  box-shadow: 0 0 8px var(--onair); animation: pulse 2.4s ease-in-out infinite; flex: none; }
.live-dot.still { animation: none; background: var(--cue); box-shadow: 0 0 8px var(--cue); }
@keyframes pulse { 50% { opacity: .3; } }

.q { margin: 0; padding: .85rem .95rem 0; font-style: italic; color: #b9bfc7;
  font-size: .85rem; line-height: 1.5; min-height: 3.4em; }
.q-label { font: 600 .6rem/1 var(--font-mono); font-style: normal; color: var(--cue);
  text-transform: uppercase; letter-spacing: .15em; margin-right: .55em; }
.thinking { margin: 0; padding: .45rem .95rem 0; display: flex; gap: 5px; }
.thinking[hidden], .wave[hidden], .caret[hidden] { display: none; } /* display rules must not defeat [hidden] */
.thinking span { width: 5px; height: 5px; border-radius: 50%; background: var(--cue);
  animation: bob 1s ease-in-out infinite; }
.thinking span:nth-child(2) { animation-delay: .15s; }
.thinking span:nth-child(3) { animation-delay: .3s; }
@keyframes bob { 40% { translate: 0 -4px; opacity: .5; } }

.answer { margin: .7rem .95rem .95rem; padding: .75rem .9rem;
  background: rgba(255,176,58,.09); border-left: 2px solid var(--cue);
  border-radius: 0 10px 10px 0;
  opacity: 0; translate: 0 10px;
  transition: opacity .6s var(--ease-out), translate .6s var(--ease-out); }
.answer.is-in { opacity: 1; translate: 0 0; }
.a-text { margin: 0; font-size: .85rem; line-height: 1.55; color: var(--bone); }
.a-text strong { color: var(--cue); }
.chip { margin: .65rem 0 0; display: inline-block; font: 500 .64rem/1 var(--font-mono);
  color: var(--cue); background: rgba(255,176,58,.08); border: 1px solid rgba(255,176,58,.35);
  border-radius: 999px; padding: .38em .85em;
  opacity: 0; translate: 0 6px; transition: opacity .5s var(--ease-out), translate .5s var(--ease-out); }
.chip.is-in { opacity: 1; translate: 0 0; }

/* mobile: dock the companion across the lower third */
@media (max-width: 40rem) {
  .companion { inset: auto .6rem 3.4rem .6rem; width: auto; transform: none; }
  .share-pill { display: none; }
}

/* stage footer row */
.stage-foot { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: var(--sp-2xs); }
.stage-note { margin: 0; font: 500 .72rem/1.4 var(--font-mono); color: var(--muted-v);
  letter-spacing: .04em; text-transform: uppercase; }
.replay { appearance: none; background: none; border: 1px solid var(--line-v);
  color: var(--muted-v); font: 600 .75rem/1 var(--font-body); border-radius: 999px;
  padding: .45em 1em; cursor: pointer; transition: color .2s, border-color .2s; }
.replay:hover { color: var(--cue); border-color: var(--cue); }

/* ---------- editorial band ---------- */
.band { border-block: 1px solid var(--line-v); padding: var(--sp-l) 0;
  background: var(--booth); overflow: hidden; }
.band p { margin: 0; font-family: var(--font-display); text-transform: uppercase;
  font-size: var(--step-3); line-height: 1.05; display: flex; flex-wrap: wrap;
  gap: .3em 1.2em; justify-content: space-between; align-items: baseline; max-width: none; }
.band span { color: var(--muted-v); }
.band em { font-style: normal; color: var(--cue); }

/* ---------- generic sections ---------- */
section { padding: var(--sp-2xl) 0; }
section.velvet { background: var(--velvet); }
section.centered { text-align: center; }
section.centered .sub, section.centered p { margin-inline: auto; }
section.centered .slug { border-top: 0; padding-top: 0; }

/* one ground, all velvet — "the record" lives on as paper ARTIFACTS on the stage */
#trust { border-top: 1px solid var(--line-v); padding-top: var(--sp-2xl); }
/* (no content-visibility here: it breaks anchor-jump positioning) */

/* ---------- how it works ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--sp-l); margin-top: var(--sp-l); }
.step { border-top: 1px solid var(--line-v); padding-top: var(--sp-s); position: relative; }
.step::before { content: attr(data-n); position: absolute; top: -.12em; right: 0;
  font-family: var(--font-display); font-size: clamp(4.5rem, 7vw, 7rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(255,176,58,.16);
  pointer-events: none; user-select: none; }
.step p:last-child { color: var(--muted-v); font-size: var(--step--1); margin: 0; }
.step b { color: var(--bone); }
/* cue cards fan diagonally on wide screens */
@media (min-width: 56rem) {
  .step:nth-child(2) { margin-top: var(--sp-l); }
  .step:nth-child(3) { margin-top: var(--sp-2xl); }
}

/* ---------- grounded / anatomy ---------- */
.anatomy { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-l); align-items: center; margin: var(--sp-l) 0 var(--sp-xl); }
@media (max-width: 56rem) { .anatomy { grid-template-columns: 1fr; } }
.companion.static { position: relative; inset: auto; width: 100%; max-width: 30rem;
  transform: perspective(1200px) rotateX(1.5deg) rotateY(-1deg); }
.callouts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-m); }
.callouts li { border-left: 1px solid var(--line-v); padding-left: var(--sp-s); }
.callouts p:last-child { margin: 0; color: var(--muted-v); font-size: var(--step--1); }

.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--sp-m); border-top: 1px solid var(--line-v); padding-top: var(--sp-l); }
.strip-item h3 { font-size: var(--step-0); }
.strip-item p { color: var(--muted-v); font-size: var(--step--1); margin: 0; }

/* ---------- consent moment ---------- */
#consent {
  background:
    radial-gradient(46rem 34rem at 50% 30%, rgba(255,176,58,.10), transparent 65%),
    var(--velvet);
  padding-block: var(--sp-2xl);
}
.lamp { display: inline-flex; align-items: center; gap: .5rem; margin: 0 auto var(--sp-s);
  font: 600 .7rem/1 var(--font-mono); letter-spacing: .2em; color: var(--onair); }
.lamp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--onair);
  box-shadow: 0 0 12px var(--onair); animation: pulse 4s ease-in-out infinite; }
/* real app screenshots, framed as artifacts on the stage */
.appshot { margin: var(--sp-l) auto 0; max-width: 34rem; }
.appshot.wide { max-width: 44rem; margin-top: var(--sp-xl); }
.appshot img { display: block; width: 100%; height: auto; border-radius: 12px;
  border: 1px solid var(--line-v);
  box-shadow: 0 2px 6px rgba(0,0,0,.45), 0 30px 80px -20px rgba(0,0,0,.7),
    0 0 60px -10px rgba(255,176,58,.12);
  /* crop the empty lower part of the window — keep the part that talks */
  aspect-ratio: 11 / 8; object-fit: cover; object-position: top; }
.appshot figcaption { margin-top: var(--sp-s); font: 500 .72rem/1.5 var(--font-mono);
  color: var(--muted-v); letter-spacing: .06em; text-transform: uppercase; text-align: center; }

/* ---------- Exhibit A: a printed document on the dark desk ---------- */
.datapath { font-size: var(--step-1); max-width: 46ch; margin-bottom: var(--sp-l); }
.datapath b { background: rgba(255,176,58,.15); color: var(--cue); padding: .05em .15em;
  border-radius: 3px; }

.tablewrap { position: relative; overflow-x: auto; margin-bottom: var(--sp-l);
  background: #fdfdfc; border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0,0,0,.4), 0 24px 60px -18px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.9); }
table.compare { width: 100%; border-collapse: collapse; font-size: var(--step--1);
  min-width: 38rem; font-variant-numeric: tabular-nums; }
table.compare th, table.compare td { text-align: left; padding: .95rem 1.2rem;
  border-bottom: 1px solid var(--line-p); vertical-align: top; }
table.compare tbody tr:last-child th, table.compare tbody tr:last-child td { border-bottom: 0; }
table.compare thead th { font-family: var(--font-mono); font-weight: 400; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted-p); }
table.compare td:first-child { color: var(--muted-p); white-space: nowrap;
  font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
table.compare .us { background: rgba(255,176,58,.07); }
table.compare thead .us { color: var(--cue-deep); }
table.compare tbody .us { font-weight: 600; color: var(--ink); }
table.compare tbody td:last-child { color: var(--muted-p); }
@media (max-width: 46rem) {
  table.compare td:first-child { position: sticky; left: 0; background: #fdfdfc; }
}

.stamp { position: absolute; right: 1.2rem; bottom: -1.1rem; rotate: -2deg;
  font: 400 .8rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .18em;
  color: var(--cue-deep); border: 1.5px solid var(--cue-deep); border-radius: 4px;
  padding: .5em .9em; background: #fdfdfc; box-shadow: 0 4px 12px rgba(0,0,0,.35); }

.notfor { color: var(--ink); border-left: 3px solid var(--onair);
  border-radius: 0 6px 6px 0; padding: var(--sp-s) var(--sp-m); max-width: 56ch;
  margin-bottom: var(--sp-l); background: #fdfdfc;
  box-shadow: 0 2px 5px rgba(0,0,0,.4), 0 18px 44px -16px rgba(0,0,0,.55); }
.notfor p:last-child { margin: 0; font-size: var(--step--1); }
.notfor a { color: var(--cue-deep); }
.writing { font-size: var(--step--1); color: var(--muted-v); }
.writing a { color: var(--cue); }

/* ---------- memo: a note taped to the wall ---------- */
.memo { padding-block: var(--sp-xl); }
.memo blockquote { margin: 0; position: relative; max-width: 42rem;
  background: #fdfdfc; color: var(--ink); rotate: -0.6deg;
  padding: var(--sp-l) var(--sp-l) var(--sp-m); border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0,0,0,.4), 0 26px 60px -18px rgba(0,0,0,.6); }
.memo blockquote::before { content: ""; position: absolute; top: -14px; left: 12%;
  width: 7rem; height: 1.7rem; rotate: -2deg;
  background: rgba(255,176,58,.4); border-inline: 1px solid rgba(255,176,58,.2); }
.memo p { font-size: var(--step-1); line-height: 1.6; max-width: 52ch; }
.memo cite { font-style: normal; font-family: var(--font-mono); font-size: var(--step--1);
  color: var(--muted-p); }

/* ---------- pricing: two invoices on the desk ---------- */
#pricing { border-top: 1px solid var(--line-v); }
.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--sp-m); margin: var(--sp-l) 0; max-width: 52rem; }
.plan { background: #fdfdfc; color: var(--ink); border-radius: 12px;
  padding: var(--sp-m); display: flex; flex-direction: column; position: relative;
  transition: translate .35s var(--ease-out);
  box-shadow: 0 2px 5px rgba(0,0,0,.4), 0 20px 50px -16px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.9); }
.plan::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  box-shadow: 0 34px 80px -18px rgba(0,0,0,.75); opacity: 0; transition: opacity .35s; }
.plan:hover { translate: 0 -3px; }
.plan:hover::after { opacity: 1; }
.plan.featured { outline: 2px solid var(--cue); outline-offset: -2px; overflow: hidden; }
.plan.featured::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: conic-gradient(from 220deg at 50% -20%, transparent 42%,
    rgba(255,176,58,.14) 50%, transparent 58%); }
.plan-name { font-family: var(--font-mono); font-size: .78rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--cue-deep); margin: 0 0 .2rem;
  display: flex; align-items: center; gap: .7rem; }
.seats { display: inline-flex; gap: 4px; }
.seats i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--cue-deep);
  transition: background .2s; }
.plan:hover .seats i { background: var(--cue-deep); }
.plan:hover .seats i:nth-child(1) { transition-delay: 0ms; }
.plan:hover .seats i:nth-child(2) { transition-delay: 40ms; }
.plan:hover .seats i:nth-child(3) { transition-delay: 80ms; }
.plan:hover .seats i:nth-child(4) { transition-delay: 120ms; }
.plan:hover .seats i:nth-child(5) { transition-delay: 160ms; }
.price { font-family: var(--font-display); font-size: var(--step-3); line-height: 1;
  margin: .2rem 0 .6rem; }
.price small { font-family: var(--font-mono); font-size: .72rem; color: var(--muted-p);
  letter-spacing: .08em; text-transform: uppercase; }
.plan ul { list-style: none; padding: 0; margin: 0 0 var(--sp-m); flex: 1;
  font-size: var(--step--1); color: var(--muted-p); }
.plan ul li { padding: .38rem 0; border-top: 1px solid var(--line-p); }
.plan ul li:first-child { border-top: 0; }
.buy-foot { margin: .6rem 0 0; font: 500 .68rem/1.4 var(--font-mono); color: var(--muted-p);
  text-align: center; letter-spacing: .02em; }
.note { color: var(--ink); border-left: 3px solid var(--cue-deep);
  background: #fdfdfc; border-radius: 0 6px 6px 0; padding: var(--sp-s) var(--sp-m);
  font-size: var(--step--1); max-width: 56ch;
  box-shadow: 0 2px 5px rgba(0,0,0,.4), 0 14px 36px -14px rgba(0,0,0,.5); }
.note a { color: var(--cue-deep); }

/* ---------- FAQ (booth Q&A, on velvet) ---------- */
#faq { border-top: 1px solid var(--line-v); }
details { border-top: 1px solid var(--line-v); }
details:last-of-type { border-bottom: 1px solid var(--line-v); }
summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-weight: 700; cursor: pointer; padding: 1.05rem 0; list-style: none;
  transition: color .2s; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: var(--font-mono); font-size: 1.1rem;
  color: var(--cue); transition: rotate .25s var(--ease-out); flex: none; }
details[open] summary::after { rotate: 45deg; }
summary:hover { color: var(--cue); }
details p { color: var(--muted-v); margin: 0 0 1.05rem; font-size: var(--step--1); }
details a { color: var(--cue); }

/* ---------- final band ---------- */
.final {
  background:
    radial-gradient(50rem 34rem at 50% -10%, rgba(255,176,58,.12), transparent 60%),
    var(--velvet);
  padding-block: var(--sp-2xl);
  border-top: 1px solid var(--line-v);
}
.fine { font-size: var(--step--1); color: var(--muted-v); }
.fine.quiet a { color: var(--muted-v); }
.fine.quiet a:hover { color: var(--cue); }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--line-v); padding: var(--sp-l) 0 var(--sp-xl);
  color: var(--muted-v); font-size: var(--step--1); }
.foot-row { display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; align-items: center;
  margin-bottom: var(--sp-s); }
.foot-row a { color: var(--muted-v); text-decoration: none; }
.foot-row a:hover { color: var(--bone); }
.foot-row .spacer { margin-left: auto; }
.foot-note { margin: 0; font-size: .78rem; opacity: .7; max-width: 52ch; }

/* ---------- mobile sticky CTA ---------- */
.mcta { position: fixed; left: .75rem; right: .75rem;
  bottom: calc(.75rem + env(safe-area-inset-bottom)); z-index: 90; display: none; }
.mcta .btn { width: 100%; box-shadow: 0 10px 30px -8px rgba(0,0,0,.5); }
@media (max-width: 46rem) { .mcta:not([hidden]) { display: block; } }

/* ---------- scroll reveals ---------- */
.js [data-reveal] { opacity: 0; translate: 0 18px; }
.js [data-reveal].is-in { opacity: 1; translate: 0 0;
  transition: opacity .7s var(--ease-out), translate .7s var(--ease-out); }
.js [data-reveal-stagger] > * { opacity: 0; translate: 0 18px; }
.js [data-reveal-stagger].is-in > * { opacity: 1; translate: 0 0;
  transition: opacity .6s var(--ease-out), translate .6s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 75ms); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js [data-reveal], .js [data-reveal-stagger] > *, .js .hero-copy > *, .js .hero-stage {
    opacity: 1; translate: 0 0; }
  .wipe-edge { display: none; }
}

/* ============================================================
   Legal / success pages (terms.html, privacy.html, success.html)
   — <body class="paper-doc">
   ============================================================ */
.paper-doc { background: var(--paper); color: var(--ink); }
.paper-doc::after { opacity: .03; }
.legal { padding: var(--sp-xl) 0 var(--sp-2xl); }
.legal h1 { font-size: var(--step-3); color: var(--ink); margin-bottom: .5rem; }
.legal .updated { color: var(--muted-p); font-size: .8rem; font-family: var(--font-mono);
  margin-bottom: var(--sp-l); }
.legal h2 { font-size: var(--step-1); font-family: var(--font-body); font-weight: 700;
  text-transform: none; margin: var(--sp-l) 0 .5rem; }
.legal p, .legal li { color: var(--ink); max-width: 68ch; }
.legal ul, .legal ol { padding-left: 1.2rem; }
.legal a { color: var(--cue-deep); }
.eyebrow { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cue-deep); font-weight: 400; }
.keybox { font-family: var(--font-mono); font-size: 1.25rem; letter-spacing: .04em;
  background: #fff; border: 1px dashed var(--cue-deep); border-radius: 8px;
  padding: 1rem 1.2rem; text-align: center; margin: 1.4rem 0; user-select: all;
  word-break: break-all; }
.paper-doc .btn { background: var(--cue); color: var(--velvet); }
.paper-doc .btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-p); }