/* ============================================================
   Monnet — Scroll Walkthrough Prototype
   Vanilla + Lenis + GSAP ScrollTrigger
   Single pinned #stage + master scrubbed timeline.
   Palette is "observed" from the Figma frames — swap for exact
   tokens via Figma get_variable_defs later.
   ============================================================ */

:root {
  /* Exact tokens from Figma (file gUHV0i2yKTB1vW2ZMcaoFp): Neutral + semantic
     scale via get_variable_defs; brand blue + glow sampled pixel-exact from the
     reference renders. */
  --canvas: #ffffff;     /* Neutral/0   */
  --ink: #030712;        /* Neutral/950 — headlines */
  --ink-soft: #0f172a;   /* Neutral/800 */
  --body: #475569;       /* Neutral/600 — body copy */
  --muted: #6f7991;      /* Neutral/500 — subtitles / labels */
  --faint: #b0b0b0;      /* Neutral/400 */
  --line: #e5e5e5;       /* Neutral/200 — hairlines */
  --line-soft: #f4f4f4;  /* Neutral/100 */
  --rail: #fafafa;       /* Neutral/50  — app rail */
  --brand: #3333ff;      /* sampled — question pills / primary accent */
  --brand-ink: #ffffff;
  --brand-2: #4cafdb;    /* sampled — logo teal / "into focus" gradient end */
  --green: #41a448;      /* Green/500 — completed checkmarks */
  --green-bg: #e8f5e9;   /* Green/50    */
  /* Plan component tokens (exact from prod index.css) */
  --success-500: #41A448; --warning-500: #FB8C00;
  --neutral-200: #E5E5E5; --neutral-300: #DDDDDD; --neutral-400: #B0B0B0; --neutral-500: #6F7991;
  --shadow-overview-card: 0 4px 8px rgba(0,0,0,.05);
  --shadow-seg-glow: 0 0 12px rgba(232,245,233,1), inset 0 0 4px rgba(232,245,233,1);
  --glow-1: #5e5eff;     /* sampled — finale glow core */
  --glow-2: #9f9fff;     /* sampled — finale glow edge */
  --shadow-sm: 0 1px 2px rgba(3, 7, 18, .06), 0 2px 8px rgba(3, 7, 18, .05);
  --shadow-md: 0 10px 30px rgba(3, 7, 18, .10), 0 2px 8px rgba(3, 7, 18, .06);
  --shadow-lg: 0 30px 80px rgba(20, 20, 90, .16);
  --r-card: 16px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { background: var(--canvas); overflow-x: clip; }   /* the use-cases crown (110vw, outside #stage's clip) must not mint a horizontal scrollbar */

body {
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Nav ---------- */
/* Floating header — fixed, NO background ever. The logo wordmark + links recolor
   based on the luminance of the backdrop behind the logo (JS toggles .nav--on-dark). */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 40px;
  color: var(--ink);                 /* drives the logo wordmark (currentColor) + links */
  transition: color .35s ease;
}
.nav__brand { display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
.nav__logo { height: 20px; width: auto; display: block; }
.nav__mark-mono { opacity: 0; transition: opacity .35s ease; }             /* currentColor copy of the mark, stacked over the gradient one */
.nav--on-dark .nav__mark-mono { opacity: 1; }                              /* on dark the whole logo goes monochrome, matching the wordmark */
.nav__right { display: flex; align-items: center; gap: 22px; }
.nav__link { color: inherit; text-decoration: none; font-weight: 500; font-size: 15px; opacity: .82; transition: color .35s ease; }
.nav__cta { background: var(--ink); color: var(--canvas); text-decoration: none; font-weight: 600; font-size: 14px; padding: 11px 20px; border-radius: 999px; transition: background .35s ease, color .35s ease; }
.nav--on-dark { color: #E9F7F8; }                                    /* over a dark backdrop */
.nav--on-dark .nav__cta { background: #E9F7F8; color: var(--ink); }  /* keep the CTA a high-contrast pill */

/* ---------- Scroll track + pinned stage ---------- */
#walkthrough { position: relative; }            /* height set in JS (scroll budget) */
#stage {
  position: relative;
  height: 100vh; width: 100%;
  overflow: hidden;
}
.layer { position: absolute; inset: 0; }

/* ---------- Scene 1 — hero ---------- */
.hero { z-index: 2; display: grid; place-content: center; text-align: center; padding: 0 6vw; }
.hero__glow {   /* an actual oval (Figma "Ellipse 2", node 1449:341) filled with a top-to-bottom linear
                   gradient, feathered via blur — not a radial gradient. Only its top sliver (soft
                   periwinkle crown) shows above the fold; it stays pinned as THE glow for the whole
                   walkthrough, and at the "Great proposals" closer the scrub raises it ~50vh (main.js)
                   so more of the oval climbs into view — the same rounded crown, deeper colors.
                   Gradient is tuned so (a) the visible hero sliver renders the same colors as the
                   original #fff→#33f ramp did, and (b) the risen state is solid #5959fc at the fold,
                   where #use-cases' gradient picks up the exact same color — one continuous wash.
                   Sized in vw/vh only (no px cap) so it scales with the screen. */
  position: absolute; left: 50%; top: 80vh; transform: translateX(-50%);
  width: 110vw; height: 137vh; z-index: -1; pointer-events: none;
  border-radius: 50%;
  background: linear-gradient(180deg, #b3b3ff 0%, #8787ff 15%, #5959fc 40%, #5959fc 100%);
  filter: blur(100px);
}
.hero__title { position: relative; z-index: 1; font-weight: 800; letter-spacing: -.035em; line-height: 1.03; font-size: clamp(38px, 6vw, 84px); text-wrap: balance; }
/* measure-capped: the sub wraps into two balanced ~50-char lines instead of one viewport-wide run */
.hero__sub { position: relative; z-index: 1; justify-self: center; margin-top: 26px; max-width: 34em; font-size: clamp(16px, 1.32vw, 19px); line-height: 1.55; color: var(--muted); font-weight: 500; text-wrap: balance; }
.hero__cta {
  position: relative; z-index: 1; justify-self: center; margin-top: 38px;
  display: inline-block; width: max-content;
  background: var(--ink); color: var(--canvas); text-decoration: none;
  font-weight: 600; font-size: 16px; line-height: 20px; padding: 14px 28px; border-radius: 999px;
  transition: background .2s ease;
}
.hero__cta:hover { background: #272d3a; }
/* pricing microcopy — a quiet phase note ("while"), not a promotion */
.hero__note { position: relative; z-index: 1; justify-self: center; margin-top: 14px; font-size: 13.5px; font-weight: 500; color: var(--muted); }

/* ---------- Question pills → inbox items ---------- */
/* no z-index here on purpose: each .pill-anchor sets its own z (JS) so far pills
   can sit BEHIND the hero text (z2) and near pills in front */
.pills { pointer-events: none; }
.pill-anchor {              /* positioned + idle float/parallax (JS) */
  position: absolute;
  left: var(--x); top: var(--y);
  will-change: transform;
}
.pill {                     /* visible box — scrubbed converge + dock/morph (JS) */
  position: relative;
  padding: 12px 20px;
  border-radius: 999px;
  white-space: nowrap; overflow: hidden;
  will-change: transform;
}
.pill--blue  { background: var(--brand); color: var(--brand-ink); box-shadow: 0 12px 30px rgba(51, 51, 255,.28); }
.pill--ghost { background: #fff; color: var(--ink); box-shadow: var(--shadow-md); }
/* shared title — hero pills read FULLY (shrink-to-fit, no ellipsis); the featured pill's
   title is retweened (size + color) in JS as it morphs into the chat prompt bubble */
.pill__title  { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; white-space: nowrap; }

/* ============================================================
   Scene 2 — "Tuned to your team": the Monnet Chat window.
   Sized in em off --chat-fs (one scale lever) like the Slack cards,
   so the whole window scales as a unit with the viewport.
   ============================================================ */
.chat-win {
  --chat-fs: clamp(14.5px, 1.2vw, 27px);   /* ~13% up across all desktop sizes — the window read small next to the copy */
  position: absolute; z-index: 6;
  right: 13vw; top: 50%; margin-top: -16em;   /* anchored near center; grows downward as rows insert */
  width: 30em;
  font-family: var(--font); font-size: var(--chat-fs);
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(3, 7, 18, .06);
  border-radius: 1.35em;
  box-shadow: 0 2.2em 5em rgba(20, 20, 90, .13);
  padding: 1.15em 1.35em 1.35em;
  will-change: transform;
}
.chat__head { display: flex; align-items: center; gap: .45em; }
.chat__title { font-size: .9em; font-weight: 700; letter-spacing: -.01em; color: #16171c; }
.chat__unlock { width: .85em; height: .85em; color: #b0b4c0; }
.chat__day { text-align: center; font-size: .75em; font-weight: 500; color: #9aa0ab; margin: 1em 0 .9em; }
/* the user prompt bubble — the floating question pill morphs into exactly this box,
   then JS crossfades the real bubble in (kept in layout from the start so the tool
   rows below never shift when the swap happens) */
.chat__bubble { margin-left: auto; width: max-content; max-width: 88%; background: #f2f2f5; border-radius: 999px; padding: .62em .95em; font-size: .9em; line-height: 1.35; font-weight: 500; color: #16171c; white-space: nowrap; }   /* fully-rounded capsule — the JS morph reads this computed radius as its target */
.chat__tools { display: flex; flex-direction: column; margin-top: 1.05em; }
.chat__tool { display: flex; align-items: baseline; gap: .5em; padding: .24em 0; font-size: .78em; line-height: 1.4; font-weight: 500; color: #6f7991; overflow: hidden; }
.chat__ticon { flex: none; font-size: .9em; }
.chat__msg { display: flex; flex-direction: column; gap: .7em; margin-top: 1.05em; overflow: hidden; }
.chat__msg p { font-size: .86em; line-height: 1.5; color: #2b2c33; }

/* ---------- The Monnet app (real screenshots) ----------
   Zoomed-in framing: the app is scaled up LARGE (sized in vw so it grows on big displays)
   and anchored so the INBOX column is the focal point; the detail/motion panel bleeds off
   the right and the list bleeds off the bottom. Tune the three knobs below to taste:
     --app-w  : overall scale (bigger = more zoomed-in)
     left     : horizontal anchor (where the app's left/rail sits)
     top      : vertical anchor (smaller/negative pushes the inbox header up) */
.app-layer { z-index: 3; }

/* edge fade — softens the zoomed app's top + right bleed into the page background.
   rgba(255,255,255,0) (not `transparent`) keeps the fade pure white, no grey cast. */
.edge-fade {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--canvas), rgba(255,255,255,0) 15%),
    linear-gradient(to left,   var(--canvas), rgba(255,255,255,0) 18%);
}

/* Plan step (H3) — fades the WHOLE app's right + top edges into the bg via a real mask (the content
   itself goes transparent, revealing whatever's actually behind) rather than painting a fake color
   overlay on top, which broke once the persistent hero glow could show through underneath. Applied
   here on .app itself (not just .app__main) since the Base PNG (.app__base) sits behind the code
   overlay and needs the same fade — masking only the overlay left the PNG's own edge hard/visible.
   Two gradient masks (top fade, right fade) combined with intersect — each hides its own edge band
   and only the overlap of "not near top" AND "not near right" stays visible. */
.app {
  position: absolute;
  --app-w: 90vw;
  width: var(--app-w);
  height: calc(var(--app-w) * 900 / 1440);   /* keep the Base PNG's 16:10 */
  left: 38vw;
  /* 12vh anchors the app high on landscape screens; on portrait/tall windows the app
     (whose height tracks WIDTH) would hug the top while the copy sits at the viewport's
     vertical center, so the centering term 50vh - height/2 (= --app-w * 900/1440/2)
     takes over as soon as it exceeds 12vh. On common landscape sizes it never does,
     so nothing moves there. */
  top: max(12vh, calc(50vh - var(--app-w) * 0.3125));
  /* no border-radius / box-shadow / clip — the Base PNG already carries its own
     rounded corners + shadow, so the container stays transparent and out of the way */
  will-change: transform;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 7%), linear-gradient(to left, transparent 0%, #000 20%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 7%), linear-gradient(to left, transparent 0%, #000 20%);
  mask-composite: intersect;
}
.app__base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* inbox column overlay — fractions match the Base PNG's left column (tunable in JS COL) */
.app__inbox { position: absolute; left: 5.86%; top: 11.6%; width: 20.8%; bottom: 4%; overflow: hidden; }   /* left nudged to seat list/chips under the Inbox header */
.app__list  { position: absolute; left: 0; top: 0; width: 100%; height: auto; display: block; will-change: transform; }

/* main-panel overlay — over the empty right panel of the Base PNG */
/* main panel: fills the Base PNG's empty right area; motion header + body stack here */
.app__main { position: absolute; left: 27.6%; top: 0%; right: 0; bottom: 0; overflow: hidden; }
/* motion header — code-built to mirror the old header PNG (title · updated · follower pill) */
.motion-header { display: flex; align-items: center; gap: 14px; width: 1044px; height: 64px; padding: 0 26px 0 24px; border-bottom: 1px solid #f1f1f3; }
.mh__title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: #14151a; white-space: nowrap; }
.mh__meta { flex: 1; font-size: 16px; color: #b3b8c4; white-space: nowrap; }
.mh__avas { display: flex; align-items: center; gap: 5px; border: 1px solid #ececf0; border-radius: 999px; padding: 4px 9px 4px 5px; background: #fff; }
.mh__avas .av { margin-left: -7px; }
.mh__avas .av:first-child { margin-left: 0; }
.mh__chev { width: 16px; height: 16px; color: #6f7991; }
.panel { position: absolute; inset: 0; padding: 4px; opacity: 0; overflow: hidden; }

/* panel B — process / ownership */
.check { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.check__item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.check__box { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--line); flex: none; display: grid; place-items: center; }
.tick { color: #fff; font-size: 13px; font-weight: 800; line-height: 1; }
.check__label { font-size: 13px; font-weight: 500; }
.ava { width: 22px; height: 22px; border-radius: 50%; margin-left: auto; flex: none; background: linear-gradient(135deg, var(--brand), var(--brand-2)); opacity: 0; }

/* ============================================================
   H4 — Slack outreach cards. EXACT match to Figma node 1492-1390 (drawn at 1.5x there):
   frosted glass rgba(255,255,255,.8) + 20px blur, 30px radius, shadow 0 8 16, Lato.
   Every internal dimension is em off --card-fs (the one scale lever on .slack-cards),
   so the whole card scales as a unit — step 3 just changes --card-fs responsively.
   ============================================================ */
.slack-cards {
  --card-fs: clamp(16px, 1.38vw, 38px);   /* responsive scale lever — scales with the viewport like the rest of the UI (~20% larger overall) */
  font-family: "Lato", "Inter", system-ui, -apple-system, sans-serif;
  font-size: var(--card-fs);
  position: absolute; right: 15vw; top: 50%; margin-top: -4em;   /* proportional placement; cards stack upward from this anchor */
  width: 29.87em;                  /* card width @1x; scales with --card-fs */
  z-index: 5;
}
.slack-cards::before {             /* soft brand bloom so the frosted glass reads against the white bg */
  content: ""; position: absolute; left: -14%; top: -7em; width: 128%; height: 28em; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 50% at 58% 46%, rgba(120,110,255,.30), rgba(150,130,250,.12) 47%, rgba(150,130,250,0) 73%);
  filter: blur(34px);
}
.scard {
  position: absolute; top: 0; left: 0; width: 100%; transform-origin: 50% 50%;   /* stacked deck — all cards share this anchor; center origin so receded cards tilt naturally */
  display: flex; gap: 0.533em; align-items: flex-start;
  padding: 0.867em 0.8em;          /* 13/12 @1x = 19.5/18 @1.5x */
  border-radius: 1.333em;          /* 20px @1x = 30px */
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(0.889em); backdrop-filter: blur(0.889em);
  box-shadow: 0 0.533em 1.067em rgba(0, 0, 0, 0.10);   /* 0 8 16 @1.5x */
}
.scard__ava { width: 2.4em; height: 2.4em; flex: none; border-radius: 0.62em; overflow: hidden; }   /* 36px @1x (54 @1.5x) */
.scard__ava img { width: 100%; height: 100%; display: block; object-fit: cover; }
.scard__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }   /* no gap — reply spacing is its (collapsible) padding-top */
.scard__text { display: flex; flex-direction: column; gap: 0.267em; }
.scard__head { display: flex; gap: 0.533em; align-items: baseline; }
.scard__name { font-weight: 700; font-size: 1em; color: #1d1c1d; letter-spacing: -0.01em; }
.scard__time { font-weight: 400; font-size: 0.8em; color: #616061; }
.scard__msg { font-weight: 400; font-size: 1em; line-height: 1.3; color: #1d1c1d; }
.scard__reply { display: flex; gap: 0.533em; align-items: center; overflow: hidden; }   /* height + margin-top animate 0 -> auto so the card fits the message, then grows for the reply */
.scard__rava { width: 1.6em; height: 1.6em; flex: none; border-radius: 0.4em; overflow: hidden; }   /* 24px @1x (36 @1.5x), radius 6px (9 @1.5x) */
.scard__rava img { width: 100%; height: 100%; display: block; object-fit: cover; }
.scard__reply-n { font-weight: 700; font-size: 0.867em; color: #2e639e; }
.scard__reply-t { font-weight: 400; font-size: 0.867em; color: #616061; }

/* H1 scene glow — soft lavender bloom behind the left text (matches the vignette) */
.scene-glow { z-index: 1; pointer-events: none; }
.scene-glow::before {
  content: ""; position: absolute; left: -8vw; bottom: -18vh;
  width: 58vw; height: 70vh; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(118,108,255,.42), rgba(150,130,250,.2) 42%, rgba(150,130,250,0) 72%);
  filter: blur(36px);
}

/* ---------- Highlight copy ---------- */
/* Box and title BOTH scale with the viewport in lockstep: the title is 4vw (capped 58px)
   and the box is 29vw (capped 480px), sized so the widest <br>-line ("your team chat",
   ~7em at this weight/tracking) always fits — no accidental re-wraps at any window size.
   The body copy gets its own narrower cap so the measure stays readable. */
.copy { z-index: 6; display: grid; align-content: center; max-width: clamp(280px, 29vw, 480px); pointer-events: none; }
.copy--left  { left: 5vw;  text-align: left; }
.copy--right { right: 6vw; left: auto; text-align: left; }
.copy__title { font-weight: 800; letter-spacing: -.03em; line-height: 1.02; font-size: clamp(34px, 4vw, 58px); }
.copy[data-copy='4'] .copy__title,
.copy[data-copy='5'] .copy__title { font-size: clamp(34px, 3.4vw, 50px); }
.copy__body  { margin-top: 20px; max-width: 352px; font-size: 17px; line-height: 1.5; color: var(--body); font-weight: 500; text-wrap: pretty; }   /* pretty: no single-word widow on the last line (e.g. the finale's "why.") */
@media (min-width: 821px) {
  body:not(.reduced) .copy { top: -4vh; bottom: 4vh; }
  .copy[data-copy='4'] { right: 4vw; }
}

/* ---------- Scene 6 — finale ---------- */
.finale { z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(22px, 3.5vh, 40px); padding: 8vh 6vw; text-align: center; }
.finale__glow {
  position: absolute; left: 50%; bottom: -22%; transform: translateX(-50%);
  width: 100vw; height: 82vh; border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--glow-1) 0%, var(--glow-2) 40%, rgba(159,159,255,0) 72%);
  filter: blur(8px); opacity: 0; pointer-events: none;
}
.finale__text { position: relative; max-width: 760px; }
.finale .copy__body { margin: 18px auto 0; }
.finale__title { font-weight: 800; letter-spacing: -.035em; line-height: 1.02; font-size: clamp(38px, 5vw, 74px); }
.finale__body { margin: 22px auto 0; max-width: 600px; font-size: 18px; line-height: 1.5; color: var(--body); font-weight: 500; }
.packet {   /* Review closer — masked wrapper around the decision packet; eases out at the bottom.
               Side/top padding is generous (not cosmetic) — overflow:hidden hard-clips anything past
               it, and .dpacket's box-shadow blur needs room or it gets a visible straight-edge cut. */
  position: relative; z-index: 5; width: min(1100px, 96vw); text-align: left;   /* 1040px card + 30px shadow room each side */
  max-height: min(640px, 60vh); overflow: hidden; padding: 26px 30px 0;   /* tall + long solid zone: the options carousel must read before the fade */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 66%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 66%, transparent 100%);
}
.packet__head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.packet__badge { font-size: 11px; font-weight: 700; color: var(--brand); background: rgba(51,51,255,.08); padding: 4px 9px; border-radius: 999px; }
.packet__title { font-weight: 700; font-size: 16px; }
.packet__rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.packet__row { display: flex; gap: 10px; }
.packet__row span { height: 10px; border-radius: 999px; background: var(--line); }
.packet__row span:first-child { width: 28%; background: #d7d9e2; }
.packet__row span:last-child { flex: 1; }
.packet__cta { display: block; text-align: center; background: var(--ink); color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; padding: 12px; border-radius: 999px; }

/* ============================================================
   Plan component (code-built, ported from prod) — lives on the motion body
   ============================================================ */
/* motion content is laid out at 1x (1440-px base) and scaled as ONE unit, so the code overlays
   the PNG layers at the same scale. --ui-scale is set in JS = displayed app__main width / 1044. */
.motion-scale { position: absolute; top: 0; left: 0; width: 1044px; transform: scale(var(--ui-scale, 0.9)); transform-origin: top left; }
/* outer container spans the full header width (1044); title + plan are centered within it */
.motion-doc { width: 1044px; padding: 28px 0 0; display: flex; flex-direction: column; align-items: center; }
.motion-doc__title { width: 688px; font-size: 30px; line-height: 1.12; font-weight: 700; letter-spacing: -.02em; color: var(--ink); margin-bottom: 16px; white-space: nowrap; }

/* base element sizes mirror Figma node 1461-4012 at 1x: 688-wide container, 24px inner pad => 640 content */
.plan { display: flex; flex-direction: column; gap: 16px; width: 688px; border: 1px solid var(--neutral-300); border-radius: 24px; padding: 24px 12px; background: #fff; box-shadow: var(--shadow-overview-card); }
.plan__head { display: flex; align-items: center; gap: 12px; padding: 0 12px; }
.plan__titles { position: relative; flex: 1; min-width: 0; height: 28px; }   /* current-step title crossfades through here */
.plan__title { position: absolute; left: 0; top: 0; width: 100%; font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -.4px; white-space: nowrap; }
.plan__avs { position: relative; flex: none; width: 62px; height: 24px; }   /* current-step assignee(s) crossfade here, right-anchored */
.plan__avgroup { position: absolute; right: 0; top: 0; display: flex; align-items: center; }
.plan__avgroup .av { margin-left: -6px; }
.plan__avgroup .av:first-child { margin-left: 0; }

/* progress overview */
.overview { display: flex; align-items: center; gap: 2px; padding: 0 12px; }
.seg { position: relative; display: flex; height: 24px; align-items: center; gap: 4px; border-radius: 999px; background: var(--neutral-200); padding: 0 6px; overflow: hidden; }
.seg--single { flex: 1; min-width: 44px; }
.seg--cluster { flex: 2; min-width: 72px; }
.seg__fill { position: absolute; inset: 0 auto 0 0; height: 100%; border-radius: 999px; background: var(--success-500); box-shadow: var(--shadow-seg-glow); }
.seg__dot { position: relative; z-index: 1; display: flex; height: 12px; width: 12px; flex: none; align-items: center; justify-content: center; border-radius: 50%; background: #fff; }
.seg__dot svg { height: 8px; width: 8px; color: var(--success-500); }
.seg__dot--dashed { background: transparent; border: .6px dashed var(--neutral-400); }
.seg__avs { position: relative; z-index: 1; margin-left: auto; display: flex; align-items: center; }
.seg__avs .av { margin-left: -4px; }

.toggle { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 13px; line-height: 20px; font-weight: 500; letter-spacing: -.26px; color: var(--ink); padding: 0 12px; }
.toggle svg { height: 20px; width: 20px; color: var(--neutral-500); }
.toggle__t::after { content: "Show details"; }
.plan.is-expanded .toggle__t::after { content: "Hide details"; }
.toggle__chev { transition: transform .35s ease; }
.plan.is-expanded .toggle__chev { transform: rotate(180deg); }

/* tree (collapsed by default; JS animates height 0 -> auto). overflow clips the rows
   while collapsing; flex:none on the rows stops them squashing inside the 0-height column. */
.tree { display: flex; flex-direction: column; gap: 0; position: relative; overflow: hidden; }
.connectors { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.trow { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px; flex: none; }
.trow__main { min-width: 0; flex: 1; }
.trow__title { font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: -.28px; color: var(--neutral-500); }
.trow__sub { display: block; font-size: 12px; line-height: 18px; letter-spacing: -.24px; color: var(--neutral-400); margin-top: 1px; }
.trow .av { align-self: center; }

.marker { position: relative; z-index: 1; display: inline-flex; height: 24px; width: 24px; flex: none; align-items: center; justify-content: center; border-radius: 50%; }
.marker--done { background: var(--success-500); }
.marker--done svg { height: 14px; width: 14px; color: #fff; }
.marker--spin { background: #fff; border: 1px solid var(--neutral-200); }
.marker--spin svg { height: 14px; width: 14px; color: var(--warning-500); animation: pspin 1s linear infinite; }
.marker--dashed { border: 1px dashed var(--neutral-300); }
.marker--ring svg { height: 24px; width: 24px; }

.tgroup { margin: 4px 0; flex: none; border: 1px solid var(--neutral-300); border-radius: 20px; padding: 6px 11px; box-shadow: var(--shadow-overview-card); }
.tgroup__head { display: flex; width: 100%; align-items: center; gap: 8px; min-height: 36px; padding: 0; background: none; border: none; cursor: pointer; font-family: inherit; text-align: left; }
.tgroup__title { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: -.28px; color: var(--neutral-500); }
.tgroup__chev { height: 20px; width: 20px; flex: none; color: var(--neutral-400); }
.tgroup__children { display: flex; flex-direction: column; gap: 0; padding-left: 32px; }

/* metallic shimmer gradient text (exact from prod) */
.grad, .grad-group { -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: metallic-sweep 3s linear infinite; }
.grad { background-image: linear-gradient(88deg, #030712 22.84%, #B0B0B0 46.27%, #030712 69.67%); }
.grad-group { background-image: linear-gradient(91deg, #030712 2%, #B0B0B0 13%, #030712 23%); }
@keyframes metallic-sweep { 0% { background-position: 200% 50%; } 100% { background-position: 0% 50%; } }
@keyframes pspin { to { transform: rotate(360deg); } }

/* avatars (placeholder circles — real ones to be supplied) */
.av { border-radius: 50%; flex: none; box-shadow: 0 0 0 1.5px #fff; background: linear-gradient(135deg, #c7ccd6, #9aa3b2); }
.av--sm { height: 24px; width: 24px; }
.av--xxs { height: 15px; width: 15px; }
.av--ai { background: linear-gradient(135deg, #3a35f5, #4cafdb); }
.av--agent { background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%208V4H8'/%3E%3Crect%20width='16'%20height='12'%20x='4'%20y='8'%20rx='2'/%3E%3Cpath%20d='M2%2014h2'/%3E%3Cpath%20d='M20%2014h2'/%3E%3Cpath%20d='M15%2013v2'/%3E%3Cpath%20d='M9%2013v2'/%3E%3C/svg%3E") center / 62% no-repeat, linear-gradient(135deg, #3a35f5, #4cafdb); }
.av--p1 { background: url("assets/Avatar1.png") center / cover, #e5e7eb; }
.av--p2 { background: url("assets/Avatar2.png") center / cover, #e5e7eb; }
.av--p3 { background: url("assets/Avatar3.png") center / cover, #e5e7eb; }
.av--p4 { background: url("assets/Avatar4.png") center / cover, #e5e7eb; }
.av--p5 { background: url("assets/Avatar5.png") center / cover, #e5e7eb; }

/* ============================================================
   Page sections below the walkthrough (normal scroll): use cases, FAQ, signup, footer
   ============================================================ */
.lp { position: relative; padding: clamp(96px, 13vh, 180px) 6vw; }
.lp--full { padding-left: clamp(24px, 2.78vw, 40px); padding-right: clamp(24px, 2.78vw, 40px); }   /* mockup: 40px page margins, no column cap */
.lp__inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; }
.lp__inner--wide { max-width: none; }

/* dark variant (faq, proof, manifesto, cta, footer — everything past the use-cases wash) */
.lp--dark { background: var(--ink); }

/* use cases — sits on the long blue→black wash (mockup 1525-3176). The gradient is painted on
   ::before over the section's FULL height (pin spacer included), so scrolling through the pinned
   tabs rides the blue down into black — the "long gradual movement". The section's own solid
   background-color (#5959fc, same as the gradient top) exists only for updateNavTheme()'s
   backgroundColor sampling, which can't read gradients; both it and every stop below are darker
   than 50% luminance, so the nav flips to its dark theme for the whole ride. Stops sampled from
   the mockup's gradient spine at x=20. */
#use-cases { background-color: #5959fc; z-index: 9;   /* above the finale layer (z8) so the arriving section covers its fading remnants */
  margin-top: -25vh;   /* ride up over the pinned stage's last 25vh: the title enters WHILE the closer
                          is still dissolving instead of after a full viewport of empty wash.
                          Mobile + reduced-motion opt out. */
  padding-top: clamp(64px, 8vh, 120px); padding-bottom: clamp(160px, 30vh, 340px); }
#use-cases::after {   /* oval leading edge — the section arrives WEARING the bloom. Same recipe as
                         .hero__glow (110vw ellipse, #b3b3ff → #8787ff → #5959fc, heavy blur), attached
                         to the section's top so it rides the scroll 1:1: there is no second gradient to
                         out-run or color-match — the crown IS the wash the closer hands off to. It
                         overshoots 12vh INTO the section (top:-50vh on a 62vh box) so its blurred
                         bottom edge dissolves against the section's identical #5959fc instead of
                         feathering open right at the join. Desktop-only: mobile + reduced keep the
                         static finale pillar and need no leading edge. */
  content: ""; position: absolute; left: 50%; top: -50vh; transform: translateX(-50%);
  width: 110vw; height: 62vh;
  border-radius: 50% 50% 0 0 / 81% 81% 0 0;   /* top-half ellipse ≈ the hero oval's crown curvature */
  background: linear-gradient(180deg, #b3b3ff 0%, #8787ff 25%, #5959fc 60%, #5959fc 100%);
  filter: blur(48px);
  pointer-events: none;
}
#use-cases::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, #5959fc 0%, #3132ec 9%, #292acf 18%, #2223ab 30%, #1b1c88 43%, #131663 56%, #0c0f3f 70%, #05091e 85%, #030712 97%); }
.uc-head__title { font-size: clamp(40px, 4.45vw, 72px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: #fff; }
.uc-head__sub { margin-top: 18px; max-width: 400px; font-size: 17px; line-height: 1.5; font-weight: 500; color: rgba(255, 255, 255, .85); }

/* tabbed picker — glassy translucent skin on the blue wash (Figma 1530-4644):
   tabs rgba(255,255,255,.1) / active .2, radius 40; detail panel .1 with title → quote → body → chips */
.uc-panel { margin-top: clamp(36px, 5.5vh, 60px); display: grid; grid-template-columns: minmax(300px, 440px) 1fr; gap: 20px; align-items: start; }
.uc-tabs { display: flex; flex-direction: column; gap: 16px; }
.uc-tab {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px;
  text-align: left; min-height: 120px;
  background: rgba(255, 255, 255, .1); border: none; border-radius: 40px; padding: 19px 40px 29px;   /* content optically a touch above center */
  cursor: pointer; font: inherit; font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -0.4px; color: var(--neutral-200, #e5e5e5);
  transition: background-color .25s ease;
}
.uc-tab:hover { background: rgba(255, 255, 255, .15); }
.uc-tab.is-active { background: rgba(255, 255, 255, .2); }
.uc-tab__label {
  display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .75);
}
.uc-tab__q { display: block; }

.uc-detail {
  display: flex; flex-direction: column; min-height: 392px;
  background: rgba(255, 255, 255, .1); border: none; border-radius: 40px; padding: 40px;
  transition: opacity .22s ease, filter .22s ease, transform .22s ease;
}
.uc-detail.is-switching { opacity: 0; filter: blur(6px); transform: translateY(6px); }
.uc-detail__title { margin: 0; font-size: 28px; line-height: 36px; font-weight: 700; letter-spacing: -0.56px; color: #e5e5e5; }
/* The problem and automated workflow use labeled blocks to keep the detail view scannable. */
.uc-detail__tag { display: block; font-size: 11px; line-height: 15px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.uc-detail__problem { margin-top: 28px; }
.uc-detail__approach { margin-top: 28px; }
.uc-detail__pre { margin: 10px 0 0; max-width: 62ch; font-size: 17px; line-height: 27px; font-weight: 400; letter-spacing: -0.2px; color: rgba(255, 255, 255, .78); }
.uc-detail__body { margin: 10px 0 0; max-width: 62ch; font-size: 17px; line-height: 27px; font-weight: 400; letter-spacing: -0.2px; color: rgba(255, 255, 255, .78); }
.uc-detail__chips { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 30px; }
.uc-detail__mark { flex: none; width: 30px; height: 30px; margin-right: 6px; }
.uc-detail__mark svg { display: block; width: 100%; height: 100%; }
.uc-chip {
  display: inline-flex; align-items: center; height: 34px; padding: 6px 14px;
  background: rgba(255, 255, 255, .14); border-radius: 999px;
  font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: -0.28px; color: rgba(255, 255, 255, .92); white-space: nowrap;
}

/* FAQ — title left, native <details> accordion right, +/− circle icons (mockup 1525-3176) */
#faq { padding-top: clamp(140px, 22vh, 300px); padding-bottom: clamp(96px, 14vh, 180px); }
.faq-grid { display: grid; grid-template-columns: minmax(300px, 440px) 1fr; gap: clamp(20px, 2vw, 40px); align-items: start; }
.faq-grid__title { font-size: clamp(36px, 3.9vw, 60px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: #fff; }
.faq { border-top: 1px solid rgba(255, 255, 255, .12); }
.faq__item { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 18px; cursor: pointer; list-style: none; padding: 24px 0; font-size: 18px; font-weight: 600; color: #fff; }
.faq__q::-webkit-details-marker { display: none; }
.faq__icon { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.6px; border-radius: 1px; background: #fff; transform: translate(-50%, -50%); }
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .25s ease, opacity .2s ease; }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
.faq__a { padding: 0 64px 26px 0; font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, .62); }
/* answers ease open/closed instead of snapping. ::details-content + interpolate-size lets a CSS
   transition run height 0 -> auto (Chrome 129+ / Safari 26+); older browsers keep the instant
   toggle. The exclusive accordion (name="faq") closes its sibling through the same transition. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq__item::details-content {
    height: 0; opacity: 0; overflow: clip;
    transition: height .4s cubic-bezier(.4, 0, .2, 1), opacity .3s ease, content-visibility .4s allow-discrete;
  }
  .faq__item[open]::details-content { height: auto; opacity: 1; }
}

/* sign-up button in the CTA band — same ink pill as the hero/nav CTAs */
.cta-band__btn {
  display: inline-block; margin-top: clamp(24px, 3.5vh, 36px);
  background: var(--ink); color: #fff; text-decoration: none;
  font-weight: 600; font-size: 16px; line-height: 20px; padding: 14px 28px; border-radius: 999px;
  transition: background .2s ease;
}
.cta-band__btn:hover { background: #272d3a; }
.cta-band__note { display: block; margin-top: 14px; font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, .75); }

/* footer — giant watermark wordmark over link columns (Figma 1525-3133).
   At the 1440x900 frame: 40px side margins, 180px above the wordmark, 44px wordmark→links,
   36px row pitch (28px line + 8px gap), ~59px bottom pad; links #b0b0b0 16/28 -0.32px. */
.lp-footer { background: var(--ink); padding: clamp(96px, 20vh, 220px) clamp(24px, 2.78vw, 48px) clamp(40px, 6.5vh, 72px); }
.lp-footer__wordmark { display: block; width: 100%; height: auto; overflow: visible; }
.lp-footer__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); align-items: end; margin-top: clamp(32px, 4.9vh, 56px); }
.lp-footer__col { display: flex; flex-direction: column; gap: 8px; }
.lp-footer__col a { font-size: 16px; line-height: 28px; letter-spacing: -0.32px; color: #b0b0b0; text-decoration: none; transition: color .2s ease; }
.lp-footer__col a:hover { color: #fff; }
.lp-footer__copy { grid-column: 4; justify-self: end; font-size: 16px; line-height: 28px; letter-spacing: -0.32px; color: #b0b0b0; }   /* 4th col, right-aligned; col 3 stays blank */

/* testimonial — cream gradient card with the LemonHealth mark (mockup 1525-3176) */
#proof { padding-top: clamp(64px, 10vh, 120px); padding-bottom: 0; }
.quote-card { margin: 0; border-radius: 40px; padding: clamp(64px, 11vh, 110px) 24px; text-align: center;
  background: linear-gradient(180deg, #f9f8f7 0%, #faf4ea 55%, #fcedd1 100%); }
.quote-card__logo { display: block; width: 80px; height: 80px; margin: 0 auto; }   /* real LemonHealth mark (rounded corners baked into the PNG) */
.quote-card__text { margin: 44px auto 0; max-width: 680px; font-size: clamp(20px, 1.85vw, 27px); line-height: 1.42; letter-spacing: -.01em; font-weight: 600; color: #030712; }
.quote-card__by { margin-top: 40px; display: flex; flex-direction: column; gap: 3px; }
.quote-card__name { font-size: 16px; font-weight: 700; color: #030712; }
.quote-card__role { font-size: 15px; color: #6b7280; }

/* CTA band — gradient card with the signup pill (mockup 1525-3176) */
#cta { padding-top: 0; padding-bottom: clamp(28px, 4vh, 48px); }
.cta-band { position: relative; overflow: hidden; border-radius: 28px; padding: clamp(48px, 7.5vh, 76px) 24px; text-align: center;
  background:
    radial-gradient(42% 60% at 40% 118%, rgba(198, 236, 121, .5) 0%, rgba(198, 236, 121, 0) 65%),
    radial-gradient(55% 75% at 58% 122%, rgba(87, 219, 208, .85) 0%, rgba(87, 219, 208, 0) 62%),
    linear-gradient(97deg, #4e07fe 0%, #3f3af1 45%, #4384e6 72%, #49a5e1 100%); }
.cta-band__title { font-size: clamp(22px, 1.95vw, 30px); line-height: 1.4; letter-spacing: -.015em; font-weight: 700; color: #fff; }

@media (max-width: 880px) {
  .uc-panel { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; }
  .manifesto__cols { grid-template-columns: 1fr; row-gap: 18px; }
  .lp-footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .lp-footer__copy { grid-column: auto; justify-self: start; }
}

/* ============================================================
   Reduced motion — linearize into a static, readable stack.
   JS skips Lenis + ScrollTrigger and adds .reduced to <body>.
   ============================================================ */
/* Desktop-only: on phones the ≤820px block owns layout (main.js also never adds .reduced on
   mobile) — unscoped, these compound selectors out-specify the curated mobile rules. */
@media (min-width: 821px) {
body.reduced { overflow-x: hidden; }   /* the oversized glows have no #stage overflow clip once it's static */
body.reduced #walkthrough { height: auto !important; }
body.reduced #stage { position: static; height: auto; overflow: visible; }
body.reduced .layer { position: relative; inset: auto; min-height: 90vh; padding: 12vh 6vw; }
body.reduced .pills { display: none; }
body.reduced .chat-win { position: relative; right: auto; top: auto; margin: 10vh auto; }   /* static chat card, all rows visible */
body.reduced .app-layer { min-height: auto; }
body.reduced .app { opacity: 1 !important; transform: none !important; margin: 0 auto; height: auto; }
body.reduced .panel { position: relative; inset: auto; opacity: 1 !important; border-top: 1px solid var(--line); }
body.reduced .bubble { position: relative; right: auto; top: auto !important; display: inline-block; margin: 0 6px 6px 0; }
body.reduced .feed { margin-top: 16px; }
body.reduced .copy { max-width: none; opacity: 1 !important; transform: none !important; }
body.reduced .check__item { opacity: 1 !important; }
body.reduced .check__box { background: var(--brand); border-color: var(--brand); }
body.reduced .tick { opacity: 1; transform: scale(1); }
body.reduced .ava { opacity: 1; }
body.reduced .msg { opacity: 1 !important; transform: none !important; }
body.reduced .finale__glow { opacity: 1; bottom: 0; }   /* the pillar must stay full-alpha for the #5959fc handoff (the old .5 was tuned for the removed radial glow) */
body.reduced .packet { position: relative; left: auto; bottom: auto; transform: none; margin: 32px auto 0; }
body.reduced #use-cases { margin-top: 0; }   /* no pin in reduced mode — the -25vh overlap would cover the static finale */
body.reduced #use-cases::after { display: none; }   /* ditto: the static pillar owns the seam */
}

/* ---------- Manifesto — left title + three-column body (mockup 1525-3176) ---------- */
#manifesto { padding-top: clamp(80px, 12vh, 140px); padding-bottom: clamp(56px, 9vh, 100px); }
.manifesto__lede { font-weight: 800; letter-spacing: -.03em; line-height: 1.12; font-size: clamp(36px, 3.9vw, 60px); color: #fff; }
.manifesto__cols { margin-top: clamp(40px, 6.5vh, 68px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(20px, 2.8vw, 40px); }
.manifesto__col { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .6); }

/* ---------- Decision packet (Review closer visual — replicated from monnet.ai) ---------- */
.finale--packet {   /* text pinned down from the top via padding-top; packet pinned to the bottom via
                       margin-top:auto — decoupled, so growing the packet doesn't drag the text up */
  justify-content: flex-start; gap: clamp(18px, 2.6vh, 28px);
  padding-top: clamp(100px, 19vh, 200px); padding-bottom: 0;
}
.finale--packet .packet { margin-top: auto; }
.finale--packet .copy__title { font-size: clamp(38px, 4.45vw, 72px); }
.finale--packet .copy__body { margin-top: 22px; max-width: 690px; font-size: clamp(14px, 1.12vw, 18px); line-height: 1.6; }
.finale--packet .finale__glow {  /* bottom bloom as ONE shape — a pillar with an elliptical dome on top (oval ∪ rectangle),
                                    the whole thing carrying the white → brand gradient AND a blur, so it reads like the
                                    hero/interviews oval glow instead of snapping to a flat band. Oversized on every edge:
                                    the sides (124vw) and the bottom (-30vh) sit far enough off-screen that the blur's
                                    soft falloff never shows, and the gradient holds solid #5959fc across the fold, where
                                    #use-cases' own gradient picks up the exact same color — one continuous wash. */
  left: 50%; bottom: -30vh; transform: translateX(-50%);
  width: 112vw; height: 100vh;
  border-radius: 50% 50% 0 0 / 50% 50% 0 0;   /* dome top ≈ the oval's crown; straight sides below.
     112vw (not wider): the crown's curvature has to happen INSIDE the viewport on wide/short
     windows or the top edge reads as a flat band; 6vw still hangs off each side so the blur
     (46px) never pulls page-white into the fold row. */
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #e9e9ff 12%, #a9a9ff 30%, #5959fc 55%, #5959fc 100%);   /* saturates near the crown so the oval edge cuts through visible color (like the hero bloom); solid well above the fold so the blur can't lighten the seam */
  filter: blur(46px);
}

/* Decision packet — the monnet.ai-style motion record (problem → goals → options + votes),
   in the mockup's 1040px / 40px-radius card. */
.dpacket {
  width: 100%; box-sizing: border-box; text-align: left;
  background: #fff; border-radius: 40px;
  box-shadow: 0 18px 50px -20px rgba(20, 22, 50, .22);
  padding: 36px 48px 40px;
  color: #16171c; font-size: 14px; line-height: 1.58;
}
.dpk__statusrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dpk__status { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #e4e4ea; border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: 12.5px; color: #1d1e24; }
.dpk__dot { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; }
.dpk__status--closed .dpk__dot { background: #73737c; }
.dpk__meta { display: inline-flex; align-items: center; gap: 5px; color: #93939c; font-size: 13px; }
.dpk__title { margin: 16px 0 0; font-size: 25px; font-weight: 800; letter-spacing: -.02em; line-height: 1.16; color: #14151a; }
.dpk__author { display: flex; align-items: center; gap: 8px; margin-top: 13px; font-size: 13.5px; }
.dpk__ava { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; }
.dpk__name { font-weight: 600; color: #2b2c33; }
.dpk__rule { height: 1px; background: #eceef2; margin: 18px 0; }
.dpk__h { margin: 20px 0 8px; font-size: 15px; font-weight: 700; color: #14151a; }
.dpk__h:first-of-type { margin-top: 0; }
.dpk__p { margin: 0 0 9px; color: #54555f; }
.dpk__p strong, .dpk__bullets strong { color: #24252b; font-weight: 700; }
.dpk__p--q { font-weight: 600; color: #24252b; }
.dpk__bullets { margin: 0 0 9px; padding-left: 20px; color: #54555f; }
.dpk__bullets li { margin-bottom: 6px; }
.dpk__bullets li::marker { color: #b7b7c0; }
.dpk__open { display: flex; flex-direction: column; }
.dpk__oq { margin: 0 0 3px; font-weight: 700; color: #24252b; }
.dpk__open .dpk__p:not(:last-child) { margin-bottom: 14px; }
/* options carousel — mirrors the product's option cards: a horizontal track whose third
   card runs off the edge (with the arrow pair + right fade signalling more to scroll) */
.dpk__cahead { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
.dpk__cahead .dpk__h { margin: 0; }
.dpk__canav { display: flex; gap: 6px; }
.dpk__caarrow { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #e4e4ea; display: grid; place-items: center; color: #c6c6cf; background: #fff; }
.dpk__caarrow--on { color: #2b2c33; }
.dpk__carousel { position: relative; margin-top: 10px; overflow: hidden; }
.dpk__carousel::after {   /* right-edge fade: the clipped card dissolves instead of cutting hard */
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 56px; pointer-events: none;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
}
.dpk__catrack { display: flex; gap: 14px; }
.dpk__opt { flex: 0 0 372px; min-width: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid #ececf0; border-radius: 16px; padding: 18px; box-shadow: 0 6px 20px -12px rgba(20, 22, 50, .18); }
.dpk__opt--decided { background: rgba(51, 51, 255, .035); border-color: rgba(51, 51, 255, .32); box-shadow: 0 10px 28px -16px rgba(51, 51, 255, .38); }
.dpk__opt--dismissed { background: #f7f7f9; filter: grayscale(1); opacity: .48; }
.dpk__optstatus { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dpk__optstatus .dpk__badge { margin-bottom: 0; }
.dpk__decision { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(51, 51, 255, .1); color: var(--brand); font-size: 11.5px; font-weight: 700; }
.dpk__badge { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #16171c; color: #fff; font-size: 13.5px; font-weight: 600; margin-bottom: 14px; }
.dpk__opttitle { font-size: 15px; font-weight: 700; line-height: 1.28; color: #14151a; margin-bottom: 7px; }
.dpk__optdesc { font-size: 13px; line-height: 1.5; color: #62636c; margin-bottom: 8px; }
.dpk__seemore { font-size: 13px; font-weight: 600; color: #14151a; }
.dpk__analysis { margin-top: 12px; background: #f6f6f9; border: 1px solid #eceef2; border-radius: 12px; padding: 13px; }
.dpk__anhead { display: flex; align-items: center; gap: 4px; font-size: 13px; margin-bottom: 6px; }
.dpk__anhead strong { color: #14151a; font-weight: 700; }
.dpk__anlabel { color: #9a9aa3; }
.dpk__mark { color: var(--brand); display: inline-flex; margin-right: 2px; }
.dpk__antext { font-size: 12.5px; line-height: 1.5; color: #62636c; margin-bottom: 8px; }
.dpk__votes { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px; border-top: 1px solid #eceef2; }
.dpk__votecount { font-size: 12.5px; color: #93939c; }
.dpk__vbtns { display: flex; gap: 7px; }
.dpk__vote { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #e4e4ea; border-radius: 999px; padding: 4px 11px; font-size: 12.5px; color: #54555f; background: #fff; }
.dpk__vote--up { background: #16171c; color: #fff; border-color: #16171c; }
.dpk__appendix { margin-top: 20px; padding-top: 14px; border-top: 1px solid #eceef2; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #a6a6ae; }
@media (min-width: 821px) {
body.reduced .packet { max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
}

/* Large screens — scale the decision packet up proportionally so it doesn't read small */
@media (min-width: 1500px) and (min-height: 800px) { .packet { zoom: 1.14; } }
@media (min-width: 1800px) and (min-height: 880px) { .packet { zoom: 1.28; } }
@media (min-width: 2200px) and (min-height: 980px) { .packet { zoom: 1.44; } }

/* ---------- Small screens (prototype: desktop-first) ---------- */
@media (max-width: 860px) {
  .app { width: 94vw; }
  .copy { max-width: 60vw; }
}

/* ============================================================
   Mobile (≤820px) — a crafted, linearized version of the page.
   JS adds body.mobile at boot and SKIPS Lenis + the pinned scrub
   entirely (main.js), so none of the walkthrough's inline GSAP
   styles exist here: layers stack in a curated order via flex,
   the CSS-built visuals (pills, Slack cards, decision packet)
   restyle to phone width, and light scroll-reveals (.m-rv, also
   set up in main.js) stand in for the desktop scrub.
   ============================================================ */
@media (max-width: 820px) {
  html, body { overflow-x: hidden; }   /* pills + glows intentionally bleed past the edges */

  /* --- nav --- */
  .nav { padding: 14px 20px; }
  .nav__logo { height: 17px; }
  .nav__right { gap: 14px; }
  .nav__link { font-size: 14px; }
  .nav__cta { font-size: 13px; padding: 9px 16px; }

  /* --- walkthrough → curated vertical flow --- */
  #stage { height: auto; overflow: visible; display: flex; flex-direction: column; }
  .layer { position: relative; inset: auto; }
  .edge-fade, .scene-glow, .hero__glow { display: none; }

  .hero                { order: 1; }
  .copy[data-copy='2'] { order: 2; }
  .chat-win            { order: 3; }
  .copy[data-copy='4'] { order: 4; }
  .copy[data-copy='5'] { order: 5; }
  .slack-cards         { order: 6; }
  .finale              { order: 7; }   /* last: its blue glow dome hands off into #use-cases */
  .app-layer           { display: none; }   /* the inbox visual belonged to "A home for your decisions" (removed for now) */

  /* --- hero: full-viewport opener with its own soft bloom ---
     min(100vh, 100svh) == svh in effect (the smaller of the two on phones with
     dynamic browser chrome), written this way because bare svh mis-renders in
     some embedded/capture contexts. */
  /* z-order: bloom (::after, -1) < pills (1) < headline/sub (2). The hero itself must NOT
     form a stacking context (desktop gives it z-index:2) or the bloom would cover the pills. */
  .hero { min-height: min(100vh, 100svh); padding: 110px 24px 120px; z-index: auto; }
  .hero__title, .hero__sub, .hero__cta, .hero__note { z-index: 2; }
  .hero::after {   /* stand-in for the desktop hero__glow's top sliver: white → lavender rising from the fold */
    content: ""; position: absolute; left: 50%; bottom: -12vh; transform: translateX(-50%);
    width: 170vw; height: 62vh; border-radius: 50%; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, #fff 0%, #c3c0ff 45%, #7b6cff 100%);
    filter: blur(52px); opacity: .85;
  }
  .hero__title { font-size: clamp(32px, 9vw, 54px); }
  .hero__sub { margin-top: 16px; font-size: 16px; max-width: 30ch; margin-left: auto; margin-right: auto; }

  /* --- question pills: a static (gently bobbing) scatter behind the hero text --- */
  .pills { position: absolute; inset: auto 0 auto 0; top: 0; height: min(100vh, 100svh); overflow: hidden; z-index: 1; }
  .pill { padding: 10px 16px; transform: rotate(var(--r)); }
  .pill__title { font-size: 13px; }
  .pill-anchor:nth-child(5), .pill-anchor:nth-child(6) { display: none; }   /* keep a varied four-request field without crowding the phone */
  .pill-anchor:nth-child(1) { left: 6%;  top: 10%; }
  .pill-anchor:nth-child(2) { left: auto; right: -18%; top: 22%; }
  .pill-anchor:nth-child(3) { left: -18%; top: 65%; }
  .pill-anchor:nth-child(4) { left: auto; right: -8%; top: 80%; }
  @media (prefers-reduced-motion: no-preference) {
    .pill-anchor { animation: pillbob 7s ease-in-out infinite alternate; }
    .pill-anchor:nth-child(3) { animation-duration: 8.5s; animation-delay: -2.5s; }
    .pill-anchor:nth-child(4) { animation-duration: 9.5s; animation-delay: -5s; }
    .pill-anchor:nth-child(5) { animation-duration: 8s;   animation-delay: -1.5s; }
  }

  /* --- copy blocks: normal text sections --- */
  .copy, .copy--left, .copy--right { max-width: none; padding: 72px 24px 28px; left: auto; right: auto; }
  .copy__title { font-size: clamp(30px, 8.5vw, 40px); }
  .copy__body { margin-top: 14px; max-width: 42ch; font-size: 16px; }

  /* --- Monnet Chat: a static product card (all rows visible — the scrub never runs here) --- */
  .chat-win { position: relative; right: auto; top: auto; margin: 8px auto 0; width: calc(100% - 48px); max-width: 460px; --chat-fs: 16px; }
  .chat__bubble { white-space: normal; border-radius: 1.3em; }   /* wrapped multi-line text on phones — capsule radius would clip awkwardly */

  /* --- inbox visual: the List PNG as a floating product card --- */
  .app-layer { padding: 4px 24px 0; }
  .app { position: relative; left: auto; top: auto; width: 100%; height: auto;
         -webkit-mask-image: none; mask-image: none; }
  .app__base, .app__main { display: none; }
  .app__inbox { position: relative; left: auto; top: auto; bottom: auto; width: min(100%, 340px); margin: 0 auto; overflow: visible; }
  .app__list { position: relative; width: 100%; background: #fff; border: 1px solid var(--line-soft);
               border-radius: 20px; box-shadow: var(--shadow-lg); padding: 10px 0; }

  /* --- Slack outreach: static stacked cards, replies visible --- */
  .slack-cards { position: relative; right: auto; top: auto; margin: 4px auto 0; padding: 0 24px;
                 width: 100%; max-width: 480px; --card-fs: clamp(14px, 4.1vw, 17px); }
  .slack-cards::before { left: -6%; top: -3em; width: 112%; height: 110%; }
  .scard { position: relative; margin-bottom: 14px; }
  .scard:nth-child(2) { rotate: .6deg; }    /* standalone rotate — survives the .m-rv reveal's translate swap */
  .scard:nth-child(1) { rotate: -.5deg; }
  .scard__reply { margin-top: .6em; }       /* desktop gets this gap from the GSAP reply tween, which never runs here */

  /* --- Great proposals + decision packet --- */
  .finale, .finale--packet { padding: 88px 0 0; gap: 22px; min-height: auto; }
  .finale__text { padding: 0 24px; max-width: none; }
  .finale--packet .copy__body { margin: 14px auto 0; max-width: 42ch; }
  .finale--packet .finale__glow {   /* same dome-top pillar, pinned to the section's own bottom edge so the
                                       solid #5959fc meets #use-cases' identical top color right at the seam.
                                       opacity: 1 — the base rule ships it hidden for GSAP to fade in, but the
                                       walkthrough scrub never runs on mobile */
    opacity: 1;
    left: 50%; bottom: -8vh; transform: translateX(-50%);   /* overshoot: the blurred bottom edge hides under #use-cases' opaque bg */
    width: 220vw; height: 96%;
    border-radius: 50% 50% 0 0 / 34% 34% 0 0;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #e9e9ff 18%, #a9a9ff 42%, #5959fc 64%, #5959fc 100%);
    filter: blur(34px);
  }
  .packet { width: 100%; max-height: 64vh; padding: 18px 20px 0;
            -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%); }
  .dpacket { padding: 26px 20px 24px; border-radius: 24px; font-size: 13.5px; }
  .dpk__title { font-size: 21px; }
  .dpk__carousel { overflow-x: auto; -webkit-overflow-scrolling: touch; }   /* the carousel actually swipes on touch */
  .dpk__opt { flex-basis: 82%; }

  /* --- use cases: tap-to-switch tabs (the scroll-pin is desktop-only) --- */
  #use-cases { margin-top: 0; padding-top: clamp(88px, 16vh, 160px); padding-bottom: 96px; }   /* no pin on mobile — the -25vh overlap would cover the static finale */
  #use-cases::after { display: none; }   /* the finale pillar already carries the bloom into the seam here */
  .uc-head__title { font-size: clamp(32px, 9vw, 44px); }
  .uc-head__sub { margin-top: 12px; font-size: 16px; }
  .uc-panel { margin-top: 28px; gap: 12px; }
  .uc-tabs { gap: 12px; }
  .uc-tab { min-height: 0; padding: 16px 20px; font-size: 15.5px; line-height: 22px; border-radius: 22px; gap: 8px; }
  .uc-tab__label { font-size: 10.5px; line-height: 14px; padding: 3px 10px; }
  .uc-detail { min-height: 0; padding: 24px 20px; border-radius: 24px; }
  .uc-detail__title { font-size: 20px; line-height: 27px; }
  .uc-detail__tag { font-size: 10.5px; line-height: 14px; }
  .uc-detail__problem { margin-top: 18px; }
  .uc-detail__approach { margin-top: 18px; }
  .uc-detail__body { margin-top: 8px; font-size: 15px; line-height: 23px; }
  .uc-detail__pre { margin-top: 8px; font-size: 15px; line-height: 23px; }
  .uc-detail__chips { gap: 10px; padding-top: 22px; }
  .uc-detail__mark { width: 26px; height: 26px; margin-right: 4px; }
  .uc-chip { height: 30px; padding: 5px 12px; font-size: 13px; line-height: 18px; }

  /* --- testimonial / faq / cta --- */
  .lp--full { padding-left: 20px; padding-right: 20px; }
  #proof { padding-top: 48px; }
  .quote-card { border-radius: 28px; padding: 56px 22px; }
  .quote-card__logo { width: 64px; height: 64px; }
  .quote-card__text { margin-top: 32px; font-size: 19px; }
  .quote-card__by { margin-top: 28px; }
  #faq { padding-top: 96px; padding-bottom: 88px; }
  .faq-grid { row-gap: 26px; }
  .faq-grid__title { font-size: clamp(30px, 8.6vw, 40px); }
  .faq__q { padding: 18px 0; font-size: 16px; }
  .faq__icon { width: 36px; height: 36px; }
  .faq__a { padding: 0 46px 20px 0; font-size: 15.5px; }
  .cta-band { border-radius: 22px; padding: 44px 20px; }
  .cta-band__title { font-size: 19px; }
  .hero__cta { margin-top: 24px; font-size: 15px; padding: 12px 24px; }
  .hero__note { margin-top: 12px; font-size: 13px; }

  /* --- footer --- */
  .lp-footer { padding: 72px 20px 40px; }
  .lp-footer__grid { margin-top: 30px; gap: 26px; }
  .lp-footer__col a { font-size: 15px; }
  .lp-footer__copy { font-size: 14px; margin-top: 6px; }
}

@keyframes pillbob { from { translate: 0 -6px; } to { translate: 0 9px; } }

/* mobile scroll-reveals (elements tagged .m-rv by main.js on mobile boot).
   Standalone translate (not transform) so the reveal composes with elements that carry
   their own transform/rotate (e.g. the tilted Slack cards) instead of clobbering it. */
.m-rv { opacity: 0; translate: 0 18px; transition: opacity .7s ease, translate .7s cubic-bezier(.22, .61, .36, 1); }
.m-rv.is-in { opacity: 1; translate: none; }
@media (prefers-reduced-motion: reduce) {
  .m-rv { opacity: 1; translate: none; transition: none; }
  .pill-anchor { animation: none; }
}