/* Flagship-only styles: the weight-management scroll-film.
   Act I (chapters 1–3) is institutional and cold. Act II (4–5) is human and warm.
   Chapter names never render on the film — only in the HUD readout. */

body.film{background:var(--cold-void);color:var(--cold-fluoro);font-family:var(--font-body)}

/* ---------- preloader: the queue ticket ---------- */
.preloader{position:fixed;inset:0;z-index:60;display:grid;place-items:center;overflow:hidden}
.preloader::before,.preloader::after{content:"";position:absolute;left:0;width:100%;height:50.5%;
  background:var(--cold-void);transition:transform .9s cubic-bezier(.7,0,.2,1)}
.preloader::before{top:0}
.preloader::after{bottom:0}
.pre-inner{position:relative;z-index:1;text-align:center;transition:opacity .45s}
.pre-label{margin:0 0 .4rem;font:700 .72rem/1 var(--font-cold);letter-spacing:.34em;color:var(--cold-grey)}
.pre-num{margin:0;font:900 var(--step-5)/1 var(--font-cold);color:var(--cold-fluoro);
  font-variant-numeric:tabular-nums}
.pre-num.is-wordmark{font:900 var(--step-3)/1 var(--font-cold);letter-spacing:.02em}
.preloader.is-parting::before{transform:translateY(-101%)}
.preloader.is-parting::after{transform:translateY(101%)}
.preloader.is-parting .pre-inner{opacity:0}

/* ---------- HUD readout ---------- */
/* No backdrop-filter on fixed chrome — it re-blurs every scrolled frame and
   costs more than the whole film under a throttled CPU. */
.hud{position:fixed;top:calc(.75rem + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);
  z-index:40;display:flex;align-items:center;gap:.6rem;padding:.4rem .8rem;border-radius:2rem;
  background:rgba(14,20,22,.82);
  font:700 .62rem/1 var(--font-cold);letter-spacing:.28em;color:var(--cold-grey);
  opacity:0;transition:color .6s,background .6s,opacity .6s;white-space:nowrap}
.hud.is-live{opacity:1}
.hud-bar{display:block;width:3.4rem;height:2px;background:rgba(138,154,158,.3);border-radius:1px;overflow:hidden}
.hud-bar i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;
  background:var(--cold-fluoro);transition:background .6s}
body.act-2 .hud{background:rgba(250,247,242,.92);color:#8a7f74}
body.act-2 .hud-bar i{background:var(--accent)}

/* ---------- the quiet CTA pill ---------- */
.pill{position:fixed;left:50%;transform:translate(-50%,140%);bottom:var(--thumb);z-index:40;
  display:inline-block;padding:.85rem 1.4rem;border-radius:2rem;background:var(--accent);color:#fff;
  font:600 .95rem/1 var(--font-body);text-decoration:none;white-space:nowrap;
  box-shadow:0 8px 28px rgba(0,0,0,.35);opacity:0;transition:transform .5s cubic-bezier(.2,.8,.3,1),opacity .5s}
.pill.is-live{transform:translate(-50%,0);opacity:1}
/* The pill retires when it would sit on content that IS the ask (or the station's pad). */
body.ask-zone .pill,body.station-live .pill{transform:translate(-50%,140%)!important;
  opacity:0!important;pointer-events:none}
body.ask-zone .hud{opacity:0;pointer-events:none}
body.ask-zone .sound-toggle{opacity:0;pointer-events:none;transition:opacity .5s}

/* ---------- sound toggle (thumb zone, muted by default) ---------- */
.sound-toggle{position:fixed;left:1rem;bottom:var(--thumb);z-index:40;width:2.9rem;height:2.9rem;
  border-radius:50%;border:1px solid rgba(138,154,158,.5);background:rgba(14,20,22,.82);
  cursor:pointer;display:grid;place-items:center;gap:0;padding:0}
.sound-toggle i{display:flex;align-items:flex-end;gap:3px;height:1rem}
.sound-toggle b{display:block;width:3px;background:var(--cold-grey);height:30%;border-radius:1px;
  transition:height .3s}
.sound-toggle.is-on b{background:var(--accent)}
.sound-toggle.is-on b:nth-child(1){height:55%;animation:eq .9s ease-in-out infinite alternate}
.sound-toggle.is-on b:nth-child(2){height:95%;animation:eq .7s ease-in-out .15s infinite alternate}
.sound-toggle.is-on b:nth-child(3){height:70%;animation:eq 1.1s ease-in-out .3s infinite alternate}
@keyframes eq{to{height:25%}}
body.act-2 .sound-toggle{background:rgba(250,247,242,.72);border-color:rgba(20,16,14,.2)}

/* iOS Safari 26+ ignores meta theme-color and samples the body background at
   render time; a scroll-driven background animation is the one live path.
   Gated on no-preference: under reduced motion the near-zero duration snaps the
   body to the animation's END state (paper), washing out the dark Act I. */
@media (prefers-reduced-motion:no-preference) {
  @supports (animation-timeline: scroll()) {
    html,body{ animation:toolbar-shift linear both; animation-timeline:scroll(root); }
  }
}
@keyframes toolbar-shift{ 0%{background:#0E1416} 55%{background:#2A3538} 100%{background:#FAF7F2} }

/* ---------- chapters ---------- */
.chapter{position:relative;min-height:100dvh;display:grid;place-items:center;overflow:hidden;
  padding:calc(3rem + env(safe-area-inset-top,0px)) var(--gutter) calc(4.5rem + var(--safe-b))}
.chapter .ch-inner{width:100%;max-width:64rem}

/* Chapter 1 — the queue */
.ch-queue{background:var(--cold-void)}
.ch-queue h1{margin:0 0 1.1rem;font:900 var(--step-5)/1.02 var(--font-cold);
  letter-spacing:-.015em;color:var(--cold-fluoro);text-transform:uppercase;max-width:11ch;
  overflow-wrap:break-word}
.ch-queue .offer-line{margin:0 0 .8rem;max-width:34ch;font-size:var(--step-0);line-height:1.5;color:#aebcbf}
.ch-queue .fine{color:var(--cold-grey)}
.scroll-cue{position:absolute;bottom:calc(4.5rem + var(--safe-b));left:50%;transform:translateX(-50%);
  font:700 .6rem/1 var(--font-cold);letter-spacing:.3em;color:var(--cold-grey);
  animation:cue 2.2s ease-in-out infinite;transition:opacity .5s}
body.is-scrolled .scroll-cue{animation:none;opacity:0}
@keyframes cue{0%,100%{transform:translate(-50%,0);opacity:.7}50%{transform:translate(-50%,.4rem);opacity:1}}

/* Chapter 2 — the friction */
.ch-friction{background:var(--cold-void)}
.ch-friction .ch-inner{position:absolute;inset:0;max-width:none}
.ch-friction [data-phrase]{position:absolute;left:var(--x);top:var(--y);
  max-width:calc(94% - var(--x));
  font:700 clamp(1.05rem,4.6vw,1.7rem)/1.25 var(--font-cold);color:var(--cold-grey);
  transform:rotate(var(--rot)) translateY(14px);opacity:0;
  transition:opacity .55s ease,transform .55s ease}
.ch-friction [data-phrase]:nth-child(3n){color:var(--cold-fluoro)}
.ch-friction [data-phrase]:nth-child(2n){font-size:clamp(.85rem,3.6vw,1.3rem)}
.ch-friction [data-phrase].is-in{opacity:1;transform:rotate(var(--rot)) translateY(0)}

/* Chapter 3 — the clearing: the sweep station */
.ch-clearing{background:var(--cold-void)}
.ch-clearing .ch-inner{position:absolute;inset:0;max-width:none}
.station-field{position:absolute;inset:0 0 34% 0}
.station-field [data-phrase]{position:absolute;left:var(--x);top:var(--y);
  max-width:calc(94% - var(--x));
  font:700 clamp(1.05rem,4.6vw,1.7rem)/1.25 var(--font-cold);color:var(--cold-grey);
  transform:rotate(var(--rot));will-change:transform,opacity}
.station-field [data-phrase]:nth-child(3n){color:var(--cold-fluoro)}
.station-field [data-phrase]:nth-child(2n){font-size:clamp(.85rem,3.6vw,1.3rem)}
.station-line{position:absolute;left:50%;bottom:calc(var(--thumb) + 10.5rem);transform:translateX(-50%);
  margin:0;width:max-content;max-width:80vw;text-align:center;
  font:600 .9rem/1.4 var(--font-body);color:var(--cold-fluoro);transition:opacity .6s}
.station-pad{position:absolute;left:50%;bottom:calc(var(--thumb) + 3.4rem);transform:translateX(-50%);
  width:6rem;height:6rem;border-radius:50%;touch-action:none;display:grid;place-items:center;
  border:1px dashed var(--cold-grey);background:rgba(42,53,56,.4);cursor:grab;
  font:700 .62rem/1 var(--font-cold);letter-spacing:.3em;color:var(--cold-fluoro);
  transition:opacity .6s,border-color .3s}
.station-pad:active{border-color:var(--cold-fluoro);cursor:grabbing}
.station-done{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);margin:0;
  width:max-content;text-align:center;font:700 var(--step-2)/1.2 var(--font-cold);
  color:var(--cold-fluoro);opacity:0;transition:opacity 1s ease .5s}
/* Completion: the slow luminous bloom. No particle spray. */
.ch-clearing::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 42%, rgba(201,214,210,.30), rgba(201,214,210,.06) 45%, transparent 70%);
  transition:opacity 1.2s ease}
.ch-clearing.is-clear::after{opacity:1}
.ch-clearing.is-clear .station-line,.ch-clearing.is-clear .station-pad{opacity:0;pointer-events:none}
.ch-clearing.is-clear .station-done{opacity:1}
/* Completion clears the field however it was reached (sweep, auto-release, ?jump). */
.ch-clearing.is-clear .station-field [data-phrase]{opacity:0!important;transition:opacity .8s ease}

/* Chapter 4 — the turn: the world changes typeface. Driven by scrub, shown never narrated. */
.ch-turn{background:transparent}
.turn-paper{position:absolute;inset:0;background:var(--paper);opacity:0}
.turn-stack{position:relative;display:grid;width:100%}
.turn-stack>*{grid-area:1/1;align-self:center}
.turn-cold{font:900 var(--step-3)/1.08 var(--font-cold);color:var(--cold-fluoro);
  text-transform:uppercase;max-width:13ch;margin:0}
.turn-warm{opacity:0;margin:0}
.turn-warm h2{font:700 var(--step-3)/1.12 var(--font-warm);color:var(--ink);margin:0 0 1rem;max-width:16ch}
.turn-warm p{font:400 var(--step-0)/1.55 var(--font-body);color:#453f3a;max-width:36ch;margin:0}

/* Chapter 5 — the door: the finale. Slow, massive, luminous. No particle spray. */
.ch-door{background:var(--paper);color:var(--ink)}
.finale-bloom{position:absolute;inset:-25%;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle at 50% 58%, rgba(212,98,63,.42), rgba(250,247,242,0) 62%);
  opacity:0;transform:scale(.72);transition:opacity 1.15s ease,transform 1.15s ease}
.ch-door.is-open .finale-bloom{opacity:1;transform:scale(1)}
.finale-head{font:700 var(--step-4)/1.05 var(--font-warm);color:var(--ink);margin:0 0 1rem;max-width:10ch}
.finale-line{font:400 var(--step-0)/1.55 var(--font-body);color:#453f3a;max-width:34ch;margin:0 0 1.6rem}
.finale-cta{opacity:0;pointer-events:none;text-decoration:none;display:inline-block}
.ch-door.is-open .finale-cta{opacity:1;pointer-events:auto}
.ch-door .fine{color:#8a7f74}
.finale-motes{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity 1.5s ease .4s}
.ch-door.is-open .finale-motes{opacity:1}
.finale-motes span{position:absolute;bottom:-4%;left:var(--mx);width:var(--ms);height:var(--ms);
  border-radius:50%;background:radial-gradient(circle,rgba(212,98,63,.5),rgba(212,98,63,0) 70%);
  animation:mote-rise var(--md) linear var(--mdelay) infinite}
@keyframes mote-rise{
  0%{transform:translateY(0) translateX(0);opacity:0}
  12%{opacity:.9}
  80%{opacity:.5}
  100%{transform:translateY(-108vh) translateX(var(--mdrift));opacity:0}
}

/* Quiz — one question per screen, Act II */
.quiz-progress{display:flex;align-items:center;gap:.8rem;margin:1.5rem 0 1rem;
  font:600 .8rem/1 var(--font-body);color:#8a7f74}
.quiz-progress span{flex:none}
.quiz-progress i{display:block;flex:1;height:3px;background:var(--rule);border-radius:2px;overflow:hidden}
.quiz-progress b{display:block;height:100%;width:0;background:var(--accent);transition:width .35s ease}
.quiz-screen h3{font:700 var(--step-1)/1.25 var(--font-warm);margin:0 0 .35rem}
.quiz-note{font-size:.82rem;color:#8a7f74;margin:0 0 .6rem}
.quiz-opt{display:block;width:100%;text-align:left;margin:0 0 .6rem;padding:.9rem 1.1rem;
  font:600 .95rem/1.3 var(--font-body);color:var(--ink);background:#fff;
  border:1px solid var(--rule);border-radius:.5rem;cursor:pointer;min-height:3rem;
  transition:border-color .15s,transform .15s}
.quiz-opt:hover,.quiz-opt:focus-visible{border-color:var(--accent);transform:translateY(-1px)}
.quiz-select{display:block;width:100%;margin:0 0 .9rem;padding:.85rem 1rem;font:inherit;
  border:1px solid var(--rule);border-radius:.5rem;background:#fff;color:var(--ink)}
[data-results] h3{font:700 var(--step-2)/1.2 var(--font-warm);margin:1.5rem 0 .75rem}

/* Objections — Act II cards */
.objections h2{font:700 var(--step-2)/1.15 var(--font-warm);margin:0 0 1.25rem}
.objections .obj{background:#fff;border:1px solid var(--rule);border-radius:.6rem;padding:1.1rem 1.25rem;margin:0 0 .9rem}
.objections .obj h3{margin:0 0 .4rem;font:600 var(--step-0) var(--font-body)}
.objections .obj p{margin:0;font-size:.95rem;color:#453f3a}
.objections .btn{margin-top:.75rem;text-decoration:none;display:inline-block}

/* ---------- after-film content (Act II paper) ---------- */
.after-film{background:var(--paper);color:var(--ink)}
.after-film .wrap{padding-block:3rem}

/* ---------- desktop: the cinema stage ----------
   Not a bigger phone. The type film plays on a centred stage; the margins are
   alive with the film's own light; the HUD moves into the left margin. */
@media (min-width:1024px) and (pointer:fine){
  body.film::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(120vh 90vh at 50% 40%, rgba(42,53,56,.55), rgba(14,20,22,0) 70%);
    transition:opacity 1s}
  body.film.act-2::before{background:radial-gradient(120vh 90vh at 50% 40%, rgba(212,98,63,.14), rgba(250,247,242,0) 70%)}
  body.film::after{content:"";position:fixed;top:0;left:50%;transform:translateX(-50%);
    width:min(46vw,720px);height:100%;z-index:1;pointer-events:none;
    border-inline:1px solid rgba(138,154,158,.16);transition:opacity .6s}
  body.film.act-2::after{border-color:rgba(20,16,14,.1)}
  /* The stage frame frames the FILM. It has no business over the content
     sections below it, and no business at all in the static fallback. */
  body.film.ask-zone::before,body.film.ask-zone::after{opacity:0}
  body.reduced.film::before,body.reduced.film::after{display:none}
  .chapter .ch-inner{max-width:min(44vw,700px)}
  /* The friction/station fields ARE the theatre — they keep the full viewport. */
  .ch-friction .ch-inner,.ch-clearing .ch-inner{max-width:none}
  .ch-queue h1{font-size:var(--step-4)}
  .hud{left:calc(50% - min(23vw,360px));writing-mode:vertical-rl;top:50%;margin-right:1.2rem;
    transform:translate(-100%,-50%) rotate(180deg);padding:.8rem .4rem;gap:.8rem}
  .hud-bar{width:2px;height:3.4rem}
  .hud-bar i{width:100%;height:0}
  /* friction/station fields keep the full viewport — the margins are part of the theatre */
  .objections .wrap{max-width:64rem}
  .objections .obj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
  .objections .obj{margin:0}
}

/* ---------- reduced motion: the editorial fallback ----------
   A page, not an apology: full copy in reading order, quiz and CTA fully
   functional. No pinning, no scrub, no film chrome, no sound. */
body.reduced .chapter{min-height:0;padding-block:3.5rem}
body.reduced .scroll-cue,body.reduced .hud,body.reduced .sound-toggle,
body.reduced .finale-motes,body.reduced .ch-clearing{display:none}
body.reduced .ch-friction .ch-inner{position:static;max-width:64rem}
body.reduced .ch-friction [data-phrase]{position:static;display:inline-block;
  opacity:1!important;transform:none!important;margin:.25rem .8rem .25rem 0;max-width:none}
body.reduced .ch-turn{background:var(--paper)}
body.reduced .turn-paper{opacity:1!important}
body.reduced .turn-cold{display:none}
body.reduced .turn-warm{opacity:1!important}
body.reduced .finale-bloom{opacity:.5;transform:none}
body.reduced .finale-cta{opacity:1;pointer-events:auto}
body.reduced .pill{transform:translate(-50%,0);opacity:1}
/* Last so it wins the cascade: the fallback's phrase band aligns with the
   desktop reading column instead of spanning the 64rem film width. */
@media (min-width:1024px) and (pointer:fine){
  body.reduced .ch-friction .ch-inner{max-width:min(44vw,700px)}
}