/* The combined page: A's director's cut (hero, how it works, the closing sections and the timeline along the
   bottom) with B's kinetic reel wall (the split wordmark, the stacking style cards, the sideways tour and the
   leaning footer strip), cut together with A's wipes so it reads as one reel. */
:root {
  --paper: #1A1714; --well: #100D0B; --surface: #241F1B; --ink: #F6F2EC; --muted: #B6ACA0;
  --pink: #F0537A; --teal: #2BC6B5; --rule: rgba(246, 242, 236, .13); --clip: #2C2622;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Hanken Grotesk", system-ui, sans-serif;
  --bar: 58px;   /* the timeline along the bottom; every pinned scene keeps clear of it */
  --vh: 100vh;   /* set to innerHeight by the script */
  --gut: clamp(16px, 6vw, 96px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--well); color-scheme: dark; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  background: var(--paper); color: var(--ink);
  font: 400 17px/1.55 var(--body);
  overflow-x: clip; -webkit-font-smoothing: antialiased;
}
video { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--well); }
h1, h2, h3, h4 { font-weight: inherit; }
ul, ol { list-style: none; }
a { color: inherit; }
.d {
  font-family: var(--display); font-optical-sizing: auto; font-weight: 700;
  font-stretch: 82%; letter-spacing: -.028em; line-height: .92;
}
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The one pink button, in the hero and in the waitlist: a pill with a little voice meter at its end.
   Pointing at it wipes a cream fill across (the page's cut) and the meter starts talking. */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 14px;
  height: 60px; padding: 0 10px 0 28px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--pink); color: var(--paper); text-decoration: none; white-space: nowrap;
  font: 700 18px/1 var(--display); font-stretch: 88%; letter-spacing: -.005em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 18px 44px -18px rgba(240, 83, 122, .75);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink);
  clip-path: inset(0 100% 0 0); transition: clip-path .5s cubic-bezier(.65, 0, .25, 1);
}
.btn:hover::before, .btn:focus-visible::before { clip-path: inset(0); }
.btn:hover, .btn:focus-visible { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 22px 50px -18px rgba(246, 242, 236, .35); }
.btn:active { transform: scale(.97); }
.btn-meter {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  width: 40px; height: 40px; border-radius: 50%; background: var(--paper);
}
.btn-meter b { width: 3px; height: 9px; border-radius: 2px; background: var(--pink); }
.btn-meter b:nth-child(2) { height: 17px; }
.btn-meter b:nth-child(3) { height: 12px; }
.btn-meter b:nth-child(4) { height: 6px; }
.btn:hover .btn-meter b, .btn:focus-visible .btn-meter b { animation: talk .7s ease-in-out infinite alternate; }
.btn:hover .btn-meter b:nth-child(2), .btn:focus-visible .btn-meter b:nth-child(2) { animation-delay: -.25s; }
.btn:hover .btn-meter b:nth-child(3), .btn:focus-visible .btn-meter b:nth-child(3) { animation-delay: -.5s; }
.btn:hover .btn-meter b:nth-child(4), .btn:focus-visible .btn-meter b:nth-child(4) { animation-delay: -.1s; }
@keyframes talk { from { transform: scaleY(.35); } to { transform: scaleY(1.15); } }
@media (prefers-reduced-motion: reduce) { .btn-meter b { animation: none !important; } .btn::before { transition: none; } }

/* ---------- scenes: a tall wrapper with a pinned stage ---------- */
.scene { position: relative; z-index: var(--z, 1); }
.stage { position: sticky; top: 0; height: var(--vh); overflow: hidden; background: var(--paper); }
/* A scene that wipes in overlaps the last two screens of the one before: the first of those it is
   fully hidden, the second it wipes in while the scene below stays pinned. */
.scene.wipe { margin-top: calc(var(--vh) * -2); }
.scene.wipe > .stage { clip-path: inset(0 100% 0 0); pointer-events: none; }
.scene.wipe.is-in > .stage { pointer-events: auto; }
.cut-edge { position: absolute; z-index: 20; background: var(--pink); pointer-events: none; opacity: 0; }
.cut-edge.v { top: 0; bottom: 0; left: 0; width: 3px; box-shadow: 0 0 24px var(--pink); }
.cut-edge.h { left: 0; right: 0; top: 0; height: 3px; box-shadow: 0 0 24px var(--pink); }

/* ---------- 1. hero: headline left, window right; scrolling pushes into the window ---------- */
.hero-stage { background: var(--paper); }
.hero-copy { position: absolute; z-index: 2; left: var(--gut); top: 17vh; width: min(50vw, 820px); will-change: transform, opacity; }
.hero-h { font-size: clamp(48px, 7.6vw, 132px); font-weight: 750; font-stretch: 78%; text-wrap: balance; }
.hero-sub { margin-top: 30px; max-width: 36ch; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.hero-media {
  position: absolute; z-index: 1; right: var(--gut); bottom: calc(var(--bar) + 7vh);
  width: 58vw; aspect-ratio: 2400 / 1498; will-change: transform;
}
.hero-media.is-pane-only { aspect-ratio: 860 / 1080; }
/* The camera is what the entrance flight moves; the window around it is what the scroll pushes into. */
.camera {
  width: 100%; height: 100%; border-radius: 12px; overflow: hidden; background: var(--well);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .8), 0 0 0 1px var(--rule), 0 60px 140px -40px rgba(240, 83, 122, .18);
  transform-origin: 50% 50%; will-change: transform;
}
.camera .is-pane { display: none; }
.is-flying .hero-copy > *, .is-flying .camera, .is-flying .topbar { opacity: 0; }

/* The scroll cue: a playhead keeps dropping down a short track, the timecode runs with the hero clip. */
.scroll-cue { position: absolute; z-index: 3; left: var(--gut); bottom: calc(var(--bar) + 7vh); display: flex; align-items: flex-end; gap: 14px; will-change: opacity; transition: opacity .8s; }
.cue-track { position: relative; width: 2px; height: 76px; border-radius: 2px; background: var(--rule); overflow: hidden; padding-top: 0; }
.cue-track::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(240, 83, 122, .5)); opacity: 0; animation: cue-glow 2.2s cubic-bezier(.65, 0, .35, 1) infinite; }
.cue-track i {
  position: absolute; left: 0; top: 0; width: 2px; height: 30px; border-radius: 2px;
  background: linear-gradient(rgba(240, 83, 122, 0), var(--pink)); box-shadow: 0 0 10px rgba(240, 83, 122, .8);
  animation: cue-drop 2.2s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes cue-drop { 0% { transform: translateY(-32px); } 70%, 100% { transform: translateY(78px); } }
@keyframes cue-glow { 40% { opacity: 0; } 62% { opacity: 1; } 100% { opacity: 0; } }
.cue-text { display: flex; flex-direction: column; gap: 6px; padding-bottom: 1px; }
.cue-text b { font: 600 14px/1 var(--body); color: var(--ink); letter-spacing: .01em; }
.cue-tc { font: 600 13px/1 var(--display); font-stretch: 90%; font-variant-numeric: tabular-nums; color: var(--pink); letter-spacing: .02em; }
/* !important: the motion writes the cue's own opacity from its first frame, and the flight still hides it. */
.is-flying .scroll-cue { opacity: 0 !important; }
.rm .scroll-cue { display: none; }

/* The bar along the top: the name left, the waitlist right. Clear over the hero, it takes a dark ground once the
   page moves, slides away while you scroll down and comes back when you scroll up. */
.topbar {
  position: fixed; z-index: 60; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gut); border-bottom: 1px solid transparent;
  transition: opacity .8s, padding .4s, background-color .4s, border-color .4s, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.topbar.away { transform: translateY(-101%); }
.topbar.solid {
  padding-top: 9px; padding-bottom: 9px; background-color: rgba(16, 13, 11, .82); border-bottom-color: var(--rule);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.topbar-name { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; font: 700 22px/1 var(--display); font-stretch: 90%; letter-spacing: -.01em; }
.topbar-name svg { width: 25px; height: 25px; color: var(--pink); }
.btn.btn-sm { height: 46px; padding: 0 7px 0 20px; gap: 10px; font-size: 16px; }
/* Where there's room the bar holds the waitlist form itself; below that, its button glides down to the waitlist. */
.topbar-join { position: relative; }
.topbar-join .joined { padding: 4px; background: rgba(36, 31, 27, .72); }
.topbar-join input { width: 14rem; padding-left: 18px; font-size: 16px; }
.topbar-join .btn.btn-sm { height: 40px; padding: 0 5px 0 16px; gap: 9px; font-size: 15px; }
.topbar-join .btn-meter { width: 30px; height: 30px; }
.topbar-join .form-note {
  position: absolute; top: 100%; right: 0; margin-top: 8px; padding: 8px 12px; border-radius: 10px;
  background: var(--well); box-shadow: 0 0 0 1px var(--rule); font-size: 14px; white-space: nowrap;
}
/* The bar stays while anything in it has focus (typing, or Tab landing on a link); a complaint shows only while
   you're in the form, the joined note stays. */
.topbar:focus-within { transform: none; }
.topbar:not(:focus-within) .topbar-join .form-note.is-error { clip-path: inset(50%); }
.topbar-go { display: none; }
@media (max-width: 900px) {
  .topbar-join { display: none; }
  .topbar-go { display: inline-flex; }
}
.form-note.is-error { color: var(--pink); }
.btn-sm .btn-meter { width: 32px; height: 32px; }
.btn-sm .btn-meter b:nth-child(2) { height: 13px; }

/* ---------- 2. edit by talking: the wordmark splits open over a wall of rising reels ---------- */
.split-stage { background: var(--well); }
.wall { position: absolute; inset: 0; will-change: transform; }
.wall .ph { position: absolute; left: var(--x); top: var(--y); height: var(--h); will-change: transform; }
.wall .ph .clip { height: 100%; transform: rotate(var(--r)); }
.wall .ph.is-pane .clip { aspect-ratio: 860 / 1080; }
.wall-dim { position: absolute; inset: 0; background: var(--well); opacity: 0; pointer-events: none; }
.works { position: absolute; left: var(--gut); right: var(--gut); bottom: calc(var(--bar) + 7vh); max-width: 62rem; opacity: 0; }
.works h2 { font: 800 clamp(2.6rem, 7vw, 7.6rem)/.9 var(--display); font-stretch: 78%; letter-spacing: -.02em; }
.works p { margin-top: 1.4rem; max-width: 40ch; font-size: clamp(1rem, 1.3vw, 1.2rem); }
.door {
  position: absolute; left: 0; right: 0; height: 50.2%;
  display: flex; justify-content: center; background: var(--well); overflow: hidden; will-change: transform;
}
.door-top { top: 0; align-items: flex-end; }
.door-bot { bottom: 0; align-items: flex-start; }
.door span {
  display: block; font: 800 min(22vw, 42vh)/.78 var(--display); font-variation-settings: "wdth" 75;
  letter-spacing: -.02em; white-space: nowrap; will-change: transform;
}
.door-top span { padding-bottom: .02em; transform-origin: 50% 100%; }
.door-bot span { color: var(--pink); padding-top: .06em; transform-origin: 50% 0; }
.scroll-hint { position: absolute; bottom: calc(var(--bar) + 3vh); left: 50%; transform: translateX(-50%); color: var(--muted); font-size: .9rem; }

/* Clip frames for B's parts: a phone for reels, a pane for the app. */
.clip { position: relative; background: var(--well); border: 1px solid var(--rule); overflow: hidden; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .75); }
.clip video { object-fit: cover; }
.phone { aspect-ratio: 546 / 972; border-radius: 9% / 5%; padding: 2.2%; background: #070605; }
.phone video { border-radius: 7.5% / 4.2%; }
.phone::after {
  content: ""; position: absolute; top: 3.6%; left: 50%; width: 28%; height: 2.6%;
  transform: translateX(-50%); border-radius: 99px; background: #070605;
}
.pane { border-radius: 14px; padding: 6px; background: var(--surface); }
.pane video { border-radius: 9px; }

/* ---------- 3. how it works: an editor frame whose clip swaps chapter by chapter ---------- */
.how-stage {
  --fy: calc(var(--vh) * .12);
  --fh: calc(var(--vh) - var(--bar) - var(--vh) * .2);
  --fw: calc(var(--fh) * .74);
  --fx: var(--gut);
  --cx: calc(var(--fx) + var(--fw) + 7vw);
  --kx: calc(var(--fx) + var(--fw) + 19vw);
}
.words {
  position: absolute; left: var(--cx); right: 0; top: calc(var(--vh) * .1); height: calc(var(--vh) * .4);
  overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
}
.how-title { position: absolute; left: var(--fx); top: calc(var(--fy) - 40px); font: 600 15px/1 var(--body); color: var(--muted); }
.how-title b { color: var(--ink); font-weight: 600; }
.ch-frame, .ch-media { position: absolute; left: var(--fx); top: var(--fy); width: var(--fw); height: var(--fh); border-radius: 14px; overflow: hidden; }
.ch-frame { background: var(--well); box-shadow: 0 0 0 1px var(--rule), 0 50px 100px -40px rgba(0, 0, 0, .7); }
.ch-media { clip-path: inset(0 100% 0 0); }
.ch[data-i="0"] .ch-media { clip-path: none; }
.frame-edge {
  position: absolute; z-index: 8; top: var(--fy); left: var(--fx); height: var(--fh); width: 3px;
  background: var(--pink); opacity: 0; box-shadow: 0 0 24px var(--pink); will-change: transform;
}
.ch-word {
  position: absolute; left: 0; top: calc(var(--vh) * .06);
  font-size: clamp(76px, 12.5vw, 230px); font-weight: 800; font-stretch: 75%; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.5px rgba(246, 242, 236, .32); will-change: transform;
}
.ch-num {
  display: block; margin-bottom: .14em; -webkit-text-stroke: 0;
  font: 600 clamp(15px, 1.4vw, 20px)/1 var(--body); letter-spacing: 0; color: var(--pink); font-variant-numeric: tabular-nums;
}
.ch-ask {
  position: absolute; z-index: 9; left: calc(var(--fx) + var(--fw) - 64px); top: calc(var(--fy) + var(--fh) * .74);
  max-width: 340px; padding: 13px 20px 14px; border-radius: 20px 20px 20px 5px;
  background: var(--ink); color: var(--paper); font: 600 clamp(16px, 1.45vw, 21px)/1.3 var(--body);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .8); opacity: 0; will-change: transform, opacity;
}
.ch-ask .r { color: transparent; }
.ch-ask .t::after {
  content: ""; display: inline-block; width: 2px; height: 1.05em; margin: 0 -2px -.16em 1px;
  background: var(--pink); animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.ch-copy { position: absolute; left: var(--kx); bottom: calc(var(--bar) + 8vh); width: min(36ch, 30vw); opacity: 0; will-change: transform, opacity, filter; }
.ch-copy h3 { font: 700 clamp(24px, 2.2vw, 34px)/1.08 var(--display); font-stretch: 85%; letter-spacing: -.015em; margin-bottom: 12px; }
.ch-copy p { color: var(--muted); }
.ch-copy p + p { margin-top: 10px; font-size: 15px; }

/* ---------- 4. your style: four cards pile up as you scroll ---------- */
/* It slides up over the pinned how-it-works frame (that scene keeps a screen for it), pink edge first. */
.style { position: relative; z-index: 4; margin-top: calc(var(--vh) * -1); background: var(--paper); padding-top: 12vh; }
.style > .cut-edge { opacity: 0; }
.style-head { padding: 0 var(--gut); display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 3vw; align-items: end; }
.style-head h2 { font: 800 clamp(3rem, 8.6vw, 10rem)/.86 var(--display); font-stretch: 76%; letter-spacing: -.018em; }
.style-head p { color: var(--muted); max-width: 30ch; font-size: clamp(1rem, 1.25vw, 1.2rem); padding-bottom: .6rem; }
.bw { display: inline-block; will-change: transform, opacity, filter; }
.stack { margin-top: 12vh; padding: 0 var(--gut); }
.card {
  position: sticky; top: calc(9vh + var(--i) * 1.6rem);
  /* The last card's bottom stays clear of the timeline bar. */
  height: calc(var(--vh) - var(--bar) - 11.5vh - 4.8rem); min-height: 440px;
  margin-bottom: 9vh; border-radius: 28px; overflow: hidden; transform-origin: 50% 0; will-change: transform;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}
.card::after { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--dim, 0); pointer-events: none; }
.card.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.card.flip .card-copy { order: 2; }
.card-copy { padding: clamp(28px, 4.5vw, 72px); display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
.card h3 { font: 800 clamp(2.8rem, 6.8vw, 8rem)/.86 var(--display); font-stretch: 76%; letter-spacing: -.018em; max-width: 8ch; }
.card-copy p { max-width: 42ch; font-size: clamp(1rem, 1.2vw, 1.15rem); }
.card-stage { position: relative; display: flex; align-items: center; justify-content: center; padding: 4vh 3vw; min-height: 0; }
.card-stage .clip { height: 100%; max-height: 66vh; transform: rotate(var(--tilt, -3deg)); }
.card-stage .pane { aspect-ratio: 760 / 1068; }
.c-learn { background: var(--pink); color: var(--well); }
.c-learn .clip { --tilt: 4deg; }
.c-setup { background: var(--ink); color: var(--paper); }
.c-kit { background: var(--surface); color: var(--ink); }
.c-kit .card-copy p { color: var(--muted); }
.c-love { background: var(--teal); color: var(--well); }
.c-love .clip { --tilt: 5deg; }
/* The pile stays put while the tour opens over it. */
.stack-end { height: calc(var(--vh) * 2.3); }

/* The lasting note flies from the chat into the editing skill. */
.note {
  position: absolute; z-index: 2; left: 4%; top: 22%; padding: .8rem 1.2rem;
  border-radius: 1.3rem 1.3rem .3rem 1.3rem; background: var(--well); color: var(--ink);
  font: 600 clamp(1rem, 1.4vw, 1.3rem)/1.2 var(--body); white-space: nowrap;
  animation: note 6s cubic-bezier(.6, 0, .2, 1) infinite;
}
.note::before { content: "You"; display: block; font-size: .72em; font-weight: 500; color: var(--muted); margin-bottom: .2rem; }
@keyframes note {
  0%, 8% { transform: translate(-30px, 20px) scale(.9); opacity: 0; }
  16%, 52% { transform: none; opacity: 1; }
  70%, 100% { transform: translate(38%, 120%) scale(.55); opacity: 0; }
}
/* Setup questions take turns. */
.asks { position: absolute; z-index: 2; left: 5%; bottom: 14%; display: grid; }
.asks span {
  grid-area: 1 / 1; padding: .75rem 1.15rem; border-radius: 1.3rem 1.3rem 1.3rem .3rem;
  background: var(--pink); color: var(--well); font: 600 clamp(1rem, 1.35vw, 1.25rem)/1.2 var(--body);
  white-space: nowrap; opacity: 0; animation: ask 10s infinite;
}
.asks span:nth-child(2) { animation-delay: 2.5s; }
.asks span:nth-child(3) { animation-delay: 5s; }
.asks span:nth-child(4) { animation-delay: 7.5s; }
@keyframes ask {
  0% { opacity: 0; transform: translateY(14px); }
  4%, 22% { opacity: 1; transform: none; }
  26%, 100% { opacity: 0; transform: translateY(-14px); }
}
/* What it studies in a reel you love, one at a time. */
.studies { position: absolute; z-index: 2; right: 4%; top: 18%; display: grid; gap: .45rem; justify-items: end; }
.studies span { padding: .45rem .85rem; border-radius: 99px; background: #7fe0d5; font: 600 clamp(.9rem, 1.15vw, 1.05rem)/1.2 var(--body); animation: study 7.5s infinite; }
.studies span:nth-child(2) { animation-delay: 1.5s; }
.studies span:nth-child(3) { animation-delay: 3s; }
.studies span:nth-child(4) { animation-delay: 4.5s; }
.studies span:nth-child(5) { animation-delay: 6s; }
@keyframes study {
  0%, 100% { background: #7fe0d5; color: var(--well); }
  5%, 18% { background: var(--well); color: var(--ink); }
  24% { background: #7fe0d5; color: var(--well); }
}
.scan {
  position: absolute; left: 2.2%; right: 2.2%; top: 2.2%; height: 16%; pointer-events: none;
  background: linear-gradient(to bottom, rgba(43, 198, 181, 0), rgba(43, 198, 181, .45) 85%, rgba(246, 242, 236, .9));
  mix-blend-mode: screen; animation: scan 3.2s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}
@keyframes scan { from { transform: translateY(0); } to { transform: translateY(510%); } }

/* ---------- 5. everything it can do: a sideways wall of clips ---------- */
.tour-stage { background: var(--well); }
.track {
  display: flex; align-items: center; height: calc(100% - var(--bar));
  padding: 0 12vw 0 var(--gut); gap: 7vw; width: max-content; will-change: transform;
}
.slot { position: relative; display: flex; align-items: center; flex: none; }
.slot:nth-child(even) { align-self: flex-start; margin-top: calc(13vh + var(--off, 0vh)); }
.slot:nth-child(odd) { align-self: flex-end; margin-bottom: calc(13vh + var(--off, 0vh)); }
.slot-frame { flex: none; will-change: transform; }
.slot-frame .clip { transform: rotate(var(--rot, 0deg)); }
.slot-frame .phone { height: 60vh; }
.slot-frame .pane.tall { height: 56vh; aspect-ratio: var(--ar); }
.slot-frame .pane.wide { width: min(38vw, 52vh * var(--arn)); aspect-ratio: var(--ar); }
.slot-text { position: relative; z-index: 2; width: min(30vw, 30rem); margin-left: 3vw; will-change: transform; }
.slot:nth-child(4n+1) .slot-text { align-self: flex-start; margin-top: -2vh; }
.slot:nth-child(4n+3) .slot-text { align-self: flex-end; margin-bottom: -2vh; }
.slot-text h3 { font: 800 clamp(2.3rem, 4.6vw, 5.6rem)/.9 var(--display); font-stretch: 78%; letter-spacing: -.015em; text-shadow: 0 2px 30px rgba(16, 13, 11, .6); }
.slot-text p { margin-top: 1rem; max-width: 30ch; color: var(--muted); }
.slot.group, .slot.intro, .slot.coming { display: block; align-self: center; margin: 0; }
.slot.group h2 { font: 800 min(30vh, 19vw)/.8 var(--display); font-variation-settings: "wdth" 75; letter-spacing: -.04em; color: var(--pink); white-space: nowrap; }
.slot.intro { width: min(46vw, 40rem); }
.slot.intro h2 { font: 800 clamp(3rem, 7.4vw, 8.6rem)/.86 var(--display); font-stretch: 76%; letter-spacing: -.018em; }
.slot.intro p { margin-top: 1.4rem; color: var(--muted); max-width: 32ch; }
.slot.coming { width: min(22vw, 18rem); }
.slot.coming p { font: 700 clamp(1.4rem, 2vw, 2rem)/1.1 var(--display); font-stretch: 85%; color: var(--teal); }
.tour-rail {
  position: absolute; left: var(--gut); right: var(--gut); bottom: calc(var(--bar) + 3vh);
  display: flex; gap: clamp(.8rem, 2.4vw, 2.4rem); font: 600 .95rem/1 var(--body); color: var(--muted); pointer-events: none;
}
.tour-rail span { transition: color .25s; }
.tour-rail span.on { color: var(--ink); }
.tour-bar { position: absolute; left: 0; bottom: var(--bar); height: 3px; width: 100%; background: var(--pink); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- 6. you're still the editor: the one light section, opening like an iris ---------- */
.editor { position: relative; z-index: 6; background: var(--ink); color: var(--paper); padding: 16vh var(--gut) 18vh; will-change: clip-path; overflow-x: clip; }
.editor-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2vw; }
.editor-h { grid-column: 1 / 8; grid-row: 1; font-size: clamp(56px, 10vw, 180px); font-weight: 800; font-stretch: 75%; will-change: transform; }
.editor-clip { grid-column: 8 / 13; grid-row: 1 / 3; align-self: start; margin-top: 22vh; position: sticky; top: 16vh; }
.editor-clip .media { border-radius: 12px; overflow: hidden; aspect-ratio: 960 / 712; box-shadow: 0 40px 80px -40px rgba(26, 23, 20, .6); }
.points { grid-column: 1 / 8; display: grid; grid-template-columns: 1fr 1fr; gap: 7vh 4vw; margin-top: 10vh; }
.points li:nth-child(even) { transform: translateY(9vh); }
.pt { will-change: opacity, filter, transform; }
.points h3 { font: 700 clamp(21px, 1.8vw, 28px)/1.1 var(--display); font-stretch: 85%; margin-bottom: 8px; }
.points p { color: #5E554D; }

/* ---------- 7. private by design: the promise lights up word by word ---------- */
.private-stage { background: var(--well); }
.private-in { position: absolute; inset: 0 0 var(--bar); padding: 14vh var(--gut) 0; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2vw; align-content: start; }
.private-in h2 { grid-column: 1 / 6; font: 600 17px/1 var(--body); color: var(--teal); margin-bottom: 4vh; }
.privacy { grid-column: 1 / 11; font-size: clamp(32px, 4.6vw, 82px); font-weight: 700; font-stretch: 80%; line-height: 1.02; }
.privacy .w { color: rgba(246, 242, 236, .14); }
.private-facts { grid-column: 7 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: 3vw; margin-top: 7vh; will-change: opacity, transform; }
.private-facts h3 { font: 700 20px/1.15 var(--display); font-stretch: 88%; margin-bottom: 6px; }
.private-facts p { color: var(--muted); font-size: 15px; }

/* ---------- 8. questions ---------- */
.faq { position: relative; z-index: 8; background: var(--paper); padding: 18vh var(--gut) 14vh; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2vw; }
.faq h2 { grid-column: 1 / 5; align-self: start; position: sticky; top: 14vh; font-size: clamp(48px, 6vw, 104px); font-weight: 800; font-stretch: 75%; }
.faq-list { grid-column: 6 / 12; }
.faq details { border-top: 1px solid var(--rule); }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center;
  padding: 26px 0; font: 600 clamp(19px, 1.6vw, 24px)/1.2 var(--display); font-stretch: 90%;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 14px; height: 14px; transition: transform .3s;
  background: linear-gradient(var(--pink), var(--pink)) center / 14px 2px no-repeat, linear-gradient(var(--pink), var(--pink)) center / 2px 14px no-repeat;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 26px; color: var(--muted); max-width: 52ch; }

/* ---------- 9. the waitlist ---------- */
.join { position: relative; z-index: 8; background: var(--paper); padding: 10vh var(--gut) 16vh; overflow-x: clip; }
.join-h { font-size: clamp(54px, 10.5vw, 196px); font-weight: 800; font-stretch: 75%; }
.join-h span { display: block; will-change: transform; }
.join-h span:nth-child(2) { padding-left: 14vw; }
.join-h span:nth-child(3) { padding-left: 4vw; }
.join-row { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2vw; margin-top: 8vh; }
.join-row > p { grid-column: 1 / 5; color: var(--muted); font-size: 19px; }
.join-form { grid-column: 6 / 12; }
/* The email field and its button as one pill: the button sits inside the field's right end. */
.joined {
  display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--surface); transition: border-color .25s;
}
.joined:focus-within { border-color: var(--pink); }
.joined input {
  flex: 1; min-width: 0; align-self: stretch; padding: 0 8px 0 22px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink); font: 400 18px var(--body);
}
.joined input::placeholder { color: #8A8076; }
.joined input:focus { outline: none; }
.joined .btn { flex: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.form-note { margin-top: 12px; font-size: 15px; color: var(--teal); }
.form-note:empty { position: absolute; clip-path: inset(50%); }
.fine { margin-top: 14px; font-size: 14px; color: var(--muted); }

/* ---------- 10. footer: the name runs past, leaning with the scroll; a small pink spark between ---------- */
.footer { position: relative; z-index: 8; background: var(--well); padding: 6vh 0 0; overflow: hidden; }
.loop { white-space: nowrap; }
.loop-row {
  display: inline-flex; align-items: baseline; will-change: transform;
  font: 800 clamp(5rem, 19vw, 22rem)/.9 var(--display); font-variation-settings: "wdth" 75; letter-spacing: -.04em;
  --xh: .5em; /* Bricolage's lowercase height at this width, measured by the script */
}
.loop-row span:nth-of-type(even) { color: var(--pink); }
/* A spark smaller than a lowercase letter, centred on the lowercase letters, the same space either side
   (the letter spacing trims the space after a word, so the left margin gives it back). In a baseline row the
   picture's bottom sits on the baseline, so it is lifted by half of what it lacks of the lowercase height. */
.loop-row svg {
  color: var(--pink);
  --s: .56; flex: none; width: calc(var(--xh) * var(--s)); height: calc(var(--xh) * var(--s));
  margin: 0 .2em 0 calc(.2em + .04em); position: relative; top: calc(var(--xh) * (var(--s) - 1) / 2);
}
/* The copyright sits on its own band, a step lighter than the strip, so the two read apart. */
.foot { margin-top: 5vh; padding: 24px var(--gut) 28px; background: var(--paper); color: var(--muted); font-size: 14px; text-align: center; }

/* ---------- the timeline along the bottom ---------- */
.tl {
  position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; height: var(--bar);
  display: flex; align-items: stretch; gap: 14px; padding: 0 16px 0 14px;
  background: rgba(16, 13, 11, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--rule);
  transform: translateY(100%); transition: transform .5s cubic-bezier(.2, .8, .2, 1), visibility 0s .5s;
}
/* Hidden, it is out of Tab's way too, once it has slid down; it comes back at once when it slides up. */
.tl:not(.on) { visibility: hidden; }
.tl.on { transform: none; transition-delay: 0s; }
.tl-tc { flex: none; align-self: center; width: 112px; font: 600 15px/1 var(--display); font-stretch: 90%; font-variant-numeric: tabular-nums; color: var(--ink); letter-spacing: .01em; }
.tl-lanes { position: relative; flex: 1; min-width: 0; }
.tl-clips { position: absolute; left: 0; right: 0; top: 9px; height: 22px; }
.tl-clip {
  position: absolute; top: 0; height: 100%; padding: 0 8px; border: 0; border-radius: 5px;
  background: var(--clip); box-shadow: inset 0 0 0 1px rgba(246, 242, 236, .1);
  color: var(--muted); font: 600 11.5px/22px var(--body); text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.tl-clip:hover { color: var(--ink); }
.tl-clip.on { color: var(--ink); background: #3A322D; box-shadow: inset 0 0 0 1px rgba(246, 242, 236, .32); }
.tl-tick { position: absolute; top: 4px; bottom: 4px; width: 1px; background: rgba(246, 242, 236, .22); pointer-events: none; }
.tl-wave { position: absolute; left: 0; top: 35px; width: 100%; height: 13px; }
.tl-head { position: absolute; top: 2px; bottom: 4px; left: 0; width: 0; pointer-events: none; will-change: transform; }
.tl-head::before { content: ""; position: absolute; left: -1px; top: 4px; bottom: 0; width: 2px; background: var(--pink); }
.tl-head::after { content: ""; position: absolute; left: -6px; top: 0; width: 12px; height: 9px; border-radius: 3px 3px 6px 6px; background: var(--pink); }

/* ---------- narrow screens ---------- */
@media (max-width: 760px) {
  :root { --bar: 46px; }
  body { font-size: 16px; }
  .hero-copy { top: 14vh; width: auto; right: var(--gut); }
  .scroll-cue { left: 50%; translate: -50% 0; bottom: 14px; gap: 10px; }
  .cue-track { height: 44px; }
  @keyframes cue-drop { 0% { transform: translateY(-32px); } 70%, 100% { transform: translateY(46px); } }
  .topbar { padding: 12px var(--gut); }
  .topbar.solid { padding-top: 6px; padding-bottom: 6px; }
  .hero-sub { margin-top: 16px; font-size: 15px; }
  .topbar-name { font-size: 18px; gap: 6px; }
  .topbar-name svg { width: 21px; height: 21px; }
  .btn.btn-sm { height: 40px; padding: 0 5px 0 15px; gap: 8px; font-size: 15px; }
  .btn-sm .btn-meter { width: 30px; height: 30px; }
  .hero-h { font-size: 12.6vw; }
  .btn { height: 54px; padding: 0 8px 0 22px; gap: 12px; font-size: 17px; }
  .btn-meter { width: 38px; height: 38px; }
  .hero-media { right: auto; left: 50%; translate: -50% 0; width: auto; height: 46vh; bottom: calc(var(--bar) + 3vh); }
  .camera .is-wide { display: none; }
  .camera .is-pane { display: block; }
  .wall .ph.wide-only { display: none; }
  .door span { font-size: 34vw; }
  .works p { font-size: 1rem; }
  .how-stage { --fy: calc(var(--vh) * .1); --fh: calc(var(--vh) * .44); --fx: var(--gut); --cx: var(--gut); }
  .how-title { top: calc(var(--fy) - 30px); font-size: 13px; }
  .words { left: var(--gut); top: calc(var(--fy) + var(--fh) + 1vh); height: calc(var(--vh) * .14); }
  .ch-word { top: calc(var(--vh) * .02); font-size: 19vw; }
  .ch-num { display: inline-block; margin: 0 10px 0 0; vertical-align: top; }
  .ch-ask { left: auto; right: var(--gut); top: calc(var(--fy) + var(--fh) * .56); max-width: 58vw; font-size: 15px; padding: 10px 14px; }
  .ch-copy { width: auto; left: var(--gut); right: var(--gut); bottom: calc(var(--bar) + 3vh); }
  .ch-copy h3 { font-size: 21px; margin-bottom: 6px; }
  .ch-copy p { font-size: 15px; }
  .ch-copy p + p { display: none; }
  .style { padding-top: 9vh; }
  .style-head { grid-template-columns: 1fr; }
  .stack { margin-top: 7vh; }
  .card, .card.flip {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
    top: calc(6vh + var(--i) * .9rem); height: calc(var(--vh) - var(--bar) - 8vh - 2.7rem); min-height: 0; border-radius: 22px;
  }
  .card.flip .card-copy { order: 0; }
  .card-copy { padding: 24px 22px 0; gap: .9rem; justify-content: flex-start; }
  .card h3 { font-size: clamp(2.3rem, 11vw, 3.2rem); max-width: none; }
  .card-copy p { font-size: .95rem; line-height: 1.45; }
  .card-stage { padding: 16px; }
  .card-stage .clip { max-height: 100%; }
  .note, .asks span, .studies span { font-size: .85rem; }
  .track { gap: 14vw; padding-right: 20vw; }
  .slot, .slot:nth-child(n) { flex-direction: column-reverse; align-items: flex-start; align-self: center; margin: 0; }
  .slot-text, .slot:nth-child(n) .slot-text { width: 78vw; margin: 0 0 3vh; align-self: auto; }
  .slot-text h3 { font-size: 2.1rem; }
  .slot-text p { font-size: .95rem; }
  .slot-frame .phone { height: 46vh; }
  .slot-frame .pane.tall { height: 42vh; }
  .slot-frame .pane.wide { width: 80vw; }
  .slot.intro, .slot.coming { width: 80vw; }
  /* Six groups fit one line on a phone, clear of the timeline. */
  .tour-rail { font-size: .7rem; gap: .5rem .55rem; flex-wrap: nowrap; white-space: nowrap; bottom: calc(var(--bar) + 2vh); }
  .editor { padding: 12vh var(--gut) 14vh; }
  .editor-h { grid-column: 1 / -1; font-size: 17vw; }
  .editor-clip { grid-column: 3 / -1; grid-row: auto; margin-top: 5vh; position: static; }
  .points { grid-column: 1 / -1; grid-template-columns: 1fr; margin-top: 7vh; gap: 5vh; }
  .points li:nth-child(even) { transform: none; padding-left: 12vw; }
  .private-in { padding-top: 12vh; }
  .private-in h2, .privacy, .private-facts { grid-column: 1 / -1; }
  .privacy { font-size: 8.4vw; }
  .private-facts { grid-template-columns: 1fr; gap: 18px; margin-top: 5vh; }
  .faq h2, .faq-list { grid-column: 1 / -1; position: static; }
  .faq h2 { margin-bottom: 4vh; }
  .join-row > p, .join-form { grid-column: 1 / -1; }
  .join-form { margin-top: 28px; }
  .join-fields { padding: 5px; }
  .join-fields input { padding: 0 4px 0 14px; font-size: 16px; }
  .join-fields .btn { height: 50px; padding: 0 5px 0 16px; gap: 8px; font-size: 15px; }
  .join-fields .btn-meter { width: 34px; height: 34px; }
  .join-h span:nth-child(2) { padding-left: 10vw; }
  .tl { gap: 10px; padding: 0 12px; }
  .tl-tc { width: 80px; font-size: 12px; }
  .tl-clips { top: 7px; height: 18px; }
  .tl-clip { font-size: 0; padding: 0; }
  .tl-clip.on { font-size: 10.5px; line-height: 18px; padding: 0 6px; }
  .tl-wave { top: 29px; height: 10px; }
}

/* ---------- reduced motion: every scene laid out still, nothing plays on its own ---------- */
.rm .scene { height: auto !important; margin-top: 0 !important; }
.rm .stage { position: relative; height: auto; clip-path: none !important; pointer-events: auto; overflow: visible; }
.rm .cut-edge, .rm .ch-frame, .rm .frame-edge, .rm .stack-end, .rm .scroll-hint, .rm .wall-dim, .rm .tour-rail, .rm .tour-bar { display: none; }
.rm .hero-stage { min-height: var(--vh); }
/* Split: the wordmark, then the reels, then the words, one after another. */
.rm .split-stage { padding: 14vh 0 10vh; display: flex; flex-direction: column; }
.rm .door { order: -1; }
.rm .door { position: relative; height: auto; background: none; }
.rm .wall { position: relative; display: flex; flex-wrap: wrap; gap: 3vw; justify-content: center; padding: 6vh var(--gut); }
.rm .wall .ph { position: relative; left: auto; top: auto; height: 44vh; }
.rm .works { position: relative; left: auto; bottom: auto; padding: 0 var(--gut); opacity: 1; }
/* How it works: each chapter a row. */
.rm .how-stage { padding: 14vh var(--gut) 10vh; }
.rm .how-title { position: static; margin-bottom: 6vh; font-size: 17px; }
.rm .ch { position: relative; display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: 5vw; align-items: center; margin-bottom: 10vh; }
.rm .ch-media, .rm .ch-word, .rm .ch-ask, .rm .ch-copy { position: static; transform: none !important; opacity: 1 !important; filter: none !important; clip-path: none !important; }
.rm .words { position: static; height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.rm .ch-media { grid-row: 1 / 5; width: auto; height: auto; aspect-ratio: .74; box-shadow: 0 0 0 1px var(--rule); }
.rm .ch-word { font-size: clamp(56px, 8vw, 120px); color: var(--ink); -webkit-text-stroke: 0; }
.rm .ch-ask { justify-self: start; max-width: none; }
.rm .ch-ask .r { color: inherit; }
.rm .ch-ask .t::after { display: none; }
.rm .ch-copy { width: auto; max-width: 40ch; }
/* Style and tour. */
.rm .style { margin-top: 0; padding-bottom: 12vh; }
.rm .note, .rm .asks span, .rm .studies span { animation: none; opacity: 1; }
.rm .asks { gap: .4rem; }
.rm .asks span { grid-area: auto; }
.rm .scan { display: none; }
.rm .tour-stage { overflow: visible; }
.rm .track { width: auto; height: auto; flex-wrap: wrap; padding: 12vh var(--gut); row-gap: 10vh; }
/* The closing sections. */
.rm .editor, .rm .pt, .rm .editor-h, .rm .join-h span, .rm .private-facts { clip-path: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }
.rm .private-in { position: static; padding-bottom: 14vh; }
.rm .privacy .w { color: var(--ink); }
.rm .loop { white-space: normal; }
@media (max-width: 760px) {
  .rm .ch { grid-template-columns: 1fr; }
  .rm .hero-media { aspect-ratio: 860 / 1080; } /* the pane clip's shape, as the script gives it (is-pane-only) when motion is on */
  .rm .ch-media { grid-row: auto; }
}

/* The narrowest phones: the joined field still shows its whole placeholder. Its words stay at 16px (iOS zooms into
   a smaller field when it gets focus), so the room comes from the button. */
@media (max-width: 380px) {
  .join-fields input { padding-left: 12px; }
  .join-fields .btn { padding: 0 4px 0 11px; gap: 5px; font-size: 14px; }
  .join-fields .btn-meter { width: 28px; height: 28px; }
}

/* Eden's bot trap: a field people never see or reach. */
.joined input.hp { position: absolute; left: -9999px; width: 1px; height: 1px; padding: 0; opacity: 0; }
/* Words that only make sense when the tour is a sideways wall. */
.rm .wall-only { display: none; }

/* ---------- the launch countdown, in the hero and at the waitlist ---------- */
/* The numbers read like the page's timecodes (Bricolage, narrowed, tabular, pink). They show once the script runs;
   without it the date in words is all there is, and at launch they go. */
.cd-label { font: 600 15px/1.2 var(--body); color: var(--ink); margin-bottom: 14px; }
.cd-label span { color: var(--muted); font-weight: 400; }
.cd-digits { display: none; align-items: flex-start; gap: .14em; font-family: var(--display); font-stretch: 90%; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--pink); line-height: 1; }
.cd.is-live .cd-digits { display: inline-flex; }
.cd.is-done .cd-digits { display: none; }
.cd-unit { display: inline-flex; flex-direction: column; align-items: center; }
.cd-unit small { margin-top: .5em; font: 500 11px/1 var(--body); letter-spacing: .02em; color: var(--muted); }
.cd-colon { opacity: .55; }
.cd-hero { margin-top: 34px; }
.cd-hero .cd-digits { font-size: clamp(40px, 4.4vw, 68px); }
.cd-wait { margin-top: 26px; }
.cd-wait .cd-label { font-weight: 500; font-size: 14px; color: var(--muted); margin-bottom: 12px; }
.cd-wait .cd-digits { font-size: clamp(32px, 3vw, 48px); }
.join-row > .cd-wait { grid-column: 1 / 5; grid-row: 2; align-self: start; }
.join-row > .join-form { grid-row: 1 / span 2; }
/* Short laptop screens: the countdown stays clear of the scroll cue under it. */
@media (min-width: 761px) and (max-height: 820px) {
  .cd-hero { margin-top: 22px; }
  .cd-hero .cd-label { margin-bottom: 10px; }
  .cd-hero .cd-digits { font-size: clamp(36px, 6vh, 52px); }
}
@media (max-width: 760px) {
  /* On a phone the hero's countdown is one line of numbers with their units beside them, and the window gives a
     little height, so the two never touch. */
  .cd-hero { margin-top: 18px; }
  .cd-hero .cd-label { font-size: 14px; margin-bottom: 8px; }
  .cd-hero .cd-digits { font-size: 26px; gap: 0; }
  .cd-hero .cd-unit { flex-direction: row; align-items: baseline; }
  .cd-hero .cd-unit small { margin: 0 0 0 2px; font-size: 13px; }
  .cd-hero .cd-unit + .cd-colon { display: none; }
  .cd-hero .cd-unit + .cd-colon + .cd-unit { margin-left: 10px; }
  .hero-media { height: 42vh; }
  .join-row > .cd-wait { grid-column: 1 / -1; grid-row: auto; }
  .join-row > .join-form { grid-row: auto; }
}

/* Until the motion's first frame has put every scene in place, the page stays hidden (set by the head script), so a
   reload never flashes a later scene. The still layout never hides. */
.is-loading:not(.rm) main { visibility: hidden; }
/* Phones: the subtitle steps aside so the countdown and the window both fit (owner: "drop the subtitle on mobile"). */
@media (max-width: 760px) { .hero-sub { display: none; } }