/* digital-me.css. Shared stylesheet for the Digital Me landing page (extracted from the inline build). */
/* ============================================================
   DIGITAL ME. SHARED SYSTEM (base, from 02-watched)
   ============================================================ */
/* fix 44: Inter Tight is the site font (body, headings, giant words, eyebrows). JetBrains Mono is
   retained only for the mono UI baked into the dark phone screens. */
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");
@font-face { font-family:"TWK Lausanne"; src:url("../assets/aurora-prototype/fonts/TWKLausanne-150.woff2") format("woff2"); font-weight:150; font-style:normal; font-display:swap; }
@font-face { font-family:"TWK Lausanne"; src:url("../assets/aurora-prototype/fonts/TWKLausanne-300.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"TWK Lausanne"; src:url("../assets/aurora-prototype/fonts/TWKLausanne-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
:root {
  --sr-navy:#0E113A; --sr-navy-2:#192670; --sr-lapis:#3458E0; --sr-stone:#3F3F51; --sr-grey:#EDF3FF; --sr-white:#FFFFFF;
  --sr-magenta:#FF3D8C; --sr-purple:#D89DF0; --sr-turquoise:#B8F4FF; --sr-cherry:#E03458;
  --sr-lapis-50:#EEF2FE; --sr-lapis-100:#DCE5FD; --sr-lapis-200:#B9CBFB; --sr-lapis-300:#8AA7F6; --sr-lapis-400:#5C82EE; --sr-lapis-500:#3458E0; --sr-lapis-600:#2944BC; --sr-lapis-700:#1F3494;
  --sr-navy-50:#E7E8F0; --sr-navy-100:#C8CAD8; --sr-navy-200:#989DBC; --sr-navy-300:#6A719C; --sr-navy-400:#3D4778; --sr-navy-500:#192670; --sr-navy-600:#131C56; --sr-navy-700:#0E113A;
  --grad-navy-lapis:linear-gradient(135deg,#0E113A 0%,#3458E0 100%); --grad-lapis-lime:linear-gradient(135deg,#3458E0 0%,#FF3D8C 100%); --grad-navy-purple:linear-gradient(135deg,#0E113A 0%,#D89DF0 100%); --grad-hero-135:linear-gradient(135deg,#0E113A 0%,#192670 40%,#3458E0 100%);
  /* fix 44 brand skin: light canvas, navy ink, magenta accent kept, brand blue added. --bg-deep
     stays dark on purpose: it is the phone screen background, and the dark phone is the hero object
     the light page orbits (plan: keep the phone and its aurora screens unchanged). */
  --canvas:#FFFFFF; --canvas-tint:#F5F6F8; --bg-deep:#06082A; --ink:#0A0D31; --ink-soft:rgba(10,13,49,0.68); --ink-fade:rgba(10,13,49,0.46); --me:#FF3D8C; --sr-magenta:#FF3D8C; --brand-blue:#010ED0; --accent:var(--sr-magenta); --accent-glow:rgba(255,61,140,0.40); --accent-soft:rgba(255,61,140,0.18); --bg-hue:240; --chapter-accent:#4653D6; /* fix 44d: per-chapter accent, published by the colour-journey engine */
  --type-display-xl:clamp(96px,18vw,280px); --type-cinema:12vw; --type-display-l:clamp(48px,7.5vw,112px); --type-display-m:clamp(36px,5.5vw,72px); --type-body-l:clamp(20px,1.8vw,25px); /* fix 39: larger common under-hero body, all chapters */ --type-body:16px; --phone-width:clamp(280px,26vw,420px); --phone-height:calc(var(--phone-width) * 2.1667);
}
/* §48 fix 15: register --enter as an interpolatable number so the travel-card slide-in transition
   (transform = calc(var(--in-x) * var(--enter))) animates smoothly instead of jumping. */
@property --enter {
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}
/* §28.2 nuclear full-bleed (overrides any centred-frame constraint) */
/* fix 44c (step 3): scoped under .sdm-root. The cinema now renders inside the theme page with the
   real header and footer, whose own section/main/.container elements this rule must never touch.
   In the standalone build the body carries class sdm-root, so behaviour there is unchanged. */
*, *::before, *::after { box-sizing:border-box; }
html { width:100% !important; margin:0 !important; padding:0 !important; }
/* fix 44c: overflow-x CLIP, not hidden. The theme sets html { overflow: auto scroll }, which stops
   body overflow propagating to the viewport; overflow-x:hidden would then make body its own scroll
   container and every position:sticky track would pin to body (which never scrolls) instead of the
   viewport, killing all pinning. clip clips without creating a scroll container (42.2b precedent). */
body { width:100% !important; min-width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; overflow-x:clip; background:var(--canvas); }
.sdm-root .chapter, .sdm-root section, .sdm-root .full-page, .sdm-root .page, .sdm-root .wrap, .sdm-root .container, .sdm-root .layout, .sdm-root main { width:100vw !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important; padding-left:0 !important; padding-right:0 !important; }
.chapter-inner { max-width:1440px; margin:0 auto; padding:0 clamp(24px,4vw,64px); }

/* fix 44c (step 3): the cinema's defensive base. Theme and Elementor globals coexist with this
   file now. The wrapper re-anchors inherited typography (neutralising the site's global
   "body { color: rgba(0,0,0,0.75) !important }" case-study rule, which only hits the body element
   itself), and the :where() resets sit at just .sdm-root's specificity (0,1,0): they beat every
   element-selector rule from the theme (including the stray global "li, ul, div, h1" typography in
   wp-custom-css) while losing to every classed cinema rule below, so nothing inside this file
   needs rewriting. Typographic properties only; layout is untouched. */
.sdm-root { font-family:"Inter Tight","TWK Lausanne",system-ui,sans-serif; font-weight:400; font-size:16px; color:var(--ink); line-height:1.5; -webkit-font-smoothing:antialiased; }
.sdm-root :where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,ul,ol,li,div,span,a,button,em,strong,small) { font-family:inherit; font-size:inherit; line-height:inherit; color:inherit; font-weight:inherit; }
.sdm-root :where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,ul,ol) { margin:0; padding:0; }
.sdm-root :where(ul,ol) { list-style:none; }
.sdm-root :where(a) { text-decoration:none; }
/* fix 49.1 + fix 50: authored mobile caption variants, CLASS-WIDE gating. dm-full is the desktop
   copy (visible by default everywhere), dm-mobile exists only for phones; the max-width 767 block
   swaps them. Scoped purely by the classes under .sdm-root so EVERY captioned chapter is covered
   wherever the variants live (story captions, roadmap, and any future watched or bridge copy),
   with !important so no theme rule can flip a variant back on. */
.sdm-root .dm-mobile { display: none !important; }
/* fix 50 ROOT CAUSE: the theme ships p:empty { display: none } (elementor-all.css). The
   typewriter blanks caption paragraphs before typing, the theme then hid them as :empty, and the
   49.1 visibility filter skipped hidden paragraphs, so captions never typed and stayed invisible
   at every width. Inside the cinema, empty paragraphs must behave normally (the typed reveal
   depends on it); the dm gating above still wins via !important. */
.sdm-root p:empty { display: block; }
/* fix 44c: the Elementor kit prints its global button styling INLINE in the footer, after this
   stylesheet and at class+element specificity, so single-class cinema buttons lose to it (the nav
   arrow rendered as a brand-blue kit button). Two-class rules re-assert the cinema chrome and can
   never lose, whatever the print order. */
.sdm-root button { -webkit-appearance:none; appearance:none; }
.sdm-root .nav-arrow { background:none; border:none; padding:0; box-shadow:none; color:rgba(10,13,49,0.55); }
.sdm-root .nav-arrow:hover { color:rgba(10,13,49,0.9); background:none; }
.sdm-root .nav-arrow.nav-active { color:rgba(10,13,49,0.95); }
/* fix 50.2a: the kit's inline button styling also bled min-width/padding into the control and
   squashed the circle to 50x44. Enforce the true geometry at two-class specificity. */
.sdm-root .back-top { background:rgba(10,13,49,0.05); border:1px solid rgba(10,13,49,0.22); border-radius:50%; box-shadow:none; color:rgba(10,13,49,0.55); width:44px; height:44px; min-width:0; min-height:0; padding:0; box-sizing:border-box; }
.sdm-root .back-top:hover { color:rgba(10,13,49,0.95); border-color:rgba(10,13,49,0.5); background:rgba(10,13,49,0.05); }
.sdm-root .modal-close { background:none; border:none; box-shadow:none; color:var(--ink-fade); }
*,*::before,*::after { box-sizing:border-box; }
html,body { font-family:"Inter Tight","TWK Lausanne",system-ui,sans-serif; font-weight:400; color:var(--ink); background:var(--canvas); margin:0; padding:0; width:100%; min-height:100%; -webkit-font-smoothing:antialiased; line-height:1.5; }
body { overflow-x:clip; } /* fix 44c: clip, not hidden (see the full-bleed note above) */
html { scrollbar-width:thin; scrollbar-color:var(--sr-navy-2) var(--canvas); }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:var(--canvas); }
::-webkit-scrollbar-thumb { background:var(--sr-navy-2); border-radius:8px; }
::selection { background:var(--sr-lapis); color:var(--sr-white); }
:focus-visible { outline:2px solid var(--sr-magenta); outline-offset:4px; border-radius:4px; }
.eyebrow { font-family:"Inter Tight",sans-serif; font-weight:600; font-size:clamp(13px,1vw,15px); letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-fade); } /* fix 44: eyebrows on Inter Tight uppercase for full brand consistency */
.me { color:var(--me); }
.aurora { position:fixed; inset:0; z-index:-1; background:var(--canvas); overflow:hidden; }
.aurora-blob { position:absolute; border-radius:50%; filter:blur(120px); opacity:0.55; will-change:transform; }
.aurora-blob-a { width:60vw; height:60vw; left:-10vw; top:-15vw; background:radial-gradient(circle,var(--sr-purple) 0%,var(--sr-turquoise) 60%,transparent 100%); animation:sdm-aurora-slow 22s ease-in-out infinite alternate; }
.aurora-blob-b { width:55vw; height:55vw; right:-8vw; bottom:-12vw; background:radial-gradient(circle,var(--sr-turquoise) 0%,var(--sr-navy-2) 70%,transparent 100%); animation:sdm-aurora 26s ease-in-out infinite alternate-reverse; }
.aurora-vignette { position:absolute; inset:0; background:radial-gradient(ellipse at center,transparent 40%,rgba(6,8,42,0.7) 100%); }
.glass { background:rgba(25,38,112,0.18); border:1px solid rgba(237,243,255,0.10); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); border-radius:18px; }
.glass-pill { background:rgba(237,243,255,0.06); border:1px solid rgba(237,243,255,0.14); border-radius:999px; padding:8px 16px; }
.btn { font-family:"Inter Tight",sans-serif; font-weight:600; font-size:14px; padding:14px 28px; border-radius:999px; border:1px solid transparent; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; transition:transform 200ms ease,box-shadow 200ms ease,background 200ms ease; }
.btn-primary { background:var(--sr-magenta); color:var(--sr-navy); box-shadow:0 8px 32px rgba(255,61,140,0.32); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 12px 40px rgba(255,61,140,0.42); }
.btn-secondary { background:transparent; color:var(--ink); border-color:rgba(237,243,255,0.32); }
.btn-secondary:hover { background:rgba(237,243,255,0.06); }
.btn-ghost { background:rgba(237,243,255,0.04); color:var(--ink); border-color:rgba(237,243,255,0.18); }
.btn-ghost:hover { background:rgba(237,243,255,0.08); }
.btn-sm { padding:10px 18px; font-size:13px; }
@keyframes sdm-aurora { 0%{transform:translate(0,0) scale(1);} 100%{transform:translate(8vw,-6vw) scale(1.15);} }
@keyframes sdm-aurora-slow { 0%{transform:translate(0,0) scale(1);} 100%{transform:translate(-6vw,8vw) scale(1.1);} }
@keyframes sdm-breathe { 0%,100%{opacity:0.85;transform:scale(1);} 50%{opacity:1;transform:scale(1.02);} }
@keyframes sdm-breathe-strong { 0%,100%{opacity:0.7;transform:scale(0.98);} 50%{opacity:1;transform:scale(1.04);} }
@keyframes sdm-rise { 0%{opacity:0;transform:translateY(24px);} 100%{opacity:1;transform:translateY(0);} }
@keyframes sdm-rise-soft { 0%{opacity:0;transform:translateY(12px);} 100%{opacity:1;transform:translateY(0);} }
@keyframes sdm-rise-cinema { 0%{opacity:0;transform:translateY(48px);letter-spacing:0.04em;} 100%{opacity:1;transform:translateY(0);letter-spacing:-0.02em;} }
@keyframes sdm-sheet-up { 0%{opacity:0;transform:translateY(60%);} 100%{opacity:1;transform:translateY(0);} }
@keyframes sdm-scan { 0%{transform:translateY(-100%);opacity:0;} 50%{opacity:1;} 100%{transform:translateY(100%);opacity:0;} }
@keyframes sdm-pulse-ring { 0%{transform:translate(-50%,-50%) scale(0.85);opacity:0.9;} 100%{transform:translate(-50%,-50%) scale(1.6);opacity:0;} }
@keyframes sdm-rotate-slow { 0%{transform:rotate(0);} 100%{transform:rotate(360deg);} }
@keyframes sdm-holo-shift { 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} }
@keyframes sdm-shimmer { 0%{background-position:-200% 0;} 100%{background-position:200% 0;} }
@keyframes sdm-glow-sweep { 0%{opacity:0;transform:translateX(-100%);} 50%{opacity:1;} 100%{opacity:0;transform:translateX(100%);} }
@keyframes sdm-bob { 0%,100%{transform:translate(-50%,-50%) translateY(0);} 50%{transform:translate(-50%,-50%) translateY(-8px);} }
@keyframes sdm-dot { 0%,80%,100%{opacity:0.3;} 40%{opacity:1;} }

/* ---- Hero-only keyframes (from 01-hero) ---- */
@keyframes sdm-morph-in {
  0%   { opacity:0; transform:translateX(-50%) scale(0.96); }
  60%  { opacity:1; transform:translateX(-50%) scale(1.05); }
  100% { opacity:1; transform:translateX(-50%) scale(1.00); }
}
@keyframes sdm-fade-out { 0%{opacity:1;} 100%{opacity:0;transform:translateX(-50%) translateY(-12px);} }
@keyframes sdm-chev { 0%,100%{transform:translateX(-50%) translateY(0);opacity:0.5;} 50%{transform:translateX(-50%) translateY(8px);opacity:1;} }
@keyframes sdm-screen-light { 0%{opacity:0;} 100%{opacity:1;} }

/* ---- Closer-only keyframe (from 11-closer) ---- */
@keyframes sdm-phone-recede { 0%{opacity:1;transform:translate(-50%,-50%) scale(1);} 100%{opacity:0;transform:translate(-50%,-50%) scale(0.6);} }

/* ============================================================
   PHONE. persistent hero (full-page: no base animation)
   ============================================================ */
.phone-hero {
  position:fixed; top:50%; left:50%; width:var(--phone-width); height:calc(var(--phone-width) * 2.05);
  --phone-scale: clamp(0.3, calc(0.3 + var(--p,0) * 1.75), 1);
  transform:translate(-50%,-50%) scale(var(--phone-scale));
  opacity:clamp(0, calc(var(--p,0) * 2.5), 1);
  z-index:10; filter:drop-shadow(0 30px 60px rgba(0,0,0,0.6));
}
/* §30.1 iPhone frame asset is the visible phone shape; screen content sits inside the bezel */
.phone-frame-img { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.phone-island { position:absolute; top:3%; left:33%; width:34%; height:5%; border-radius:999px; background:#000; z-index:4; pointer-events:none; }
/* during opening: wireframe reveal then breathe */
/* settled: bob forever */
/* recede: closer */
/* dynamic island is baked into iphone-frame.svg */
.phone-hero .screen { position:absolute; top:11.5%; left:5.5%; right:5.5%; bottom:3.5%; border-radius:8% / 4%; overflow:hidden; background:var(--bg-deep); z-index:1; }
.screen-strip { position:absolute; inset:0; display:flex; flex-direction:column; will-change:transform; transform:translateY(calc(var(--screen-index, 0) * -100%)); transition:transform 720ms cubic-bezier(0.22,1,0.36,1); }
.screen-content { position:relative; width:100%; height:100%; flex:0 0 100%; overflow:hidden; opacity:1 !important; display:block !important; }
.screen-capture { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.scr { position:absolute; inset:0; display:flex; flex-direction:column; padding:46px 20px 22px; background:radial-gradient(ellipse at 50% 0%, rgba(53,88,224,0.16), transparent 55%), var(--canvas); }
.scr-status { position:absolute; top:18px; left:24px; right:24px; display:flex; justify-content:space-between; font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:0.08em; color:var(--ink-soft); z-index:4; }
.scr-title { font-weight:150; font-size:24px; letter-spacing:-0.01em; margin:4px 0 16px; }
.scr-eyebrow { font-family:"JetBrains Mono",monospace; font-size:9px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-fade); }

/* hero screen content (brand mark). from 01-hero */
.screen-hero { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at 50% 38%, rgba(53,88,224,0.32), transparent 60%), var(--canvas); opacity:1; }
.screen-hero.lit { animation:sdm-screen-light 800ms ease-out forwards; }
.screen-hero-logo { width:82%; max-height:38%; object-fit:contain; height:auto; filter:drop-shadow(0 8px 40px rgba(184,244,255,0.3)); animation:sdm-breathe 6s ease-in-out infinite; }
.screen-pulse { position:absolute; top:50%; left:50%; width:160px; height:160px; border-radius:50%; border:2px solid var(--sr-magenta); transform:translate(-50%,-50%); opacity:0; pointer-events:none; }
.screen-pulse.go { animation:sdm-pulse-ring 1100ms ease-out forwards; }
.screen-hero-foot { position:absolute; bottom:28px; left:0; right:0; display:flex; flex-direction:column; align-items:center; gap:6px; opacity:0.78; }
.screen-hero-poweredby { font-family:"JetBrains Mono",monospace; font-size:9px; letter-spacing:0.22em; color:var(--sr-white); }
.screen-hero-sr { height:14px; width:auto; display:block; }

/* TRAVEL IMAGE CARDS. §48 fix 27: TimeFrame-style choreography. The fix-27 engine computes each
   card's position/rotation/scale every glide frame (lerped scroll) and writes style.transform
   directly: pile materialise -> radial expansion (shared ease-out, fixed per-card rotation) ->
   hold with a 2.5vh breath -> convergence into the phone (scale to 0.72, rotation to 0, z drops
   behind the phone as it crosses the bezel). No opacity tricks in flight. */
.travel-card {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--w);
  aspect-ratio: 3/4;
  opacity: 0; /* the engine ramps it to 1 once during the pile materialise */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.45), 0 6px 18px rgba(0,0,0,0.3);
  z-index: 20;
  pointer-events: none;
  will-change: transform, opacity;
}
/* converging card that has crossed the bezel: render behind the opaque phone so it is clipped by
   the bezel exactly like TimeFrame's gather, with no fade needed */
.travel-card.card-behind { z-index: 5 !important; }
.travel-card img { width:100%; height:100%; object-fit:cover; display:block; }
.travel-card.tall { aspect-ratio:3/4; }
.travel-card.wide { aspect-ratio:4/3; }
.travel-card.square { aspect-ratio:1/1; }
/* Personal-document cards. chapter 3 scroll-driven ingest into the phone (§25.3) */
.document-scatter { --p:0; position:fixed; inset:0; z-index:7; pointer-events:none; opacity:0; transition:opacity .45s ease; }
.doc-card {
  --dx: calc(50vw - var(--x));
  --dy: calc(50vh - var(--y));
  position:fixed; left:var(--x); top:var(--y); width:var(--w); aspect-ratio:1.55/1;
  transform:
    translate(-50%,-50%)
    translate(calc(var(--dx) * var(--p,0)), calc(var(--dy) * var(--p,0)))
    rotate(calc(var(--rot) * (1 - var(--p,0))))
    scale(calc(1 - 0.94 * var(--p,0)));
  opacity:calc(1 - var(--p,0) * var(--p,0));
  border-radius:14px; overflow:hidden;
  box-shadow:0 24px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,61,140,0.28);
  will-change:transform,opacity;
}
.doc-card img { width:100%; height:100%; object-fit:cover; display:block; }

/* ============================================================
   DATA FRAGMENTS. from 01-hero
   ============================================================ */

/* ============================================================
   HERO SLOGAN + WORDMARK + CTA. from 01-hero
   ============================================================ */
.hero-headline {
  position:fixed; left:50%; top:16vh; transform:translateX(-50%);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px;
  font-size:clamp(28px,3.4vw,56px); font-weight:300; line-height:1.1; letter-spacing:-0.015em;
  text-align:center; margin:0; z-index:11; pointer-events:none; max-width:96vw;
}
.hero-headline .beat { opacity:1; display:inline-block; white-space:nowrap; }
.hero-headline .hero-dot { opacity:1; color:var(--sr-magenta); font-weight:600; }
@media (max-width:768px){
  .hero-headline { flex-direction:column; align-items:center; gap:6px; font-size:clamp(24px,6.5vw,36px); }
  .hero-headline .hero-dot { display:none; }
}
/* hero overlays belong to the hero only. hidden in chapters (overrides the forwards-filled reveal animation) */
.hero-cta.hide, .hero-chevron.hide { opacity:0 !important; pointer-events:none !important; transition:opacity 500ms ease; }

.hero-cta {
  left:50%; bottom:3.5vh; transform:translateX(-50%);
  display:flex; gap:12px; opacity:clamp(0, calc((var(--p,0) - 0.6) * 2.5), 1); z-index:12;
}
.hero-chevron {
  position:fixed; left:50%; bottom:0.8vh; transform:translateX(-50%); z-index:12;
  width:24px; height:24px;
}
.hero-chevron svg { animation:sdm-chev 1.8s ease-in-out infinite; }

/* ============================================================
   CINEMA WORD + CHAPTER
   ============================================================ */
.chapter { position:relative; width:100vw; min-height:var(--vph, 100dvh); display:flex; align-items:center; overflow:hidden; }
.chapter-copy { position:relative; z-index:20; max-width:min(520px,42vw); min-width:min(380px,88vw); padding:0 clamp(24px,4vw,48px); word-break:normal; overflow-wrap:break-word; hyphens:none; }
.chapter-copy.left { margin-right:auto; }
.chapter-copy.right { margin-left:auto; text-align:right; }
.chapter-copy h2 { font-weight:150; font-size:var(--type-display-m); letter-spacing:-0.01em; line-height:1.06; margin:14px 0 20px; word-break:normal; overflow-wrap:break-word; hyphens:none; }
.chapter-copy .lead { color:var(--ink-soft); font-size:var(--type-body-l); line-height:1.5; }
@media (max-width:900px){ .chapter-copy { text-align:center; margin:0 auto; padding:0 24px; } .chapter-copy.right { text-align:center; } }

/* ============================================================
   NAVBAR. hidden during opening (01-hero behaviour)
   ============================================================ */
/* .nav-sticky { position:fixed; top:16px; left:50%; transform:translateX(-50%); width:min(1200px,calc(100vw - 32px)); display:flex; align-items:center; justify-content:space-between; padding:10px 18px; z-index:100; } */
/* .nav-sticky.shown { opacity:1; pointer-events:auto; } */
/* .nav-lockup { display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-decoration:none; } */
/* .nav-mark-digitalme { display:block; height:auto; } */
/* .nav-by { display:flex; align-items:center; gap:6px; font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:0.16em; color:var(--ink-fade); text-transform:uppercase; } */
/* .nav-mark-sr { height:16px; width:auto; display:block; } */
/* .nav-links { display:flex; gap:22px; list-style:none; margin:0; padding:0; font-family:"JetBrains Mono",monospace; font-size:12px; text-transform:uppercase; letter-spacing:0.12em; } */
/* .nav-links a { color:var(--ink-soft); text-decoration:none; } */
/* .nav-links a:hover { color:var(--ink); } */
@media (max-width:760px){ .nav-links { display:none; } }

/* ============================================================
   MODAL
   ============================================================ */
.modal-backdrop { position:fixed; inset:0; background:rgba(6,8,42,0.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); z-index:999; display:none; }
.modal-backdrop.open { display:block; }
.modal { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:min(440px,calc(100vw - 32px)); padding:32px; z-index:1000; animation:sdm-rise-soft 320ms ease-out forwards; display:none; }
.modal.open { display:block; }
.modal h2 { font-weight:150; font-size:30px; letter-spacing:-0.01em; margin:0 0 8px; }
.modal p { color:var(--ink-soft); margin:0 0 20px; font-size:15px; }
.modal form { display:flex; flex-direction:column; gap:12px; }
.modal input { font-family:"Inter Tight",sans-serif; font-size:15px; padding:14px 16px; border-radius:12px; border:1px solid rgba(10,13,49,0.14); background:var(--canvas-tint,#F5F6F8); color:var(--ink); }
.modal input::placeholder { color:var(--ink-fade); }
.modal small { display:block; margin-top:14px; color:var(--ink-fade); font-size:12px; }
/* fix 44: waitlist modal reskinned to the light brand (was a dark glass card). */
.modal.glass { background:#FFFFFF; border:1px solid rgba(10,13,49,0.10); box-shadow:0 24px 64px rgba(10,13,49,0.16); }
.modal-close { position:absolute; top:16px; right:18px; background:none; border:none; color:var(--ink-fade); font-size:22px; cursor:pointer; line-height:1; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
  .aurora-blob { animation:none; }
  .travel-card { display:none !important; }
  .phone-hero { animation:none !important; opacity:1 !important; transform:translate(-50%,-50%) scale(1) !important; }
  .phone-hero.recede { opacity:0 !important; }
  .screen-hero { opacity:1 !important; }
  .hero-cta, .hero-chevron { opacity:1 !important; animation:none !important; }
  /* .nav-sticky { opacity:1 !important; pointer-events:auto !important; } */
  .closer-slogan { display:none; }
  .closer-cta-row,.closer-chip { opacity:1 !important; animation:none !important; }
}

/* ============================================================
   CHAPTER-SPECIFIC CSS. 02 WATCHED
   ============================================================ */
.scr-watched { align-items:center; justify-content:center; }
.exfil-stage { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.mydata-node { position:relative; z-index:3; width:96px; height:96px; border-radius:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; background:rgba(25,38,112,0.5); border:1.5px solid var(--sr-lapis-400); box-shadow:0 0 28px rgba(53,88,224,0.4); }
.mydata-node .lbl { font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:0.1em; color:var(--ink); }
.mydata-node .dot { width:8px; height:8px; border-radius:50%; background:var(--sr-cherry); box-shadow:0 0 10px var(--sr-cherry); }
.exfil-card { position:absolute; padding:7px 11px; border-radius:11px; background:rgba(224,52,88,0.10); border:1px solid rgba(224,52,88,0.4); font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:0.04em; color:#F4A6B6; white-space:nowrap; }
.exfil-card.c1 { top:14%; left:8%; } .exfil-card.c2 { top:20%; right:6%; } .exfil-card.c3 { bottom:22%; left:6%; } .exfil-card.c4 { bottom:15%; right:9%; }
.exfil-arrow { position:absolute; height:2px; background:linear-gradient(90deg, rgba(224,52,88,0.7), transparent); transform-origin:left center; z-index:2; overflow:hidden; }
.exfil-arrow::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,160,182,0.9), transparent); animation:sdm-glow-sweep 2.2s ease-in-out infinite; }
.exfil-arrow.a1 { width:120px; top:42%; left:50%; transform:rotate(208deg); animation-delay:0s; }
.exfil-arrow.a2 { width:120px; top:46%; left:50%; transform:rotate(-28deg); }
.exfil-arrow.a3 { width:120px; bottom:40%; left:50%; transform:rotate(150deg); }
.exfil-arrow.a4 { width:120px; bottom:38%; left:50%; transform:rotate(-150deg); }
.exfil-arrow.a2::after { animation-delay:0.4s; } .exfil-arrow.a3::after { animation-delay:0.8s; } .exfil-arrow.a4::after { animation-delay:1.2s; }
.exfil-caption { position:absolute; bottom:26px; left:0; right:0; text-align:center; font-family:"JetBrains Mono",monospace; font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(224,52,88,0.7); }

/* ============================================================
   CHAPTER-SPECIFIC CSS. 03 INWARD
   ============================================================ */
.scr-inward { align-items:center; justify-content:center; }
.inward-stage { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.inward-stage .mydata-node { position:relative; z-index:3; width:96px; height:96px; border-radius:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; background:rgba(25,38,112,0.5); border:1.5px solid rgba(255,61,140,0.6); box-shadow:0 0 28px rgba(255,61,140,0.4); }
.inward-stage .mydata-node .lbl { font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:0.1em; color:var(--ink); }
.inward-stage .mydata-node .dot { width:8px; height:8px; border-radius:50%; background:var(--sr-magenta); box-shadow:0 0 10px var(--sr-magenta); }
.inward-orbit { position:absolute; inset:0; z-index:2; animation:sdm-rotate-slow 18s linear infinite; }
.inward-chip { position:absolute; padding:6px 10px; border-radius:11px; background:rgba(255,61,140,0.10); border:1px solid rgba(255,61,140,0.4); font-family:"JetBrains Mono",monospace; font-size:9px; letter-spacing:0.06em; color:#D8F2B0; white-space:nowrap; display:flex; align-items:center; gap:5px; }
.inward-chip::after { content:"\2192"; font-size:11px; color:var(--sr-magenta); }
.inward-chip.c1 { top:10%; left:50%; transform:translateX(-50%) rotate(90deg); }
.inward-chip.c2 { top:50%; right:6%; transform:translateY(-50%) rotate(180deg); }
.inward-chip.c3 { bottom:10%; left:50%; transform:translateX(-50%) rotate(-90deg); }
.inward-chip.c4 { top:50%; left:6%; transform:translateY(-50%); }
.inward-chip.c5 { top:20%; right:12%; transform:rotate(135deg); }
.inward-chip.c6 { bottom:20%; left:12%; transform:rotate(-45deg); }
.inward-arrow { position:absolute; height:2px; background:linear-gradient(90deg, transparent, rgba(255,61,140,0.7)); transform-origin:right center; z-index:1; overflow:hidden; }
.inward-arrow::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(216,242,176,0.9), transparent); animation:sdm-glow-sweep 2.2s ease-in-out infinite; }
.inward-arrow.a1 { width:110px; top:42%; right:50%; transform:rotate(-28deg); animation-delay:0s; }
.inward-arrow.a2 { width:110px; top:46%; right:50%; transform:rotate(208deg); }
.inward-arrow.a3 { width:110px; bottom:40%; right:50%; transform:rotate(28deg); }
.inward-arrow.a4 { width:110px; bottom:38%; right:50%; transform:rotate(-208deg); }
.inward-arrow.a2::after { animation-delay:0.4s; } .inward-arrow.a3::after { animation-delay:0.8s; } .inward-arrow.a4::after { animation-delay:1.2s; }
.inward-caption { position:absolute; bottom:26px; left:0; right:0; text-align:center; font-family:"JetBrains Mono",monospace; font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,61,140,0.7); }

/* ============================================================
   CHAPTER-SPECIFIC CSS. 04 MEET
   ============================================================ */
.scr-meet { align-items:center; justify-content:center; text-align:center; background:radial-gradient(ellipse at 50% 38%, rgba(255,61,140,0.14), transparent 60%), radial-gradient(ellipse at 50% 100%, rgba(53,88,224,0.22), transparent 55%), var(--canvas); }
.meet-stage { position:relative; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; padding:0 18px; }
.meet-orb { width:120px; height:120px; border-radius:50%; background:radial-gradient(circle at 38% 32%, var(--sr-magenta) 0%, var(--sr-turquoise) 38%, var(--sr-lapis) 100%); box-shadow:0 0 48px rgba(255,61,140,0.55), 0 0 96px rgba(255,61,140,0.28), inset 0 0 24px rgba(255,255,255,0.25); animation:sdm-breathe 4s ease-in-out infinite; }
.meet-greeting { font-family:"TWK Lausanne",sans-serif; font-weight:300; font-size:18px; line-height:1.4; letter-spacing:-0.01em; color:var(--ink); max-width:240px; }
.meet-actions { display:flex; flex-direction:column; align-items:stretch; gap:10px; width:200px; }
.meet-pill { font-family:"TWK Lausanne",sans-serif; font-weight:600; font-size:13px; padding:11px 20px; border-radius:999px; border:1px solid transparent; cursor:pointer; text-align:center; transition:transform 200ms ease,background 200ms ease; }
.meet-pill-primary { background:var(--sr-magenta); color:var(--sr-navy); box-shadow:0 6px 22px rgba(255,61,140,0.32); }
.meet-pill-primary:hover { transform:translateY(-1px); }
.meet-pill-ghost { background:transparent; color:var(--ink); border-color:rgba(237,243,255,0.30); }
.meet-pill-ghost:hover { background:rgba(237,243,255,0.06); }

/* ============================================================
   CHAPTER-SPECIFIC CSS. 05 VAULT
   ============================================================ */
.scr-vault { align-items:stretch; justify-content:flex-start; }
.vault-grid { display:grid; grid-template-columns:repeat(2,1fr); grid-auto-rows:1fr; gap:10px; flex:1 1 auto; min-height:0; margin-bottom:14px; }
.vault-tile { display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:8px; padding:14px 13px; background:rgba(25,38,112,0.22); border:1px solid rgba(237,243,255,0.10); border-radius:14px; backdrop-filter:blur(12px) saturate(140%); -webkit-backdrop-filter:blur(12px) saturate(140%); }
.vault-tile .vault-ico { display:block; width:22px; height:22px; }
.vault-tile .vault-ico svg { display:block; width:22px; height:22px; stroke:var(--sr-magenta); fill:none; }
.vault-tile .vault-cat { font-family:"TWK Lausanne",sans-serif; font-weight:300; font-size:13px; letter-spacing:-0.01em; color:var(--ink); line-height:1.15; }
.vault-tile .vault-val { font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:0.04em; color:var(--ink-soft); }
.vault-foot { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; }
.vault-foot svg { display:block; width:13px; height:13px; stroke:var(--sr-magenta); fill:none; }
.vault-foot span { font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft); }

/* ============================================================
   CHAPTER-SPECIFIC CSS. 06 ASK
   ============================================================ */
.scr-ask { padding-top:42px; }
.ask-thread { position:relative; width:100%; height:100%; display:flex; flex-direction:column; gap:12px; overflow:hidden; padding:6px 2px 2px; }
.ask-bubble-user { align-self:flex-end; max-width:78%; padding:10px 13px; border-radius:16px 16px 4px 16px; background:rgba(53,88,224,0.28); border:1px solid rgba(92,130,238,0.42); color:var(--ink); font-size:12px; line-height:1.4; opacity:0; animation:sdm-rise-soft 520ms cubic-bezier(0.22,1,0.36,1) forwards; animation-delay:0.1s; }
.ask-reply-line { align-self:flex-start; max-width:82%; color:var(--ink-soft); font-size:12px; line-height:1.4; opacity:0; animation:sdm-rise-soft 520ms cubic-bezier(0.22,1,0.36,1) forwards; animation-delay:0.25s; }
.ask-cards { display:flex; flex-direction:column; gap:9px; align-self:stretch; }
.ask-card { border-radius:13px; overflow:hidden; background:rgba(25,38,112,0.32); border:1px solid rgba(237,243,255,0.10); opacity:0; animation:sdm-rise-soft 520ms cubic-bezier(0.22,1,0.36,1) forwards; }
.ask-card:nth-child(1){ animation-delay:0.4s; } .ask-card:nth-child(2){ animation-delay:0.55s; } .ask-card:nth-child(3){ animation-delay:0.7s; }
.ask-card img { display:block; width:100%; height:78px; object-fit:cover; }
.ask-card-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 11px 9px; }
.ask-card-name { font-size:12px; font-weight:300; color:var(--ink); letter-spacing:-0.01em; }
.ask-card-price { font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:0.02em; color:var(--sr-magenta); white-space:nowrap; }
.ask-caption { align-self:flex-start; max-width:88%; padding:9px 12px; border-radius:14px 14px 14px 4px; background:rgba(237,243,255,0.05); border:1px solid rgba(237,243,255,0.08); color:var(--ink-soft); font-size:10.5px; line-height:1.45; opacity:0; animation:sdm-rise-soft 520ms cubic-bezier(0.22,1,0.36,1) forwards; animation-delay:0.85s; }

/* ============================================================
   CHAPTER-SPECIFIC CSS. 07 ACT
   ============================================================ */
.scr-act { align-items:stretch; justify-content:flex-start; }
.act-chip { position:relative; z-index:3; margin-top:14px; display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:16px; background:rgba(237,243,255,0.06); border:1px solid rgba(237,243,255,0.14); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); }
.act-chip .ind { flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:var(--sr-magenta); box-shadow:0 0 12px rgba(255,61,140,0.7); }
.act-chip .ind-txt { display:flex; flex-direction:column; gap:2px; min-width:0; }
.act-chip .ind-lbl { font-family:"JetBrains Mono",monospace; font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-fade); }
.act-chip .ind-val { font-size:13px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.act-sheet { position:absolute; left:0; right:0; bottom:0; z-index:5; padding:14px 22px 24px; border-radius:28px 28px 0 0; background:linear-gradient(180deg, rgba(25,38,112,0.55), rgba(6,8,42,0.92)); border:1px solid rgba(237,243,255,0.12); border-bottom:none; backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%); box-shadow:0 -20px 60px rgba(0,0,0,0.45); animation:sdm-sheet-up 700ms cubic-bezier(0.22,1,0.36,1) both; }
.act-grabber { width:42px; height:4px; border-radius:999px; background:rgba(237,243,255,0.22); margin:0 auto 16px; }
.act-sheet h3 { font-weight:150; font-size:20px; letter-spacing:-0.01em; margin:0 0 14px; }
.act-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0; }
.act-row + .act-row { border-top:1px solid rgba(237,243,255,0.10); }
.act-row .r-lbl { font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-fade); }
.act-row .r-val { font-size:14px; color:var(--ink); text-align:right; }
.act-approve { width:100%; margin-top:18px; }

/* ============================================================
   CHAPTER-SPECIFIC CSS. 08 EARN
   ============================================================ */
.scr-earn { align-items:stretch; justify-content:flex-start; gap:0; }
.earn-balance { margin-top:6px; text-align:center; }
.earn-balance .lbl { font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-fade); }
.earn-amount { font-weight:150; font-size:40px; letter-spacing:-0.01em; line-height:1.1; margin-top:6px; background:linear-gradient(90deg,var(--sr-lapis) 0%,var(--sr-turquoise) 30%,var(--sr-magenta) 60%,var(--sr-purple) 100%); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:sdm-holo-shift 5s ease-in-out infinite; }
.earn-spark { margin:22px 0 18px; }
.earn-spark .spark-cap { font-family:"JetBrains Mono",monospace; font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-fade); margin-bottom:8px; }
.earn-spark svg { display:block; width:100%; height:80px; }
.earn-rows { display:flex; flex-direction:column; }
.earn-row { display:flex; align-items:center; justify-content:space-between; padding:13px 2px; }
.earn-row + .earn-row { border-top:1px solid rgba(237,243,255,0.08); }
.earn-row .er-label { font-size:13px; color:var(--ink-soft); }
.earn-row .er-amt { font-family:"JetBrains Mono",monospace; font-size:13px; color:var(--sr-magenta); }

/* ============================================================
   CHAPTER-SPECIFIC CSS. 09 REAL
   ============================================================ */
.scr-real { justify-content:center; gap:14px; }
.real-watermark { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:240px; height:auto; opacity:0.06; z-index:1; pointer-events:none; user-select:none; }
.real-tiles { position:relative; z-index:3; display:flex; flex-direction:column; gap:14px; }
.real-tile { background:rgba(25,38,112,0.18); border:1px solid rgba(237,243,255,0.10); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); border-radius:18px; padding:18px 18px 16px; display:flex; flex-direction:column; gap:6px; }
.real-icon { width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:rgba(255,61,140,0.12); border:1px solid rgba(255,61,140,0.3); }
.real-icon svg { width:15px; height:15px; display:block; }
.real-metric { font-weight:600; font-size:22px; line-height:1; letter-spacing:-0.01em; color:var(--ink); }
.real-metric.lime { color:var(--sr-magenta); }
.real-sublabel { font-weight:300; font-size:12px; color:var(--ink-soft); letter-spacing:0.01em; }
.real-caption { font-family:"JetBrains Mono",monospace; font-size:9px; letter-spacing:0.06em; color:var(--ink-fade); line-height:1.4; }

/* ============================================================
   CHAPTER-SPECIFIC CSS. 10 NEXT
   ============================================================ */
.scr-next { align-items:stretch; justify-content:flex-start; }
.next-stage { position:relative; flex:1; width:100%; margin-top:8px; }
.next-line { position:absolute; top:6%; bottom:6%; left:50%; width:2px; transform:translateX(-50%); background:linear-gradient(180deg, rgba(237,243,255,0.04), rgba(237,243,255,0.16) 50%, rgba(237,243,255,0.04)); border-radius:2px; }
.next-pin { position:absolute; left:50%; display:flex; align-items:center; gap:0; }
.next-pin.p1 { top:8%; }
.next-pin.p2 { top:35%; }
.next-pin.p3 { top:62%; }
.next-pin.p4 { top:89%; }
.next-dot { position:absolute; left:0; top:50%; transform:translate(-50%,-50%); width:14px; height:14px; border-radius:50%; background:var(--canvas); border:2px solid var(--sr-navy-300); z-index:3; }
.next-pin.current .next-dot { background:var(--sr-magenta); border-color:var(--sr-magenta); box-shadow:0 0 18px rgba(255,61,140,0.85), 0 0 4px rgba(255,61,140,0.6); }
.next-ring { position:absolute; left:0; top:50%; width:14px; height:14px; border-radius:50%; border:2px solid var(--sr-magenta); transform:translate(-50%,-50%); animation:sdm-pulse-ring 2s ease-out infinite; z-index:2; }
.next-label { position:absolute; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:3px; }
.next-pin.p1 .next-label, .next-pin.p3 .next-label { left:26px; text-align:left; align-items:flex-start; }
.next-pin.p2 .next-label, .next-pin.p4 .next-label { right:26px; left:auto; text-align:right; align-items:flex-end; }
.next-quarter { font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:0.12em; color:var(--ink-fade); }
.next-milestone { font-weight:300; font-size:13px; letter-spacing:-0.01em; color:var(--ink-fade); white-space:nowrap; }
.next-pin.current .next-quarter { color:var(--sr-magenta); }
.next-pin.current .next-milestone { color:var(--ink); font-weight:600; }
.next-pin.current .next-label::after { content:"NOW"; font-family:"JetBrains Mono",monospace; font-size:8px; letter-spacing:0.16em; color:var(--sr-navy); background:var(--sr-magenta); border-radius:999px; padding:1px 7px; margin-top:2px; }

/* ============================================================
   CLOSER CSS. from 11-closer
   ============================================================ */
/* closer slogan returns horizontally (same wording as the hero headline), then fades. wordmark grows after */
.closer-slogan { position:fixed; left:50%; top:16vh; transform:translateX(-50%); display:flex; align-items:baseline; gap:22px; white-space:nowrap; font-size:clamp(28px,3.4vw,56px); font-weight:300; line-height:1.1; letter-spacing:-0.015em; margin:0; z-index:11; pointer-events:none; max-width:96vw; opacity:0; transition:opacity .4s; }
.closer-slogan.show { opacity:1; }
.closer-slogan .beat { display:inline-block; opacity:0; transform:translateY(12px); }
.closer-slogan .hero-dot { opacity:0; color:var(--sr-magenta); font-weight:600; }
.closer-slogan.show .beat-1 { animation:sdm-rise-cinema 600ms ease-out 600ms forwards, sdm-fade-out 600ms ease-in 2600ms forwards; }
.closer-slogan.show .hero-dot:nth-child(2) { animation:sdm-rise 500ms ease-out 950ms forwards, sdm-fade-out 600ms ease-in 2600ms forwards; }
.closer-slogan.show .beat-2 { animation:sdm-rise-cinema 600ms ease-out 1100ms forwards, sdm-fade-out 600ms ease-in 2600ms forwards; }
.closer-slogan.show .hero-dot:nth-child(4) { animation:sdm-rise 500ms ease-out 1450ms forwards, sdm-fade-out 600ms ease-in 2600ms forwards; }
.closer-slogan.show .beat-3 { animation:sdm-rise-cinema 600ms ease-out 1600ms forwards, sdm-fade-out 700ms ease-in 3000ms forwards; }
/* Closer: phone holds at centre, wordmark inside its screen (§25.4); only CTAs + chip below */
.chapter-closer { position:relative; width:100vw; min-height:var(--vph, 100dvh); display:flex; align-items:center; justify-content:center; z-index:11; }
.closer-stage { position:relative; z-index:15; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:18px; padding-bottom:8vh; width:100%; min-height:var(--vph, 100dvh); padding-top:calc(50vh + var(--phone-height) / 2 + 32px); }
/* §32.2 closer screen: Digitalme wordmark only, stamp removed (strip-safe: stays a flex item) */
.screen-content[data-chapter="closer"] { display:flex !important; align-items:center !important; justify-content:center !important; background:var(--canvas); }
.screen-content[data-chapter="closer"] .screen-closer-mark { width:78%; max-height:50%; object-fit:contain; filter:drop-shadow(0 0 32px rgba(255,61,140,0.35)); animation:sdm-breathe 6s ease-in-out infinite; }
.screen-content[data-chapter="closer"] .screen-hero-foot,
.screen-content[data-chapter="closer"] .screen-hero-poweredby,
.screen-content[data-chapter="closer"] .screen-hero-sr { display:none !important; }
.closer-cta-row { display:flex; gap:14px; }
.closer-chip { font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:0.18em; color:rgba(10,13,49,0.5); text-transform:uppercase; } /* fix 44b: navy (page-level closer stage, currently unused markup) */

/* MOBILE (≤768px): phone inline; each chapter shows its own screen via .active-mobile (§12.0) */
@media (max-width:768px){
  .phone-hero { position:relative; top:auto; left:auto; transform:none; margin:32px auto; width:clamp(240px,70vw,360px); height:auto; aspect-ratio:9/19.5; animation:none !important; }
  .screen-strip { display:block; transform:none !important; }
  .screen-content { display:none; }
  .screen-content.active-mobile { display:block; }
}

/* §26.1. TimeFrame-style faint travel-grid background */
.cal-grid { position:fixed; left:0; right:0; top:-15vh; height:130vh; z-index:0; display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(6,1fr); pointer-events:none; transform:translateY(var(--cal-y,0px)); }
/* fix 44d (2c): the calendar grid carries the CHAPTER ACCENT (published by the colour-journey
   engine), tiered: base 8 percent, mid tiles 16, highlight tiles 26, so the texture visibly
   shifts identity with each chapter while staying quiet under the navy text. The hairline is an
   inset ring (does not affect layout), and the highlight tiles' dates glow in the accent. */
/* fix 44 2c-v3: the accent now mixes into the LIVE field colour (var(--scroll-bg)) rather than
   white, so the texture rides the whole journey including the dark closer-to-black-footer run. */
.cal-cell { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; background-color:rgba(10,13,49,0.04); background-color:color-mix(in srgb, var(--chapter-accent,#4653D6) 10%, var(--scroll-bg,#fff)); box-shadow:inset 0 0 0 1px rgba(10,13,49,0.06); }
.cal-cell:nth-child(7n+3), .cal-cell:nth-child(11n+5) { background-color:color-mix(in srgb, var(--chapter-accent,#4653D6) 20%, var(--scroll-bg,#fff)); }
.cal-cell:nth-child(13n+8) { background-color:color-mix(in srgb, var(--chapter-accent,#4653D6) 32%, var(--scroll-bg,#fff)); }
.cal-month, .cal-date { font-family:"JetBrains Mono",monospace; letter-spacing:0.18em; color:rgba(10,13,49,0.3); text-transform:uppercase; }
.cal-cell:nth-child(13n+8) .cal-month, .cal-cell:nth-child(13n+8) .cal-date { color:color-mix(in srgb, var(--chapter-accent,#4653D6) 80%, #fff); }
.cal-month { font-size:11px; }
.cal-date { font-size:10px; }
/* §37.3 every chapter is transparent so the .cal-grid behind everything stays visible */
.chapter, section.chapter, .chapter-hero, .chapter-watched, .chapter-inward, .chapter-meet, .chapter-vault, .chapter-ask, .chapter-act, .chapter-earn, .chapter-real, .chapter-next, .chapter-closer { background: transparent !important; }
/* §26.2. scroll-driven background hue (behind the Aurora) */
.bg-scroll-tint { position:fixed; inset:0; z-index:-2; background:radial-gradient(circle at 30% 30%, hsla(var(--bg-hue,240),60%,18%,0.35) 0%, transparent 55%), radial-gradient(circle at 70% 70%, hsla(calc(var(--bg-hue,240) + 60),70%,20%,0.30) 0%, transparent 60%), var(--canvas); transition:background 600ms linear; }
/* §26.3. L/R hero layout: giant title LEFT, phone + cards RIGHT */
.chapter-hero { display:grid; grid-template-columns:44vw 56vw; min-height:var(--vph, 100dvh); width:100vw; align-items:center; padding:0 clamp(24px,4vw,80px); position:relative; z-index:12; }
.hero-left { padding-left:clamp(24px,4vw,80px); padding-right:4vw; }
.hero-title { font-family:"TWK Lausanne",sans-serif; font-weight:200; font-size:clamp(48px,6.5vw,96px); line-height:1.0; letter-spacing:-0.025em; color:var(--ink); margin:0 0 24px 0; text-wrap:balance; }
.hero-sub { font-family:"TWK Lausanne",sans-serif; font-weight:300; font-size:clamp(14px,1.1vw,18px); line-height:1.5; color:var(--ink-soft); max-width:36ch; margin:0; text-transform:lowercase; }
.hero-right { position:relative; height:100%; }
@media (max-width:900px){ .chapter-hero { grid-template-columns:1fr; } .hero-left { padding-right:0; } }

/* §26.5. chapter 2: generic chat window losing data to "the cloud" (replaces abstract MY DATA visual) */
.chat-leak-mockup { position:absolute; inset:0; }
.chat-leak-mockup.show { opacity:1; }
.chat-frame { position:absolute; inset:0; background:#0F1428; border:none; border-radius:0; overflow:hidden; display:flex; flex-direction:column; }
.chat-header { padding:20px 18px 10px; display:flex; align-items:center; gap:8px; }
.chat-dot { width:8px; height:8px; border-radius:50%; background:var(--sr-magenta); }
.chat-title { font-family:"TWK Lausanne",sans-serif; font-size:13px; color:rgba(255,255,255,0.7); }
.chat-thread { flex:1; padding:12px 14px; display:flex; flex-direction:column; gap:10px; overflow:hidden; }
.chat-msg { position:relative; padding:10px 14px; border-radius:16px; max-width:78%; font-size:13px; line-height:1.4; }
.chat-msg--user { align-self:flex-end; background:rgba(255,61,140,0.18); color:#fff; border-bottom-right-radius:4px; }
.chat-msg--ai { align-self:flex-start; background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.85); border-bottom-left-radius:4px; }
.chat-input { padding:12px 14px; border-top:1px solid rgba(255,255,255,0.06); }
.chat-input input { width:100%; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:999px; padding:10px 14px; color:rgba(255,255,255,0.5); font-family:inherit; font-size:13px; }
.bubble-leak { position:absolute; left:50%; top:0; transform:translate(-50%,0); font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:0.06em; color:var(--sr-magenta); white-space:nowrap; pointer-events:none; opacity:0; animation:bubble-leak-fly 24s linear var(--delay,0s) infinite; }
@keyframes bubble-leak-fly { 0%{opacity:0;transform:translate(-50%,0) scale(1);} 3%{opacity:1;} 10%{opacity:1;transform:translate(-50%,-180px) scale(0.95);} 14%{opacity:0;transform:translate(-50%,-240px) scale(0.85);} 100%{opacity:0;} }
.chat-leak-label { position:absolute; top:8px; right:12px; z-index:6; font-family:"JetBrains Mono",monospace; font-size:8px; letter-spacing:0.16em; color:var(--sr-magenta); text-transform:uppercase; opacity:0.85; white-space:nowrap; }
.phone-hero.phone-hidden { opacity:0 !important; pointer-events:none !important; }

/* §32.1 forced scroll-driven background colour cycle (appended last so it wins) */
/* fix 44: light initial canvas; the JS STOPS array now cycles a subtle white -> faint-indigo range. */
:root { --scroll-bg: #FFFFFF; }
body { background: var(--scroll-bg) !important; }
.cal-grid { background: transparent !important; }
.bg-scroll-tint { display: none !important; }
.aurora { opacity: 0.10 !important; } /* fix 44: keep the aurora a whisper on the white canvas */


/* ===== §38 section 38 fixes (appended last) ===== */
/* §38.1 CTAs live only on the closer */
.hero-cta, .cta-row, .floating-cta, .cta-floating, .cta-sticky { position: static !important; display: none !important; }
.closer-stage .closer-cta-row { position: relative !important; display: flex !important; }

/* §38.4 chapter 2 H2: italic "other" */
.chapter-h2 em.italic { font-style: italic; font-weight: 200; }

/* §38.3 chapter 2: persistent phone keeps Digital Me; separate AI Assistant phone beside the copy */
.chapter-watched .chapter-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; align-items: center; }
.ai-chat-mockup { position: relative; width: clamp(220px, 22vw, 320px); aspect-ratio: 9 / 19.5; transform: rotate(-4deg); margin: 0 auto; }
.ai-chat-frame { width:100%; height:100%; background:#0F1428; border:1.5px solid rgba(255,255,255,0.12); border-radius:clamp(28px,3vw,44px); overflow:hidden; display:flex; flex-direction:column; }
.ai-chat-header { padding:16px 16px 8px; display:flex; align-items:center; gap:8px; font-family:"TWK Lausanne",sans-serif; font-size:12px; color:rgba(255,255,255,0.7); }
.ai-chat-header .dot { width:8px; height:8px; border-radius:50%; background:var(--sr-magenta); }
.ai-chat-thread { flex:1; padding:10px 12px; display:flex; flex-direction:column; gap:8px; overflow:hidden; }
.ai-msg { padding:8px 12px; border-radius:14px; max-width:80%; font-size:12px; line-height:1.4; }
.ai-msg--user { align-self:flex-end; background:rgba(255,61,140,0.18); color:#fff; border-bottom-right-radius:4px; }
.ai-msg--ai { align-self:flex-start; background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.85); border-bottom-left-radius:4px; }
.ai-chat-input { padding:10px 12px; border-top:1px solid rgba(255,255,255,0.06); }
.ai-chat-input input { width:100%; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:999px; padding:8px 12px; color:rgba(255,255,255,0.5); font-family:inherit; font-size:12px; }

/* §38.2 calendar tiles continue to the bottom on every viewport (never hidden) */
@media (max-width: 9999px) {
  .cal-grid {
    display: grid !important;
    position: fixed !important;
    inset: 0 !important;
    height: 130vh !important;
    top: -15vh !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }
  .chapter, section.chapter, .chapter-hero, .chapter-watched, .chapter-inward,
  .chapter-meet, .chapter-vault, .chapter-ask, .chapter-act, .chapter-earn,
  .chapter-real, .chapter-next, .chapter-closer {
    background: transparent !important;
  }
}


/* ===== §39 section 39 additions ===== */
/* §39.5 image fit inside the bezel */
.screen-content > img.screen-capture,
.screen-content > img.screen-meet-mark,
.screen-content > img.screen-closer-mark { object-fit: cover !important; object-position: center !important; width: 100% !important; height: 100% !important; display: block !important; }
.screen-content[data-chapter="meet"] img.screen-meet-mark,
.screen-content[data-chapter="closer"] img.screen-closer-mark,
.screen-content[data-chapter="hero"] img.screen-hero-logo { object-fit: contain !important; width: 70% !important; height: auto !important; max-height: 40% !important; }

/* §39.4 chapter 4 (meet) Digitalme wordmark on the phone screen */
.screen-content[data-chapter="meet"] { display:flex !important; flex-direction:column; align-items:center !important; justify-content:center !important; gap:18px; background:var(--canvas); overflow:hidden; }
.screen-meet-bg { position:absolute; inset:-10%; background:radial-gradient(40% 40% at 30% 30%, rgba(180,170,80,0.18) 0%, transparent 60%), radial-gradient(40% 40% at 70% 70%, rgba(120,140,80,0.14) 0%, transparent 65%); filter:blur(28px); z-index:0; }
.screen-meet-mark { position:relative; z-index:2; width:76%; max-height:40%; object-fit:contain; opacity:0; transform:scale(0.7); animation:meet-mark-rise 1400ms cubic-bezier(0.22,1,0.36,1) 200ms forwards; }
.screen-meet-tagline { position:relative; z-index:2; font-family:"TWK Lausanne",sans-serif; font-weight:200; font-size:13px; letter-spacing:0.16em; color:rgba(255,255,255,0.6); text-transform:lowercase; opacity:0; animation:meet-tagline-fade 800ms ease-out 1400ms forwards; }
@keyframes meet-mark-rise { 0%{opacity:0;transform:scale(0.7) translateY(20px);} 60%{opacity:1;transform:scale(1.05) translateY(-4px);} 100%{opacity:1;transform:scale(1.00) translateY(0);} }
@keyframes meet-tagline-fade { 0%{opacity:0;transform:translateY(8px);} 100%{opacity:1;transform:translateY(0);} }

/* §39.3 chapter 2 three-column layout + slide-in from the right */
.chapter-watched { display:grid; grid-template-columns:36vw 28vw 36vw; align-items:center; width:100vw; min-height:var(--vph, 100dvh); position:relative; z-index:5; }
.watched-left { padding:0 4vw; display:flex; flex-direction:column; gap:24px; justify-self:start; opacity:0; transform:translateX(60vw); transition:opacity 700ms cubic-bezier(0.22,1,0.36,1), transform 700ms cubic-bezier(0.22,1,0.36,1); }
.watched-left.in-view { opacity:1; transform:translateX(0); }
.watched-centre { }
.watched-right { display:flex; justify-content:flex-end; align-items:center; padding-right:4vw; }
.watched-left .chapter-h2 { font-size:clamp(40px,4vw,64px); max-width:32vw; text-wrap:balance; }
.watched-left .chapter-body { font-size:var(--type-body-l); max-width:34vw; line-height:1.5; }

/* §39.6 roadmap calendar tiles */
.chapter-next .chapter-inner { display:grid; grid-template-columns:36vw 64vw; align-items:center; width:100vw; min-height:var(--vph, 100dvh); position:relative; z-index:5; }
.roadmap-cal { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; padding:0 4vw 0 0; }
.roadmap-tile { position:relative; background:rgba(28,28,32,0.86); border:1px solid rgba(255,255,255,0.10); border-radius:16px; padding:24px 22px; min-height:220px; display:flex; flex-direction:column; gap:12px; backdrop-filter:blur(8px); transition:transform 200ms ease, border-color 200ms ease; }
.roadmap-tile:hover { transform:translateY(-4px); border-color:rgba(255,220,100,0.4); }
.roadmap-tile-month { font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:0.20em; color:rgba(255,255,255,0.45); text-transform:uppercase; }
.roadmap-tile-date { font-family:"TWK Lausanne",sans-serif; font-weight:600; font-size:36px; line-height:1; letter-spacing:-0.01em; color:rgba(255,220,100,0.95); }
.roadmap-tile-body { font-family:"TWK Lausanne",sans-serif; font-weight:200; font-size:14px; line-height:1.45; color:rgba(255,255,255,0.72); }
.roadmap-tile--live { border-color:rgba(255,220,100,0.6); box-shadow:0 0 32px rgba(255,220,100,0.18); }
.roadmap-tile--live .roadmap-tile-date::after { content:" CF"; color:rgba(255,220,100,1); }

/* §39.7 closer funky waitlist copy */
.closer-funky { max-width:56ch; text-align:center; margin-bottom:28px; display:flex; flex-direction:column; gap:14px; align-items:center; }
.closer-funky-mono { font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:0.32em; color:rgba(255,220,100,0.95); text-transform:uppercase; padding:6px 14px; border:1px solid rgba(255,220,100,0.4); border-radius:999px; display:inline-block; align-self:center; }
.closer-funky-headline { font-family:"TWK Lausanne",sans-serif; font-weight:200; font-size:clamp(28px,3.2vw,48px); line-height:1.1; letter-spacing:-0.015em; color:var(--ink); margin:0; } /* fix 44b */
.closer-funky-sub { font-family:"TWK Lausanne",sans-serif; font-weight:300; font-size:clamp(14px,1vw,16px); line-height:1.5; color:var(--ink-soft); margin:0; } /* fix 44b */

/* §39.2 force the calendar tiles to persist (appended at the very end) */
.cal-grid { display: grid !important; position: fixed !important; inset: 0 !important; top: -15vh !important; height: 130vh !important; transform: translateY(var(--cal-y, 0px)); z-index: 1 !important; pointer-events: none !important; grid-template-columns: repeat(8, 1fr) !important; grid-template-rows: repeat(6, 1fr) !important; }
.cal-cell { display: flex !important; visibility: visible !important; opacity: 1 !important; }
body, html { background: var(--scroll-bg) !important; }
body > *, .chapter, section.chapter,
.chapter-hero, .chapter-watched, .chapter-inward, .chapter-meet,
.chapter-vault, .chapter-ask, .chapter-act, .chapter-earn,
.chapter-real, .chapter-next, .chapter-closer { background-color: transparent !important; background-image: none !important; }


/* ===== §40 section 40 fixes (appended last) ===== */
/* §40.1 keyword highlight colour for chapters that read flat */
.hl { color: var(--sr-magenta); font-weight: 400; }

/* §40.3 closer text sits below the persistent phone, no overlap */
.closer-stage {
  position: relative;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  width: 100%;
  min-height: var(--vph, 100dvh);
  padding-top: calc(50vh + var(--phone-height) / 2 + 48px);
  padding-bottom: 6vh;
}

/* §40.5 roadmap entries render inside the phone screen, like a calendar app */
.screen-content[data-chapter="next"] {
  background: var(--bg-deep);
  overflow: hidden;
}
.screen-roadmap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px 16px 24px;
  gap: 14px;
}
.screen-roadmap-header { display: flex; flex-direction: column; gap: 4px; }
.sr-header-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 0.24em; color: rgba(255, 220, 100, 0.95); text-transform: uppercase; }
.sr-header-title { font-family: "TWK Lausanne", sans-serif; font-weight: 200; font-size: 18px; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.96); }
.screen-roadmap-list { display: flex; flex-direction: column; gap: 8px; flex: 1; overflow-y: auto; }
.sr-entry { display: grid; grid-template-columns: 56px 1fr; gap: 10px; padding: 10px 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; align-items: center; }
.sr-entry--live { background: rgba(74, 222, 128, 0.08); border-color: rgba(74, 222, 128, 0.32); }
.sr-entry-date { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sr-entry-mon { font-family: "JetBrains Mono", monospace; font-size: 8px; letter-spacing: 0.20em; color: rgba(255, 220, 100, 0.85); text-transform: uppercase; }
.sr-entry-num { font-family: "TWK Lausanne", sans-serif; font-weight: 600; font-size: 22px; line-height: 1; color: rgba(255, 220, 100, 0.95); }
.sr-entry-body { display: flex; flex-direction: column; gap: 3px; position: relative; }
.sr-entry-title { font-family: "TWK Lausanne", sans-serif; font-weight: 500; font-size: 13px; color: rgba(255, 255, 255, 0.92); }
.sr-entry-sub { font-family: "TWK Lausanne", sans-serif; font-weight: 200; font-size: 11px; line-height: 1.35; color: rgba(255, 255, 255, 0.55); }
.sr-entry-pill { position: absolute; top: -2px; right: 0; font-family: "JetBrains Mono", monospace; font-size: 8px; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.55); padding: 2px 6px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; }
.sr-entry-pill--live { color: rgba(74, 222, 128, 1); border-color: rgba(74, 222, 128, 0.55); }

/* §40.7 closer copy simplified: one headline above the CTAs */
.closer-funky { max-width: 60ch; text-align: center; margin: 0 auto 24px; }
.closer-funky-headline { font-family: "TWK Lausanne", sans-serif; font-weight: 200; font-size: clamp(20px, 2.2vw, 32px); line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); margin: 0; text-wrap: balance; } /* fix 44b */


/* ===== §41 section 41 fixes (appended last) ===== */
/* §41.1 hero "Your Digital Me" beat renders the Digitalme wordmark inline */
.beat-logotype { height: 0.85em; width: auto; vertical-align: -0.15em; display: inline-block; margin-left: 6px; }

/* §41.3 chapter 6 body copy paragraphs */
.chapter-copy .chapter-body { color: var(--ink-soft); font-size: var(--type-body-l); line-height: 1.5; margin: 0 0 16px; }
.chapter-copy .chapter-body:last-child { margin-bottom: 0; }

/* §41.5 screen content fills the entire visible phone screen on every chapter */
.phone-hero .screen { position: absolute; top: 11.5%; left: 5.5%; right: 5.5%; bottom: 3.5%; border-radius: 8% / 4%; overflow: hidden; background: var(--bg-deep); z-index: 1; }
.screen-strip { position: absolute; inset: 0; display: flex; flex-direction: column; transform: translateY(calc(var(--screen-index, 0) * -100%)); transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; height: 100%; }
.screen-content { flex: 0 0 100%; width: 100%; height: 100%; position: relative; overflow: hidden; display: flex !important; flex-direction: column !important; align-items: stretch !important; }
.screen-content > * { width: 100%; flex: 1 0 auto; }
.screen-content > img.screen-capture { object-fit: cover !important; object-position: 50% 0% !important; width: 100% !important; height: 100% !important; display: block !important; }
.screen-roadmap, .screen-meet-bg-container, .screen-ask, .screen-vault, .screen-act, .screen-earn { width: 100% !important; height: 100% !important; flex: 1 1 100% !important; box-sizing: border-box !important; }
.screen-roadmap-list { flex: 1 1 auto !important; }
/* §41.5 roadmap entries stretch to fill the calendar area */
.screen-roadmap { display: flex; flex-direction: column; height: 100%; padding: 24px 14px 18px; gap: 12px; }
.screen-roadmap-header { flex: 0 0 auto; }
.screen-roadmap-list { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; }
.sr-entry { flex: 1 1 auto; padding: 14px 12px; min-height: 0; }
.sr-entry-body { gap: 4px; }
.sr-entry-title { font-size: 14px; }
.sr-entry-sub { font-size: 12px; line-height: 1.4; }
/* logo-style screen images stay centred and contained inside the bezel */
.screen-content[data-chapter="meet"] img.screen-meet-mark,
.screen-content[data-chapter="closer"] img.screen-closer-mark,
.screen-content[data-chapter="hero"] img.screen-hero-logo { object-fit: contain !important; width: 70% !important; height: auto !important; max-height: 40% !important; flex: 0 0 auto !important; }

/* §41.6 closer copy slides in from the right and settles aligned LEFT, behind the phone */
.chapter-closer { position: relative; width: 100vw; min-height: var(--vph, 100dvh); z-index: 5; }
.closer-stage { display: grid; grid-template-columns: 36vw 28vw 36vw; align-items: center; width: 100%; min-height: var(--vph, 100dvh); padding: 0; }
.closer-left {
  grid-column: 1;
  padding: 0 4vw;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  opacity: 0;
  transform: translateX(80vw);
  transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1), transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.closer-left.in-view { opacity: 1; transform: translateX(0); }
.closer-funky-headline {
  font-family: "TWK Lausanne", sans-serif;
  font-weight: 200;
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink); /* fix 44b */
  margin: 0;
  text-align: left;
  max-width: 32vw;
}
.closer-cta-row { display: flex; gap: 14px; }
.closer-chip { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.18em; color: rgba(10, 13, 49, 0.45); text-transform: uppercase; } /* fix 44b */

/* §41.8 chapter 10 roadmap header shows the Digitalme wordmark inline with "roadmap" */
.sr-header-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "TWK Lausanne", sans-serif;
  font-weight: 200;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.96);
}
.sr-header-logotype { height: 0.95em; width: auto; display: inline-block; }

/* §41.9 background parallax: taller grid, stronger negative drift */
.cal-grid {
  position: fixed !important;
  inset: 0 !important;
  top: -25vh !important;
  height: 200vh !important;
  transform: translateY(calc(var(--cal-y, 0px) * -1));
  display: grid !important;
  grid-template-columns: repeat(8, 1fr) !important;
  grid-template-rows: repeat(12, 1fr) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}


/* ===== §42 section 42 fixes (appended last) ===== */
/* §42.1 nudge capture content down so the iOS status bar clears the dynamic island */
.screen-content[data-chapter="vault"] > img.screen-capture { object-position: 50% 3% !important; }
.screen-content[data-chapter="ask"]   > img.screen-capture { object-position: 50% 3% !important; }
.screen-content[data-chapter="act"]   > img.screen-capture { object-position: 50% 3% !important; }
.screen-content[data-chapter="earn"]  > img.screen-capture { object-position: 50% 3% !important; }

/* §42.2 meet onboarding wordmark sits centred on the screen */
.screen-content[data-chapter="meet"] {
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px;
  background: var(--bg-deep);
  overflow: hidden;
  padding: 0;
}
/* keep the meet children at natural size so justify-content centres them as a group */
.screen-content[data-chapter="meet"] > * { flex: 0 0 auto !important; }
.screen-meet-bg {
  position: absolute; inset: -10%;
  background:
    radial-gradient(40% 40% at 30% 30%, rgba(180,170,80,0.18) 0%, transparent 60%),
    radial-gradient(40% 40% at 70% 70%, rgba(120,140,80,0.14) 0%, transparent 65%);
  filter: blur(28px);
  z-index: 0;
}
.screen-content[data-chapter="meet"] img.screen-meet-mark {
  position: relative;
  z-index: 2;
  width: 72% !important;
  height: auto !important;
  max-height: 32% !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
}
.screen-meet-tagline {
  position: relative;
  z-index: 2;
  font-family: "TWK Lausanne", sans-serif;
  font-weight: 200;
  font-size: 13px;
  letter-spacing: 0.10em;
  color: rgba(255, 255, 255, 0.6);
  text-transform: lowercase;
}

/* §42.3 closer CTAs sit inside the phone screen at the bottom as iOS sheet buttons */
.screen-content[data-chapter="closer"] { background: var(--bg-deep); overflow: hidden; padding: 0; }
.screen-closer { width: 100%; height: 100%; display: flex; flex-direction: column; padding: 24px 16px; gap: 18px; }
.screen-closer-top { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }
.screen-content[data-chapter="closer"] img.screen-closer-mark {
  width: 80% !important;
  height: auto !important;
  max-height: 60% !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
  filter: drop-shadow(0 0 32px rgba(255, 220, 100, 0.30));
}
.screen-closer-bottom { flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; padding-bottom: 14px; }
.closer-screen-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: 999px;
  font-family: "TWK Lausanne", sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  cursor: pointer;
  text-decoration: none;
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
  border: 1.5px solid transparent;
  width: 100%;
}
.closer-screen-btn--primary {
  background: var(--sr-magenta);
  color: var(--sr-navy);
  border-color: var(--sr-magenta);
  box-shadow: 0 8px 32px rgba(255, 61, 140, 0.32);
}
.closer-screen-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 40px rgba(255, 61, 140, 0.42);
}
.closer-screen-btn--ghost {
  background: transparent;
  color: rgba(255, 255, 255, 0.96);
  border-color: rgba(255, 255, 255, 0.30);
}
.closer-screen-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* §42.6 inward and hero phone screens share the wordmark-centred-on-glow look */
.screen-content[data-chapter="inward"],
.screen-content[data-chapter="hero"] {
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  background: var(--bg-deep);
  overflow: hidden;
}
.screen-content[data-chapter="inward"]::before,
.screen-content[data-chapter="hero"]::before {
  content: "";
  position: absolute; inset: -10%;
  background:
    radial-gradient(40% 40% at 30% 30%, rgba(180,170,80,0.12) 0%, transparent 60%),
    radial-gradient(40% 40% at 70% 70%, rgba(120,140,80,0.10) 0%, transparent 65%);
  filter: blur(28px);
  z-index: 0;
  pointer-events: none;
}
.screen-content[data-chapter="inward"] img,
.screen-content[data-chapter="hero"] img {
  position: relative;
  z-index: 2;
  width: 72%;
  height: auto;
  max-height: 32%;
  object-fit: contain;
}

/* §42.5 calendar grid covers the full document height so tiles never run out */
.cal-grid {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  height: 400vh !important;
  transform: translateY(calc(var(--cal-y, 0px) * -1));
  display: grid !important;
  grid-template-columns: repeat(8, 1fr) !important;
  grid-template-rows: repeat(24, 1fr) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}


/* ===== §43 section 43 fixes (appended last) ===== */
/* §43.1 phone screen content fills the visible screen area on every chapter */
/* Force the screen container to be the precise visible screen area of the iPhone SVG. */
.phone-hero .screen {
  position: absolute !important;
  top: 11.5% !important;
  left: 5.5% !important;
  right: 5.5% !important;
  bottom: 3.5% !important;
  border-radius: 8% / 4% !important;
  overflow: hidden !important;
  background: var(--bg-deep) !important;
  z-index: 1 !important;
}

/* The strip and content slots must fill the screen container exactly. */
.screen-strip {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
.screen-content {
  flex: 0 0 100% !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Captures (chat, vault, act, earn) fill the area with cover. */
.screen-content > img.screen-capture {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}

/* Per chapter: nudge content downward inside the container so the status bar
   sits cleanly below the dynamic island without clipping. */
.screen-content[data-chapter="vault"] > img.screen-capture { object-position: center 2% !important; }
.screen-content[data-chapter="ask"]   > img.screen-capture { object-position: center 2% !important; }
.screen-content[data-chapter="act"]   > img.screen-capture { object-position: center 2% !important; }
.screen-content[data-chapter="earn"]  > img.screen-capture { object-position: center 2% !important; }

/* Wordmark slots (hero, inward, meet) centre flexibly inside the screen with a soft glow. */
.screen-content[data-chapter="hero"],
.screen-content[data-chapter="inward"],
.screen-content[data-chapter="meet"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  background: var(--bg-deep) !important;
  position: relative !important;
}
.screen-content[data-chapter="hero"]::before,
.screen-content[data-chapter="inward"]::before,
.screen-content[data-chapter="meet"]::before {
  content: "";
  position: absolute !important;
  inset: -10% !important;
  background:
    radial-gradient(40% 40% at 30% 30%, rgba(180,170,80,0.14) 0%, transparent 60%),
    radial-gradient(40% 40% at 70% 70%, rgba(120,140,80,0.12) 0%, transparent 65%);
  filter: blur(28px);
  z-index: 0 !important;
  pointer-events: none !important;
}
.screen-content[data-chapter="hero"] > *,
.screen-content[data-chapter="inward"] > *,
.screen-content[data-chapter="meet"] > * {
  position: relative !important;
  z-index: 2 !important;
}
.screen-content[data-chapter="hero"] img,
.screen-content[data-chapter="inward"] img,
.screen-content[data-chapter="meet"] img.screen-meet-mark {
  width: 78% !important;
  height: auto !important;
  max-height: 36% !important;
  object-fit: contain !important;
}
.screen-meet-tagline {
  font-family: "TWK Lausanne", sans-serif !important;
  font-weight: 200 !important;
  font-size: 13px !important;
  letter-spacing: 0.10em !important;
  color: rgba(255, 255, 255, 0.55) !important;
  text-transform: lowercase !important;
}

/* Roadmap (chapter 10) fills the screen with the calendar list. */
.screen-content[data-chapter="next"] {
  display: flex !important;
  flex-direction: column !important;
  background: var(--bg-deep) !important;
  padding: 0 !important;
}
.screen-roadmap {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  padding: 18px 12px 14px !important;
  gap: 10px !important;
}
.screen-roadmap-list {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.sr-entry {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* Closer screen with CTAs at bottom. */
.screen-content[data-chapter="closer"] {
  position: absolute !important;
  inset: 0 !important;
  background: var(--bg-deep) !important;
  overflow: hidden !important;
}
.screen-closer {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  padding: 20px 14px !important;
  gap: 16px !important;
}
.screen-closer-top {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.screen-closer-mark {
  width: 80% !important;
  height: auto !important;
  max-height: 60% !important;
  object-fit: contain !important;
}
.screen-closer-bottom {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding-bottom: 4px !important;
}

/* §43.2 calendar grid is 800vh tall with 48 rows so the parallax never runs out */
.cal-grid {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  height: 800vh !important;
  transform: translateY(calc(var(--cal-y, 0px) * -1));
  display: grid !important;
  grid-template-columns: repeat(8, 1fr) !important;
  grid-template-rows: repeat(48, 1fr) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* §43.1 the closer slot stays a flex item in the carousel strip: position:absolute would
   pin it to the strip origin so the -1000% slide pushes it off-screen. It still fills the
   screen and holds the wordmark top / CTAs bottom via .screen-closer. */
.screen-content[data-chapter="closer"] { position: relative !important; }


/* ===== §44 section 44 fixes (appended last) ===== */
/* §44.1 flat solid screens for the brand-mark chapters. No glows, no radial gradients. */
.screen-content[data-chapter="hero"],
.screen-content[data-chapter="inward"],
.screen-content[data-chapter="meet"] {
  background: #0a0c1c !important;
  background-image: none !important;
}
.screen-content[data-chapter="hero"]::before,
.screen-content[data-chapter="inward"]::before,
.screen-content[data-chapter="meet"]::before,
.screen-content[data-chapter="hero"]::after,
.screen-content[data-chapter="inward"]::after,
.screen-content[data-chapter="meet"]::after,
.screen-meet-bg {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* §44.1 closer screen also flat. Wordmark and CTAs only. */
.screen-content[data-chapter="closer"] {
  background: #0a0c1c !important;
  background-image: none !important;
}
.screen-content[data-chapter="closer"]::before,
.screen-content[data-chapter="closer"]::after {
  display: none !important;
  content: none !important;
  background: none !important;
}
.screen-meet-bg { display: none !important; }


/* ===== §48 Act 4: Frame 1 slogan (appended last) ===== */
/* Only the hero section uses .chapter-hero, so it is safe to drop the old 2-col grid here. */
.chapter-hero { display: block; }
.hero-slogan {
  position: relative;
  z-index: 12;
  min-height: var(--vph, 100dvh);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.4vh, 28px);
  text-align: center;
  padding: 0 clamp(20px, 4vw, 64px);
}
.hero-slogan .eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(14px, 1.05vw, 16px); /* fix 40c: uniform with all page eyebrows */
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sr-magenta);
  margin: 0;
}
.hero-slogan .beats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 8px 20px;
  font-family: "Inter Tight", sans-serif; /* fix 44c: site font on page text (full Inter Tight, Rohan) */
  font-weight: 300;
  font-size: clamp(34px, 5.2vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.hero-slogan .beat { white-space: nowrap; }

/* §48 Act 4: keep the persistent phone out of flow at mobile so Frame 1 shows the slogan at the
   top (the legacy in-flow mobile phone from §12.0 is being replaced by per-frame images in Acts 6 to 13). */
@media (max-width: 768px) {
  .phone-hero {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(var(--phone-scale));
    margin: 0;
    width: var(--phone-width);
    height: calc(var(--phone-width) * 2.05);
  }
}


/* ===== §48 restructure: Frame 1 problem, Frame 2 intro reveal (appended last) ===== */

/* Persistent Digital Me phone: invisible and below through Frame 1; rises ~10 percent into Frame 2
   (body.phone-revealed) and stays risen for every chapter below. (§48 fix 14) */
.phone-hero {
  transform: translate(-50%, calc(-50% + 80vh));
  opacity: 0;
  pointer-events: none;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
}
body.phone-revealed .phone-hero {
  transform: translate(-50%, -50%);
  opacity: 1;
}

/* Hero screen now holds the aurora capture: fill the screen, not the 72 percent wordmark sizing. */
.screen-content[data-chapter="hero"] img.screen-capture {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center top !important;
}

/* §48 fix 27: the fix-14 off-screen entry and transition-delay ladder are gone; the engine
   drives entry from scroll progress (pile materialise + staggered radial expansion). */

/* FRAME 1: the problem. Two columns, text left, dim AI phone right. No overlap at any width. */
.chapter-watched.frame-problem {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
  width: 100vw;
  min-height: var(--vph, 100dvh);
  padding: 0 clamp(24px, 5vw, 80px);
  position: relative;
  z-index: 5;
}
.frame-problem .watched-left { padding: 0; max-width: 42vw; justify-self: end; }
.frame-problem .watched-left .chapter-h2 { max-width: 100%; }
.frame-problem .watched-left .chapter-body { max-width: 100%; }
.frame-problem .watched-right { display: flex; justify-content: flex-start; align-items: center; padding: 0; }
@media (max-width: 900px) {
  .chapter-watched.frame-problem { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .frame-problem .watched-left { max-width: 100%; justify-self: center; }
  .frame-problem .watched-right { justify-content: center; }
}

/* FRAME 2: the introduction. Slogan in normal flow, left column, vertically centred in the first
   viewport of the section. It scrolls out naturally as Frame 2 ends (no pin). (§48 fix 6) */
.frame-intro { position: relative; z-index: 5; }
.frame-intro .hero-slogan {
  min-height: var(--vph, 100dvh);
  width: min(44vw, 560px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding: 0 clamp(24px, 4vw, 80px);
  gap: clamp(14px, 2vh, 24px);
}
.frame-intro .hero-slogan .beats {
  justify-content: flex-start;
  font-size: clamp(28px, 3.4vw, 52px);
}
@media (max-width: 768px) {
  .frame-intro .hero-slogan { width: 92vw; padding: 0 5vw; }
  .frame-intro .hero-slogan .beats { font-size: clamp(22px, 6vw, 30px); }
}


/* ===== §48 fix 3/2/1/4: image-phone, tile entry, intro entry, watermark (appended last) ===== */

/* fix 3. Solution C: the Aurora captures ARE the phone. The wrapper holds stacked phone-image imgs;
   the active screen-index sits at translateY 0, the rest translate off and are clipped. */
.phone-hero {
  height: calc(var(--phone-width) * 2.174);
  overflow: hidden;
  border-radius: 12% / 5.5%;
}
.phone-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* §48 fix 34.1: screen changes are scroll-scrubbed crossfades rendered by the boundary engine
     (inline transform/opacity per frame); the old 600ms time-based slide is gone. */
  transform: translateY(0);
  opacity: 0;
  transition: none;
}

/* fix 1. Frame 2 intro entry: eyebrow fades up, then the three beats slide in horizontally, staggered. */
.frame-intro .eyebrow {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.frame-intro .beats .beat {
  opacity: 0;
  transform: translateX(-44px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body.frame2-revealed .frame-intro .eyebrow { opacity: 1; transform: translateY(0); }
body.frame2-revealed .frame-intro .beats .beat { opacity: 1; transform: translateX(0); }
body.frame2-revealed .frame-intro .beats .beat:nth-child(1) { transition-delay: 0.2s; }
body.frame2-revealed .frame-intro .beats .beat:nth-child(2) { transition-delay: 0.4s; }
body.frame2-revealed .frame-intro .beats .beat:nth-child(3) { transition-delay: 0.6s; }

/* §48 fix 9. Tiles enter from off-screen edges: each cell starts at a random off-screen origin and
   slides home when its band's chapter enters. Once settled (.tile-in) it stays; parallax (on the
   grid) keeps applying because the entry transform lives on the cells, the drift on .cal-grid.
   Gated by body.tiles-anim so without JS the cells stay visible (the §39.2 force wins). */
body.tiles-anim .cal-cell {
  transform: translate(var(--in-x, -110vw), var(--in-y, 0)) scale(0.9);
  opacity: 0 !important;
  transition: transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
body.tiles-anim .cal-cell.tile-in {
  transform: translate(0, 0) scale(1);
  opacity: 1 !important;
}

/* fix 4. Frame 1 brand watermark, low opacity, bottom-right corner. Brand identity only. */
.frame1-watermark {
  position: absolute;
  bottom: 6vh;
  right: 4vw;
  width: clamp(120px, 12vw, 200px);
  height: auto;
  opacity: 0.22;
  z-index: 2;
  pointer-events: none;
}


/* ===== §48 fix 6: Frame 3 bridge + chapter-copy crossfade (appended last) ===== */

/* Frame 3 bridge: copy in the left column, persistent phone in its centre slot. */
.frame-bridge { position: relative; z-index: 5; display: flex; align-items: center; width: 100vw; min-height: var(--vph, 100dvh); }
.bridge-copy { width: min(44vw, 560px); padding: 0 clamp(24px, 4vw, 80px); }
@media (max-width: 900px) { .frame-bridge { justify-content: center; text-align: center; } .bridge-copy { width: 86vw; } }

/* Headline fades up on entry; bullets stagger in after it. */
.bridge-copy .chapter-h2 { opacity: 0; transform: translateY(24px); transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.bridge-copy.in .chapter-h2 { opacity: 1; transform: translateY(0); }

.bridge-bullets { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bridge-bullets li {
  font-family: "Inter Tight", sans-serif; /* fix 44c: site font on page text */
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--ink); /* fix 44b: navy SHIFT bullets on the light skin (was white); .hl spans keep magenta */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bridge-copy.in .bridge-bullets li { opacity: 1; transform: translateY(0); }
.bridge-copy.in .bridge-bullets li:nth-child(1) { transition-delay: 0.6s; }
.bridge-copy.in .bridge-bullets li:nth-child(2) { transition-delay: 0.75s; }
.bridge-copy.in .bridge-bullets li:nth-child(3) { transition-delay: 0.9s; }

/* Chapter-copy crossfade at boundaries (only when JS confirms it can drive it, so copy is never
   stuck hidden if the script does not run). 400ms with the natural IntersectionObserver overlap. */
body.fade-ready .chapter-fade { opacity: 0; transition: opacity 0.4s ease; }
body.fade-ready .chapter-fade.in { opacity: 1; }


/* ===== §48 fix 9: closer in-phone overlay (appended last) ===== */
/* The closer CTAs live inside the persistent phone, over the blank closer screen (aurora-10).
   Positioned as percentages of .phone-hero so it tracks the phone at every width. Shown only on
   the closer (body.closer-active). Buttons are keyboard reachable with a visible focus ring. */
.closer-screen-overlay {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 29%;
  bottom: 6%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
body.closer-active .closer-screen-overlay { opacity: 1; pointer-events: auto; }
.closer-screen-headline {
  font-family: "TWK Lausanne", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
  color: #fff;
  margin: 0 0 22px;
}
.closer-screen-cta { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: auto; } /* fix 48.2: bottom-nested */
.closer-screen-cta .btn {
  width: 100%;
  min-height: 44px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.closer-screen-cta .btn-primary { background: var(--sr-magenta, #ff3d8c); color: #fff; border: none; }
.closer-screen-cta .btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.55); }
.closer-screen-cta .btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.closer-screen-chip {
  margin-top: 10px; /* fix 48.2: the chip tucks under the bottom-nested CTAs */
  padding-top: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.5);
}


/* ===== §48 fix 16: roadmap build plan inside the #next phone (appended last) ===== */
/* Mirrors the closer overlay: absolutely positioned over the blank Aurora screen, percentage-based so
   it tracks the phone at every width, shown only on the roadmap chapter (body.next-active). */
.roadmap-screen-overlay {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 25%;
  bottom: 5%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
body.next-active .roadmap-screen-overlay { opacity: 1; }
.roadmap-screen-header { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.roadmap-screen-header .sr-header-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 0.22em; color: rgba(255, 220, 100, 0.85); text-transform: uppercase; }
.roadmap-screen-title { font-family: "TWK Lausanne", sans-serif; font-weight: 500; font-size: 15px; color: rgba(255, 255, 255, 0.95); }
.roadmap-screen-list { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.roadmap-screen-list .sr-entry { flex: 1 1 auto; }


/* ===== §48 fix 17: living roadmap status pills ===== */
/* LIVE breathes gently (it is the active phase); SOON throbs in the brand accent to pull the eye to
   what is next. Future date pills stay calm. Respects prefers-reduced-motion. */
@keyframes sr-pill-live-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.0); }
  50%      { box-shadow: 0 0 10px 1px rgba(74, 222, 128, 0.45); }
}
@keyframes sr-pill-soon-throb {
  0%, 100% { opacity: 0.72; transform: scale(1);    box-shadow: 0 0 0 0 rgba(255, 61, 140, 0.0); }
  50%      { opacity: 1;    transform: scale(1.08);  box-shadow: 0 0 12px 2px rgba(255, 61, 140, 0.60); }
}
.sr-entry-pill--live { animation: sr-pill-live-breathe 2.6s ease-in-out infinite; }
.sr-entry-pill--soon {
  color: #fff;
  border-color: rgba(255, 61, 140, 0.75);
  background: rgba(255, 61, 140, 0.20);
  transform-origin: right center;
  animation: sr-pill-soon-throb 1.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .sr-entry-pill--live, .sr-entry-pill--soon { animation: none; }
  .sr-entry-pill--soon { opacity: 1; }
}


/* ===== §48 fix 20: marketplace chapter (appended last) ===== */
/* The two marketplace screens sit at fractional indices 4.5 / 4.75 (0.25 apart). Scaling their
   translate x4 turns that 0.25 gap into a full 100% swap, and pushes them fully off-screen for any
   other --screen-index (>=0.5 away => >=200% off), so they never bleed into Vault or Ask. */
.phone-image.mkt-screen {
  /* §48 fix 23: the four marketplace steps are stacked (no slide) and cross-faded by scroll, so tap
     transitions read as soft in-app dissolves. Only the step whose --idx matches --screen-index is
     opaque; every other step is transparent. Driven purely by --screen-index, so the in/out handoff
     to the neighbours (Vault at 4, Ask at 5) needs no JS: all four go transparent when far away. */
  transform: none;
  z-index: 3;
  opacity: calc(1 - clamp(0, max(var(--idx, 0) - var(--screen-index, 0), var(--screen-index, 0) - var(--idx, 0)) / 0.05, 1));
}
.phone-image.mkt-base {
  /* The idle screen doubles as an opaque backdrop across the whole marketplace range so a mid-swap
     cross-fade (two steps at ~0.5 opacity) never lets the neighbouring screens ghost through. */
  opacity: clamp(0, min((var(--screen-index, 0) - 4.45) / 0.05, (4.8 - var(--screen-index, 0)) / 0.05), 1);
}

/* §48 fix 20 (E): the marketplace copy stagger override was removed. The generic pizz-lead / soft-rise
   auto rules from fix 20 (C) now stagger every chapter's prose uniformly, including the marketplace. */


/* ===== §48 fix 19: per-chapter pizzazz, marketplace mark, THE SHIFT, THE TURN, closer buttons ===== */

/* A. Marketplace emphasis in the closing line. */
.marketplace-mark {
  display: inline-block;
  font-family: var(--font-display, inherit);
  font-size: 1.55em;
  font-weight: 500;
  color: #FF3D8C;
  letter-spacing: -0.03em;
  line-height: 1;
  vertical-align: -0.1em;
  padding: 0 0.06em;
}

/* B. Six pizzazz keyframes + style classes. */
@keyframes pizz-word-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pizz-curtain-up { from { transform: translateY(105%); } to { transform: translateY(0); } }
/* §48 fix 25 Act A: blur clears by 21% (about 200ms of 950ms); the fade/tracking settle continues. */
@keyframes pizz-blur-focus { from { filter: blur(24px); opacity: 0; letter-spacing: 0.06em; } 21% { filter: blur(0); } to { filter: blur(0); opacity: 1; letter-spacing: -0.02em; } }
@keyframes pizz-char-in { from { opacity: 0; transform: translateY(20px) rotate(-6deg); } to { opacity: 1; transform: translateY(0) rotate(0deg); } }
@keyframes pizz-wipe-reveal { 0% { clip-path: inset(0 100% 0 0); } 45% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes pizz-wipe-bar { 0% { transform: scaleX(0); transform-origin: left; } 45% { transform: scaleX(1); transform-origin: left; } 46% { transform: scaleX(1); transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }
@keyframes pizz-alt-slide-l { from { opacity: 0; transform: translateX(-44px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pizz-alt-slide-r { from { opacity: 0; transform: translateX(44px); } to { opacity: 1; transform: translateX(0); } }

.pizz-a .word { display: inline-block; opacity: 0; }
.chapter-fade.in .pizz-a .word { animation: pizz-word-rise 620ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.pizz-a .word:nth-child(1) { animation-delay: 0ms; }
.pizz-a .word:nth-child(2) { animation-delay: 80ms; }
.pizz-a .word:nth-child(3) { animation-delay: 160ms; }
.pizz-a .word:nth-child(4) { animation-delay: 240ms; }
.pizz-a .word:nth-child(5) { animation-delay: 320ms; }
.pizz-a .word:nth-child(6) { animation-delay: 400ms; }
.pizz-a .word:nth-child(7) { animation-delay: 480ms; }
.pizz-a .word:nth-child(8) { animation-delay: 560ms; }

.pizz-b .line-mask { display: block; overflow: hidden; }
.pizz-b .line-mask .line { display: block; transform: translateY(105%); }
.chapter-fade.in .pizz-b .line-mask .line { animation: pizz-curtain-up 780ms cubic-bezier(0.83, 0, 0.17, 1) both; }
.pizz-b .line-mask:nth-child(1) .line { animation-delay: 0ms; }
.pizz-b .line-mask:nth-child(2) .line { animation-delay: 200ms; }
.pizz-b .line-mask:nth-child(3) .line { animation-delay: 400ms; }

.pizz-c { filter: blur(24px); opacity: 0; letter-spacing: 0.06em; }
.chapter-fade.in .pizz-c { animation: pizz-blur-focus 950ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }

.pizz-d .char { display: inline-block; opacity: 0; }
.chapter-fade.in .pizz-d .char { animation: pizz-char-in 460ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.pizz-d .char { animation-delay: calc(var(--i, 0) * 30ms); }

.pizz-e { position: relative; display: inline-block; clip-path: inset(0 100% 0 0); }
.pizz-e::after { content: ""; position: absolute; inset: 0; background: #FF3D8C; transform-origin: left; transform: scaleX(0); pointer-events: none; }
.chapter-fade.in .pizz-e { animation: pizz-wipe-reveal 900ms cubic-bezier(0.83, 0, 0.17, 1) forwards; }
.chapter-fade.in .pizz-e::after { animation: pizz-wipe-bar 900ms cubic-bezier(0.83, 0, 0.17, 1) forwards; }

.pizz-f .word { display: inline-block; opacity: 0; }
.pizz-f .word:nth-child(odd) { transform: translateX(-44px); }
.pizz-f .word:nth-child(even) { transform: translateX(44px); }
.chapter-fade.in .pizz-f .word:nth-child(odd) { animation: pizz-alt-slide-l 720ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.chapter-fade.in .pizz-f .word:nth-child(even) { animation: pizz-alt-slide-r 720ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.pizz-f .word:nth-child(1) { animation-delay: 0ms; }
.pizz-f .word:nth-child(2) { animation-delay: 100ms; }
.pizz-f .word:nth-child(3) { animation-delay: 200ms; }
.pizz-f .word:nth-child(4) { animation-delay: 300ms; }
.pizz-f .word:nth-child(5) { animation-delay: 400ms; }
.pizz-f .word:nth-child(6) { animation-delay: 500ms; }
.pizz-f .word:nth-child(7) { animation-delay: 600ms; }

/* D. THE SHIFT text size + alignment. */
.frame-bridge { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.frame-bridge .bridge-copy {
  width: min(44vw, 620px);
  padding: 0 clamp(24px, 5vw, 80px);
  justify-self: start;
}
.frame-bridge .bridge-copy .chapter-h2 {
  font-size: clamp(38px, 4.4vw, 66px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.frame-bridge .bridge-copy .bridge-bullets { font-size: clamp(18px, 1.6vw, 22px); }
.frame-bridge .bridge-copy .lead { font-size: var(--type-body-l); } /* fix 41c: uniform under-hero body size */

/* F. Epic closer moment "The Turn". */
.chapter-turn { position: relative; z-index: 6; display: grid; place-items: center; padding: clamp(40px, 8vh, 120px) 0; text-align: center; }
.chapter-turn .turn-copy { max-width: 92vw; }
.chapter-turn .turn-line-1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.6vw, 74px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: rgba(237,243,255,0.68);
  font-style: italic;
  margin: 0 0 clamp(24px, 4vh, 72px);
}
.chapter-turn .turn-line-2 {
  font-family: var(--font-display);
  font-size: clamp(52px, 7.4vw, 118px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0;
}
.chapter-turn .turn-line-2 .me { color: #FF3D8C; }
.chapter-turn .turn-chevron {
  display: none; /* fix: nav-arrow-down (fix 33) occupies this spot; the decorative turn chevron was a duplicate */
  position: absolute;
  bottom: clamp(24px, 5vh, 64px);
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 600ms ease 900ms;
  animation: turn-chevron-bob 2.4s ease-in-out infinite;
}
.chapter-fade.in ~ .turn-chevron,
.chapter-turn .chapter-fade.in + .turn-chevron { opacity: 1; }
@keyframes turn-chevron-bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }

/* G. Closer buttons materialise on the phone screen (fade + slight scale, staggered). */
.closer-screen-overlay { pointer-events: auto; }
body:not(.closer-active) .closer-screen-overlay { pointer-events: none; }
.closer-screen-overlay .closer-screen-headline,
.closer-screen-overlay .ios-btn,
.closer-screen-overlay .closer-screen-chip {
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity 500ms cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.closer-active .closer-screen-overlay .closer-screen-headline { opacity: 1; transform: scale(1); transition-delay: 150ms; }
body.closer-active .closer-screen-overlay .ios-btn-primary  { opacity: 1; transform: scale(1); transition-delay: 350ms; }
body.closer-active .closer-screen-overlay .ios-btn-secondary { opacity: 1; transform: scale(1); transition-delay: 500ms; }
body.closer-active .closer-screen-overlay .closer-screen-chip { opacity: 1; transform: scale(1); transition-delay: 650ms; }

.closer-screen-overlay .ios-btn {
  all: unset;
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 14px 18px;
  font-family: var(--font-display, inherit);
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 500;
  letter-spacing: -0.01em;
  border-radius: 999px;
  cursor: pointer;
  min-height: 44px;
  line-height: 1.15;
  transition: transform 180ms ease, background 180ms ease, opacity 180ms ease;
}
.closer-screen-overlay .ios-btn-primary { background: #FF3D8C; color: #fff; }
.closer-screen-overlay .ios-btn-primary:hover { background: #E92F7C; }
.closer-screen-overlay .ios-btn-primary:active { transform: scale(0.97); }
/* fix 44: secondary CTA is now brand blue (Rohan: magenta primary, blue secondary). */
.closer-screen-overlay .ios-btn-secondary { background: var(--brand-blue,#010ED0); color: #fff; box-shadow: none; }
.closer-screen-overlay .ios-btn-secondary:hover { background: #0109A8; box-shadow: none; }
.closer-screen-overlay .ios-btn-secondary:active { transform: scale(0.97); }
/* fix 48.2: the CTA block nests at the BOTTOM of the phone screen, just above the home
   indicator, like every other app screen: margin-top auto pushes it down at desktop and
   mobile alike; the chip reads cleaner tucked beneath it. */
.closer-screen-overlay .closer-screen-cta { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.closer-screen-overlay .ios-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,61,140,0.35), inset 0 0 0 1.5px rgba(255,255,255,0.5); }

/* §48 fix 19. Recede the persistent phone during THE TURN so it does not block the text. */
body.turn-active .phone-hero { opacity: 0; pointer-events: none; }


/* ===== §48 fix 20: roadmap parity + universal prose pizzazz + closer tiles ===== */

/* A. Roadmap (#next) parity sizing. */
.chapter-next .chapter-inner { grid-template-columns: 1fr 1fr; padding: 0 clamp(24px, 5vw, 80px); }
.chapter-next .next-left { max-width: 46vw; }
.chapter-next .next-h2 { font-size: clamp(42px, 5.4vw, 84px); line-height: 1.02; letter-spacing: -0.03em; }
.chapter-next .next-h2 .pizz-e { display: inline-block; }
.chapter-next .lead { font-size: var(--type-body-l); margin-top: clamp(16px, 3vh, 32px); }

/* C. Universal soft-rise pizzazz for prose (same .in trigger, staggered). */
/* §48 fix 25 Act A: blur is an entry transient only; it fully clears by 28% (about 200ms of 720ms)
   while the rise/fade continue, so no dwellable state ever shows blurred text. */
@keyframes pizz-soft-rise { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } 28% { filter: blur(0); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
.pizz-lead { opacity: 0; transform: translateY(16px); filter: blur(6px); }
.chapter-fade.in .pizz-lead { animation: pizz-soft-rise 720ms cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 1) * 180ms); }

.chapter-fade > .eyebrow,
.chapter-fade > .chapter-eyebrow,
.chapter-fade > .lead,
.chapter-fade > .chapter-body,
.chapter-fade > .bridge-bullets,
.chapter-fade > .bridge-bullets li,
.chapter-fade > p:not([class*="pizz-"]) {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(6px);
}
.chapter-fade.in > .eyebrow,
.chapter-fade.in > .chapter-eyebrow {
  animation: pizz-soft-rise 620ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: 0ms;
}
.chapter-fade.in > .lead:nth-of-type(1),
.chapter-fade.in > .chapter-body:nth-of-type(1),
.chapter-fade.in > p:not([class*="pizz-"]):nth-of-type(1) {
  animation: pizz-soft-rise 720ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: 400ms;
}
.chapter-fade.in > .lead:nth-of-type(2),
.chapter-fade.in > .chapter-body:nth-of-type(2),
.chapter-fade.in > p:not([class*="pizz-"]):nth-of-type(2) {
  animation: pizz-soft-rise 720ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: 600ms;
}
.chapter-fade.in > .lead:nth-of-type(3),
.chapter-fade.in > .chapter-body:nth-of-type(3),
.chapter-fade.in > p:not([class*="pizz-"]):nth-of-type(3) {
  animation: pizz-soft-rise 720ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: 800ms;
}
.chapter-fade.in > .bridge-bullets li:nth-child(1) { animation: pizz-soft-rise 720ms cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: 500ms; }
.chapter-fade.in > .bridge-bullets li:nth-child(2) { animation: pizz-soft-rise 720ms cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: 650ms; }
.chapter-fade.in > .bridge-bullets li:nth-child(3) { animation: pizz-soft-rise 720ms cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: 800ms; }

/* B. Restore closer tiles: keep the grid tall enough; the JS clamps --cal-y to its content. */
html, body { min-height: 100dvh; }
.cal-grid { min-height: calc(100dvh + 40vh); }

/* §48 fix 20 edit 6. Constrain roadmap column so it never sits behind the phone. */
.chapter-next { position: relative; }
.chapter-next .chapter-inner {
  grid-template-columns: minmax(0, 44vw) minmax(0, 56vw) !important;
  padding: 0 clamp(24px, 5vw, 80px) !important;
  z-index: 5;
}
.chapter-next .next-left {
  max-width: 40vw !important;
  z-index: 8 !important;
  position: relative !important;
}
.chapter-next .next-h2 {
  font-size: clamp(38px, 4.2vw, 66px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.03em !important;
  max-width: 100% !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.chapter-next .lead {
  max-width: 100% !important;
  word-wrap: break-word;
}
.chapter-next .next-h2 .pizz-e { display: inline-block; max-width: 100%; }

@media (max-width: 1024px) {
  .chapter-next .chapter-inner { grid-template-columns: 1fr !important; }
  .chapter-next .next-left { max-width: 92vw !important; margin: 0 auto; text-align: center; }
}

/* §48 fix 20 edit 8. Roadmap must not overlap phone. Column smaller, type smaller, hard limits. */
.chapter-next .chapter-inner {
  grid-template-columns: minmax(0, 32vw) minmax(0, 68vw) !important;
  padding-left: clamp(24px, 5vw, 80px) !important;
  padding-right: 0 !important;
}
.chapter-next .next-left {
  max-width: min(30vw, 420px) !important;
  z-index: 20 !important;
  position: relative !important;
  padding-right: 0 !important;
}
.chapter-next .next-h2 {
  font-size: clamp(28px, 2.8vw, 44px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  max-width: 100% !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}
.chapter-next .next-h2 .pizz-e {
  display: inline-block !important;
  max-width: 100% !important;
  overflow-wrap: break-word !important;
}
.chapter-next .lead {
  font-size: clamp(13px, 1.05vw, 16px) !important;
  max-width: 100% !important;
  overflow-wrap: break-word !important;
}

/* §48 fix 21 edit 3. Uniform left column across every chapter that renders text on the left. */
.frame-bridge .bridge-copy,
.chapter .chapter-copy.left,
.chapter-next .next-left,
.chapter-marketplace .chapter-copy.left {
  width: min(38vw, 560px) !important;
  max-width: min(38vw, 560px) !important;
  padding-left: clamp(32px, 6vw, 96px) !important;
  padding-right: 0 !important;
  position: relative !important;
  z-index: 20 !important;
  box-sizing: border-box !important;
}
.frame-bridge .bridge-copy .chapter-h2,
.chapter .chapter-copy.left .chapter-h2,
.chapter-next .next-h2,
.chapter-marketplace .chapter-copy.left .chapter-h2 {
  font-size: clamp(32px, 3.2vw, 52px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  max-width: 100% !important;
  margin: 0 0 clamp(14px, 2vh, 24px) !important;
  overflow-wrap: break-word !important;
}
.frame-bridge .bridge-copy .lead,
.chapter .chapter-copy.left .lead,
.chapter-next .lead,
.chapter-marketplace .chapter-copy.left .lead,
.frame-bridge .bridge-copy .chapter-body,
.chapter .chapter-copy.left .chapter-body {
  font-size: var(--type-body-l) !important; /* fix 41c: THE one uniform under-hero body size */
  line-height: 1.55 !important;
  max-width: 100% !important;
  margin: 0 0 clamp(10px, 1.5vh, 18px) !important;
  overflow-wrap: break-word !important;
}
.frame-bridge .bridge-copy .eyebrow,
.chapter .chapter-copy.left .eyebrow,
.chapter .chapter-copy.left .chapter-eyebrow,
.chapter-next .chapter-eyebrow,
.chapter-marketplace .chapter-copy.left .eyebrow {
  font-size: clamp(14px, 1.05vw, 16px) !important; /* fix 40c: uniform */
  letter-spacing: 0.16em !important;
  margin: 0 0 clamp(14px, 2vh, 22px) !important;
}

/* §48 fix 21 edit 4. Pull every left column in a touch so its text clears the centred phone at every
   width (phone left edge sits near 37vw; a 34vw column keeps a margin). No overflow:hidden, so the
   rise/blur animations are not clipped; wrapping keeps prose inside the column. */
.frame-bridge .bridge-copy,
.chapter .chapter-copy.left,
.chapter-next .next-left,
.chapter-marketplace .chapter-copy.left {
  width: min(34vw, 480px) !important;
  max-width: min(34vw, 480px) !important;
}
/* Roadmap has the longest single-line headline; drop its size so it stays on one line inside the column. */
.chapter-next .next-h2 { font-size: clamp(23px, 2.2vw, 36px) !important; }
/* #next nests its column in a .chapter-inner (extra left padding). Zero it so next-left starts at the
   same indent as every other chapter and its column right edge clears the centred phone. */
.chapter-next .chapter-inner { padding-left: 0 !important; }

/* ============================================================
   §48 fix 22 (Phase A): static phone chrome, screens transition behind
   The Aurora captures still translate for screen swaps, but a single static
   chrome SVG (opaque bezel + dynamic island + home indicator, transparent
   screen cutout) sits on top and never moves. It masks each capture's baked
   chrome as they slide, so the visible island/bezel are perfectly static
   while only the screen content changes behind the cutout.
   ============================================================ */
.phone-chrome {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 5;            /* above phone-image (0) and .mkt-screen (3); below the interactive overlays (6) */
  pointer-events: none;  /* clicks pass through to the closer buttons showing through the cutout */
  /* deliberately NO transform: the chrome is static (unlike .phone-image) */
}

/* ============================================================
   §48 fix 23. In-app tap cursor indicator. Positioned over the phone screen area (inside
   .phone-hero via inline top/left %), appears at the tap moment, pulses, and fades. z-index above
   the static chrome so the pulse reads on top of the screen content.
   ============================================================ */
.tap-cursor {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
  border: 2px solid rgba(255, 255, 255, 0.86);
  pointer-events: none;
  z-index: 15;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.4);
  transition: none;
}
.tap-cursor.firing {
  animation: tap-fire 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes tap-fire {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  30%  { opacity: 1; transform: translate(-50%, -50%) scale(0.9); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); }
}

/* ============================================================
   §48 fix 24 Part A: sticky text panels. The six text chapters (#meet #vault #marketplace #ask
   #act #real) are 240vh tall; their copy is wrapped in a .chapter-scroll-track that pins at the
   viewport middle (sticky, full-viewport, centred) while the chapter scrolls past, like the phone.
   ============================================================ */
.chapter.chapter-sticky { display: block; overflow: visible; }
.chapter-sticky .chapter-scroll-track {
  position: sticky;
  top: 0;
  height: var(--vph, 100dvh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* sticky forms a stacking context; lift it above the fixed calendar grid (z-index 1) so the copy
     (which used to sit at root z-index 20) is not painted behind the background. */
  z-index: 20;
}

/* ============================================================
   §48 fix 24 Part B: typewriter body copy + drawn underlines. The body/lead paragraphs of the sticky
   chapters type out char by char (JS) with a magenta caret; when a paragraph finishes it gets
   .typed-done, which draws the magenta underline under each .hl / .me span.
   ============================================================ */
.chapter-sticky .chapter-copy.left .chapter-body,
.chapter-sticky .chapter-copy.left .lead {
  opacity: 1 !important;        /* the typewriter owns the reveal, not the soft-rise */
  animation: none !important;
  /* §48 fix 25 Act A (D1): the soft-rise base state sets a STATIC filter:blur(6px)/translateY that
     only the (killed) animation would clear, so typed text sat permanently smeared. Clear it: typed
     text renders crisp from the first character. */
  filter: none !important;
  transform: none !important;
}
.tw-caret {
  display: inline-block; width: 2px; height: 1.05em; margin-left: 2px;
  background: var(--sr-magenta); vertical-align: text-bottom;
  animation: tw-caret-blink 850ms steps(1) infinite;
}
@keyframes tw-caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.chapter-sticky .chapter-copy.left .hl,
.chapter-sticky .chapter-copy.left .me,
.chapter-sticky .chapter-copy.left .marketplace-mark { position: relative; }
.chapter-sticky .chapter-copy.left .hl::after,
.chapter-sticky .chapter-copy.left .me::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--sr-magenta); border-radius: 1px; pointer-events: none;
}
/* §48 fix 25 Act A: the underline draws the moment its word finishes typing (.tw-done is added
   per-span by the typewriter as the last character lands), not at the end of the paragraph. The
   paragraph-level .typed-done trigger stays as a fallback. */
.chapter-sticky .chapter-copy.left .hl.tw-done::after,
.chapter-sticky .chapter-copy.left .me.tw-done::after,
.chapter-sticky .chapter-copy.left .typed-done .hl::after,
.chapter-sticky .chapter-copy.left .typed-done .me::after {
  animation: tw-underline 480ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes tw-underline { from { width: 0; } to { width: 100%; } }

/* ============================================================
   §48 fix 24 Part C: hero-scale headlines.
   ============================================================ */
.chapter .chapter-copy.left .chapter-h2,
.frame-bridge .bridge-copy .chapter-h2 {
  font-size: clamp(48px, 5.2vw, 84px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: clamp(20px, 3vh, 40px) !important;
}

/* ============================================================
   §48 fix 24 Part D: scroll-scrubbed marketplace video, stacked in the phone slot below the static
   chrome. Visible only while --screen-index is in the marketplace band [4.5,4.75] (the same envelope
   the four images used); otherwise transparent so Vault/Ask show through.
   ============================================================ */
.phone-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
  z-index: 3; pointer-events: none;
  opacity: clamp(0, min((var(--screen-index, 0) - 4.45) / 0.05, (4.8 - var(--screen-index, 0)) / 0.05), 1);
  transition: opacity 200ms linear;
}

/* ============================================================
   §48 fix 25 Act B: giant chapter word, two-zone text layout.
   Left of phone: eyebrow + one giant ultra-light word (the chapter's pizzazz mechanism applies).
   Right of phone: the old headline demoted to a compact bold heading (200ms fade-up) + typed body.
   Product chapters only; frames 1-3, THE TURN and the closer are untouched.
   ============================================================ */
.chapter .chapter-copy.left .chapter-h2.giant-word, /* outranks the fix-24 Part C headline rule */
.chapter-copy.left .giant-word,
.next-left .giant-word {
  font-weight: 200 !important;
  line-height: 0.95 !important;
  letter-spacing: -0.035em !important;
  color: var(--ink) !important; /* fix 44b: navy giant words on the light skin (was #fff); the typing caret stays magenta (background on .gw-caret) */
  white-space: nowrap !important;
  max-width: none !important;
  overflow-wrap: normal !important;
  margin: 0 !important;
}
/* fix 44m: the cinematic SIZING is desktop-only. This 120px !important floor carries higher
   specificity than the 42.2 mobile top-band rule, so on a real phone (412px) titles rendered at
   120px and sprawled over the phone. Under 768px the mobile block owns the size again. */
@media (min-width: 768px) {
  .chapter .chapter-copy.left .chapter-h2.giant-word,
  .chapter-copy.left .giant-word,
  .next-left .giant-word {
    font-size: clamp(120px, 8.5vw, 200px) !important;
  }
}
/* the wipe/curtain wrappers inside a giant word must not re-wrap it */
.giant-word .line-mask, .giant-word .line, .giant-word .word, .giant-word .pizz-e { white-space: nowrap; }

/* right-of-phone panel, pinned to the viewport middle inside the sticky track (or #next's inner) */
.chapter-copy-right,
.next-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* fix 26.5: tighter gap to the phone, and a hard right-margin guard: the panel narrows before
     its right edge may come closer than clamp(48px,6vw,120px) to the viewport edge. */
  left: calc(50vw + var(--phone-width) / 2 + clamp(24px, 2.5vw, 44px));
  width: min(26vw, 400px);
  max-width: calc(100vw - (50vw + var(--phone-width) / 2 + clamp(24px, 2.5vw, 44px)) - clamp(48px, 6vw, 120px));
  z-index: 20;
  box-sizing: border-box;
}

/* demoted heading: compact, bold, simple 200ms fade-up (no pizzazz) */
.chapter-h3 {
  font-family: "Inter Tight", sans-serif; /* fix 44c: site font on page text */
  font-size: clamp(28px, 2.3vw, 34px);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.015em;
  color: var(--ink); /* fix 44b: navy caption headings on the light skin (was #fff); .me/.hl accent spans keep magenta */
  margin: 0 0 clamp(12px, 2vh, 20px);
  opacity: 0;
  transform: translateY(10px);
}
.chapter-fade.in .chapter-h3 { animation: h3-fade-up 200ms ease-out both; }
@keyframes h3-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Act A crispness + typewriter styling extend to the right panel (body copy lives there now) */
.chapter-sticky .chapter-copy-right .chapter-body,
.chapter-sticky .chapter-copy-right .lead {
  opacity: 1 !important;
  animation: none !important;
  filter: none !important;
  transform: none !important;
  font-size: var(--type-body-l); /* fix 39: common under-hero body size */
  line-height: 1.55;
  margin: 0 0 clamp(10px, 1.5vh, 18px);
}
.chapter-copy-right .hl, .chapter-copy-right .me, .chapter-copy-right .marketplace-mark { position: relative; }
.chapter-copy-right .hl::after,
.chapter-copy-right .me::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--sr-magenta); border-radius: 1px; pointer-events: none;
}
.chapter-copy-right .hl.tw-done::after,
.chapter-copy-right .me.tw-done::after,
.chapter-copy-right .typed-done .hl::after,
.chapter-copy-right .typed-done .me::after {
  animation: tw-underline 480ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* ============================================================
   §48 fix 25 Act D (D3): Frame 2 card choreography. A converging card fades out as its centre
   crosses within 40px of the phone bezel (it reads as absorbed into the phone) so it can never sit
   over the on-screen text. The class is toggled by the frame-2 scroll engine, so scroll-back
   restores the card.
   ============================================================ */
.travel-card.card-occlude {
  opacity: 0 !important;
  transition: opacity 120ms ease !important;
  pointer-events: none;
}

/* ============================================================
   §48 fix 26.2: Frame 2 pin. INTRODUCING locks in a sticky var(--vph, 100dvh) track inside the 320vh section
   while scroll consumes the cards; it releases only when the section ends (cards consumed by then).
   The .chapter base sets overflow:hidden + flex, both of which break sticky children; frame-intro
   opts out (the cards are position:fixed, so nothing needs the clip).
   ============================================================ */
.chapter.frame-intro { display: block; overflow: visible; }
.frame-intro .frame2-track {
  position: sticky;
  top: 0;
  height: var(--vph, 100dvh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 12;
}
.frame-intro .frame2-track .hero-slogan { min-height: 0; }

/* ============================================================
   §48 fix 26.3: THE TURN enters, locks, holds, releases. The 220vh section pins its copy in a
   sticky var(--vph, 100dvh) track. Line reveals are gated by scroll-progress classes set by the turn engine
   (#closer-turn.turn-fire1 at 0.05, .turn-fire2 at 0.5), not by the IntersectionObserver .in,
   so line 1 locks early and line 2 wipes mid-hold while line 1 stays.
   ============================================================ */
.chapter.chapter-turn { display: block; overflow: visible; padding: 0; }
.chapter-turn .turn-track {
  position: sticky;
  top: 0;
  height: var(--vph, 100dvh);
  display: grid;
  place-items: center;
  text-align: center;
  z-index: 6;
}
/* line 1: same blur-focus language as pizz-c, fired by .turn-fire1 */
.turn-line-1.turn-blur { filter: blur(24px); opacity: 0; letter-spacing: 0.06em; }
#closer-turn.turn-fire1 .turn-line-1.turn-blur { animation: pizz-blur-focus 950ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
/* line 2: same magenta wipe language as pizz-e, fired by .turn-fire2 */
.turn-wipe { position: relative; display: inline-block; clip-path: inset(0 100% 0 0); }
.turn-wipe::after { content: ""; position: absolute; inset: 0; background: #FF3D8C; transform-origin: left; transform: scaleX(0); pointer-events: none; }
#closer-turn.turn-fire2 .turn-wipe { animation: pizz-wipe-reveal 900ms cubic-bezier(0.83, 0, 0.17, 1) 1s forwards; }
#closer-turn.turn-fire2 .turn-wipe::after { animation: pizz-wipe-bar 900ms cubic-bezier(0.83, 0, 0.17, 1) 1s forwards; }

/* ============================================================
   §48 fix 26.4: marketplace band robustness. While the marketplace owns the phone (body.mkt-band),
   the idx 4 (vault) and idx 5 (ask) captures are hidden outright: at fractional --screen-index both
   sat half-translated across the middle of the phone, and any moment the video was not painting
   (cold load, seek stall) exposed them as a mangled split composite. The video carries a poster of
   its first frame for the pre-ready state; if the file cannot seek, a static browse -> detail swap
   (body.mkt-video-broken) replaces the scrub and reads as intentional.
   ============================================================ */
body.mkt-band .phone-image[data-screen-index="4"],
body.mkt-band .phone-image[data-screen-index="5"] { opacity: 0; transition: none; }
/* the band edge is a hard cut on purpose: the 200-260ms opacity fades were themselves the split
   window (neighbours still fading out while the video faded in during a fast scroll) */
.phone-video { transition: none; }
body.mkt-video-broken .phone-video { opacity: 0 !important; }
.mkt-fallback { transform: none; z-index: 3; opacity: 0; }
body.mkt-video-broken.mkt-band .mkt-fallback[data-mkt-fallback="browse"] { opacity: 1; }
body.mkt-video-broken.mkt-band.mkt-step-detail .mkt-fallback[data-mkt-fallback="browse"] { opacity: 0; }
body.mkt-video-broken.mkt-band.mkt-step-detail .mkt-fallback[data-mkt-fallback="detail"] { opacity: 1; }

/* §48 fix 26.5: the base .chapter-inner rule caps at 1440px and centres, which shifted #next's
   absolutely positioned right panel 240px right at 1920 (its left calc resolves against the shifted
   container). #next's inner goes truly full-width so the panel aligns with every other chapter. */
.chapter-next .chapter-inner { max-width: none !important; margin: 0 !important; }

/* ============================================================
   §48 fix 28.1: the phone recede into THE TURN is a fade, not a pop. Scoped to body.turn-zone
   (set only around the turn section) so the transition never drags on the Frame 2 scroll-driven
   rise or any other chapter's opacity behaviour.
   ============================================================ */
body.turn-zone .phone-hero { transition: opacity 300ms ease; }

/* ============================================================
   §48 fix 28.3: roadmap screen pizzazz. When the Next chapter arrives (body.next-active) the
   connector spine draws top to bottom (700ms), each phase card lands (fade + 14px rise) as the
   spine reaches it (120ms stagger), the LIVE/SOON pills keep breathing/throbbing, and the year
   pills get one magenta shimmer as their card lands. Replays on re-entry (the gating class is
   removed and re-added by the observer). Fully disabled under prefers-reduced-motion.
   ============================================================ */
/* §48 fix 29.1: dedicated 20px gutter left of the cards; the spine may never enter a card box. */
.roadmap-screen-overlay .roadmap-screen-list { position: relative; padding-left: 20px; }
.roadmap-spine { position: absolute; left: 5px; top: 4px; bottom: 4px; width: 4px; z-index: 0; pointer-events: none; }
.roadmap-spine line { stroke: rgba(255, 220, 100, 0.32); stroke-width: 2; }
.roadmap-screen-overlay .sr-entry { position: relative; z-index: 1; }
.roadmap-screen-overlay .sr-entry-pill { overflow: hidden; } /* no position override: the pill keeps its own layout (a relative override stretched it across the card, same trap as the mock tag) */

@media (prefers-reduced-motion: no-preference) {
  .roadmap-spine line { stroke-dasharray: 100; stroke-dashoffset: 100; }
  body.next-active .roadmap-spine line { animation: spine-draw 700ms ease-out 80ms forwards; }

  .roadmap-screen-overlay .sr-entry { opacity: 0; transform: translateY(14px); }
  body.next-active .roadmap-screen-overlay .sr-entry { animation: sr-land 480ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  body.next-active .roadmap-screen-overlay .sr-entry:nth-of-type(1) { animation-delay: 170ms; }
  body.next-active .roadmap-screen-overlay .sr-entry:nth-of-type(2) { animation-delay: 340ms; }
  body.next-active .roadmap-screen-overlay .sr-entry:nth-of-type(3) { animation-delay: 520ms; }
  body.next-active .roadmap-screen-overlay .sr-entry:nth-of-type(4) { animation-delay: 690ms; }

  .roadmap-screen-overlay .sr-entry-pill:not(.sr-entry-pill--live):not(.sr-entry-pill--soon)::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 61, 140, 0.55), transparent);
    transform: translateX(-120%);
    pointer-events: none;
  }
  body.next-active .roadmap-screen-overlay .sr-entry:nth-of-type(3) .sr-entry-pill:not(.sr-entry-pill--live):not(.sr-entry-pill--soon)::after { animation: pill-shimmer 600ms ease-out 800ms 1 both; }
  body.next-active .roadmap-screen-overlay .sr-entry:nth-of-type(4) .sr-entry-pill:not(.sr-entry-pill--live):not(.sr-entry-pill--soon)::after { animation: pill-shimmer 600ms ease-out 920ms 1 both; }
}
@keyframes spine-draw { to { stroke-dashoffset: 0; } }
@keyframes sr-land { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pill-shimmer { from { transform: translateX(-120%); } to { transform: translateX(260%); } }

/* ============================================================
   §48 fix 32.1: Frame 1 generic premium assistant phone. Same chrome asset and scale as the hero
   phone (a fair fight between two apps); familiar unbranded chat conventions; neutral greys on a
   cool dark ground, desaturated relative to the Digital Me aurora. The data-leak bubbles emit
   upward out of this screen once the chapter enters.
   ============================================================ */
.generic-phone {
  position: relative;
  width: var(--phone-width);
  aspect-ratio: 402 / 874;
  margin: 0 auto;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6)) saturate(0.72);
}
.generic-chrome { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
.generic-screen {
  position: absolute; inset: 0.9% 1.8%;
  border-radius: 12% / 5.6%;
  overflow: hidden;
  background: linear-gradient(180deg, #14161a 0%, #0e1013 100%);
  display: flex; flex-direction: column;
  color: #d9dbde;
  font-family: "TWK Lausanne", "Segoe UI", sans-serif;
}
.ga-top { display: flex; align-items: center; justify-content: space-between; padding: 52px 18px 12px; color: #b7babd; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.ga-title { font-size: 15px; font-weight: 600; color: #e8e9ea; letter-spacing: 0.01em; }
.ga-thread { flex: 1; padding: 20px 16px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.ga-msg { max-width: 78%; padding: 11px 14px; border-radius: 18px; font-size: 13.5px; font-weight: 300; line-height: 1.45; }
.ga-user { align-self: flex-end; background: #2b2e34; color: #ececee; border-bottom-right-radius: 6px; }
.ga-ai { align-self: flex-start; background: #1b1e23; color: #c9ccd0; border-bottom-left-radius: 6px; }
.ga-typing { display: inline-flex; gap: 5px; padding: 2px 2px; }
.ga-typing i { width: 7px; height: 7px; border-radius: 50%; background: #8a8f95; animation: ga-typing-pulse 1.2s ease-in-out infinite; }
.ga-typing i:nth-child(2) { animation-delay: 0.18s; }
.ga-typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes ga-typing-pulse { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.ga-composer { display: flex; align-items: center; gap: 10px; margin: 0 14px; padding: 10px 14px; border-radius: 999px; background: #1d2025; border: 1px solid rgba(255, 255, 255, 0.07); color: #9b9fa4; }
.ga-input { flex: 1; font-size: 13.5px; font-weight: 300; color: #8f9398; }
.ga-microcopy { text-align: center; font-size: 10.5px; font-weight: 300; color: #6f7378; padding: 9px 16px 26px; }
/* leak bubbles: outside the clipped screen so they visibly escape the phone */
.ga-leaks { position: absolute; left: 0; right: 0; top: 6%; height: 0; pointer-events: none; }
.chapter-watched .bubble-leak { animation-play-state: paused; }
.chapter-watched:has(.watched-left.in-view) .bubble-leak { animation-play-state: running; }

/* ============================================================
   §48 fix 33: chapter navigation arrows. Quiet chevrons in the turn-chevron language: thin stroke,
   soft white at 55 percent (90 on hover), 28px glyph in an invisible hit area, no pills. DOWN keeps
   the gentle bob when idle (paused during transit); UP is a smaller presence top-centre sized to
   clear the phone top at 1440. Both fade 200ms at the edges of the journey. Desktop control:
   hidden under 900px where the phone lives in document flow.
   ============================================================ */
.nav-arrow {
  position: fixed; left: 50%; transform: translateX(-50%);
  width: 48px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  color: rgba(10, 13, 49, 0.55); /* fix 44b: navy glyph on the light canvas */
  z-index: 60;
  opacity: 1; transition: opacity 200ms ease, color 160ms ease;
}
.nav-arrow:hover { color: rgba(10, 13, 49, 0.9); }
.nav-arrow:focus-visible { outline: 2px solid rgba(255, 61, 140, 0.7); outline-offset: 2px; border-radius: 8px; }
.nav-arrow.nav-hidden { opacity: 0; pointer-events: none; }
.nav-arrow.nav-active { color: rgba(10, 13, 49, 0.95); }
.nav-arrow-down { bottom: 0; height: 44px; }
.nav-arrow-up { top: 0; height: 40px; } /* phone top sits at ~43px at 1440; 40px keeps the hit area clear */
.nav-arrow-down svg { animation: sdm-chev 1.8s ease-in-out infinite; }
body.nav-transiting .nav-arrow-down svg { animation-play-state: paused; }
@media (max-width: 899px) { .nav-arrow { display: none; } }
@media (prefers-reduced-motion: reduce) { .nav-arrow-down svg { animation: none; } }

/* fix 33 rev b: on short-but-wide windows the centred arrows cannot clear the 913px phone. Instead
   of hiding them (which killed the feature on 1080p-class monitors), shift them to the right edge,
   clear of the centred phone and the right text panels. */
@media (min-width: 1616px) and (max-height: 999px) {
  .nav-arrow { left: auto; right: clamp(16px, 2vw, 40px); transform: none; }
  .nav-arrow-down { bottom: 14px; }
  .nav-arrow-up { top: 14px; }
}

/* Back to top control (quiet, bottom-left, out of the nav arrows' way) */
.back-top {
  position: fixed; left: clamp(16px, 2vw, 36px); bottom: clamp(16px, 2.5vh, 28px);
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 13, 49, 0.05); border: 1px solid rgba(10, 13, 49, 0.22); /* fix 44b: navy control on the light canvas */
  color: rgba(10, 13, 49, 0.55); cursor: pointer; padding: 0;
  z-index: 60; opacity: 0; pointer-events: none;
  transition: opacity 250ms ease, color 160ms ease, border-color 160ms ease;
}
.back-top.show { opacity: 1; pointer-events: auto; }
.back-top:hover { color: rgba(10, 13, 49, 0.95); border-color: rgba(10, 13, 49, 0.5); }
.back-top:focus-visible { outline: 2px solid rgba(255, 61, 140, 0.7); outline-offset: 2px; }
/* fix 50.2b: mobile back-to-top (was hidden under 900px). A 40px circle in the same visual
   language, bottom-left, above the caption scrim but tucked into the corner clear of the
   centred caption text. The engine shows it once the story is 3+ beats in (or past two viewport
   heights on narrow non-touch), hides it in the footer zone and mid-tween, and a tap is ONE
   house tween straight to beat 0 with the story-mode state reset. The dark-zone light variant
   (TURN and closer) applies through the existing body.turn-active/.closer-active rules. */
@media (max-width: 899px) {
  .back-top { display: flex; }
  .sdm-root .back-top { width: 40px; height: 40px; left: 10px; bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  body.dm-footer-zone .back-top,
  body.dm-tweening .back-top { opacity: 0 !important; pointer-events: none !important; }
}

/* ============================================================
   §48 fix 37.2: waitlist QR card on the closer screen. QR sits on WHITE for scannability, never
   on the aurora. Same materialise entrance as the CTAs, timed between the headline (150ms) and
   the primary button (350ms). Hidden under 900px, where the primary CTA links straight to the
   ShareRing workflow instead of opening the modal.
   ============================================================ */
.closer-qr-card {
  background: #fff;
  border-radius: 14px;
  padding: 10px;
  width: 48%; /* ~40 percent of the screen cutout */
  margin: 4px auto 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.closer-qr-card img { width: 100%; display: block; }
.closer-qr-caption { font-size: 10px; font-weight: 400; color: #6a6f76; letter-spacing: 0.02em; }
.closer-screen-overlay .closer-qr-card {
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity 500ms cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.closer-active .closer-screen-overlay .closer-qr-card { opacity: 1; transform: scale(1); transition-delay: 250ms; }
@media (max-width: 899px) { .closer-qr-card { display: none; } }

/* ============================================================
   §48 fix 38.1: Ask live typing overlay. Percent-positioned over the phone screen (geometry
   measured from the f38 capture: composer at top 82.4 percent, thread from 13.9 percent). Type
   sizes derive from --phone-width so the overlay tracks every viewport. Sequence: typing into the
   composer -> 400ms -> type line fades while the bubble slides in and the result card fades up.
   ============================================================ */
.ask-screen-overlay { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; transition: opacity 300ms ease; }
body.ask-active .ask-screen-overlay { opacity: 1; }
/* fix 38.1c: the cover REDRAWS the entire composer pill (fill, border, mic) over the baked one,
   so there is no partial strip to mismatch. Interior gradient sampled from the capture at pill
   mid-height (6/50/94 percent width); bounds measured from the capture (pill spans 4 to 96
   percent width, 82.3 to 87.0 percent height). */
.ask-type-cover {
  position: absolute; left: 4%; right: 4%; top: 82.3%; height: 4.7%;
  border-radius: 999px;
  border: 1px solid rgba(237, 243, 255, 0.13);
  background: linear-gradient(90deg, rgb(38, 48, 115) 0%, rgb(33, 37, 90) 50%, rgb(29, 28, 67) 100%);
  box-sizing: border-box;
  display: flex; align-items: center;
  padding-left: 4.6%;
}
.ask-type-cover svg { width: calc(var(--phone-width) * 0.042); height: calc(var(--phone-width) * 0.042); color: rgba(237, 243, 255, 0.5); }
.ask-type-line {
  position: absolute; left: 14.8%; right: 8%; top: 83.55%;
  font-family: "TWK Lausanne", sans-serif; font-weight: 300;
  font-size: calc(var(--phone-width) * 0.0295); line-height: 1.28;
  color: rgba(237, 243, 255, 0.92);
  transition: opacity 250ms ease;
}
body.ask-stage2 .ask-type-line { opacity: 0; }
body.ask-stage2 .ask-type-line .tw-caret { display: none; }
.ask-result-stage { position: absolute; left: 6.2%; right: 6.2%; top: 14.6%; display: flex; flex-direction: column; gap: calc(var(--phone-width) * 0.03); }
.ask-ov-bubble {
  align-self: flex-end; max-width: 82%;
  padding: calc(var(--phone-width) * 0.03) calc(var(--phone-width) * 0.037);
  border-radius: calc(var(--phone-width) * 0.045);
  border-bottom-right-radius: calc(var(--phone-width) * 0.015);
  background: linear-gradient(135deg, rgba(92, 123, 240, 0.55), rgba(52, 88, 224, 0.45));
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: calc(var(--phone-width) * 0.0335); font-weight: 300; line-height: 1.5; color: #EDF3FF;
  opacity: 0; transform: translateX(24px);
  transition: opacity 320ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ask-ov-ack {
  align-self: flex-start; max-width: 82%;
  padding: calc(var(--phone-width) * 0.03) calc(var(--phone-width) * 0.037);
  border-radius: calc(var(--phone-width) * 0.045);
  border-bottom-left-radius: calc(var(--phone-width) * 0.015);
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: calc(var(--phone-width) * 0.0335); font-weight: 300; line-height: 1.5; color: rgba(237, 243, 255, 0.9);
  opacity: 0; transform: translateY(10px);
  transition: opacity 320ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms, transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms;
}
.ask-ov-card {
  border-radius: calc(var(--phone-width) * 0.04); overflow: hidden;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.10);
  opacity: 0; transform: translateY(12px);
  transition: opacity 380ms cubic-bezier(0.2, 0.8, 0.2, 1) 400ms, transform 380ms cubic-bezier(0.2, 0.8, 0.2, 1) 400ms;
}
body.ask-stage2 .ask-ov-bubble, body.ask-stage2 .ask-ov-ack, body.ask-stage2 .ask-ov-card { opacity: 1; transform: none; }
.ask-ov-card img { width: 100%; height: calc(var(--phone-width) * 0.368); object-fit: cover; display: block; }
.ask-ov-card-body { padding: calc(var(--phone-width) * 0.027) calc(var(--phone-width) * 0.032) calc(var(--phone-width) * 0.032); display: flex; flex-direction: column; gap: 2px; }
.ask-ov-name { font-size: calc(var(--phone-width) * 0.0375); font-weight: 500; color: #EDF3FF; }
.ask-ov-meta { font-size: calc(var(--phone-width) * 0.0275); font-weight: 300; color: rgba(237, 243, 255, 0.55); }
.ask-ov-row { display: flex; align-items: center; justify-content: space-between; margin-top: calc(var(--phone-width) * 0.022); }
.ask-ov-price { font-size: calc(var(--phone-width) * 0.0325); font-weight: 600; color: #EDF3FF; }
.ask-ov-priv { font-family: "JetBrains Mono", monospace; font-size: calc(var(--phone-width) * 0.02); letter-spacing: 0.1em; color: #D6F2A8; padding: 3px 8px; border-radius: 999px; background: rgba(184, 230, 124, 0.14); border: 1px solid rgba(184, 230, 124, 0.3); }

/* ============================================================
   §48 fix 38.3: waitlist flow per Tim. The note line above the CTAs joins the materialise
   sequence between the QR card (250ms) and the primary button (350ms); the caption grows a line,
   so it left-aligns for readability. The Join button is the no-app path at all widths.
   ============================================================ */
.closer-screen-note {
  font-family: "TWK Lausanne", sans-serif;
  font-size: calc(var(--phone-width) * 0.031);
  font-weight: 400;
  color: rgba(237, 243, 255, 0.82);
  margin: 2px 0 2px;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 500ms cubic-bezier(0.34, 1.56, 0.64, 1), transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.closer-active .closer-screen-overlay .closer-screen-note { opacity: 1; transform: scale(1); transition-delay: 300ms; }
.closer-qr-caption { text-align: center; line-height: 1.45; padding: 0 4px; }

/* ============================================================
   fix 40: randomized giant-word entrances. Six markup-independent animations applied to the
   .giant-word element itself; the boundary engine picks one at random (never the same twice in a
   row per chapter) each time the chapter takes the phone. Old pizz-* classes are stripped from
   giant words at runtime so their inner-span base states cannot hide the text.
   ============================================================ */
.chapter-fade.in .giant-word.t-rise    { animation: gw-rise 760ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.chapter-fade.in .giant-word.t-curtain { animation: gw-curtain 820ms cubic-bezier(0.83, 0, 0.17, 1) both; }
.chapter-fade.in .giant-word.t-blur    { animation: gw-blur 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.chapter-fade.in .giant-word.t-wipe    { animation: gw-wipe 850ms cubic-bezier(0.83, 0, 0.17, 1) both; }
.chapter-fade.in .giant-word.t-slide   { animation: gw-slide 760ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.chapter-fade.in .giant-word.t-scale   { animation: gw-scale 820ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes gw-rise    { from { opacity: 0; transform: translateY(42px); } to { opacity: 1; transform: translateY(0); } }
@keyframes gw-curtain { from { clip-path: inset(0 0 100% 0); transform: translateY(34px); } to { clip-path: inset(0 0 0 0); transform: translateY(0); } }
@keyframes gw-blur    { from { opacity: 0; filter: blur(20px); letter-spacing: 0.04em; } 40% { filter: blur(0); } to { opacity: 1; filter: blur(0); letter-spacing: -0.035em; } }
@keyframes gw-wipe    { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes gw-slide   { from { opacity: 0; transform: translateX(-64px); } to { opacity: 1; transform: translateX(0); } }
@keyframes gw-scale   { from { opacity: 0; transform: scale(1.14); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .chapter-fade.in .giant-word.t-rise, .chapter-fade.in .giant-word.t-curtain,
  .chapter-fade.in .giant-word.t-blur, .chapter-fade.in .giant-word.t-wipe,
  .chapter-fade.in .giant-word.t-slide, .chapter-fade.in .giant-word.t-scale { animation: none; }
}

/* fix 41: chapter titles TYPE in. The page arrives with a blank title; the boundary engine types
   the name char by char with a magenta caret that blinks then leaves. Replaces the fix 40 random
   entrances (kept in CSS but no longer applied). */
.gw-caret {
  display: inline-block; width: 0.05em; height: 0.82em; margin-left: 0.04em;
  background: var(--sr-magenta); vertical-align: baseline;
  animation: tw-caret-blink 850ms steps(1) infinite;
}

/* fix 41b: titles are INVISIBLE until their first typing pass. body.gw-typing is added by the
   boundary engine on init (so standalone pages without the engine still show titles); each title
   becomes visible only at the moment typeTitle starts it. */
body.gw-typing .giant-word { visibility: hidden; }
body.gw-typing .giant-word.gw-live { visibility: visible; }

/* ============================================================
   FIX 42.2. MOBILE PHONE-HERO LAYOUT (max-width 767px). Digital Me is mostly
   viewed on phones, so every chapter collapses to one centred vertical stack:
   eyebrow + typed giant word in the TOP band, the persistent phone in the
   CENTRE, the body copy as a legible caption panel anchored to the BOTTOM
   (a soft gradient lets it sit over the phone's lower third when space is
   tight). Desktop and wide tablet (768px and up) are untouched: every rule is
   guarded by the media query so nothing leaks upward.
   ============================================================ */
@media (max-width: 767px) {
  html, body { overflow-x: clip; } /* fix 42.2b: clip (not hidden) so root does not become a scroll container and break position:sticky pinning on mobile */

  /* fix 46 HEIGHT-BUDGET LAYOUT (root fix, from Rohan's real-device screenshots: with the URL bar
     visible the visual viewport is far shorter than emulations, and a width-sized phone collided
     with the title band and caption). The phone is no longer sized from width alone: the budget
     derives from var(--vph) (the engine's stable visual-viewport height, so URL-bar show/hide
     reflows this automatically): top band reserve + caption reserve + 24px gaps; the phone gets
     the remaining height, its width follows the bezel aspect (h / 2.174), capped at 66vw
     (whichever is smaller wins), and it centres in the remaining middle zone. At ANY viewport
     height the title band, phone and caption can no longer intersect. */
  :root {
    --dm-top-reserve: clamp(110px, calc(var(--vph, 100vh) * 0.16), 150px);
    --dm-cap-reserve: clamp(150px, calc(var(--vph, 100vh) * 0.24), 210px);
    --dm-phone-h-budget: calc(var(--vph, 100vh) - var(--dm-top-reserve) - var(--dm-cap-reserve) - 48px);
    --phone-width: min(calc(var(--dm-phone-h-budget) / 2.174), 66vw);
  }
  /* centre of the middle zone (top reserve + gap + half the budget), not the viewport centre */
  .phone-hero { top: calc(var(--dm-top-reserve) + 24px + var(--dm-phone-h-budget) / 2) !important; }

  /* fix 47.1 IN-PHONE DOM SCALE: the closer overlay and roadmap screen are authored in absolute
     px for a 300px reference phone; on the budgeted (smaller) phone their text spilled outside
     the phase cards and the CTAs crossed the bezel. Each surface now lays out at reference size
     (its percent box divided by --dm-phone-scale, published by the engine; NOTE the dm- prefix: a legacy --phone-scale already lives on .phone-hero for the Frame 2 rise and must not be shadowed) and transform-scales
     back down, so the rendering is the approved 300px design, shrunk. The ask overlays already
     size everything from var(--phone-width) and need no scaling. */
  .phone-hero .closer-screen-overlay {
    left: 8% !important; top: 29% !important; right: auto !important; bottom: auto !important;
    width: calc(84% / var(--dm-phone-scale, 1)) !important;
    height: calc(65% / var(--dm-phone-scale, 1)) !important;
    transform: scale(var(--dm-phone-scale, 1));
    transform-origin: top left;
  }
  .phone-hero .roadmap-screen-overlay {
    /* the roadmap lays out at the DESKTOP-approved geometry (374px phone, 322px overlay), the
       only width where the phase cards are proven to contain their text and pills; at the 300px
       reference the entry bodies overflowed and the absolute pills (anchored to the body) rode
       out with them. 1.2467 = 374 / 300. */
    --dm-rm-ref: 1.2467;
    left: 7% !important; top: 25% !important; right: auto !important; bottom: auto !important;
    width: calc(86% * var(--dm-rm-ref) / var(--dm-phone-scale, 1)) !important;
    height: calc(70% * var(--dm-rm-ref) / var(--dm-phone-scale, 1)) !important;
    transform: scale(calc(var(--dm-phone-scale, 1) / var(--dm-rm-ref)));
    transform-origin: top left;
  }

  /* keep in-phone HTML screens (e.g. the roadmap) visible: neutralise the
     legacy mobile rule that hid .screen-content wholesale */
  .phone-hero .screen-content { display: block !important; }

  /* ---------- sticky story chapters (Meet/Vault/Skills/Ask/Act/Real) + #next + bridge ---------- */
  .chapter-sticky .chapter-scroll-track { display: block !important; }

  /* #next and THE SHIFT are short, non-pinned sections; pin their inner wrapper
     on mobile so the top/bottom band placement holds against the fixed phone. */
  .chapter-next .chapter-inner {
    position: sticky !important; top: 0 !important;
    height: var(--vph, 100dvh) !important;
    display: block !important; grid-template-columns: none !important;
    padding: 0 !important; min-height: 0 !important; width: 100% !important;
  }
  .frame-bridge { display: block !important; }
  .frame-bridge .bridge-copy {
    position: sticky !important; top: 0 !important;
    height: var(--vph, 100dvh) !important;
    width: 100% !important; max-width: 100% !important;
    display: flex !important; flex-direction: column !important;
    justify-content: flex-start !important; align-items: center !important;
    text-align: center !important;
    padding: clamp(18px, 6vh, 56px) 22px 0 !important;
    /* fix 46: SHIFT copy is top-anchored over the phone; an upper scrim in the live tint keeps
       the headline, bullets and lead on an opaque field (no text on phone pixels or grid dates) */
    background: linear-gradient(to bottom, var(--scroll-bg, #fff) 0%, var(--scroll-bg, #fff) 48%, transparent 64%) !important;
  }
  .frame-bridge .bridge-copy .chapter-h2 { font-size: clamp(30px, 8vw, 46px) !important; text-align: center !important; }

  /* eyebrow + giant word -> centred TOP band, full width */
  .chapter .chapter-copy.left,
  .chapter-marketplace .chapter-copy.left,
  .chapter-next .next-left {
    position: absolute !important;
    /* fix 46: vph-based, not 5vh: on Android the layout viewport ignores the URL bar, which
       pushed the band down while the budget (vph-based) stayed put and ate the 12px title gap */
    top: clamp(14px, calc(var(--vph, 100vh) * 0.045), 44px) !important;
    left: 0 !important; right: 0 !important;
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    padding: 0 20px 12px !important; margin: 0 !important;
    text-align: center !important;
    z-index: 26 !important;
    /* fix 46.3: the band carries a scrim that resolves to the live chapter tint, so calendar
       date glyphs never sit under the eyebrow or title */
    background: linear-gradient(to bottom, var(--scroll-bg, #fff) 0%, var(--scroll-bg, #fff) 62%, transparent 100%) !important;
  }
  .chapter .chapter-copy.left .chapter-eyebrow,
  .chapter .chapter-copy.left .eyebrow,
  .chapter-marketplace .chapter-copy.left .eyebrow,
  .chapter-next .next-left .chapter-eyebrow {
    display: block !important; text-align: center !important;
    margin: 0 0 6px !important;
    font-size: clamp(12px, 3vw, 14px) !important; letter-spacing: 0.22em !important;
  }
  /* fix 44m: giant words named explicitly at (0,4,0) so the restored 42.2 top-band size can never
     again lose to a desktop-side sizing rule of equal specificity. */
  .chapter .chapter-copy.left .chapter-h2,
  .chapter .chapter-copy.left .chapter-h2.giant-word,
  .chapter-copy.left .chapter-h2.giant-word,
  .chapter-marketplace .chapter-copy.left .chapter-h2,
  .chapter-next .next-left .next-h2,
  .chapter-next .next-left .chapter-h2 {
    font-size: clamp(58px, 15vw, 100px) !important;
    line-height: 1.0 !important; letter-spacing: -0.02em !important;
    margin: 0 !important; text-align: center !important; max-width: 100% !important;
  }

  /* h3 + body -> caption panel over the phone's lower third / below it */
  .chapter-copy-right,
  .chapter-next .next-right {
    position: absolute !important;
    top: auto !important; bottom: 0 !important;
    left: 0 !important; right: 0 !important;
    transform: none !important;
    width: 100% !important; max-width: 100% !important;
    text-align: center !important;
    /* fix 50.2b: side padding 56px (was 22) keeps the centred caption glyphs clear of the 40px
       back-to-top circle in the bottom-left corner; the 47.2 fit engine absorbs any wrap cost */
    padding: 44px 56px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 26 !important;
    /* fix 46.4: the caption scrim resolves to the LIVE chapter tint (was white, which seamed on
       every non-white chapter) and stays opaque through the text zone so caption glyphs never
       render on phone pixels or date glyphs */
    background: linear-gradient(to top, var(--scroll-bg, #fff) 0%, var(--scroll-bg, #fff) 55%, transparent 100%) !important;
    /* fix 46: the caption may never exceed its reserve. min-height 0 is required: the typewriter
       engine sets an inline min-height (its anti-reflow reserve, measured at load) and CSS lets
       min-height OVERRIDE max-height, which pushed captions onto the phone on short viewports. */
    max-height: calc(var(--dm-cap-reserve, 210px) + 24px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .chapter-copy-right .chapter-h3,
  .chapter-next .next-right .chapter-h3 {
    font-size: clamp(20px, 5.6vw, 27px) !important;
    line-height: 1.18 !important; margin: 0 0 8px !important; text-align: center !important;
  }
  /* fix 44n: phone body text was too small and too light. 18px minimum, weight 500, full ink
     (no --ink-soft in captions). Headers keep their 44m-approved sizes. */
  .chapter-copy-right .chapter-body,
  .chapter-sticky .chapter-copy-right .chapter-body,
  .chapter-copy-right .lead,
  .chapter-next .next-right .lead,
  .frame-bridge .bridge-copy .lead {
    font-size: clamp(18px, 4.7vw, 20px) !important;
    font-weight: 500 !important;
    color: var(--ink) !important;
    line-height: 1.45 !important; text-align: center !important;
    margin: 0 auto 8px !important; max-width: 34ch !important;
  }
  .frame-bridge .bridge-copy .bridge-bullets li {
    font-size: clamp(18px, 5vw, 22px) !important;
    font-weight: 500 !important;
    color: var(--ink) !important;
  }
  /* fix 49.1 + fix 50: AUTHORED mobile captions (supersedes the Ask/Skills nth-of-type diets).
     Chapters with long bodies carry a tight mobile line: on phones every dm-full paragraph hides
     and every dm-mobile line shows, gated purely by class under .sdm-root so no captioned chapter
     can ever be missed. Same specificity as the base rule; this block is later in the file, so it
     wins under 767px and the base wins above. The 47.2 clamp stays a dormant safety. */
  .sdm-root .dm-full { display: none !important; }
  .sdm-root .dm-mobile { display: block !important; }

  /* fix 47.2: caption auto-fit levels, applied by the engine when a caption's content exceeds
     its reserve (long captions clipped at the viewport edge on real phones). Step-down
     20 -> 18 -> 17px; the last level also clamps the paragraph to three clean lines with an
     ellipsis and trims the top padding. The Ask hidden-paragraph rules carry id specificity and
     stay hidden through every level. */
  .chapter-copy-right.dm-fit-1 .chapter-body,
  .chapter-copy-right.dm-fit-1 .lead,
  .chapter-next .next-right.dm-fit-1 .lead { font-size: 18px !important; }
  .chapter-copy-right.dm-fit-1 .chapter-h3,
  .chapter-next .next-right.dm-fit-1 .chapter-h3 { font-size: 20px !important; }
  .chapter-copy-right.dm-fit-2 .chapter-body,
  .chapter-copy-right.dm-fit-2 .lead,
  .chapter-next .next-right.dm-fit-2 .lead {
    font-size: 17px !important; line-height: 1.35 !important;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .chapter-copy-right.dm-fit-2 .chapter-h3,
  .chapter-next .next-right.dm-fit-2 .chapter-h3 { font-size: 18px !important; }
  .chapter-copy-right.dm-fit-2,
  .chapter-next .next-right.dm-fit-2 { padding-top: 32px !important; }

  /* ---------- Frame 1 (THE PROBLEM): centred stack, generic phone below ---------- */
  .chapter-watched.frame-problem {
    grid-template-columns: 1fr !important; gap: 20px !important;
    text-align: center !important; padding: 7vh 20px !important; align-content: center !important;
  }
  .frame-problem .watched-left { max-width: 100% !important; padding: 0 !important; justify-self: center !important; }
  .frame-problem .watched-left .chapter-h2 { font-size: clamp(28px, 7.2vw, 40px) !important; max-width: 100% !important; }
  .frame-problem .watched-left .chapter-body { font-size: clamp(18px, 4.7vw, 20px) !important; font-weight: 500 !important; color: var(--ink) !important; max-width: 100% !important; } /* fix 44n */
  .frame-problem .watched-right { justify-content: center !important; }
  /* fix 48.5: the Frame 1 generic-Assistant phone is a DOM screen missed in 47.1: its box
     follows the budgeted --phone-width but the chat content (top bar, bubbles, typing dots,
     composer, microcopy) is authored in absolute px, so bubbles rendered oversized on the
     shrunken phone. Same treatment as the closer overlay: lay out at the 300px reference and
     scale by --dm-phone-scale (replaces the old fixed 0.82). This phone is in flow, so the
     negative bottom margin hands back the layout height the visual scale gives up. */
  .generic-phone {
    width: 300px !important;
    transform: scale(var(--dm-phone-scale, 0.82)) !important;
    transform-origin: top center !important;
    margin-bottom: calc((var(--dm-phone-scale, 0.82) - 1) * 300px * 874 / 402) !important;
  }

  /* ---------- Frame 2 (INTRODUCING): slogan centred in the top band ---------- */
  .frame-intro .hero-slogan {
    width: 100% !important; justify-content: flex-start !important;
    align-items: center !important; text-align: center !important;
    padding: 11vh 22px 0 !important;
  }
  .frame-intro .hero-slogan .beats { justify-content: center !important; font-size: clamp(30px, 8.5vw, 44px) !important; }
  .frame-intro .hero-slogan .eyebrow { text-align: center !important; }

  /* ---------- THE TURN: keep both lines on the phone ---------- */
  .chapter-turn .turn-copy .turn-line-1,
  .chapter-turn .turn-copy .turn-line-2 { font-size: clamp(30px, 8.4vw, 46px) !important; line-height: 1.12 !important; }

  /* external roadmap tile grid (if present) is redundant on mobile; the story is in-phone */
  .chapter-next .roadmap-cal { display: none !important; }

  /* fix 46.3: on phones the calendar date glyphs recede so text never fights them (the band and
     caption scrims mask their zones; this dims the rest). The dark-closer light dates and the
     highlight-tile accent dates keep their own later, more specific rules. */
  .cal-month, .cal-date { color: rgba(10,13,49,0.10); }
}

/* fix 42.3 tile sizing: shrink the five mobile travel tiles to a tight cluster scale */
@media (max-width: 767px) {
  .travel-card { width: calc(var(--w) * 0.5) !important; border-radius: 9px !important; box-shadow: 0 16px 34px rgba(0,0,0,0.42), 0 4px 12px rgba(0,0,0,0.3) !important; }
}

/* fix 42.5 controls: mobile scroll hint + 48px+ tap targets. Nav arrows and back-top stay hidden
   under 768px (touch scroll replaces them); only Frame 1 shows a fading down-chevron cue. */
.scroll-hint { display: none; }
@media (max-width: 767px) {
  .scroll-hint { display: block; position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 40; color: rgba(10,13,49,0.6); pointer-events: none; animation: scroll-hint-bob 1.6s ease-in-out infinite; transition: opacity 0.5s ease; } /* fix 44b: navy hint on the light canvas */
  .scroll-hint.hidden { opacity: 0; }
  .closer-screen-overlay .ios-btn { min-height: 50px; padding-top: 15px; padding-bottom: 15px; }
}
@keyframes scroll-hint-bob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .scroll-hint { animation: none !important; } }


/* fix 42.2c: INTRODUCING slogan pinned to the TOP band on mobile (was bisected by the risen phone).
   Absolute inside the sticky frame2-track with a top-down scrim so it stays legible over the phone. */
@media (max-width: 767px) {
  .frame-intro .hero-slogan {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    width: 100% !important; max-width: 100% !important;
    min-height: 0 !important; height: auto !important;
    justify-content: flex-start !important; align-items: center !important;
    text-align: center !important;
    padding: clamp(16px, 5vh, 48px) 22px 20px !important;
    z-index: 26 !important;
    background: linear-gradient(to bottom, var(--scroll-bg, #fff) 0%, var(--scroll-bg, #fff) 58%, transparent 100%) !important; /* fix 46.4: slogan scrim resolves to the live tint (was white) */
  }
  .frame-intro .hero-slogan .beats { justify-content: center !important; font-size: clamp(28px, 7.6vw, 40px) !important; }
}
/* fix 43.3: the mobile title exit is scroll-driven. The engine writes inline transform/opacity
   from the chapter's own scroll progress (out across 0.35 to 0.5 of the pin, reversed on the way
   back up), so there is no timed transition here. This supersedes the fix 42.2d gw-exit fly-in,
   whose block also carried a stray literal backslash-n line that made CSS error recovery swallow
   the whole rule. Desktop is untouched (rules live inside the query; the engine only scrubs under
   767px and never under prefers-reduced-motion). */
@media (max-width: 767px) {
  .chapter .chapter-copy.left .giant-word,
  .chapter-marketplace .chapter-copy.left .giant-word,
  .chapter-next .next-left .giant-word {
    transform-origin: center center;
    will-change: transform, opacity;
  }
}

/* ============================================================
   FIX 43. Mobile readability and choreography (max-width 767px ONLY).
   Desktop (768px and up) is frozen: every rule lives inside the media query.
   43.1 the INTRODUCING slogan always reads above the phone.
   43.2 exactly one caption at a time, bottom band, above the phone.
   43.5 the page ends on the closer: no trailing scroll space.
   ============================================================ */
@media (max-width: 767px) {
  /* fix 43.1: .frame-intro's own z-index 5 traps its sticky track (z 12) below the fixed
     phone (z 10), so the rising phone bisected the slogan. Raise the whole section so the
     slogan and its top scrim always paint over the phone; the track passes touches through. */
  .chapter.frame-intro { z-index: 26; }
  .frame-intro .frame2-track { pointer-events: none; }

  /* fix 43.2: the roadmap inner (z 5) and THE SHIFT's sticky copy (z auto) sit in the same
     trap below the phone; the six story chapters' tracks already pin at z 20, above it.
     Raise the trapped two and let every pinned track pass touches through to the page. */
  .chapter-next .chapter-inner { z-index: 26 !important; pointer-events: none; }
  .frame-bridge .bridge-copy { z-index: 26 !important; pointer-events: none; }
  .chapter-sticky .chapter-scroll-track { pointer-events: none; }

  /* fix 43.2: ONE caption at a time. The engine marks the section that owns the viewport
     centre with .cap-active; every other caption holds at opacity 0, so no caption ghosts
     across the phone mid-transition and none lingers behind it. The panels keep their 42.2
     bottom-band anchoring and scrim. */
  .chapter-copy-right,
  .chapter-next .next-right,
  .frame-bridge .bridge-copy {
    opacity: 0 !important;
    transition: opacity 240ms ease !important;
  }
  .cap-active .chapter-copy-right,
  .chapter-next.cap-active .next-right,
  .frame-bridge.cap-active .bridge-copy { opacity: 1 !important; }

  /* fix 43.5: the page ENDS on the closer. The waitlist-rankings placeholder is a hidden future
     anchor and must never add trailing scroll space; the closer overlay already shows the same
     two CTAs as desktop (Join the waitlist to the sharer.ing ShareRing Me workflow, plus Read
     the whitepaper) and the QR card is already display none under 900px. */
  #waitlist-rankings {
    display: none !important;
    height: 0 !important; min-height: 0 !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important;
  }
}

/* ============================================================
   FIX 44. THE TURN keeps its dark dramatic beat on the light skin (Rohan's choice). The pinned
   sticky turn-track fills the viewport with deep navy while the phone recedes (body.turn-active),
   then releases to the light closer below. Text goes light here; "yours" stays magenta. Desktop
   and mobile both (the rule is not inside a media query). The recede fade is already smoothed by
   the fix 28.1 body.turn-zone transition and, on mobile, the fix 43.4 scroll-driven opacity.
   ============================================================ */
/* Full-bleed dark beat: the grid track measures to its content (~660px), so force it to span the
   viewport and offset back to the left edge. width:100vw + margin-inline:calc(50% - 50vw) is the
   standard full-bleed idiom and is robust to whatever shrink-wraps the grid box. */
.chapter-turn .turn-track {
  background: #0B0E33; /* fix 44d: matches the TURN's colour-journey anchor so the pin edges never seam */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.chapter-turn .turn-copy .turn-line-1,
.chapter-turn .turn-copy .turn-line-2 { color: #EDF3FF; }
.chapter-turn .turn-copy .turn-line-2 .me { color: var(--me); }

/* ============================================================
   FIX 44 3b.2b: footer handoff (WordPress only; the standalone build never sets the class).
   When the theme footer enters the viewport the engine marks body.dm-footer-zone: the fixed
   cinema layers fade out and stop catching pointer events so the footer renders clean and fully
   interactive. Scrolling back up removes the class and the cinema re-engages. The back-to-top
   control stays available on purpose.
   ============================================================ */
body.dm-footer-zone .phone-hero,
body.dm-footer-zone .cal-grid,
body.dm-footer-zone #travelCards,
body.dm-footer-zone .aurora,
body.dm-footer-zone .nav-arrow,
body.dm-footer-zone .closer-slogan {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 250ms ease !important;
}

/* ============================================================
   FIX 45: story mode (mobile swipe beats). While the gesture engine owns the cinema it sets
   body.dm-story-mode: touch-action none stops native panning so each swipe becomes one authored
   beat (the engine tweens between beats itself). The class drops in the footer zone (native
   scrolling returns there) and whenever the engine is disabled or killed, so this rule alone can
   never lock scrolling. Desktop never gets the class.
   ============================================================ */
body.dm-story-mode .sdm-root { touch-action: none; }

/* ============================================================
   FIX 44 2c-v3: DARK ZONE (TURN and closer own the viewport). The closer field is now deep
   navy-plum darkening to black at the footer, so everything page-level over it flips to the
   light treatment; in-phone content is untouched.
   ============================================================ */
/* grid: subtler tiers on the dark field so it reads deep navy-plum, and light date text */
body.closer-active .cal-cell { background-color: color-mix(in srgb, var(--chapter-accent,#FF3D8C) 8%, var(--scroll-bg,#12142E)); }
body.closer-active .cal-cell:nth-child(7n+3), body.closer-active .cal-cell:nth-child(11n+5) { background-color: color-mix(in srgb, var(--chapter-accent,#FF3D8C) 14%, var(--scroll-bg,#12142E)); }
body.closer-active .cal-cell:nth-child(13n+8) { background-color: color-mix(in srgb, var(--chapter-accent,#FF3D8C) 20%, var(--scroll-bg,#12142E)); }
body.closer-active .cal-month, body.closer-active .cal-date { color: rgba(237,243,255,0.25); }
/* page-level text over the dark closer field: the TURN treatment (light ink, magenta accents) */
.closer-slogan { color: #EDF3FF; }
/* chevrons and back-top: light variant whenever the TURN or the closer owns the viewport
   (they were navy on navy there). Behaviour untouched; only the ink flips. */
body.turn-active .nav-arrow, body.closer-active .nav-arrow,
body.turn-active .back-top, body.closer-active .back-top { color: rgba(237,243,255,0.75); }
body.turn-active .nav-arrow:hover, body.closer-active .nav-arrow:hover,
body.turn-active .nav-arrow.nav-active, body.closer-active .nav-arrow.nav-active,
body.turn-active .back-top:hover, body.closer-active .back-top:hover { color: rgba(237,243,255,0.95); }
body.turn-active .back-top, body.closer-active .back-top { background: rgba(237,243,255,0.06); border-color: rgba(237,243,255,0.3); }
body.turn-active .back-top:hover, body.closer-active .back-top:hover { border-color: rgba(237,243,255,0.55); background: rgba(237,243,255,0.06); }