@font-face{
  font-family:'Satoshi';
  src:url('fonts/Satoshi-Variable.woff2') format('woff2');
  font-weight:300 900;      /* variable axis range */
  font-style:normal;
  font-display:swap;        /* show Manrope immediately, swap when Satoshi loads */
}

:root{
  /* Stone & ink — LOCKED. See CLAUDE.md. Always use the variables. */
  --font-display:'Satoshi', Manrope, sans-serif;   /* ALL display + headings (identity line, lane/section heads) */
  --ground:#1C1915;         /* warm deep charcoal — the page (WARM; flagged for review) */
  --card:#2A2A29;           /* neutral dark surface, a half-step lighter than ground */
  --ink:#F7F7F5;            /* clean near-white — type (piercing, not warm) */
  --muted:#98999A;          /* cool gray — secondary text */
  --hairline:#333234;       /* low-contrast cool divider */
  --accent:#F7F7F5;         /* MONOCHROME: full-strength white (= --ink). Rationed to
                               CTAs, terminal moments, demo payoffs. Emphasis is
                               contrast + weight, never hue. */
  /* BINDING RULE: text on a bone-filled element is --ground, never bone
     (bone-on-bone = 1:1, fails; ground-on-bone = 13.98:1, AAA). */
  --ease:cubic-bezier(.16,1,.3,1);   /* slow-settle */
  /* spacing scale — 8px base */
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px;
  --section:clamp(96px,13vh,168px);   /* consistent vertical section rhythm */
  --spine-x:clamp(16px,3vw,40px);     /* steady-spine gutter (left of content) */
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}   /* the hidden attribute always wins (stepped-form chrome relies on it) */
html{scroll-behavior:auto}   /* Lenis owns smooth scroll; native smooth fights it and can freeze the scrub */
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:'Poppins',system-ui,sans-serif;
  font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
a{color:var(--muted)}
a:focus-visible,button:focus-visible{outline:3px solid var(--muted);outline-offset:2px}

/* ---------- nav ---------- */
nav{border-bottom:1px solid var(--hairline)}
.nav-in{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
/* wordmark = the owner's signature: uniform bone, no bold/light split, wide even tracking */
.wordmark{font-family:'Manrope',sans-serif;font-weight:600;font-size:1.05rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.wordmark span{color:inherit;font-weight:inherit}
.nav-links{display:flex;gap:28px;align-items:center;font-size:.95rem}
.nav-links a{color:var(--muted);text-decoration:none}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink);border-bottom:2px solid var(--muted)}
.btn{
  display:inline-block;background:var(--accent);color:var(--ground);text-decoration:none;
  font-weight:700;font-size:.95rem;padding:10px 20px;border-radius:3px;
  border:none;cursor:pointer;font-family:inherit;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.btn:hover{background:#E6E6E3}   /* white, slightly softened on hover */
.btn-big{font-size:1.05rem;padding:14px 28px}

/* ---------- page head (privacy / terms / thanks) ---------- */
header{position:relative;overflow:hidden;border-bottom:1px solid var(--hairline)}
.page-head{position:relative;padding:64px 0 56px;max-width:760px}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;margin-bottom:20px}
h1{font-family:var(--font-display);font-weight:700;font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.12;letter-spacing:-.01em;margin-bottom:22px}
.page-head h1{font-size:clamp(1.9rem,4vw,2.7rem)}
h1 em{font-style:normal;color:var(--muted)}
.lede{font-size:1.15rem;color:var(--muted);max-width:62ch;margin-bottom:var(--s4)}
.page-head .lede{margin-bottom:0}

h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.2;margin-bottom:14px}

/* ---------- intake form ---------- */
form{max-width:680px}
fieldset{border:none;margin-bottom:36px}
legend,label.top{font-family:var(--font-display);font-weight:600;font-size:1.05rem;margin-bottom:12px;display:block}
/* pills: a 2-column grid, tracks sized to the widest option, packed to the LEFT so the
   pills share the same left edge as their question label — balanced rows (2+2, or a
   single left pair for 2 options) flowing from the left, aligned with the labels */
.choices{display:grid;grid-template-columns:repeat(2,auto);justify-content:start;gap:10px;max-width:520px}
.choice{position:relative;display:flex}
.choice input{position:absolute;opacity:0}
/* intake + paused card share a --card panel stage, set off from the ground */
.panel{background:var(--card);border:1px solid var(--hairline);border-radius:16px;padding:clamp(26px,3.5vw,44px);max-width:740px;margin:0 auto}
/* a pill = its label + comfortable padding, rounded; fills its (content-sized) track so
   the two columns align, never the full panel width */
.choice span{
  display:flex;align-items:center;justify-content:center;text-align:center;width:100%;
  background:var(--ground);border:1px solid var(--hairline);border-radius:999px;
  padding:11px 22px;font-size:.95rem;color:var(--muted);cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease);
}
.choice span:hover{border-color:var(--muted);color:var(--ink)}
/* selected = FILLED (white on ground), unmistakable against the outline of the rest */
.choice input:checked + span{background:var(--accent);border-color:var(--accent);color:var(--ground);font-weight:600}
.choice input:focus-visible + span{outline:3px solid var(--muted);outline-offset:2px}
input[type=text],input[type=email],input[type=url],textarea{
  width:100%;background:var(--ground);border:1px solid var(--hairline);border-radius:4px;
  padding:12px 14px;font-family:inherit;font-size:.98rem;color:var(--ink);
}
input:focus,textarea:focus{outline:none;border-color:var(--muted);box-shadow:0 0 0 1px var(--muted)}
textarea{min-height:140px;resize:vertical}
.field{margin-bottom:22px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px}
.field-row .field{margin-bottom:0}
.field label{display:block;font-weight:600;font-size:.95rem;margin-bottom:8px}
.field-hint{display:block;font-weight:400;font-size:.85rem;color:var(--muted);margin-top:3px}
.escape{font-size:.9rem;color:var(--muted);margin-top:28px}
.hp{position:absolute;left:-5000px}

/* ---- multi-step conversational form (intake-form.js) ---------------------------
   Default (no-JS): every step visible, one Submit — a plain form. .stepped (added by
   JS) hides all but the active step and reveals the progress + Back/Next chrome. */
.step-progress,.step-nav{display:none}
.step-begin{display:none}
.stepped .step-fallback{display:none}
.stepped .fstep{display:none}
.stepped .fstep.is-active{display:block}
.stepped .step-progress{display:block}
.stepped .step-nav{display:flex}
.stepped .step-begin{display:inline-flex}
/* progress */
.step-progress{margin-bottom:var(--s4)}
.step-count{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.step-bar{height:3px;border-radius:2px;background:var(--hairline);overflow:hidden}
.step-bar i{display:block;height:100%;width:0;border-radius:2px;background:var(--accent);transition:width .45s var(--ease)}
/* the stepper stage — min-height keeps step-to-step height changes gentle */
.stepper{min-height:clamp(240px,32vh,320px);display:flex;flex-direction:column;justify-content:center}
.stepped .fstep{will-change:opacity,transform}
.stepped .fstep.is-active{opacity:0;transform:translateX(var(--enter,24px));transition:opacity .42s var(--ease),transform .42s var(--ease)}
.stepped .fstep.is-active.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.stepped .fstep.is-active{transition:none;transform:none}}
/* step content */
.step-q{font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,4vw,2.3rem);line-height:1.08;letter-spacing:-.02em;color:var(--ink);margin-bottom:var(--s3)}
.is-intro .form-head{margin-bottom:var(--s3)}
.step-disclaimer{font-size:1.05rem;line-height:1.6;color:var(--muted);max-width:54ch;margin-bottom:var(--s4)}
.step-hint{font-size:.9rem;color:var(--muted);margin:-8px 0 16px}
.fstep .opt{font-weight:400;font-size:.85rem;color:var(--muted);margin-left:1.1em}   /* ~3 char-spaces from the label */
.fstep input[type=text],.fstep input[type=email],.fstep input[type=url],.fstep textarea{font-size:1.05rem;padding:14px 16px}
.fstep textarea{min-height:150px}
.char-count{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.04em;color:var(--muted);text-align:right;margin-top:8px}
.char-count.near{color:var(--ink)}   /* monochrome: weight/tone, not hue */
/* nav */
.step-nav{margin-top:var(--s4);align-items:center;gap:14px}
.step-back{margin-right:auto;background:none;border:1px solid var(--hairline);color:var(--muted);
  font-family:inherit;font-size:.95rem;padding:11px 20px;border-radius:3px;cursor:pointer;transition:border-color .2s,color .2s}
.step-back:hover{border-color:var(--muted);color:var(--ink)}
.step-next,.step-send{min-width:118px}
.stepped .escape{margin-top:var(--s4)}
/* inline success + error (AJAX submit; page never navigates away) */
.form-success{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.form-success.in{opacity:1;transform:none}
.success-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s3)}
.success-msg{margin-bottom:0;max-width:24ch}
.form-error{margin-top:var(--s3);font-weight:600;color:var(--ink)}   /* monochrome: weight, not hue */
.field-error{margin-top:8px;font-size:.85rem;font-weight:600;color:var(--ink)}   /* inline field error */
@media (prefers-reduced-motion:reduce){.form-success{transition:none}}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--hairline);padding:28px 0;font-size:.85rem;color:var(--muted)}
.foot-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:var(--muted)}


/* ---- work page: ideas list ---- */
.ideas{padding:var(--section) 0}
.ideas-intro{font-family:'IBM Plex Mono',monospace;font-size:.95rem;line-height:1.6;color:var(--muted);letter-spacing:.02em;max-width:62ch;margin-bottom:var(--s5)}
.idea-group{margin-bottom:46px}
.idea-cat{font-family:var(--font-display);font-weight:600;font-size:1.15rem;letter-spacing:-.01em;color:var(--ink);margin-bottom:14px}
.idea-list{list-style:none}
.idea-list li{font-family:'IBM Plex Mono',monospace;font-size:.95rem;line-height:1.6;color:var(--muted);padding:11px 0;border-bottom:1px solid var(--hairline)}
.idea-list li:last-child{border-bottom:none}
.ideas-outro{font-family:'IBM Plex Mono',monospace;font-size:.95rem;color:var(--muted);margin-top:8px}
.ideas-outro a{color:var(--accent);text-decoration:none}
.ideas-outro a:hover{text-decoration:underline}

/* ---- chrome extra link (Work) ---- */
.chrome-links{display:flex;align-items:center;gap:22px}
.chrome-link{font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.chrome-link:hover{color:var(--ink)}

/* =========================================================
   MOTION — GSAP + ScrollTrigger + Lenis (motion.js).
   `.anim` is added to <html> from the <head> only when we'll animate
   (JS on, not reduced-motion). It gates the pre-reveal hidden states so
   there's no flash; GSAP drives the actual rise-and-settle. No-JS or
   reduced-motion → no `.anim`, so everything is simply visible.
   ========================================================= */
/* FILM — the 2D camera-pan composition. motion.js adds .film-live (desktop) or
   .mobile-motion (<768px degradation). No-JS / reduced-motion: neither class, so
   .film-plane / .scene fall back to normal stacked flow, fully visible.
   All five scenes live at once on .film-plane (a 2x3 grid of viewport-sized cells);
   one scrubbed "camera" translates the plane along an L-shaped path. motion.js sizes
   the plane and places each scene in px on refresh, so these rules only establish the
   layout MODE — the geometry is set in JS (kept resolution-safe on resize). */
.film-live .film{position:relative}
.film-live .film-viewport{position:relative;width:100vw;height:100vh;overflow:hidden}
.film-live .film-plane{position:absolute;top:0;left:0;will-change:transform}   /* width/height + transform set by motion.js */
.film-live .scene{position:absolute;display:flex;align-items:center;justify-content:center;backface-visibility:hidden}   /* left/top/width/height set by motion.js */
/* BREATHING ROOM: cap each scene's content width so it never fills the frame — it sits
   at <=78vw with generous side margin on every screen (the demos were already ~71vh tall,
   so this mainly reins in the wide hero line + the demo width on smaller laptops). */
.film-live .scene > .wrap{max-width:min(1080px,78vw);margin-left:auto;margin-right:auto}
/* the hero line is capped to 78vw like the rest; a smaller film-only font keeps it from
   wrapping too tall inside that width, so it sits at ~75% wide with room above/below */
/* hero + door = the film's biggest, most commanding display type. They wrap inside the
   78vw scene cap so they never overflow width; sized large but not to the point of clipping. */
/* the hero identity line spans wider than the other scenes (comfortable ~5vw margins,
   not edge-to-edge) so it fills the width in ~2 confident lines instead of skinny stacks */
/* identity line matches the door line exactly — same commanding size, same 78vw fill */
.film-live .s-hero > .wrap{max-width:min(1080px,78vw);padding-left:24px;padding-right:24px}
.film-live .beat1-line{font-size:clamp(3.2rem,11.5vw,11rem)}

/* ---- persistent chrome (wordmark + start) ---- */
.chrome{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;pointer-events:none;
  background:rgba(28,25,21,.72);   /* --ground #1C1915 @ 72% */
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);
}
.anim .chrome{opacity:0;transform:translateY(-8px)}
.chrome.show{opacity:1;transform:none;transition:opacity .6s var(--ease), transform .6s var(--ease)}
.chrome a{pointer-events:auto;text-decoration:none}
.chrome-mark{font-family:'Manrope',sans-serif;font-weight:600;font-size:1.05rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.chrome-mark span{color:inherit;font-weight:inherit}
.chrome-start{font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ---- generic beat (override base <section> padding/border) ---- */
.beat{position:relative;padding:0;border-bottom:none}

/* ---- BEAT 1 — identity ---- */
.beat1{min-height:100vh;display:flex;align-items:center}
/* Beat 1 breaks out of the 1080px .wrap so the line nearly fills the viewport */
.beat1-in{width:100%;max-width:none;margin:0;padding:0 clamp(28px,5vw,80px);position:relative;z-index:1}
/* WebGL hero sits behind the identity line (Beat 1 only) */
#hero-canvas{position:absolute;inset:0;z-index:0;overflow:hidden}
#hero-canvas canvas{display:block;width:100%;height:100%}
.beat1-line{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(3.2rem,11.5vw,11rem);line-height:.92;letter-spacing:-.02em;   /* matches .door-line */
  max-width:none;color:var(--ink);
}
.scroll-tick{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);transition:opacity .5s var(--ease)}

/* ---- lanes (the three demo scenes: finance / creator / recipe) ---- */
.s-lane{min-height:100vh;display:flex;align-items:center;padding:var(--section) 0}   /* normal-flow fallback; .film-live makes them absolute layers */
/* demos fill more of their pane — a wider stage, leaving only a modest black margin
   (overrides .film-live .scene > .wrap's 78vw framing, which is for the text scenes) */
.s-lane > .wrap{max-width:1400px; width:100%}   /* fill the pane even when demo content is narrow */
.film-live .s-lane > .wrap{max-width:min(1400px,94vw)}
.lane-canvas{position:relative;background:var(--card);border:1px solid var(--hairline);border-radius:16px;min-height:min(58vh,520px);display:flex;align-items:center;justify-content:center;box-shadow:0 40px 90px -20px rgba(0,0,0,.5)}
.scroll-tick span{display:block;width:1px;height:46px;background:var(--hairline)}
.scroll-tick.gone{opacity:0}
.beat1-end{position:absolute;bottom:0;height:1px;width:1px}

/* ---- demo stages (homepage trio 01-03 + work-page gallery 04-08) ----
   Each stage is a full-viewport performance surface: title, mono premise, a
   [TIMELINE — storyboard pending] canvas, and a reserved replay control.
   The scripted GSAP timelines get built per-demo in later storyboard sessions. */
.stage{min-height:100vh;display:flex;align-items:center;padding:70px 0}
.stage-idx{font-family:'IBM Plex Mono',monospace;font-size:.8rem;letter-spacing:.12em;color:var(--muted)}
.stage-title{font-family:var(--font-display);font-weight:700;font-size:clamp(1.8rem,4vw,3rem);line-height:1.02;letter-spacing:-.02em;color:var(--ink);margin:12px 0}
.stage-premise{font-family:'IBM Plex Mono',monospace;font-size:.95rem;line-height:1.55;letter-spacing:.02em;color:var(--muted);max-width:62ch}
.stage-canvas{position:relative;margin-top:30px;min-height:54vh;border:1px dashed var(--hairline);border-radius:12px;background:var(--card);display:flex;align-items:center;justify-content:center}
.stage-tl{font-family:'IBM Plex Mono',monospace;font-size:.85rem;letter-spacing:.1em;color:var(--muted)}
/* replay-control position reserved (bottom-right of the canvas) */
.stage-replay{position:absolute;right:16px;bottom:16px;font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--hairline);border-radius:20px;padding:6px 13px;opacity:.55}

/* ---- demo 07: The Watcher (GSAP timeline in watcher.js) ---- */
.watcher{overflow:hidden}
.watch{position:absolute;inset:0;padding:clamp(16px,2.5vw,30px);display:flex;flex-direction:column;font-family:'IBM Plex Mono',monospace}
.watch-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.watch-rule{border:1px solid var(--hairline);border-radius:8px;padding:12px 15px;font-size:.78rem;line-height:1.7;color:var(--muted)}
.watch-day{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);flex:none}
.watch-area{position:relative;flex:1;margin-top:20px}
.watch-feed{display:flex;flex-direction:column;gap:7px}
.watch-ev{display:flex;align-items:center;gap:12px;font-size:.82rem}
.ev-day{width:3.4ch;color:var(--muted);flex:none}
.ev-amt{color:var(--ink);flex:none}
.ev-check{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--muted);position:relative;flex:none}
.ev-check.done::after{content:'';position:absolute;left:4.5px;top:1px;width:3.5px;height:7px;border:solid var(--muted);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.ev-check.hit{border-color:var(--accent)}
.ev-check.hit.done::after{border-color:var(--accent)}
.ev-cap{color:var(--muted);font-size:.78rem}
.watch-note{position:absolute;left:50%;top:0;transform:translateX(-50%);width:min(94%,440px);display:flex;gap:10px;align-items:flex-start;background:var(--card);border:1px solid var(--hairline);border-left:3px solid var(--accent);border-radius:8px;padding:13px 15px}
.watch-note-check{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--accent);position:relative;flex:none;margin-top:2px}
.watch-note-check::after{content:'';position:absolute;left:4.5px;top:1px;width:3.5px;height:7px;border:solid var(--accent);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.watch-note-text{font-size:.82rem;line-height:1.5;color:var(--ink)}
/* the reserved replay pill becomes a real button on demo 07 */
button.stage-replay{background:transparent;cursor:pointer;opacity:.7}
button.stage-replay:hover{opacity:1;color:var(--ink)}
@media (max-width:560px){ .watch-rule p{white-space:normal} .ev-cap{display:none} }

/* ---- BEAT 3 — process steps (plain text; labels hang off the spine) ---- */
.steps-beat{padding:var(--section) 0}
.steps-line{font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,3.6vw,2.8rem);line-height:1.18;letter-spacing:-.015em;max-width:20ch;margin-bottom:var(--s5)}
.steps{list-style:none;border-top:1px solid var(--hairline)}
.step{display:flex;align-items:baseline;gap:clamp(16px,3vw,40px);padding:var(--s3) 0;border-bottom:1px solid var(--hairline)}
.step-n{font-family:'IBM Plex Mono',monospace;font-size:.9rem;color:var(--muted);min-width:3ch}
.step-t{font-family:var(--font-display);font-weight:600;font-size:clamp(1.3rem,2.6vw,2rem);letter-spacing:-.01em;color:var(--ink)}
/* the steps hang off the spine: left-align this section to the spine gutter */
.steps-beat .wrap{margin:0;max-width:none;padding:0 24px 0 calc(var(--spine-x) + 30px)}
.steps{max-width:720px}

/* ---- BEAT 4 — form ---- */
.form-beat{padding:var(--section) 0;scroll-margin-top:80px}
.form-mark{font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s2)}
.form-head{font-family:var(--font-display);font-weight:700;font-size:clamp(1.7rem,4vw,2.4rem);line-height:1.02;letter-spacing:-.02em;margin-bottom:var(--s4)}
/* offer statement — the page's key pitch, above the form panel with its own space.
   Emphasized lead (bright display type) + supporting sub beneath. */
.offer-block{max-width:760px;margin:0 auto var(--s5)}
/* three tiers with breathing room: strong headline / medium list / small supporting note */
.offer-lead{font-family:var(--font-display);font-weight:600;font-size:clamp(1.7rem,4.2vw,2.8rem);line-height:1.08;letter-spacing:-.02em;color:var(--ink);margin-bottom:var(--s3)}
.offer-list{font-size:clamp(1.15rem,2.2vw,1.55rem);line-height:1.4;font-weight:500;letter-spacing:-.01em;color:var(--ink);margin-bottom:var(--s3);max-width:40ch}
/* supporting note — ONE line, never wrapped (font scales down on narrow screens to fit) */
.offer-note{font-size:clamp(.66rem,2.7vw,1.1rem);line-height:1.5;color:var(--muted);white-space:nowrap}

/* ---- steady spine — the one signature: a plumb line that extends at a
   constant rate with scroll, muted, reaching full-strength bone at the form.
   motion.js scrubs .spine-fill scaleY 0->1; reduced-motion renders it whole. */
.spine{position:fixed;left:var(--spine-x);top:0;height:100vh;width:1.5px;z-index:5;pointer-events:none}
.spine-fill{width:100%;height:100%;transform-origin:top center;
  background:linear-gradient(to bottom, var(--muted) 0%, var(--muted) 80%, var(--ink) 100%)}
.anim .spine-fill{transform:scaleY(0)}   /* GSAP grows it; whole by default (no-JS/reduced) */

/* ---- responsive ---- */
@media (max-width:860px){
  .choices{grid-template-columns:1fr 1fr}
  .stage{min-height:auto;padding:64px 0}
  .stage-canvas{min-height:46vh}
  .nav-links{gap:16px}
}
@media (max-width:560px){
  .choices{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .beat1-in{padding:0 22px}
  /* "Software that works"=10.13em, "…works how"=12.39em → 11em forces the break
     after "works"; 7.6vw keeps 11em inside a 320px viewport. */
  .beat1-line{font-size:clamp(3.2rem,11.5vw,11rem);max-width:none;text-wrap:normal;line-height:1.03}   /* matches .door-line */
}

/* =========================================================
   SCENE 2 DEMO — finance dashboard (GREEN color world).
   Demos deliberately break the site's monochrome rule (see CLAUDE.md): each demo
   is its own single-color world. Finance = a full green range. All green tokens are
   SCOPED to the demo root so they never leak into the stone site. Animated by
   finance-demo.js; the completed dashboard also renders statically (no-JS / reduced).
   ========================================================= */
.lane-canvas[data-demo="finance"]{
  --g-page:#07211A; --g-dash:#0C3124; --g-tile:#0F3E2D; --g-tile-hi:#155A3D;
  --g-track:#0A2E22; --g-fill:#37DD85; --g-fill-2:#63EBA4; --g-hi:#C9F6DE;
  --g-text:#E9FBF0; --g-text-2:#8FC9AD; --g-num:#57E79A; --g-border:#1E5238;
  /* deep-green FIELD. Capped to a share of viewport HEIGHT so heading + demo always
     fit the cell; the card + its internals below scale with vh to match. */
  background:radial-gradient(120% 140% at 50% 0%, #0d3527, var(--g-page));
  border:1px solid var(--g-border); box-shadow:none; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(10px,1.6vh,20px); height:min(88vh,880px);
}
/* intro question — alone on the field for the first ~2s */
.fin-intro{position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; padding:0 8%; pointer-events:none}
/* opening question: big; the 2-line height is RESERVED (min-height) so the second line
   appears in place without the block re-centering/jumping; no text-wrap:balance (it would
   re-flow the break on every keystroke) */
.fin-intro-q{font-family:'Manrope',sans-serif; font-weight:800; font-size:clamp(2.6rem,8vh,5.4rem); line-height:1.1; letter-spacing:-.02em; color:var(--g-text); text-align:center; max-width:13ch; margin:0 auto; display:block; min-height:2.28em}

/* dashboard CARD — fills the field; a flex column whose internals are vh-scaled so the
   whole card fits without clipping on short viewports */
.fin{position:relative; width:100%; height:100%; overflow:hidden; display:flex; flex-direction:column;
  background:linear-gradient(180deg,#0e3a2b,var(--g-dash));
  border:1px solid var(--g-border); border-radius:clamp(14px,2vh,22px);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04);
  padding:clamp(12px,2vh,24px)}
.fin .fin-head{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:clamp(6px,1.2vh,12px)}
.fin .fin-title{font-family:'Manrope',sans-serif; font-weight:800; font-size:clamp(.9rem,1.9vh,1.1rem); color:var(--g-text); letter-spacing:-.01em}
.fin .fin-tag{font-family:'IBM Plex Mono',monospace; font-size:clamp(.5rem,1vh,.58rem); letter-spacing:.14em; text-transform:uppercase; color:var(--g-text-2); border:1px solid var(--g-border); border-radius:20px; padding:5px 10px; white-space:nowrap}
.fin .fin-ledger{display:flex; gap:16px; flex-wrap:wrap; font-family:'IBM Plex Mono',monospace; font-size:clamp(.52rem,1.05vh,.62rem); color:var(--g-text-2); border-top:1px solid var(--g-border); border-bottom:1px solid var(--g-border); padding:clamp(5px,.9vh,8px) 0; margin-bottom:clamp(8px,1.5vh,16px)}
.fin .fin-ledger b{color:var(--g-fill); font-weight:600}
.fin .fin-grid{flex:1 1 auto; min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:clamp(8px,1.4vh,14px)}
/* chunky, physical tiles — generous radius, mixed lighter/darker green, soft depth */
.fin .tile{background:linear-gradient(180deg,var(--g-tile-hi),var(--g-tile)); border:1px solid var(--g-border); border-radius:clamp(12px,1.8vh,18px); padding:clamp(10px,1.7vh,17px); display:flex; flex-direction:column; justify-content:center; gap:clamp(6px,1.1vh,10px); box-shadow:0 12px 26px -16px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05)}
.fin .tile-lab{font-family:'IBM Plex Mono',monospace; font-size:clamp(.52rem,1vh,.6rem); letter-spacing:.16em; text-transform:uppercase; color:var(--g-text-2)}
.fin .tile-viz{display:flex; align-items:center; gap:14px}
/* confident KPI number — vivid green, still smaller than the hero sentence */
.fin .kpi{font-family:'Manrope',sans-serif; font-weight:800; font-size:clamp(.82rem,1.7vh,1.05rem); color:var(--g-num); flex:none; min-width:3.4ch; font-variant-numeric:tabular-nums}
.fin .viz{flex:1; position:relative; padding-top:13px}
.fin .track{position:relative; height:clamp(10px,1.6vh,15px); background:var(--g-track); border-radius:999px; box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.fin .fill{position:absolute; left:0; top:0; height:100%; border-radius:999px; transform-origin:left center; background:linear-gradient(180deg,var(--g-fill-2),var(--g-fill)); box-shadow:0 0 12px -2px rgba(55,221,133,.5)}
.fin .marker{position:absolute; top:-4px; height:23px; width:2px; background:var(--g-hi); border-radius:2px}
.fin .marker::after{content:attr(data-l); position:absolute; top:-13px; left:50%; transform:translateX(-50%); font-family:'IBM Plex Mono',monospace; font-size:.56rem; color:var(--g-hi); white-space:nowrap}
.fin .runway{display:flex; gap:5px; height:clamp(16px,2.4vh,24px); align-items:center}
.fin .mo{position:relative; flex:1; height:clamp(13px,2vh,19px); border-radius:6px; background:var(--g-track); box-shadow:inset 0 1px 2px rgba(0,0,0,.35); overflow:hidden}
.fin .mo i{position:absolute; inset:0; border-radius:inherit; transform-origin:left center; background:linear-gradient(180deg,var(--g-fill-2),var(--g-fill))}
/* plain-language sentence — the hero, larger than the KPI number (both vh-scaled) */
.fin .sentence{font-family:'Manrope',sans-serif; font-size:clamp(.86rem,1.95vh,1.2rem); line-height:1.32; color:var(--g-text); font-weight:500; letter-spacing:-.005em}
.fin .sentence b{font-weight:800; color:var(--g-text)}
.fin .sentence .ref{color:var(--g-text-2); font-weight:500}
.fin .fin-foot{display:flex; justify-content:space-between; align-items:center; margin-top:clamp(8px,1.4vh,18px); position:relative; z-index:5}
.fin .fin-grid{position:relative; z-index:1}   /* keep tiles below the replay control */
.fin .see-live{font-family:'IBM Plex Mono',monospace; font-size:clamp(.66rem,1.3vh,.74rem); letter-spacing:.03em; color:var(--g-fill); text-decoration:none; border-bottom:1px solid var(--g-fill); padding-bottom:2px}
.fin .see-live:hover{color:var(--g-fill-2)}
.fin .replay{font-family:'IBM Plex Mono',monospace; font-size:clamp(.54rem,1.1vh,.6rem); letter-spacing:.1em; text-transform:uppercase; color:var(--g-text-2); background:transparent; border:1px solid var(--g-border); border-radius:20px; padding:6px 12px; cursor:pointer}
.fin .replay:hover{color:var(--g-text); border-color:var(--g-text-2)}
.fin .replay:focus-visible{outline:3px solid var(--g-fill); outline-offset:2px}
/* mobile (flat, normal-flow scrolling): let the demo size to content, stack tiles */
@media (max-width:767px){
  .lane-canvas[data-demo="finance"]{height:auto; min-height:0}
  .fin{height:auto; overflow:visible}
}
@media (max-width:600px){
  .fin .fin-grid{grid-template-columns:1fr}
  .fin .sentence{font-size:1.06rem}
}

/* =========================================================
   MOBILE MOTION — purpose-built full-screen film. MANDATORY snap: one scene per swipe.
   Native scroll + CSS scroll-snap = compositor 60fps (no Lenis/rAF on mobile; see motion.js).
   .mobile-motion is added by motion.js only when animating (not reduced/no-JS), so those paths
   keep normal, fully-visible flow. UNIFIED STAGE: every scene is one screen with the SAME
   margins, and its content fills a consistent central frame — text scenes and full-bleed demos
   occupy a similar proportion so swiping between them feels even.
   ========================================================= */
@media (max-width:767px){
  html.mobile-motion{ scroll-snap-type:y mandatory }

  /* the stage — identical for every snap scene */
  .mobile-motion .s-hero,
  .mobile-motion .s-finance,
  .mobile-motion .s-creator,
  .mobile-motion .s-recipe{
    height:100svh; min-height:100svh; scroll-snap-align:start; scroll-snap-stop:always;
    display:flex; flex-direction:column; justify-content:center; align-items:stretch;
    padding:78px 18px 26px; overflow:hidden;
  }
  /* demos get a taller stage (tighter nav clearance) so the rich dashboards fit un-clipped */
  .mobile-motion .s-finance, .mobile-motion .s-creator, .mobile-motion .s-recipe{ padding-top:62px; padding-bottom:16px }
  /* the intake form is the last stop in the swipe sequence (hero -> finance -> creator -> recipe -> form) */
  .mobile-motion .form-beat{ scroll-snap-align:start; scroll-snap-stop:always }

  /* content frame fills the stage — ONE consistent margin (the stage's), no extra .wrap gutter */
  .mobile-motion .scene > .wrap{ width:100%; max-width:100%; margin:0; padding-left:0; padding-right:0; flex:1 1 auto; min-height:0;
    display:flex; flex-direction:column; justify-content:center;
    opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease) }
  .mobile-motion .scene.in > .wrap{ opacity:1; transform:none }

  /* drop desktop-only hero decor */
  .mobile-motion .scroll-tick{ display:none }
  .mobile-motion #hero-canvas{ display:none }

  /* the HERO fills the stage (balanced centering, not floating small) — big display type,
     capped so long words never overflow the width */
  .mobile-motion .s-hero .beat1-line{ font-size:clamp(3.4rem,20vw,6rem); line-height:1.02; letter-spacing:-.03em; max-width:none }

  /* DEMO scenes: demo centred so margins match the hero */
  .mobile-motion .s-finance > .wrap,
  .mobile-motion .s-creator > .wrap,
  .mobile-motion .s-recipe > .wrap{ justify-content:center }
  .mobile-motion .lane-canvas{ width:100%; max-width:100%; flex:1 1 auto; min-height:0 }
}
@media (prefers-reduced-motion:reduce){ .mobile-motion .scene > .wrap{ transition:none } }

/* ---- mobile-motion DEMO full-bleed layouts (override flat-flow stacking) ---- */
@media (max-width:767px){
  /* FINANCE — full-width, bounded height (centred), compacted to fit without clipping:
     2x2 tiles, ledger strip hidden, tighter tiles. */
  .mobile-motion .lane-canvas[data-demo="finance"]{ height:min(86svh,720px); flex:0 0 auto; overflow:hidden; padding:14px }
  .mobile-motion .lane-canvas[data-demo="finance"] .fin{ height:100%; overflow:hidden }
  .mobile-motion .lane-canvas[data-demo="finance"] .fin-grid{ grid-template-columns:1fr 1fr; gap:10px }
  .mobile-motion .lane-canvas[data-demo="finance"] .fin-ledger{ display:none }
  .mobile-motion .lane-canvas[data-demo="finance"] .fin .tile{ padding:12px }

  /* CREATOR — the live-performance dashboard fills the full-width field (like finance). */
  .mobile-motion .lane-canvas[data-demo="creator"]{ height:min(90svh,800px); flex:0 0 auto; overflow:hidden; padding:12px }
  .mobile-motion .lane-canvas[data-demo="creator"] .crd{ height:100%; overflow:hidden; width:100%; max-width:100% }

  /* RECIPE — recipes stacked above, consolidated list below, filling the full-width field. */
  .mobile-motion .lane-canvas[data-demo="recipe"]{ height:min(90svh,800px); flex:0 0 auto; overflow:hidden; padding:12px }
  .mobile-motion .lane-canvas[data-demo="recipe"] .rec{ height:100%; overflow:hidden; width:100%; max-width:100% }
  .mobile-motion .lane-canvas[data-demo="recipe"] .rec-body{ grid-template-columns:1fr; grid-template-rows:auto 1fr; gap:9px }
}



/* =========================================================
   SCENE 3 DEMO — creator LIVE PERFORMANCE dashboard (LIGHT-AIRY VIOLET color world).
   A media-kit analytics composition: varied cards (hero followers, engagement, a views
   sparkline, small saves/collab, a wide audience panel with a gender donut + age bars +
   locations/follows) compose ONE AT A TIME, then the payoff sentence writes itself as the
   hero of the final frame. Animated by creator-demo.js; the completed dashboard also renders
   statically (no-JS / reduced). Uses site fonts (Satoshi/Poppins/Plex Mono).
   ========================================================= */
.lane-canvas[data-demo="creator"]{
  --c-page:#F1EFFA; --c-card:#FFFFFF; --c-col:#F5F3FD; --c-line:#E7E3F5;
  --c-ink:#2A2542; --c-muted:#6C6989; --c-accent:#6C5CE7; --c-accent-2:#A79CF5;
  --c-accent-ink:#5241C9; --c-wash:#EEEBFB; --c-good:#2FA36B;
  --disp:var(--font-display); --body:'Poppins',sans-serif; --lab:'IBM Plex Mono',monospace;
  background:var(--c-page); border:1px solid var(--c-line); overflow:hidden;
  display:flex; align-items:center; justify-content:center; border-radius:16px;
  padding:clamp(10px,1.4vh,18px); height:min(88vh,900px);
}
/* intro question — alone on the field first; breaks "Can I prove I'm" / "worth it?"
   (max-width forces the break after "I'm"; the nbsp in QTEXT keeps "worth it?" whole) */
.crd-intro{position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; padding:0 8%; pointer-events:none}
.crd-intro-q{font-family:var(--disp); font-weight:800; font-size:clamp(2.6rem,8vh,5.6rem); line-height:1.1; letter-spacing:-.02em; color:var(--c-ink); text-align:center; max-width:11ch; margin:0 auto; display:block; min-height:2.28em}
/* the dashboard card — fills the field; flex column */
.crd{position:relative; width:100%; height:100%; overflow:hidden;
  display:flex; flex-direction:column; gap:clamp(8px,1.4vh,14px);
  background:var(--c-card); border:1px solid var(--c-line); border-radius:clamp(14px,2vh,22px);
  box-shadow:0 30px 70px -30px rgba(60,48,120,.35); padding:clamp(13px,2.1vh,22px)}
.crd-head{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex:none}
.crd-id{display:flex; flex-direction:column; gap:2px; min-width:0}
.crd-name{font-family:var(--disp); font-weight:700; font-size:clamp(1rem,2.1vh,1.3rem); color:var(--c-ink); letter-spacing:-.01em}
.crd-niche{font-family:var(--lab); font-size:clamp(.55rem,1.05vh,.68rem); letter-spacing:.06em; text-transform:uppercase; color:var(--c-muted)}
.crd-tag{font-family:var(--lab); font-size:clamp(.5rem,1vh,.62rem); letter-spacing:.14em; text-transform:uppercase; color:var(--c-accent-ink); background:var(--c-wash); border-radius:20px; padding:5px 11px; white-space:nowrap; flex:none}

/* THE DASHBOARD GRID — varied card sizes (a real analytics-dashboard composition) */
.crd-grid{flex:1 1 auto; min-height:0; display:grid; grid-template-columns:repeat(4,1fr);
  grid-template-areas:
    "foll  foll  eng    eng"
    "views views saves  collab"
    "aud   aud   aud    aud";
  gap:clamp(7px,1.2vh,12px)}
.crd-card{background:var(--c-col); border:1px solid var(--c-line); border-radius:clamp(11px,1.5vh,16px);
  padding:clamp(9px,1.4vh,15px) clamp(11px,1.5vh,17px); display:flex; flex-direction:column; justify-content:center; gap:clamp(3px,.7vh,7px);
  box-shadow:0 8px 20px -14px rgba(60,48,120,.28); min-width:0; overflow:hidden}
.crd-foll{grid-area:foll; justify-content:center; background:linear-gradient(160deg,var(--c-wash),var(--c-col)); border-color:#DAD3F3}
.crd-eng{grid-area:eng} .crd-views{grid-area:views} .crd-saves{grid-area:saves}
.crd-collab{grid-area:collab} .crd-aud{grid-area:aud}

.crd-lab{font-family:var(--lab); font-size:clamp(.5rem,1vh,.62rem); letter-spacing:.1em; text-transform:uppercase; color:var(--c-muted)}
.crd-sublab{font-family:var(--lab); font-size:clamp(.47rem,.9vh,.56rem); letter-spacing:.08em; text-transform:uppercase; color:var(--c-muted)}
.crd-sub{font-family:var(--lab); font-size:clamp(.52rem,1vh,.64rem); color:var(--c-muted); letter-spacing:.01em}
.crd-num{font-family:var(--disp); font-weight:800; color:var(--c-accent-ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em; line-height:1; font-size:clamp(1.05rem,2.2vh,1.5rem)}
.crd-bignum .crd-num{font-size:clamp(1.35rem,3vh,2.1rem)}
.crd-foll .crd-bignum .crd-num{font-size:clamp(1.5rem,3.4vh,2.3rem)}
.crd-inline{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.crd-trend{font-family:var(--lab); font-size:clamp(.52rem,1vh,.64rem); font-weight:500; letter-spacing:.02em}
.crd-up{color:var(--c-good)}

/* sparklines */
.crd-spark{display:flex; align-items:flex-end; gap:3px; height:clamp(22px,4.2vh,44px)}
.crd-spark i{flex:1; background:var(--c-accent-2); border-radius:2px 2px 0 0; transform-origin:bottom}
.crd-spark-grow i:last-child{background:var(--c-accent)}
.crd-spark-views i.hi{background:var(--c-accent)}
.crd-viewsbody{display:flex; align-items:flex-end; gap:12px; flex:1; min-height:0}
.crd-viewsbody .crd-spark{flex:1}
.crd-viewsmeta{display:flex; gap:14px; flex:none}
.crd-viewsmeta > div{display:flex; flex-direction:column; gap:1px}
.crd-viewsmeta b{font-family:var(--disp); font-weight:800; font-size:clamp(1rem,2.1vh,1.5rem); color:var(--c-accent-ink); line-height:1}

/* engagement breakdown chips */
.crd-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:2px}
.crd-chip{font-family:var(--lab); font-size:clamp(.5rem,.96vh,.6rem); color:var(--c-muted); background:var(--c-wash); border-radius:20px; padding:4px 9px; white-space:nowrap}
.crd-chip b{color:var(--c-accent-ink); font-weight:600}

/* collab / saves */
.crd-collabbrand{font-family:var(--disp); font-weight:700; font-size:clamp(.85rem,1.7vh,1.05rem); color:var(--c-ink); line-height:1.1}
.crd-soldout{font-family:var(--lab); font-size:clamp(.5rem,.96vh,.6rem); letter-spacing:.04em; color:var(--c-good); text-transform:uppercase}

/* AUDIENCE panel — gender donut + age bars + locations/follows */
.crd-audgrid{display:grid; grid-template-columns:auto 1.1fr 1.2fr; gap:clamp(12px,2.2vh,28px); align-items:center; flex:1; min-height:0}
.crd-audgender{display:flex; flex-direction:column; align-items:center; gap:7px}
.crd-donut{width:clamp(52px,9.5vh,86px); aspect-ratio:1; border-radius:50%;
  background:conic-gradient(var(--c-accent) 0 var(--w,86%), var(--c-accent-2) var(--w,86%) 98%, #CFC7EC 98% 100%);
  -webkit-mask:radial-gradient(closest-side, transparent 57%, #000 59%); mask:radial-gradient(closest-side, transparent 57%, #000 59%)}
.crd-legend{display:flex; flex-direction:column; gap:2px; font-family:var(--lab); font-size:clamp(.5rem,.94vh,.58rem); color:var(--c-muted)}
.crd-legend span{display:flex; align-items:center; gap:5px}
.crd-legend i{width:7px; height:7px; border-radius:2px; flex:none}
.crd-legend .d1{background:var(--c-accent)} .crd-legend .d2{background:var(--c-accent-2)} .crd-legend .d3{background:#CFC7EC}
.crd-bars{display:flex; flex-direction:column; gap:clamp(3px,.7vh,6px)}
.crd-bar{display:grid; grid-template-columns:3.4em 1fr auto; align-items:center; gap:8px; font-family:var(--lab); font-size:clamp(.5rem,.94vh,.58rem); color:var(--c-muted)}
.crd-bar b{color:var(--c-accent-ink); font-weight:600; justify-self:end}
.crd-bar .crd-track{height:6px; border-radius:999px; background:var(--c-wash); overflow:hidden}
.crd-bar .crd-track i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--c-accent-2),var(--c-accent)); transform-origin:left}
.crd-locs{display:flex; flex-direction:column; gap:1px; font-family:var(--lab); font-size:clamp(.5rem,.94vh,.58rem); color:var(--c-muted); margin:2px 0 5px}
.crd-locs b{color:var(--c-ink); font-weight:600}
.crd-follows{display:flex; flex-wrap:wrap; gap:4px; margin-top:2px}
.crd-follows span{font-family:var(--lab); font-size:clamp(.46rem,.9vh,.55rem); color:var(--c-accent-ink); background:var(--c-wash); border-radius:20px; padding:3px 8px}

/* THE PAYOFF — the dashboard's headline conclusion. A CONTAINED summary card (lavender wash,
   accent edge), sized as a headline (not oversized), anchored below the grid — not floating. */
.crd-tell{flex:none; display:flex; flex-direction:column; gap:clamp(4px,.8vh,8px);
  background:linear-gradient(120deg,var(--c-wash),#E6E0FB); border:1px solid var(--c-accent-2); border-left:5px solid var(--c-accent);
  border-radius:clamp(11px,1.6vh,16px); padding:clamp(12px,2vh,20px) clamp(15px,2.2vh,24px)}
.crd-tell-lab{font-family:var(--lab); font-size:clamp(.5rem,1vh,.62rem); letter-spacing:.14em; text-transform:uppercase; color:var(--c-accent-ink)}
.crd-tell-txt{font-family:var(--disp); font-weight:700; font-size:clamp(1.3rem,2.9vh,2rem); line-height:1.22; letter-spacing:-.02em; color:var(--c-ink); margin:0}

/* replay — consistent placement (bottom-left), always visible above the dashboard */
.crd-foot{display:flex; justify-content:flex-start; align-items:center; flex:none; position:relative; z-index:5}
.crd-replay{font-family:var(--lab); font-size:clamp(.54rem,1.1vh,.62rem); letter-spacing:.1em; text-transform:uppercase; color:var(--c-muted); background:transparent; border:1px solid var(--c-line); border-radius:20px; padding:6px 12px; cursor:pointer}
.crd-replay:hover{color:var(--c-ink); border-color:var(--c-accent-2)}
.crd-replay:focus-visible{outline:3px solid var(--c-accent); outline-offset:2px}

/* mobile (both live mobile-motion and flat reduced/no-JS): reflow the 4-col grid to 2-col,
   tighten cards, compact the audience, and scale the payoff so the whole kit fits un-clipped */
@media (max-width:767px){
  .lane-canvas[data-demo="creator"]{height:auto; min-height:0; padding:12px; overflow:hidden}
  .crd{height:auto; overflow:hidden; width:100%; max-width:100%; gap:7px; padding:12px}
  .crd-grid{grid-template-columns:1fr 1fr; gap:7px;
    grid-template-areas:
      "foll  eng"
      "views views"
      "saves collab"
      "aud   aud"}
  .crd-card{padding:9px 11px; gap:3px}
  .crd-foll .crd-bignum .crd-num{font-size:clamp(1.25rem,5vw,1.7rem)}
  .crd-bignum .crd-num{font-size:clamp(1.1rem,4.6vw,1.5rem)}
  .crd-chip{padding:3px 8px; font-size:.5rem}
  /* audience: donut+legend beside the age bars; locations/follows span full width, compact */
  .crd-audgrid{grid-template-columns:auto 1fr; gap:7px 14px; align-items:center}
  .crd-audgrid > .crd-audcol:last-child{grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 12px}
  .crd-audgender{flex-direction:row; gap:9px; align-items:center; justify-content:flex-start}
  .crd-donut{width:46px}
  .crd-locs{flex-direction:row; flex-wrap:wrap; gap:2px 10px; margin:0}
  .crd-follows{gap:3px}
  .crd-tell{padding:12px 14px}
  .crd-tell-txt{font-size:clamp(1.2rem,5vw,1.6rem); line-height:1.18}
  .crd-tell,.crd-sub,.crd-name{overflow-wrap:anywhere}
}

/* =========================================================
   SCENE 4 DEMO — recipe -> consolidated shopping list (BUTTER-YELLOW color world).
   Three recipes' ingredients add up into ONE shopping list with combined amounts (the
   payoff: it does the math across recipes). Cards + list compose ONE AT A TIME (mirrors the
   other demos). Animated by recipe-demo.js; the completed list also renders statically.
   Its own warm butter-yellow monochromatic range (distinct from finance green / creator lavender).
   ========================================================= */
.lane-canvas[data-demo="recipe"]{
  --y-page:#F4E2A0; --y-card:#FFFDF6; --y-col:#FBF1CC; --y-line:#E9D791;
  --y-ink:#463713; --y-muted:#836C2C; --y-accent:#E0A521; --y-accent-2:#F3CB55;
  --y-accent-ink:#9A6A10; --y-wash:#FBEFC2;
  --disp:var(--font-display); --body:'Poppins',sans-serif; --lab:'IBM Plex Mono',monospace;
  background:radial-gradient(130% 150% at 50% 0%, #F8EBBA, var(--y-page));
  border:1px solid var(--y-line); overflow:hidden;
  display:flex; align-items:center; justify-content:center; border-radius:16px;
  padding:clamp(10px,1.4vh,18px); height:min(88vh,900px);
}
.rec-intro{position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; padding:0 8%; pointer-events:none}
.rec-intro-q{font-family:var(--disp); font-weight:800; font-size:clamp(2.6rem,8vh,5.6rem); line-height:1.1; letter-spacing:-.02em; color:var(--y-ink); text-align:center; max-width:12ch; margin:0 auto; display:block; min-height:2.28em}
.rec{position:relative; width:100%; height:100%; overflow:hidden;
  display:flex; flex-direction:column; gap:clamp(8px,1.4vh,14px);
  background:var(--y-card); border:1px solid var(--y-line); border-radius:clamp(14px,2vh,22px);
  box-shadow:0 30px 70px -30px rgba(90,66,10,.4); padding:clamp(13px,2.1vh,22px)}
.rec-head{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex:none}
.rec-title{font-family:var(--disp); font-weight:700; font-size:clamp(1rem,2.1vh,1.3rem); color:var(--y-ink); letter-spacing:-.01em}
.rec-tag{font-family:var(--lab); font-size:clamp(.5rem,1vh,.62rem); letter-spacing:.14em; text-transform:uppercase; color:var(--y-accent-ink); background:var(--y-wash); border-radius:20px; padding:5px 11px; white-space:nowrap; flex:none}
/* body: the recipes (input, left) feed the consolidated list (payoff, right) */
.rec-body{flex:1 1 auto; min-height:0; display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1fr); gap:clamp(10px,1.8vh,22px); align-items:stretch}
.rec-recipes{display:flex; flex-direction:column; gap:clamp(7px,1.2vh,12px); min-height:0}
.rec-recipe{background:var(--y-col); border:1px solid var(--y-line); border-radius:clamp(10px,1.4vh,14px); padding:clamp(8px,1.3vh,13px) clamp(10px,1.4vh,15px); flex:1 1 0; min-height:0; display:flex; flex-direction:column; justify-content:center; gap:clamp(4px,.9vh,8px)}
.rec-namerow{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.rec-name{font-family:var(--disp); font-weight:700; font-size:clamp(.85rem,1.7vh,1.05rem); color:var(--y-ink); line-height:1.1}
.rec-serves{font-family:var(--lab); font-size:clamp(.48rem,.92vh,.58rem); letter-spacing:.06em; text-transform:uppercase; color:var(--y-muted); flex:none; white-space:nowrap}
.rec-ings{list-style:none; display:flex; flex-wrap:wrap; gap:3px 6px; margin:0; padding:0}
.rec-ings li{font-family:var(--lab); font-size:clamp(.5rem,1vh,.62rem); color:var(--y-muted); background:var(--y-card); border:1px solid var(--y-line); border-radius:20px; padding:3px 8px; white-space:nowrap}
/* the payoff — the consolidated shopping list, the prominent panel (the tableau) */
.rec-list{background:linear-gradient(160deg,var(--y-wash),var(--y-col)); border:1.5px solid var(--y-accent-2); border-radius:clamp(11px,1.6vh,16px); padding:clamp(11px,1.7vh,18px); display:flex; flex-direction:column; gap:clamp(5px,.9vh,9px); box-shadow:0 14px 34px -20px rgba(150,106,16,.5); min-height:0}
.rec-listhead{font-family:var(--lab); font-size:clamp(.52rem,1vh,.64rem); letter-spacing:.1em; text-transform:uppercase; color:var(--y-accent-ink); flex:none}
.rec-listhead span{color:var(--y-muted)}
/* categorized shopping list — reads like a real grocery list; 2 columns fill the panel */
.rec-cats{flex:1 1 auto; min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:clamp(9px,1.7vh,18px) clamp(16px,2.2vw,32px); align-content:center}
.rec-cat{break-inside:avoid; display:flex; flex-direction:column; gap:clamp(3px,.6vh,5px)}
.rec-catlab{font-family:var(--lab); font-size:clamp(.5rem,.98vh,.62rem); letter-spacing:.12em; text-transform:uppercase; color:var(--y-accent-ink); padding-bottom:clamp(3px,.6vh,5px); border-bottom:1px solid var(--y-line); margin-bottom:3px}
.rec-catitems{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:clamp(3px,.6vh,6px)}
.rec-ci{display:flex; align-items:baseline; gap:8px; font-family:var(--body); font-size:clamp(.82rem,1.6vh,1.02rem); color:var(--y-ink); line-height:1.25}
.rec-check{flex:none; width:.82em; height:.82em; border:1.5px solid var(--y-accent-2); border-radius:4px; transform:translateY(.08em)}
.rec-ci-txt{font-weight:500; letter-spacing:-.01em}
.rec-ciamt{font-family:var(--disp); font-weight:800; color:var(--y-accent-ink); font-variant-numeric:tabular-nums}
.rec-ci-add .rec-check{background:var(--y-accent-2); border-color:var(--y-accent-2)}
.rec-cimath{margin-left:auto; font-family:var(--lab); font-size:.6em; color:var(--y-accent-ink); background:var(--y-wash); border:1px solid var(--y-accent-2); border-radius:20px; padding:1px 7px; white-space:nowrap; flex:none; align-self:center; opacity:.85}

.rec-foot{display:flex; justify-content:flex-start; align-items:center; flex:none; position:relative; z-index:5}
.rec-replay{font-family:var(--lab); font-size:clamp(.54rem,1.1vh,.62rem); letter-spacing:.1em; text-transform:uppercase; color:var(--y-muted); background:transparent; border:1px solid var(--y-line); border-radius:20px; padding:6px 12px; cursor:pointer}
.rec-replay:hover{color:var(--y-ink); border-color:var(--y-accent)}
.rec-replay:focus-visible{outline:3px solid var(--y-accent); outline-offset:2px}
/* mobile (mobile-motion + flat): recipes stack above the consolidated list; each recipe is a
   compact row (name + wrapping ingredient chips) so nothing is clipped on a phone */
@media (max-width:767px){
  .lane-canvas[data-demo="recipe"]{height:auto; min-height:0; padding:12px; overflow:hidden}
  .rec{height:auto; overflow:hidden; width:100%; max-width:100%; gap:5px; padding:11px}
  .rec-body{grid-template-columns:1fr; gap:7px}
  .rec-recipes{flex-direction:column; gap:5px}
  .rec-recipe{flex:0 0 auto; gap:2px; padding:6px 9px}
  .rec-name{font-size:.86rem}
  .rec-ings{gap:2px 4px}
  .rec-ings li{font-size:.52rem; padding:2px 6px}
  .rec-cats{gap:8px 12px; align-content:start}
  .rec-catitems{gap:4px}
  .rec-ci{font-size:.8rem; gap:6px}
  .rec-cimath{font-size:.62em}
  .rec-foot{margin-top:4px}
  .rec-ci-txt,.rec-title{overflow-wrap:anywhere}
}

/* opening questions: on narrow screens size by WIDTH (vw) so the big type fits without overflow */
@media (max-width:767px){
  .fin-intro-q, .crd-intro-q, .rec-intro-q{ font-size:clamp(2rem,12vw,3.6rem) }
}

/* ---- intake form as the FINAL film cell (left of recipe; camera ends leftward) ---- */
.film-live .s-form{padding:0}   /* fill the viewport cell; flex-centre the offer + form panel */
.film-live .s-form > .wrap{max-width:min(720px,86vw)}
/* intake fits its cell like the other scenes — trim the offer + panel so even the tallest
   step (contact) fits within the viewport with a modest margin */
.film-live .s-form .offer-block{margin-bottom:var(--s3)}
.film-live .s-form .offer-lead{font-size:clamp(1.45rem,3vw,2rem); line-height:1.1; margin-bottom:12px}
.film-live .s-form .offer-list{font-size:clamp(1rem,1.9vw,1.25rem); margin-bottom:0}
.film-live .s-form .panel{padding:clamp(20px,2.4vw,30px)}
.film-live .s-form .form-head{font-size:clamp(1.35rem,2.8vw,1.75rem)}
.film-live .s-form .step-disclaimer{font-size:.92rem; line-height:1.5}
.film-live .s-form .step-progress{margin-bottom:var(--s3)}
.film-live .s-form .field-row{gap:14px; margin-bottom:14px}
.film-live .s-form .field label{margin-bottom:6px}
.film-live .s-form .step-q{font-size:clamp(1.2rem,2.4vw,1.6rem)}
@media (max-width:767px){
  /* the form is a .scene now — undo the demo-scene wrap treatment so the tall form flows normally */
  .mobile-motion .s-form > .wrap{ opacity:1; transform:none; display:block; flex:none; min-height:0; padding:0 24px; justify-content:normal }
}