/* ============================================================
   INJAZ — "2,480" phone rebuild (vertical cinema)
   phone.css — the phone composition layer. EVERY rule is scoped
   under body.phone (set only by js/phone/p-main.js), so desktop
   is untouched by this file existing.

   Principles (PHONE-REBUILD-PLAN.md §2):
   - full-bleed, no visible bands/boxes/scrims — copy floats in
     the field; formations are composed to breathe around it
   - the invisible grid: HEAD copy zone (top ~26svh) · STAGE
     (dots) · FOOT (captions) + safe areas; svh so the address
     bar never reflows a frame
   - one phone type scale built up from the brand minimums
   - palette tokens only (styles.css :root)
   ============================================================ */

/* the deck doesn't scroll — the world moves, the page never does */
body.phone{ position:fixed; inset:0; overflow:hidden;
  touch-action:none; overscroll-behavior:none;
  -webkit-user-select:none; user-select:none; }
/* desktop chrome is dead weight on the phone path */
body.phone .stage, body.phone .rail, body.phone .scroll-track,
body.phone .scroll-cue, body.phone .viewport-notice, body.phone .gather-label{ display:none !important; }

/* the phone stage root */
body.phone .pstage{ display:block; position:fixed; inset:0; z-index:5; pointer-events:none; }
.pstage{ display:none; }   /* inert everywhere else (desktop) */
body.phone.preboot .pstage{ opacity:0; }

/* ---- copy blocks: fixed, full-width, centre-aligned; JS drives opacity +
   --prise (a translateY rise) per frame from T. No block ever paints a
   ground — the field is composed to give the copy clear water. ---- */
body.phone .pb{ position:fixed; left:0; right:0; opacity:0;
  padding:0 clamp(20px, 6vw, 32px);
  text-align:center; transform:translateY(var(--prise, 0px)); }

/* ---- the phone type scale (brand floors: 18px regular / 14pt bold) ---- */
body.phone .p-kicker{ font-size:12px; font-weight:800; letter-spacing:.22em;
  text-transform:uppercase; color:var(--blue); margin-bottom:14px; }
body.phone .p-title{ font-size:clamp(34px, 10.2vw, 46px); line-height:1.04; color:var(--paper); }
body.phone .p-sub{ font-size:16px; line-height:1.55; color:var(--sky-90); margin-top:16px; }

/* cover: title stack sits in the upper-middle, clear of the poised bead's fall line */
body.phone #pb-cover{ top:16svh; }
body.phone #pb-cover .p-sub{ max-width:30ch; margin-left:auto; margin-right:auto; }

/* the cover logo — the brand, big, in the clear water under the title */
body.phone .p-coverlogo{ display:block; width:min(48vw, 210px); height:auto;
  margin:34px auto 0; filter:brightness(0) invert(1); opacity:.95; }

/* the small corner mark, top-left of EVERY beat (mirrors the desktop
   .story-mark, round-3 item 1). p-main fades it only on the finale plate,
   where the big lockup takes over. Top-anchored beats guard their own top
   (max(Xsvh, safe+52px)) so copy never runs under it on notched phones. */
body.phone .p-cornerlogo{ position:fixed; left:18px;
  top:calc(env(safe-area-inset-top, 0px) + 16px); z-index:7;
  opacity:1; pointer-events:none; }
body.phone .p-cornerlogo img{ display:block; height:26px; width:auto;
  filter:brightness(0) invert(1); }
/* the light act — the supplied artwork in its own colours, like desktop */
body.phone.on-light .p-cornerlogo img{ filter:none; }

/* the swipe cue — bottom centre, above the safe area */
body.phone .p-cue{ position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom, 0px) + 26px);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sky-75); opacity:0; pointer-events:none; }
body.phone .p-cue i{ position:relative; width:1px; height:40px;
  background:rgba(194,237,240,.22); overflow:hidden; }
body.phone .p-cue i::after{ content:""; position:absolute; left:0; bottom:0; width:1px; height:20px;
  background:linear-gradient(to top, var(--sky), transparent);
  transform:translateY(22px); animation:p-cue 2.2s cubic-bezier(.22,1,.36,1) infinite; }
@keyframes p-cue{ 0%{ transform:translateY(22px); opacity:0; } 25%{ opacity:1; } 100%{ transform:translateY(-42px); opacity:0; } }

/* the fall — one line, upper third, the bead falls past it */
body.phone #pb-fall{ top:max(14svh, calc(env(safe-area-inset-top, 0px) + 52px)); }
body.phone #pb-fall .p-line{ font-size:clamp(22px, 6.4vw, 30px); line-height:1.3; color:var(--paper); }
body.phone #pb-fall .p-line2{ font-size:16px; color:var(--sky-75); margin-top:14px; }

/* the gather — the count rides the FOOT zone under the swelling cloud */
body.phone #pb-gather{ bottom:calc(env(safe-area-inset-bottom, 0px) + 11svh); }
body.phone #pb-gather .p-count{ font-family:var(--display); font-weight:800;
  font-size:clamp(44px, 13vw, 60px); line-height:1; color:var(--paper); letter-spacing:-.01em; }
body.phone #pb-gather .p-cap{ font-size:12px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--sky-75); margin-top:10px; }

/* the 2,480 typeform — the numerals ARE the headline; one quiet caption below */
body.phone #pb-t2480{ bottom:calc(env(safe-area-inset-bottom, 0px) + 13svh); }
body.phone .p-midcap{ font-size:15px; line-height:1.55; color:var(--sky-90);
  max-width:30ch; margin:0 auto; }

/* Amal — her chip floats in the lower third; the engine draws the gold leader to it */
body.phone #pb-amal{ top:64svh; }
/* ROUND 18.2 — the star's own stop. Its line sits directly under her name,
   which is held on screen through this beat, so the two read as one block that
   gained a sentence rather than as a new screen. 71svh clears a two-line chip
   at 360 and still leaves the nav strip untouched. */
body.phone #pb-nstar{ top:71svh; }
/* §DW — the duet's copy heads the frame; the pair stands in the band below */
body.phone #pb-duet{ top:max(11svh, calc(env(safe-area-inset-top, 0px) + 52px)); }
body.phone #pb-duet .p-sub{ max-width:28ch; margin-left:auto; margin-right:auto; }
body.phone .p-chip{ display:inline-block; font-size:16px; line-height:1.5; color:var(--sky-90); }
body.phone .p-gold{ color:var(--gold); font-weight:700; }

/* chapter breakers — the sanctioned BIG type moment (ALL five — a breaker
   missing from this rule renders at its static position and clips the top) */
body.phone #pb-br1, body.phone #pb-br2, body.phone #pb-br3,
body.phone #pb-br4, body.phone #pb-br5{ top:max(12svh, calc(env(safe-area-inset-top, 0px) + 52px)); }
body.phone .p-chindex{ display:flex; justify-content:center; align-items:center; gap:.6em;
  font-size:13px; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
  color:var(--sky-75); margin-bottom:16px; }
body.phone .p-ci-num{ font-weight:800; color:var(--accent); }
body.phone .p-ci-num::before{ content:""; display:inline-block; width:22px; height:2px;
  margin-right:.7em; vertical-align:.22em; background:currentColor; border-radius:2px; }
body.phone .p-chname{ font-size:clamp(56px, 17vw, 76px); line-height:.96;
  text-transform:uppercase; letter-spacing:-.004em; color:var(--paper); text-wrap:balance; }
/* long chapter names (Work & ventures · The multiplier) — sized to NEVER
   clip the bezel (round-3: "THE MULTIPLIE|" ran off the right edge) */
body.phone .p-chname--long{ font-size:clamp(34px, 10.6vw, 52px); line-height:1.04; }
body.phone .p-chpromise{ font-size:16px; line-height:1.6; color:var(--sky-90);
  max-width:30ch; margin:18px auto 0; }

/* 81% typeform — kicker above, the verdict line below the numerals.
   NOTE: the verdict is its OWN .pb block (pb-t81sub): a fixed child inside a
   transformed parent resolves against the parent, not the viewport — the
   subline vanished off-screen until it was lifted out. */
body.phone #pb-t81{ top:max(8svh, calc(env(safe-area-inset-top, 0px) + 52px)); }
body.phone #pb-t81sub{ bottom:calc(env(safe-area-inset-bottom, 0px) + 12svh); }
body.phone .p-sub81{ font-family:var(--display); font-weight:600;
  font-size:clamp(19px, 5.4vw, 24px); line-height:1.4; color:var(--paper); }

/* NPS — stat in the head, the gauge owns the stage below */
body.phone #pb-nps{ top:max(8svh, calc(env(safe-area-inset-top, 0px) + 52px)); }
body.phone .p-stat{ font-size:clamp(64px, 19vw, 88px); line-height:.95; color:#fff;
  font-variant-numeric:tabular-nums; }
body.phone .p-statsub{ font-family:var(--display); font-weight:600;
  font-size:16.5px; line-height:1.45; color:var(--sky-90); max-width:30ch; margin:14px auto 0; }
body.phone #pb-npsfoot{ bottom:calc(env(safe-area-inset-bottom, 0px) + 8.5svh); }
body.phone .p-foot{ font-size:14px; line-height:1.5; color:var(--sky-75); }
body.phone .p-foot b{ color:var(--blue); font-family:var(--display); }

/* quotes — full-bleed calm; the aqua mark, the words, nothing else.
   Round-1: text sits LOW (the figure above gets the room and the size).
   ONE rule for ALL quote beats — q2/q3 missing here was the "testimonial
   pages are broken" bug (they measured from an unstyled block). */
body.phone #pb-q1, body.phone #pb-q2, body.phone #pb-q3,
body.phone #pb-q4, body.phone #pb-q5{
  top:63svh; transform:translateY(calc(-50% + var(--prise, 0px))); }
body.phone .p-qmark{ display:block; font-size:clamp(56px, 16vw, 80px); font-weight:800;
  line-height:.6; color:var(--accent); margin-bottom:.05em; }
body.phone .p-qmark::before{ content:"\201C"; }
body.phone .p-quote{ font-family:var(--display); font-weight:600; text-transform:none;
  font-size:clamp(23px, 6.6vw, 30px); line-height:1.38; color:var(--paper);
  max-width:24ch; margin:0 auto; }
/* ROUND 19 — the ch3 Bahrain quote is the one that runs to five lines on the
   desktop and eleven here; at the shared size its block is 581px of an 844px
   screen and there is nowhere for it to go. It steps down, which is the same
   call the desktop already makes for this quote (#quote3 .impact-quote in
   styles.css) and for the same reason: one statement, read as one breath. */
body.phone #pb-q3 .p-quote{ font-size:clamp(20px, 5.6vw, 25px); }
/* ROUND 17A — the invented-name disclosure under a Voices quote. Reuses the
   phone's own .p-caveat (the established small quiet caption); only the top
   margin changes, so it reads as one block with the name above it. */
body.phone .p-qnote{ margin-top:10px; max-width:32ch; }
body.phone .p-qattr{ font-size:14px; font-style:italic; letter-spacing:.02em;
  color:var(--sky-75); margin-top:20px; }

/* ---- §9 the bottom progress bar — the only persistent chrome ----
   The visible line stays a 2px hairline; .pnav-zone around it is the
   ≥44px touch target (tap → jump to the nearest hold / a chapter tick,
   drag → scrub). Quiet at rest; while a finger is on it (.live) the
   line thickens slightly, the playhead grows, and the tip names the
   stop under it. */
body.phone .pnav-zone{ position:fixed; left:0; right:0; bottom:0; z-index:40;
  height:calc(env(safe-area-inset-bottom, 0px) + 46px);
  pointer-events:auto; touch-action:none; cursor:pointer; }
body.phone .pnav{ position:absolute; left:clamp(20px,6vw,32px); right:clamp(20px,6vw,32px);
  bottom:calc(env(safe-area-inset-bottom, 0px) + 12px); height:2px;
  background:rgba(194,237,240,.14); border-radius:2px;
  transition:transform .25s cubic-bezier(.22,1,.36,1); }
body.phone .pnav i{ display:block; height:100%; width:0;
  background:var(--accent); border-radius:2px; opacity:.85; }
body.phone .pnav-zone.live .pnav{ transform:scaleY(2); }
/* chapter ticks — five quiet marks that light as their chapter passes */
body.phone .pnav-ticks{ position:absolute; inset:0; pointer-events:none; }
body.phone .pnav-tick{ position:absolute; top:50%; width:2px; height:8px;
  transform:translate(-50%,-50%); border-radius:1px;
  background:rgba(194,237,240,.38); }
body.phone .pnav-tick.past{ background:var(--accent); }
/* the playhead — a small breathing dot riding the line */
body.phone .pnav-ph{ position:absolute; top:50%; left:0; width:8px; height:8px;
  transform:translate(-50%,-50%); border-radius:50%;
  background:var(--accent); box-shadow:0 0 10px rgba(140,220,230,.55);
  transition:width .2s ease, height .2s ease; }
body.phone .pnav-zone.live .pnav-ph{ width:12px; height:12px; }
/* the tip — names the stop while (and just after) the finger is down */
body.phone .pnav-tip{ position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom, 0px) + 34px);
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper); background:rgba(15,32,40,.88);
  border:1px solid rgba(194,237,240,.2); border-radius:999px;
  padding:8px 16px; white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .3s ease; }
body.phone .pnav-zone.live .pnav-tip{ opacity:1; }
body.phone.on-light .pnav-tick{ background:rgba(34,64,77,.3); }
body.phone.on-light .pnav-tick.past{ background:var(--inkdim); }
body.phone.on-light .pnav-ph{ background:var(--inkdim); box-shadow:none; }
body.phone.on-light .pnav-tip{ color:var(--ink); background:rgba(250,250,244,.92);
  border-color:rgba(34,64,77,.18); }

/* ============================================================
   TAP-A-DOT — the PEOPLE scene, the hint ring, and the story sheet
   ============================================================ */

/* the dots-are-people invitation — low, under the breathing cloud */
body.phone #pb-people{ bottom:calc(env(safe-area-inset-bottom, 0px) + 11svh); }
body.phone .p-peopleline{ font-family:var(--display); font-weight:600;
  font-size:clamp(21px, 6vw, 28px); line-height:1.3; color:var(--paper); }
body.phone .p-peoplesub{ font-size:14px; line-height:1.55; color:var(--sky-75);
  max-width:30ch; margin:12px auto 0; }

/* the gold ring pulsing on one dot (desktop .dot-hint, phone-sized) */
body.phone .p-dothint{ position:fixed; left:0; top:0; z-index:8; pointer-events:none; }
body.phone .p-dothint i{ position:absolute; left:0; top:0; width:34px; height:34px;
  transform:translate(-50%,-50%); border-radius:50%;
  border:1.5px solid rgba(227,226,79,.9); }
body.phone.motion .p-dothint:not([hidden]) i{ animation:p-dh 1.8s ease-out infinite; }
@keyframes p-dh{ 0%{ transform:translate(-50%,-50%) scale(.5); opacity:.95; }
  70%{ transform:translate(-50%,-50%) scale(1.4); opacity:0; } 100%{ opacity:0; } }

/* Amal's chip is a door (mirrors the desktop CTA) — make it feel like one */
body.phone #pb-amal .p-chip{ pointer-events:auto; cursor:pointer;
  border-bottom:1px solid rgba(227,226,79,.45); padding-bottom:3px; }

/* ---- the story sheet: the shared .dossier, in phone grammar ----
   Full-width bottom sheet, grab handle, slide-up entrance (p-sheet.js
   glides it out through the same transform). The desktop panel rules
   (styles.css) centre it with translateX — neutralise that here. */
body.phone .dossier-panel{ left:0; right:0; transform:none;
  width:100%; max-height:86svh;
  border-radius:18px 18px 0 0;
  padding:30px 22px calc(env(safe-area-inset-bottom, 0px) + 30px);
  overflow-y:auto; -webkit-overflow-scrolling:touch; touch-action:pan-y;
  overscroll-behavior:contain;
  animation:p-sheet-up .46s cubic-bezier(.2,.7,.2,1); }
@keyframes p-sheet-up{ from{ transform:translateY(9%); opacity:0; }
  to{ transform:translateY(0); opacity:1; } }
/* the grab handle */
body.phone .dossier-panel::before{ content:""; position:absolute; left:50%; top:9px;
  width:42px; height:4px; transform:translateX(-50%); border-radius:999px;
  background:rgba(34,64,77,.22); }
/* a thumb-sized close, clear of the handle */
body.phone .dossier-close{ width:40px; height:40px; margin:2px 0 0; }
/* phone type inside the sheet: the desktop card sizes hold up, only the
   name steps down a notch so long invented names never wrap awkwardly */
body.phone .dossier-name{ font-size:30px; }
/* ROUND 15 — the passport's name sits INSIDE the identity strip beside the
   flag and the program chip, so it steps down rather than up on a phone. */
body.phone .story-name{ font-size:19px; }
body.phone .story-prog{ max-width:104px; font-size:9px; padding:4px 9px; }

/* ============================================================
   R1 — CH2 (light act) + CH3 components
   ============================================================ */

/* shared head block for data beats: kicker + headline + subline at the top */
body.phone .p-head{ font-size:clamp(24px, 6.8vw, 32px); line-height:1.14;
  color:var(--paper); text-wrap:balance; }
body.phone .p-subhead{ font-size:15px; line-height:1.55; color:var(--sky-90);
  max-width:34ch; margin:12px auto 0; }
body.phone .pb .p-head{ margin-top:0; }
body.phone #pb-bars, body.phone #pb-mom, body.phone #pb-neet, body.phone #pb-status,
body.phone #pb-narrow, body.phone #pb-funl, body.phone #pb-spark,
body.phone #pb-f336{ top:max(9svh, calc(env(safe-area-inset-top, 0px) + 52px)); }
body.phone #pb-burst{ top:max(8svh, calc(env(safe-area-inset-top, 0px) + 52px)); }

/* full-bleed statement beat (7-in-10) */
body.phone .p-statement{ font-size:clamp(21px, 6vw, 28px); line-height:1.4;
  color:var(--paper); max-width:28ch; margin:0 auto; }
body.phone .p-hl{ color:var(--blue); font-weight:700; }

/* foot blocks: legends + stat lines + caveats */
body.phone #pb-momfoot, body.phone #pb-statusfoot, body.phone #pb-neetfoot{
  bottom:calc(env(safe-area-inset-bottom, 0px) + 8.5svh); }
body.phone #pb-sparkfoot, body.phone #pb-f336foot, body.phone #pb-burstfoot{
  bottom:calc(env(safe-area-inset-bottom, 0px) + 7.5svh); }
body.phone .p-legend{ display:flex; flex-wrap:wrap; justify-content:center;
  gap:6px 18px; font-size:13px; color:var(--sky-75); }
body.phone .p-legend b{ color:var(--paper); font-family:var(--display); font-weight:700;
  font-variant-numeric:tabular-nums; }
body.phone .p-legend-lg{ gap:8px 26px; font-size:15px; }
body.phone .p-legend-lg b{ font-size:19px; }
/* visual-QA pass — the moments legend is an AXIS, not a legend: the five
   histogram columns sit in 5 equal slots across 90% of W (see F.MOMENTS'
   MOBILE branch), so a matching 5-column grid puts each value under its own
   column; the centred flex row drifted the outer labels ~30px off theirs */
body.phone #pb-momfoot .p-legend{ display:grid; grid-template-columns:repeat(5,1fr);
  /* the fitted chart spans ~97.4vw (fitSlotY scales the 0.90W composition up
     on ~19.5:9 portrait): pixel-measured column centers 43.8/119.3/195.5/
     271.3/347.3 at W=390 → 75.9px cells. Viewport-centred so the parent
     block's padding can't shear the axis off the columns. */
  width:97.4vw; margin-left:50%; transform:translateX(-50%);
  justify-items:center; gap:0; }
/* §R9-W2 — one quiet unit/key line under a legend ("formative moments
   recalled", "outline dots — regional benchmark") */
body.phone .p-legend-unit{ margin-top:6px; font-size:12px; letter-spacing:.02em;
  color:var(--sky-75); opacity:.85; }
body.phone.on-light .p-legend-unit{ color:var(--ink-55); }
body.phone .p-footline{ font-size:15px; line-height:1.5; color:var(--sky-90);
  max-width:34ch; margin:0 auto 8px; }
body.phone .p-footline b{ color:var(--blue); font-family:var(--display); font-weight:700;
  font-variant-numeric:tabular-nums; font-size:1.15em; }
body.phone .p-caveat{ font-size:11.5px; font-style:italic; color:var(--sky-75);
  max-width:34ch; margin:2px auto 0; }
/* ROUND 16.1 — a BASE line, not a caveat: the desktop footnote's disclosure on
   the phone. Quiet and upright (a base is a fact, not an aside, so it never
   takes .p-caveat's italic), and wider than 34ch so it lands in three lines
   instead of six above the key line it shares the foot with. */
body.phone .p-legend-base{ font-size:10.5px; line-height:1.45; color:var(--sky-75);
  opacity:.8; max-width:42ch; margin:0 auto; }
body.phone.on-light .p-legend-base{ color:var(--ink-55); }

/* the 78% ring text block — graphic above, verdict below (quote pattern) */
body.phone #pb-ring{ top:66svh; transform:translateY(calc(-50% + var(--prise, 0px))); }
body.phone .p-substat{ font-size:15px; color:var(--sky-75); margin-top:12px; }
body.phone .p-substat b{ color:var(--blue); font-family:var(--display); font-size:1.3em; }

/* the barrier — the one honest dark beat. ROUND 13 (2026-08-03): the vertical
   rule is GONE here too — Saurabh's repeated ask ("told you 500 times"), same
   verdict as the desktop .barrier-beat. The class name stays .p-redrule so
   the phone markup and the round-4 phone commits are untouched. */
body.phone #pb-barrier{ top:max(8svh, calc(env(safe-area-inset-top, 0px) + 52px)); }
body.phone .p-redrule{ display:inline-block; text-align:left; max-width:30ch; }
body.phone .p-redrule .p-kicker{ margin-bottom:10px; }
body.phone .p-redrule .p-stat{ font-size:clamp(56px, 16vw, 76px); }
body.phone .p-redrule .p-statsub{ margin:10px 0 0; max-width:28ch; }
body.phone .p-redrule .p-substat{ margin-top:10px; max-width:28ch; }

/* skills-bar row labels (positioned from __PMETA by p-main) */
body.phone .pbars-rows{ position:fixed; inset:0; z-index:6; pointer-events:none;
  opacity:0; }
body.phone .pbars-rows .pbr-name{ position:absolute; transform:translateY(-100%);
  font-size:13px; font-weight:600; color:var(--ink); letter-spacing:.01em; }
body.phone .pbars-rows .pbr-val{ position:absolute; transform:translateY(-50%);
  font-family:var(--display); font-weight:700; font-size:15px; color:var(--ink);
  font-variant-numeric:tabular-nums; }
/* §R9-W2 (slide 16) — the green top-skill marker is gone on both spines:
   an unexplained coloured dot next to 83% read as a leftover in review. */

/* hourglass gate labels (positioned from __PMETA by p-main) */
body.phone .pfunl-labels{ position:fixed; inset:0; z-index:6; pointer-events:none;
  opacity:0; }
body.phone .pfunl-labels .pfl{ position:absolute; transform:translateY(-50%);
  font-size:12px; line-height:1.3; color:var(--sky-75); max-width:15ch; }
body.phone .pfunl-labels .pfl b{ display:block; font-family:var(--display); font-weight:700;
  font-size:16px; color:var(--paper); font-variant-numeric:tabular-nums; }
body.phone .pfunl-labels .pfl.gold b{ color:var(--gold); }

/* ---- the LIGHT ACT (Ch2 rides Optimistic Ice) — ink registers ---- */
body.phone.on-light .p-kicker{ color:var(--inkdim); }
body.phone.on-light .p-head, body.phone.on-light .p-stat,
body.phone.on-light .p-chname, body.phone.on-light .p-statement,
body.phone.on-light .p-quote{ color:var(--ink); }
body.phone.on-light .p-subhead, body.phone.on-light .p-statsub,
body.phone.on-light .p-chpromise, body.phone.on-light .p-footline{ color:var(--ink-70); }
body.phone.on-light .p-legend{ color:var(--ink-55); }
body.phone.on-light .p-legend b{ color:var(--ink); }
body.phone.on-light .p-substat{ color:var(--ink-55); }
body.phone.on-light .p-substat b, body.phone.on-light .p-footline b{ color:var(--inkdim); }
body.phone.on-light .p-qmark, body.phone.on-light .p-ci-num{ color:var(--inkdim); }
body.phone.on-light .p-chindex{ color:var(--ink-55); }
body.phone.on-light .p-qattr{ color:var(--ink-70); }
body.phone.on-light .pnav{ background:rgba(34,64,77,.16); }
body.phone.on-light .pnav i{ background:var(--inkdim); }

/* ============================================================
   R2 — CH4 (cream act) + CH5 + EPILOGUE components
   ============================================================ */

/* engagement / give-back: stat heads (same grid as data beats) */
body.phone #pb-eng, body.phone #pb-give, body.phone #pb-flyw, body.phone #pb-cp,
body.phone #pb-recap, body.phone #pb-toc{ top:9svh; }
body.phone #pb-climb{ top:9svh; }
body.phone #pb-eng .p-legend, body.phone #pb-give .p-legend{ margin-top:14px; }

/* the heart line + other foot blocks */
body.phone #pb-heart{ bottom:calc(env(safe-area-inset-bottom, 0px) + 8.5svh); }
body.phone #pb-flywfoot{
  bottom:calc(env(safe-area-inset-bottom, 0px) + 7.5svh); }
/* ROUND 14 — the beat is picture-led now (the GAP RAILS own the stage), so
   the foot holds only the key line, parked at the standard foot position.
   (§R7-phone.1's mid-stage tri-row is retired with the tri-row itself.) */
body.phone #pb-cpfoot{ bottom:calc(env(safe-area-inset-bottom, 0px) + 8.5svh); }
/* the rail labels — same fixed-layer pattern as .ptrip-labels */
body.phone .pcp-labels{ position:fixed; inset:0; z-index:6; pointer-events:none; opacity:0; }
body.phone .pcp-labels .pcr-name{ position:absolute; transform:translate(0,-100%); white-space:nowrap;
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--sky-90); }
body.phone .pcp-labels .pcr-oth{ position:absolute; transform:translate(-50%,-100%); white-space:nowrap;
  font-size:12px; font-weight:700; color:var(--sky-75); font-variant-numeric:tabular-nums; }
body.phone .pcp-labels .pcr-oth.low{ transform:translate(-50%,0); }
body.phone .pcp-labels .pcr-cp{ position:absolute; transform:translate(-50%,-100%); white-space:nowrap;
  font-family:var(--display); font-size:17px; font-weight:800; color:var(--gold);
  font-variant-numeric:tabular-nums; }
/* ROUND 16 — the two legend tags under the FIRST rail's markers (desktop
   parity). Quiet register, the rails' own ink, one step down for the bezel. */
body.phone .pcp-labels .pcr-oth-tag, body.phone .pcp-labels .pcr-cp-tag{
  position:absolute; transform:translate(-50%,0); white-space:nowrap;
  font-size:9px; color:var(--sky-75); }
body.phone .p-wig{ display:inline-block; transform-origin:50% 60%;
  color:var(--gold); font-weight:700; }
body.phone.on-light .p-wig{ color:var(--forest); }

/* the climb labels (57 / 74 / 81 above their terraces) */
body.phone .pclimb-labels{ position:fixed; inset:0; z-index:6; pointer-events:none; opacity:0; }
body.phone .pclimb-labels .pcl{ position:absolute; transform:translate(-50%,-100%);
  text-align:center; white-space:nowrap; }
body.phone .pclimb-labels .pcl b{ display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(26px, 7.4vw, 34px); line-height:1; color:var(--blue-mid);
  font-variant-numeric:tabular-nums; }
body.phone .pclimb-labels .pcl.top b{ color:#fff; }
body.phone .pclimb-labels .pcl span{ display:block; font-family:var(--display); font-weight:700;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--sky-75); margin-top:4px; }

/* the dose-response column labels (+15/+48/+64 above, names below) */
body.phone .ptrip-labels{ position:fixed; inset:0; z-index:6; pointer-events:none; opacity:0; }
body.phone .ptrip-labels .ptl{ position:absolute; transform:translate(-50%,-100%);
  font-family:var(--display); font-weight:800; font-size:clamp(26px, 7.6vw, 34px);
  line-height:1; color:var(--blue-mid); font-variant-numeric:tabular-nums; }
body.phone .ptrip-labels .ptl.gold b, body.phone .ptrip-labels .ptl.gold{ color:var(--gold); }
body.phone .ptrip-labels .ptl-name{ position:absolute; transform:translate(-50%,0);
  font-family:var(--display); font-weight:700; font-size:10px; letter-spacing:.03em;
  text-transform:uppercase; color:var(--sky-75); white-space:nowrap; }
  /* ROUND 14 — tighter: the VOICES figures sit ~0.285W apart and "NOT
     ENGAGED" at 11px/.09em ran into its neighbour */

/* triptych / company-program rows (3-up, sized for 360px) */
body.phone .p-triprow{ display:flex; justify-content:space-between; gap:8px;
  max-width:min(360px, 88vw); margin:0 auto 10px; }
body.phone .p-tricol{ flex:1 1 0; min-width:0; text-align:center; }
body.phone .p-tricol b{ display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(24px, 7vw, 32px); line-height:1; color:var(--blue);
  font-variant-numeric:tabular-nums; }
body.phone .p-tricol.p-trihi b{ color:var(--gold); }
body.phone .p-tricol span{ display:block; font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--sky-75); margin-top:6px;
  text-wrap:balance; }
body.phone .p-tricol i{ display:block; font-style:normal; font-size:11px;
  color:var(--sky-75); margin-top:3px; text-wrap:balance; }

/* thesis triad — statement in the upper half, the constellation settles below */
body.phone #pb-thesis{ top:30svh; transform:translateY(calc(-50% + var(--prise, 0px))); }
body.phone .p-triad{ font-size:clamp(27px, 7.8vw, 36px); line-height:1.22; color:var(--paper); }
body.phone .p-triad span{ display:block; }
body.phone .p-triadctx{ margin-top:26px; }
body.phone .p-triadctx b{ color:var(--gold); }

/* recap labels — one per chapter mark */
body.phone .precap-labels{ position:fixed; inset:0; z-index:6; pointer-events:none; opacity:0; }
body.phone .precap-labels .prl{ position:absolute; transform:translate(-50%,0);
  font-family:var(--display); font-weight:600; font-size:14px; color:var(--paper);
  white-space:nowrap; text-shadow:0 0 14px rgba(34,64,77,.8); }

/* THE ASCENT copy — lower third under the rising sky */
body.phone #pb-ascent{ bottom:calc(env(safe-area-inset-bottom, 0px) + 9svh); }
body.phone .p-ascline{ font-size:13px; letter-spacing:.04em; color:var(--sky-75); margin-bottom:12px; }
body.phone .p-ascbig{ font-family:var(--display); font-weight:600;
  font-size:clamp(20px, 5.6vw, 27px); line-height:1.32; color:var(--paper);
  max-width:28ch; margin:0 auto; }
body.phone .p-ascbig b{ color:var(--bright, #EEF3F4); }   /* CH-REV #3 — no yellow text on dark */

/* montage tiles + closing line */
body.phone .pmontage{ position:fixed; inset:0; z-index:6; pointer-events:none; opacity:0; }
/* INJAZ item 5 — same photo-card treatment as the desktop tiles: 12px radius (was
   10), object-position biased so a portrait-shaped source keeps the face, and a 1px
   inset ice keyline so a dark photo has an edge against the petrol ground. */
body.phone .pmontage img{ position:absolute; transform:translate(-50%,-50%);
  object-fit:cover; object-position:50% 30%; border-radius:12px;
  box-shadow:0 8px 32px rgba(12,22,27,.45), inset 0 0 0 1px rgba(194,237,240,.14); }
body.phone #pb-montfoot{ bottom:calc(env(safe-area-inset-bottom, 0px) + 8svh); }
body.phone .p-montline{ font-family:var(--display); font-weight:600;
  font-size:clamp(19px, 5.4vw, 25px); color:var(--paper); }

/* round-7: the gratitude beat — centred over the faint murmur field */
body.phone #pb-thanks{ top:42svh; transform:translateY(calc(-50% + var(--prise, 0px))); }
body.phone .p-thanksline{ font-family:var(--display); font-weight:600;
  font-size:clamp(20px, 5.8vw, 26px); line-height:1.42; color:var(--paper);
  max-width:26ch; margin:0 auto; }
body.phone .p-thanksline b{ color:var(--gold); }

/* the finale plate */
body.phone #pb-finale{ top:38svh; transform:translateY(calc(-50% + var(--prise, 0px))); }
body.phone .p-bookline{ font-size:clamp(24px, 6.8vw, 34px); line-height:1.2;
  color:var(--paper); margin-bottom:26px; }
body.phone .p-finlogo{ overflow:hidden; display:flex; justify-content:center; margin:0 auto 30px; }
body.phone .p-finlockup{ width:clamp(140px, 44vw, 200px); height:auto;
  filter:brightness(0) invert(1); opacity:.94;
  transform:translateY(var(--logo-rise, 110%)); }
body.phone .p-fintap{ display:inline-block; font-family:var(--display); font-weight:800;
  text-transform:uppercase; font-size:14px; letter-spacing:.22em; color:var(--gold);
  padding:13px 26px; border:1.5px solid rgba(227,226,79,.65); border-radius:999px; }
body.phone.finale-live .p-fintap{ animation:p-tap-pulse 2.4s ease-in-out infinite; }
@keyframes p-tap-pulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
body.phone #pb-finale{ touch-action:manipulation; }

/* round-7: the two client-supplied CTAs under the celebrate pill.
   Saurabh: same button colours as the web finale — primary wears the
   desktop .btn-solid register (gold ground, ink type), secondary the
   .btn-ghost one (paper type, white hairline). ≥44px targets. */
body.phone .p-ctas{ display:flex; flex-direction:column; align-items:center;
  gap:10px; margin-top:26px; pointer-events:auto; }
body.phone .p-cta{ display:block; min-width:min(64vw, 250px);
  padding:12px 24px; border-radius:999px; text-decoration:none;
  font-family:var(--display); font-weight:700; font-size:13px;
  letter-spacing:.16em; text-transform:uppercase; text-align:center;
  color:var(--paper); border:1.5px solid rgba(255,255,255,.32); }
body.phone .p-cta--primary{ color:var(--ink);
  border-color:var(--gold); background:var(--gold); }

/* cream-act tuning: the on-light register already flips the type; the legend
   dots stay readable on Confident Cream via the same ink tokens. */

/* SplitText line masks (shared contract with desktop .p14-line) */
body.phone .p14-line{ padding-bottom:.12em; will-change:transform; }

@media (prefers-reduced-motion: reduce){
  body.phone .p-cue i::after{ animation:none; }
}

/* ROUND 13 phone sync — the INJAZ mark at the orbit's centre (slide 32's
   parity). Ink-toned over the cream act; soft halo behind. */
body.phone .p-orbitmark{ position:absolute; transform:translate(-50%,-50%); z-index:3; pointer-events:none; }
body.phone .p-orbitmark img{ display:block; width:72px; opacity:.85; }
body.phone .p-orbitmark::before{ content:""; position:absolute; left:50%; top:50%; width:150px; height:150px;
  transform:translate(-50%,-50%); border-radius:50%; z-index:-1;
  background:radial-gradient(closest-side, rgba(255,255,255,.55), rgba(255,255,255,0)); }

/* ROUND 17.1 — the phone twin of the gold caption. It wraps (a phone has no
   room for a nowrap line) and is centred on its gold. Fixed layer, same as
   .pcp-labels.
   ROUND 18 — the phone's Amal chip is retired with the desktop one; the north
   star below is her mark on both spines. */
body.phone .p-gold-cap{
  position:fixed; z-index:6; pointer-events:none; opacity:0;
  transform:translate(-50%,0); text-align:center;
  max-width:30ch; font-size:11px; line-height:1.35; color:var(--sky-75);
}
body.phone.on-light .p-gold-cap{ color:var(--ink-70); }

/* ROUND 18 — the north star on the phone. The corner mark owns the top LEFT
   (left:18px, top safe+16, 26px tall), the top-anchored copy blocks all guard
   themselves at max(Xsvh, safe+52px), and the nav lives on the bottom edge —
   so the top-right corner is the one piece of chrome-free real estate on the
   phone, at 390 and at 360 alike. 20px in, safe+19 down: a 22px mark whose
   bottom edge lands at safe+41, eleven clear pixels above the highest copy any
   beat can put there. z-index sits above the copy blocks (5) and the field
   labels (6) but under the story sheet. */
body.phone .north-star{
  top:calc(env(safe-area-inset-top, 0px) + 19px);
  right:20px;
  z-index:9;
}
/* ROUND 23 — the name under the star, phone scale. One notch smaller and
   tighter than desktop; the 22px mark and its label must clear the nav strip. */
body.phone .ns-name{ font-size:9px; margin-top:5px; letter-spacing:.12em; }
/* ROUND 18 — the line under Amal's chip that teaches the star. Quieter than
   the chip above it and NOT part of the door, so the chip keeps its own
   underline and its own tap target. */
body.phone .p-subchip{
  font-size:13px; line-height:1.55; color:var(--sky-75);
  max-width:28ch; margin:0 auto;
}
body.phone.on-light .p-subchip{ color:var(--ink-70); }