/* Extracted from play.html by tools/split_play.py — INFRA.
   Linked at the SAME position the <style> block occupied: this sheet's cascade order
   is load-bearing, including several deliberate late overrides. */

  /* ===== PitchNoir "Rebel-Penthouse" — Stitch v2 design system (Dwayne VIBE.md, v0.7.0) =====
     Rebel-penthouse is the spine (calm, structured, premium noir); manic spice (red-ink stamp,
     glitch, shimmer) flares ONLY on event beats. Tokens are drop-in from design/VIBE.md. */
  :root{
    /* ===== DASHBOARD REDESIGN — "MANIC REBEL EDITION" (locked Stitch SST, 2026-06-23) =====
       Per design/STYLE_SOURCE_OF_TRUTH.md + STITCH_SST SCREEN 3. The base is LIGHT (#f8f9ff),
       with BLACK (#0b1c30) brutalist slabs punched in. Burnt-orange is the brand spine, bright
       orange + accent-yellow the accents. This REPLACES the drifted warm-noir-gold dark dashboard.
       --accent stays the live cosmetic-driven hue (defaults to bright orange = the brand). */
    --noir-0:#0b1c30;                   /* near-black navy ink (slabs / borders / text) */
    --noir-1:#f8f9ff;                   /* base surface — the LIGHT room */
    --noir-2:#eef1fb;                   /* raised light surface */
    --navy:#0b1c30;                     /* brutalist slab navy-black */
    --surface:#f8f9ff; --surface-2:#eef1fb; --surface-3:#e5eeff; --surface-4:#dbe4fb;
    --ink:#0b1c30;                      /* primary text = near-black navy ink */
    --ink-2:#2a3a4d;
    --muted:#584237;                    /* warm brown-grey secondary text (SST on-surface-variant) */
    --outline:#0b1c30;
    --line:rgba(11,28,48,.12); --line-2:rgba(11,28,48,.22);
    --primary:#9d4300; --primary-deep:#582200;       /* burnt-orange spine + deep shadow */
    --accent:var(--accent); --accent2:#9d4300; --accent-yellow:var(--accent); --surface-bright:#fcfcfd;
    --bad:#ba1a1a; --good:#1f7a3a;
    --glass:rgba(255,255,255,.42); --glass-border:rgba(255,255,255,.6);
    --desk:#0b1c30; --shadow:rgba(0,0,0,.14);

    /* ---- brutalist spine (Manic Rebel) ---- */
    --charcoal:#0b1c30;                 /* the black brutalist slab + ink */
    --slab:#0b1c30;                     /* the BLACK slab punched into the light layout */
    --on-primary:#ffffff;
    --on-primary-container:#582200;
    --surface-tint:#9d4300;
    --shadow-ambient:30px 30px 80px rgba(0,0,0,.08);  /* hard light editorial drop */
    --shadow-glass:30px 30px 80px rgba(0,0,0,.08);

    /* glass system — bright white shards, blurred (SST glass-shard) */
    --glass-blur:24px;
    --glass-rebel:rgba(255,255,255,.42);
    --glass-rebel-border:rgba(255,255,255,.6);
    --glass-rebel-edge:rgba(11,28,48,.06);          /* a hairline ink edge */

    /* type scale (Inter) — display black, body airy, labels technical-mono */
    --t-display:clamp(40px,9vw,96px); --t-display-ls:-0.06em; --t-display-w:900;
    --t-headline:clamp(24px,5vw,40px); --t-headline-ls:-0.04em; --t-headline-w:900;
    --t-label:11px; --t-label-ls:0.22em; --t-label-w:700;
    --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;

    /* nested-panel fills — light, slightly tinted so modules read nested on the light base */
    --panel:rgba(11,28,48,.04);
    --panel2:rgba(11,28,48,.025);

    /* manic SPICE — only on event beats, never resting */
    --scribble:url('/assets/scribbles/scrib_circle.png');
    --scribble-cross:url('/assets/scribbles/scrib_cross.png');
    --glow-synergy:0 0 30px rgba(var(--glow),.5);
  }
  /* ── mVC palette bridge: the game's accent + spine follow the live palette (5 switchable themes) ── */
  :root[data-palette]{
    --accent:var(--p); --accent2:var(--p); --primary:var(--p); --primary-deep:var(--p);
    --accent-yellow:var(--p2); --surface-tint:var(--p);
    --glow-synergy:0 0 30px rgba(var(--glow),.5);
  }
  /* keep the floating theme toggle clear of the top nav */
  .mvc-palfloat{position:fixed;top:auto;bottom:16px;right:16px;height:auto;max-width:none !important;overflow:visible !important;opacity:1 !important;padding:0 !important;background:none !important;border:none !important;box-shadow:none !important}
  /* A3: the ONE theme control — a sun/moon CLIP chip mirroring the login's .pn-theme-chip (mono, AA both themes) */
  /* STORE QA 2026-08-11 (SEV-3, UX_RULES §1): was 9px label / 70×31px hit target — under both the
     11px type floor and the 44px tap floor, and measured overlapping the try-bar CTA on mobile. */
  .mvc-theme-toggle{--cut:8px;position:relative;display:inline-flex;align-items:center;gap:6px;cursor:pointer;appearance:none;
    font:700 11px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;padding:8px 12px;
    min-height:44px;min-width:44px;
    border:1px solid rgba(255,255,255,.22);border-radius:3px;
    clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);
    background:rgba(16,22,34,.72);color:rgba(234,241,251,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    box-shadow:0 8px 22px rgba(0,0,0,.4);transition:background .15s ease,border-color .15s ease,color .15s ease}
  .mvc-theme-toggle:hover{background:rgba(28,36,52,.82);border-color:rgba(255,255,255,.36)}
  .mvc-theme-toggle:focus-visible{outline:2px solid var(--accent,#f97316);outline-offset:2px}
  .mvc-theme-toggle svg{width:13px;height:13px;display:block}
  body.mvc-light .mvc-theme-toggle{background:rgba(250,248,245,.86);border-color:rgba(20,14,8,.2);color:rgba(36,31,27,.86)}
  body.mvc-light .mvc-theme-toggle:hover{background:rgba(255,255,255,.95);border-color:rgba(20,14,8,.3)}
  /* dark state shows MOON+Dark; light state shows SUN+Light (like the login) */
  .mvc-theme-toggle .mvc-tt-sun,.mvc-theme-toggle .mvc-tt-light{display:none}
  .mvc-theme-toggle.is-light .mvc-tt-moon,.mvc-theme-toggle.is-light .mvc-tt-dark{display:none}
  .mvc-theme-toggle.is-light .mvc-tt-sun,.mvc-theme-toggle.is-light .mvc-tt-light{display:inline-flex}
  *{box-sizing:border-box}
  html,body{margin:0;height:100%}
  body{color:var(--ink);font:15px/1.6 Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial;
    /* QA 2026-07-31 (defect #5): overflow-x:hidden hides the scrollbar but the body can still be
       PANNED sideways by scroll-into-view (keyboard Tab, input focus) because the decorative
       bleed-type is ~1.7k px wide — once panned, the game sits shifted with no way back short of
       a reload. `clip` forbids all scrolling on the axis, programmatic included. `hidden` stays
       as the fallback for engines without clip support. */
    background:var(--surface-bright);overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased;
    /* SST paper texture — handmade-paper grain over the whole light base */
    background-image:url('https://www.transparenttextures.com/patterns/handmade-paper.png')}
  ::selection{background:var(--primary);color:#fff}
  .mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.22em}
  /* FILM GRAIN — fixed full-screen grit (digital-grit), multiply-blended on the LIGHT base so it reads
     as printed halftone tooth, not a wash. SVG fractal-noise, very low opacity. */
  body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  /* fixed penthouse backdrop + collage overlays — the living skyline the glass HUD floats over.
     STITCH v2: a real penthouse photograph (object-cover, gritty saturate-down) under a warm
     gradient + halftone + digital-grit, so it reads as a moody art-directed room — not a washed page. */
  #penthouse-bg{position:fixed;inset:0;z-index:-3;overflow:hidden;
    background:
      radial-gradient(120% 90% at 84% -12%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 52%),
      radial-gradient(110% 90% at 0% 112%, rgba(157,67,0,.06) 0%, transparent 55%),
      linear-gradient(165deg,#f8f9ff 0%,#eef1fb 55%,#e5eeff 100%);}
  /* office themes recolour the warm top-light of the room (honours document.body.dataset.office) */
  body[data-office="midnight"] #penthouse-bg{background:radial-gradient(120% 90% at 84% -12%,rgba(155,109,255,.18) 0%,transparent 50%),radial-gradient(110% 90% at 0% 112%,rgba(40,20,70,.8) 0%,transparent 55%),linear-gradient(165deg,#120c1e 0%,#0a0814 55%,#06040c 100%)}
  body[data-office="penthouse"] #penthouse-bg{background:radial-gradient(120% 90% at 84% -12%,rgba(255,210,63,.2) 0%,transparent 52%),radial-gradient(110% 90% at 0% 112%,rgba(46,39,18,.85) 0%,transparent 55%),linear-gradient(165deg,#16120a 0%,#100c06 55%,#0a0703 100%)}
  body[data-office="skyline"] #penthouse-bg{background:radial-gradient(120% 90% at 84% -12%,rgba(74,214,196,.16) 0%,transparent 52%),radial-gradient(110% 90% at 0% 112%,rgba(16,36,63,.9) 0%,transparent 55%),linear-gradient(165deg,#0c1b2e 0%,#091421 55%,#060d16 100%)}
  body[data-office="cannes"] #penthouse-bg{background:radial-gradient(120% 90% at 84% -12%,rgba(202,165,58,.22) 0%,transparent 52%),radial-gradient(110% 90% at 0% 112%,rgba(13,59,102,.85) 0%,transparent 55%),linear-gradient(165deg,#0d2138 0%,#091421 55%,#060d16 100%)}
  /* ===== CITY BACKGROUNDS — driven by S.agency.cityKey via body[data-city] ===== */
  /* Atlantic Steel: London, Berlin, Amsterdam, Stockholm, Chicago, Toronto, New York */
  body[data-city="london"] #penthouse-bg,body[data-city="berlin"] #penthouse-bg,
  body[data-city="amsterdam"] #penthouse-bg,body[data-city="stockholm"] #penthouse-bg,
  body[data-city="chicago"] #penthouse-bg,body[data-city="toronto"] #penthouse-bg,
  body[data-city="newyork"] #penthouse-bg{background:
    radial-gradient(120% 90% at 84% -12%,rgba(80,120,200,.18) 0%,transparent 52%),
    radial-gradient(110% 90% at 0% 112%,rgba(16,26,50,.9) 0%,transparent 55%),
    linear-gradient(165deg,#0e1422 0%,#090d18 55%,#060810 100%)}
  /* Pacific Neon: Tokyo, Seoul, Hong Kong, Shanghai, Singapore, LA */
  body[data-city="tokyo"] #penthouse-bg,body[data-city="seoul"] #penthouse-bg,
  body[data-city="hongkong"] #penthouse-bg,body[data-city="shanghai"] #penthouse-bg,
  body[data-city="singapore"] #penthouse-bg,body[data-city="la"] #penthouse-bg{background:
    radial-gradient(120% 90% at 84% -12%,rgba(200,50,200,.22) 0%,transparent 52%),
    radial-gradient(110% 90% at 0% 112%,rgba(8,4,30,.92) 0%,transparent 55%),
    linear-gradient(165deg,#0c0818 0%,#080514 55%,#05030e 100%)}
  /* Golden Hour: Paris, Madrid, Dubai, Mumbai */
  body[data-city="paris"] #penthouse-bg,body[data-city="madrid"] #penthouse-bg,
  body[data-city="dubai"] #penthouse-bg,body[data-city="mumbai"] #penthouse-bg{background:
    radial-gradient(120% 90% at 84% -12%,rgba(220,165,50,.22) 0%,transparent 52%),
    radial-gradient(110% 90% at 0% 112%,rgba(42,26,10,.88) 0%,transparent 55%),
    linear-gradient(165deg,#18120a 0%,#110c06 55%,#0a0704 100%)}
  /* Harbour: Sydney, Melbourne */
  body[data-city="sydney"] #penthouse-bg,body[data-city="melbourne"] #penthouse-bg{background:
    radial-gradient(120% 90% at 84% -12%,rgba(50,200,210,.18) 0%,transparent 52%),
    radial-gradient(110% 90% at 0% 112%,rgba(8,24,40,.88) 0%,transparent 55%),
    linear-gradient(165deg,#091820 0%,#061018 55%,#040c14 100%)}
  /* Tropical: São Paulo */
  body[data-city="saopaulo"] #penthouse-bg{background:
    radial-gradient(120% 90% at 84% -12%,rgba(80,200,80,.18) 0%,transparent 52%),
    radial-gradient(110% 90% at 0% 112%,rgba(10,28,16,.88) 0%,transparent 55%),
    linear-gradient(165deg,#0a1810 0%,#061010 55%,#040c0a 100%)}
  /* time-of-day overlay (::before, z-index above base but below content) */
  #penthouse-bg::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity 1.4s,background 1.4s}
  body[data-tod="night"] #penthouse-bg::before{opacity:1;background:rgba(0,0,18,.4)}
  body[data-tod="dawn"] #penthouse-bg::before{opacity:1;background:linear-gradient(180deg,rgba(180,70,10,.18) 0%,transparent 55%)}
  body[data-tod="dusk"] #penthouse-bg::before{opacity:1;background:linear-gradient(180deg,rgba(120,30,80,.22) 0%,rgba(40,0,50,.15) 100%)}
  /* ══ WORN WORLD — the equipped style repaints the ambient room (CEO 2026-07-17 gameplay-honesty) ══
     Fixed backdrop mirroring the shader (z-index:0) so it sits behind the glass content but above the
     base. Empty for the free Noir starter → default shell untouched. When body[data-worn="1"] it
     cross-fades the style's real env photo in, graded to its mood + tinted with the player's accent —
     an unmistakable change, visible on the dashboard AND the Vault. */
  #worn-world{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;
    transition:opacity 1.05s cubic-bezier(.22,1,.36,1);overflow:hidden;isolation:isolate}
  body[data-worn="1"] #worn-world{opacity:1}
  #worn-world>*{position:absolute;inset:0}
  #worn-world-img{width:100%;height:100%;object-fit:cover;object-position:center 42%;
    filter:var(--col-grade,none);transform:scale(1.04);
    transition:filter 1.05s ease,transform 22s ease-out}
  body[data-worn="1"] #worn-world-img{transform:scale(1.11)}
  /* legibility scrim: on DARK themes the room is dropped deep so glass + ink stay AA (Law 1);
     the accent tint is a low wash + a stronger foot glow, never a flat colour field. */
  #worn-world .ww-grade{background:
    linear-gradient(180deg,rgba(4,7,13,.66) 0%,rgba(4,7,13,.56) 42%,rgba(4,7,13,.84) 100%),
    radial-gradient(130% 100% at 50% 0%,transparent 34%,rgba(3,5,10,.72) 100%);mix-blend-mode:normal}
  #worn-world .ww-tint{background:
    radial-gradient(120% 85% at 82% 6%,color-mix(in srgb,var(--accent) 34%,transparent) 0%,transparent 52%),
    linear-gradient(0deg,color-mix(in srgb,var(--accent) 20%,transparent) 0%,transparent 40%);
    mix-blend-mode:soft-light;opacity:.9}
  #worn-world .ww-vignette{background:radial-gradient(120% 120% at 50% 46%,transparent 52%,rgba(2,4,9,.55) 100%);
    box-shadow:inset 0 0 220px 40px rgba(2,4,9,.5)}
  /* LIGHT themes: lift the photo instead of drowning it, keep dark ink legible over it */
  body.mvc-light #worn-world .ww-grade{background:
    linear-gradient(180deg,rgba(244,247,252,.42) 0%,rgba(244,247,252,.34) 40%,rgba(244,247,252,.66) 100%),
    radial-gradient(130% 100% at 50% 0%,transparent 40%,rgba(230,236,246,.6) 100%)}
  body.mvc-light #worn-world-img{filter:var(--col-grade,none) brightness(1.06) saturate(.96)}
  body.mvc-light #worn-world .ww-tint{mix-blend-mode:multiply;opacity:.5}
  body.mvc-light #worn-world .ww-vignette{background:radial-gradient(120% 120% at 50% 46%,transparent 58%,rgba(180,190,205,.4) 100%);box-shadow:inset 0 0 200px 30px rgba(190,200,214,.35)}
  /* when a style is worn the animated blob shader steps aside so the real room is the backdrop */
  body[data-worn="1"] #mvc-fx{opacity:.16;transition:opacity 1.05s ease}
  @media (prefers-reduced-motion:reduce){
    #worn-world{transition:opacity .001s}
    #worn-world-img{transition:none;transform:scale(1.04) !important}
    body[data-worn="1"] #mvc-fx{transition:none}
  }
  /* ══ WORN MOOD (CEO 2026-07-21 — "I hit wear and can't see anything applied") ══════════════════
     A worn LOOK (collection / theme pack) must repaint the WORKING surface, not only the room behind
     the device. --worn-a = the look's hue. We wash it as an AMBIENT ROOM GRADE across the office canvas
     (all hub views: dashboard · Live Feed · Floor · clients · hires), tint the card borders + hero so
     the surface reads the look's mood at a glance, and leave every ink/number at its legible AA colour.
     Relaxed skinning law, per Jon's explicit call — mood tint on structure, NOT on text. Gated on
     [data-worn-mood="1"] so the bare shell (nothing / office-only worn) is 100% untouched. Noir Classic
     = warm blood-orange house mood · Miami Deco = coral-pink · Neon Nights = electric teal — unmistakable. */
  /* (a) REMAP the dashboard's decorative accent tokens to the worn hue. The office view BRAND-LOCKS
     --accent/--p2/--acc/--accent-yellow to burnt-orange with !important (~line 7226) — that lock is
     exactly what made the look invisible on the working surface. We beat it (html-prefixed → higher
     specificity) ONLY for the decorative accents (eyebrows · KPI labels · rings · donuts · sparklines ·
     active states). --p (the ONE primary CTA fill + semantic win/loss) and every ink family are left
     LOCKED, so the action anchor stays brand-orange and all text keeps its AA colour.
     DARK: the bright look hue is AA on the dark plates → use it raw.
     LIGHT: a bright accent fails AA as small-text ink on porcelain → deepen it (keeps the hue family,
     clears 4.5:1); the bright hue still punches through the canvas wash + hero + worn-world (non-text). */
  html body[data-worn-mood="1"].pn-wear{
    --accent:var(--worn-a) !important; --accent2:var(--worn-a) !important; --p2:var(--worn-a) !important;
    --acc:var(--worn-a) !important; --accent-yellow:var(--worn-a) !important; --surface-tint:var(--worn-a) !important;
    /* --p carries the ONE CTA fill + every data-viz endpoint (ring · sparklines · hero chart · cols).
       Wearing it too = the instruments repaint to the look, so the whole dashboard reads one mood. The
       semantic win/loss verdict uses --rv (not --p), so it stays orange/steel — no worn-pink verdict. */
    --p:var(--worn-a) !important; --primary:var(--worn-a) !important;
    /* CEO-74: --glow (the halo/ring/pulse triplet) sat OUTSIDE this remap, so it stayed pinned to
       brand orange by the office brand-lock even while --p and --accent wore the look — every glow
       in the dashboard contradicted the theme you just paid for. It rides the same worn gate, so a
       bare shell is untouched. A theme supplies its own via --pnth-glow-rgb; a legacy pack has none,
       and falls back to the exact triplet the office brand-lock already pinned, so a legacy pack is
       pixel-identical to before. */
    --glow:var(--pnth-glow-rgb, 249,115,22) !important;
    background:
      /* true-theme surface tint (--pnth-tint, pn-theme.js) — a real, measurable dashboard wash;
         transparent for legacy pack moods so their look is unchanged */
      linear-gradient(180deg, color-mix(in srgb, var(--pnth-tint, transparent) 26%, transparent) 0%, color-mix(in srgb, var(--pnth-tint, transparent) 12%, transparent) 100%),
      radial-gradient(135% 82% at 50% -12%, color-mix(in srgb, var(--worn-a) 36%, transparent) 0%, transparent 56%),
      radial-gradient(96% 64% at 102% 110%, color-mix(in srgb, var(--worn-a) 22%, transparent) 0%, transparent 62%),
      radial-gradient(90% 70% at -6% 42%, color-mix(in srgb, var(--worn-a) 15%, transparent) 0%, transparent 60%),
      color-mix(in srgb, var(--worn-a) 15%, var(--mvc-bg)) !important;
  }
  html body.mvc-light[data-worn-mood="1"].pn-wear{
    /* deepen the ink/fill tokens for AA on porcelain (small-text eyebrows + white-on-fill CTA);
       the raw bright hue lives on in --worn-a for the wash/hero/borders (non-text). */
    --accent:color-mix(in srgb, var(--worn-a) 42%, #241109) !important;
    --accent2:color-mix(in srgb, var(--worn-a) 42%, #241109) !important;
    --p2:color-mix(in srgb, var(--worn-a) 42%, #241109) !important;
    --acc:color-mix(in srgb, var(--worn-a) 42%, #241109) !important;
    --accent-yellow:color-mix(in srgb, var(--worn-a) 52%, #241109) !important;
    --p:color-mix(in srgb, var(--worn-a) 44%, #241109) !important;
    --primary:color-mix(in srgb, var(--worn-a) 44%, #241109) !important;
    --surface-tint:var(--worn-a) !important;
    --glow:var(--pnth-glow-rgb, 180,56,13) !important;
    background:
      /* true-theme surface tint — lighter hand on porcelain, still measurably different from stock */
      linear-gradient(180deg, color-mix(in srgb, var(--pnth-tint, transparent) 14%, transparent) 0%, color-mix(in srgb, var(--pnth-tint, transparent) 6%, transparent) 100%),
      radial-gradient(135% 82% at 50% -12%, color-mix(in srgb, var(--worn-a) 30%, transparent) 0%, transparent 58%),
      radial-gradient(96% 64% at 102% 110%, color-mix(in srgb, var(--worn-a) 17%, transparent) 0%, transparent 64%),
      color-mix(in srgb, var(--worn-a) 12%, var(--mvc-bg)) !important;
  }
  /* the topbar/HUD stat VALUES are OS chrome — they read INK, never the worn accent (re-pins the
     "pink £125,000 leak" the token remap would otherwise reopen; chrome stays neutral, content wears
     the look). --mvc-fg is white on dark, near-black on light → AA both ways. */
  html body[data-worn-mood="1"].pn-wear .topbar .stat b,
  html body[data-worn-mood="1"].pn-wear .topbar .stat b span,
  html body[data-worn-mood="1"].pn-wear #hud .stat b{ color:var(--mvc-fg) !important; }
  /* (b) card family across the hub views picks up the mood as a tinted hairline — the plate fill (and
     all text on it) is untouched, so AA holds; the border just binds every card to the room. */
  body[data-worn-mood="1"].pn-wear .card.shard,
  body[data-worn-mood="1"].pn-wear .mvc-glass,
  body[data-worn-mood="1"].pn-wear .client-card,
  body[data-worn-mood="1"].pn-wear .hb-cell,
  body[data-worn-mood="1"].pn-wear .lg-panel{
    border-color:color-mix(in srgb, var(--worn-a) 34%, var(--rust-border)) !important;
  }
  /* (c) the perf hero is the loud moment — the look's raw hue tints its glass + bloom so the top of the
     dashboard clearly wears the mood (ink stays --rust-ink / white-on-film, both AA). */
  body[data-worn-mood="1"].pn-wear .perf-hero{
    background:
      linear-gradient(158deg, color-mix(in srgb, var(--worn-a) 26%, transparent) 0%, transparent 72%),
      var(--rust-card) !important;
    border-color:color-mix(in srgb, var(--worn-a) 42%, var(--rust-border)) !important;
    box-shadow:0 1px 2px rgba(28,25,23,.05), 0 12px 32px color-mix(in srgb, var(--worn-a) 24%, transparent) !important;
  }
  /* (d) the ONE primary CTA wears the look too — mirrors pn-glass's own .lg-btn--primary.lg-accent
     recipe (a black text-zone deepen under the raw hue) so WHITE glyphs stay >=4.5:1 whatever the look. */
  html body[data-worn-mood="1"].pn-wear .lg-btn--primary{
    background:
      radial-gradient(130% 116% at 50% 52%, rgba(0,0,0,.42) 0%, rgba(0,0,0,.14) 46%, rgba(0,0,0,0) 72%),
      linear-gradient(178deg, color-mix(in srgb, var(--worn-a) 66%, #fff 34%), color-mix(in srgb, var(--worn-a) 84%, #000 16%)) !important;
    border-color:color-mix(in srgb, var(--worn-a) 50%, #fff) !important;
  }
  @media (prefers-reduced-motion:reduce){
    html body[data-worn-mood="1"].pn-wear{transition:none}
  }
  /* ══ TRUE-THEME CARVE-OUTS (fix pass 2026-07-25) ═══════════════════════════════════════════════
     (1) CTA LAW — with a TRUE THEME worn (body[data-pn-theme]) the ONE primary CTA stays the stock
     lit logo-orange glass (pn-glass .lg-btn--primary recipe: #ffa04a→#f97316→#e2650f→#c1530a body,
     text-zone deepen, white ink) in BOTH keys and EVERY view. The worn-mood CTA repaint above stays
     live for legacy pack moods only; a true theme never touches the action anchor. */
  html body[data-pn-theme] .lg-btn--primary,
  html body[data-pn-theme].pn-wear .lg-btn--primary,
  html body.mvc-light[data-pn-theme] .lg-btn--primary,
  html body.mvc-light[data-pn-theme].pn-wear .lg-btn--primary{
    color:#fff !important; text-shadow:0 1px 1.5px rgba(74,26,0,.62) !important;
    border-color:rgba(255,182,120,.55) !important;
    background:
      radial-gradient(140% 150% at 50% 47%, rgba(114,42,0,.64) 0%, rgba(114,42,0,.34) 50%, rgba(114,42,0,0) 80%),
      linear-gradient(178deg, #ffa04a 0%, #f97316 24%, #e2650f 60%, #c1530a 100%) !important;
  }
  /* (4) ONE ACCENT SYSTEM under a worn mood — chrome accents that were pinned to literal brand
     orange now read the worn hue via the remapped tokens (var(--accent) = raw --worn-a in dark,
     AA-deepened in light). CLASS-level fix; topbar stat ink, dock badges, wordmark, semantics and
     .lg-btn--primary stay canon. */
  html body[data-worn-mood="1"].pn-wear .hub-view[data-view="v-perf"] .perf-hero-eyebrow,
  html body[data-worn-mood="1"].pn-wear .hub-view[data-view="v-perf"] .pv-hero-row .perf-hero-eyebrow,
  html body[data-worn-mood="1"].pn-wear .pn-vibe-row>.perf-hero .mvc-kpi-lbl,
  html body.mvc-light[data-worn-mood="1"].pn-wear .hub-view[data-view="v-perf"] .perf-hero-eyebrow,
  html body.mvc-light[data-worn-mood="1"].pn-wear .hub-view[data-view="v-perf"] .pv-hero-row .perf-hero-eyebrow,
  html body.mvc-light[data-worn-mood="1"].pn-wear .pn-vibe-row>.perf-hero .mvc-kpi-lbl{
    color:var(--accent) !important;
  }
  /* active sidebar tab — fill/border/underline + icon/label accent follow the worn hue (both keys) */
  html body[data-worn-mood="1"].pn-wear .hub-tab.on{
    background:color-mix(in srgb, var(--worn-a) 12%, transparent) !important;
    border-color:color-mix(in srgb, var(--worn-a) 30%, transparent) !important;
    box-shadow:inset 0 -2px 0 var(--accent) !important;
  }
  html body.mvc-light[data-worn-mood="1"].pn-wear .hub-tab.on{
    color:var(--accent) !important;
    background:color-mix(in srgb, var(--worn-a) 12%, transparent) !important;
    border-color:color-mix(in srgb, var(--worn-a) 30%, transparent) !important;
    box-shadow:inset 0 -2px 0 var(--accent) !important;
  }
  html body.mvc-light[data-worn-mood="1"].pn-wear .hub-tab.on .ht-ico{ color:var(--accent) !important; }
  /* the ? help-ring reads the worn hue too (fill in dark, glyph+ring in light) */
  html body[data-worn-mood="1"].pn-wear .help-chip{
    background:color-mix(in srgb, var(--worn-a) 14%, transparent) !important;
  }
  html body.mvc-light[data-worn-mood="1"].pn-wear .help-chip{
    color:var(--accent) !important;
    border-color:color-mix(in srgb, var(--accent) 60%, transparent) !important;
  }
  html body.mvc-light[data-worn-mood="1"].pn-wear .help-chip:hover{
    background:var(--accent) !important; color:#fff !important;
  }
  /* (5) --pnth-* consumers — a true theme's grade colour-grades the worn backdrop photo */
  html body[data-pn-theme] #worn-world-img{ filter:var(--pnth-grade, none); }
  /* CEO-74: --pnth-glow was published by pn-theme.js and consumed by NOTHING, so every pulse, ring
     and halo stayed brand-orange under a paid theme — the single most visible way the reskin looked
     half-applied. --glow is authored as an "r,g,b" triplet, so pn-theme.js now also publishes
     --pnth-glow-rgb and we re-point --glow at it on the worn surfaces. Falls back to whatever the
     base theme set, so a manifest without a glow (or a legacy pack) is byte-identical to before.
     A custom property may NOT reference itself, so the fallback is the literal base triplet per
     shell (dark ONYX / light porcelain) rather than var(--glow) — that would be a cycle and the
     declaration would be dropped wholesale. */
  html body[data-pn-theme].pn-wear{ --glow:var(--pnth-glow-rgb, 255,106,43); }
  html body.mvc-light[data-pn-theme].pn-wear{ --glow:var(--pnth-glow-rgb, 180,56,13); }
  /* (2) theme try-on bar — the PREVIEW/TAKE-IT-OFF toast docks under the topbar, right-aligned,
     clear of the hero headline at every width. Same toast visual language, new berth. */
  html body .toast.pn-theme-trybar{
    left:auto !important; right:24px !important; top:auto !important; bottom:110px !important;
    transform:none !important; max-width:300px !important; z-index:10005 !important;
    animation:none !important;
    /* QA sweep 2 (defect #5): the bar sat on the war-room rail and BLOCKED the cards beneath it
       (QUERY/SWAP unreachable while shown). The panel now passes clicks through; only its own
       buttons catch the pointer. Occlusion law: floating chrome never steals content's clicks. */
    pointer-events:none !important;
  }
  html body .toast.pn-theme-trybar button{ pointer-events:auto; }
  @media (max-width:860px){
    html body .toast.pn-theme-trybar{ right:16px !important; bottom:104px !important; max-width:280px !important; }
  }
  /* in the Vault the tile itself carries TAKE IT OFF and the topbar chip shows preview state —
     the floating trybar would only occlude the other tiles' buttons. Float it on gameplay views only. */
  html body[data-view="store"] .toast.pn-theme-trybar{ display:none !important; }
  /* theme tile names render in the Inter 900-italic display voice (canon law 8) — the Heming
     variable file has a defective D right side-bearing that reads as "MID NIGHT" (probed:
     survives kern/liga-off and every weight, so it is the font file, not spacing). */
  html body[data-view="store"] .pn-theme-grid .pn-world-name{
    font-family:'Inter',sans-serif !important; font-weight:900 !important; font-style:italic !important;
    letter-spacing:-.03em !important;
  }
  /* ══ VAULT V2 (CEO 2026-07-18) — WEARING chip · wear-moment flash · cart/top-up/inventory windows.
     Speaks the .lg-card dossier + Finder-window language; every worn item names WHERE it applies. ══ */
  /* A7 (CEO 2026-07-18): the chip FILL is the live accent (it shows what you're wearing) but its ink is
     COMPUTED for AA — --wc-ink is set by JS from the accent's luminance (navy on light accents, porcelain
     on dark). No hardcoded white-on-pink. Scoped to in-game views only (never the holding/meta page). */
  .wearing-chip{display:none;align-items:center;gap:8px;height:32px;padding:0 13px 0 11px;
    background:var(--accent,#f97316);border:1px solid rgba(0,0,0,.22);border-radius:3px;cursor:pointer;align-self:center;
    color:var(--wc-ink,#0b1c30);
    clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%);
    font:800 10px/1 var(--mono);letter-spacing:.12em;transition:transform .18s ease,filter .18s ease}
  body[data-view="office"] .wearing-chip,body[data-view="pitch"] .wearing-chip,
  body[data-view="store"] .wearing-chip,body[data-view="pass"] .wearing-chip{display:inline-flex}
  .wearing-chip[hidden]{display:none !important}
  /* CEO 2026-07-21: the worn look now tints the whole dashboard, so the console WEARING chip is
     redundant AND was colliding CASH/WEEK in the bar. Drop it from office/pitch (still in the Vault). */
  body[data-view="office"] .wearing-chip,body[data-view="pitch"] .wearing-chip{display:none !important}
  .wearing-chip .wc-dot{width:7px;height:7px;border-radius:2px;background:var(--wc-ink,#0b1c30);opacity:.9;
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--wc-ink,#0b1c30) 40%,transparent);flex:none;transform:rotate(45deg)}
  .wearing-chip .wc-eye{font-size:8px;letter-spacing:.24em;color:var(--wc-ink,#0b1c30);opacity:.68}
  .wearing-chip .wc-name{font-weight:900;letter-spacing:.05em;color:var(--wc-ink,#0b1c30);max-width:15ch;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  .wearing-chip:hover{filter:brightness(1.06);transform:translateY(-1px)}
  .wearing-chip.stamp{animation:wc-stamp .52s cubic-bezier(.2,1.35,.35,1)}
  @keyframes wc-stamp{0%{transform:scale(.62) rotate(-4deg);opacity:.15}55%{transform:scale(1.1) rotate(1.5deg);opacity:1}100%{transform:none}}
  #wear-flash{position:fixed;inset:0;z-index:9190;pointer-events:none;opacity:0}
  #wear-flash.go{animation:wear-flash 640ms ease-out}
  @keyframes wear-flash{0%{opacity:0}
    20%{opacity:1;background:radial-gradient(130% 120% at 50% 40%,color-mix(in srgb,var(--accent,#f97316) 60%,transparent),transparent 68%)}
    100%{opacity:0}}
  .vv-applied{display:flex;flex-direction:column;gap:3px;text-align:left}
  .vv-applied b{font:900 13px/1.15 var(--pn-sans);letter-spacing:.01em}
  .vv-applied .vv-surf{font:700 9.5px/1.35 var(--mono);letter-spacing:.11em;
    color:color-mix(in srgb,var(--accent,#f97316) 80%,#fff)}
  /* store-chrome utility buttons carry a live count badge (basket) */
  .vv-chrome{position:relative}
  .vv-badge{position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;
    background:var(--accent,#f97316);color:#0b1c30;font:900 10px/18px var(--mono);text-align:center;
    box-shadow:0 0 0 2px rgba(11,28,48,.92)}
  body.mvc-light .vv-badge{box-shadow:0 0 0 2px rgba(244,247,252,.95)}
  /* the overlay + Finder window (full occlusion, UX_RULES §2/§10) */
  .vv-ov{position:fixed;inset:0;z-index:9200;display:flex;align-items:center;justify-content:center;padding:24px}
  .vv-scrim{position:absolute;inset:0;background:rgba(3,6,12,.62);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .vv-win{position:relative;width:min(580px,94vw);max-height:88vh;display:flex;flex-direction:column;overflow:visible}
  .vv-win-body{overflow:auto;overscroll-behavior:contain}
  .vv-mast{margin:0 0 4px}
  /* mono eyebrow in theme INK (was accent-tinted → pink & sub-AA on porcelain under a worn collection) */
  .vv-mast .vv-eye{display:block;font:700 9.5px/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;
    color:color-mix(in srgb,var(--lg-ink,#eef3fb) 60%,transparent);margin-bottom:8px}
  .vv-mast h2{font:900 26px/1 var(--pn-sans);letter-spacing:-.02em;margin:0 0 4px;color:var(--lg-ink,#f4f8ff)}
  .vv-mast p{font:400 13px/1.5 var(--pn-sans);margin:0;max-width:40ch;color:color-mix(in srgb,var(--lg-ink,#eaf1fb) 74%,transparent)}
  /* dossier line-item row (cart / receipt / inventory) */
  /* A11 (CEO 2026-07-18): Inventory rows are dossier plates w/ the A6 machined corner furniture,
     a BIGGER media swatch, and category eyebrows in FIXED brand mono ink (never accent-tinted). */
  .vv-line{position:relative;isolation:isolate;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:15px;
    padding:14px 15px;margin-top:11px;
    --cut:16px;--lg-fui:color-mix(in srgb,var(--lg-ink,#eef3fb) 64%,transparent);--lg-fui-2:color-mix(in srgb,var(--lg-ink,#eef3fb) 30%,transparent);--lg-pip:var(--accent,#f97316);
    background:var(--lg-card-bg,linear-gradient(158deg,rgba(26,37,56,.72),rgba(9,14,24,.82)));
    border:1px solid var(--lg-hair,rgba(255,255,255,.14));border-radius:2px;
    clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
  .vv-line > *{position:relative;z-index:1}
  .vv-line::after{content:none}  /* CEO: corner furniture DEAD on Vault cards too */
  .vv-line-mark{width:56px;height:56px;flex:none;border-radius:0;background-size:cover;background-position:center;
    border:1px solid rgba(255,255,255,.12);
    clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);
    display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
  .vv-line-mark.is-slab{background:#0b1c30}
  .vv-line-mark .vv-sw{position:absolute;inset:0}
  .vv-line-body{min-width:0}
  /* category eyebrow — FIXED brand mono ink, never accent (no pink leak under a worn collection) */
  .vv-line-tag{display:block;font:700 8.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
    color:color-mix(in srgb,var(--lg-ink,#eef3fb) 58%,transparent);margin-bottom:5px}
  .vv-line-name{display:block;font:800 15px/1.1 var(--pn-sans);letter-spacing:-.01em;color:var(--lg-ink,#f4f8ff);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .vv-line-where{display:block;font:400 10.5px/1.3 var(--pn-sans);margin-top:3px;
    color:color-mix(in srgb,var(--lg-ink,#eaf1fb) 62%,transparent)}
  .vv-line-price{font:900 14px/1 var(--mono);letter-spacing:.02em;color:var(--lg-ink,#f4f8ff);white-space:nowrap;text-align:right}
  .vv-line-price .cur{color:var(--pn-cred);font-size:12px}   /* brand-fixed currency ink — never worn accent */
  .vv-x{appearance:none;border:1px solid var(--lg-hair,rgba(255,255,255,.18));background:transparent;
    color:color-mix(in srgb,var(--lg-ink,#eaf1fb) 66%,transparent);width:26px;height:26px;border-radius:2px;
    cursor:pointer;font:700 12px/1 var(--mono);flex:none}
  .vv-x:hover{border-color:#ff6a55;color:#ff6a55}
  /* totals ledger + checkout foot */
  .vv-totals{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px;border:1px solid var(--lg-hair,rgba(255,255,255,.14));border-radius:2px;overflow:hidden}
  .vv-totals > span{display:inline-flex;align-items:baseline;gap:6px;padding:9px 14px;flex:1;
    font:800 13px/1 var(--mono);letter-spacing:.04em;color:var(--lg-ink,#eaf1fb);
    border-left:1px solid var(--lg-hair,rgba(255,255,255,.12))}
  .vv-totals > span:first-child{border-left:0}
  .vv-totals i{font-style:normal;font:700 8.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
    color:color-mix(in srgb,var(--lg-ink,#eaf1fb) 54%,transparent)}
  .vv-foot{display:flex;gap:10px;align-items:center;margin-top:18px}
  .vv-foot .lg-btn{flex:1}
  .vv-empty{text-align:center;padding:34px 12px;color:color-mix(in srgb,var(--lg-ink,#eaf1fb) 58%,transparent);
    font:400 13px/1.5 var(--pn-sans)}
  .vv-short{margin-top:14px;padding:12px 14px;border-radius:2px;background:rgba(255,106,85,.12);
    border:1px solid rgba(255,106,85,.4);font:600 12px/1.5 var(--pn-sans);color:#ffb3a6;
    display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  body.mvc-light .vv-short{color:#9a2a18;background:rgba(255,106,85,.14)}
  /* ══ CEO-72 · THE RECEIPT AS A PRINTED OBJECT ════════════════════════════════════════════════
     Jon: "neon sticker + glossy bevel today." He was describing the PAID mark exactly — a #28c840
     lime rectangle with a 3px border and a glow ring, sitting on dark glass. That is a sticker, and
     a sticker is the one thing a receipt is not.

     A receipt is PAPER. Cheap, warm-white thermal stock, monospaced because the printer only has
     one face, ruled with dot leaders because that is how a till aligns a price to a name, and torn
     off at the bottom because somebody tore it off. It stays paper in BOTH themes — it is an object
     in the world, not a surface of the UI, and objects do not repaint when you change your desk.

     And the stamp is INK. Rubber presses unevenly: heavy at the edges where the die bites, thin in
     the middle where it lifts, never a clean rectangle. Built from a repeating-gradient mask over
     a double border so it breaks up the way real ink does, at an angle nobody would choose on
     purpose. No glow, no bevel, no lime. */
  .vv-receipt{position:relative;margin:2px 0 0;padding:22px 22px 30px;
    background:
      /* the faint horizontal ruling of thermal paper */
      repeating-linear-gradient(180deg, rgba(28,22,16,.028) 0 1px, transparent 1px 26px),
      linear-gradient(178deg,#f7f3ea,#efe9dd);
    color:#241d15;border-radius:2px 2px 0 0;
    box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 18px 44px rgba(0,0,0,.42);
    font-family:var(--mono,ui-monospace,monospace)}
  /* the torn edge — a real till tears against a serrated bar, so the teeth are uneven */
  .vv-receipt::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:10px;
    background:
      linear-gradient(178deg,#efe9dd,#efe9dd);
    -webkit-mask:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 7px,#000 7px 13px,transparent 13px 14px);
    mask:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 7px,#000 7px 13px,transparent 13px 14px);
    filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
  .vv-receipt .vv-mast h2{color:#241d15 !important;font-family:var(--mono,monospace);font-size:19px;
    letter-spacing:.22em;text-transform:uppercase;margin:0 0 6px}
  /* the receipt carries the phone type floor like every other surface — a till slip is small
     stock, not small type. QA caught .vv-eye at 9.5px and the totals unit at 8.5px. */
  .vv-receipt .vv-eye{color:#5d5245 !important;font:700 11px/1.5 var(--mono,monospace) !important;letter-spacing:.16em}
  .vv-receipt .vv-mast p{color:#5d5245 !important}
  .vv-receipt .vv-totals i,.vv-receipt .vv-line-tag,.vv-receipt .vv-line-where{font-size:11px !important}
  .vv-receipt .vv-mast p{font-family:var(--mono,monospace);font-size:11px;line-height:1.6;max-width:46ch}
  .vv-rule{height:0;border-top:1px dashed rgba(36,29,21,.34);margin:14px 0}
  /* the ledger — dot leaders, tabular figures, price hard right. This is what a till prints. */
  .vv-receipt .vv-line{display:flex;align-items:baseline;gap:0;padding:6px 0;border:0;background:none}
  .vv-receipt .vv-line-body{flex:0 1 auto;min-width:0}
  .vv-receipt .vv-line-name{display:inline;font:700 12px/1.6 var(--mono,monospace);color:#241d15;
    text-transform:uppercase;letter-spacing:.04em}
  .vv-receipt .vv-line-tag,.vv-receipt .vv-line-where{display:block;font:600 11px/1.5 var(--mono,monospace);color:#6b6053}
  .vv-receipt .vv-dots{flex:1 1 auto;margin:0 6px;border-bottom:1px dotted rgba(36,29,21,.4);transform:translateY(-3px);min-width:14px}
  .vv-receipt .vv-line-price{flex:none;font:700 12px/1.6 var(--mono,monospace);color:#241d15;
    font-variant-numeric:tabular-nums;white-space:nowrap}
  .vv-receipt .vv-line-price .cur{color:#8a5a12}
  .vv-receipt .vv-line-mark{display:none}                 /* a till does not print thumbnails */
  .vv-receipt .vv-totals{display:flex;flex-direction:column;gap:4px;margin-top:4px;
    font:700 12px/1.7 var(--mono,monospace);color:#241d15;font-variant-numeric:tabular-nums;text-align:right}
  .vv-receipt .vv-totals i{font-style:normal;color:#6b6053}
  .vv-receipt .vv-foot{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}
  .vv-receipt .vv-foot .lg-btn{min-height:44px}
  .vv-thanks{margin:16px 0 0;text-align:center;font:600 11px/1.7 var(--mono,monospace);
    color:#6b6053;letter-spacing:.14em;text-transform:uppercase}

  /* THE STAMP — ink, not a sticker. */
  .vv-paid{position:absolute;top:52px;right:30px;z-index:3;transform:rotate(-13deg);
    font:900 21px/1 var(--mono,monospace);letter-spacing:.2em;
    color:#0f7a2e;padding:7px 13px 6px;border:2.5px double #0f7a2e;border-radius:2px;
    /* uneven bite: two crossed gradients thin the ink in the middle and leave it heavy at the die */
    -webkit-mask:
      repeating-linear-gradient(74deg, #000 0 3px, rgba(0,0,0,.55) 3px 5px, #000 5px 9px),
      radial-gradient(120% 150% at 50% 50%, rgba(0,0,0,.72) 0%, #000 70%);
    mask:
      repeating-linear-gradient(74deg, #000 0 3px, rgba(0,0,0,.55) 3px 5px, #000 5px 9px),
      radial-gradient(120% 150% at 50% 50%, rgba(0,0,0,.72) 0%, #000 70%);
    -webkit-mask-composite:source-in; mask-composite:intersect;
    opacity:.88}
  /* pressed, not popped: a stamp comes down hard and rocks, it does not scale in from 2.4x */
  .vv-paid.go{animation:vv-stamp .34s cubic-bezier(.2,.9,.3,1) both}
  @keyframes vv-stamp{
    0%{transform:rotate(-13deg) scale(1.5) translateY(-10px);opacity:0}
    55%{transform:rotate(-11.4deg) scale(.97) translateY(0);opacity:.94}
    100%{transform:rotate(-13deg) scale(1);opacity:.88}}
  @media (prefers-reduced-motion:reduce){ .vv-paid.go{animation:none} }
  @media (max-width:560px){
    /* -13deg on an ~85px stamp adds ~10px each side; at right:14px it hung 6px past the paper and
       gave the slip a horizontal scrollbar. Caught in QA — the stamp sits inside the sheet now. */
    .vv-paid{top:44px;right:24px;font-size:16px;padding:6px 9px 5px;letter-spacing:.16em}
    .vv-receipt{padding:18px 16px 26px}
  }
  /* top-up simulator packs */
  .vv-packs{display:grid;grid-template-columns:1fr;gap:11px;margin-top:14px}
  /* A10.3 (CEO 2026-07-18): a DISCREET mono footer line, NOT a lime "dev" pill (reads unfinished). */
  .vv-simbadge{display:block;margin-top:14px;padding:10px 0 0;border-top:1px solid var(--lg-hair,rgba(255,255,255,.12));
    font:600 9px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;
    color:color-mix(in srgb,var(--lg-ink,#eef3fb) 52%,transparent);text-align:center}
  .vv-simbadge::before{content:"";display:inline-block;width:11px;height:1.5px;vertical-align:middle;margin-right:8px;background:currentColor;opacity:.6}
  .vv-simbadge::after{content:"";display:inline-block;width:11px;height:1.5px;vertical-align:middle;margin-left:8px;background:currentColor;opacity:.6}
  /* A10.1: TOP UP pack rows carry the dossier plate + A6 machined corner furniture (not flat rects) */
  .vv-pack{position:relative;isolation:isolate;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:14px 15px;
    --cut:14px;--lg-fui:color-mix(in srgb,var(--lg-ink,#eef3fb) 66%,transparent);--lg-fui-2:color-mix(in srgb,var(--lg-ink,#eef3fb) 30%,transparent);--lg-pip:var(--pn-coin-face);
    background:var(--lg-card-bg,linear-gradient(158deg,rgba(26,37,56,.72),rgba(9,14,24,.82)));
    border:1px solid var(--lg-hair,rgba(255,255,255,.14));border-radius:2px;
    clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
  .vv-pack > *{position:relative;z-index:1}
  .vv-pack::after{content:none}  /* CEO: corner furniture DEAD */
  .vv-pack.is-best{border-color:color-mix(in srgb,var(--accent,#f97316) 55%,transparent)}
  .vv-pack-coins{font:900 20px/1 var(--pn-sans);color:var(--lg-ink,#f4f8ff)}
  .vv-pack-coins .cur{color:var(--pn-coin-face);font-size:16px}   /* WahCoin ◈ — fixed brand orange */
  /* the +20%/BEST VALUE tier label reads theme INK at AA (was accent-pink → illegible on porcelain) */
  .vv-pack-tier{font:700 8.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
    color:color-mix(in srgb,var(--lg-ink,#eef3fb) 80%,transparent);margin-top:5px;display:block}
  .vv-pack.is-best .vv-pack-tier{color:var(--pn-coin-face)}
  /* the coin ORB — fixed burnt-orange coin face + navy ◈, machined; never tints with the worn accent */
  .vv-pack-orb{width:40px;height:40px;flex:none;border-radius:50%;
    background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--pn-coin-face) 62%,#fff),var(--pn-coin-face) 58%,color-mix(in srgb,var(--pn-coin-face) 55%,#000));
    box-shadow:inset 0 -4px 8px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.4),0 3px 10px rgba(249,115,22,.42);
    display:flex;align-items:center;justify-content:center;font:900 15px/1 var(--pn-sans);color:var(--pn-coin-ink)}
  @media (prefers-reduced-motion:reduce){#wear-flash.go,.wearing-chip.stamp,.vv-paid.go{animation:none}}
  /* live "preview on your agency" — dim the detail scrim so the worn world shows behind the sheet */
  .pn-detail.is-previewing .pn-detail-scrim{opacity:.14 !important;transition:opacity .4s ease}
  #pn-detail-preview[aria-pressed="true"]{border-color:var(--accent,#f97316) !important;color:var(--accent,#f97316) !important}
  /* game clock in topbar — a solid navy tactical slab so the mono time reads AA on EVERY bar. The old
     rgba(11,28,48,.32) chip composited to mid-grey on the two LIGHT themes → its near-white ink hit
     ~1.0:1 (invisible). Solid #0b1c30 + near-white ink = ~16:1 on a dark OR a light bar; the tod tints
     stay cinematic on the dark slab. (UX_RULES §1, RECURRING). */
  .game-clock{font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.14em;color:rgba(234,241,251,.92);padding:4px 10px;background:#0b1c30;border:1px solid rgba(255,255,255,.14);border-radius:3px;white-space:nowrap;min-width:110px;text-align:center;align-self:center;transition:color .8s}
  .game-clock:empty{display:none !important}   /* A7: no empty grey pill when the clock has no text */
  .game-clock[data-tod="night"]{color:rgba(180,200,255,.55)}
  .game-clock[data-tod="dawn"]{color:rgba(255,180,80,.75)}
  .game-clock[data-tod="dusk"]{color:rgba(220,120,180,.7)}
  /* ===== CITY PICKER — "DEPLOYMENT BOARD" (dossier station board; no flags, no chips) =====
     3-letter mono station code = hero; full name + UTC = secondary line; selected = burnt-orange
     ink-stamp (inverted cell + hard SST offset shadow). Brand orange is hardcoded (pre-game, no
     theme yet) so AA holds in every state. Reads on both onboarding pickers (both light surfaces). */
  .cityboard{margin-top:8px;border:2px solid #0b1c30;border-radius:3px;overflow:hidden;
    background:#0b1c30;box-shadow:5px 5px 0 rgba(11,28,48,.13)}
  .cb-bar{display:flex;align-items:center;gap:9px;padding:7px 12px;background:#0b1c30}
  .cb-dot{width:7px;height:7px;border-radius:50%;background:#f97316;flex:none;
    box-shadow:0 0 7px rgba(249,115,22,.85);animation:cbPulse 1.9s ease-in-out infinite}
  @keyframes cbPulse{0%,100%{opacity:1}50%{opacity:.28}}
  .cb-label{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#fff;white-space:nowrap}
  .cb-count{margin-left:auto;font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.58);white-space:nowrap}
  .city-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin:0;padding:0;
    background:rgba(11,28,48,.9);border-top:1px solid rgba(11,28,48,.9)}
  .city-btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
    padding:9px 11px;text-align:left;border:0;border-radius:0;cursor:pointer;position:relative;min-width:0;
    background:#fbfaf7;color:#0b1c30;font-family:var(--mono);
    transition:background .13s,color .13s,box-shadow .13s}
  .city-btn .ct-code{font-size:18px;font-weight:800;line-height:1;letter-spacing:.03em;color:#0b1c30;transition:color .13s}
  .city-btn .ct-meta{font-size:9px;font-weight:600;line-height:1.1;letter-spacing:.02em;text-transform:uppercase;
    color:#6b5d4d;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* INK-SWEEP 2026-07-25: hover was a white plate (CEO: rollovers go ORANGE, never white/pale).
     Brand-orange fill + navy ink (#0b1c30 on #f97316 ≈ 6.8:1 AA); selected stays the deeper #9d4300. */
  /* ⛔ QA 2026-08-11 (#10): hover was the LOUD orange and .selected the dark one, so a sticky
     hover (guaranteed on touch) left a second city looking more chosen than the chosen one.
     State hierarchy: selected owns the loud colour; hover only hints. */
  .city-btn:hover{background:rgba(249,115,22,.28);box-shadow:inset 3px 0 0 #9d4300}
  .city-btn:hover .ct-code{color:#0b1c30}
  .city-btn:hover .ct-meta{color:rgba(11,28,48,.78)}
  .city-btn:focus-visible{outline:2px solid #9d4300;outline-offset:-2px;z-index:3}
  .city-btn.selected{background:#f97316;color:#0b1c30;z-index:2;box-shadow:3px 3px 0 #582200}
  .city-btn.selected .ct-code{color:#fff}
  .city-btn.selected .ct-meta{color:#ffe3cd}
  .city-btn.selected::after{content:"";position:absolute;top:8px;right:9px;width:6px;height:6px;
    background:#ffe3cd;border-radius:1px;transform:rotate(45deg)}
  @media (min-width:560px){.city-grid{grid-template-columns:repeat(4,1fr)}}
  @media (max-width:430px){.cb-bar{gap:6px;padding:7px 10px}.cb-label{letter-spacing:.14em}.cb-count{letter-spacing:.07em;font-size:8.5px}}
  @media (prefers-reduced-motion:reduce){.cb-dot{animation:none}.city-btn{transition:none}}
  /* ── FULL-SCREEN PITCH RESULT — two cinematic states (WIN celebration / LOSS the room goes cold) ── */
  /* align-items:flex-start (NOT center): a centered flex child taller than the scroller pushes its top
     ABOVE the scroll origin — unreachable — which clipped the "WON"/"You're in." headline (CEO #4). The
     inner auto-margins keep it centred when it DOES fit, without ever clipping the top when it doesn't. */
  .result-screen{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-start;justify-content:center;
    padding:40px 20px;overflow:auto;animation:resultIn .45s cubic-bezier(.2,.8,.3,1) both}
  .result-screen>.result-inner{margin-block:auto}
  @keyframes resultIn{from{transform:translateY(10px)}to{transform:none}}
  /* full-bleed cinematic backdrop — its own opaque scene, never the office photo bleeding through */
  .result-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#070d16}
  .result-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .result-win .result-vid{filter:saturate(1.08) contrast(1.05) brightness(1.02)}
  .result-lose .result-vid{filter:grayscale(.78) saturate(.5) contrast(1.04) brightness(.78)}
  .result-vid.rv-off{display:none}
  .result-bg-grad{position:absolute;inset:0}
  .result-win .result-bg-grad{background:
     radial-gradient(120% 90% at 50% 8%, rgba(var(--glow),.42) 0%, rgba(157,67,0,.18) 38%, rgba(7,13,22,.92) 74%),
     linear-gradient(180deg, rgba(7,13,22,.5), rgba(7,13,22,.92))}
  .result-lose .result-bg-grad{background:
     radial-gradient(120% 90% at 50% 12%, rgba(70,86,104,.4) 0%, rgba(28,38,52,.55) 42%, rgba(6,10,16,.95) 78%),
     linear-gradient(180deg, rgba(6,10,16,.55), rgba(6,10,16,.95))}
  .result-bg-grain{position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;pointer-events:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>")}
  .result-bg-vig{position:absolute;inset:0;box-shadow:inset 0 0 220px 60px rgba(0,0,0,.7)}
  /* the legible content card — solid dark glass so every line reads over any backdrop */
  .result-inner{position:relative;z-index:2;max-width:600px;width:100%;display:flex;flex-direction:column;gap:0;
    background:linear-gradient(168deg, rgba(13,22,38,.9), rgba(7,12,21,.92));
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.12);border-radius:5px;padding:30px 34px 26px;
    box-shadow:0 36px 100px rgba(0,0,0,.6)}
  .result-win .result-inner{border-top:5px solid var(--accent)}
  .result-lose .result-inner{border-top:5px solid #5a6b7e}
  .result-eyebrow{font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:#8aa0bc;margin-bottom:10px}
  .result-logo-row{display:flex;align-items:center;gap:16px;margin-bottom:4px}
  .result-logo{font-size:58px;line-height:1;filter:drop-shadow(0 4px 24px rgba(0,0,0,.6))}
  .result-lose .result-logo{filter:grayscale(.6) drop-shadow(0 4px 24px rgba(0,0,0,.6))}
  .result-verdict-word{font-family:var(--mono);font-size:52px;font-weight:900;letter-spacing:-.02em;line-height:.95;text-transform:uppercase}
  .result-win .result-verdict-word{color:var(--accent);text-shadow:0 0 44px rgba(var(--glow),.55)}
  .result-lose .result-verdict-word{color:#c2ccd8;text-shadow:0 0 30px rgba(0,0,0,.5)}
  .result-brand-name{font-size:16px;font-weight:800;color:#aebfd2;letter-spacing:.05em;text-transform:uppercase;margin-top:3px}
  .result-quote{font-size:clamp(18px,2.6vw,25px);font-weight:600;line-height:1.42;font-style:italic;color:#fff;
    margin:22px 0 18px;padding:18px 22px;border-left:1px solid var(--lg-hair-neutral,rgba(128,132,140,.2));background:rgba(0,0,0,.32);border-radius:0 4px 4px 0}
  .result-lose .result-quote{border-color:#7d8a99;color:#e7edf5}
  .result-score-row{display:flex;align-items:center;gap:16px;margin:18px 0 10px}
  .result-score-box{text-align:center;min-width:74px}
  .result-score-box span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:#8aa0bc;text-transform:uppercase;margin-bottom:5px}
  .result-score-box b{display:block;font-size:38px;font-weight:900;line-height:1;color:#fff}
  .result-bar-track{flex:1;height:12px;background:rgba(255,255,255,.12);border-radius:6px;overflow:hidden;position:relative}
  .result-bar-fill{height:100%;border-radius:6px;transition:width 1.1s cubic-bezier(.2,.8,.3,1)}
  .result-win .result-bar-fill{background:linear-gradient(90deg,var(--accent),#fbbf24)}
  .result-lose .result-bar-fill{background:linear-gradient(90deg,#5a6b7e,#8794a4)}
  .result-bar-mark{position:absolute;top:-3px;bottom:-3px;width:3px;background:#fff;border-radius:1px;box-shadow:0 0 8px rgba(255,255,255,.6)}
  .result-meta{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
  .result-meta span{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:#cdd9e8;background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.12);border-radius:2px;padding:5px 10px}
  .result-meta span b{color:var(--accent);font-weight:800}
  .result-lose .result-meta span b{color:#dfe6ef}
  /* CEO-58 — WHAT YOU LEARNED. Same flat dark-glass family as .result-debrief so it reads as part of
     the verdict object, not a bolted-on panel. Two columns on desktop, stacked on the phone. The
     hairline rule and mono eyebrow are the house tells; no new colour is introduced. */
  .result-learn{margin:16px 0 2px;padding:15px 16px 13px;background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.10);border-radius:3px}
  .rl-hd{font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
    color:#8aa0bc;padding-bottom:9px;margin-bottom:11px;border-bottom:1px solid rgba(255,255,255,.10)}
  .rl-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px}
  .rl-col{min-width:0}
  .rl-k{font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
    color:var(--accent);margin-bottom:7px}
  .result-lose .rl-k{color:#9fb0c4}
  .rl-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
  .rl-list li{position:relative;padding-left:13px;font-size:13px;line-height:1.5;color:#dbe4ef}
  .rl-list li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:1px;background:currentColor;opacity:.5}
  .rl-list b{color:#fff;font-weight:800}
  @media (max-width:560px){ .rl-cols{grid-template-columns:1fr;gap:14px} }

  .result-debrief{margin:14px 0 2px;padding:14px 16px;background:rgba(255,255,255,.06);border-radius:3px;font-size:14px;line-height:1.55;color:#e7edf5;border-left:3px solid var(--rv,#5a6b7e)}
  .result-lose .result-debrief{border-left-color:#7d8a99}
  .result-contest-row{margin:12px 0 2px;padding:11px 15px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.12);border-radius:3px;font-size:13px;color:#e7edf5}
  .result-actions{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
  .result-actions button{min-width:170px}
  /* ── CEO-67 · THE VERDICT FOOT ───────────────────────────────────────────────────────────────
     Measured at 390x844: the verdict runs 1398px of content into an 844px viewport and the ONLY
     way forward — Continue — sat at y=1367. That is 523px below the fold, a screen and a half of
     scrolling before the player can find out there IS a way out. CEO-47 compacted the TOP of this
     page; the foot was never addressed, and on a phone the foot is the whole problem.
     The CTA is now anchored: sticky against the scrollport, so Continue is on screen the moment the
     verdict lands and stays there however long the ledger runs. It keeps its place in flow (no
     layout jump, nothing overlapped at rest) and carries its own scrim so it reads over whatever
     scrolls beneath it. Safe-area inset for the home bar. Above 900px the page already fits, so the
     sticky is phone-only and the desktop composition is untouched. */
  @media (max-width:900px){
    .result-actions{
      position:sticky; bottom:0; z-index:6;
      margin-inline:-34px; margin-bottom:-26px;            /* bleed to the card edges */
      padding:12px 34px calc(12px + env(safe-area-inset-bottom,0px));
      background:linear-gradient(180deg, rgba(7,12,21,0) 0%, rgba(7,12,21,.92) 38%, rgba(7,12,21,.98) 100%);
      border-top:1px solid rgba(255,255,255,.10);
    }
    .result-actions button{min-width:0;flex:1 1 auto;min-height:48px}
  }
  /* the verdict never got the phone type floor either — 24 nodes between 8px and 10px on the screen
     every single pitch ends on. Same treatment as the office, the arcade and the store. */
  @media (max-width:900px){
    body[data-view="result"] .result-eyebrow,
    body[data-view="result"] .result-eyebrow-t,
    body[data-view="result"] .pn-stgseal,
    body[data-view="result"] .pn-stgseal-t,
    body[data-view="result"] .pn-rz-ledger-hd,
    body[data-view="result"] .pn-rz-squad-hd,
    body[data-view="result"] .pnp2-ey,
    body[data-view="result"] .pn-rz-score .k,
    body[data-view="result"] .pn-rz-row .rk,
    body[data-view="result"] .result-inner em,
    body[data-view="result"] .result-inner small{ font-size:11px !important; }
    body[data-view="result"] .result-eyebrow,
    body[data-view="result"] .pn-rz-ledger-hd,
    body[data-view="result"] .pn-rz-squad-hd{ letter-spacing:.14em !important; }
    /* the last six: unclassed inline spans/italics inside the stage seal, the brand line and each
       squad member's role — reached by their parent, since the markup gives them no hook. */
    body[data-view="result"] .pn-stgseal-t i,
    body[data-view="result"] .bn span,
    body[data-view="result"] .mi span{ font-size:11px !important; }
  }
  /* brand monogram on the verdict (no emoji logos) */
  .result-logo .pn-mono-mark{display:inline-flex;align-items:center;justify-content:center;
    width:66px;height:66px;font-size:26px;border-radius:12px;background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.16);color:#fff}
  .result-win .result-logo .pn-mono-mark{border-color:rgba(var(--glow),.5);color:var(--accent)}
  /* PITCH ON A PAGE — the proposal's swing, surfaced on the verdict. The left spine is SEMANTIC (--rv:
     win-orange / loss-steel), NEVER the worn cosmetic --accent — structure never wears the pack (CEO #4:
     the Miami-pink spine leak). rp-down/rp-flat below still override to their own semantic tints. */
  .result-page{margin:16px 0 2px;padding:15px 18px;background:rgba(0,0,0,.34);
    border:1px solid rgba(255,255,255,.12);border-left:3px solid var(--rv,#5a6b7e);border-radius:0 6px 6px 0}
  .result-page.rp-down{border-left-color:#e0714a}
  .result-page.rp-flat{border-left-color:#7d8a99}
  .result-page .rp-top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:8px}
  .rp-eyebrow{font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#9fb2c9;flex:1;min-width:150px}
  .rp-swing{font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.04em;padding:4px 10px;border-radius:999px}
  .rp-swing--up{background:rgba(47,182,115,.18);color:#4bd68a}
  .rp-swing--down{background:rgba(224,113,74,.2);color:#f0855e}
  .rp-swing--flat{background:rgba(255,255,255,.08);color:#c5d2e2}
  .result-page .rp-verdict{font-size:15px;line-height:1.5;font-style:italic;color:#eef4fc;margin:0}
  .rp-notes{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
  .rp-note{font-size:12.5px;line-height:1.45;color:#cdd9e8;padding-left:16px;position:relative}
  .rp-note::before{position:absolute;left:0;top:0;font-weight:800}
  .rp-note.rp-strength::before{content:"✓";color:#4bd68a}
  .rp-note.rp-weakness::before{content:"!";color:#f0855e}
  /* ═══════════════════════════════════════════════════════════════════════════════════════════════
     THE PITCH CALL — a Teams-style meeting-window TAKEOVER (CEO 2026-07-18: "a pop-up in a Teams
     meeting window", not a mid-scroll panel). Finder-glass chrome (Law 10); page behind fully inert.
     Pinned dark in BOTH themes — a cinematic call interior is a sanctioned dark seam (Theme Law §5).
     ═══════════════════════════════════════════════════════════════════════════════════════════════ */
  body.pn-call-live{overflow:hidden!important}
  body.pn-call-live .topbar,
  body.pn-call-live .mvc-theme-toggle,
  body.pn-call-live .pnos-dock,
  body.pn-call-live .mvc-palfloat{display:none!important}   /* nothing floats over the call (Law 2/6) — incl. the PN/OS dock (z:300 > call z:100) */
  .pn-callroom{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
    padding:clamp(8px,2.2vw,28px);background:rgba(4,7,12,.74);
    -webkit-backdrop-filter:blur(20px) saturate(115%);backdrop-filter:blur(20px) saturate(115%);
    animation:callFade .38s ease both}
  @keyframes callFade{from{opacity:0}to{opacity:1}}
  .pn-call{position:relative;width:min(1200px,100%);height:min(884px,96vh);display:flex;flex-direction:column;
    border-radius:14px;overflow:hidden;color:#eaf1fb;
    background:linear-gradient(168deg,rgba(19,28,43,.96),rgba(8,13,22,.98));
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 50px 130px rgba(0,0,0,.66),inset 0 1px 0 rgba(255,255,255,.08);
    animation:callPop .44s cubic-bezier(.2,.85,.3,1) both}
  @keyframes callPop{from{transform:translateY(14px) scale(.985)}to{transform:none}}
  /* title bar */
  .pn-call-tb{display:flex;align-items:center;gap:13px;flex:none;padding:0 15px;height:44px;
    background:rgba(255,255,255,.045);border-bottom:1px solid rgba(255,255,255,.10)}
  .pn-call-lights{display:flex;gap:8px;flex:none}
  .pn-call-lights i{width:12px;height:12px;border-radius:50%;display:block}
  .pn-call-lights .r{background:#ff5f57}.pn-call-lights .a{background:#febc2e}.pn-call-lights .g{background:#28c840}
  .pn-call-tbtitle{font:600 11.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
    color:rgba(234,241,251,.66);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
  .pn-call-tbtitle b{color:#eaf1fb}
  .pn-call-livechip{display:inline-flex;align-items:center;gap:7px;flex:none;font:800 10px/1 var(--mono);
    letter-spacing:.18em;color:#ff6a4d;padding:5px 10px;border:1px solid rgba(255,106,77,.42);border-radius:999px;background:rgba(255,106,77,.09)}
  .pn-call-livechip .d{width:7px;height:7px;border-radius:50%;background:#ff5f57;animation:pnBlink 1.5s steps(1) infinite}
  .pn-call-livechip .t{color:#eaf1fb;font-variant-numeric:tabular-nums;letter-spacing:.05em}
  @keyframes pnBlink{50%{opacity:.25}}
  /* body grid: hero client + rail */
  .pn-call-body{flex:1;min-height:0;display:grid;grid-template-columns:1fr;overflow:hidden}
  @media(min-width:900px){.pn-call-body{grid-template-columns:minmax(0,1.6fr) minmax(272px,.92fr)}}
  /* HERO — the client feed, the primary large tile */
  .pn-call-stage{position:relative;min-height:0;overflow:hidden;background:#05080e;display:flex;flex-direction:column}
  /* BOARDROOM ENVIRONMENT — the commissioned night boardroom sits behind the client's webcam so the
     call reads as a real room, not a tile floating in the void (assets/refs/env_boardroom_night.png). */
  .pn-call-boardroom{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
    opacity:.5;filter:grayscale(.42) brightness(.5) contrast(1.05)}
  /* batch4 client boardrooms (assets/video/boardrooms/) are pre-graded per city + carry baked supers.
     The plate and the film are now ONE element (the .pn-call-envbed bed, mounted once for the whole
     call) — the grade opens up on .has-film, see the bed rules below. Sits BEHIND the client cam. */
  .pn-call-feed{position:absolute;inset:0;z-index:1;overflow:hidden}
  @media(min-width:900px){.pn-call-feed{inset:5% 6% 7%;border-radius:7px;
    box-shadow:0 26px 64px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.09)}}
  .pn-call-feed video,.pn-call-feed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    filter:grayscale(.3) contrast(1.06) brightness(.95)}
  .pn-call-feed::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(4,7,12,.42) 0,transparent 20%,transparent 46%,rgba(4,7,12,.94) 100%)}
  .pn-call-scan{position:absolute;inset:0;pointer-events:none;opacity:.10;
    background:repeating-linear-gradient(0deg,rgba(200,220,255,.5) 0 1px,transparent 1px 3px)}
  .pn-call-cliname{position:absolute;top:13px;left:15px;z-index:3;font:800 12px/1.15 var(--mono);
    letter-spacing:.1em;text-transform:uppercase;color:#eaf1fb;text-shadow:0 2px 12px rgba(0,0,0,.75)}
  .pn-call-cliname span{display:block;font-weight:600;font-size:9px;color:rgba(234,241,251,.62);margin-top:3px;letter-spacing:.16em}
  .pn-call-cliread{position:absolute;top:13px;right:15px;z-index:3;font:800 9.5px/1 var(--mono);letter-spacing:.14em;
    padding:6px 10px;border-radius:2px;background:rgba(4,7,12,.62);border:1px solid rgba(255,255,255,.18);color:#eaf1fb;
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:color .4s}
  .pn-call-cliread.is-cool{color:#f0b39b;border-color:rgba(240,140,110,.4)}
  .pn-call-cliread.is-warm{color:#a9f0c8;border-color:rgba(120,224,168,.4)}
  /* THE NAME PLATE — a dossier tag, not floating ink. It used to be bare type with a text-shadow over
     the client's own webcam, and a blown-out window behind a head measured 2.4:1 (Law 1: ink is never
     assumed over media). It gets the SST's classified-tag treatment: a dark slab with an accent spine,
     which also makes it a deliberate pair with the read chip on the opposite corner. */
  .pn-call-cliname{background:rgba(4,7,12,.74);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
    padding:7px 11px 8px;border-left:2px solid var(--accent);top:12px;left:14px}
  /* THE CONSOLE BAND — the caption and the temperature strip are ONE docked slab at the foot of the
     plate (SST §3 motif 6: a brutalist slab punched into the frame), not subtitles floating over
     photography. Directional grade, the standing law from 2026-07-30: the image survives up top, the
     type gets a real ground where it lives. Measured white ink at 1.0:1 over a blown-out monitor before. */
  .pn-call-caption{position:relative;z-index:3;margin-top:auto;padding:11px 18px 10px;
    background:rgba(4,7,12,.86);border-top:1px solid rgba(255,255,255,.13)}
  .pn-call-caption p{margin:0;font:500 14.5px/1.42 'Inter',sans-serif;font-style:italic;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.85)}
  .pn-call-caption b{font-style:normal;color:var(--accent)}
  /* the ROOM-TEMPERATURE strip, DOCKED inside the call chrome (restyled mono; a status STAMP, no arcade sticker) */
  .pn-tempstrip{position:relative;z-index:3;flex:none;padding:11px 18px 13px;
    background:linear-gradient(180deg,rgba(4,7,12,.86),rgba(4,7,12,.95));border-top:1px solid rgba(255,255,255,.09)}
  .pn-temp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
  .pn-temp-eyebrow{font:800 9px/1 var(--mono);letter-spacing:.2em;color:rgba(234,241,251,.76);display:flex;align-items:center;gap:7px}
  .pn-temp-eyebrow .d{width:6px;height:6px;border-radius:50%;background:#ff5f57;animation:pnBlink 1.5s steps(1) infinite}
  .pn-temp-stamp{font:800 11px/1 var(--mono);letter-spacing:.15em;padding:5px 11px;border:1px solid;border-radius:2px;white-space:nowrap}
  .pn-temp-stamp.is-win{color:#7cf0b1;border-color:rgba(99,230,163,.5);background:rgba(99,230,163,.09)}
  .pn-temp-stamp.is-edge{color:#f6cd82;border-color:rgba(245,200,119,.5);background:rgba(245,200,119,.09)}
  .pn-temp-stamp.is-lose{color:#f0a184;border-color:rgba(232,139,111,.5);background:rgba(232,139,111,.09)}
  .pn-temp-track{position:relative;height:7px;border-radius:2px;
    background:linear-gradient(90deg,#33465f 0,#5c6b82 38%,#c98a4a 64%,#f97316 100%);border:1px solid rgba(255,255,255,.14)}
  .pn-temp-band{position:absolute;top:-2px;bottom:-2px;
    background:repeating-linear-gradient(45deg,rgba(255,255,255,.3),rgba(255,255,255,.3) 3px,rgba(255,255,255,.08) 3px,rgba(255,255,255,.08) 6px);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
  .pn-temp-bar{position:absolute;top:-4px;bottom:-4px;width:2px;background:rgba(255,255,255,.6)}
  .pn-temp-bar::after{content:"BAR";position:absolute;top:-12px;left:50%;transform:translateX(-50%);
    font:800 7px/1 var(--mono);letter-spacing:.1em;color:rgba(234,241,251,.62)}
  .pn-temp-ndl{position:absolute;top:-5px;bottom:-5px;width:3px;background:#fff;border-radius:2px;
    box-shadow:0 0 0 1.5px rgba(4,7,12,.7),0 0 10px rgba(255,255,255,.5);transition:left .55s cubic-bezier(.22,1,.36,1)}
  .pn-temp-ends{display:flex;justify-content:space-between;margin-top:8px;font:700 8px/1 var(--mono);letter-spacing:.15em;color:rgba(234,241,251,.68)}
  .pn-temp-verdict{margin-top:7px;font:500 12px/1.4 'Inter',sans-serif;color:rgba(234,241,251,.82)}
  /* the RAIL — participants + a screen-share tile + the live transcript */
  .pn-call-rail{min-height:0;display:flex;flex-direction:column;background:rgba(6,10,17,.55);
    border-top:1px solid rgba(255,255,255,.08)}
  @media(min-width:900px){.pn-call-rail{border-top:0;border-left:1px solid rgba(255,255,255,.08)}}
  .pn-rail-share{flex:none;position:relative;aspect-ratio:16/10;overflow:hidden;background:#05080e;border-bottom:1px solid rgba(255,255,255,.08)}
  .pn-rail-share video{width:100%;height:100%;object-fit:cover;filter:contrast(1.05) saturate(1.02)}
  .pn-rail-share .lbl{position:absolute;top:9px;left:11px;z-index:3;font:800 8px/1 var(--mono);letter-spacing:.15em;color:#eaf1fb;
    background:rgba(4,7,12,.62);padding:4px 8px;border-radius:2px}
  /* THE PRESENTED DECK — composed slide cards (house type on navy) are the base surface; the
     montage clip sits ABOVE as a progressive enhancement, visible only once it actually plays.
     A dead clip (404 / no-h264 context) leaves the composed cards on screen — never a black void. */
  .pn-deck{position:absolute;inset:0;z-index:0}
  .pn-deckcard{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;
    padding:12px 13px 11px;opacity:0;transition:opacity .45s ease;
    background:linear-gradient(135deg,#101a2e 0%,#1b2c47 100%)}
  .pn-deckcard::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 2px,transparent 2px 26px),
    linear-gradient(0deg,rgba(4,7,12,.58),transparent 55%)}
  .pn-deckcard.on{opacity:1}
  .pn-deckcover{background:linear-gradient(148deg,#0a1120 0%,#16233c 62%,#241a08 100%)}
  .dk-kick{position:relative;z-index:1;font:800 8px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;
    color:var(--accent,#f97316)}
  .dk-pillar{position:relative;z-index:1;font:900 clamp(17px,1.6vw,22px)/.95 'Inter',sans-serif;font-style:italic;
    text-transform:uppercase;letter-spacing:-.03em;color:#eef4fc;text-shadow:0 2px 14px rgba(0,0,0,.5)}
  .dk-line{position:relative;z-index:1;font:500 10.5px/1.35 'Inter',sans-serif;font-style:italic;color:rgba(234,241,251,.8);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  /* ══ ONE CONTINUOUS SURFACE — the crossfading BED (CEO 2026-07-25: "a series of glitches") ══════
     Every clip surface in the live call is a BED, not a <video> that gets thrown away and rebuilt.
     A bed is: a composed fallback painted underneath (poster / slide cards / initials), and TWO
     video layers on top that hand over to each other. The bed's clip only changes when the thing
     it depends on genuinely changes (room temperature, slide, client) — and when it does, the
     incoming layer loads INVISIBLY and only fades up once it has actually produced a frame. If it
     404s, stalls, or can't decode, it is culled and the outgoing layer (or the composed fallback)
     simply stays. There is no state in which a bed shows nothing, and no beat that re-mounts one. */
  .pn-bed{position:absolute;inset:0;z-index:1;overflow:hidden}
  .pn-bed img.pn-bedp{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .pn-bed video.pn-bedl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    opacity:0;transition:opacity .62s cubic-bezier(.4,0,.2,1)}
  .pn-bed video.pn-bedl.is-live{opacity:1}
  @media(prefers-reduced-motion:reduce){.pn-bed video.pn-bedl{transition:none}}
  /* cam off: the beds stand down and the composed initials — always mounted underneath — take the
     surface. Same discipline as a dead clip: something composed is ALWAYS behind the video. */
  .pn-call.cam-off .pn-bed{display:none}
  .pn-part .init{position:absolute;inset:0;z-index:0}
  /* THE PRESENTATION BED — the compiled pitch film (assets/video/pitchcomp/) plays as the deck on
     screen, above the composed slide cards. While it plays, the slide it stands for is named in a
     caption strip on top, so the film never costs you the information the cards carried. */
  .pn-swing-host{display:contents}
  /* the boardroom plate: the still is graded down hard; once the city film is genuinely playing the
     grade opens up so the commissioned colour reads. One element, two states — never two elements. */
  .pn-call-envbed.has-film{opacity:.58;filter:grayscale(.16) brightness(.58) contrast(1.04)}
  .pn-rail-share .pn-bed{z-index:1}
  .pn-deck-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 13px 11px;opacity:0;
    transition:opacity .45s ease;pointer-events:none;
    background:linear-gradient(180deg,transparent,rgba(4,7,12,.9))}
  .pn-rail-share.has-film .pn-deck-cap{opacity:1}
  .pn-deck-cap .dc-k{display:block;font:800 8px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--accent,#f97316)}
  .pn-deck-cap .dc-n{display:block;margin-top:3px;font:900 clamp(15px,1.4vw,19px)/.98 'Inter',sans-serif;font-style:italic;
    text-transform:uppercase;letter-spacing:-.03em;color:#eef4fc;text-shadow:0 2px 14px rgba(0,0,0,.7)}
  @media(prefers-reduced-motion:reduce){.pn-deck-cap{transition:none}}
  .pn-rail-parts{flex:1;min-height:0;overflow-y:auto;padding:11px;display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start}
  .pn-part{position:relative;aspect-ratio:1/1;border-radius:4px;overflow:hidden;background:linear-gradient(180deg,#12203a,#0a121f);border:1px solid rgba(255,255,255,.08)}
  .pn-part.speaking{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 18px rgba(var(--glow),.32)}
  .pn-part video,.pn-part img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:grayscale(.7) contrast(1.1)}
  .pn-part.speaking video,.pn-part.speaking img{filter:grayscale(.12) contrast(1.08) saturate(1.05)}
  .pn-part .init{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font:900 20px/1 'Inter',sans-serif;font-style:italic;color:var(--accent)}
  /* the crew name sits ON the cam frame — the old ramp was still only ~.5 opaque where the glyphs are,
     so a bright window behind a head measured 1.2:1. The ramp now lands solid under the type. */
  .pn-part .nm{position:absolute;left:0;right:0;bottom:0;padding:13px 7px 5px;font:700 8.5px/1.1 var(--mono);letter-spacing:.03em;color:#eaf1fb;
    background:linear-gradient(180deg,transparent,rgba(4,7,12,.82) 46%,rgba(4,7,12,.96));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* one width for MIC / LIVE / CAM — the badge used to resize under its own label on every beat */
  .pn-part .mc{position:absolute;top:5px;right:5px;min-width:34px;height:16px;padding:0 4px;border-radius:8px;display:flex;align-items:center;justify-content:center;
    background:rgba(4,7,12,.58);font:800 7.5px/1 var(--mono);letter-spacing:.05em;color:#9fb2c9}
  .pn-part.mic-off .mc{color:#f0a184}
  .pn-part.is-rival{border-color:rgba(200,90,70,.5)}
  /* FIXED box, not max-height: the transcript fills up as the room talks, and a growing box pushed
     the participant grid every single beat — a layout shift on every cut. It now reserves its space
     from the first frame and scrolls inside itself. Nothing above it ever moves again. */
  .pn-rail-transcript{flex:none;height:154px;overflow-y:auto;padding:9px 11px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:5px}
  .pn-tr-beat{font:500 11px/1.4 'Inter',sans-serif;color:rgba(234,241,251,.78);padding:5px 8px;border-radius:3px;background:rgba(255,255,255,.03);border-left:2px solid rgba(255,255,255,.14)}
  .pn-tr-beat.beat-event{border-left-color:var(--accent);color:#eaf1fb}
  .pn-tr-beat.beat-warm,.pn-tr-beat.beat-open{border-left-color:#63e6a3}
  .pn-tr-beat.beat-cool{border-left-color:#f0a184}
  .pn-tr-beat.beat-swing{border-left-color:#f6cd82;color:#eaf1fb}
  .pn-tr-empty{font:500 11px/1.4 'Inter',sans-serif;color:rgba(234,241,251,.4);padding:4px 8px}
  /* ── THE FEED ROWS OWN THEIR GROUND (2026-07-31, QA: "text over near-white bars, weak contrast").
     The rows carry the legacy light-theme beat classes (.beat-event/.beat-warm/…) so the pre-room feed
     and the call feed can share one vocabulary — but those legacy rules are BARE class selectors
     (`.beat-event{background:linear-gradient(90deg,rgba(168,85,247,.10),#fff 62%)}`, written for a white
     card) declared LATER in the sheet, so at equal specificity they won the background out from under
     `.pn-tr-beat`: a porcelain-to-white wash under porcelain ink inside a dark call. Measured 1.1:1 —
     illegible, and a purple gradient the SST bans outright. The call scope now states its own ground for
     every beat kind: a semantic left spine over a dark tint that FADES OUT to the right, so the ink runs
     over near-black for the length of the line. Same idiom, correct polarity. */
  .pn-callroom .pn-tr-beat{background:rgba(255,255,255,.05)}
  .pn-callroom .pn-tr-beat.beat-event{background:linear-gradient(90deg,rgba(var(--glow),.22),rgba(255,255,255,.04) 58%)}
  .pn-callroom .pn-tr-beat.beat-warm,
  .pn-callroom .pn-tr-beat.beat-open{background:linear-gradient(90deg,rgba(99,230,163,.17),rgba(255,255,255,.04) 58%)}
  .pn-callroom .pn-tr-beat.beat-cool{background:linear-gradient(90deg,rgba(232,139,111,.17),rgba(255,255,255,.04) 58%)}
  .pn-callroom .pn-tr-beat.beat-swing{background:rgba(var(--glow),.15)}
  /* same class-collision on the ink: legacy `.beat-open{color:var(--muted)}` is #584237 warm brown-grey,
     a LIGHT-surface secondary — 1.4:1 here. The quiet beat stays quiet, in porcelain. */
  .pn-callroom .pn-tr-beat.beat-open{color:rgba(234,241,251,.84);font-style:italic}
  .pn-callroom .pn-tr-beat.beat-luck{background:linear-gradient(90deg,rgba(56,189,248,.18),rgba(255,255,255,.04) 58%);border-left-color:#38bdf8}
  .pn-callroom .pn-tr-beat .muted,.pn-callroom .pn-tr-beat .small{color:rgba(226,233,247,.74)}
  /* the beat COPY carries inline `color:var(--primary|--outline)` spans (warm/cool flavour), and those
     two tokens are a LIGHT-surface pair — #9d4300 burnt orange and #584237 brown-grey, both ~1.5:1 on
     this dark feed. Inline styles can't be overridden by a rule, so the tokens are re-pointed for the
     feed's subtree only: the buttons and the rest of the room keep the brand values untouched. */
  .pn-callroom .pn-rail-transcript{--primary:#ff9457;--outline:#f0a184}
  /* the DOCK — controls docked IN the call, never floating mid-page */
  .pn-call-dock{flex:none;display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:10px 15px;
    background:rgba(255,255,255,.045);border-top:1px solid rgba(255,255,255,.10)}
  .pn-call-boom{display:inline-flex;align-items:center;gap:8px;font:800 11px/1 var(--mono);letter-spacing:.09em;color:#eaf1fb;
    padding:8px 12px;border-radius:9px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
  .pn-call-boom .o{width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff8a4d,#f97316);flex:none;box-shadow:0 0 10px rgba(249,115,22,.5)}
  .pn-dock-ctrl{min-width:38px;height:38px;padding:0 9px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;gap:5px;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:#cdd9e8;cursor:pointer;font:800 8.5px/1 var(--mono);letter-spacing:.05em}
  .pn-dock-ctrl.off{color:#f0a184;border-color:rgba(232,139,111,.4)}
  .pn-dock-ctrl:hover{background:rgba(255,255,255,.1)}
  .pn-dock-spacer{flex:1;min-width:8px}
  .pn-call-dock .pn-btn{margin:0}
  /* ══ THE BIG SWING — the player's one live call (CEO 2026-07-25: "poor designs") ══════════════
     Was: two identical grey slabs on a mud-blurred room, stakes buried in copy as "(8 Time)".
     Now: the room STAYS VISIBLE (a bottom-anchored scrim, no full-frame blur, so you can still read
     the client while you decide), and the two options are ASYMMETRIC STAKES CARDS — the safe play is
     narrow, cool steel, squared-off restraint; the swing is wider, hot-rimmed, chamfered, with a
     hazard-hatched risk texture. Costs and consequences are DESIGNED CHIPS (TIME 8 as a mono cost
     chip), not parenthetical text. Ink is explicit porcelain on both plates (never inherited over
     video) so both pass AA regardless of the frame underneath. */
  .pn-swing-ov{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;
    align-items:center;justify-content:flex-end;gap:14px;padding:22px 22px 32px;text-align:center;
    background:linear-gradient(180deg,rgba(4,7,12,.08) 0%,rgba(4,7,12,.46) 30%,rgba(4,7,12,.9) 66%,rgba(4,7,12,.96) 100%);
    animation:callFade .3s ease both}
  .pn-swing-ov::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(115% 90% at 50% 8%,transparent 42%,rgba(4,7,12,.55) 100%)}
  .pn-swing-ov>*{position:relative;z-index:1}
  .pn-swing-ov .kick{margin:0;font:800 9.5px/1 var(--mono);letter-spacing:.28em;text-transform:uppercase;
    color:var(--accent);display:inline-flex;align-items:center;gap:.8em}
  .pn-swing-ov .kick::before,.pn-swing-ov .kick::after{content:"";width:24px;height:1.5px;background:currentColor;opacity:.6}
  .pn-swing-ov h4{margin:0;font-family:'Inter',sans-serif;font-weight:900;font-style:italic;
    font-size:clamp(19px,2.6vw,27px);line-height:1.02;letter-spacing:-.035em;text-transform:uppercase;color:#fff;
    text-shadow:0 2px 14px rgba(0,0,0,.7)}
  .pn-swing-ov .sub{margin:0;font:500 12.5px/1.45 'Inter',sans-serif;color:rgba(234,241,251,.8);max-width:38ch;
    text-shadow:0 1px 8px rgba(0,0,0,.8)}
  /* ASYMMETRY: the swing card is materially bigger than the safe one — the layout takes a view */
  .pn-swing-ov .opts{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:12px;
    width:min(680px,96%);margin-top:4px;align-items:stretch}
  .pn-swing-opt{position:relative;text-align:left;cursor:pointer;color:#eef4fc;display:flex;
    flex-direction:column;gap:9px;padding:14px 16px 15px;min-width:0;
    transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
  .pn-swing-opt:focus-visible{outline:2px solid #fff;outline-offset:3px}
  .pn-swing-opt .lbl{font:800 8.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase}
  .pn-swing-opt b{display:block;font-family:'Inter',sans-serif;font-weight:900;font-style:italic;
    text-transform:uppercase;letter-spacing:-.03em;line-height:.98;color:#fff}
  .pn-swing-opt small{display:block;font:500 12px/1.4 'Inter',sans-serif;color:rgba(238,244,252,.78)}
  .pn-swing-opt .stakes{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
  /* stakes as DESIGNED CHIPS — the TIME cost is a mono cost chip, not "(8 Time)" in a sentence */
  .pn-stake{display:inline-flex;align-items:center;gap:5px;font:800 9px/1 var(--mono);letter-spacing:.14em;
    text-transform:uppercase;padding:5px 8px;border:1px solid;white-space:nowrap}
  .pn-stake--time{color:#dfe8f4;border-color:rgba(223,232,244,.42);background:rgba(255,255,255,.06)}
  .pn-stake--time i{font-style:normal;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
  .pn-stake--calm{color:#9fd8c0;border-color:rgba(159,216,192,.42);background:rgba(47,182,115,.12)}
  .pn-stake--hot{color:#ffd9c0;border-color:rgba(var(--glow),.7);background:rgba(var(--glow),.2)}
  /* A · SAFE — cool steel, squared, restrained. No glow, no cut: it is the option that does not shout. */
  .pn-swing-opt.is-safe{background:linear-gradient(168deg,#1b232f,#0e131b);
    border:1px solid #3a4756;border-left:3px solid #6d8095}
  .pn-swing-opt.is-safe .lbl{color:#9fb3c8}
  .pn-swing-opt.is-safe b{font-size:clamp(14px,1.6vw,17px)}
  .pn-swing-opt.is-safe:hover{border-color:#6d8095;transform:translateY(-2px)}
  /* B · THE SWING — hot rim, THE CLIP chamfer, hazard-hatched risk texture behind the ink */
  .pn-swing-opt.is-bold{background:linear-gradient(166deg,rgba(var(--glow),.22),rgba(12,9,7,.94) 62%);
    border:1px solid rgba(var(--glow),.6);--clip:18px;
    box-shadow:0 22px 56px -20px rgba(var(--glow),.7)}
  .pn-swing-opt.is-bold::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
    background:repeating-linear-gradient(-45deg,rgba(var(--glow),1) 0 2px,transparent 2px 9px)}
  .pn-swing-opt.is-bold>*{position:relative}
  .pn-swing-opt.is-bold .lbl{color:var(--accent)}
  .pn-swing-opt.is-bold b{font-size:clamp(17px,2.1vw,22px)}
  .pn-swing-opt.is-bold:hover{transform:translateY(-2px);box-shadow:0 26px 66px -18px rgba(var(--glow),.9)}
  @media (max-width:640px){
    .pn-swing-ov .opts{grid-template-columns:1fr}
    .pn-swing-opt.is-bold{order:-1}
  }
  @media(max-width:640px){.pn-call{height:100%;border-radius:0}.pn-call-body{grid-template-rows:minmax(0,1.35fr) minmax(0,1fr)}
    .pn-rail-parts{grid-template-columns:1fr 1fr 1fr}.pn-rail-transcript{max-height:110px}}
  /* ══ THE CALL AT TABLET PORTRAIT (641–899px · iPad 834×1112) — its own composition ═══════════════
     Below 900 the body is ONE column, but the rail kept its desktop furniture: a 16:10 share panel
     (795×497 at 834 — half a thousand pixels of empty navy), square crew tiles and a 154px feed. That
     demanded ~670px of a 622px column, so the stage was squeezed to 155px and everything downstream
     failed at once (QA 2026-07-31): the client plate cropped to a mouth, the "STRIDE COLLECTIVE" name
     plate landed on the caption at the same y, the crew tiles were sliced to 22px slivers.
     The tablet gets a BROADCAST STACK instead of a squeezed desktop: client plate as the hero, the deck
     as a LOWER THIRD (it earns a strip, not a panel), one row of crew cams, the feed at the foot.
     Everything here is height-relative, so the same rules hold on a 768×1024 or a short 880×600. */
  @media (max-width:899px){
    /* the room takes the tablet's height — a 884px box in a 1112px viewport was letterboxing the call
       and then crushing its own stage to fit the rail */
    .pn-call{height:min(1000px,96vh)}
    /* the client keeps at least 40% of the body, whatever the rail asks for */
    .pn-call-body{grid-template-rows:minmax(40%,1fr) minmax(0,auto)}
    .pn-call-rail{overflow:hidden}
    /* a wide plate crops top-and-bottom, so bias the window UP — faces, not chins */
    .pn-call-feed .pn-bed img.pn-bedp,.pn-call-feed .pn-bed video.pn-bedl,
    .pn-call-feed video,.pn-call-feed img{object-position:50% 28%}
    /* THE DECK AS A LOWER THIRD: slide number on its own line, pillar and the actual line side by side */
    .pn-rail-share{aspect-ratio:auto;height:clamp(80px,9.6vh,98px)}
    .pn-deckcard{flex-flow:row wrap;align-items:baseline;align-content:flex-end;justify-content:flex-start;gap:3px 13px;padding:10px 15px 12px}
    .dk-kick{flex:0 0 100%}
    .dk-pillar{flex:0 0 auto;font-size:clamp(18px,2.5vw,23px)}
    .dk-line{flex:1 1 190px;min-width:0;-webkit-line-clamp:2;font-size:11.5px}
    .pn-deck-cap{padding:20px 15px 12px}
    /* THE CREW: one honest row of cams — six 120px tiles beat six 22px slivers */
    .pn-rail-parts{display:flex;flex:none;gap:8px;height:clamp(84px,11.5vh,120px);padding:10px 12px;overflow:visible}
    .pn-part{flex:1 1 0;min-width:0;height:100%;aspect-ratio:auto}
    /* THE FEED: fixed at the foot, and OPAQUE — it used to be transparent, so the overflowing crew
       tiles painted straight through the beat rows */
    .pn-rail-transcript{flex:none;height:clamp(96px,14.5vh,158px);background:rgba(5,9,15,.82)}
  }
  /* PHONE (≤640) carried the identical crush — 232px of empty deck panel over 22px crew slivers. Same
     stack, tightened: on 390px every pixel the rail takes comes off the client's face, so the furniture
     is cut to the bone — a filmstrip of cams (the Zoom idiom), and the deck strip drops the quote line,
     which is already in the caption and in the feed directly below it. The client stays the hero. */
  @media (max-width:640px){
    .pn-call{height:100%}
    .pn-call-caption{padding:9px 14px 9px}
    .pn-tempstrip{padding:9px 14px 11px}
    .pn-rail-share{height:clamp(74px,9.5vh,98px)}
    .pn-deckcard{padding:9px 13px 10px}
    .dk-line{display:none}
    .pn-rail-parts{height:clamp(56px,8.5vh,76px);gap:6px;padding:8px 10px}
    .pn-rail-transcript{max-height:none;height:clamp(86px,11.5vh,116px)}
  }
  @media(prefers-reduced-motion:reduce){.pn-callroom,.pn-call,.pn-swing-ov{animation:none}.pn-temp-ndl{transition:none}
    .pn-call-livechip .d,.pn-temp-eyebrow .d{animation:none}}
  /* ═══ THE PITCH RESULT (DELIVERED) — rebuilt as a cinematic verdict SEQUENCE, all media in play ═══
     (i) verdict moment over the ending clip · (ii) the ledger (count-ups) · (iii) squad strip · sector
     backdrop plate. Verdict colours are SEMANTIC (--rv), NEVER the worn cosmetic accent (kills the
     "off-world pink" leak). Cinematic dark seam in both themes (Theme Law §5). */
  .result-win.pn-rz{--rv:#f97316;--rv-glow:249,115,22;--rv-2:#fbbf24}
  .result-lose.pn-rz{--rv:#8b96a0;--rv-glow:139,150,160;--rv-2:#c2ccd8}
  .pn-rz .result-vid{filter:none}
  .result-win.pn-rz .result-vid{filter:saturate(1.06) contrast(1.04)}
  .result-lose.pn-rz .result-vid{filter:grayscale(.82) saturate(.42) contrast(1.05) brightness(.74)}
  .pn-rz-sector{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
    opacity:.16;filter:grayscale(.6) contrast(1.05);mix-blend-mode:screen}
  .result-lose.pn-rz .pn-rz-sector{opacity:.1;filter:grayscale(.9) brightness(.7)}
  .pn-rz .result-inner{max-width:660px;border-top:5px solid var(--rv);background:linear-gradient(168deg,rgba(12,20,35,.9),rgba(6,11,19,.94))}
  /* CEO 2026-08-01 (CEO-47): the verdict must land in ONE viewport on desktop — no scroll to reach
     Continue past a bare backdrop. Wide screens go two-column: the ledger reads left, the room +
     Continue sit right, actions pinned to the column foot. Narrow keeps the single column. */
  @media(min-width:1100px){
    .pn-rz .result-inner{max-width:1080px;display:grid;column-gap:34px;align-content:start;
      grid-template-columns:1.2fr 1fr;
      grid-template-areas:"eyebrow eyebrow" "word word" "brand squad" "quote squad" "ledger squad" "ledger actions"}
    .pn-rz .result-eyebrow{grid-area:eyebrow}
    .pn-rz .pn-rz-word{grid-area:word}
    .pn-rz .pn-rz-brandrow{grid-area:brand}
    .pn-rz .result-quote{grid-area:quote}
    .pn-rz .pn-rz-ledger{grid-area:ledger}
    .pn-rz .pn-rz-squad{grid-area:squad;align-self:start}
    .pn-rz .result-actions{grid-area:actions;align-self:end;justify-content:flex-end}
    .pn-rz .pn-rz-squad-row{flex-direction:column;flex-wrap:nowrap}
  }
  .pn-rz-word{font:900 clamp(46px,9vw,86px)/.9 var(--mono);letter-spacing:-.03em;text-transform:uppercase;color:var(--rv);
    text-shadow:0 0 48px rgba(var(--rv-glow),.5);margin:2px 0 2px}
  .pn-rz-sub{font:800 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:rgba(234,241,251,.62)}
  .pn-rz-brandrow{display:flex;align-items:center;gap:13px;margin:14px 0 4px}
  .pn-rz-mark{width:52px;height:52px;flex:none;display:flex;align-items:center;justify-content:center;font-size:30px;
    border-radius:11px;background:rgba(255,255,255,.05);border:1px solid rgba(var(--rv-glow),.4);color:var(--rv)}
  .pn-rz-brandrow .bn{font:800 15px/1.15 'Inter',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#dfe8f4}
  .pn-rz-brandrow .bn span{display:block;font:600 10px/1 var(--mono);letter-spacing:.16em;color:rgba(159,178,201,.9);margin-top:4px}
  .pn-rz-award{margin-left:auto;font:800 9.5px/1 var(--mono);letter-spacing:.14em;color:#f6cd82;border:1px solid rgba(245,200,119,.5);border-radius:999px;padding:6px 11px;background:rgba(245,200,119,.08)}
  .pn-rz .result-quote{border-left-color:var(--rv);margin:18px 0 6px}
  /* the ledger */
  .pn-rz-ledger{margin-top:18px;padding:18px 20px;border-radius:8px;background:rgba(4,7,12,.42);border:1px solid rgba(255,255,255,.1)}
  .pn-rz-ledger-hd{font:800 9.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:rgba(159,178,201,.9);margin-bottom:14px}
  .pn-rz-scorewrap{display:flex;align-items:flex-end;gap:16px;margin-bottom:6px}
  .pn-rz-score{text-align:left}
  .pn-rz-score .k{display:block;font:800 9px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(159,178,201,.85);margin-bottom:5px}
  .pn-rz-score .v{font:900 46px/.9 var(--mono);letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
  .result-win.pn-rz .pn-rz-score.is-yours .v{color:var(--rv)}
  .pn-rz-score.is-bar .v{color:#aeb9c8;font-size:34px}
  .pn-rz-vs{flex:1;position:relative;height:12px;margin-bottom:9px;background:rgba(255,255,255,.1);border-radius:6px;overflow:hidden}
  .pn-rz-vs i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:6px;background:linear-gradient(90deg,var(--rv),var(--rv-2));transition:width 1.1s cubic-bezier(.2,.8,.3,1)}
  .pn-rz-vs .mk{position:absolute;top:-3px;bottom:-3px;width:3px;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.6)}
  .pn-rz-rows{margin-top:16px;display:flex;flex-direction:column}
  .pn-rz-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .pn-rz-row:last-child{border-bottom:0}
  .pn-rz-row .rk{font:800 9.5px/1.3 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:rgba(159,178,201,.9);flex:none;min-width:120px}
  .pn-rz-row .rv{font:600 13px/1.4 'Inter',sans-serif;color:#e7edf5;text-align:right;font-variant-numeric:tabular-nums}
  .pn-rz-row .rv b{color:var(--rv);font-weight:800}
  .pn-rz-row .rv.neg b{color:#f0a184}
  .pn-rz-row .rv.pos b{color:#7cf0b1}
  /* squad strip */
  .pn-rz-squad{margin-top:16px}
  .pn-rz-squad-hd{font:800 9.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:rgba(159,178,201,.9);margin-bottom:10px}
  .pn-rz-squad-row{display:flex;gap:9px;flex-wrap:wrap}
  .pn-rz-member{flex:1;min-width:118px;display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:7px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)}
  .pn-rz-member .mug{width:40px;height:40px;flex:none;border-radius:5px;overflow:hidden;background:#0b1c30;display:flex;align-items:center;justify-content:center;font:900 14px/1 'Inter',sans-serif;font-style:italic;color:var(--rv)}
  .pn-rz-member .mug img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:grayscale(.5) contrast(1.1)}
  /* CEO-37: the text block must own its lane and clip — long roles were running under the OVR numeral */
  .pn-rz-member{min-width:150px}
  .pn-rz-member .mi{min-width:0;flex:1;overflow:hidden}
  .pn-rz-member .mi span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pn-rz-member .mi b{display:block;font:800 12.5px/1.15 'Inter',sans-serif;color:#eef4fc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pn-rz-member .mi span{display:block;font:500 10px/1.2 'Inter',sans-serif;color:rgba(174,190,210,.85);margin-top:2px}
  .pn-rz-member .ovr{margin-left:auto;text-align:center;flex:none}
  .pn-rz-member .ovr em{display:block;font:800 8px/1 var(--mono);letter-spacing:.1em;color:rgba(159,178,201,.85);font-style:normal;margin-bottom:2px}
  .pn-rz-member .ovr b{font:900 17px/1 var(--mono);color:#fff;font-variant-numeric:tabular-nums}
  .pn-rz .result-actions .pn-btn{min-width:190px}
  .pn-rz-fade{opacity:0;transform:translateY(10px)}
  .pn-rz-fade.in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.3,1)}
  @media(prefers-reduced-motion:reduce){.pn-rz-fade{opacity:1;transform:none;transition:none}.pn-rz-vs i{transition:none}}
  /* ── WEEK SUMMARY — now inside the mac-finder window chrome (CEO batch #2) ── */
  /* FIX 6 · the CTA is never below the fold again. The window is capped to the viewport and becomes a
     flex column: the hero movement + the Start Week button are ALWAYS on screen, and only the detail
     (crew meters, street word) scrolls inside the body. Previously the window grew to 1113px on a
     900px screen and the primary action simply wasn't reachable without scrolling the whole page. */
  .week-summary-screen{display:flex;align-items:flex-start;justify-content:center;padding:4vh 20px;min-height:60vh;animation:resultIn .35s ease both}
  /* the cap subtracts the persistent topbar + the device bezel + the screen gutter, so the window
     fits the actual SCREEN on both the cased desktop shell and the full-bleed tablet/phone widths */
  .week-summary-inner.bigmodal-card{width:min(560px,100%);max-height:calc(100vh - 210px);overflow:hidden;
    display:flex;flex-direction:column;animation:bmPop .3s cubic-bezier(.2,.85,.3,1) both}
  .week-summary-inner .bigmodal-card-body{position:relative;padding:22px 34px 6px;flex:1 1 auto;min-height:0;
    display:flex;flex-direction:column;overflow:hidden}
  /* a short scrim at the cut line so the detail reads as "more below", not as clipped content */
  .week-summary-inner .bigmodal-card-body::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26px;
    pointer-events:none;background:linear-gradient(180deg,rgba(9,14,24,0),rgba(9,14,24,.92))}
  /* the HERO (week title + cash movement) is pinned; only the detail below it scrolls, so the loud
     moment and the Start Week button are on screen together, always */
  .week-summary-inner .wsl-detail{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
    overscroll-behavior:contain;scrollbar-width:thin;margin-right:-12px;padding-right:12px}
  .week-summary-inner .wsl-detail::-webkit-scrollbar{width:6px}
  .week-summary-inner .wsl-detail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}
  .week-summary-inner .ws-foot{flex:none;margin:0;padding:16px 34px calc(20px + env(safe-area-inset-bottom,0px));
    justify-content:stretch;border-top:1px solid rgba(255,255,255,.1);
    background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.16))}
  .week-summary-inner .ws-cta{width:100%;min-height:52px}
  .week-summary-inner .ws-eyebrow{color:#a9bdd6;opacity:1}
  @media (prefers-reduced-motion:reduce){ .week-summary-screen,.week-summary-inner.bigmodal-card{animation:none} }
  .ws-header{font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.25em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
  .ws-title{font-size:32px;font-weight:900;letter-spacing:-.03em;margin:0 0 16px;color:#fff}
  .ws-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
  .ws-row:last-of-type{border-bottom:none}
  .ws-row b{color:#eef4fc}
  .ws-row .neg{color:#f87171}
  .ws-row .pos{color:#4ad6c4}
  .ws-section-head{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.45;margin:14px 0 4px}
  .ws-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.6;display:block;margin-bottom:4px}
  .ws-val{font-weight:700;font-variant-numeric:tabular-nums}
  .ws-actions{margin-top:24px;position:sticky;bottom:10px;z-index:3}
  .ws-actions .ws-cta{width:100%;min-height:48px}

  /* ══════════ FIX 6 · THE WEEK-CLOSE LEDGER (CEO 2026-07-25: "this layout looks weak") ══════════
     THE DEFECT: twelve interchangeable label→value rows at one type size. Wages, headcount stamina
     and the street rumour all carried identical visual weight, so the week-turn — the game's most
     important beat, the moment you learn whether you survived — read as a settings page. The Start
     Week CTA was pushed below the fold behind five staff rows.
     THE FIX: hierarchy that matches the stakes. ONE loud object (the cash movement), a compact
     agency line, the team as MEASURED bodies (stamina/tension meters, so fatigue is a shape you can
     read at a glance, not a number you have to parse), and the street word as a designed intel slip.
     Deliberately unequal: the movement block is flush-bled to the window edge, everything below is
     inset. That asymmetry is the point — one hero object, disciplined detail.
     The card is a pinned-dark seam in BOTH themes (as .bigmodal-card already is), so every ink value
     here is an explicit light value — never inherited. */

  /* ── the loud moment: this week's cash movement ─────────────────────────────────────────── */
  .wsl-move{margin:2px -34px 0;padding:20px 34px 22px;
    background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0));
    border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}
  .wsl-move-grid{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
  .wsl-cell{display:flex;flex-direction:column;gap:6px;min-width:0}
  .wsl-cell .wsl-k{font-family:var(--mono);font-size:8.5px;font-weight:800;letter-spacing:.24em;
    text-transform:uppercase;color:#9db0c9}                                  /* 7.1:1 on the card */
  .wsl-cell .wsl-v{font-weight:900;letter-spacing:-.03em;line-height:.9;font-variant-numeric:tabular-nums}
  .wsl-out .wsl-v{font-size:clamp(26px,6.4vw,34px);color:#ff8f7a}            /* 6.4:1 — money leaving */
  .wsl-arrow{flex:1 1 40px;height:1px;margin-bottom:12px;position:relative;
    background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.28))}
  .wsl-arrow::after{content:"";position:absolute;right:0;top:-3px;border:3.5px solid transparent;
    border-left-color:rgba(255,255,255,.4);border-right:0}
  .wsl-pos{text-align:right;margin-left:auto}
  .wsl-pos .wsl-v{font-size:clamp(38px,9vw,52px)}
  .wsl-pos.is-up .wsl-v{color:#fff}
  .wsl-pos.is-down .wsl-v{color:#ff6a55}                                      /* insolvent = alarm */
  /* the burn bar — the ONE ratio worth drawing: what this week's wages took out of the bank */
  .wsl-burn{margin-top:16px;display:flex;flex-direction:column;gap:7px}
  .wsl-burn-track{height:6px;border-radius:0;background:rgba(255,255,255,.09);overflow:hidden;display:flex}
  .wsl-burn-fill{height:100%;background:#ff8f7a;min-width:2px}
  .wsl-burn-cap{font-family:var(--mono);font-size:9.5px;line-height:1.5;letter-spacing:.05em;color:#a9bdd6}  /* 8.4:1 */
  .wsl-burn-cap b{color:#fff;font-weight:800;font-variant-numeric:tabular-nums}
  .wsl-burn-cap .wsl-warn{color:#ffb27a}                                      /* 9.6:1 */

  /* ── the disciplined detail below ───────────────────────────────────────────────────────── */
  .wsl-sec{display:flex;align-items:center;gap:12px;margin:22px 0 12px}
  .wsl-sec span{font-family:var(--mono);font-size:8.5px;font-weight:800;letter-spacing:.28em;
    text-transform:uppercase;color:#9db0c9;flex:none}
  .wsl-sec i{flex:1;height:1px;background:rgba(255,255,255,.12);display:block}
  .wsl-agency{display:flex;gap:0;flex-wrap:wrap}
  .wsl-ag{flex:1 1 33%;min-width:96px;padding:0 14px;border-left:1px solid rgba(255,255,255,.12);
    display:flex;flex-direction:column;gap:5px}
  .wsl-ag:first-child{padding-left:0;border-left:0}
  .wsl-ag .wsl-k{font-family:var(--mono);font-size:8.5px;font-weight:800;letter-spacing:.2em;
    text-transform:uppercase;color:#9db0c9}
  .wsl-ag .wsl-v{font-size:19px;font-weight:900;color:#eef4fc;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .wsl-ag .wsl-d{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.04em}
  .wsl-ag .wsl-d.pos{color:#5fe3d1}                                          /* 9.9:1 */
  .wsl-ag .wsl-d.neg{color:#ff8f7a}
  .wsl-ag .wsl-d.fl{color:#9db0c9}

  /* the team as bodies, not text: two stacked meters per person */
  .wsl-crew{display:flex;flex-direction:column}
  .wsl-p{display:grid;grid-template-columns:minmax(88px,1fr) 2.1fr;gap:14px;align-items:center;
    padding:9px 0;border-bottom:1px solid rgba(255,255,255,.07)}
  .wsl-p:last-child{border-bottom:0}
  .wsl-nm{min-width:0;font-size:13px;font-weight:700;color:#eef4fc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .wsl-nm em{display:block;font-family:var(--mono);font-size:8px;font-style:normal;font-weight:700;
    letter-spacing:.18em;text-transform:uppercase;color:#8fa3bd;margin-top:3px}   /* 5.8:1 */
  .wsl-meters{display:flex;flex-direction:column;gap:6px}
  .wsl-m{display:grid;grid-template-columns:52px 1fr 34px;gap:9px;align-items:center}
  .wsl-m span{font-family:var(--mono);font-size:7.5px;font-weight:800;letter-spacing:.16em;
    text-transform:uppercase;color:#8fa3bd}
  .wsl-m i{height:4px;background:rgba(255,255,255,.1);display:block;position:relative;overflow:hidden}
  .wsl-m i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w,0%);background:var(--c,#eef4fc)}
  .wsl-m b{font-family:var(--mono);font-size:10px;font-weight:800;color:#cfdcec;text-align:right;
    font-variant-numeric:tabular-nums}                                        /* 11.2:1 */

  /* the street word — an intel slip, not another row */
  .wsl-word{position:relative;margin-top:4px;padding:16px 18px 16px 20px;
    background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.1)}
  .wsl-word::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent,#f97316)}
  .wsl-word p{margin:0;font-size:14.5px;line-height:1.55;font-style:italic;color:#eef4fc}
  .wsl-word .wsl-attr{display:block;margin-top:10px;font-family:var(--mono);font-size:8.5px;font-weight:800;
    letter-spacing:.22em;text-transform:uppercase;color:#a9bdd6;font-style:normal}
  @media(max-width:560px){
    .week-summary-screen{padding:2.5vh 12px}
    .week-summary-inner .bigmodal-card-body{padding:18px 20px 4px}
    .week-summary-inner .ws-foot{padding:14px 20px calc(16px + env(safe-area-inset-bottom,0px))}
    .ws-title{font-size:26px}
    .wsl-move{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}
    .wsl-pos{margin-left:0;text-align:left;flex:1 0 100%}
    .wsl-arrow{display:none}
    .wsl-p{grid-template-columns:1fr;gap:8px}
    /* the agency cells STAY three-across on mobile — they are three short figures, and stacking them
       cost 150px of scroll for no gain (caught eyeballing the 390 render) */
    .wsl-ag{flex:1 1 0;min-width:0;padding:0 9px}
    .wsl-ag .wsl-v{font-size:17px}
    .wsl-ag .wsl-k,.wsl-ag .wsl-d{font-size:8px;letter-spacing:.14em}
  }
  @media(prefers-reduced-motion:reduce){ .wsl-burn-fill,.wsl-m i::after{transition:none} }
  /* ── DELIVER phase — slot collapse ── */
  .deliver-slots-toggle{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;color:var(--accent);opacity:.7;background:none;border:none;padding:6px 0;display:block;margin:8px 0}
  .deliver-slots-toggle:hover{opacity:1}
  /* DELIVER phase: larger video tiles, compressed slot cards */
  .deliver-mode .meet{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:16px}
  .deliver-mode .meet .tile.client{min-height:210px}
  .deliver-mode .meet .tile.client .face{font-size:68px}
  /* IN-ROOM: the reacting client is the HERO — team tiles read as secondary (CEO: "most entertaining").
     Desktop only; mobile keeps the client full-width single. */
  @media(min-width:720px){
    .deliver-mode .meet .tile.client{grid-column:span 2;grid-row:span 2;min-height:340px}
    .deliver-mode .meet .tile.client .read{font-size:12px;letter-spacing:.14em}
    .deliver-mode .meet .tile.client .cmood-orb{transform:scale(1.4)}
    .deliver-mode .meet .tile:not(.client){min-height:150px}
  }
  .deliver-mode .pillar-card{display:flex;flex-direction:row;align-items:center;padding:8px 10px;gap:10px;min-height:0}
  .deliver-mode .pillar-img{width:36px;height:36px;flex-shrink:0;overflow:hidden;border-radius:50%}
  .deliver-mode .pillar-img img{width:100%;height:100%;object-fit:cover;object-position:top;filter:grayscale(1) contrast(1.2)}
  .deliver-mode .pillar-body{flex:1;min-width:0}
  .deliver-mode .pillar-stat{font-size:9px;margin-bottom:2px}
  .deliver-mode .pillar-body h4{font-size:11px;margin:0 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .deliver-mode .pillar-body .bar{margin-bottom:4px}
  .deliver-mode .pillar-body .contribs{display:none}
  .deliver-mode .pillar-body textarea{height:36px;font-size:11px;padding:4px 6px;resize:none}
  .deliver-mode .slot-action{font-size:10px;padding:3px 8px;white-space:nowrap}
  /* the hero photographic plate — penthouse image, gritty + slightly desaturated, faint on the LIGHT base */
  #penthouse-bg .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    opacity:.18;transform:scale(1.08);filter:saturate(.8) contrast(1.05)}
  /* burnt-orange editorial corner wash on the light room */
  #penthouse-bg .wash{position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to top right,color-mix(in srgb,var(--accent) 6%,transparent),transparent 55%,color-mix(in srgb,var(--accent-yellow) 8%,transparent))}
  /* SST halftone — dark ink dots on the light base (radial-gradient #000 10% / 6px, opacity .06) */
  #penthouse-bg .halftone-bg{position:absolute;inset:0;pointer-events:none;
    background-image:radial-gradient(#0b1c30 10%,transparent 11%);background-size:6px 6px;opacity:.06}
  #penthouse-bg .grit-bg{position:absolute;inset:0;pointer-events:none;
    background-image:url('https://www.transparenttextures.com/patterns/stardust.png');opacity:.4;mix-blend-mode:multiply}
  /* the editorial "bleed" typography — huge ghost words behind everything (Stitch DISRUPT / MANIC) */
  .bleed-text{position:fixed;font-weight:900;color:rgba(11,28,48,.035);text-transform:uppercase;
    white-space:nowrap;pointer-events:none;z-index:-2;letter-spacing:-.08em;line-height:.7;font-style:italic}
  .bleed-1{top:-3vh;left:-3vw;font-size:30vw;transform:rotate(-8deg)}
  .bleed-2{bottom:-5vh;right:-8vw;font-size:26vw;transform:rotate(10deg)}
  /* a soft ink vignette so panels read as floating editorial objects, not a flat page */
  #penthouse-bg::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(140% 120% at 50% 0%,transparent 45%,rgba(11,28,48,.10) 100%);}
  /* a CSS city silhouette along the lower band — guarantees real architectural depth behind the glass
     even before the video plate loads (this is what reads as a penthouse window, not a flat page) */
  /* a lit-city silhouette band along the lower edge — pale towers on the dark room (penthouse window) */
  #penthouse-bg .skyline{position:absolute;left:0;right:0;bottom:0;height:46%;opacity:.10;
    background:
      linear-gradient(90deg,transparent 4%,rgba(180,200,230,.5) 4%,rgba(180,200,230,.5) 9%,transparent 9%) 0 100%/13% 62% no-repeat,
      linear-gradient(90deg,transparent 16%,rgba(180,200,230,.55) 16%,rgba(180,200,230,.55) 23%,transparent 23%) 0 100%/40% 82% no-repeat,
      linear-gradient(90deg,transparent 30%,rgba(180,200,230,.4) 30%,rgba(180,200,230,.4) 34%,transparent 34%) 0 100%/100% 48% no-repeat,
      linear-gradient(90deg,transparent 47%,rgba(180,200,230,.6) 47%,rgba(180,200,230,.6) 58%,transparent 58%) 0 100%/100% 92% no-repeat,
      linear-gradient(90deg,transparent 64%,rgba(180,200,230,.42) 64%,rgba(180,200,230,.42) 70%,transparent 70%) 0 100%/100% 58% no-repeat,
      linear-gradient(90deg,transparent 78%,rgba(180,200,230,.55) 78%,rgba(180,200,230,.55) 90%,transparent 90%) 0 100%/100% 74% no-repeat,
      linear-gradient(90deg,transparent 93%,rgba(180,200,230,.38) 93%,rgba(180,200,230,.38) 99%,transparent 99%) 0 100%/100% 40% no-repeat;
    -webkit-mask:linear-gradient(180deg,transparent 0%,#000 60%);mask:linear-gradient(180deg,transparent 0%,#000 60%);}
  #penthouse-bg .shard{position:absolute;pointer-events:none;backdrop-filter:blur(8px)}
  #penthouse-bg .s1{top:-10%;right:-5%;width:46%;height:120%;background:rgba(255,255,255,.35);transform:rotate(-12deg);clip-path:polygon(10% 0,100% 0,90% 100%,0 100%);border:1px solid rgba(255,255,255,.5)}
  #penthouse-bg .s2{bottom:-20%;left:-10%;width:34%;height:60%;background:color-mix(in srgb,var(--accent) 7%,rgba(255,255,255,.25));transform:rotate(12deg);clip-path:polygon(0 15%,100% 0,95% 85%,5% 100%)}
  .halftone{background-image:radial-gradient(#0b1c30 10%,transparent 11%);background-size:8px 8px}
  #penthouse-bg .grit{position:absolute;inset:0;opacity:.05;background-image:radial-gradient(#0b1c30 10%,transparent 11%);background-size:7px 7px}
  /* glassmorphism panels — bright white SST glass-shard */
  .glass-shard{background:var(--glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border:1px solid var(--glass-border);box-shadow:30px 30px 80px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.7)}
  .text-aggressive{letter-spacing:-.08em;line-height:.8;font-style:italic;text-transform:uppercase}
  .scratched-out{position:relative;display:inline-block}
  .scratched-out::after{content:"";position:absolute;left:-5%;top:50%;width:110%;height:3px;
    background:var(--primary);transform:rotate(-3deg);opacity:.85}
  @keyframes float{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(-8px,12px) rotate(1deg)}100%{transform:translate(0,0) rotate(0)}}
  .floating{animation:float 8s ease-in-out infinite}
  /* ===== v2 rebel-penthouse signature layer (from VIBE.md) ===== */
  /* the glass HUD panel — rebel default surface, stronger blur + a hairline charcoal structural edge */
  /* ⛔ A SURFACE THAT SETS A BACKGROUND SETS ITS INK (CEO, 2026-08-11: "this subcopy is
     illegible" — measured 1.14:1). This class declared a light glass background and no colour,
     so whatever ink the page inherited — on dark stock, near-white — landed on near-white glass.
     The background and the ink are one decision, made in one place; a child may go LIGHTER only
     if it re-earns AA against this same glass. That is the whole law, and it is why the ink
     tokens live in the very rule that creates the surface they must survive on. */
  .glass-panel{background:var(--glass-rebel);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
    border:1px solid var(--glass-rebel-border);box-shadow:var(--shadow-glass),inset 0 1px 0 rgba(255,255,255,.7);
    color:#1d2a3a}
  .glass-panel .small,.glass-panel .muted,.glass-panel p{color:#33445c}   /* 7.0:1 on the .42 glass over light stock */
  .glass-panel b,.glass-panel strong,.glass-panel h1,.glass-panel h2,.glass-panel h3{color:#0b1c30}
  /* faint material textures — opacity capped low so they read as material, never decoration */
  .scanlines-bg{background-image:linear-gradient(to bottom,transparent 50%,rgba(11,28,48,.05) 50%);background-size:100% 4px;pointer-events:none}
  .text-ghost{ -webkit-text-stroke:1px rgba(157,67,0,.3); color:transparent; }
  /* technical HUD label — JetBrains Mono tactical micro-type ("STREAM_REQUESTS / TOWER_STATUS_04") */
  .hud-label{font-family:var(--mono);font-size:var(--t-label);font-weight:var(--t-label-w);letter-spacing:var(--t-label-ls);text-transform:uppercase;color:var(--muted)}
  .hud-rule{height:1px;background:linear-gradient(90deg,var(--primary),rgba(var(--glow),0));margin:2px 0 0}
  /* ---- MANIC SPICE (event-state only) ---- */
  /* the signature red-ink stamp — one per view, on consequence (a blown pitch / urgent RFI) */
  /* the scribble is red ink on light paper, NO alpha. On LIGHT surfaces → mix-blend multiply.
     On DARK surfaces (the verdict toast) → use the asset as a luminance mask + paint it red so the
     paper drops out and only the ink shows. Both routes give clean red ink, never a grey box. */
  .stamp-fail{position:relative}
  .stamp-fail::after{content:"";position:absolute;inset:-16% -12%;z-index:6;pointer-events:none;
    background:var(--scribble-cross) center/contain no-repeat;mix-blend-mode:multiply;opacity:.92;
    animation:stamp .3s cubic-bezier(.2,1.4,.4,1) both}
  @keyframes stamp{from{transform:scale(1.7) rotate(-9deg);opacity:0}to{transform:scale(1) rotate(-3deg);opacity:.92}}
  /* the LOST verdict reads as a printout the client marked up: light paper card so multiply ink lands true */
  .toast.verdict-lost{background:#f6f2ec;color:#1a1614;border-color:#c9b8a6}
  .toast.verdict-lost .muted{color:#7a6a5a}
  .toast.verdict-lost .feedback{color:#2a2420;border-left-color:#ba1a1a}
  .toast.verdict-lost button{background:#fff;color:#1a1614;border-color:#c9b8a6}
  .stamp-now{position:relative}
  .stamp-now::after{content:"";position:absolute;z-index:6;top:-26px;right:-12px;width:118px;height:70px;pointer-events:none;
    background:var(--scribble) 80% 20%/240% 240% no-repeat;mix-blend-mode:multiply;opacity:.95;
    animation:stamp .3s cubic-bezier(.2,1.4,.4,1) both}
  .synergy-glow{box-shadow:var(--glow-synergy)}
  .shimmer-sweep{position:relative;overflow:hidden}
  .shimmer-sweep::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);background-size:200% 100%;animation:shimmer 2.6s ease-in-out;pointer-events:none}
  @keyframes shimmer{0%{background-position:-160% 0}100%{background-position:160% 0}}
  @keyframes glitch{0%,100%{transform:translate(0)}20%{transform:translate(-2px,2px)}40%{transform:translate(-2px,-2px)}60%{transform:translate(2px,2px)}80%{transform:translate(2px,-2px)}}
  .glitch-active{animation:glitch .3s cubic-bezier(.25,.46,.45,.94) both}
  /* boot sequence — glass panels stagger-fly in (≤900ms total) */
  @keyframes hudboot{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
  .booting .card,.booting .glass-panel{animation:hudboot .5s cubic-bezier(.22,1,.36,1) both}
  .booting .card:nth-child(2),.booting .glass-panel:nth-child(2){animation-delay:.07s}
  .booting .card:nth-child(3),.booting .glass-panel:nth-child(3){animation-delay:.14s}
  .booting .card:nth-child(4),.booting .glass-panel:nth-child(4){animation-delay:.2s}
  @media (prefers-reduced-motion:reduce){.shimmer-sweep::before,.glitch-active,.stamp-fail::after,.stamp-now::after,.booting .card,.booting .glass-panel{animation:none}}
  .material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;
    line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;
    direction:ltr;-webkit-font-feature-settings:'liga';font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24}
  h1,h2,h3{font-weight:900;letter-spacing:-.03em;margin:.2em 0;color:var(--ink)}
  h1{letter-spacing:-.04em;font-size:var(--t-display);line-height:1.04}
  /* section headers — the BIG editorial Stitch voice: huge uppercase black italic, tight tracking
     ("TOWER_STATUS", "STREAM / REQUESTS"). The orange baseline rule stays as a structural tell. */
  h2{text-transform:uppercase;letter-spacing:-.04em;font-size:clamp(26px,3.4vw,40px);font-weight:900;font-style:italic;
    color:var(--ink);position:relative;padding-bottom:10px;margin:0 0 14px;line-height:.86}
  h2::after{content:"";position:absolute;left:0;bottom:0;width:48px;height:3px;background:var(--accent);
    box-shadow:0 0 14px color-mix(in srgb,var(--accent) 60%,transparent)}
  /* a smaller "technical" header variant for nested modules that shouldn't shout */
  h2.sub{font-size:13px;font-style:normal;letter-spacing:.14em;padding-bottom:7px;margin-bottom:8px}
  h2.sub::after{width:30px;height:2px}
  /* default = a brutalist white button on the light base — hard ink border, hover inverts to black slab */
  button{font:inherit;font-weight:800;cursor:pointer;border:2px solid var(--ink);background:#fff;color:var(--ink);
    padding:9px 16px;border-radius:2px;transition:transform .12s,background .15s,color .15s,border-color .15s}
  /* INK-SWEEP 2026-07-25 (CEO): the old hover flipped to var(--ink) — a token that resolves LIGHT inside
     pinned-dark scopes (.bigmodal-card --ink:#eef4fc) and under worn looks, painting white-on-white plates.
     Rollover is now the BRAND-ORANGE treatment everywhere: the accent deepened 22% so WHITE ink clears AA
     whatever the theme/worn accent resolves to (bright #f97316 → #c25a11 ≈4.4:1; deep #b4380d deeper still). */
  button:hover{background:color-mix(in srgb,var(--accent,#f97316) 78%,#000);color:#fff;
    border-color:color-mix(in srgb,var(--accent,#f97316) 78%,#000);transform:translateY(-1px)}
  /* primary = the signature CTA: a chunky INK-DISTRESSED ORANGE STAMP — a screen-printed brand block
     with a hard INK offset-shadow + a slight rotate that snaps straight on hover. The one bold object
     on the page. Always brand-orange (--accent), never navy. White text for legibility on orange. */
  /* liquid glass CTA — frosted fill + colour bloom, no brutalist ink-stamp rotate/offset-shadow */
  /* WEEK-LOOP QA 2026-08-11 (D3): the frosted glow fill composited to raw #f97316 on light card
     surfaces → white ink at 2.8:1, flagged 37 times (welcome CLOSE, START AGAIN…). Same cure the
     WELCOME BACK close and the light-theme primaries already use: white ink held, the ORANGE gives
     — a step-darkened brand gradient that measures AA under white on any backdrop, because it no
     longer lets the backdrop through. (Full grammar consolidation = CEO-80.) */
  button.primary{position:relative;isolation:isolate;overflow:hidden;
    background:linear-gradient(180deg,#b85510,#b4380d);   /* both stops ≥4.8:1 under white */
    color:#fff;border:1px solid rgba(255,255,255,.24);
    text-transform:uppercase;letter-spacing:.1em;font-size:12.5px;font-weight:900;
    border-radius:999px;padding:13px 24px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 1.5px 1px rgba(255,255,255,.65),
      inset 0 -9px 16px rgba(0,0,0,.28),0 10px 26px rgba(var(--glow),.32);
    transition:transform .2s cubic-bezier(.2,.7,.3,1),filter .15s}
  button.primary:hover{transform:translateY(-2px);filter:brightness(1.05)}
  button.primary:active{transform:translateY(0)}
  button:disabled{opacity:.35;cursor:not-allowed;transform:none}
  input,textarea,select{font:inherit;background:#fff;border:2px solid var(--ink);color:var(--ink);border-radius:2px;padding:10px;width:100%}
  input::placeholder,textarea::placeholder{color:var(--muted)}
  input:focus,textarea:focus,select:focus{outline:none;border-color:var(--primary);box-shadow:4px 4px 0 var(--accent)}
  textarea{resize:vertical;min-height:64px}
  .wrap{max-width:1180px;margin:0 auto;padding:18px}
  /* ===== THE COMMAND BAR — a considered, editorial top deck =====
     A calm structured rail: brand block · agency identity · the few PRIMARY figures that matter,
     then a de-emphasised SECONDARY cluster behind a divider · then clean, consistent action buttons.
     Clear grouping, hairline dividers, a deliberate type scale, and breathing room. */
  /* OPAQUE COMMAND BAR (CEO 2026-07-18 D7): content must NEVER wash through the bar on scroll.
     Solid paint first (engines without backdrop-filter), then a near-opaque glass tint. */
  /* QA 2026-07-31 (defect #3): when the second stat row expands the bar (~115px), the wrapped
     identity line sat flush at the very top edge and the cased screen's 30px corner radius cut it
     in half — the first thing on screen read broken. align-content centres the wrapped rows and
     the vertical padding keeps every row clear of the rounded corners at any bar height. */
  .topbar{display:flex;align-items:stretch;align-content:center;gap:0;padding:6px 20px;min-height:60px;position:sticky;top:0;z-index:20;
    background:#f6f7fd;
    background:linear-gradient(180deg,rgba(248,249,255,.985),rgba(244,246,252,.965));
    backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);
    border-bottom:4px solid var(--ink);
    box-shadow:0 10px 30px rgba(0,0,0,.06)}
  .topbar .material-symbols-outlined{color:var(--primary)}
  /* ── ITEM 1 (CEO 2026-07-16, Lane C) — TOPBAR IS ONE CLEAN ROW AT EVERY WIDTH ──
     The old rule let the bar flex-wrap into stranded pill rows (SIGN OUT/STORE/CFO, then COO/?/trash)
     at 390/320. Now: identity + key stats hold a SINGLE non-wrapping row (scrolls if tight, never
     clips mid-glyph); every utility collapses behind the ⋯ overflow menu. UX_RULES §3. */
  @media(max-width:760px){
    .topbar{flex-wrap:nowrap;row-gap:0;padding:8px 12px;gap:8px;min-height:56px}
    .topbar .game-clock,.topbar .spacer{display:none}
    .topbar #storeBtn,.topbar #cfoBtn,.topbar #cooBtn,.topbar #feedBtn,.topbar #pnlLeagueBtn,.topbar #helpBtn,.topbar #resetBtn,.topbar #account{display:none !important}
    .topbar .tb-more{display:inline-flex !important;flex:none;margin-left:auto}
    /* FEED + League also fold into ⋯ at mobile (their proxies live there) so the strip never overlaps */
    #tbOverflow [data-tbproxy="feedBtn"],#tbOverflow [data-pnl-of]{display:flex !important}
    #hud{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;flex:0 1 auto;min-width:0}
    #hud::-webkit-scrollbar{display:none}
    .brandmark{padding-right:12px;font-size:17px}
    .stat.stat-id{max-width:150px}
  }
  @media(max-width:360px){
    .topbar{padding:8px 10px;gap:6px}
    .brandmark{padding-right:9px;margin-right:0;font-size:15px}
    .stat.stat-id{max-width:110px}
  }
  /* action buttons (Store/CFO/?/Reset): clean, consistent, ghost-on-ink */
  .topbar button{background:transparent;color:var(--ink);border:1.5px solid var(--line-2);
    font-size:11.5px;font-weight:800;letter-spacing:.04em;border-radius:3px;padding:8px 12px;
    align-self:center;transition:background .14s,color .14s,border-color .14s,transform .12s}
  .topbar button:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-1px)}
  /* brand block — sits in its own bay, divided from the readout */
  .brandmark{display:flex;align-items:center;align-self:stretch;padding-right:18px;margin-right:2px;
    border-right:1px solid var(--line);
    font-weight:900;letter-spacing:-.04em;font-size:20px;text-transform:uppercase;color:var(--ink);font-style:italic}
  .brandmark b{color:var(--primary);font-weight:900}
  .ver{font-family:var(--mono);font-size:9px;font-weight:700;color:var(--muted);letter-spacing:.2em;margin-left:5px;text-transform:uppercase;
    border:1px solid var(--line-2);border-radius:2px;padding:1px 5px}
  /* #hud is the readout rail: identity + the stat groups laid out as a single horizontal band */
  #hud{display:flex;align-items:stretch;gap:0;flex:0 1 auto;min-width:0;overflow:hidden}
  /* a stat group: a tidy cluster of cells with a hairline divider before it (except the first) */
  .hud-group{display:flex;align-items:center;gap:18px;padding:0 18px;align-self:center;
    border-left:1px solid var(--line)}
  .hud-group.hud-secondary{gap:13px;padding:0 16px}
  .hud-group.hud-holdco{padding-right:0}
  /* each readout cell — micro mono label OVER a tabular figure, clean editorial stack */
  .stat{display:flex;flex-direction:column;line-height:1.05;color:var(--ink)}
  .stat span{order:-1;font-family:var(--mono);font-size:7.5px;font-weight:700;color:var(--muted);
    text-transform:uppercase;letter-spacing:.16em;margin:0 0 2px}
  .stat b{font-size:14px;font-weight:800;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
  .stat b span{color:var(--primary)!important;order:0;font-family:inherit;font-size:inherit;letter-spacing:inherit;margin:0;text-transform:none}
  .stat .stat-unit{font-style:normal;font-size:9.5px;font-weight:700;color:var(--muted);letter-spacing:0;margin-left:1px}
  /* identity bay — agency name + founder/seat, its own divided block on the left of the readout */
  /* QA 2026-07-31 (defect #3): align-self:center — the identity column is ~25px tall inside a row
     that grows to ~114px when the second stat row is up; stretched-to-top it sat flush against the
     cased screen's rounded corner, which cut the founder line in half. Centred, it rides the band
     like every other stat at any bar height. */
  .stat.stat-id{justify-content:center;align-self:center;padding:0 16px 0 0;max-width:230px}
  .stat.stat-id b{font-size:13.5px;font-weight:900;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .stat.stat-id span{font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* PRIMARY tier reads a touch heavier — the figures the eye should land on */
  .hud-primary .stat b{font-size:15px;font-weight:900}
  /* the dominant figure (Cash) takes the weight + the accent */
  .stat.stat-hero b{font-size:20px;color:var(--primary);font-weight:900}
  .stat.stat-hero span{color:var(--muted)}
  /* SECONDARY tier is quieter — smaller, muted, present but recessive */
  .hud-secondary .stat b{font-size:12.5px;font-weight:700;color:var(--ink-2)}
  .hud-secondary .stat span{color:var(--muted);opacity:.85}
  /* ── TOPBAR STAT STRIP — never clip a value mid-glyph (Vero 2026-07-16). The band is width-
     constrained by the brandmark + utility cluster, so at desktop it could only fit ~6 cells and
     hard-clipped Valuation to "£5,04…" and the rest off-screen. Fix: in the single-band office/pitch
     console, trim the secondary tier to the two CURRENCIES (CRED + WahCoins) — Valuation/Time/WahWahs
     are surfaced elsewhere (valuation hero card, Time in the war room, WahWahs in Season). Nothing is
     lost, nothing clips. Store/Pass/Result keep the full tier (their topbar wraps). ── */
  body[data-view="office"] #hud .hud-secondary .stat--val,
  body[data-view="office"] #hud .hud-secondary .stat--time,
  body[data-view="office"] #hud .hud-secondary .stat--wah,
  body[data-view="pitch"] #hud .hud-secondary .stat--val,
  body[data-view="pitch"] #hud .hud-secondary .stat--time,
  body[data-view="pitch"] #hud .hud-secondary .stat--wah{display:none}
  /* a hair of right-padding so the last kept cell never sits flush against the clip edge */
  body[data-view="office"] #hud .hud-secondary,
  body[data-view="pitch"] #hud .hud-secondary{padding-right:4px}
  /* CEO 2026-07-21 "header still shit": the CRED+WahCoins secondary cluster rendered UNDER the
     STORE/CFO pills at every constrained width (the console bar only has room for identity +
     primary stats + the pill cluster). Drop the secondary currencies from the office/pitch console
     bar ENTIRELY — they live in the wallet (CFO panel) + the stat tap-panels. One clean slim row,
     no collision, at any width. */
  body[data-view="office"] #hud .hud-group.hud-secondary,
  body[data-view="pitch"] #hud .hud-group.hud-secondary{ display:none; }
  /* LIGHT themes: the office topbar is a light bar — raise the micro-labels from sub-AA .58 to ~AA */
  body.mvc-light[data-view="office"] .stat span{color:rgba(30,24,18,.82)}
  /* MOBILE: the band only fits identity + Cash + Reputation; Clients/Week live in the Performance
     cards, the whole secondary tier lives in the tap-panels — hide rather than clip. */
  @media(max-width:760px){
    #hud{gap:10px}
    #hud .hud-group{gap:12px;padding:0 10px}
    #hud .hud-group.hud-secondary{display:none}
    #hud .hud-primary .stat[data-panel="clients"],
    #hud .hud-primary .stat[data-panel="calendar"]{display:none}
  }
  /* ── THEME PICKER visibility (CEO 2026-07-16) — the floating picker is dead weight on pre-game
     surfaces (My Agencies save-select, onboarding, interview, meet-team, dossier). Render it ONLY in
     the live game shell; collapsed-to-a-puck behaviour lives in mvc-os.css. ── */
  body .mvc-palfloat{display:none}
  body[data-view="office"] .mvc-palfloat,
  body[data-view="pitch"] .mvc-palfloat,
  body[data-view="store"] .mvc-palfloat,
  body[data-view="pass"] .mvc-palfloat,
  body[data-view="weeksummary"] .mvc-palfloat,
  body[data-view="result"] .mvc-palfloat{display:inline-flex}
  .spacer{flex:1 1 auto;min-width:8px}
  /* a thin divider before the account/action cluster on the right */
  #account{align-self:center}
  .topbar #account, .topbar .game-clock{align-self:center}
  .grid{display:grid;gap:16px}
  .card{position:relative;background:
      linear-gradient(135deg,#fff 0%,#f3f3f3 100%);
    backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
    border:4px solid var(--ink);border-radius:2px;padding:24px;
    box-shadow:12px 12px 0 rgba(11,28,48,.10)}
  /* a thick ACCENT "structural tab" up the left edge of each TOP-LEVEL panel — the rebel brutalist cut-line */
  .card::before{content:"";position:absolute;left:-4px;top:18px;bottom:18px;width:5px;background:var(--accent);border-radius:0}
  .card .card::before{display:none}  /* nested modules don't repeat the cut-line — keeps it from reading as a noisy stack */
  /* TOP-LEVEL "shard" cards: bright glass-shard — the SST signature (white 42% + blur, hard editorial drop,
     faint dark halftone inside). Legible, premium, never the flat pale admin box we shipped. */
  .card.shard{background:var(--glass-rebel);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border:1px solid var(--glass-rebel-border);
    box-shadow:30px 30px 80px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.7);overflow:hidden}
  .card.shard::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background-image:radial-gradient(#0b1c30 10%,transparent 11%);background-size:8px 8px;opacity:.05}
  .card.shard>*{position:relative;z-index:1}
  /* shard silhouette — kept SUBTLE so the angled glass edge reads without clipping real content.
     Extra side padding compensates for the slight corner cut. */
  .card.shard.shard-1,.card.shard.shard-2{padding-left:30px;padding-right:30px}
  .shard-1{clip-path:polygon(1.2% 0,100% 0.6%,98.8% 100%,0 99.4%)}
  .shard-2{clip-path:polygon(0 1%,98.8% 0,100% 99%,1.2% 100%)}
  @keyframes drift{0%{transform:translate(0,0) rotate(-.6deg)}50%{transform:translate(-8px,11px) rotate(.5deg)}100%{transform:translate(0,0) rotate(-.6deg)}}
  .drifting{animation:drift 14s ease-in-out infinite}
  @media (prefers-reduced-motion:reduce){.drifting{animation:none}}
  .muted{color:var(--muted)}
  /* ===== SIGNATURE MOVE 1 — the DIAGONAL EDITORIAL MASTHEAD (KEF LS50 lockup) =====
     A bold type lockup that slices diagonally across the top of the home base: agency name in huge
     italic display, a thin accent rule cutting at an angle, the week/season as graphic data. */
  .masthead{position:relative;margin:6px 0 26px;padding:30px 32px;border-radius:2px;overflow:hidden;
    background:var(--slab);transform:rotate(-.6deg);
    border:4px solid var(--ink);box-shadow:14px 14px 0 var(--accent)}
  .masthead::before{content:"";position:absolute;top:-30%;left:-5%;width:140%;height:6px;
    background:linear-gradient(90deg,transparent,var(--accent) 30%,var(--accent) 70%,transparent);
    transform:rotate(-7deg);opacity:.95;pointer-events:none}
  .masthead::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background-image:radial-gradient(#fff 10%,transparent 11%);background-size:7px 7px;opacity:.04}
  .masthead .mh-in{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
  .masthead .mh-kicker{font-size:10px;font-weight:900;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:6px}
  .masthead .mh-name{font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.05em;line-height:.82;
    font-size:clamp(34px,6vw,64px);color:#fff;margin:0;text-shadow:0 6px 30px rgba(0,0,0,.5)}
  .masthead .mh-sub{font-family:var(--mono);font-size:11px;font-weight:700;color:rgba(255,255,255,.6);margin-top:8px;text-transform:uppercase;letter-spacing:.14em}
  .masthead .mh-data{text-align:right;flex:none}
  .masthead .mh-data .big{font-size:clamp(30px,4.4vw,46px);font-weight:900;font-style:italic;color:var(--accent);line-height:.9;letter-spacing:-.03em;font-variant-numeric:tabular-nums;text-shadow:0 0 24px color-mix(in srgb,var(--accent) 30%,transparent)}
  .masthead .mh-data .lbl{font-size:9px;font-weight:900;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.45);display:block;margin-top:4px}
  /* ===== SIGNATURE MOVE 2 — the DIEGETIC GLASS-SCREEN marker layer =====
     A translucent glass meeting-room wall layered into THE FLOOR panel, carrying confident drywipe
     (whiteboard-marker) diagrams — a strategy flow + a circled metric — drawn in white/amber ink.
     Backdrop-blur pane, edge highlight, subtle reflection. Hand-authored SVG, NOT post-it scribbles. */
  .glasswall{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;border-radius:inherit}
  .glasswall::before{content:"";position:absolute;inset:0;
    background:linear-gradient(120deg,rgba(255,255,255,.05),transparent 40%);}
  .glasswall .gw-edge{position:absolute;top:14%;bottom:14%;right:34%;width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.22),transparent)}
  .glasswall svg{position:absolute;top:50%;right:30%;transform:translateY(-50%);width:30%;max-width:280px;height:auto;opacity:.55;filter:drop-shadow(0 0 1px rgba(0,0,0,.5))}
  @media (max-width:760px){.glasswall svg,.glasswall .gw-edge{display:none}}
  .glasswall .gw-ink{stroke:rgba(255,255,255,.62);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .glasswall .gw-ink.amber{stroke:var(--accent);opacity:.9}
  .glasswall text{fill:rgba(255,255,255,.58);font:900 11px Inter;letter-spacing:.04em;text-transform:uppercase}
  .floorpanel>*{position:relative;z-index:1}
  /* ===== REAL DASHBOARD GRID — "mission control" (replaces the 90s scroll column) =====
     A compact masthead bar → a KPI/stat strip of tiles → a dense 12-col panel grid.
     The whole thing reads at-a-glance and mostly fits the viewport instead of scrolling forever. */
  /* compact masthead — a header BAND, not a giant rotated hero slab */
  .masthead.dash-bar{margin:2px 0 14px;padding:14px 22px;transform:none;border-radius:2px;
    box-shadow:8px 8px 0 var(--accent)}
  .masthead.dash-bar .mh-in{align-items:center}
  .masthead.dash-bar .mh-kicker{margin-bottom:3px;font-size:9px;letter-spacing:.24em}
  .masthead.dash-bar .mh-name{font-size:clamp(24px,3.4vw,40px);line-height:.9}
  .masthead.dash-bar .mh-sub{margin-top:4px;font-size:9.5px}
  .masthead.dash-bar .mh-data .big{font-size:clamp(22px,2.8vw,32px)}
  .masthead.dash-bar .glasswall svg{opacity:.4;right:36%;width:22%}
  /* KPI STRIP — brutalist editorial stat tiles, one scannable row */
  .kpi-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:0 0 16px}
  @media (max-width:960px){.kpi-strip{grid-template-columns:repeat(3,1fr)}}
  @media (max-width:560px){.kpi-strip{grid-template-columns:repeat(2,1fr)}}
  .kpi{position:relative;background:#fff;border:3px solid var(--ink);border-radius:2px;
    padding:12px 14px 11px;box-shadow:6px 6px 0 rgba(11,28,48,.12);overflow:hidden}
  .kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--accent)}
  .kpi.kpi-hero{background:var(--slab);border-color:var(--slab);box-shadow:6px 6px 0 var(--accent)}
  .kpi .kpi-lbl{font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.16em;
    text-transform:uppercase;color:var(--muted);display:block}
  .kpi.kpi-hero .kpi-lbl{color:rgba(255,255,255,.55)}
  .kpi .kpi-val{font-weight:900;font-style:italic;letter-spacing:-.03em;line-height:.95;
    font-size:clamp(20px,2.3vw,28px);color:var(--ink);margin-top:5px;font-variant-numeric:tabular-nums}
  .kpi.kpi-hero .kpi-val{color:var(--accent)}
  .kpi .kpi-sub{font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;color:var(--muted);margin-top:3px;display:block}
  .kpi.kpi-hero .kpi-sub{color:rgba(255,255,255,.45)}
  /* THE PANEL GRID — 12 columns; panels span 4/6/8; auto-rows so panels pack tight (no endless column) */
  .dash-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;align-items:start;grid-auto-flow:row dense}
  .dash-grid>.card{margin:0}
  .span-4{grid-column:span 4}
  .span-5{grid-column:span 5}
  .span-6{grid-column:span 6}
  .span-7{grid-column:span 7}
  .span-8{grid-column:span 8}
  .span-12{grid-column:span 12}
  /* dense panels: cap inner scroll so a long list never stretches the whole board */
  .panel-scroll{max-height:230px;overflow:auto}
  /* ===== HUB VIEWS — real tab filtering (one focused view at a time) ===== */
  .hub-view{display:none}
  .hub-view.on{display:block;animation:hubFade .18s ease}
  @keyframes hubFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
  .action-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px}
  .action-bar #advance{margin-left:auto}
  .perf-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:14px}
  @media(max-width:880px){.perf-grid{grid-template-columns:1fr}}
  .linkbtn{background:none;border:none;color:var(--accent);font:600 12px/1 inherit;cursor:pointer;padding:4px 2px;text-transform:uppercase;letter-spacing:.04em}
  .linkbtn:hover{text-decoration:underline}
  /* NBO opportunity type chips */
  .opp-chip{display:inline-block;font:800 9px/1 var(--mono,monospace);letter-spacing:.08em;padding:3px 6px;border-radius:3px;margin-right:7px;vertical-align:middle;color:#fff}
  .opp-chip.opp-pitch{background:#b91c1c}
  .opp-chip.opp-rfp{background:#0b4a8f}
  .opp-chip.opp-rfi{background:#6b7f98}
  .opp-chip.opp-client{background:#15803d}
  /* HR / visa / staff condition */
  .visa-flag{display:inline-block;font:800 8px/1 var(--mono,monospace);letter-spacing:.06em;padding:2px 5px;border-radius:3px;background:rgba(var(--glow),.18);color:var(--accent);vertical-align:middle}
  .visa-note{font-size:11px;color:#b45309;background:rgba(var(--glow),.08);border-left:1px solid var(--lg-hair-neutral,rgba(128,132,140,.2));padding:5px 8px;border-radius:3px;margin:6px 0}
  .staff-meters{font-size:11px;color:var(--muted);margin-top:3px;letter-spacing:.02em}
  .staff-meters i,.sf-form i{font-style:normal;font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.1em;opacity:.62;margin-right:1px}
  .hr-flag{font-size:11px;padding:4px 8px;border-radius:3px;margin:4px 0;border-left:3px solid}
  .hr-flag.warn{background:rgba(var(--glow),.08);border-color:var(--accent);color:#b45309}
  .hr-flag.bad{background:rgba(220,38,38,.08);border-color:#dc2626;color:#b91c1c}
  .hr-flag.good,p.good{color:#15803d}
  /* ===== FLOOR LIVE — video backdrop + MS-Teams-style activity feed ===== */
  .floor-live{position:relative;border-radius:8px;overflow:hidden;min-height:380px;background:#0a0f17;box-shadow:0 22px 54px rgba(0,0,0,.35)}
  .floor-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  /* ── FLOOR CAMS — the camera wall: CCTV meeting rooms + fake Teams calls, fed by real game state ── */
  .floorcams{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
  .floorcams.cams-4{grid-template-columns:repeat(4,1fr)}
  .fc-tile{position:relative;aspect-ratio:16/9;max-height:150px;border-radius:9px;overflow:hidden;background:#070b12;
    border:1px solid rgba(10,20,35,.3);box-shadow:0 10px 26px rgba(8,16,28,.28);margin:0;width:100%}
  .floorcams.cams-4 .fc-tile{max-height:200px}
  .fc-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  /* CCTV: security-camera grade + scanlines + REC chrome */
  .fc-tile.cctv .fc-vid{filter:grayscale(.5) contrast(1.14) brightness(.9) saturate(.85)}
  .fc-scan{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;
    background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px)}
  .fc-cctv-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:8px;padding:6px 9px;margin:0;
    font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:.12em;color:#e8f0fc;flex-wrap:nowrap;
    background:linear-gradient(180deg,rgba(4,8,14,.74),transparent)}
  .fc-cctv-top span{white-space:nowrap}
  .fc-cctv-top span:nth-child(2){overflow:hidden;text-overflow:ellipsis;min-width:0}
  .fc-ts{flex:none}
  .fc-rec{color:#ff5c49;animation:fcblink 1.6s steps(1) infinite}
  @keyframes fcblink{50%{opacity:.25}}
  .fc-ts{margin-left:auto;color:rgba(232,240,252,.75)}
  .fc-note{position:absolute;left:8px;bottom:7px;font-family:var(--mono);font-size:9px;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;color:#dfe9f7;background:rgba(5,10,18,.62);
    padding:3px 7px;border-radius:4px;backdrop-filter:blur(3px);max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fc-note.hot{color:#ffd2c9;background:rgba(120,26,10,.74)}
  /* Teams-call chrome: meeting bar + live dot + duration + participant plates */
  .fc-bar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:7px;padding:6px 9px;margin:0;
    background:linear-gradient(180deg,rgba(6,10,17,.84),rgba(6,10,17,.25) 78%,transparent);
    font-size:10.5px;font-weight:700;color:#eef4fd}
  .fc-live{width:7px;height:7px;border-radius:50%;background:#3fd68f;box-shadow:0 0 8px rgba(63,214,143,.8);flex:none}
  .fc-tile.urgent .fc-live{background:#ff5c49;box-shadow:0 0 8px rgba(255,92,73,.9)}
  .fc-tile.urgent .fc-title{color:#ffb3a7}
  .fc-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fc-len{margin-left:auto;font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:.1em;color:rgba(238,244,253,.7)}
  .fc-people{position:absolute;left:7px;right:7px;bottom:7px;display:flex;gap:5px;flex-wrap:wrap}
  .fc-chip{font-size:9.5px;font-weight:700;color:#e6eefb;background:rgba(9,15,25,.68);border:1px solid rgba(255,255,255,.14);
    border-radius:5px;padding:3px 7px;backdrop-filter:blur(3px);white-space:nowrap;max-width:46%;overflow:hidden;text-overflow:ellipsis}
  .fc-chip.speaking{border-color:#3fd68f;box-shadow:0 0 0 1px rgba(63,214,143,.5)}
  @media (max-width:860px){
    .floorcams{grid-template-columns:1fr 1fr}
    .floorcams.cams-3 .fc-tile:nth-child(n+3){display:none}
  }
  @media (prefers-reduced-motion: reduce){ .fc-vid{display:none} .fc-rec{animation:none} }
  /* synthetic call grid (faux Teams) + war-room board — handcrafted, zero found footage */
  .fc-call{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:26px 6px 6px;background:#0b1220}
  .fc-cell{position:relative;border-radius:6px;background:#131c2c;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:0}
  .fc-cell.spk{box-shadow:inset 0 0 0 2px #3fd68f}
  .fc-cell:nth-child(2){animation:fcspk 9s steps(1) infinite}
  @keyframes fcspk{0%,60%{box-shadow:none}60.1%,90%{box-shadow:inset 0 0 0 2px #3fd68f}}
  .fc-init{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    color:#eaf1fb;font:800 12px var(--mono);letter-spacing:.02em}
  .fc-plate{position:absolute;left:4px;bottom:4px;display:flex;align-items:center;gap:4px;font-size:8.5px;font-weight:700;
    color:#dfe9f7;background:rgba(5,9,16,.7);padding:2px 6px;border-radius:4px;max-width:calc(100% - 8px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .fc-plate svg{width:9px;height:9px;color:#ff8a75;flex:none}
  .fc-board{position:absolute;inset:0;background:linear-gradient(160deg,#101826,#0a111d);padding:32px 14px 26px;display:flex;flex-direction:column;gap:8px}
  .fc-board-k{font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.2em;color:#8fa1ba}
  .fc-board-l{height:7px;border-radius:4px;background:rgba(255,255,255,.14)}
  .fc-board-l.hot{background:rgba(var(--glow),.55)}
  .fc-stamp{position:absolute;right:10px;top:30px;transform:rotate(-8deg);font-family:var(--mono);font-size:11px;font-weight:800;
    letter-spacing:.14em;color:#ff5c49;border:2px solid #ff5c49;padding:3px 8px;border-radius:3px}
  /* topbar taste pass: unified icon-button system, demoted destructive action */
  /* SYSTEM_V2: topbar utilities are NAVIGATION → pill treatment (rect is reserved for actions). */
  .topbar .tb-btn{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 14px;border:1px solid rgba(11,28,48,.22);
    background:rgba(255,255,255,.55);border-radius:999px;font-family:var(--mono);font-size:10px;font-weight:800;
    letter-spacing:.12em;text-transform:uppercase;color:var(--ink);cursor:pointer;transition:border-color .15s,color .15s}
  .topbar .tb-btn svg{width:14px;height:14px;flex:none}
  .topbar .tb-btn:hover{border-color:var(--accent);color:var(--accent)}
  .topbar .tb-ico{width:32px;padding:0;justify-content:center}
  .topbar .tb-danger{opacity:.45}
  .topbar .tb-danger:hover{opacity:1;border-color:#c2402a;color:#c2402a}
  /* ── ITEM 1 · the ⋯ overflow control (hidden on desktop; shown ≤760px) + its menu ── */
  /* ── MOBILE SWEEP (CEO-92, 2026-08-02) — measured at 390 and 430 on a touch context ───────────
     Two real defects, both found by probing rather than by eye:
       LEGIBILITY — the topbar stat labels render at 7px and a run of squad-card labels at 8-8.5px.
         Uppercase mono below ~9.5px is not readable on a phone held at arm's length, and UX_RULES
         legibility does not have a "but it is only a label" exemption.
       TOUCH TARGETS — the overflow button is 30px wide and the next-move CTA 28px tall. Both are
         under the 44px minimum, and the overflow button is the ONE control that reaches every
         utility once the bar collapses, so it is the worst possible thing to make hard to hit.
     Scoped to <=480 so nothing about the desktop composition moves. */
  @media(max-width:480px){
    .topbar .stat span{font-size:11px !important;letter-spacing:.07em}
    .sq-ovr em,.sq-plate .sq-disc,.sq-trait .sq-tk,.sq-tags .sq-tag,.pnc-eye,#pn-nextmove .nm-k{
      font-size:11px !important;letter-spacing:.06em}
    .topbar .tb-more{min-width:44px}
    #pn-nextmove .nm-go{min-height:44px;padding-top:8px;padding-bottom:8px}
    /* the window close dots are 12px of paint — give them a 44px invisible hit area, no visual change */
    .lg-dot,.mac-tb-dot{position:relative}
    /* ⛔ QA 2026-08-11 (#4): the 44px halo was given to EVERY dot, so the amber span (no handler,
       later in the DOM) won the hit-test over the red close's halo — the visible close control
       was dead to real taps. The halo belongs only to dots that DO something, they stack above
       their decorative siblings, and the decorative ones stop intercepting entirely. */
    span.mac-tb-dot,span.lg-dot{pointer-events:none}
    button.lg-dot,.mac-tb-dot[data-mac-close],.mac-tb-dot.red{z-index:2;pointer-events:auto}
    button.lg-dot::after,.mac-tb-dot[data-mac-close]::after,.mac-tb-dot.red::after{content:"";position:absolute;left:50%;top:50%;
      width:44px;height:44px;transform:translate(-50%,-50%)}
  }
  .topbar .tb-more{display:none}
  /* CEO-70: content-driven collapse. Same set the <=760 rule folds away, but triggered by the row
     actually not fitting rather than by a guessed viewport width. Every one of these already has a
     working proxy row inside #tbOverflow, so nothing becomes unreachable. */
  .topbar.is-tight #storeBtn,.topbar.is-tight #cfoBtn,.topbar.is-tight #cooBtn,
  .topbar.is-tight #feedBtn,.topbar.is-tight #pnlLeagueBtn,
  .topbar.is-tight #helpBtn,.topbar.is-tight #resetBtn,.topbar.is-tight #account{display:none !important}
  .topbar.is-tight .tb-more{display:inline-flex !important;flex:none}
  body.tb-tight #tbOverflow [data-tbproxy="storeBtn"],
  body.tb-tight #tbOverflow [data-tbproxy="cfoBtn"],
  body.tb-tight #tbOverflow [data-tbproxy="cooBtn"],
  body.tb-tight #tbOverflow [data-tbproxy="feedBtn"],
  body.tb-tight #tbOverflow [data-pnl-of]{display:flex !important}
  .topbar .tb-more[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}
  .tb-overflow{position:fixed;top:56px;right:12px;z-index:10075;display:flex;flex-direction:column;gap:2px;
    min-width:236px;max-width:calc(100vw - 24px);padding:8px;border-radius:14px;
    background:rgba(13,19,31,.94);backdrop-filter:blur(26px) saturate(165%);-webkit-backdrop-filter:blur(26px) saturate(165%);
    border:1px solid rgba(255,255,255,.15);box-shadow:0 26px 64px rgba(0,0,0,.55);
    animation:tbOfIn .16s cubic-bezier(.2,.85,.3,1) both}
  .tb-overflow.hidden{display:none}
  @keyframes tbOfIn{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
  .tb-overflow button{display:flex;align-items:center;gap:12px;width:100%;padding:11px 13px;
    background:transparent;border:0;border-radius:9px;cursor:pointer;text-align:left;
    font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#eaf1fb}
  .tb-overflow button svg{width:16px;height:16px;flex:none;color:var(--accent);stroke:currentColor}
  .tb-overflow button:hover,.tb-overflow button:focus-visible{background:rgba(255,255,255,.09);outline:none}
  .tb-overflow .tb-of-danger{color:#ff8a72}
  .tb-overflow .tb-of-danger svg{color:#ff8a72}
  .tb-overflow .tb-of-danger:hover{background:rgba(255,92,73,.15)}
  @media(prefers-reduced-motion:reduce){ .tb-overflow{animation:none} }
  /* light themes → porcelain-glass overflow, dark ink (AA both ways) */
  body.mvc-light .tb-overflow{background:rgba(250,250,252,.95);border-color:rgba(11,28,48,.16);box-shadow:0 26px 64px rgba(40,28,14,.26)}
  body.mvc-light .tb-overflow button{color:#161d29}
  body.mvc-light .tb-overflow .tb-of-danger{color:#c2402a}
  body.mvc-light .tb-overflow .tb-of-danger svg{color:#c2402a}
  #account button{height:32px;border-radius:8px;font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
  .acc-chip{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;
    background:var(--ink);color:#fff;font:800 11px var(--mono);cursor:default}
  .hub-tab .ht-ico svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
  /* the LIVE FEED status terminal */
  .fr-status{border-bottom:1px solid rgba(255,255,255,.1);padding:10px 12px;display:flex;flex-direction:column;gap:5px;background:rgba(0,0,0,.25)}
  .fs-line{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.07em;color:#9fe8bf;line-height:1.5}
  .fs-street{color:#ffb86b}
  .fs-tip{color:#8fa1ba}
  .fs-cursor{font-style:normal;animation:fcblink 1.2s steps(1) infinite;margin-left:3px}
  #fsGotit{background:none;border:1px solid rgba(255,255,255,.25);color:#cfe0f5;font:800 8px var(--mono);
    letter-spacing:.12em;padding:2px 7px;border-radius:4px;cursor:pointer;margin-left:6px}
  #fsGotit:hover{border-color:var(--accent);color:var(--accent)}
  .floor-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,13,20,.82) 0%,rgba(8,13,20,.45) 42%,rgba(8,13,20,.15) 100%);transition:background .6s ease}
  /* WORN OFFICE → the floor cam is re-graded to the office's ambient (CEO 2026-07-21 — the office must
     VISIBLY repaint the floor/boardroom, not just the hidden #penthouse-bg). Each office throws its own
     colour of light across the same live footage: Midnight Neon=violet, Loft=warm amber, Cannes=azure-
     gold, Penthouse=gold, Skyline=teal. The left column stays dark enough for the white crew chatter (AA). */
  body[data-office="midnight"] .floor-scrim{background:linear-gradient(90deg,rgba(22,10,42,.86) 0%,rgba(58,26,104,.5) 44%,rgba(120,70,200,.22) 100%)}
  body[data-office="loft"] .floor-scrim{background:linear-gradient(90deg,rgba(26,16,8,.86) 0%,rgba(74,46,22,.5) 44%,rgba(176,112,50,.22) 100%)}
  body[data-office="cannes"] .floor-scrim{background:linear-gradient(90deg,rgba(7,20,38,.86) 0%,rgba(16,58,106,.5) 42%,rgba(202,165,58,.24) 100%)}
  body[data-office="penthouse"] .floor-scrim{background:linear-gradient(90deg,rgba(26,20,6,.86) 0%,rgba(78,60,16,.5) 44%,rgba(255,210,63,.2) 100%)}
  body[data-office="skyline"] .floor-scrim{background:linear-gradient(90deg,rgba(6,18,32,.86) 0%,rgba(16,50,82,.5) 44%,rgba(74,214,196,.22) 100%)}
  /* a per-office key-light bloom in the top-right corner of the cam adds the extra ambient tell */
  .floor-live::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;transition:opacity .6s ease;
    background:radial-gradient(80% 70% at 100% 0%, var(--office-bloom,transparent) 0%, transparent 60%)}
  body[data-office="midnight"] .floor-live::after,body[data-office="loft"] .floor-live::after,
  body[data-office="cannes"] .floor-live::after,body[data-office="penthouse"] .floor-live::after,
  body[data-office="skyline"] .floor-live::after{opacity:1}
  body[data-office="midnight"] .floor-live{--office-bloom:rgba(150,90,240,.32)}
  body[data-office="loft"] .floor-live{--office-bloom:rgba(210,140,60,.3)}
  body[data-office="cannes"] .floor-live{--office-bloom:rgba(90,170,255,.3)}
  body[data-office="penthouse"] .floor-live{--office-bloom:rgba(255,214,110,.3)}
  body[data-office="skyline"] .floor-live{--office-bloom:rgba(90,224,208,.3)}
  /* the crew-chatter overlay sits above the bloom so text stays crisp */
  .floor-overlay{z-index:2}
  .floor-overlay{position:relative;display:flex;flex-direction:column;height:100%;min-height:380px;padding:18px 20px}
  .floor-top h2{text-shadow:0 4px 20px rgba(0,0,0,.6)}
  .floor-teams{margin-top:auto;width:min(440px,100%);background:rgba(12,18,28,.72);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:12px 12px 8px}
  .ft-head{display:flex;align-items:center;gap:7px;color:#dfeaf7;font:700 11px/1 var(--mono,monospace);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
  .ft-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e}
  .ft-feed{display:flex;flex-direction:column;gap:7px;max-height:230px;overflow:auto}
  .tmsg{display:flex;gap:8px;align-items:flex-start}
  .tmsg .tav{flex:none;width:26px;height:26px;border-radius:50%;background:#2b3a52;color:#cfe0f5;font:700 10px/26px system-ui;text-align:center}
  .tmsg.me .tav{background:var(--accent);color:#0a0d12}
  .tmsg .tbub{background:rgba(255,255,255,.07);color:#eaf1fb;font-size:12px;line-height:1.35;padding:7px 10px;border-radius:9px;border-top-left-radius:2px}
  .tmsg.me .tbub{background:rgba(var(--glow),.18)}
  .tmsg .tact{margin-right:3px}
  /* ===== SIDE-LOCKED LIVE FEED RAIL — an in-flow column; collapses to a thin strip ===== */
  .feed-rail{flex:none;width:300px;align-self:stretch;position:relative;display:flex;overflow:hidden;
    background:linear-gradient(180deg,#0c1622,#0a1019);border:1px solid rgba(255,255,255,.10);border-radius:12px;
    box-shadow:0 18px 50px rgba(0,0,0,.35);transition:width .22s ease}
  .feed-rail.closed{width:42px}
  .feed-rail .fr-tab{position:absolute;left:0;top:0;width:42px;height:100%;border:none;cursor:pointer;z-index:2;
    background:transparent;color:#cfe0f5;display:none;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;padding-top:16px}
  .feed-rail.closed .fr-tab{display:flex}
  .feed-rail.closed .fr-panel{opacity:0;pointer-events:none}
  .feed-rail .fr-tab-lbl{writing-mode:vertical-rl;transform:rotate(180deg);font:700 9px/1 var(--mono,monospace);letter-spacing:.2em}
  .fr-dot{width:9px;height:9px;border-radius:50%;background:#3a4a60;flex:none}
  .feed-rail.alert .fr-dot{background:var(--accent);box-shadow:0 0 9px var(--accent);animation:frBlink 1.1s ease-in-out infinite}
  @keyframes frBlink{0%,100%{opacity:1}50%{opacity:.25}}
  .fr-panel{flex:1;display:flex;flex-direction:column;min-width:0;transition:opacity .18s}
  .fr-head{display:flex;align-items:center;gap:7px;padding:12px 14px;color:#dfeaf7;font:700 11px/1 var(--mono,monospace);
    letter-spacing:.14em;border-bottom:1px solid rgba(255,255,255,.08)}
  .fr-x{margin-left:auto;background:none;border:none;color:#7f93ad;font-size:16px;cursor:pointer;line-height:1}
  .fr-list{flex:1;overflow:auto;padding:6px 0}
  .fr-item{font-size:12px;line-height:1.4;color:#cdd9e8;padding:8px 14px;border-bottom:1px solid rgba(255,255,255,.05)}
  .fr-item:first-child{background:rgba(var(--glow),.07)}
  @media(max-width:760px){
    .feed-rail{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;height:46vh;border-radius:12px 12px 0 0;z-index:30;transition:transform .22s ease}
    .feed-rail.closed{width:auto;height:46vh;transform:translateY(calc(100% - 40px))}
    .feed-rail.closed .fr-panel{opacity:1;pointer-events:auto}
    .feed-rail .fr-tab{display:none}}
  /* client relationship */
  .mini-cta{background:rgba(var(--glow),.12);border:1px solid rgba(var(--glow),.4);color:var(--accent);
    font:600 11px/1 inherit;padding:6px 10px;border-radius:5px;cursor:pointer}
  .mini-cta:hover{background:var(--accent);color:#0a0d12}
  .mini-cta.done{background:rgba(74,222,128,.1);border-color:rgba(74,222,128,.4);color:#16a34a;cursor:default}
  .client-risk{border-left:3px solid #dc2626 !important}
  /* nav tab blink-on-alert */
  .hub-tab.alert{position:relative}
  .hub-tab.alert::after{content:"";position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;
    background:var(--accent);box-shadow:0 0 8px var(--accent);animation:frBlink 1.1s ease-in-out infinite}
  /* ===== DEVELOPER TASK BOARD ===== */
  .dev-top{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:10px 0 14px}
  .dev-prog{flex:1;min-width:220px;display:flex;align-items:center;gap:10px}
  .dev-prog-bar{flex:1;height:10px;border-radius:5px;background:rgba(11,28,48,.12);overflow:hidden}
  body[data-view="office"] .dev-prog-bar{background:rgba(255,255,255,.1)}
  .dev-prog-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#ffb066)}
  .dev-prog-lbl{font:700 12px/1 var(--mono,monospace);color:var(--accent)}
  .dev-legend{display:flex;gap:14px;font-size:12px;color:var(--muted)}
  .dev-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  @media(max-width:820px){.dev-cols{grid-template-columns:1fr}}
  .dev-col{border:1px solid var(--line);border-radius:9px;padding:10px 12px;background:rgba(255,255,255,.35)}
  body[data-view="office"] .dev-col{background:rgba(10,20,35,.4);border-color:rgba(255,255,255,.08)}
  .dev-col-h{font:700 12px/1 var(--mono,monospace);letter-spacing:.08em;text-transform:uppercase;padding:4px 2px 10px;border-bottom:1px solid var(--line);margin-bottom:8px}
  .dev-col-h b{float:right;color:var(--accent)}
  .dev-done{border-top:3px solid #16a34a}.dev-wip{border-top:3px solid var(--accent)}.dev-todo{border-top:3px solid #6b7f98}
  .dev-grp{font:700 9px/1 var(--mono,monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--accent2,#b45309);margin:10px 0 4px;opacity:.8}
  .dev-item{font-size:12.5px;line-height:1.4;padding:5px 0 5px 14px;position:relative;color:var(--ink)}
  body[data-view="office"] .dev-item{color:var(--d-text)}
  .dev-item::before{content:"";position:absolute;left:2px;top:9px;width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.5}
  .dev-done .dev-item{opacity:.72}
  /* Dev tab: owner-only. Hidden for everyone; revealed only when the signed-in account is the owner (body.pn-owner, set from account.js PN_OWNER). */
  .hub-tab-dev{margin-left:6px;opacity:.85;display:none !important}
  body.pn-owner .hub-tab-dev{display:inline-flex !important}
  /* OWNER-ONLY DEV PIN — a separate pinned tab, not part of the player nav. Fixed to the left edge, vertical. */
  .dev-pin{display:none;position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:60;
    flex-direction:column;align-items:center;gap:5px;padding:11px 7px;cursor:pointer;
    background:linear-gradient(180deg,#141b2b,#0c111b);color:#9fb0c8;
    border:1px solid rgba(var(--glow),.4);border-left:0;border-radius:0 12px 12px 0;
    box-shadow:0 10px 30px rgba(0,0,0,.4);transition:color .15s,background .15s,padding .15s}
  body.pn-owner .dev-pin{display:flex}
  .dev-pin:hover{color:#fff;background:linear-gradient(180deg,#1b2540,#101626);padding-right:12px}
  .dev-pin-ico svg{width:18px;height:18px;display:block}
  .dev-pin-lbl{font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:.16em;writing-mode:vertical-rl;text-orientation:mixed}
  .dev-pin::before{content:"";position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--accent,var(--accent));box-shadow:0 0 8px var(--accent,var(--accent))}
  @media(max-width:720px){ .dev-pin{top:auto;bottom:74px;padding:8px 6px} .dev-pin-lbl{writing-mode:horizontal-tb} }
  /* Group tab: gated. Hidden until the player is "Group-ready" (can found a holdco or already has one) — body.pn-groupready, set in render(). Mirrors the owner-only Dev-tab pattern. */
  .hub-tab-group{display:none !important}
  body.pn-groupready .hub-tab-group{display:inline-flex !important}
  .dash-grid .card{padding:18px 20px}
  .dash-grid .card.shard.shard-1,.dash-grid .card.shard.shard-2{padding-left:24px;padding-right:24px}
  .dash-grid h2{font-size:clamp(30px,3.4vw,44px);margin:0 0 10px;padding-bottom:7px}
  @media (max-width:1024px){
    .span-4,.span-5,.span-6,.span-7,.span-8{grid-column:span 12}
  }
  .pill{display:inline-block;padding:2px 10px;border-radius:999px;border:1px solid var(--line-2);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
  .pill.warn{color:#fff;background:var(--primary);border-color:var(--primary)}
  .pill.bad{color:#fff;background:var(--bad);border-color:var(--bad)}
  .pill.good{color:#fff;background:var(--good);border-color:var(--good)}
  .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  .right{margin-left:auto}
  /* isometric office — moody "monitor" inset within the bright suite */
  .office{position:relative;height:300px;background:radial-gradient(120% 120% at 50% 0%,#1b2230,#0c0f15);border:1px solid var(--line-2);border-radius:10px;overflow:hidden;box-shadow:inset 0 0 60px rgba(0,0,0,.4)}
  body[data-office="midnight"] .office{background:radial-gradient(120% 120% at 50% 0%,#2a1040,#0c0a18)}
  body[data-office="penthouse"] .office{background:radial-gradient(120% 120% at 50% 0%,#2e2712,#16120a)}
  body[data-office="skyline"] .office{background:linear-gradient(180deg,#10243f 0%,#1a3a5c 55%,#0c1422 100%)}
  body[data-office="loft"] .office{background:linear-gradient(180deg,#2a2420,#15110d)}
  body[data-office="cannes"] .office{background:linear-gradient(180deg,#0d3b66 0%,#1b6ca8 55%,#caa53a 130%)}
  .floor{position:absolute;inset:0;transform:perspective(800px) rotateX(52deg) scale(.9);transform-origin:50% 30%;background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);background-size:48px 48px;opacity:.6}
  .desk{position:absolute;width:64px;height:40px;background:var(--desk);border-radius:6px;box-shadow:0 8px 14px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;font-size:22px;transition:transform .2s}
  .desk:hover{transform:translateY(-4px)}
  .desk .who{position:absolute;top:-30px;font-size:18px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.5));animation:bob 3.5s ease-in-out infinite}
  .desk .bub{position:absolute;top:-54px;font-size:13px;background:rgba(10,18,30,.92);color:#e8eaf0;border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:1px 6px;white-space:nowrap;animation:bub 4s ease-in-out infinite}
  @keyframes bub{0%,100%{transform:translateY(0);opacity:.8}50%{transform:translateY(-3px);opacity:1}}
  .desk.off{filter:saturate(.55) brightness(.82)}
  .desk .tag{position:absolute;bottom:-16px;font-size:9px;color:#aebbcd;white-space:nowrap}
  .desk.busy{outline:2px solid var(--primary)}
  .desk.tired{filter:saturate(.5) brightness(.8)}
  /* ===== STITCH v2 components: dossier cards · numbered RFI rows · team strip ===== */
  /* TALENT DOSSIER — grayscale-photo + VETTED/ON-CALL tag + skill dots (THE PRODIGY / THE STRATEGIST) */
  /* TALENT/CLIENT DOSSIER — a light "paper dossier" deliberately contrasting the dark floor (Type A Talks:
     gritty photo under a clean system). Internal text is LOCKED dark so it stays legible on the paper. */
  .dossier-card{position:relative;border:1px solid rgba(0,0,0,.14);border-radius:3px;padding:14px;margin:8px 0;
    background:linear-gradient(135deg,#f6f6f3 0%,#e9e9e4 100%);color:#16110d;
    transform:rotate(-.5deg);transition:transform .15s,box-shadow .15s;box-shadow:0 10px 26px rgba(0,0,0,.4)}
  .dossier-card,.dossier-card .doss-name,.dossier-card .muted,.dossier-card .small{color:#16110d}
  .dossier-card .muted{color:#5a5147}
  .dossier-card .doss-role{color:rgba(22,17,13,.6)}
  .dossier-card button{background:#16110d;color:#f6f6f3;border-color:#16110d}
  .dossier-card button:hover{background:var(--accent);color:#0a0d12;border-color:var(--accent)}
  .dossier-card .endorse{color:#7a6f63}
  .dossier-card .endorse:hover{color:var(--bad)}
  .dossier-card:nth-child(even){transform:rotate(.6deg)}
  .dossier-card:hover{transform:rotate(0);box-shadow:0 16px 34px rgba(0,0,0,.5)}
  .dossier-card .doss-row{display:flex;gap:14px;align-items:flex-start}
  .dossier-card .doss-photo{width:54px;height:64px;flex:none;border-radius:1px;overflow:hidden;
    background:#1b2230;display:flex;align-items:center;justify-content:center;font-size:30px;
    filter:grayscale(1) contrast(1.2);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
  .dossier-card .doss-name{font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.03em;font-size:17px;line-height:1}
  .dossier-card .doss-role{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;opacity:.6;margin-top:3px}
  .doss-tag{font-size:8.5px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;white-space:nowrap}
  .doss-tag.vetted{background:var(--accent-yellow);color:#0b1c30}
  .doss-tag.oncall{border:1px solid var(--charcoal);color:var(--charcoal)}
  .doss-dots{display:flex;gap:5px;margin-top:9px}
  .doss-dots i{width:8px;height:8px;border-radius:999px;background:rgba(11,28,48,.12);display:block}
  .doss-dots i.on{background:var(--primary)}
  /* POACH_OPS — dossier collage candidates (talent pool), compact horizontal format */
  .poach-card{position:relative;border:2px solid #0b1c30;background:#f8f9ff;margin:0 0 10px;padding:14px;box-shadow:6px 6px 0 rgba(11,28,48,.12);transition:box-shadow .12s,transform .12s}
  .poach-card:nth-child(odd){transform:rotate(.4deg)}
  .poach-card:nth-child(even){transform:rotate(-.4deg)}
  .poach-card:hover{transform:rotate(0)!important;box-shadow:8px 8px 0 var(--accent)}
  .poach-id-badge{position:absolute;top:7px;right:-4px;z-index:10;font-family:var(--mono),monospace;font-size:8px;font-weight:900;text-transform:uppercase;background:var(--accent);color:#fff;padding:2px 8px;transform:rotate(3deg);pointer-events:none;white-space:nowrap;letter-spacing:.06em}
  .poach-row{display:flex;gap:12px;align-items:flex-start}
  .poach-photo{width:54px;height:68px;flex:none;overflow:hidden;position:relative;filter:grayscale(1) contrast(1.3) brightness(1.05)}
  .poach-photo .pi{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
  .poach-photo .ps{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;opacity:.18;pointer-events:none}
  .poach-photo .pv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;opacity:0;transition:opacity .2s;z-index:2;pointer-events:none}
  .poach-photo:hover .pv{opacity:1}
  .poach-photo .pv.pv-none{display:none}
  .poach-photo .pv-tag{position:absolute;left:2px;bottom:2px;z-index:3;font-family:var(--mono),monospace;font-size:6.5px;font-weight:900;letter-spacing:.06em;background:var(--accent);color:#fff;padding:1px 4px;opacity:0;transition:opacity .2s;pointer-events:none}
  .poach-photo:hover .pv-tag{opacity:1}
  .poach-body{flex:1;min-width:0}
  .poach-name{font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.03em;font-size:16px;line-height:1;color:#0b1c30}
  .poach-role{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#9d4300;margin:3px 0 6px}
  .poach-meta{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:rgba(11,28,48,.55);margin-bottom:8px}
  .poach-cta{font-family:var(--mono),monospace;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.15em;background:#0b1c30;color:#f8f9ff;border:2px solid #0b1c30;padding:6px 10px;cursor:pointer;transition:background .12s,color .12s}
  .poach-cta:hover{background:var(--accent);color:#0b1c30;border-color:var(--accent)}
  /* VAULT store screen */
  .store-group{margin:0 0 22px}
  .store-cosmetics{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:8px;margin-top:10px}
  .store-item{border:2px solid rgba(11,28,48,.18);padding:12px;background:rgba(255,255,255,.5);position:relative;transition:border-color .15s}
  .store-item.equipped{border-color:var(--accent);border-width:3px}
  /* ── Power-Ups (functional store items) ── */
  .store-powerups{display:grid;grid-template-columns:repeat(auto-fill,minmax(264px,1fr));gap:10px}
  .powerup-item{display:flex;align-items:center;gap:11px;text-align:left}
  .powerup-item .pu-emoji{font-size:26px;flex:none;line-height:1}
  .powerup-item .pu-body{flex:1;min-width:0}
  .powerup-item .pu-kind{font-family:var(--mono),monospace;font-size:8px;font-weight:800;letter-spacing:.12em;color:var(--accent2);background:rgba(var(--glow),.14);padding:1px 5px;border-radius:2px;vertical-align:middle}
  .powerup-item .pu-desc{font-size:11px;color:var(--muted);line-height:1.32;margin-top:3px}
  .powerup-item .store-cta{flex:none;align-self:center;width:auto;min-width:84px;margin-top:0;white-space:nowrap;padding:7px 12px}
  /* dashboard inventory strip — use your consumables in the moment */
  .powerstrip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;padding:8px 11px;
    background:rgba(var(--glow),.08);border:1px dashed rgba(var(--glow),.38);border-radius:4px}
  .powerstrip .ps-lbl{font-family:var(--mono),monospace;font-size:9px;font-weight:800;letter-spacing:.16em;color:var(--accent);text-transform:uppercase}
  .powerstrip .ps-item{font-size:12px;font-weight:700;color:var(--ink);background:#fff;border:1px solid rgba(11,28,48,.2);
    border-radius:3px;padding:5px 10px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
  .powerstrip .ps-item:hover{border-color:var(--accent)}
  .powerstrip .ps-item .ps-use{font-family:var(--mono),monospace;font-size:8px;font-weight:800;letter-spacing:.1em;color:#fff;background:var(--accent);padding:2px 6px;border-radius:2px}
  .powerstrip .ps-perk{font-size:11px;font-weight:600;color:var(--muted);background:rgba(11,28,48,.05);border-radius:3px;padding:5px 9px}
  .store-item-name{font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:6px;line-height:1.3}
  .store-swatch{display:block;width:100%;height:10px;margin-bottom:6px;border-radius:1px}
  .store-cta{width:100%;margin-top:8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
  .store-packs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
  .store-pack{border:2px solid #0b1c30;padding:14px;text-align:center;background:rgba(255,255,255,.6)}
  .store-pack-coins{font-size:20px;font-weight:900;line-height:1;margin-bottom:10px;font-style:italic}
  /* ═══ THE VAULT — exclusive department store. Espresso black, champagne-gold hairlines,
     letterspaced smallcaps, vitrine cards. Heavy !important use is deliberate: the office
     skin (body[data-view="office"]) styles cards/pills/eyebrows with !important. ═══ */
  .card.vault{background:linear-gradient(180deg,#111318 0%,#0b0d11 100%) !important;
    border:1px solid rgba(200,169,107,.38) !important;border-radius:2px;color:#ece7dc;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),0 30px 80px rgba(0,0,0,.5) !important;clip-path:none !important}
  .card.vault::before{display:none !important}
  .vault .pitch-bgstrip::before{background-image:radial-gradient(#c8a96b .5px,transparent 0);opacity:.05}
  .vault .pitch-bgstrip-bleed{color:#c8a96b;opacity:.04}
  .vault .tac-eyebrow{font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.34em;
    text-transform:uppercase;color:#c8a96b !important;opacity:.95}
  .vault-mast{text-align:center;margin:22px 0 8px}
  .vault-mast .vm-est{display:block;font:700 8.5px var(--mono),monospace;letter-spacing:.38em;text-indent:.38em;
    text-transform:uppercase;color:#8d8677;margin-bottom:12px}
  .vault-mast h2{margin:0;font-weight:300 !important;font-style:normal !important;letter-spacing:.4em;text-indent:.4em;
    text-transform:uppercase;font-size:clamp(26px,4.5vw,42px);color:#f4efe4 !important;line-height:1}
  .vault-mast h2 b{color:#c8a96b;font-weight:300}
  .vault-mast .vm-sub{display:block;font:600 9px var(--mono),monospace;letter-spacing:.26em;text-indent:.26em;
    text-transform:uppercase;color:#8d8677;margin-top:12px}
  .vault-lede{margin:14px auto 30px;text-align:center;max-width:66ch;color:#9a927f !important;font-size:11.5px;line-height:1.6}
  .vault-dept{display:flex;align-items:center;gap:16px;margin:4px 0 16px}
  .vault-dept i{flex:1;height:1px;display:block;background:linear-gradient(90deg,transparent,rgba(200,169,107,.45))}
  .vault-dept i:last-child{background:linear-gradient(90deg,rgba(200,169,107,.45),transparent)}
  .vault-dept span{font:700 9px var(--mono),monospace;letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;
    color:#c8a96b;white-space:nowrap}
  .vault-case{background:rgba(255,255,255,.015);border:1px solid rgba(200,169,107,.16);padding:20px 22px 22px;margin:0 0 28px}
  .vault .store-group{margin:0 0 28px;border:1px solid rgba(200,169,107,.16);background:rgba(255,255,255,.015);padding:20px 22px 22px}
  .vault .pill{border:1px solid rgba(200,169,107,.35) !important;color:#d9cba8 !important;
    background:rgba(200,169,107,.06) !important;border-radius:0;letter-spacing:.14em;padding:6px 12px}
  /* independent-critic fix (4/10 root cause): this legacy boutique skin was overriding the
     SYSTEM_V2 .pn-btn family on EVERY Vault/Pass CTA (radius 0, mono font, no fill on onyx,
     3.7:1 AA fail on platinum). Scoped to :not(.pn-btn) — the system owns its own buttons. */
  .vault button:not(.pn-btn):not([class*="pn-btn"]){background:transparent;border:1px solid rgba(200,169,107,.42);color:#d9cba8;
    font:700 10px var(--mono),monospace;letter-spacing:.18em;text-transform:uppercase;padding:9px 15px;
    border-radius:0 !important;box-shadow:none !important;clip-path:none !important;cursor:pointer;
    transition:background .15s,color .15s,border-color .15s}
  .vault button:not(.pn-btn):not([class*="pn-btn"]):hover{border-color:#c8a96b;background:#c8a96b;color:#141008}
  .vault button.primary:not(.pn-btn),.vault button.primary:not(.pn-btn):hover{background:#c8a96b !important;border-color:#c8a96b !important;color:#141008 !important}
  .vault button.primary:not(.pn-btn):hover{filter:brightness(1.09)}
  .vault button:not(.pn-btn):not([class*="pn-btn"]):disabled{opacity:.45;cursor:default;background:transparent;color:#d9cba8}
  .vault h3{font-weight:400 !important;font-style:normal !important;letter-spacing:.22em;text-transform:uppercase;
    font-size:13px;color:#ece7dc !important}
  .vault .muted{color:#9a927f !important}
  .vault .store-item{background:rgba(255,255,255,.02);border:1px solid rgba(200,169,107,.2);border-radius:0;padding:14px;transition:border-color .15s}
  .vault .store-item:hover{border-color:rgba(200,169,107,.55)}
  .vault .store-item.equipped{border:1px solid #c8a96b;box-shadow:inset 0 0 0 1px #c8a96b}
  .vault .store-item-name{color:#ece7dc;font-weight:600;font-size:10.5px;letter-spacing:.12em}
  .vault .store-swatch{height:8px;border-radius:0;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
  .vault .store-pack{background:rgba(255,255,255,.02);border:1px solid rgba(200,169,107,.25);border-radius:0}
  .vault .store-pack-coins{font-weight:300;font-style:normal;letter-spacing:.12em;color:#ece7dc;font-size:22px}
  .vault .pu-mark{width:34px;height:34px;flex:none;display:flex;align-items:center;justify-content:center;
    border:1px solid rgba(200,169,107,.42);color:#c8a96b;font:700 11px var(--mono),monospace;letter-spacing:.06em;font-style:normal}
  .vault .powerup-item .pu-kind{background:rgba(200,169,107,.12);color:#c8a96b;border-radius:0}
  .vault .powerup-item .pu-desc{color:#9a927f}
  .vault .col-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}

  /* ═══ VAULT visual richness — the customisation showroom needs to SHOW what you're buying,
     not just name it in a bordered box. Real photo previews, glowing colour tiles, foil plaques. ═══ */
  /* cosmetic cards (vertical preview+name+button) only — power-ups keep their own flex-row layout below */
  .vault .store-item:not(.powerup-item){background:rgba(255,255,255,.03);backdrop-filter:blur(6px);padding:0 0 12px;overflow:hidden;
    transition:transform .18s,border-color .15s}
  .vault .store-item:not(.powerup-item):hover{transform:translateY(-3px)}
  .vault .store-item:not(.powerup-item) .store-item-name{padding:0 12px;margin-top:10px}
  .vault .store-item:not(.powerup-item) .store-cta{margin:8px 12px 0;width:calc(100% - 24px)}
  .vault .powerup-item{padding:14px;transition:transform .18s,border-color .15s}
  .vault .powerup-item:hover{transform:translateY(-3px);border-color:rgba(200,169,107,.55)}
  .cs-swatch{height:56px;position:relative}
  .cs-office{height:82px;position:relative;background-size:cover;background-position:center}
  .cs-office-grad{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(11,9,6,.85) 100%)}
  .cs-avatar{height:82px;display:flex;align-items:center;justify-content:center;position:relative;
    background:radial-gradient(60% 60% at 50% 40%,rgba(200,169,107,.16),transparent 70%),
      linear-gradient(160deg,rgba(255,255,255,.04),rgba(0,0,0,.15))}
  .cs-avatar-emoji{font-size:34px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
  .cs-plaque{height:60px;display:flex;align-items:center;justify-content:center;text-align:center;padding:6px 10px;
    background:linear-gradient(160deg,rgba(200,169,107,.14),rgba(200,169,107,.03));
    font-family:var(--disp,'Bricolage Grotesque',serif);font-size:15px;color:#e9d9ae;letter-spacing:.02em;
    border-bottom:1px solid rgba(200,169,107,.18)}
  /* Power-ups: colour-coded glyph tile instead of a flat monogram box — consumables run cool (teal),
     permanent perks run gold, so the two kinds read apart at a glance */
  .vault .pu-mark{width:44px;height:44px;border-radius:0;border:1px solid rgba(200,169,107,.32);
    background:radial-gradient(70% 70% at 50% 35%,rgba(200,169,107,.16),transparent 75%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
  .vault .pu-mark svg{width:20px;height:20px;stroke:#e9d9ae;fill:none;stroke-width:1.6}
  .vault .powerup-item.is-perk .pu-mark{border-color:rgba(200,169,107,.55);background:radial-gradient(70% 70% at 50% 35%,rgba(200,169,107,.28),transparent 75%)}
  .vault .powerup-item.is-perk .pu-mark svg{stroke:#f4dfa0}
  .vault .powerup-item:not(.is-perk) .pu-mark{border-color:rgba(120,190,200,.4)}
  .vault .powerup-item:not(.is-perk) .pu-mark svg{stroke:#9fd8de}
  /* WahCoin bureau — gold-foil gradient cards with a coin-stack glyph, not a plain bordered box */
  .vault .store-pack{position:relative;padding:18px 14px 16px;overflow:hidden;
    background:linear-gradient(160deg,rgba(200,169,107,.1),rgba(255,255,255,.02));transition:transform .18s}
  .vault .store-pack:hover{transform:translateY(-3px);border-color:rgba(200,169,107,.55)}
  .vault .store-pack::before{content:"";position:absolute;top:-30%;right:-20%;width:70%;height:70%;border-radius:50%;
    background:radial-gradient(circle,rgba(200,169,107,.18),transparent 70%);pointer-events:none}
  .vault .pack-coin{width:26px;height:26px;margin:0 auto 8px;opacity:.85}
  .vault .pack-coin svg{width:100%;height:100%;stroke:#c8a96b;fill:none;stroke-width:1.4}
  .vault .col-card{border:1px solid rgba(200,169,107,.22);border-radius:0;padding:0;overflow:hidden;
    background:#0e1014;transition:border-color .18s,transform .18s}
  .vault .col-card:hover{border-color:rgba(200,169,107,.62);transform:translateY(-2px)}
  .vault .col-card.owned{opacity:.85}
  .vault .col-preview{border-radius:0;height:122px;margin:0;border:0;border-bottom:1px solid rgba(200,169,107,.18)}
  .vault .col-body{padding:14px 16px 16px}
  .vault .col-name{font-weight:400;font-style:normal;letter-spacing:.18em;font-size:11.5px;text-transform:uppercase;color:#ece7dc}
  .vault .col-swatch{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:9px;
    vertical-align:baseline;box-shadow:0 0 0 1px rgba(255,255,255,.22)}
  .vault .col-blurb{color:#b0a893}
  .vault .col-items{color:#7f7869}
  .vault .store-cta{letter-spacing:.16em}
  /* ---- SEASON PASS reward ladder ---- */
  .pass-row{display:flex;align-items:center;gap:8px;padding:6px 16px;border-bottom:1px solid var(--line)}
  .pass-row:last-child{border-bottom:none}
  .pass-lvl-badge{font-family:var(--mono);font-size:11px;letter-spacing:.18em;font-weight:700;color:var(--muted);min-width:24px;text-align:center}
  .pass-row-live .pass-lvl-badge{color:var(--accent)}
  .pass-track{display:flex;flex-direction:column;gap:1px;flex:1;min-width:80px}
  .pass-reward-val{font-size:13px;font-weight:700}
  /* NUMBERED RFI STREAM ROWS — high contrast, hover inverts to black, URGENT tag, budget right */
  .rfi-stream{display:flex;flex-direction:column}
  .rfi-row{position:relative;display:flex;align-items:center;gap:20px;padding:18px 16px;cursor:pointer;
    border-bottom:1px solid var(--line);transition:background .15s,color .15s;overflow:hidden}
  .rfi-row:hover{background:var(--ink);color:#fff}
  .rfi-row:hover .muted,.rfi-row:hover .rfi-sub{color:rgba(255,255,255,.72)}
  .rfi-row .rfi-no{font-weight:900;font-style:italic;font-size:42px;line-height:1;opacity:.18;flex:none;min-width:52px;font-variant-numeric:tabular-nums}
  .rfi-row:hover .rfi-no{opacity:.5;color:#fff}
  .rfi-row .rfi-body{flex:1;min-width:0}
  .rfi-row .rfi-title{font-weight:900;text-transform:uppercase;letter-spacing:-.03em;font-size:20px;line-height:1;display:flex;align-items:center;gap:10px}
  .rfi-row .rfi-sub{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;opacity:.6;margin-top:6px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rfi-row .rfi-budget{text-align:right;flex:none}
  .rfi-row .rfi-budget b{font-weight:900;font-size:20px;line-height:1;display:block;font-variant-numeric:tabular-nums;color:var(--primary)}
  .rfi-row:hover .rfi-budget b{color:var(--accent-yellow)}
  .rfi-row .rfi-budget span{font-size:8.5px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;opacity:.45}
  .rfi-urgent{background:var(--primary);color:#fff;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;transform:rotate(-3deg)}
  .rfi-conflict{background:var(--bad);color:#fff;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;padding:3px 8px}
  /* THE FLOOR — gritty team strip that REPLACES the emoji-laptop iso grid (dead per LOOK_DIRECTION) */
  .floorstrip{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
  .crew{position:relative;flex:1 1 130px;min-width:120px;min-height:92px;border:1px solid rgba(11,28,48,.12);border-radius:1px;
    background:linear-gradient(160deg,rgba(27,34,48,.96),rgba(12,15,21,.96));color:#e8eef6;padding:13px 13px 11px;overflow:hidden}
  .crew::after{content:"";position:absolute;inset:0;pointer-events:none;
    background-image:radial-gradient(#ffffff 9%,transparent 10%);background-size:6px 6px;opacity:.05}
  .crew .crew-top{display:flex;align-items:center;gap:8px;position:relative;z-index:1}
  .crew .crew-face{font-size:24px;filter:grayscale(.3) drop-shadow(0 2px 3px rgba(0,0,0,.5))}
  .crew .crew-name{font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.02em;font-size:12px;line-height:1.05}
  .crew .crew-role{font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:rgba(232,238,251,.5);margin-top:2px}
  .crew .crew-act{position:relative;z-index:1;font-size:10px;color:rgba(232,238,251,.78);margin-top:9px;line-height:1.3;min-height:26px}
  .crew.me{outline:2px solid var(--accent);outline-offset:-2px}
  .crew .crew-live{position:absolute;top:8px;right:8px;z-index:1;font-size:7.5px;font-weight:900;letter-spacing:.1em;color:var(--accent);text-transform:uppercase}
  /* slots — glass shards */
  .slots{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
  /* the 5 quality bars — the reading surface; high-contrast on light, charcoal top-rule = HUD module */
  .slot{position:relative;background:#fff;
    border:2px solid var(--ink);border-top:5px solid var(--accent);border-radius:0;
    padding:12px;min-height:130px;display:flex;flex-direction:column;box-shadow:6px 6px 0 rgba(11,28,48,.08)}
  .slot h4{margin:0 0 6px;font-family:var(--mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--ink)}
  .bar{height:8px;border-radius:0;background:rgba(11,28,48,.1);overflow:hidden;margin:6px 0;box-shadow:inset 0 0 0 1px rgba(11,28,48,.06)}
  .bar>i{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 55%,#000),var(--accent));width:0;transition:width .55s cubic-bezier(.22,1,.36,1);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 45%,transparent)}
  /* a slot that just took a contribution flashes — sized by the gain (warm = orange, cool = slate) */
  @keyframes slotwarm{0%{box-shadow:0 0 0 0 rgba(var(--glow),.0)}30%{box-shadow:0 0 0 3px rgba(var(--glow),.55),0 0 22px rgba(var(--glow),.35)}100%{box-shadow:0 0 0 0 rgba(var(--glow),0)}}
  @keyframes slotcool{0%{box-shadow:0 0 0 0 rgba(88,66,55,0)}30%{box-shadow:0 0 0 3px rgba(140,113,100,.5)}100%{box-shadow:0 0 0 0 rgba(140,113,100,0)}}
  .slot.land-warm{animation:slotwarm .9s ease-out}
  .slot.land-cool{animation:slotcool .9s ease-out}
  .contrib{font-size:11px;background:rgba(11,28,48,.04);border:1px solid var(--line);border-radius:2px;padding:5px 7px;margin-top:4px}
  .contrib .by{color:var(--primary);font-weight:800}
  .endorse{cursor:pointer;color:var(--muted);font-size:11px}
  .endorse:hover{color:var(--accent)}
  .toast{position:fixed;left:50%;bottom:86px;transform:translateX(-50%);background:linear-gradient(155deg,#161c28,#0c1017);color:#eef2f8;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);padding:14px 20px;border-radius:10px;box-shadow:0 22px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);max-width:540px;z-index:10002;animation:pop .22s ease-out}
  /* Jon: toasts were near-invisible tucked in the bottom corner — real alert presence,
     centered on the page, not a footnote */
  body[data-view="office"] .toast:not(.pn-wire),body[data-view="pitch"] .toast:not(.pn-wire){
    left:50% !important;bottom:auto !important;top:16% !important;transform:translateX(-50%) !important;
    background:var(--rust-card) !important;color:var(--rust-ink) !important;
    background-color:var(--mvc-bg) !important;                     /* solid floor — never translucent over type */
    border:1px solid var(--rust-border) !important;
    border-left:4px solid var(--accent,#f97316) !important;        /* the semantic spine carries the alert */
    border-radius:2px !important;
    clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
    box-shadow:0 24px 70px rgba(28,25,23,.35) !important;font-weight:600 !important;font-size:15px !important;
    line-height:1.5 !important;
    padding:16px 22px 15px !important;max-width:560px !important;
  }
  body[data-view="office"] .toast:not(.pn-wire) b,body[data-view="pitch"] .toast:not(.pn-wire) b{color:var(--rust) !important}
  @keyframes pop{from{opacity:0;transform:translateX(-50%) translateY(10px) scale(.97)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
  /* keep the hard INK offset cast shadow as the only shadow — no soft ambient drop fighting it */
  button.primary:not(:disabled){box-shadow:10px 10px 0 var(--ink)}
  button.primary:not(:disabled):hover{box-shadow:13px 13px 0 var(--ink)}
  .feedback{border-left:1px solid var(--lg-hair-neutral,rgba(128,132,140,.2));padding-left:12px;font-style:italic;color:var(--ink)}
  /* the toast sits on a dark (--ink) panel: feedback + muted text must read LIGHT there (the light "marked-up printout" lost-verdict skin overrides this back to dark) */
  .toast .feedback{color:#e8eef6}
  .toast .muted{color:#9fb0c4}
  .toast.verdict-lost .muted{color:#7a6a5a}
  /* ===== BIG MODAL — centred milestone dialog (welcome / promoted / agency / super-client) =====
     A real scrim-backed modal over the whole dashboard, not a floating toast. Legible by default. */
  .bigmodal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:24px;
    background:rgba(7,14,26,.74);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
  .bigmodal.hidden{display:none}
  /* P1 guard: a scrim that failed to paint (wiped content / stalled animation) must never eat clicks */
  .bigmodal:empty{display:none;pointer-events:none}
  @keyframes bmFade{from{opacity:0}to{opacity:1}}
  .bigmodal-card{position:relative;width:min(580px,100%);max-height:88vh;overflow:auto;
    background:linear-gradient(165deg,#16263f,#0a1320);color:#eef4fc;
    border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);
    border-radius:12px;padding:0;
    box-shadow:0 30px 90px rgba(0,0,0,.5);
    animation:bmPop .26s cubic-bezier(.2,.85,.3,1) both}
  @keyframes bmPop{from{transform:translateY(16px) scale(.97)}to{transform:none}}
  .bigmodal-card-body{padding:26px 34px 8px}
  .bigmodal-card b{color:#fff}
  .bigmodal-card .muted{color:#9fb4cc}
  .bigmodal-card .feedback{color:#eaf1fb}
  .bigmodal-card .pill{font-size:11px}
  .bigmodal-foot{display:flex;justify-content:flex-end;gap:10px;margin:24px 34px 24px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1)}
  .bigmodal-foot button.primary{min-width:180px}
  /* real Mac-Finder chrome instead of a heavy retro 3D drop-shadow card — Jon: "these popups still look shit" */
  .bigmodal-card .mac-titlebar{background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.1)}
  .bigmodal-card .mac-tb-title{color:#9fb4cc}
  /* welcome-back body */
  .bigmodal-card .wb-title{font-size:30px;font-weight:900;letter-spacing:-.01em;line-height:1.05;margin:14px 0 4px;color:#fff}
  .bigmodal-card .wb-sub{font-size:15px;line-height:1.55;color:#c8d8ec;margin:8px 0 16px}
  .bigmodal-card .wb-feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
  .bigmodal-card .wb-feed li{position:relative;padding:11px 15px 11px 36px;background:rgba(255,255,255,.055);
    border-left:1px solid var(--lg-hair-neutral,rgba(128,132,140,.2));border-radius:2px;font-size:14.5px;line-height:1.45;color:#eef4fc}
  .bigmodal-card .wb-feed li::before{content:"▸";position:absolute;left:14px;top:11px;color:var(--accent);font-size:12px;font-weight:800}
  .bigmodal-card .wb-stats{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);
    font-family:var(--mono),monospace;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#9fb4cc}
  .bigmodal-card .wb-stats b{color:var(--accent)}
  /* the modal overlays whatever view is live; the office view's `p/.muted/.small{!important}` rules would
     otherwise repaint the modal's body text dark — beat them with a more specific !important. */
  body[data-view] .bigmodal-card p,
  body[data-view] .bigmodal-card .muted,
  body[data-view] .bigmodal-card .small{color:#cdd9e8 !important}
  body[data-view] .bigmodal-card .wb-sub{color:#c8d8ec !important}
  body[data-view] .bigmodal-card .feedback{color:#eaf1fb !important}
  body[data-view] .bigmodal-card .wb-feed li{color:#eef4fc !important}
  body[data-view] .bigmodal-card h2,
  body[data-view] .bigmodal-card h3,
  body[data-view] .bigmodal-card .wb-title{color:#fff !important}
  /* eyebrow labels sit on the dark card — a fixed steel reads AA on every theme (was a #7e7e7e
     default at 4.19:1, just under AA) */
  body[data-view] .bigmodal-card .tac-eyebrow,
  .bigmodal-card .tac-eyebrow{color:#a9bdd6 !important}
  /* ── WELCOME-BACK GREETING → LIGHT CARD (CEO 2026-07-16) ──
     The returning-player digest is a greeting object, not a theme surface — pinned LIGHT (porcelain
     family per STYLE_SOURCE_OF_TRUTH) in ALL FOUR base themes. Dark ink, event rows as light cards,
     orange tick/CTA retained, AA on every row. Overrides the dark bigmodal defaults + the
     body[data-view] !important text rules above. */
  #toast.wb-modal .bigmodal-card{
    background:linear-gradient(168deg,#fcfaf6,#efe8dd) !important;
    color:#241f1b !important;border:1px solid #ddd0bd !important;
    box-shadow:0 30px 90px rgba(40,28,14,.42) !important}
  #toast.wb-modal .bigmodal-card .mac-titlebar{background:rgba(20,14,8,.035) !important;border-bottom:1px solid rgba(20,14,8,.10) !important}
  #toast.wb-modal .bigmodal-card .mac-tb-title{color:#8a7a68 !important}
  body[data-view] #toast.wb-modal .bigmodal-card b{color:#1a1512 !important}
  body[data-view] #toast.wb-modal .bigmodal-card .wb-title{color:#1a1512 !important}
  body[data-view] #toast.wb-modal .bigmodal-card .wb-sub{color:#5c4f43 !important}
  /* CANON REPAIR (CEO 2026-07-18): orange left-spines are BANNED structural orange — rows become
     flush hairline-ruled ledger lines with an INK tick; the h2 accent rule brand-fixes (never worn). */
  body[data-view] #toast.wb-modal .bigmodal-card .wb-feed li{
    background:#f7f1e8 !important;color:#2a231d !important;border:1px solid rgba(20,14,8,.12) !important;border-radius:0 !important}
  #toast.wb-modal .bigmodal-card .wb-feed li::before{color:#2a231d !important}
  #toast.wb-modal .bigmodal-card h2::after,
  #toast.wb-modal .bigmodal-card .wb-title::after{background:#b4380d !important;box-shadow:none !important}
  /* the WELCOME BACK pill → a mono eyebrow (pill slop retired on this surface) */
  #toast.wb-modal .bigmodal-card .pill{background:none !important;border:0 !important;border-radius:0 !important;
    padding:0 !important;font-family:var(--mono),monospace !important;font-size:10px !important;
    letter-spacing:.26em !important;color:#b4380d !important}
  /* CLOSE = THE CLIP (crisp 45-degree cut, white ink on brand orange), not a rounded slab */
  #toast.wb-modal .bigmodal-foot button.primary{border-radius:0 !important;border:0 !important;
    clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,0 100%);
    background:linear-gradient(180deg,#d3600f,#b4380d) !important;color:#fff !important;
    box-shadow:0 8px 22px -8px rgba(180,56,13,.55) !important}
  #toast.wb-modal .bigmodal-card .wb-stats{border-top:1px solid rgba(20,14,8,.12) !important;color:#7a6a5a !important}
  #toast.wb-modal .bigmodal-card .wb-stats b{color:#b4380d !important}
  #toast.wb-modal .bigmodal-foot{border-top:1px solid rgba(20,14,8,.12) !important}
  /* WELCOME BACK pill + Close CTA stay orange (white-on-orange = AA); nothing to override there */
  /* ── THEME-SAFE MODAL/WINDOW CHROME (Vero 2026-07-11, CEO batch #1) ──
     The mac-window card is a FIXED dark surface on every theme (never re-skinned by the palette).
     On the light themes (platinum) the global colour tokens flip to dark ink, so labels that read a
     theme token (.muted → var(--d-text-2), pn-btn--ghost → var(--mvc-fg), .tac-eyebrow → var(--accent2))
     rendered DARK-ON-DARK — the CFO hire dossier's "Signing fee / Salary / Cash after signing" were
     invisible. Rather than fight the office !important cascade class-by-class, re-pin the whole colour-
     token CONTEXT to the dark-surface light set on the card itself: the winning `var(--…)` rules now
     resolve light. Same technique the Vault uses (F1b). One place fixes every overlay present + future
     (CFO/hire, welcome, VC reprimand, week summary). Does NOT touch --p / --pn-on-p, so the primary
     button keeps its auto-contrast ink. */
  .bigmodal-card{
    --ink:#eef4fc; --muted:rgba(226,236,248,.66); --pn-body:#eef4fc;
    --d-text:#eef4fc; --d-text-2:rgba(226,236,248,.66); --accent2:#a9bdd6;
    --mvc-fg:#eef4fc; --mvc-fg-70:rgba(238,244,252,.74); --mvc-fg-55:rgba(238,244,252,.62);
    --mvc-fg-40:rgba(238,244,252,.46); --mvc-fg-30:rgba(238,244,252,.32);
    --rust-ink:#eef4fc; --rust-ink-70:rgba(238,244,252,.74); --rust-ink-55:rgba(238,244,252,.62); --rust-ink-40:rgba(238,244,252,.46);
    --line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.18);
    --mvc-brd:rgba(255,255,255,.12); --mvc-brd-hi:rgba(255,255,255,.22); --rust-border:rgba(255,255,255,.12);
    --track:rgba(255,255,255,.06); --rust-ink-08:rgba(255,255,255,.06);
  }
  /* VC reprimand modal — Marlowe on camera, full-bleed at the top of the card */
  .bigmodal-card.vc-card{padding-top:0;overflow:hidden}
  .vc-card .vc-media{position:relative;margin:0 -34px 16px;height:200px;overflow:hidden;background:#0a1320}
  .vc-card .vc-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%;filter:grayscale(.32) contrast(1.08)}
  .vc-card .vc-vid.rv-off{display:none}
  .vc-card .vc-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,19,32,.12) 38%,rgba(10,19,32,.96) 100%)}
  .vc-card .vc-tag{position:absolute;left:34px;bottom:13px;z-index:2;font-family:var(--mono),monospace;font-size:10px;font-weight:800;letter-spacing:.2em;color:rgba(255,255,255,.85)}
  .vc-card .vc-body{font-size:15px;line-height:1.6;margin:10px 0 4px}
  .vc-card .vc-frozen{margin-top:14px;padding:10px 14px;background:rgba(127,29,29,.28);border:1px solid rgba(248,113,113,.42);border-radius:2px;font-family:var(--mono),monospace;font-size:11px;font-weight:800;letter-spacing:.06em;color:#fca5a5}
  .small{font-size:12px}
  a.link{color:var(--accent);cursor:pointer;text-decoration:underline;font-weight:700}
  .kbd{font:12px ui-monospace,Menlo,monospace;background:rgba(255,255,255,.06);border:1px solid var(--line-2);padding:1px 6px;border-radius:4px;color:var(--ink-2)}
  /* "Boom" video meeting (pitches / briefings / reviews) */
  .meetbar{display:flex;align-items:center;gap:10px;margin:4px 0 8px;flex-wrap:wrap}
  /* the in-room "Boom" call badge — pulled into the rebel-penthouse palette (charcoal base, orange live-dot) */
  .boomlogo{font-weight:900;letter-spacing:.04em;padding:3px 11px;border-radius:999px;color:#fff;background:var(--charcoal);
    border:1px solid rgba(var(--glow),.5);box-shadow:0 0 0 1px rgba(255,255,255,.06)}
  .meet{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin:0 0 14px}
  .tile{position:relative;background:linear-gradient(180deg,#0e1828,#0a1220);border:1px solid var(--line-2);border-radius:8px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}
  .tile.speaking{border-color:var(--primary);box-shadow:0 0 0 2px rgba(var(--glow),.5)}
  .tile.client{border-color:#4ad6c4}
  .tile .face{font-size:36px;line-height:1;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
  .tile .init{font-size:26px;font-weight:800;color:#9fb2c8;letter-spacing:.04em}
  .tile .nm{position:absolute;left:6px;bottom:5px;font-size:10px;color:#fff;background:rgba(0,0,0,.55);padding:1px 7px;border-radius:6px;max-width:88%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tile .mc{position:absolute;right:5px;bottom:5px;display:flex;gap:3px;align-items:center}
  .mc-cam{display:inline-block;width:10px;height:7px;border-radius:1px;background:rgba(74,214,196,.65)}
  .mc-mic{display:inline-block;width:6px;height:6px;border-radius:999px;background:rgba(var(--glow),.75)}
  /* scanline overlay — Teams/Zoom aesthetic */
  .tile::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
    background:repeating-linear-gradient(0deg,rgba(0,0,0,.13) 0,rgba(0,0,0,.13) 1px,transparent 1px,transparent 3px)}
  .tile.speaking::after{opacity:.5}
  /* pitch PREP phase */
  .prep-floor-bar{display:flex;align-items:baseline;gap:10px;margin:14px 0 6px}
  /* mobile: label + long helper copy overlap when forced side-by-side at 390px — stack them;
     same for the pitch header, where the Back button collided with the brand name. */
  @media(max-width:600px){
    .prep-floor-bar{flex-direction:column;gap:4px}
    .pitch-head-row{flex-wrap:wrap}
    .pitch-head-row .right{width:100%;justify-content:flex-end}
  }
  .prep-floor-label{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
  .prep-deliver{margin-top:14px;display:flex;align-items:center;gap:14px}
  /* staff/founder real portrait — replaces emoji faces in the pitch room (grayscale halftone to match dossiers) */
  .tile .spic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;filter:grayscale(1) contrast(1.32) brightness(1.02)}
  .tile.speaking .spic{filter:grayscale(1) contrast(1.32) brightness(1.08) saturate(1.05)}
  /* ===== the readable pitch room — the client's face is the live scoreboard ===== */
  /* the client tile is bigger and carries a warming/cooling colour wash behind the face */
  .meet .tile.client{grid-row:span 2;aspect-ratio:auto;min-height:170px}
  .tile.client .face{font-size:54px;transition:transform .35s cubic-bezier(.22,1,.36,1)}
  .tile.client::before{content:"";position:absolute;inset:0;z-index:0;opacity:.0;transition:opacity .6s,background .6s}
  .tile.client>*{position:relative;z-index:1}
  .tile.client[data-state="warm"]::before,.tile.client[data-state="thaw"]::before{opacity:.85;background:radial-gradient(120% 120% at 50% 35%,rgba(var(--glow),.28),transparent 70%)}
  .tile.client[data-state="sold"]::before{opacity:1;background:radial-gradient(120% 120% at 50% 35%,rgba(31,122,58,.34),transparent 72%)}
  .tile.client[data-state="frozen"]::before,.tile.client[data-state="cool"]::before{opacity:.8;background:radial-gradient(120% 120% at 50% 60%,rgba(40,60,90,.42),transparent 72%)}
  .tile.client[data-react="warm"] .face{transform:translateY(-4px) scale(1.12)}
  .tile.client[data-react="cool"] .face{transform:translateY(2px) scale(.94) rotate(-3deg)}
  .tile.client .read{position:absolute;top:6px;left:6px;right:6px;z-index:1;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6);text-align:center}
  /* "the room" conviction meter — a mood band, never a number */
  .roommeter{margin:10px 0 4px}
  .roommeter .lbl{display:flex;justify-content:space-between;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
  .roomtrack{position:relative;height:14px;border-radius:999px;background:linear-gradient(90deg,#3a4a63 0%,#6b7790 30%,#f3b07a 62%,var(--accent) 80%,#1f7a3a 100%);overflow:hidden;border:1px solid var(--line-2)}
  /* the "nail-biter band" — a translucent window around the bar where it's too close to call */
  .roomtrack .band{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.32),rgba(255,255,255,.32) 4px,rgba(255,255,255,.12) 4px,rgba(255,255,255,.12) 8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
  .roomtrack .needle{position:absolute;top:-3px;bottom:-3px;width:3px;background:#0b1c30;box-shadow:0 0 0 2px #fff,0 0 8px rgba(0,0,0,.4);border-radius:2px;transition:left .55s cubic-bezier(.22,1,.36,1)}
  .roomtrack .barline{position:absolute;top:-4px;bottom:-4px;width:2px;background:rgba(11,28,48,.55)}
  .roomverdict{font-size:11px;font-weight:800;color:var(--ink);margin-top:5px;font-style:italic}
  /* the Big Swing fork */
  .swing{margin:10px 0;border:1px solid var(--primary);border-radius:8px;padding:12px;background:linear-gradient(180deg,rgba(var(--glow),.08),rgba(var(--glow),.02))}
  .swing h4{margin:0 0 4px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--primary-deep)}
  .swing .opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
  .swing .opt{text-align:left;align-items:flex-start;padding:11px 13px;white-space:normal;line-height:1.3}
  .swing .opt b{display:block;font-size:13px;margin-bottom:2px}
  .swing .opt small{font-weight:600;color:var(--muted)}
  .swing .opt.held{outline:2px solid var(--primary)}
  /* the held-breath beat during a swing */
  @keyframes heldbreath{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}
  /* ===== PITCH WAR-ROOM — Stitch pillar card system (5 discipline columns) ===== */
  .pitch-wrap{position:relative;overflow:hidden}
  .pitch-bgstrip{position:absolute;inset:0;pointer-events:none;z-index:0}
  .pitch-bgstrip::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--primary) .6px,transparent 0);background-size:8px 8px;opacity:.06}
  .pitch-bgstrip-bleed{position:absolute;top:0;left:-4px;font-size:clamp(64px,14vw,180px);font-weight:900;letter-spacing:-.08em;opacity:.03;pointer-events:none;line-height:.8;text-transform:uppercase;white-space:nowrap;user-select:none;color:var(--ink)}
  .pitch-inner{position:relative;z-index:1}
  /* Mac-Finder-style window chrome for overlays (Jon, repeated instruction). Traffic-light dots are
     REAL controls, not decoration: red = close/back (wired to the same #bail/.mac-tb-close handler
     the old "Back" button used), not a picture of a button. */
  .mac-titlebar{display:flex;align-items:center;gap:8px;padding:12px 16px;position:relative;z-index:2;
    background:var(--rust-ink-08,rgba(0,0,0,.03));border-bottom:1px solid var(--rust-border,rgba(0,0,0,.1))}
  /* INK-SWEEP 2026-07-25 (CEO "sloppy non transparent corners"): shells that keep overflow:visible
     (.week-summary-inner etc.) let this square bar notch past the window's rounded crown — a crown-
     seated titlebar always carries the window's own top radius. */
  .bigmodal-card > .mac-titlebar:first-child,.pn-window > .mac-titlebar:first-child,
  .coo-card > .mac-titlebar:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}
  .mac-tb-dots{display:flex;gap:8px;flex:none}
  .mac-tb-dot{width:12px;height:12px;border-radius:50%;border:0;padding:0;cursor:default}
  .mac-tb-dot.red{background:#ff5f57;cursor:pointer}
  .mac-tb-dot.amber{background:#febc2e}
  .mac-tb-dot.green{background:#28c840}
  .mac-tb-dot.red:hover{filter:brightness(.92)}
  /* the red dot is a <button> — the generic "every button gets a flat card reset" rule
     (body[data-view="office"/"pitch"] button:not(.primary), !important) was clobbering its color
     to white. Real bug Jon caught live ("finder tab windows look terrible"). Win it back explicitly. */
  body[data-view="office"] .mac-tb-dot,body[data-view="pitch"] .mac-tb-dot{
    border:0 !important;border-radius:50% !important;padding:0 !important;width:12px !important;height:12px !important;
  }
  body[data-view="office"] .mac-tb-dot.red,body[data-view="pitch"] .mac-tb-dot.red{background:#ff5f57 !important}
  body[data-view="office"] .mac-tb-dot.amber,body[data-view="pitch"] .mac-tb-dot.amber{background:#febc2e !important}
  body[data-view="office"] .mac-tb-dot.green,body[data-view="pitch"] .mac-tb-dot.green{background:#28c840 !important}
  .mac-tb-title{flex:1;text-align:center;font-family:var(--mvc-f,inherit);font-size:12.5px;font-weight:700;
    letter-spacing:.02em;color:var(--rust-ink-55,inherit);margin-right:28px}
  /* Pitch Prep / Boardroom header — Jon: "spacing and type looks appalling". Real vertical rhythm
     between mark/title/subtitle instead of everything crammed onto one row with margin:0 hacks. */
  .pitch-head-row{display:flex;align-items:flex-start;gap:16px;padding:22px 24px 4px}
  .pitch-head-mark{font-size:22px;line-height:1;flex:none;width:44px;height:44px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;font-weight:800;letter-spacing:-.02em;
    background:var(--rust-ink-08,rgba(0,0,0,.05));color:var(--rust-ink,inherit)}
  .pitch-head-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
  .pitch-head-txt h2{margin:0 !important;line-height:1.15}
  .pitch-inner>.feedback{padding:0 24px;margin:14px 0 0}
  .pitch-inner>.prop-input{margin-left:24px;margin-right:24px}
  .pitch-inner>.prep-floor-bar{margin-left:24px;margin-right:24px}
  .pitch-inner>.pillar-grid,.pitch-inner>.talent-grid,.pitch-inner>.prep-deliver{margin-left:24px;margin-right:24px}
  .bm-head.pitch-head-row{padding-bottom:10px}
  /* pillar grid — war-room 5-column discipline layout */
  .pillar-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
  .pillar-card{position:relative;background:rgba(255,255,255,.52);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.55);border-top:4px solid var(--primary);overflow:hidden;padding:0;display:flex;flex-direction:column;transition:transform .15s}
  /* Strategy pillar: dark slab inversion */
  .pillar-card.p-strategy{background:var(--ink);border-top-color:var(--accent);color:#fff}
  /* Big Idea pillar: the hero — scaled up, orange border glow */
  .pillar-card.p-bigidea{background:rgba(255,255,255,.78);border:2px solid var(--accent);border-top-width:4px;box-shadow:0 0 36px rgba(var(--glow),.2);transform:scaleY(1.035);transform-origin:bottom center;z-index:2}
  /* face portrait strip */
  .pillar-card .pillar-img{width:100%;aspect-ratio:3/2;overflow:hidden;flex-shrink:0}
  .pillar-card .pillar-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.25) brightness(1.04);transition:filter .3s}
  .pillar-card:hover .pillar-img img{filter:grayscale(.7) contrast(1.2) brightness(1.06)}
  /* card body */
  .pillar-card .pillar-body{padding:5px 7px 7px;flex:1;display:flex;flex-direction:column;gap:3px}
  .pillar-card .pillar-stat{font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pillar-card.p-strategy .pillar-stat{color:var(--accent)}
  .pillar-card h4{margin:0;font-family:var(--mono);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;display:flex;align-items:center;gap:3px}
  .pillar-card.p-strategy h4{color:#fff}
  /* quality bar */
  .pillar-card .bar{height:5px;margin:1px 0;background:rgba(11,28,48,.1);border-radius:0;overflow:hidden;flex-shrink:0}
  .pillar-card .bar>i{display:block;height:100%;background:var(--accent);transition:width .55s cubic-bezier(.22,1,.36,1)}
  .pillar-card.p-strategy .bar{background:rgba(255,255,255,.1)}
  .pillar-card.p-strategy .bar>i{background:var(--accent)}
  /* input */
  .pillar-card textarea{font-size:10px;width:100%;resize:none;border:1px solid rgba(11,28,48,.14);background:rgba(255,255,255,.55);padding:3px 5px;border-radius:1px;min-height:38px;font-family:inherit;color:var(--ink)}
  .pillar-card.p-strategy textarea{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.2);placeholder-color:rgba(255,255,255,.4)}
  .pillar-card .slot-action{font-size:9px;padding:3px 6px;margin-top:1px;width:100%;text-align:left;border-color:rgba(11,28,48,.2)}
  .pillar-card.p-strategy .slot-action{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.25)}
  .pillar-card.p-strategy .slot-action:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
  .pillar-card .contribs{margin-top:2px;max-height:72px;overflow-y:auto;flex:1}
  .pillar-card .contrib{font-size:10px;background:rgba(11,28,48,.04);border:1px solid rgba(11,28,48,.07);padding:3px 5px;margin-top:2px}
  .pillar-card.p-strategy .contrib{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.85)}
  .pillar-card .contrib .by{color:var(--primary);font-weight:800}
  .pillar-card.p-strategy .contrib .by{color:var(--accent)}
  /* land animations carry over from .slot */
  .pillar-card.land-warm{animation:slotwarm .9s ease-out}
  .pillar-card.land-cool{animation:slotcool .9s ease-out}
  /* focus/valued micro-pills */
  .ppill{display:inline-block;font-size:7.5px;font-weight:800;padding:1px 4px;text-transform:uppercase;letter-spacing:.07em;border-radius:1px}
  .ppill.focus{background:rgba(var(--glow),.15);color:var(--primary)}
  .ppill.valued{background:rgba(11,28,48,.07);color:var(--muted)}
  .pillar-card.p-strategy .ppill.focus{background:rgba(var(--glow),.3);color:var(--accent)}
  .pillar-card.p-strategy .ppill.valued{background:rgba(255,255,255,.15);color:rgba(255,255,255,.7)}
  /* scribble accent on Big Idea pillar */
  .pillar-card.p-bigidea::after{content:"";position:absolute;top:-6px;right:-6px;width:56px;height:56px;pointer-events:none;background:url('/assets/scribbles/scrib_circle.png') center/contain no-repeat;mix-blend-mode:multiply;opacity:.35;transform:rotate(12deg)}
  .tile.client.holding .face{animation:heldbreath .5s ease-in-out infinite}
  /* ===== THE WATCHABLE MATCH (WS8) — the live beat feed ===== */
  .matchfeed{border:1px solid var(--line)}
  .beatfeed{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow:auto}
  @keyframes beatIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  .beat{font-size:12px;line-height:1.45;padding:8px 11px;border-radius:8px;border-left:3px solid var(--line);
    background:#fff;animation:beatIn .35s ease both}
  .beat-warm{border-left-color:var(--primary);background:linear-gradient(90deg,rgba(var(--glow),.10),#fff 60%)}
  .beat-cool{border-left-color:#64748b;background:linear-gradient(90deg,rgba(100,116,139,.12),#fff 60%)}
  .beat-event{border-left-color:#a855f7;background:linear-gradient(90deg,rgba(168,85,247,.10),#fff 62%)}
  .beat-swing{border-left-color:var(--primary);background:rgba(var(--glow),.06);font-weight:700}
  .beat-luck{border-left-color:#0ea5e9;background:linear-gradient(90deg,rgba(14,165,233,.12),#fff 60%);font-weight:700}
  .beat-open{border-left-color:#94a3b8;font-style:italic;color:var(--muted)}
  /* ===== THE VC INTERVIEW ===== */
  .hookbar{margin:-4px -4px 14px;padding:22px 24px;border-radius:12px;color:#fff;
    background:radial-gradient(130% 120% at 12% 0%,#1b2030 0%,#0b0d12 58%,#070809 100%);
    border:1px solid rgba(var(--glow),.22);box-shadow:0 18px 50px rgba(0,0,0,.45)}
  .hookkicker{font-size:11px;font-weight:800;letter-spacing:.24em;color:var(--accent);text-transform:uppercase}
  .hookline{margin:8px 0 4px;font-size:clamp(28px,5.2vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.02;color:#fff}
  .hooksub{margin:0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.72);max-width:90%}
  .interview .meet-solo{grid-template-columns:1fr;max-width:none}
  .interview .meet-solo .tile.client{min-height:300px;aspect-ratio:auto}
  .interview .meet-solo .tile.client .face{font-size:108px}
  .interview .meet-solo .tile.client .read{font-size:12px;letter-spacing:.16em}
  .qtext{font-size:clamp(22px,3.3vw,32px);font-weight:900;letter-spacing:-.03em;line-height:1.18;margin:18px 0 16px;color:var(--ink)}
  .answers{display:grid;gap:10px}
  .ansbtn{text-align:left;white-space:normal;line-height:1.4;padding:15px 18px;font-size:15px;font-weight:600;
    background:rgba(255,255,255,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border:1px solid var(--line-2);border-left:3px solid var(--charcoal);border-radius:2px;color:var(--ink);transition:transform .12s,border-color .12s,background .12s,color .12s;cursor:pointer}
  .ansbtn:hover{border-color:var(--primary);border-left-color:var(--primary);transform:translateX(3px);background:var(--charcoal);color:#fff}
  .ansbtn:hover::before,.ansbtn:hover::after{color:var(--primary)}
  .ansbtn::before{content:"“";color:var(--primary);font-weight:800;margin-right:2px}
  .ansbtn::after{content:"”";color:var(--primary);font-weight:800}
  .verdictline{font-size:clamp(17px,2.4vw,21px);line-height:1.5;color:var(--ink);margin:0 0 10px}
  .verdict-screen .meet-solo .tile.client{min-height:240px}
  /* ── cinematic VC verdict: her decision plays (with sound) as the hero, verdict overlaid ── */
  .vc-verdict{background:#05080e;border:1px solid rgba(255,255,255,.08)}
  .vc-stage{position:relative;width:100%;aspect-ratio:16/9;max-height:min(62vh,540px);background:#05080e;overflow:hidden}
  .vc-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#05080e}
  .vc-scrim{position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(5,8,14,.34) 0%,rgba(5,8,14,0) 34%,rgba(5,8,14,.62) 74%,rgba(5,8,14,.95) 100%)}
  .vc-badge{position:absolute;top:16px;left:18px;display:flex;align-items:center;gap:12px;z-index:2}
  .vc-pill{font-family:var(--mono,monospace);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
    padding:6px 12px;border-radius:6px;color:#0a0d12}
  .vc-pill.good{background:#39d98a;box-shadow:0 6px 20px rgba(57,217,138,.4)}
  .vc-pill.bad{background:#ff6a55;color:#150402;box-shadow:0 6px 20px rgba(255,106,85,.4)}
  .vc-who{font-family:var(--mono,monospace);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(234,241,251,.72);text-shadow:0 1px 8px rgba(0,0,0,.8)}
  .vc-unmute{position:absolute;top:15px;right:16px;z-index:3;cursor:pointer;font-size:12px;font-weight:700;letter-spacing:.04em;
    color:#0a0d12;background:var(--accent,var(--accent));border:0;border-radius:8px;padding:8px 13px;box-shadow:0 6px 18px rgba(0,0,0,.45)}
  .vc-overlay{position:absolute;left:0;right:0;bottom:0;padding:20px 24px;z-index:2}
  .vc-cheque{display:inline-flex;flex-direction:column;line-height:1.05}
  .vc-cheque span{font-family:var(--mono,monospace);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(234,241,251,.72)}
  .vc-cheque b{font-size:clamp(28px,5vw,46px);font-weight:900;letter-spacing:-.02em;color:#fff;text-shadow:0 3px 20px rgba(0,0,0,.7)}
  .vc-body{padding:22px 26px 26px}
  .vc-verdict .verdictline{color:#e9f0fb;margin:0 0 16px}
  .vc-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
  .vc-share{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-weight:700;font-size:13px;
    color:#eaf1fb;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:11px 15px;transition:border-color .15s,background .15s}
  .vc-share:hover{border-color:#0A66C2;background:rgba(10,102,194,.14)}
  @media (max-width:640px){ .vc-stage{aspect-ratio:4/5;max-height:66vh} .vc-body{padding:18px} }
  /* the LinkedIn-shaped badge (1200×627 ratio) — screenshot/share ready */
  .lbadge{position:relative;aspect-ratio:1200/627;width:100%;max-width:560px;margin:0 auto;border-radius:14px;overflow:hidden;
    background:radial-gradient(120% 130% at 18% 0%,#1a1f2b 0%,#0b0d12 60%,#070809 100%);color:#fff;
    padding:7% 8%;display:flex;flex-direction:column;justify-content:center;box-shadow:0 24px 60px rgba(0,0,0,.5);border:1px solid rgba(var(--glow),.25)}
  .lbadge.reject{background:radial-gradient(120% 130% at 18% 0%,#241317 0%,#0b0708 60%,#070405 100%);border-color:rgba(186,26,26,.35)}
  .lb-mark{font-size:13px;font-weight:800;letter-spacing:.18em;color:var(--accent);text-transform:uppercase}
  .lbadge.reject .lb-mark{color:#ff6b6b}
  .lb-verdict{font-size:12px;font-weight:800;letter-spacing:.28em;color:rgba(255,255,255,.55);margin:6px 0 2px}
  .lb-name{font-size:clamp(22px,4vw,34px);font-weight:800;letter-spacing:-.02em;line-height:1}
  .lb-tag{font-size:clamp(13px,2.3vw,18px);font-weight:700;color:var(--accent);margin-top:4px;text-transform:capitalize}
  .lbadge.reject .lb-tag{color:#ff8585}
  .lb-cheque{font-size:13px;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.85);margin-top:3px}
  .lb-quote{font-size:12px;font-style:italic;color:rgba(255,255,255,.78);margin-top:9px;line-height:1.4;max-width:90%}
  .lb-by{font-style:normal;font-weight:700;color:rgba(255,255,255,.55)}
  .lb-cta{position:absolute;left:8%;bottom:7%;font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--accent);text-transform:uppercase}
  .lbadge.reject .lb-cta{color:#ff8585}
  .lb-copy{position:absolute;right:6%;bottom:6%;padding:7px 14px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    background:var(--accent);color:#0b1c30;border:0;border-radius:8px;cursor:pointer}
  .lbadge.reject .lb-copy{background:#ba1a1a;color:#fff}
  .lb-li-section{display:flex;align-items:center;gap:12px;padding:11px 18px;background:rgba(10,102,194,.1);border:1px solid rgba(10,102,194,.3);border-top:0;border-radius:0 0 14px 14px;max-width:560px;margin:0 auto}
  .lb-li-prompt{flex:1;font-size:12px;color:rgba(255,255,255,.7);font-style:italic;line-height:1.4}
  .lb-li-btn{background:#0A66C2;color:#fff;border:0;border-radius:6px;padding:8px 14px;font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap;flex-shrink:0;transition:background .15s}
  .lb-li-btn:hover{background:#004182}
  .hidden{display:none}
  /* account / auth */
  #account .who{font-size:12px;color:var(--muted);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #account{display:inline-flex;align-items:center;gap:8px;flex-wrap:nowrap;white-space:nowrap}
  #account button{padding:0 12px;font-size:10px;height:32px;display:inline-flex;align-items:center}
  @media(max-width:760px){ #account button#acc-home{display:none} }
  /* Auth screen — dark glass card over the dark launch shell */
  .authwrap{max-width:440px;margin:8vh auto;
    background:rgba(11,28,48,.90) !important;
    backdrop-filter:blur(24px) !important;-webkit-backdrop-filter:blur(24px) !important;
    border:1px solid rgba(255,255,255,.13) !important;
    border-radius:4px !important;
    box-shadow:0 40px 80px rgba(0,0,0,.55),0 0 0 1px rgba(var(--glow),.18) !important}
  .authwrap::before{display:none !important}
  .authwrap .auth-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--accent);text-transform:uppercase;display:block;margin-bottom:14px}
  .authwrap h1{color:#fff;font-size:28px;font-weight:900;letter-spacing:-.03em;margin:0 0 4px;line-height:1}
  .authwrap .muted{color:rgba(255,255,255,.42);font-size:13px;margin:0 0 20px}
  .authwrap input{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:2px}
  .authwrap input::placeholder{color:rgba(255,255,255,.3)}
  .authwrap input:focus{border-color:var(--accent);box-shadow:3px 3px 0 rgba(var(--glow),.35)}
  .authwrap #au-err{color:#ff7070}
  .authwrap .divider{color:rgba(255,255,255,.25)}
  .authwrap .divider::before,.authwrap .divider::after{background:rgba(255,255,255,.12)}
  .authwrap #au-offline{color:rgba(255,255,255,.35);font-size:12px;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;display:inline-block;margin-top:6px}
  .authwrap #au-offline:hover{color:var(--accent)}
  /* ── LOGIN / AUTH SCREEN (CEO 2026-07-17) — page layout only; the panel + buttons come from the
     GLOBAL glass system (assets/css/pn-glass.css: .lg-panel Finder-glass · .lg-btn liquid-glass).
     Dark cinematic pre-game seam (UX_RULES §5 — theme not yet chosen). ── */
  .lg-auth{min-height:calc(100svh - 60px);display:flex;align-items:center;justify-content:center;padding:24px 16px}
  .lg-auth-body{padding:2px 2px 4px}
  .lg-auth-logo{height:30px;display:block;margin-bottom:16px;opacity:.96}
  .lg-auth-eyebrow{display:block;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.24em;
    text-transform:uppercase;color:var(--accent);margin-bottom:10px}
  .lg-auth-title{margin:0 0 5px;font-family:Inter,sans-serif;font-size:25px;font-weight:900;letter-spacing:-.03em;line-height:1.02;color:#fff}
  .lg-auth-sub{margin:0 0 20px;font-size:13.5px;line-height:1.5;color:rgba(234,241,251,.62);max-width:34ch}
  .lg-auth-fields{display:flex;flex-direction:column;gap:12px}
  .lg-auth-err{min-height:16px;font-size:12.5px;line-height:1.35;color:#ff8b7a;margin:-2px 0 0}
  .lg-auth-actions{display:flex;gap:10px}
  .lg-auth-forgot{align-self:flex-end;margin:-6px 0 2px}
  .lg-auth-google{width:100%}
  .lg-auth-offline{align-self:center;margin-top:2px;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;font-size:11px}
  @media(max-width:420px){ .lg-auth-title{font-size:23px} }
  /* Agency list dashboard */
  .agcard{display:flex;align-items:center;gap:12px;background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:6px;padding:12px;margin:8px 0;transition:border-color .15s,transform .12s}
  .agcard:hover{border-color:var(--primary);transform:translateY(-1px)}
  .agcard .logo{font-size:26px;width:40px;text-align:center}
  .agcard .meta{flex:1;min-width:0}
  .agcard .meta b{display:block}
  .agcard .meta span{font-size:11px;color:var(--muted)}
  .divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11px;margin:14px 0}
  .divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line-2)}
  /* ===== ONBOARDING — FINDER-GLASS WINDOW STANDARD (CEO batch 2026-07-16, Vero UI · Item 2) =====
     The new-agency wizard was flat white brutalist slabs w/ hard offset shadows ("too AI"). Rebuilt on
     the canonized .pn-window Finder-glass material: a traffic-light title bar + porcelain light-glass
     body (backdrop blur+saturate over the dark penthouse backdrop) + a diagonal gradient sheen + house
     halftone grain + hairline border + real elevation. Same material language as the My Agencies rows.
     Gated vs UX_RULES §1 (AA ink) — dark-navy ink on warm porcelain glass stays legible on all themes. */
  .onb-card{position:relative;width:min(620px,calc(100vw - 32px));margin:8vh auto;overflow:hidden;border-radius:16px;
    background:linear-gradient(168deg,rgba(252,250,247,.90),rgba(238,232,222,.94));
    -webkit-backdrop-filter:blur(30px) saturate(150%);backdrop-filter:blur(30px) saturate(150%);
    border:1px solid rgba(20,14,8,.16);
    box-shadow:0 44px 110px rgba(30,20,10,.44),0 8px 22px rgba(30,20,10,.20),inset 0 1px 0 rgba(255,255,255,.65)}
  /* diagonal gradient sheen — a real glass highlight raking across the pane */
  .onb-card::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:linear-gradient(122deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 72%,rgba(255,241,228,.36) 100%)}
  /* house halftone tooth so the pane reads as material, never a flat card */
  .onb-card::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
    background-image:radial-gradient(#0b1c30 10%,transparent 11%);background-size:6px 6px}
  /* the porcelain title bar (traffic lights are the canonical Finder chrome; red = real back control) */
  .onb-card .mac-titlebar{position:relative;z-index:2;margin:0;padding:12px 18px;
    background:rgba(20,14,8,.045);border-bottom:1px solid rgba(20,14,8,.12)}
  .onb-card .mac-tb-title{color:#6b5d4d !important;font-weight:700}
  .onb-card #onb-tb-back{cursor:pointer}
  .onb-card .mac-tb-dot.red[aria-hidden]{cursor:default}
  .onb-card .mac-tb-dot.red:focus-visible{outline:2px solid #0b1c30;outline-offset:2px}
  .onb-card .onb-inner{position:relative;z-index:1;padding:34px 44px 40px}
  .onb-card.onb-lockout .onb-inner{padding:44px 44px 46px}
  /* the primary CTA keeps a solid brand-orange ink-stamp on the glass (legible, not a washed liquid pill) */
  .onb-card button.primary{background:var(--accent);backdrop-filter:none;-webkit-backdrop-filter:none;
    color:#1a0f04;border:1px solid rgba(20,14,8,.28);box-shadow:0 8px 20px rgba(157,67,0,.28),inset 0 1px 0 rgba(255,255,255,.4);border-radius:8px}
  .onb-card button.primary:hover{background:var(--accent);filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 12px 26px rgba(157,67,0,.34),inset 0 1px 0 rgba(255,255,255,.4)}
  /* disabled NEXT must stay READABLE (CEO: the pale-pink opacity:.35 pill was unreadable) —
     a clear locked state: legible ink on a quiet neutral, obvious it's not yet active */
  .onb-card button.primary:disabled{opacity:1;cursor:not-allowed;transform:none;
    background:rgba(11,28,48,.07);color:rgba(11,28,48,.7);border:1px solid rgba(11,28,48,.18);box-shadow:none}
  .onb-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--accent);text-transform:uppercase;margin-bottom:14px}
  .onb-headline{font-size:clamp(28px,4vw,44px);font-weight:900;letter-spacing:-.04em;line-height:1.0;color:#0b1c30;margin:0 0 16px}
  .onb-body{color:rgba(11,28,48,.65);font-size:15px;line-height:1.6;margin:0 0 28px;max-width:480px}
  .onb-field{margin-bottom:24px}
  .onb-field label{display:block;font-size:11px;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(11,28,48,.68);margin-bottom:6px}
  .onb-field input{width:100%;padding:12px 14px;border:2px solid rgba(11,28,48,.22);border-radius:2px;font-size:16px;font-weight:700;color:#0b1c30;background:#fff;box-sizing:border-box;transition:border-color .15s,box-shadow .15s}
  .onb-field input:focus{border-color:var(--accent);box-shadow:4px 4px 0 rgba(var(--glow),.3);outline:none}
  .onb-field input::placeholder{color:rgba(11,28,48,.25);font-weight:400}
  .onb-steps{margin:24px 0}
  .onb-step{display:flex;gap:20px;padding:18px 0;border-bottom:1px solid rgba(11,28,48,.08)}
  .onb-step:last-child{border-bottom:none}
  .onb-num{font-family:var(--mono);font-size:28px;font-weight:900;color:rgba(11,28,48,.12);min-width:40px;line-height:1}
  .onb-step b{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#0b1c30;margin-bottom:4px}
  .onb-step p{margin:0;font-size:13px;color:rgba(11,28,48,.6);line-height:1.5}
  .onb-back{display:inline-block;margin-top:14px;font-size:12px;font-family:var(--mono);letter-spacing:.1em;color:rgba(11,28,48,.4);cursor:pointer;text-decoration:none}
  .onb-back:hover{color:var(--accent)}
  .onb-progress{display:flex;gap:6px;margin-bottom:28px}
  .onb-dot{width:28px;height:3px;background:rgba(11,28,48,.12);border-radius:2px;transition:background .2s}
  .onb-dot.active{background:var(--accent)}
  .onb-statements{display:flex;flex-direction:column;gap:8px;margin:16px 0}
  .onb-stmt{background:#fff;border:2px solid rgba(11,28,48,.18);border-radius:2px;padding:14px 16px;text-align:left;font-size:14px;font-style:italic;color:#0b1c30;cursor:pointer;transition:border-color .15s,box-shadow .15s;width:100%;box-sizing:border-box}
  .onb-stmt:hover{border-color:var(--accent)}
  .onb-stmt.selected{border-color:var(--accent);box-shadow:4px 4px 0 rgba(var(--glow),.3);background:rgba(var(--glow),.04)}
  .onb-addl{width:100%;padding:10px 14px;border:2px solid rgba(11,28,48,.18);border-radius:2px;font-size:14px;color:#0b1c30;background:#fff;box-sizing:border-box;resize:none;margin-top:8px;transition:border-color .15s}
  .onb-addl:focus{border-color:var(--accent);outline:none}
  .onb-sliders{display:flex;flex-direction:column;gap:20px;margin:20px 0}
  .onb-slider-row{}
  .onb-slider-name{font-size:10px;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(11,28,48,.74);margin-bottom:6px;font-weight:700}
  .onb-slider-labels{display:flex;justify-content:space-between;gap:18px;font-size:10.5px;color:rgba(11,28,48,.72);margin-top:6px;font-style:italic}
  .onb-slider-labels span:last-child{text-align:right}
  /* SLIM CRAFTED SLIDER (CEO: the old ones read "fat/bloated" — the global input{border:2px;padding:10px}
     rule was inflating the range). Explicitly reset border/padding; slim orange-fill groove, small
     hand-tuned thumb (white body, burnt-orange ring, orange centre dot) with a real focus ring. */
  .onb-slider-row input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border:0;padding:0;margin:0;
    border-radius:999px;cursor:pointer;outline:none;
    background:linear-gradient(to right,#d15408 var(--pct,50%),rgba(11,28,48,.13) var(--pct,50%));
    box-shadow:inset 0 1px 2px rgba(11,28,48,.16)}
  .onb-slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
    background:radial-gradient(circle at center,#d15408 0 2.6px,#fff 3.4px);border:2px solid #d15408;
    box-shadow:0 1px 3px rgba(11,28,48,.4);cursor:pointer;margin-top:0}
  .onb-slider-row input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;
    background:radial-gradient(circle at center,#d15408 0 2.6px,#fff 3.4px);border:2px solid #d15408;
    box-shadow:0 1px 3px rgba(11,28,48,.4);cursor:pointer}
  .onb-slider-row input[type=range]:focus-visible{box-shadow:inset 0 1px 2px rgba(11,28,48,.16),0 0 0 3px rgba(209,84,8,.32)}
  .onb-lockout{text-align:center}
  .onb-lockout-timer{font-family:var(--mono);font-size:28px;font-weight:900;letter-spacing:.08em;color:var(--accent);margin:16px 0 8px}
  .onb-score-bar{height:4px;background:rgba(11,28,48,.1);border-radius:2px;margin:16px 0;overflow:hidden}
  .onb-score-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .4s cubic-bezier(.4,0,.2,1)}
  /* onboarding Finder-glass window — mobile gutter + tighter body padding (UX_RULES §3, no bezel-touch) */
  @media (max-width:520px){
    .onb-card{margin:5vh auto}
    .onb-card .onb-inner{padding:24px 22px 30px}
    .onb-card.onb-lockout .onb-inner{padding:34px 22px 36px}
    .onb-card .mac-titlebar{padding:11px 15px}
  }
  @media (prefers-reduced-motion:reduce){ .onb-card button.primary{transition:none} }
  /* ===== FIRST-OFFICE TUTORIAL STRIP ===== */
  .tutorial-strip{background:#0b1c30;border-top:3px solid var(--accent);padding:16px 22px;display:flex;align-items:flex-start;gap:24px;flex-wrap:wrap;margin-bottom:0}
  /* Never leave an empty orange-outlined box floating near the hero (CEO 2026-07-20): if the strip
     ever renders with no tutorial items, hide it entirely — mirrors the .bigmodal:empty guard. The
     populated strip always carries .tut-item, so this can only ever catch the empty shell. */
  .tutorial-strip:empty,.tutorial-strip:not(:has(.tut-item)){display:none !important}
  body[data-view="office"] .hud-main>.tutorial-strip{flex:none;border:1px solid var(--accent);border-radius:10px;padding:12px 18px;margin:0}
  .tutorial-strip .tut-items{display:flex;gap:24px;flex:1;flex-wrap:wrap}
  .tut-item{display:flex;gap:10px;align-items:flex-start;min-width:160px}
  .tut-num{font-family:var(--mono);font-size:20px;font-weight:900;color:var(--accent);min-width:28px;line-height:1}
  .tut-item b{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#eaf1fb;margin-bottom:2px}
  .tut-item p{margin:0;font-size:12px;color:rgba(234,241,251,.82);line-height:1.4}
  .tut-dismiss{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(234,241,251,.35);cursor:pointer;white-space:nowrap;padding:4px 0;align-self:center}
  .tut-dismiss:hover{color:var(--accent)}

  /* ===== CONTEXTUAL HELP OVERLAY ===== */
  .help-overlay-bg{position:fixed;inset:0;background:rgba(4,8,14,.65);z-index:9000;pointer-events:auto;animation:helpfadein .2s ease}
  @keyframes helpfadein{from{opacity:0}to{opacity:1}}
  .help-badge{
    position:fixed;z-index:9010;width:26px;height:26px;border-radius:50%;
    background:var(--accent);color:#fff;font-size:12px;font-weight:900;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;border:2px solid rgba(255,255,255,.5);
    box-shadow:0 2px 14px rgba(var(--glow),.6);
    font-family:var(--mono);letter-spacing:0;
    animation:badgepop .18s cubic-bezier(.34,1.56,.64,1);
    transition:transform .12s,box-shadow .12s;
  }
  @keyframes badgepop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
  .help-badge:hover{transform:scale(1.28);box-shadow:0 4px 22px rgba(var(--glow),.9)}
  .help-badge.active{background:#fff;color:var(--accent)}
  /* inline ? helper chip — selective, sits beside non-obvious section labels; opens a HELP_TOPIC */
  .help-chip{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;margin-left:6px;
    border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);
    background:rgba(var(--glow),.14);color:var(--accent);font-family:var(--mono,monospace);font-size:9.5px;font-weight:900;
    line-height:1;cursor:pointer;vertical-align:middle;flex:none;user-select:none;
    transition:transform .12s,background .12s,color .12s}
  .help-chip:hover{transform:scale(1.18);background:var(--accent);color:#05090f}
  .help-chip.active{background:#fff;color:var(--accent);border-color:#fff}
  .help-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  /* expand the tap target to ~44px on touch without growing the visual chip (ui-ux-pro-max: touch-target ≥44px) */
  @media (hover:none),(pointer:coarse),(max-width:760px){
    .help-chip{position:relative}
    .help-chip::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
  }
  /* DO THIS NOW — the unmissable priority surface (magic Banner pattern: lead icon + shimmer + action) */
  body[data-view="office"] .do-now{
    display:flex;align-items:center;gap:13px;flex:none;margin:0 0 12px;padding:12px 16px 12px 13px;
    border-radius:12px;border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);
    background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 20%,transparent),rgba(8,16,28,.5));
    box-shadow:0 0 0 1px rgba(var(--glow),.18),0 14px 34px rgba(0,0,0,.4);cursor:pointer;
    position:relative;overflow:hidden;transition:border-color .16s,transform .16s}
  body[data-view="office"] .do-now:hover{border-color:var(--accent);transform:translateY(-1px)}
  body[data-view="office"] .do-now:focus-within{outline:2px solid var(--accent);outline-offset:2px}
  body[data-view="office"] .do-now .dn-ico{flex:none;width:38px;height:38px;border-radius:10px;display:flex;
    align-items:center;justify-content:center;color:var(--accent);background:rgba(var(--glow),.16);
    border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
    box-shadow:0 0 0 0 rgba(var(--glow),.5);animation:dnPulse 2s infinite}
  body[data-view="office"] .do-now .dn-ico svg{width:21px;height:21px}
  @keyframes dnPulse{0%{box-shadow:0 0 0 0 rgba(var(--glow),.5)}70%{box-shadow:0 0 0 10px rgba(var(--glow),0)}100%{box-shadow:0 0 0 0 rgba(var(--glow),0)}}
  body[data-view="office"] .do-now .dn-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
  body[data-view="office"] .do-now .dn-eyebrow{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
    font-family:var(--mono);font-size:8.5px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
  body[data-view="office"] .do-now .dn-text{font-family:Inter;font-weight:800;
    font-size:clamp(14px,1.5vw,18px);color:var(--d-text);line-height:1.18}
  body[data-view="office"] .do-now .dn-text small{display:block;font-weight:600;font-size:11.5px;color:var(--d-text-2);
    margin-top:2px;letter-spacing:0;line-height:1.35}
  body[data-view="office"] .do-now .dn-cta{flex:none;appearance:none;cursor:pointer;padding:10px 18px;border-radius:8px;
    border:1px solid var(--accent);background:var(--accent);color:#05090f;font-family:Inter;font-weight:800;font-size:12.5px;
    white-space:nowrap;box-shadow:0 6px 16px rgba(var(--glow),.3);transition:filter .14s,transform .14s}
  body[data-view="office"] .do-now .dn-cta:hover{filter:brightness(1.08);transform:translateY(-1px)}
  body[data-view="office"] .do-now .dn-cta:focus-visible{outline:2px solid #fff;outline-offset:2px}
  body[data-view="office"] .do-now .dn-shimmer{position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(100deg,transparent 22%,rgba(255,255,255,.10) 48%,transparent 74%);
    transform:translateX(-120%);animation:dnShimmer 5s ease-in-out infinite}
  @keyframes dnShimmer{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}
  /* healthy / on-track variant — calmer, green, no pulse/shimmer */
  body[data-view="office"] .do-now.calm{border-color:var(--d-edge);
    background:linear-gradient(100deg,rgba(34,197,94,.13),rgba(8,16,28,.5));box-shadow:0 14px 34px rgba(0,0,0,.4)}
  body[data-view="office"] .do-now.calm .dn-eyebrow{color:var(--good,#22c55e)}
  body[data-view="office"] .do-now.calm .dn-ico{color:var(--good,#22c55e);background:rgba(34,197,94,.14);
    border-color:color-mix(in srgb,var(--good,#22c55e) 45%,transparent);animation:none;box-shadow:none}
  body[data-view="office"] .do-now.calm .dn-shimmer{display:none}
  body[data-view="office"] .do-now.calm .dn-cta{background:transparent;color:var(--accent);
    border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:none}
  @media (prefers-reduced-motion: reduce){
    body[data-view="office"] .do-now .dn-ico{animation:none}
    body[data-view="office"] .do-now .dn-shimmer{display:none}
  }
  @media (max-width:760px){
    body[data-view="office"] .do-now{flex-wrap:wrap;gap:10px}
    body[data-view="office"] .do-now .dn-main{flex:1 1 60%}
    body[data-view="office"] .do-now .dn-cta{flex:1 1 100%;text-align:center}
  }
  /* A1/Law 14 (CEO 2026-07-18): the explainer is a proper FINDER mini-window (Law 10) that is AA in
     BOTH themes — dark glass + porcelain ink flip, NOT a fixed dark box. Reuses the mac-titlebar chrome. */
  /* INK-SWEEP 2026-07-25 (CEO: "rollovers... dark on light themes and light on dark themes") — the
     explainer popover is an INVERTED surface: it must POP off its page, never blend. Dark shell →
     porcelain plate + espresso ink; light shell → ink-navy glass + porcelain ink. One shared class. */
  .help-popup{
    position:fixed;z-index:9020;max-width:360px;min-width:230px;overflow:hidden;
    background:linear-gradient(158deg,rgba(252,250,247,.97),rgba(238,231,221,.98));
    color:#241f1b;border:1px solid rgba(20,14,8,.16);border-radius:12px;
    box-shadow:0 30px 70px rgba(0,0,0,.55),0 3px 10px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.7);
    -webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);
    animation:popupin .15s ease;pointer-events:auto;
  }
  body.mvc-light .help-popup{
    background:linear-gradient(158deg,rgba(21,29,45,.96),rgba(10,14,23,.97));
    color:#eef4fc;border-color:rgba(255,255,255,.16);
    box-shadow:0 30px 70px rgba(30,22,14,.4),0 3px 10px rgba(30,22,14,.25),inset 0 1px 0 rgba(255,255,255,.1);
  }
  @keyframes popupin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  .help-popup .mac-titlebar{margin:0;padding:9px 13px;background:rgba(20,14,8,.045);border-bottom:1px solid rgba(20,14,8,.12)}
  body.mvc-light .help-popup .mac-titlebar{background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.12)}
  /* a transient explainer isn't a real window — the fake amber/green lights go; the red dot stays (it's the live close control) */
  .help-popup .mac-tb-dot.amber,.help-popup .mac-tb-dot.green{display:none}
  .help-popup .mac-tb-title{font-family:var(--mono);font-size:9px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:#9d4300 !important}
  body.mvc-light .help-popup .mac-tb-title{color:#ff9a5f !important}   /* bright spine — AA on the ink plate (deep rust fails on dark) */
  .help-popup .hp-body{font-size:13.5px;line-height:1.55;color:inherit;margin:0;padding:14px 16px 15px}
  .help-popup .hp-body b{color:inherit}
  body.help-mode #helpBtn{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important}
  /* ===== CFO SNAPSHOT ===== */
  .cfo-overlay{
    position:fixed;top:58px;right:16px;z-index:8000;min-width:290px;
    background:#0b1c30;border:2px solid var(--accent);border-radius:3px;
    padding:18px 20px 14px;box-shadow:6px 6px 0 var(--accent);
    animation:popupin .15s ease;
  }
  .cfo-overlay h4{margin:0 0 12px;font-family:var(--mono);font-size:10px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
  .cfo-row{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;border-bottom:1px solid rgba(132,164,206,.1)}
  .cfo-row:last-of-type{border-bottom:none}
  .cfo-row .cr-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(234,241,251,.45)}
  .cfo-row .cr-val{font-size:17px;font-weight:900;color:#eef4fc;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
  .cfo-row .cr-val.warn{color:var(--accent)}
  .cfo-row .cr-val.danger{color:#ef4444}
  .cfo-row .cr-val.good{color:#4ade80}
  /* ===== COO — STATE OF THE AGENCY (full-screen, true data) ===== */
  .coo-overlay{position:fixed;inset:0;z-index:120;background:rgba(6,11,18,.82);backdrop-filter:blur(5px);
    display:flex;align-items:flex-start;justify-content:center;padding:34px 20px;overflow:auto}
  .coo-card{width:min(980px,100%);background:linear-gradient(168deg,#10192a,#0a121d);border:1px solid rgba(255,255,255,.12);
    border-top:4px solid var(--accent);border-radius:6px;padding:24px 28px 26px;box-shadow:0 40px 100px rgba(0,0,0,.6);color:#e7edf5}
  .coo-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}
  .coo-eye{font-family:var(--mono),monospace;font-size:10px;font-weight:800;letter-spacing:.22em;color:var(--accent);text-transform:uppercase}
  .coo-title{margin:3px 0 0;font-size:28px;font-weight:900;color:#fff}
  .coo-x{background:none;border:1px solid rgba(255,255,255,.2);color:#9fb4cc;border-radius:4px;width:36px;height:36px;cursor:pointer;font-size:15px}
  .coo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px 24px}
  .coo-sec{font-family:var(--mono),monospace;font-size:10px;font-weight:800;letter-spacing:.18em;color:#7e93ad;text-transform:uppercase;
    margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.09);padding-bottom:4px}
  .coo-card .cfo-row{padding:5px 0}
  .coo-card .cfo-row .cr-lbl{color:#9fb4cc;font-size:10px}
  .coo-card .cfo-row .cr-val{font-size:16px}
  .coo-clients{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0 24px}
  .coo-empty{color:#7e93ad;font-size:13px;padding:6px 0}
  .coo-flags{margin-top:16px}
  .coo-flag{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:#e7edf5;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.06);line-height:1.45}
  .coo-flag .dot{width:9px;height:9px;border-radius:50%;flex:none;margin-top:5px}
  .coo-flag.red .dot{background:#e0506b} .coo-flag.amber .dot{background:#f9b115} .coo-flag.good .dot{background:#1f9d57}
  .coo-flag.red{color:#fca5b3}
  .coo-notes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
  .coo-note{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:4px;padding:14px 16px}
  .coo-note-h{font-weight:800;font-size:13px;margin-bottom:6px;color:#fff}
  .coo-note p{margin:0 0 6px;font-size:13.5px;line-height:1.55;color:#dbe6f3}
  .coo-coo{border-left:1px solid var(--lg-hair-neutral,rgba(128,132,140,.2))} .coo-cfo{border-left:3px solid #4ade80}
  .coo-prio{color:#fff}
  @media(max-width:640px){.coo-notes{grid-template-columns:1fr}}
  /* defend COO text against the office-view h2/p !important repaint */
  body[data-view] .coo-card h2,body[data-view] .coo-card .coo-title{color:#fff !important}
  body[data-view] .coo-card p{color:#dbe6f3 !important}
  body[data-view] .coo-card .coo-prio,body[data-view] .coo-card .coo-note-h{color:#fff !important}
  .coo-gdpr{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}
  .coo-gdpr p{color:#aebfd4;font-size:12px;margin:4px 0}
  .coo-gdpr .coo-gdpr-note{font-size:11px;color:#7f93ad} .coo-gdpr .coo-gdpr-note a{color:var(--accent)}
  .coo-gdpr-btns{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
  .coo-gdpr-b{padding:7px 13px;border-radius:5px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.04);color:#e7eefa;font:600 12px system-ui;cursor:pointer}
  .coo-gdpr-b:hover{background:rgba(255,255,255,.09)}
  .coo-gdpr-b.danger{border-color:rgba(248,113,113,.5);color:#fda4a4} .coo-gdpr-b.danger:hover{background:rgba(248,113,113,.12)}
  body[data-view] .coo-card .coo-gdpr p{color:#aebfd4 !important}

  /* ============================================================================
     DASHBOARD — DARK CINEMATIC MISSION-CONTROL / WAR-ROOM HUD  (body[data-view="office"])
     v3 — the actual design CRAFT, not generic dark cards. Reproduces the interview.html
     polish + the Stitch "Manic Rebel" dashboard motifs, executed dark:
       · brutalist black frames w/ HARD burnt-orange OFFSET shadows (box-shadow:Npx Npx 0)
       · glass-shard clip-path panels w/ halftone print overlay
       · giant faint BLEED type behind sections (DISRUPT / STREAM / YIELD …)
       · synergy/NAIL-BITER gradient meter bars for rep/momentum/loyalty/yield
       · photoreal grayscale-halftone DOSSIER portraits (reuses assets/talent/face_*.jpg)
       · liquidity HERO + TOWER_STATUS-style progress + "ANALYSIS" corner flag
       · mono tactical micro-labels (CLASSIFIED / SECTOR / LIVE_FEED), rotated ±1–2°
     Layout/skin only — every ID / handler / sim path untouched; --accent honoured. ==== */
  body[data-view="office"]{
    --d-bg:#060d16; --d-panel:#0b1c30; --d-panel-2:#0e2236; --d-panel-3:#102a42;
    --d-edge:rgba(157,67,0,.55); --d-hair:rgba(120,150,190,.16);
    --d-text:#eaf1fb; --d-text-2:#9fb3cc; --d-amber:var(--accent);
    color:var(--d-text); background:#04080e;
  }
  /* cinematic dimmed penthouse/skyline backdrop — the dark room the HUD floats over */
  body[data-view="office"] #penthouse-bg{
    background:
      linear-gradient(180deg, rgba(6,13,22,.60), rgba(4,8,14,.94)),
      radial-gradient(120% 90% at 84% -12%, color-mix(in srgb, var(--accent) 24%, transparent) 0%, transparent 50%),
      radial-gradient(110% 100% at 0% 112%, rgba(157,67,0,.20) 0%, transparent 55%),
      url("https://images.unsplash.com/photo-1522083165195-3424ed129620?q=80&w=1600&auto=format&fit=crop")
      ,linear-gradient(165deg,#0a1626 0%,#070e1a 55%,#04080e 100%);
    background-size:cover,auto,auto,cover,auto; background-position:center;
    filter:grayscale(.5) contrast(1.14) brightness(.82);
  }
  body[data-view="office"] #penthouse-bg .photo{opacity:.26;filter:grayscale(.75) saturate(.7) contrast(1.12)}
  body[data-view="office"] #penthouse-bg .wash{
    background:linear-gradient(to top right,color-mix(in srgb,var(--accent) 14%,transparent),transparent 55%,rgba(251,191,36,.06))}
  body[data-view="office"] #penthouse-bg .halftone-bg{
    background-image:radial-gradient(var(--accent) .7px,transparent .7px);background-size:6px 6px;opacity:.12;mix-blend-mode:screen}
  body[data-view="office"] #penthouse-bg .grit-bg{opacity:.24;mix-blend-mode:overlay}
  body[data-view="office"] #penthouse-bg .skyline{opacity:.22}
  body[data-view="office"] #penthouse-bg::after{
    background:radial-gradient(150% 120% at 50% -10%,transparent 38%,rgba(0,0,0,.58) 100%)}
  body[data-view="office"] .bleed-text{color:rgba(180,205,235,.05)}
  body[data-view="office"] .bleed-2{color:rgba(157,67,0,.08)}
  body[data-view="office"]::after{mix-blend-mode:screen;opacity:.04}

  /* topbar → dark ops console */
  body[data-view="office"] .topbar{
    background:#081420;background:linear-gradient(180deg,rgba(8,18,30,.985),rgba(7,15,26,.965));
    border-bottom:4px solid var(--accent);box-shadow:0 12px 34px rgba(0,0,0,.5)}
  body[data-view="office"] .brandmark{color:var(--d-text)}
  body[data-view="office"] .topbar button{background:transparent;color:var(--d-text);border:2px solid var(--d-hair)}
  body[data-view="office"] .topbar button:hover{background:var(--accent);border-color:var(--accent);color:#0a0d12}
  body[data-view="office"] .stat{color:var(--d-text);border-left-color:var(--d-hair)}
  body[data-view="office"] .stat b{color:var(--d-text)}
  body[data-view="office"] .stat span{color:var(--d-text-2)}
  body[data-view="office"] .stat.stat-hero b{color:var(--accent)}

  /* :not([class]) — see the TYPE CATCH-ALL note further down. Element catch-alls only reach headings
     that have not declared a type/ink role of their own. */
  body[data-view="office"] h1:not([class]),body[data-view="office"] h2:not([class]),body[data-view="office"] h3:not([class]){color:var(--d-text)}
  body[data-view="office"] .muted,body[data-view="office"] .small,body[data-view="office"] p:not([class]){color:var(--d-text-2)}

  /* ---- per-section GIANT BLEED type (motif #4) — huge faint italic word behind a panel ---- */
  body[data-view="office"] .dash-bleed{position:absolute;z-index:0;font-weight:900;font-style:italic;
    text-transform:uppercase;letter-spacing:-.08em;line-height:.7;white-space:nowrap;pointer-events:none;
    color:rgba(180,205,235,.045);font-size:13vw;top:-2.6vw;right:-1vw;user-select:none;z-index:0}
  body[data-view="office"] .dash-bleed.orange{color:rgba(157,67,0,.10)}
  body[data-view="office"] .dash-grid .card>:not(.dash-bleed):not(.corner-flag){position:relative;z-index:1}

  /* ---- mono tactical eyebrow + ANALYSIS corner flag (motif #8) ---- */
  body[data-view="office"] .tac-eyebrow{font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.24em;
    text-transform:uppercase;color:var(--accent);display:block;margin-bottom:7px;opacity:.85}
  body[data-view="office"] .corner-flag{position:absolute;top:-14px;right:-14px;width:84px;height:84px;
    background:var(--accent);transform:rotate(45deg);z-index:3;box-shadow:0 0 22px color-mix(in srgb,var(--accent) 45%,transparent);
    display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
  body[data-view="office"] .corner-flag span{transform:rotate(-45deg) translate(-14px,-8px);
    font-family:var(--mono);font-size:7.5px;font-weight:900;letter-spacing:.12em;color:#0a0d12;text-transform:uppercase}

  /* MASTHEAD bar — black brutalist slab, hard orange offset shadow, glow, slight tilt */
  body[data-view="office"] .masthead.dash-bar{
    background:linear-gradient(145deg,#0b1c30,#06101c);border:3px solid #000;transform:rotate(-.4deg);
    box-shadow:14px 14px 0 var(--accent),0 0 0 1px var(--d-edge),0 24px 60px rgba(0,0,0,.55)}
  body[data-view="office"] .masthead .mh-name{color:#fff;font-size:clamp(28px,4vw,46px);text-shadow:0 6px 30px rgba(0,0,0,.7)}
  body[data-view="office"] .masthead .mh-kicker{color:var(--accent)}
  body[data-view="office"] .masthead .mh-sub{color:rgba(234,241,251,.55)}
  body[data-view="office"] .masthead .mh-data .big{color:var(--accent);font-size:clamp(30px,3.6vw,46px);
    text-shadow:0 0 30px color-mix(in srgb,var(--accent) 45%,transparent)}
  body[data-view="office"] .masthead .mh-data .lbl{color:rgba(234,241,251,.4)}

  /* ---- KPI STRIP — editorial brutalist tiles; HERO = liquidity, rotated, oversized, halftone ---- */
  body[data-view="office"] .kpi-strip{grid-template-columns:1.7fr 1fr 1fr 1fr 1fr 1fr}
  @media (max-width:960px){body[data-view="office"] .kpi-strip{grid-template-columns:repeat(3,1fr)}}
  @media (max-width:560px){body[data-view="office"] .kpi-strip{grid-template-columns:repeat(2,1fr)}}
  body[data-view="office"] .kpi{
    background:linear-gradient(150deg,var(--d-panel-2),var(--d-panel));border:2px solid #000;
    box-shadow:7px 7px 0 rgba(0,0,0,.7),inset 0 0 0 1px var(--d-hair);overflow:hidden}
  body[data-view="office"] .kpi::before{background:var(--accent);box-shadow:0 0 16px color-mix(in srgb,var(--accent) 70%,transparent)}
  body[data-view="office"] .kpi::after{content:"";position:absolute;inset:0;pointer-events:none;
    background-image:radial-gradient(rgba(180,205,235,.5) 10%,transparent 11%);background-size:7px 7px;opacity:.04;mix-blend-mode:screen}
  body[data-view="office"] .kpi .kpi-lbl{color:var(--d-text-2)}
  body[data-view="office"] .kpi .kpi-val{color:var(--d-text);text-shadow:0 0 18px rgba(0,0,0,.5)}
  body[data-view="office"] .kpi .kpi-sub{color:var(--d-text-2)}
  body[data-view="office"] .kpi.kpi-hero{
    grid-row:span 1;background:linear-gradient(150deg,#1f0e03,#0b1c30);border:3px solid var(--accent);transform:rotate(-1deg);
    box-shadow:12px 12px 0 var(--accent),0 0 40px color-mix(in srgb,var(--accent) 32%,transparent)}
  body[data-view="office"] .kpi.kpi-hero .kpi-lbl{color:rgba(251,191,36,.8)}
  body[data-view="office"] .kpi.kpi-hero .kpi-val{color:var(--accent);font-size:clamp(28px,3.4vw,44px);
    text-shadow:0 0 30px color-mix(in srgb,var(--accent) 60%,transparent)}
  body[data-view="office"] .kpi.kpi-hero .kpi-sub{color:rgba(234,241,251,.5)}

  /* ---- PANEL cards — REAL frosted glass (mVC OS bar): translucent + blur, no opaque brutalist fill,
     no hard offset shadow. Reads as glass over #penthouse-bg because it's actually see-through. ---- */
  body[data-view="office"] .dash-grid>.card,
  body[data-view="office"] .card.shard{
    background:linear-gradient(160deg,rgba(22,30,44,.46),rgba(9,12,20,.54));
    backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px) saturate(160%);
    border:1px solid rgba(255,255,255,.11);border-radius:22px;position:relative;
    box-shadow:0 24px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.02)}
  body[data-view="office"] .card.shard.shard-2{box-shadow:0 24px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.14)}
  /* jagged shard silhouette RETIRED for office — mVC bar uses soft rounded glass, not brutalist clip-path cuts */
  body[data-view="office"] .card.shard.shard-1,body[data-view="office"] .card.shard.shard-2{clip-path:none;transform:none}
  body[data-view="office"] .card.shard::after{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background-image:radial-gradient(rgba(180,205,235,.5) 10%,transparent 11%);background-size:8px 8px;opacity:.03;mix-blend-mode:screen}
  body[data-view="office"] .card::before{width:3px;background:var(--p2);box-shadow:0 0 14px rgba(var(--glow),.5);border-radius:3px}
  body[data-view="office"] .dash-grid .card .card{
    background:rgba(255,255,255,.03)!important;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.08);box-shadow:none;clip-path:none}
  body[data-view="office"] .dash-grid h2{font-family:Inter;font-style:italic;letter-spacing:-.04em}
  body[data-view="office"] h2::after{box-shadow:0 0 14px color-mix(in srgb,var(--accent) 80%,transparent)}

  body[data-view="office"] .glasswall .gw-ink{stroke:rgba(200,220,245,.5)}
  body[data-view="office"] .glasswall text{fill:rgba(200,220,245,.45)}

  /* ---- STREAM / REQUESTS rows — numbered, hover-invert to orange, giant ghost numeral ---- */
  body[data-view="office"] .rfi-row{border-bottom:1px solid var(--d-hair)}
  body[data-view="office"] .rfi-row .rfi-no{color:#fff;opacity:.10;font-size:50px}
  body[data-view="office"] .rfi-row .rfi-title{color:var(--d-text)}
  body[data-view="office"] .rfi-row .rfi-sub{color:var(--d-text-2)}
  body[data-view="office"] .rfi-row:hover{background:var(--accent);color:#0a0d12}
  body[data-view="office"] .rfi-row:hover .muted,
  body[data-view="office"] .rfi-row:hover .rfi-sub,
  body[data-view="office"] .rfi-row:hover .rfi-no{color:rgba(10,13,18,.82)}
  body[data-view="office"] .rfi-row:hover .rfi-no{opacity:.28}
  body[data-view="office"] .rfi-row:hover .rfi-budget b{color:#0a0d12}
  body[data-view="office"] .rfi-row .rfi-budget b{color:var(--accent)}

  /* ---- DOSSIER cards — photoreal grayscale-halftone portrait, brutalist navy frame, orange offset ---- */
  body[data-view="office"] .dossier-card{
    background:linear-gradient(150deg,#0e2236,#08131f);color:var(--d-text);
    border:2px solid #000;box-shadow:6px 6px 0 color-mix(in srgb,var(--accent) 78%,#000),0 0 18px rgba(0,0,0,.4)}
  body[data-view="office"] .dossier-card:hover{box-shadow:8px 8px 0 var(--accent),0 0 26px rgba(157,67,0,.3)}
  body[data-view="office"] .dossier-card,
  body[data-view="office"] .dossier-card .doss-name{color:var(--d-text)}
  body[data-view="office"] .dossier-card .muted{color:var(--d-text-2)}
  body[data-view="office"] .dossier-card .doss-role{color:rgba(234,241,251,.5)}
  body[data-view="office"] .dossier-card button{background:var(--accent);color:#0a0d12;border-color:var(--accent)}
  /* INK-SWEEP 2026-07-25: white rollover → deep brand-orange fill, white ink AA (CEO order) */
  body[data-view="office"] .dossier-card button:hover{background:color-mix(in srgb,var(--accent,#f97316) 78%,#000);color:#fff;border-color:color-mix(in srgb,var(--accent,#f97316) 78%,#000)}
  body[data-view="office"] .dossier-card .doss-photo{background:#04080e;border:2px solid #000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
  body[data-view="office"] .doss-dots i{background:rgba(180,205,235,.16)}
  body[data-view="office"] .doss-dots i.on{background:var(--accent)}
  body[data-view="office"] .doss-tag.oncall{border-color:var(--d-hair);color:var(--d-text-2)}
  body[data-view="office"] .dossier-card .endorse{color:var(--d-text-2)}
  /* POACH_OPS cards — dark office overrides */
  body[data-view="office"] .poach-card{border-color:#1a3350;background:#0e1e30;box-shadow:6px 6px 0 rgba(0,0,0,.4)}
  body[data-view="office"] .poach-card:hover{box-shadow:8px 8px 0 var(--accent)}
  body[data-view="office"] .poach-name{color:var(--d-text)}
  body[data-view="office"] .poach-role{color:var(--accent)}
  body[data-view="office"] .poach-meta{color:rgba(234,241,251,.5)}
  body[data-view="office"] .poach-cta{background:var(--accent);color:#0a0d12;border-color:var(--accent)}
  body[data-view="office"] .poach-cta:hover{background:color-mix(in srgb,var(--accent,#f97316) 78%,#000);color:#fff;border-color:color-mix(in srgb,var(--accent,#f97316) 78%,#000)}
  /* VAULT store — dark office overrides */
  body[data-view="office"] .store-item{border-color:rgba(255,255,255,.12);background:rgba(10,20,35,.5)}
  body[data-view="office"] .store-item.equipped{border-color:var(--accent)}
  body[data-view="office"] .store-pack{border-color:var(--d-hair);background:rgba(10,20,35,.5)}
  body[data-view="office"] .store-item-name{color:var(--d-text)}
  body[data-view="office"] .store-pack-coins{color:var(--d-text)}

  /* loyalty/quality bars on dark */
  body[data-view="office"] .bar{background:rgba(180,205,235,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
  body[data-view="office"] .dash-grid .small[style*="border-bottom"]{border-color:var(--d-hair)!important}
  body[data-view="office"] .pill{border-color:var(--d-hair);color:var(--d-text-2)}

  body[data-view="office"] button.primary{background:var(--accent);color:#fff;border-color:var(--ink);box-shadow:10px 10px 0 var(--ink),0 0 22px rgba(var(--glow),.28)}
  body[data-view="office"] button.primary:hover{background:var(--accent);color:#fff;box-shadow:13px 13px 0 var(--ink),0 0 30px rgba(var(--glow),.34)}
  body[data-view="office"] .dash-grid button:not(.primary),
  body[data-view="office"] .masthead button:not(.primary){background:transparent;color:var(--d-text);border:2px solid var(--d-hair)}
  body[data-view="office"] .dash-grid button:not(.primary):hover,
  body[data-view="office"] .masthead button:not(.primary):hover{background:var(--accent);border-color:var(--accent);color:#0a0d12}
  body[data-view="office"] .holdco-strong,
  body[data-view="office"] b[style*="var(--ink)"]{color:var(--d-text)!important}

  /* ---- HUD SYNERGY-METER strip (the NAIL-BITER gradient meter, motif from interview.html) ---- */
  .hud-meters{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:2px 0 0}
  @media (max-width:560px){.hud-meters{grid-template-columns:1fr}}
  .hud-meter .hm-top{display:flex;justify-content:space-between;align-items:baseline;
    font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--d-text-2)}
  .hud-meter .hm-top b{font-family:Inter;font-style:italic;font-size:18px;font-weight:900;letter-spacing:-.02em;color:var(--d-text)}
  .hud-meter .hm-bar{height:11px;border:2px solid #000;margin-top:5px;background:rgba(4,8,14,.7);position:relative;overflow:hidden;border-radius:3px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
  .hud-meter .hm-fill{position:absolute;inset:0;width:0;border-radius:2px;transform-origin:left center;
    background:linear-gradient(90deg,#b91c1c 0%,var(--accent) 48%,var(--accent-yellow) 100%);
    box-shadow:0 0 12px color-mix(in srgb,var(--accent) 50%,transparent);
    animation:hmGrow .85s cubic-bezier(.2,.8,.2,1) both}
  @keyframes hmGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  /* instrument tick marks over the track — every 10%, a tactical "live readout" feel */
  .hud-meter .hm-ticks{position:absolute;inset:0;pointer-events:none;
    background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),rgba(255,255,255,.10) calc(10% - 1px),rgba(255,255,255,.10) 10%)}
  .hud-meter .hm-verdict{font-family:var(--mono);font-size:7.5px;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--accent);margin-top:4px;display:flex;align-items:center;gap:5px}
  .hud-meter .hm-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;box-shadow:0 0 6px currentColor}
  @media (prefers-reduced-motion: reduce){ .hud-meter .hm-fill{animation:none} }

  /* ---- TOWER_STATUS-style progress (the "rising to the summit" rep ladder) ---- */
  .tower{margin-top:4px}
  .tower .tw-track{position:relative;height:5px;background:rgba(180,205,235,.10);margin:14px 0 8px}
  .tower .tw-fill{position:absolute;left:0;top:0;bottom:0;background:var(--accent);
    box-shadow:0 0 14px color-mix(in srgb,var(--accent) 60%,transparent);display:flex;align-items:center;justify-content:flex-end}
  .tower .tw-fill::after{content:"";width:11px;height:11px;background:#000;border:2px solid var(--accent);transform:rotate(45deg);translate:7px 0}
  .tower .tw-rungs{display:flex;justify-content:space-between;font-family:var(--mono);font-size:7.5px;
    font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:rgba(159,179,204,.38)}
  .tower .tw-rungs .on{color:var(--accent)}

  /* ===== DARK GLASS SHELL (default base skin — every screen that ISN'T body[data-view="office"]
     inherits this: Store/Vault, Season Pass, Result, Week Summary, Create, Boot. Was a "light
     penthouse" shell that reverted the persistent topbar to white whenever an overlay screen
     opened — jarring against the dark glass everywhere else. Now dark by default; office's own
     rules below still win there via higher specificity, unaffected by this change. ===== */
  body{ background:#05070c !important; background-image:none !important; color:#eaf1fb !important; }
  #penthouse-bg{ opacity:1 !important; }
  #penthouse-bg .photo{ opacity:.14 !important; filter:grayscale(.6) saturate(.7) contrast(1.1) brightness(.55) !important; }
  #penthouse-bg .wash{ background:linear-gradient(160deg,rgba(5,7,12,.75) 0%,rgba(5,7,12,.96) 100%) !important; }
  /* the decorative glass shards were tinted for the light theme (white translucent) — recolour dark so they
     read as subtle glass facets, not pale ghost triangles, on the dark shell */
  #penthouse-bg .s1{ background:rgba(var(--glow),.1) !important; border-color:rgba(255,255,255,.08) !important; }
  #penthouse-bg .s2{ background:color-mix(in srgb,var(--accent) 10%,rgba(255,255,255,.03)) !important; }
  #app,.wrap,main,#screen{ background:transparent !important; }
  /* dark glass topbar — frosted, palette-tinted, matches the office HUD */
  .topbar{ background:linear-gradient(180deg,rgba(10,14,22,.985),rgba(9,13,20,.965)) !important; border-bottom:1px solid rgba(255,255,255,.1) !important; backdrop-filter:blur(20px) saturate(160%) !important; }
  .topbar button{ background:rgba(255,255,255,.05) !important; color:#eaf1fb !important; border:1px solid rgba(255,255,255,.16) !important; }
  .topbar button:hover{ background:var(--accent) !important; border-color:var(--accent) !important; color:#0a0d12 !important; }
  .topbar .stat,.topbar .stat b{ color:#eaf1fb !important; }
  .topbar .stat span{ color:rgba(234,241,251,.55) !important; }
  /* (legacy .brandmark-img/-ver/-dark/-light rules removed — the wordmark is now one baked
     .brandmark-mark element; see the (5) BRANDMARK block. No markup references those classes.) */

  /* ============================================================================
     OFFICE / DASHBOARD — AGENCY-SIM COMMAND HUB  (Dieter, 2026-06-23)
     Researched from real management-sim UIs: Football Manager 26 (the "Tile & Card"
     system + Portal Dashboard + top section-nav), The Sims (persistent resource HUD),
     tycoon games (cash/week resource bar + obvious actions), Call of Duty (dark
     tactical HUD chrome, premium edge). This is NOT an editorial webpage and NOT an
     admin grid — it's a purpose-built game hub: a persistent top resource HUD, a
     section nav rail, and an FM tile-and-card board where every panel is a live
     snapshot. Dark tactical PitchNoir theme — deep navy-black base, burnt-orange
     accent, Inter + JetBrains Mono. Built WITH the global dark shell. Scoped to
     body[data-view="office"], LAST so it wins. Markup/CSS only; every ID/handler
     intact; --accent honoured throughout.
     ========================================================================== */
  body[data-view="office"]{
    /* tactical HUD token set — deep navy-black base, hairline chrome, status colours */
    --d-bg:#070f1a; --d-panel:#0b1626; --d-panel-2:#0e1c2e; --d-panel-3:#102740;
    --d-tile:rgba(13,26,44,.72); --d-tile-2:rgba(11,22,38,.66);
    --d-edge:rgba(var(--glow),.42); --d-hair:rgba(132,164,206,.14); --d-hair-2:rgba(132,164,206,.22);
    --d-text:#eef4fc; --d-text-2:#93a8c4; --d-amber:var(--accent);
    --hud-h:64px;
    background:#05090f !important; background-image:none !important; color:var(--d-text) !important;
    font-feature-settings:"tnum" 1, "ss01" 1;
  }
  /* cinematic dark command-room backdrop — the dark HUD floats over it */
  body[data-view="office"] #penthouse-bg{
    background:
      radial-gradient(130% 100% at 82% -8%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 46%),
      radial-gradient(120% 110% at -6% 110%, rgba(16,39,64,.55) 0%, transparent 52%),
      linear-gradient(168deg,#0a1322 0%,#070d18 52%,#04080f 100%) !important;
    background-size:cover !important; background-position:center !important;
    filter:none !important; opacity:1 !important;
  }
  body[data-view="office"] #penthouse-bg .photo,
  body[data-view="office"] #penthouse-bg .video,
  body[data-view="office"] #bgplate,
  body[data-view="office"] #penthouse-bg .skyline{opacity:0 !important}
  body[data-view="office"] #penthouse-bg .wash{
    background:linear-gradient(180deg,rgba(7,15,26,.35),rgba(5,9,15,.78)) !important}
  body[data-view="office"] #penthouse-bg .halftone-bg{
    background-image:radial-gradient(rgba(132,164,206,.5) .6px,transparent .6px) !important;
    background-size:7px 7px !important;opacity:.05 !important;mix-blend-mode:screen !important}
  body[data-view="office"] #penthouse-bg .grit-bg{opacity:.18 !important;mix-blend-mode:overlay !important}
  body[data-view="office"] #penthouse-bg::after{
    background:radial-gradient(150% 130% at 50% -6%,transparent 40%,rgba(0,0,0,.62) 100%) !important}
  /* kill the editorial ghost-words — a game HUD has no magazine bleed type */
  body[data-view="office"] .bleed-text{display:none !important}
  body[data-view="office"] #app,body[data-view="office"].wrap{background:transparent !important}

  /* ===== PERSISTENT TOP RESOURCE HUD — the always-visible command bar (Sims/tycoon/CoD
     resource readout). The existing topbar + #hud stat row, reskinned to a tactical HUD. ===== */
  body[data-view="office"] .topbar{
    background:linear-gradient(180deg,rgba(8,16,28,.96),rgba(6,12,21,.92)) !important;
    border-bottom:1px solid var(--d-hair-2) !important;
    box-shadow:0 1px 0 rgba(var(--glow),.22),0 14px 40px rgba(0,0,0,.55) !important;
    backdrop-filter:blur(14px) !important;-webkit-backdrop-filter:blur(14px) !important;
    position:sticky;top:0;z-index:60;padding:10px 22px !important;gap:18px}
  body[data-view="office"] .topbar>.material-symbols-outlined{color:var(--accent) !important}
  body[data-view="office"] .brandmark{color:var(--d-text) !important;font-style:normal;font-weight:900;letter-spacing:-.01em}
  body[data-view="office"] .brandmark b{color:var(--accent) !important}
  body[data-view="office"] .hud-label#hudmode{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em}
  /* the resource readouts → tactical HUD cells: the same grouped command-bar layout as the light skin,
     just re-coloured for the dark deck. Groups carry the hairline dividers; cells stay clean. */
  body[data-view="office"] #hud{gap:0 !important;flex-wrap:nowrap;overflow:hidden}
  body[data-view="office"] #hud::-webkit-scrollbar{display:none}
  body[data-view="office"] #hud .hud-group{border-left:1px solid var(--d-hair) !important}
  body[data-view="office"] #hud .stat{white-space:nowrap}
  body[data-view="office"] #hud .stat b{color:var(--d-text) !important}
  body[data-view="office"] #hud .hud-secondary .stat b{color:var(--d-text-2) !important}
  body[data-view="office"] #hud .stat span{color:var(--d-text-2) !important}
  body[data-view="office"] #hud .stat .stat-unit{color:var(--d-text-2) !important}
  body[data-view="office"] #hud .stat.stat-id{border-right:0}
  body[data-view="office"] #hud .stat.stat-hero b{color:var(--accent) !important;
    text-shadow:0 0 18px color-mix(in srgb,var(--accent) 45%,transparent)}
  body[data-view="office"] .topbar button{
    background:rgba(132,164,206,.05) !important;color:var(--d-text) !important;
    border:1px solid var(--d-hair-2) !important;border-radius:7px;font-weight:700;font-size:12px}
  body[data-view="office"] .topbar button:hover{
    background:var(--accent) !important;border-color:var(--accent) !important;color:#05090f !important}
  body[data-view="office"] #app{max-width:1280px;margin:0 auto;padding:18px 22px 110px}

  /* ===== SINGLE-SCREEN GAME HUD — lock the office to one 16:9 viewport; no page scroll.
     The top status bar already carries identity + KPIs, so the oversized masthead is hidden
     and the active view fills the stage, scrolling INTERNALLY only if it overflows. ===== */
  /* ⛔ THE SCROLL LOCK (CEO-75, 2026-08-11: "opening agency page is not scrollable"). Two eras
     of this shell are live at once: this early block capped #app to the viewport and hid body
     overflow; a later refactor (~line 8309) un-capped #app with height:auto !important so content
     grows past the fold — but this overflow:hidden was never lifted, so the grown page had no
     scroller and everything below the first viewport was simply unreachable. The body is the
     scroller now. X stays hidden (sideways slide is the cheapest "not built for this" tell). */
  body[data-view="office"]{overflow-x:hidden;overflow-y:auto}
  /* #app is a flex ROW: the main column (nav + actions + active view) + the in-flow feed rail.
     The rail is a real column, so it can never overlap content. */
  body[data-view="office"] #app{max-width:1720px;margin:0 auto;padding:12px 22px 12px;
    /* ⛔ THE 60px WAS A LIE (CEO, 2026-08-11: "opening agency page is not scrollable"). It was
       the topbar's height in July. The topbar is now an identity line plus two KPI rows — about
       130px — so this shell claimed 70px of viewport the topbar was already spending, pushed the
       content that far below the fold, and overflow:hidden made the loss unrecoverable by scroll.
       A layout must never hard-code another element's size: script-01.js measures the real topbar
       with a ResizeObserver into --pn-topbar-h, and 60px survives only as the no-JS fallback. */
    height:calc(100vh - var(--pn-topbar-h,60px));height:calc(100dvh - var(--pn-topbar-h,60px));
    display:flex;flex-direction:row;gap:14px;overflow:hidden}
  body[data-view="office"] .masthead.dash-bar{display:none !important}
  body[data-view="office"] .hud-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:10px;overflow:hidden}
  body[data-view="office"] .hud-main>.action-bar,
  body[data-view="office"] .hud-main>.hub-nav{flex:none;margin:0;position:static;top:auto}
  body[data-view="office"] .hud-main>.hub-nav{flex-wrap:nowrap;overflow-x:auto}
  body[data-view="office"] .hub-view{min-height:0}
  body[data-view="office"] .hub-view.on{flex:1 1 auto;min-height:0;overflow:auto;
    display:flex;flex-direction:column;padding:2px 6px 6px 0}
  body[data-view="office"] .hub-view.on>.card{flex:none}
  /* Performance: the opps|clients grid takes the remaining height and scrolls within —
     but never crushes below a readable floor (the view scrolls instead; the cams strip above is flex:none) */
  body[data-view="office"] .hub-view[data-view="v-perf"].on .perf-grid{flex:1 1 auto;min-height:280px}
  body[data-view="office"] .perf-grid>.card{display:flex;flex-direction:column;min-height:0}
  body[data-view="office"] .perf-grid>.card .panel-scroll,
  body[data-view="office"] .perf-grid>.card .rfi-stream{flex:1 1 auto;min-height:0;overflow:auto}
  /* On a true single screen, internal panels can breathe taller than the 230px board cap */
  body[data-view="office"] .hub-view.on .panel-scroll{max-height:none}
  @media(max-width:760px){
    /* ⛔ QA 2026-08-11 (#3): #advance sat at x=505 inside a 390px viewport, in a nowrap tab rail
       (scrollWidth 566 vs 352) with no scroll affordance — the CORE LOOP CTA was invisible on the
       phone dashboard the player had just arrived at. The rail wraps on phones; End week is
       always painted. */
    body[data-view="office"] .hud-main>.hub-nav{flex-wrap:wrap;overflow-x:visible}
    body[data-view="office"]{overflow:auto}
    body[data-view="office"] #app{height:auto;display:block;padding-bottom:90px}
    body[data-view="office"] .hud-main{overflow:visible}
    body[data-view="office"] .hub-view.on{overflow:visible}
  }

  /* ===== COMMAND HEADER + SECTION NAV RAIL (FM26 top-nav). The masthead becomes a compact
     command header; below it a persistent section-tab rail that jumps to each board section. ===== */
  body[data-view="office"] .masthead.dash-bar{
    background:linear-gradient(150deg,rgba(14,28,46,.92),rgba(8,18,30,.94)) !important;
    border:1px solid var(--d-hair-2) !important;border-left:1px solid var(--lg-hair-neutral,rgba(128,132,140,.2)) !important;
    border-radius:12px !important;box-shadow:0 18px 50px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04) !important;
    transform:none !important;padding:18px 24px !important;margin:0 0 14px !important;overflow:hidden}
  body[data-view="office"] .masthead.dash-bar::before,
  body[data-view="office"] .masthead.dash-bar::after{display:none !important}
  body[data-view="office"] .masthead .glasswall{opacity:.5;mix-blend-mode:screen;right:2%;width:30%}
  body[data-view="office"] .masthead .glasswall .gw-ink{stroke:rgba(147,168,196,.45)}
  body[data-view="office"] .masthead .glasswall text{fill:rgba(147,168,196,.4)}
  body[data-view="office"] .masthead.dash-bar .mh-in{
    display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
  body[data-view="office"] .masthead .tac-eyebrow{
    font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--accent) !important;
    text-transform:uppercase;display:block;margin-bottom:8px;opacity:.9}
  body[data-view="office"] .masthead.dash-bar .mh-kicker{
    font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--d-text-2) !important;margin-bottom:6px}
  body[data-view="office"] .masthead.dash-bar .mh-name{
    font-weight:900;font-style:normal;text-transform:none;letter-spacing:-.03em;line-height:1;
    font-size:clamp(26px,3.4vw,40px) !important;color:var(--d-text) !important;text-shadow:none !important;margin:0}
  body[data-view="office"] .masthead.dash-bar .mh-sub{
    font-family:Inter;font-size:12px !important;color:var(--d-text-2) !important;font-style:italic;
    border-left:1px solid var(--lg-hair-neutral,rgba(128,132,140,.2));padding-left:11px;margin-top:10px !important;max-width:520px;line-height:1.5}
  body[data-view="office"] .masthead.dash-bar .mh-data{text-align:right;flex:none}
  body[data-view="office"] .masthead.dash-bar .mh-data .big{
    font-weight:800;font-style:normal;font-size:clamp(26px,3vw,38px) !important;color:var(--accent) !important;
    letter-spacing:-.02em;text-shadow:0 0 26px color-mix(in srgb,var(--accent) 35%,transparent) !important;line-height:1;
    font-variant-numeric:tabular-nums}
  body[data-view="office"] .masthead.dash-bar .mh-data .lbl{
    font-family:var(--mono);font-size:9px !important;letter-spacing:.16em;color:var(--d-text-2) !important;margin-top:5px;text-transform:uppercase}

  /* the section nav rail (injected in markup as .hub-nav) — FM-style persistent tabs */
  body[data-view="office"] .hub-nav{
    display:flex;gap:6px;flex-wrap:wrap;margin:0 0 18px;padding:6px;
    background:linear-gradient(180deg,rgba(11,22,38,.7),rgba(8,16,28,.66));
    border:1px solid var(--d-hair);border-radius:12px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 10px 30px rgba(0,0,0,.4);position:sticky;top:calc(var(--hud-h) + 6px);z-index:40;
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  body[data-view="office"] .hub-tab{
    appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
    padding:9px 15px;border-radius:8px;border:1px solid transparent;background:transparent;
    color:var(--d-text-2);font-family:Inter;font-weight:700;font-size:12.5px;letter-spacing:.01em;
    transition:background .14s,color .14s,border-color .14s}
  body[data-view="office"] .hub-tab .ht-ico{font-size:15px;line-height:1;opacity:.9}
  body[data-view="office"] .hub-tab:hover{color:var(--d-text);background:rgba(132,164,206,.06)}
  /* SYSTEM_V2: active tab is a NAV-STATE, not the primary fill — accent as an underline marker,
     tonal tint + strong ink. (Kills the "one orange does buttons+tabs+charts" collision.) */
  body[data-view="office"] .hub-tab.on{
    color:var(--d-text);background:rgba(var(--glow),.12);border-color:rgba(var(--glow),.28);
    box-shadow:inset 0 -2px 0 var(--accent)}
  body[data-view="office"] .hub-tab.on .ht-ico{opacity:1;color:var(--accent)}
  /* ADVANCE WEEK lives in the nav, pinned right, primary — the one always-on core-loop control */
  /* critic/CEO: advancing is not the loud primary — the perf hero owns the win-business-first CTA.
     The nav-rail Advance is a quiet, always-reachable secondary, not a second glowing accent pill. */
  body[data-view="office"] .hub-advance{
    margin-left:auto;appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
    padding:9px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.05);
    color:var(--mvc-fg,#e7edf5);font-family:Inter;font-weight:700;font-size:12px;letter-spacing:.01em;
    transition:filter .14s,transform .2s cubic-bezier(.2,.7,.3,1),background .14s}
  body[data-view="office"] .hub-advance:hover{background:rgba(255,255,255,.09);transform:translateY(-1px)}
  body.mvc-light[data-view="office"] .hub-advance{color:var(--rust-ink,#1a1410) !important;border-color:rgba(11,28,48,.22)}
  @media (max-width:760px){
    /* let the tab strip wrap so Advance Week drops to its own full-width row — never scrolled off-screen */
    body[data-view="office"] .hud-main>.hub-nav{flex-wrap:wrap;overflow-x:visible}
    body[data-view="office"] .hub-advance{margin-left:0;flex:1 1 100%;justify-content:center;order:99}
  }
  /* contextual "throw a party" — small, calm, only rendered when morale's low or after a win */
  body[data-view="office"] .party-chip{appearance:none;cursor:pointer;padding:5px 11px;border-radius:7px;
    border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);background:rgba(var(--glow),.1);
    color:var(--accent);font-family:Inter;font-weight:700;font-size:11px;white-space:nowrap;line-height:1.2;
    transition:background .14s,color .14s}
  body[data-view="office"] .party-chip:hover{background:var(--accent);color:#05090f}

  /* ===== THE TILE & CARD BOARD (FM26 Portal Dashboard). 12-col, calm structured density.
     Every panel = a clean tactical tile snapshot, not a magazine slab. ===== */
  body[data-view="office"] .dash-grid{
    grid-template-columns:repeat(12,1fr) !important;gap:16px !important;margin-top:0 !important;
    align-items:start;grid-auto-flow:row dense}
  body[data-view="office"] .dash-grid .span-7{grid-column:span 7}
  body[data-view="office"] .dash-grid .span-5{grid-column:span 5}
  @media (max-width:1024px){body[data-view="office"] .dash-grid .span-4,
    body[data-view="office"] .dash-grid .span-5,body[data-view="office"] .dash-grid .span-6,
    body[data-view="office"] .dash-grid .span-7,body[data-view="office"] .dash-grid .span-8{grid-column:span 12}}

  /* the LIVE-VITALS strip above the board → a tactical HUD card */
  body[data-view="office"] .card.shard.shard-2[style*="margin:0 0 16px"]{
    margin:0 0 14px !important;border-radius:12px}

  /* TILE — dark glass, hairline border, accent TOP rule (the FM tile "header strip"), calm shadow.
     Hover lifts + warms the rule = "this opens a card". No tilt, no offset slab, no clip-path. */
  body[data-view="office"] .dash-grid>.card,
  body[data-view="office"] .card.shard{
    background:linear-gradient(158deg,var(--d-tile),var(--d-tile-2)) !important;
    backdrop-filter:blur(16px) !important;-webkit-backdrop-filter:blur(16px) !important;
    border:1px solid var(--d-hair) !important;border-radius:12px !important;clip-path:none !important;transform:none !important;
    box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 16px 40px rgba(0,0,0,.42) !important;
    padding:18px 20px 20px !important;position:relative;overflow:hidden;
    transition:border-color .16s,box-shadow .16s,transform .16s}
  body[data-view="office"] .card.shard::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
    background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 25%,transparent)) !important;
    box-shadow:0 0 14px color-mix(in srgb,var(--accent) 55%,transparent);width:auto !important;border-radius:0}
  body[data-view="office"] .card.shard.shard-2::before{
    background:linear-gradient(90deg,var(--d-hair-2),transparent) !important;box-shadow:none}
  body[data-view="office"] .dash-grid>.card:hover,
  body[data-view="office"] .card.shard:hover{
    border-color:var(--d-edge) !important;transform:translateY(-2px);
    box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 22px 54px rgba(0,0,0,.5),0 0 0 1px rgba(var(--glow),.12) !important}
  body[data-view="office"] .card.shard::after{display:none !important}
  /* nested module inside a tile */
  body[data-view="office"] .dash-grid .card .card{
    background:rgba(5,11,20,.55) !important;border:1px solid var(--d-hair) !important;
    box-shadow:none !important;clip-path:none !important;border-radius:9px}
  body[data-view="office"] .dash-grid .card .card::before{display:none !important}
  /* the giant editorial bleed words inside panels → off (game tiles stay clean) */
  body[data-view="office"] .dash-bleed{display:none !important}
  body[data-view="office"] .tac-eyebrow{
    font-family:var(--mono);font-size:8.5px !important;font-weight:700;letter-spacing:.2em;
    text-transform:uppercase;color:var(--accent) !important;display:block;margin-bottom:7px;opacity:.85}
  body[data-view="office"] .dash-grid h2{
    font-family:Inter;font-weight:800;font-style:normal;letter-spacing:-.01em;text-transform:none;
    color:var(--d-text) !important;font-size:clamp(15px,1.5vw,19px) !important;line-height:1.1;margin:0 0 12px;padding-bottom:0}
  body[data-view="office"] .dash-grid h2::after{display:none}
  body[data-view="office"] .dash-grid h2 span{color:var(--accent) !important}
  body[data-view="office"] .dash-grid h2.sub{font-size:11px !important;letter-spacing:.08em;text-transform:uppercase;color:var(--d-text-2) !important}
  body[data-view="office"] .corner-flag{background:var(--accent) !important;box-shadow:none !important}
  body[data-view="office"] .corner-flag span{color:#05090f !important}
  body[data-view="office"] h1:not([class]),body[data-view="office"] h2:not([class]),body[data-view="office"] h3:not([class]){color:var(--d-text) !important}
  body[data-view="office"] .muted,body[data-view="office"] .small,body[data-view="office"] p:not([class]){color:var(--d-text-2) !important}
  body[data-view="office"] .panel-scroll{max-height:300px}
  /* tactical scrollbar inside tiles */
  body[data-view="office"] .panel-scroll::-webkit-scrollbar{width:8px}
  body[data-view="office"] .panel-scroll::-webkit-scrollbar-thumb{background:rgba(132,164,206,.18);border-radius:8px}

  /* ---- HUD VITALS meters — the tactical synergy gauges (Sims needs-bar feel) ---- */
  body[data-view="office"] .hud-meter .hm-top{color:var(--d-text-2)}
  body[data-view="office"] .hud-meter .hm-top b{color:var(--d-text)}
  body[data-view="office"] .hud-meter .hm-bar{background:rgba(5,11,20,.7);border:1px solid var(--d-hair-2);box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
  body[data-view="office"] .hud-meter .hm-fill{box-shadow:0 0 12px color-mix(in srgb,var(--accent) 50%,transparent)}
  /* READ-THE-ROOM state colours — fill + verdict by how the agency's doing (scoped to office for specificity) */
  body[data-view="office"] .hud-meter.s-surge .hm-fill{background:linear-gradient(90deg,color-mix(in srgb,#22c55e 55%,#0a160c),#22c55e);box-shadow:0 0 12px rgba(34,197,94,.45)}
  body[data-view="office"] .hud-meter.s-surge .hm-verdict{color:#22c55e}
  body[data-view="office"] .hud-meter.s-hold .hm-fill{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 55%,#160a04),var(--accent));box-shadow:0 0 12px color-mix(in srgb,var(--accent) 45%,transparent)}
  body[data-view="office"] .hud-meter.s-hold .hm-verdict{color:var(--accent)}
  body[data-view="office"] .hud-meter.s-wobble .hm-fill{background:linear-gradient(90deg,color-mix(in srgb,#f59e0b 55%,#1a1003),#f59e0b);box-shadow:0 0 12px rgba(245,158,11,.45)}
  body[data-view="office"] .hud-meter.s-wobble .hm-verdict{color:#f59e0b}
  body[data-view="office"] .hud-meter.s-nail .hm-fill{background:linear-gradient(90deg,#7f1d1d,#ef4444);box-shadow:0 0 12px rgba(239,68,68,.5)}
  body[data-view="office"] .hud-meter.s-nail .hm-verdict{color:#ef4444}

  /* ---- KPI STRIP — kept as the secondary readout row, now tactical mini-tiles ---- */
  body[data-view="office"] .kpi-strip{
    display:grid !important;grid-template-columns:1.5fr repeat(5,1fr) !important;gap:12px !important;
    margin:0 0 14px !important;padding:0;border:0}
  @media (max-width:960px){body[data-view="office"] .kpi-strip{grid-template-columns:repeat(3,1fr) !important}}
  @media (max-width:560px){body[data-view="office"] .kpi-strip{grid-template-columns:repeat(2,1fr) !important}}
  body[data-view="office"] .kpi{
    background:linear-gradient(158deg,var(--d-tile),var(--d-tile-2)) !important;
    border:1px solid var(--d-hair) !important;border-radius:11px !important;
    box-shadow:0 12px 30px rgba(0,0,0,.36) !important;padding:13px 15px 12px !important;
    transform:none !important;clip-path:none !important;overflow:hidden;position:relative}
  body[data-view="office"] .kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
    background:var(--d-hair-2);box-shadow:none;display:block}
  body[data-view="office"] .kpi::after{display:none !important}
  body[data-view="office"] .kpi .kpi-lbl{
    font-family:var(--mono);font-size:8px !important;letter-spacing:.14em;text-transform:uppercase;
    color:var(--d-text-2) !important;display:block}
  body[data-view="office"] .kpi .kpi-val{
    font-weight:800;font-style:normal;letter-spacing:-.02em;font-size:clamp(20px,2.1vw,26px) !important;
    color:var(--d-text) !important;text-shadow:none !important;margin-top:5px;line-height:1;font-variant-numeric:tabular-nums}
  body[data-view="office"] .kpi.kpi-hero{
    background:linear-gradient(150deg,rgba(36,18,4,.9),rgba(13,26,44,.85)) !important;
    border:1px solid var(--d-edge) !important}
  body[data-view="office"] .kpi.kpi-hero::before{background:var(--accent);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 60%,transparent)}
  body[data-view="office"] .kpi.kpi-hero .kpi-lbl{color:rgba(251,191,36,.85) !important}
  body[data-view="office"] .kpi.kpi-hero .kpi-val{color:var(--accent) !important;font-size:clamp(22px,2.4vw,30px) !important;
    text-shadow:0 0 22px color-mix(in srgb,var(--accent) 45%,transparent)}
  body[data-view="office"] .kpi .kpi-sub{
    font-family:var(--mono);font-size:8px !important;letter-spacing:.1em;color:var(--d-text-2) !important;margin-top:4px;text-transform:uppercase}

  /* ---- tower / progression rail (the "climb" — tycoon ladder) ---- */
  body[data-view="office"] .tower .tw-track{background:rgba(132,164,206,.12)}
  body[data-view="office"] .tower .tw-fill{background:var(--accent);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 55%,transparent)}
  body[data-view="office"] .tower .tw-fill::after{background:#05090f;border:2px solid var(--accent)}
  body[data-view="office"] .tower .tw-rungs{color:rgba(147,168,196,.45)}
  body[data-view="office"] .tower .tw-rungs .on{color:var(--accent)}

  /* ---- STREAM / REQUEST rows — the FM inbox feel: dark rows, numbered, hover-warm ---- */
  body[data-view="office"] .rfi-row{border-bottom:1px solid var(--d-hair);padding:14px 12px}
  body[data-view="office"] .rfi-row .rfi-no{color:var(--d-text);opacity:.10;font-size:38px}
  body[data-view="office"] .rfi-row .rfi-title{color:var(--d-text);font-size:16px}
  body[data-view="office"] .rfi-row .rfi-sub{color:var(--d-text-2)}
  body[data-view="office"] .rfi-row:hover{background:rgba(var(--glow),.1)}
  body[data-view="office"] .rfi-row:hover .rfi-no{opacity:.22;color:var(--accent)}
  body[data-view="office"] .rfi-row:hover .muted,
  body[data-view="office"] .rfi-row:hover .rfi-sub{color:var(--d-text)}
  body[data-view="office"] .rfi-row .rfi-budget b{color:var(--accent)}
  body[data-view="office"] .rfi-row:hover .rfi-budget b{color:var(--accent-yellow)}

  /* ---- DOSSIER (talent/staff) cards — the FM player card: dark tile, photo, accent on hover ---- */
  body[data-view="office"] .dossier-card{
    background:linear-gradient(150deg,rgba(14,28,46,.9),rgba(8,18,30,.92)) !important;color:var(--d-text) !important;
    border:1px solid var(--d-hair) !important;border-radius:10px !important;
    box-shadow:0 10px 26px rgba(0,0,0,.4) !important;transform:none !important;
    transition:border-color .14s,transform .14s,box-shadow .14s}
  body[data-view="office"] .dossier-card:nth-child(even){transform:none !important}
  body[data-view="office"] .dossier-card:hover{
    border-color:var(--d-edge) !important;transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,0,0,.5),0 0 0 1px rgba(var(--glow),.14) !important}
  body[data-view="office"] .dossier-card,
  body[data-view="office"] .dossier-card .doss-name{color:var(--d-text) !important}
  body[data-view="office"] .dossier-card .muted{color:var(--d-text-2) !important}
  body[data-view="office"] .dossier-card .doss-role{color:var(--d-text-2) !important}
  body[data-view="office"] .dossier-card button{background:var(--accent) !important;color:#05090f !important;border-color:var(--accent) !important;font-weight:700}
  /* INK-SWEEP 2026-07-25: white rollover → deep brand-orange, white ink (CEO: rollovers go orange) */
  body[data-view="office"] .dossier-card button:hover{background:color-mix(in srgb,var(--accent,#f97316) 78%,#000) !important;color:#fff !important;border-color:color-mix(in srgb,var(--accent,#f97316) 78%,#000) !important}
  body[data-view="office"] .dossier-card .doss-photo{
    background:#05090f !important;border:1px solid var(--d-hair-2) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05) !important;border-radius:6px}
  body[data-view="office"] .doss-dots i{background:rgba(132,164,206,.18)}
  body[data-view="office"] .doss-dots i.on{background:var(--accent)}
  body[data-view="office"] .doss-tag.oncall{border-color:var(--d-hair-2);color:var(--d-text-2)}
  body[data-view="office"] .doss-tag.vetted{background:var(--accent-yellow);color:#05090f}
  body[data-view="office"] .dossier-card .endorse{color:var(--d-text-2)}
  body[data-view="office"] .dossier-card .endorse:hover{color:var(--bad)}

  /* ---- meters / pills / buttons on the dark hub ---- */
  body[data-view="office"] .bar{background:rgba(132,164,206,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
  body[data-view="office"] .pill{border-color:var(--d-hair-2);color:var(--d-text-2);background:rgba(132,164,206,.04)}
  /* office: same ink-distressed ORANGE STAMP as the light skin — white label, hard INK offset cast
     shadow (the ::before halftone+grit overlay is inherited from the base rule). Never dark-on-orange. */
  body[data-view="office"] button.primary{
    background:var(--accent) !important;color:#fff !important;border:2px solid var(--ink) !important;font-weight:900;
    box-shadow:10px 10px 0 var(--ink),0 0 24px rgba(var(--glow),.3) !important}
  body[data-view="office"] button.primary:hover{
    background:var(--accent) !important;color:#fff !important;transform:rotate(0deg) translateY(-1px);
    box-shadow:13px 13px 0 var(--ink),0 0 32px rgba(var(--glow),.38) !important}
  body[data-view="office"] .dash-grid button:not(.primary),
  body[data-view="office"] .masthead button:not(.primary){
    background:rgba(132,164,206,.05) !important;color:var(--d-text) !important;border:1px solid var(--d-hair-2) !important;border-radius:7px;font-weight:600}
  body[data-view="office"] .dash-grid button:not(.primary):hover,
  body[data-view="office"] .masthead button:not(.primary):hover{
    background:var(--accent) !important;border-color:var(--accent) !important;color:#05090f !important}
  body[data-view="office"] .holdco-strong,
  body[data-view="office"] b[style*="var(--ink)"]{color:var(--d-text) !important}
  body[data-view="office"] .crew.me{outline-color:var(--accent)}
  /* feed/list hairlines on dark */
  body[data-view="office"] .dash-grid .small[style*="border-bottom"]{border-color:var(--d-hair) !important}

  /* ===== VC INTERVIEW — LIGHT EDITORIAL RELIGHT (Stitch: light & airy + grunge + glass-shard)
     Jon 2026-06-26: the dark interview shell read as "tacky illegible panels" against the light
     game; relit to the same penthouse editorial craft the office already got (glass-shard, halftone
     tooth, hard offset shadows, bleed type, dossier answer-rows, brutalist-framed Marlowe still). ===== */
  .card.interview{ background:rgba(255,255,255,.5) !important; backdrop-filter:blur(24px) !important;
    -webkit-backdrop-filter:blur(24px) !important; border:1px solid rgba(255,255,255,.6) !important;
    border-left:1px solid var(--lg-hair-neutral,rgba(128,132,140,.2)) !important; border-radius:2px !important; overflow:hidden;
    box-shadow:14px 14px 0 rgba(11,28,48,.92),34px 34px 70px rgba(11,28,48,.12) !important; }
  .card.interview::after{ content:"" !important; position:absolute; inset:0; pointer-events:none; z-index:0;
    background-image:radial-gradient(#0b1c30 10%,transparent 11%); background-size:7px 7px; opacity:.05; mix-blend-mode:multiply; }
  .card.interview>*{ position:relative; z-index:1; }
  /* giant ghost bleed word behind the interrogation (Stitch editorial bleed type) */
  .interview-bleed{ position:absolute; z-index:0; pointer-events:none; user-select:none; font-weight:900;
    font-style:italic; text-transform:uppercase; letter-spacing:-.08em; line-height:.7; white-space:nowrap;
    color:rgba(11,28,48,.045); font-size:clamp(130px,24vw,320px); top:-7%; left:-3%; transform:rotate(-3deg); }
  .interview .qtext{ color:var(--ink) !important; }
  .interview .qkick{ font-family:var(--mono); font-size:10px; font-weight:800; letter-spacing:.26em;
    text-transform:uppercase; color:var(--accent2); margin:6px 0 -6px; }
  .interview .meetbar{ background:rgba(255,255,255,.55); border:1px solid rgba(11,28,48,.10);
    border-radius:2px; padding:6px 10px; }
  .interview .meetbar .boomlogo{ color:#fff; }
  .interview .meetbar .muted,.interview .muted,.interview .small{ color:var(--muted) !important; }
  .interview .verdictline{ color:var(--ink) !important; }
  /* answers → light dossier rows: ghost index numeral, hard accent edge, invert-to-ink on hover (office RFI craft) */
  .interview .answers{ counter-reset:ans; }
  .interview .answers .ansbtn,.interview .ansbtn{ position:relative; counter-increment:ans;
    background:linear-gradient(135deg,#fff,#f1f3fb) !important; color:var(--ink) !important;
    border:1px solid rgba(11,28,48,.12) !important; border-left:1px solid var(--lg-hair-neutral,rgba(128,132,140,.2)) !important;
    border-radius:2px !important; padding:15px 18px 15px 54px !important;
    box-shadow:5px 5px 0 rgba(11,28,48,.06) !important;
    transition:transform .14s,background .15s,box-shadow .15s,color .15s,border-color .15s; }
  .interview .answers .ansbtn::before{ content:counter(ans,decimal-leading-zero); position:absolute; left:15px;
    top:50%; transform:translateY(-50%); font-style:italic; font-weight:900; font-size:26px; letter-spacing:-.05em;
    color:rgba(11,28,48,.14); margin:0; }
  .interview .answers .ansbtn::after{ content:"" !important; }
  .interview .ansbtn:hover{ background:var(--ink) !important; color:#fff !important; border-color:var(--ink) !important;
    border-left-color:var(--accent) !important; transform:translate(2px,2px);
    box-shadow:3px 3px 0 var(--accent) !important; }
  .interview .ansbtn:hover::before{ color:rgba(255,255,255,.32) !important; }
  /* Marlowe's tile → a framed grayscale film still mounted on the bright page (brutalist frame + hard orange cast) */
  .interview .tile.client{ background:linear-gradient(135deg,#fff,#eaf0fb) !important;
    border:4px solid var(--ink) !important; border-radius:2px !important;
    box-shadow:12px 12px 0 var(--accent),30px 30px 64px rgba(11,28,48,.16) !important; }
  .tile.client .face-img{ width:100%; height:100%; min-height:320px; object-fit:cover; object-position:center top;
    filter:grayscale(.15) contrast(1.12) brightness(1.0); display:block; border-radius:0; }
  .interview .tile.client .read{ left:8px; right:auto; top:8px; width:auto; display:inline-block;
    background:var(--ink); color:#fff !important; padding:3px 11px; font-family:var(--mono); letter-spacing:.16em;
    text-shadow:none !important; border-radius:0; }
  .interview .tile.client .nm{ background:#fff !important; color:var(--ink) !important;
    border:1px solid rgba(11,28,48,.16); font-weight:700; border-radius:0; }
  /* ── INTERROGATION CAM — Marlowe is a hard-graded still with a slow push-in during questions.
     No talking/portrait clips in the interview (QC rule); motion+voice is saved for the verdict. ── */
  .mar-stage{overflow:hidden}
  .mar-stage .mar-face{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 12%;
    filter:grayscale(.85) contrast(1.28) brightness(.9);transform-origin:center 30%;
    animation:marPush 22s ease-in-out infinite alternate}
  .mar-stage::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 3px),
               radial-gradient(120% 90% at 50% 35%,transparent 46%,rgba(2,5,10,.55) 100%)}
  .mar-rec{position:absolute;top:12px;left:14px;z-index:3;font-family:var(--mono);font-size:10px;font-weight:800;
    letter-spacing:.18em;color:#ff5c49;text-shadow:0 1px 8px rgba(0,0,0,.8);animation:fcblink 1.6s steps(1) infinite}
  @keyframes marPush{from{transform:scale(1.04)}to{transform:scale(1.16)}}
  /* Q1 hero portrait keeps its brutalist frame: static img, overlay + REC only */
  .launch-portrait.mar-stage{overflow:visible}
  .launch-portrait.mar-stage .mar-face{position:relative;inset:auto;height:auto;animation:none;
    filter:grayscale(.8) contrast(1.24) brightness(.94)}
  .launch-portrait.mar-stage::before{border-radius:2px}
  /* question tile: same interrogation grade + slow push on the framed still */
  .interview .tile.client{overflow:hidden}
  .interview .tile.client .face-img{filter:grayscale(.85) contrast(1.3) brightness(.9);
    transform-origin:center 30%;animation:marPush 18s ease-in-out infinite alternate}
  /* no video-call chrome in the interrogation frame (the mic/cam chip was the stray white blob) */
  .interview .tile.client .mc{display:none !important}
  /* ── TALENT TOP-TRUMPS card + the meet-your-team pre-screen ── */
  .tt-card{width:330px;background:linear-gradient(165deg,#0d1523,#080d16);border:2px solid var(--accent,var(--accent));
    border-radius:14px;padding:14px 15px 13px;color:#eaf1fb;box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 6px rgba(var(--glow),.08);
    font-family:Inter,system-ui,sans-serif;text-align:left}
  .tt-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .tt-name{font-weight:900;font-size:17px;letter-spacing:-.01em;text-transform:uppercase;font-style:italic}
  .tt-ovr{display:flex;flex-direction:column;align-items:center;line-height:1;background:var(--accent,var(--accent));color:#160a02;
    border-radius:9px;padding:5px 9px;font-weight:900;font-size:21px}
  .tt-ovr em{font-style:normal;font-size:8px;letter-spacing:.2em;font-weight:800}
  .tt-mug{position:relative;height:150px;margin:10px 0 0;border-radius:9px;background:#1a2333 center 22%/cover no-repeat;
    filter:var(--col-grade,saturate(.9));overflow:hidden;border:1px solid rgba(255,255,255,.12)}
  .tt-chip{position:absolute;font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:.12em;
    background:rgba(5,9,16,.78);color:#ffb86b;padding:3px 7px;border-radius:5px}
  .tt-arch{top:7px;left:7px} .tt-age{top:7px;right:7px;color:#dfe9f7} .tt-ceil{bottom:7px;right:7px;color:#ffd76b;font-size:11px}
  .tt-role{font-size:11.5px;color:#9fb0c8;margin:8px 0 6px;font-weight:600}
  .tt-row{display:flex;align-items:center;gap:8px;margin-top:4px}
  .tt-k{font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:.08em;color:#8fa1ba;width:92px;flex:none}
  .tt-bar{flex:1;height:7px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
  .tt-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#ffb86b);border-radius:4px}
  .tt-bar--hi i{background:linear-gradient(90deg,#2fae6b,#5ef0a3)}
  .tt-bar--mid i{background:linear-gradient(90deg,#f0871f,#ffc16b)}
  .tt-bar--lo i{background:linear-gradient(90deg,#d0433a,#ff7a6b)}
  .tt-v{font-size:12px;font-weight:800;width:40px;text-align:right;font-variant-numeric:tabular-nums}
  .tt-v--hi{color:#5ef0a3} .tt-v--mid{color:#ffc16b} .tt-v--lo{color:#ff8a75}
  .tt-up{color:#3fd68f;font-style:normal;font-size:9px;margin-left:2px}
  .tt-dn{color:#ff6a55;font-style:normal;font-size:9px;margin-left:2px}
  .tt-duo{display:flex;gap:10px;margin-top:10px}
  .tt-trait{flex:1;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:6px 10px}
  .tt-trait em{font-style:normal;font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:.14em;color:#8fa1ba}
  .tt-trait b{font-size:15px} .tt-trait.hot{border-color:rgba(255,106,85,.55)} .tt-trait.hot b{color:#ff8a75}
  .tt-row--warn .tt-k{color:#ff8a75}
  .tt-warn{margin-top:10px;font-size:11px;font-weight:700;color:#ff8a75;background:rgba(224,64,58,.12);
    border:1px solid rgba(224,64,58,.4);border-radius:8px;padding:7px 10px;letter-spacing:.01em}
  .tt-glad{margin-top:10px;font-size:11px;font-weight:700;color:#5ef0a3;background:rgba(47,174,107,.1);
    border:1px solid rgba(47,174,107,.32);border-radius:8px;padding:7px 10px}
  .tt-flavor{margin-top:10px;font-size:11.5px;font-style:italic;color:#b7c6dc}
  /* ── HIRES redesign: recruitment budget + scouting board of full cards ── */
  .tt-mug .tt-chip{z-index:2}
  .tt-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s;z-index:1}
  .tt-mug:hover .tt-vid{opacity:1}
  .tt-vid.pv-none{display:none}
  .tt-screen{position:absolute;left:7px;bottom:7px;z-index:2;font-family:var(--mono);font-size:8px;font-weight:800;letter-spacing:.12em;background:var(--accent,var(--accent));color:#160a02;padding:2px 6px;border-radius:4px;opacity:.9;transition:opacity .2s}
  .tt-mug:hover .tt-screen{opacity:0}
  /* PEOPLE cards never swap to a stranger's video — the portrait itself gets a filmic "screening" hover:
     a slow Ken-Burns push in + a dossier scan-line sweep + a live indicator that stays lit. Same face, real motion. */
  .tt-mug--live{cursor:pointer;transition:background-size .9s ease,filter .35s ease;background-size:cover}
  .tt-mug--live:hover{background-size:116%;filter:saturate(1.05) contrast(1.05) brightness(1.06)}
  .tt-scan{position:absolute;inset:0;z-index:2;opacity:0;transition:opacity .3s;pointer-events:none;mix-blend-mode:screen;
    background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px)}
  .tt-scan::after{content:"";position:absolute;left:0;right:0;height:34%;top:-40%;
    background:linear-gradient(180deg,transparent,rgba(249,190,120,.28),transparent);animation:ttScanSweep 2.1s linear infinite}
  .tt-mug--live:hover .tt-scan{opacity:1}
  @keyframes ttScanSweep{0%{top:-40%}100%{top:110%}}
  .tt-screen--live{background:#0b0f16;color:#ff5647;border:1px solid rgba(255,86,71,.55);opacity:0;letter-spacing:.14em}
  .tt-mug--live:hover .tt-screen--live{opacity:1}
  @media(prefers-reduced-motion:reduce){ .tt-scan::after{animation:none} .tt-mug--live{transition:filter .2s} .tt-mug--live:hover{background-size:cover} }
  .hire-budget{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
  .hb-cell{background:linear-gradient(165deg,#0d1523,#0a1018);border:1px solid rgba(var(--glow),.22);border-radius:12px;padding:14px 16px;box-shadow:0 10px 30px rgba(0,0,0,.22)}
  .hb-k{display:block;font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:.14em;color:#a9b8cc;text-transform:uppercase}
  .hb-v{display:block;font-size:25px;font-weight:900;letter-spacing:-.02em;margin:5px 0 2px;color:#eaf1fb;font-variant-numeric:tabular-nums}
  .hb-v.good{color:#3fd68f} .hb-v.bad{color:#ff6a55}
  .hb-sub{font-size:10px;color:#7f8ea3}
  .scout-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-top:6px}
  /* ── CEO-60/41 · THE ENVELOPES. Ledger language: mono keys, hairlines, one accent. The strip is a
     statement of fact above the thing it governs; the allocation rows are a form you can read. ──── */
  .bg-strip{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px;padding:11px 13px;
    border:1px solid var(--pn-border,rgba(127,127,127,.28));border-radius:6px;background:var(--pn-tile,rgba(127,127,127,.08))}
  .bg-strip.is-unset{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
  .bg-strip.is-empty{border-color:#ffb86b}
  .bg-strip-k{font:800 11px/1.4 var(--mono);letter-spacing:.16em;color:var(--accent);white-space:nowrap}
  .bg-strip-nums{font:600 12px/1.5 'Inter',sans-serif;color:var(--pn-body,#dbe4ef)}
  .bg-strip-nums b{color:var(--pn-text,#fff)}
  .bg-strip-l{font-size:11px;line-height:1.45;color:var(--pn-muted,rgba(219,228,239,.62));flex:1 1 220px;min-width:0}
  .bg-strip-bar{flex:1 1 120px;min-width:80px;height:5px;border-radius:0;background:rgba(127,127,127,.24);overflow:hidden}
  .bg-strip-bar i{display:block;height:100%;background:var(--accent)}
  .bg-strip button{flex:none;min-height:44px}

  .bg-wrap{display:flex;flex-direction:column;gap:13px;margin:4px 0 12px}
  .bg-row{display:grid;grid-template-columns:110px 1fr 90px;grid-template-areas:"k s v" "w w w";
    align-items:center;gap:6px 10px}
  .bg-k{grid-area:k;font:800 11px/1.4 var(--mono);letter-spacing:.14em;color:var(--accent)}
  .bg-slider{grid-area:s;width:100%;min-height:44px;accent-color:var(--accent);cursor:pointer}
  .bg-v{grid-area:v;text-align:right;font:800 13px/1.2 'Inter',sans-serif;font-variant-numeric:tabular-nums;color:#fff}
  .bg-what{grid-area:w;font-size:11px;line-height:1.4;color:rgba(219,228,239,.58)}
  .bg-sum{margin:8px 0 4px;font-size:12px;line-height:1.5}
  .bg-sum .ok{color:var(--mvc-green,#3fd68f)} .bg-sum .off{color:#ffb86b}
  /* GREEN IN BUDGET, ORANGE OUT (CEO 2026-08-04) — per lever, because the whole point of four
     envelopes is knowing WHICH one is wrong. accent-color paints the track and the thumb together,
     so the state reads at a glance on a phone with no extra chrome. The row's label follows it, so
     the signal is never colour alone. */
  .bg-row.is-ok .bg-slider{accent-color:#2f9e5e}
  .bg-row.is-over .bg-slider{accent-color:#f97316}
  .bg-row.is-ok .bg-k{color:#3fd68f}
  .bg-row.is-over .bg-k{color:#ffb86b}
  .bg-warn{display:flex;flex-direction:column;gap:6px;margin-top:6px}
  .bg-w{margin:0;font-size:11px;line-height:1.45;padding-left:11px;position:relative;color:rgba(219,228,239,.72)}
  .bg-w::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:1px;background:currentColor;opacity:.6}
  .bg-w.warn{color:#ffb86b} .bg-w.bad{color:#ff8a72}
  .bg-override{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:11px;color:#ff8a72;min-height:44px}
  .sf-hire.is-over{background:transparent;border:1.5px solid #ffb86b;color:#ffb86b;cursor:pointer;opacity:1}
  @media (max-width:560px){
    .bg-row{grid-template-columns:1fr 90px;grid-template-areas:"k v" "s s" "w w"}
    .bg-strip{gap:9px}
    .bg-strip-nums{flex:1 1 100%}
  }

  /* ── CEO-93 · THE HANDLE FIELD + THE CONSENT ─────────────────────────────────────────────
     Sits inside the sign-in card, so it borrows the card's language rather than inventing one.
     The @ is a fixed prefix, not placeholder text, because the handle is an address. 11px floor
     and a 44px checkbox row so the whole thing is usable on the phone he is testing from. */
  .pn-handlewrap{display:flex;flex-direction:column;gap:7px;margin:2px 0 2px}
  .pn-handlerow{display:flex;align-items:stretch;gap:0}
  .pn-handleat{display:flex;align-items:center;padding:0 10px;min-height:44px;
    font:800 15px/1 var(--pn-mono,monospace);color:var(--accent,#f97316);
    border:1px solid var(--pn-border,rgba(127,127,127,.32));border-right:0;border-radius:6px 0 0 6px;
    background:var(--pn-tile,rgba(127,127,127,.10))}
  .pn-handlefield{flex:1 1 auto;min-width:0;border-radius:0 6px 6px 0 !important;min-height:44px}
  .pn-handlenote{margin:0;font-size:11px;line-height:1.45;color:rgba(234,241,251,.55)}
  .lg-light .pn-handlenote{color:#6b6157}
  .pn-termsrow{display:flex;align-items:flex-start;gap:9px;min-height:44px;padding:6px 0;
    font-size:11px;line-height:1.5;color:rgba(234,241,251,.66);cursor:pointer}
  .lg-light .pn-termsrow{color:#5c534a}
  .pn-termsrow input{flex:none;width:20px;height:20px;margin-top:1px;accent-color:var(--accent,#f97316);cursor:pointer}
  .pn-termsrow a{color:var(--accent,#f97316)}

  /* CEO-48: the market filter bar */
  .mkt-filters{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:2px 0 12px;padding:10px 12px;border:1px solid var(--pn-border,rgba(127,127,127,.25));border-radius:6px}
  .mkt-f{display:flex;flex-direction:column;gap:5px;min-width:0}
  /* CEO-69 (1) THE CLIPPED EYEBROW. 9px with .18em tracking on line-height:1 clips its own caps —
     the tracking pushes the last letter past the box and the tight leading shaves the ascenders.
     11px on a 1.4 leading clears both, and 11px is the phone type floor this game already holds. */
  .mkt-f span{font:800 11px/1.4 var(--mono);letter-spacing:.14em;opacity:.8}
  /* CEO-69 (2) THE RAW SELECTS. background:transparent + color:inherit is the whole bug: the closed
     control had no surface of its own, and the OPEN option list is painted by the platform, which
     took our near-white inherited ink onto its own white popup — invisible options on every dark
     theme. Give the control a real surface, state the ink on the OPTIONs explicitly, draw our own
     chevron (a native control with no affordance reads as a label), and take the height to 44px so
     it is a real touch target on the phone. */
  .mkt-f select{
    font:600 13px/1.2 'Inter',sans-serif;padding:10px 34px 10px 12px;border-radius:6px;min-height:44px;
    color:var(--pn-text,#eaf1fb);background-color:var(--pn-tile,rgba(127,127,127,.10));
    border:1px solid var(--pn-border,rgba(127,127,127,.35));cursor:pointer;
    -webkit-appearance:none;appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%239aa7b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 12px center;background-size:11px 8px}
  /* the popup is drawn by the platform, so its colours must be stated, not inherited */
  .mkt-f select option{color:#10151d;background:#f4f7fb}
  .mkt-f select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .mkt-count{margin-left:auto;font:800 11px/1.4 var(--mono);letter-spacing:.12em;opacity:.8;padding-bottom:12px}
  /* phone: two controls side by side at 390 leaves ~150px each — stack them and let the count
     take its own line rather than shrinking the type to fit. */
  @media (max-width:560px){
    .mkt-filters{gap:10px}
    .mkt-f{flex:1 1 100%}
    .mkt-f select{width:100%}
    .mkt-count{margin-left:0;padding-bottom:0}
  }
  .scout-board .tt-card{width:auto;border-radius:14px 14px 0 0;box-shadow:none;border-bottom:0}
  .scout-card{display:flex;flex-direction:column}
  .scout-foot{background:#0a1119;border:2px solid var(--accent,var(--accent));border-top:1px solid rgba(255,255,255,.1);border-radius:0 0 14px 14px;padding:11px 13px;display:flex;align-items:center;justify-content:space-between;gap:10px}
  .sf-cost{display:flex;flex-direction:column;gap:3px;min-width:0}
  .sf-fee{font-size:16px;font-weight:900;color:#fff} .sf-fee em{display:block;font-style:normal;font-family:var(--mono);font-size:8px;letter-spacing:.1em;color:#8fa1ba;margin-top:1px}
  .sf-wage{font-size:12px;font-weight:700;color:#b7c6dc;margin-top:4px} .sf-wage em{display:block;font-style:normal;font-size:9px;color:#7f8ea3;margin-top:1px}
  .sf-wage.warn,.sf-wage.warn em{color:#ffb86b}
  .sf-visa{font-family:var(--mono);font-size:9px;color:#ffb86b;letter-spacing:.05em}
  .sf-hire{flex:none;background:var(--accent,var(--accent));color:#160a02;border:0;border-radius:8px;font-weight:900;font-size:13px;padding:11px 16px;cursor:pointer;white-space:nowrap;transition:filter .12s,transform .12s}
  .sf-hire:hover{filter:brightness(1.08);transform:translateY(-1px)}
  .sf-hire.off{background:#26313f;color:#6b7a8c;cursor:not-allowed}
  .scout-card.squad .scout-foot{flex-direction:column;align-items:stretch;gap:9px;border-color:rgba(132,164,206,.35)}
  .sf-form{display:flex;gap:12px;font-size:12px;color:#b7c6dc;font-variant-numeric:tabular-nums}
  .sf-issue{color:#ff8a75;font-weight:700}
  .sf-actions{display:flex;gap:8px}
  .sf-invest{flex:1;background:rgba(63,214,143,.14);color:#7ef0b8;border:1px solid rgba(63,214,143,.4);border-radius:8px;font-weight:800;font-size:11px;letter-spacing:.03em;padding:9px 10px;cursor:pointer}
  .sf-invest:hover{background:rgba(63,214,143,.24)}
  .sf-fire{flex:none;background:transparent;color:#94a3b5;border:1px solid rgba(148,163,181,.4);border-radius:8px;font-weight:800;font-size:11px;padding:9px 14px;cursor:pointer}
  .sf-fire:hover{color:#ff8a75;border-color:rgba(255,138,117,.5)}
  /* ── squad clarity: ON STAFF ribbon + clean overview strip ──
     ⚠ SUPERSEDED 2026-08-01 (CEO-39, Tracey): the mint ON STAFF pill, the mint card outline and the
     .squad-ov / .squad-cover tile+chip strips are NO LONGER RENDERED — the squad panel is now the
     ledger in <style id="pn-squad-dossier-20260801">. .avail-badge (market cards) still uses the
     shared badge rule below, which is why this block is left standing rather than cut. Anything here
     that names .squad / .on-staff-badge / .squad-ov / .squad-cover / .sq-rail / .sq-face is dead. */
  .scout-card.squad{position:relative;outline:1px solid rgba(63,214,143,.28);border-radius:16px}
  .on-staff-badge,.avail-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
    font:800 9.5px var(--mono);letter-spacing:.14em;padding:5px 9px;border-radius:6px 6px 0 0;margin:0}
  .on-staff-badge{color:#0a1912;background:#3fd68f}
  .on-staff-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#0a1912}
  .avail-badge{color:#dbe6f4;background:rgba(12,18,28,.9);border:1px solid rgba(132,164,206,.4);border-bottom:0}
  .avail-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#7ab8ff}
  .scout-card.squad .tt-card,.scout-card .tt-card{border-top-left-radius:0}
  .squad-ov{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:6px 0 14px}
  .squad-ov .so-cell{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);
    border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
  .squad-ov .so-cell b{font-size:22px;font-weight:800;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
  .squad-ov .so-cell b .u{font-size:12px;color:#8fa1ba;font-weight:700}
  .squad-ov .so-cell span{font:700 9px var(--mono);letter-spacing:.14em;color:#8fa1ba;text-transform:uppercase}
  .squad-ov .so-cell.warn{border-color:rgba(255,138,117,.45)} .squad-ov .so-cell.warn b{color:#ff8a75}
  .squad-cover{display:flex;flex-wrap:wrap;gap:8px;margin:-4px 0 16px}
  .squad-cover .cov{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
    border-radius:8px;padding:7px 11px;font:700 10px var(--mono);letter-spacing:.1em;color:#c6d3e6}
  .squad-cover .cov em{font-style:normal;color:#8fa1ba}
  .squad-cover .cov.thin{border-color:rgba(255,138,117,.45);color:#ff8a75}
  .squad-cover .cov.thin em{color:#ff8a75}
  .squad-cover .cov b{color:#7ef0b8}
  @media(max-width:720px){ .squad-ov{grid-template-columns:repeat(2,1fr)} }
  @media(max-width:720px){ .hire-budget{grid-template-columns:repeat(2,1fr)} .scout-board{grid-template-columns:1fr} }
  /* ── CLIENTS SCREEN — book of business ── */
  .book-strip{margin-top:14px}
  .client-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-top:6px}
  .client-card{display:flex;flex-direction:column;background:linear-gradient(180deg,#0e1622,#0a0f18);border:1px solid rgba(132,164,206,.2);border-radius:14px;overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,.3);transition:transform .15s,box-shadow .15s,border-color .15s}
  .client-card:hover{transform:translateY(-3px);box-shadow:0 22px 54px rgba(0,0,0,.42);border-color:rgba(132,164,206,.42)}
  .client-card.at-risk{border-color:rgba(255,106,85,.5)}
  .client-card.at-risk:hover{border-color:rgba(255,106,85,.75)}
  .cc-banner{position:relative;height:132px;background:#141d2c center/cover no-repeat;overflow:hidden}
  .cc-reel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s;z-index:1}
  .cc-banner:hover .cc-reel{opacity:1}
  .cc-grad{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(8,12,20,.15) 0%,rgba(8,12,20,.35) 55%,rgba(8,12,20,.92) 100%)}
  .cc-sector{position:absolute;top:9px;left:10px;z-index:3;font-family:var(--mono);font-size:8.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#dfe9f6;background:rgba(10,16,26,.7);border:1px solid rgba(255,255,255,.16);padding:3px 7px;border-radius:5px;backdrop-filter:blur(3px)}
  .cc-status{position:absolute;top:9px;right:10px;z-index:3;font-family:var(--mono);font-size:9px;font-weight:900;letter-spacing:.08em;padding:3px 8px;border-radius:5px;background:rgba(10,16,26,.72);border:1px solid rgba(255,255,255,.16);color:#cdd9ea;backdrop-filter:blur(3px)}
  .cc-status.good{color:#7ef0b8;border-color:rgba(63,214,143,.45)} .cc-status.bad{color:#ff8a75;border-color:rgba(255,106,85,.5)}
  .cc-tape{position:absolute;left:10px;bottom:44px;z-index:3;font-family:var(--mono);font-size:8px;font-weight:800;letter-spacing:.12em;background:var(--accent,var(--accent));color:#160a02;padding:2px 6px;border-radius:4px;opacity:.92;transition:opacity .2s}
  .cc-banner:hover .cc-tape{opacity:0}
  .cc-brand{position:absolute;left:11px;bottom:10px;z-index:3;display:flex;align-items:center;gap:9px}
  .cc-logo{font-size:22px;line-height:1;filter:drop-shadow(0 2px 5px rgba(0,0,0,.5))}
  .cc-name{font-weight:900;font-size:17px;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)}
  .cc-body{padding:13px 14px 14px;display:flex;flex-direction:column;gap:10px}
  .cc-topline{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
  .cc-rev{display:flex;flex-direction:column;line-height:1.05}
  .cc-rev-v{font-size:22px;font-weight:900;letter-spacing:-.02em;color:#eaf1fb;font-variant-numeric:tabular-nums}
  .cc-rev-k{font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#8194ab;margin-top:2px}
  .cc-loywrap{flex:1;max-width:150px;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
  .cc-loy-k{font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#8194ab}
  .cc-loywrap .bar{width:100%;height:7px;background:rgba(132,164,206,.18);border-radius:99px;overflow:hidden}
  .cc-loywrap .bar i{display:block;height:100%;border-radius:99px;background:#84a4ce}
  .cc-loywrap .bar.good i{background:#3fd68f} .cc-loywrap .bar.bad i{background:#ff6a55}
  .cc-stats{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:#9fb0c6;font-family:var(--mono);letter-spacing:.02em}
  .cc-stat b{color:#dbe6f4;font-weight:800} .cc-stat b.bad{color:#ff8a75}
  .cc-alert{font-size:11px;line-height:1.5;color:#ffcabf;background:rgba(255,106,85,.1);border:1px solid rgba(255,106,85,.34);border-left:3px solid #ff6a55;border-radius:7px;padding:8px 10px}
  .cc-dinner{width:100%;background:rgba(var(--glow),.13);color:#ffc79a;border:1px solid rgba(var(--glow),.4);border-radius:9px;font-weight:800;font-size:12.5px;letter-spacing:.02em;padding:11px 12px;cursor:pointer;transition:background .12s,transform .12s}
  .cc-dinner:hover{background:rgba(var(--glow),.24);transform:translateY(-1px)}
  .cc-dinner.done{background:rgba(63,214,143,.12);color:#7ef0b8;border-color:rgba(63,214,143,.36);cursor:default;transform:none}
  /* active campaigns */
  .camp-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;margin-top:6px}
  .camp-card{display:flex;background:linear-gradient(180deg,#0e1622,#0a0f18);border:1px solid rgba(132,164,206,.2);border-radius:12px;overflow:hidden;box-shadow:0 12px 34px rgba(0,0,0,.26)}
  .camp-card.overdue{border-color:rgba(255,106,85,.45)}
  .camp-reel{position:relative;flex:none;width:104px;background:#141d2c center/cover no-repeat;overflow:hidden}
  .camp-reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;transition:opacity .3s}
  .camp-reel:hover video{opacity:1}
  .camp-play{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;font-size:20px;color:rgba(255,255,255,.85);text-shadow:0 2px 8px rgba(0,0,0,.6);transition:opacity .2s}
  .camp-reel:hover .camp-play{opacity:0}
  .camp-body{flex:1;min-width:0;padding:12px 13px;display:flex;flex-direction:column;gap:7px}
  .camp-text{margin:0;color:#aebccf;line-height:1.45}
  .camp-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
  .camp-fee{font-size:14px;font-weight:900;color:#eaf1fb;font-variant-numeric:tabular-nums}
  .camp-fee em{font-style:normal;font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#8194ab;display:block;margin-top:1px}
  /* force legible text on the dark client/campaign cards even under the light office skin */
  .client-card .doss-name,.camp-card .doss-name{color:#eaf1fb !important}
  .client-card .pill,.camp-card .pill{background:rgba(132,164,206,.16) !important;color:#d3deee !important;border:1px solid rgba(132,164,206,.32) !important}
  .client-card .pill.bad,.camp-card .pill.bad{background:rgba(255,106,85,.16) !important;color:#ff9884 !important;border-color:rgba(255,106,85,.4) !important}
  .client-card .pill.warn,.camp-card .pill.warn{background:rgba(255,184,107,.16) !important;color:#ffc789 !important;border-color:rgba(255,184,107,.4) !important}
  /* designed empty state */
  .clients-empty{position:relative;border-radius:12px;overflow:hidden;min-height:290px;display:flex;align-items:flex-end}
  .ce-reel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4;z-index:0}
  .ce-grad{position:absolute;inset:0;z-index:1;background:linear-gradient(105deg,rgba(8,12,20,.94) 0%,rgba(8,12,20,.82) 42%,rgba(8,12,20,.4) 100%)}
  .ce-inner{position:relative;z-index:2;padding:30px 34px 32px;max-width:560px}
  .ce-inner h3{font-size:clamp(22px,3.4vw,32px);font-weight:900;letter-spacing:-.02em;color:#fff;margin:8px 0 10px;font-style:italic;text-transform:uppercase}
  .ce-inner p{font-size:14px;line-height:1.65;color:#c3d2e6;margin:0 0 18px}
  .ce-cta{font-size:14px;padding:12px 22px}

  /* ============================================================
     SEASON / CAREER LADDER + GATED GROUP — dark cinematic modules.
     They sit INSIDE the light office skin, so every colour is forced
     with explicit values (and titles use divs, not h1/h2/h3) so the
     light-skin !important overrides can't wash them out.
     ============================================================ */
  /* ═══ THE CLIMB — a crafted vertical ascent spine (WAR-TABLE family; rides the --pn-* theme bridge) ═══ */
  .sea-climb{position:relative;margin:18px 0 4px}
  .sea-spine{position:absolute;left:26px;top:30px;bottom:30px;width:2px;background:var(--pn-hairline);z-index:0}
  .sea-spine i{position:absolute;left:-1px;top:0;width:4px;height:0;background:linear-gradient(180deg,var(--accent),#ffb86b);box-shadow:0 0 12px rgba(var(--glow),.55);transition:height 1.1s cubic-bezier(.2,.75,.25,1)}
  .sea-climb.pn-shown .sea-spine i{height:var(--sea-fill,0%)}
  .sea-rungs{position:relative;z-index:1;display:flex;flex-direction:column}
  .sea-rung{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:15px;padding:13px 2px;border-bottom:1px solid var(--pn-hairline)}
  .sea-rung:last-child{border-bottom:0}
  .sea-rung-node{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:var(--pn-r);background:var(--pn-tile);border:1.5px solid var(--pn-border);box-shadow:0 0 0 4px var(--pn-bg)}
  .sea-rung-no{font-family:var(--mono);font-size:15px;font-weight:900;letter-spacing:-.02em;color:var(--pn-muted);font-variant-numeric:tabular-nums}
  .sea-rung.done .sea-rung-node{border-color:rgba(63,214,143,.55)}
  .sea-rung.done .sea-rung-no{color:#3fd68f}
  .sea-rung.now .sea-rung-node{border-color:var(--accent);background:linear-gradient(180deg,rgba(157,67,0,.34),var(--pn-tile));
    box-shadow:0 0 0 4px var(--pn-bg),0 0 0 6px rgba(var(--glow),.30),0 0 26px rgba(var(--glow),.42);animation:seaPulse 2.4s ease-in-out infinite}
  .sea-rung.now .sea-rung-no{color:var(--accent)}
  .sea-rung.locked{opacity:.6}
  @keyframes seaPulse{0%,100%{box-shadow:0 0 0 4px var(--pn-bg),0 0 0 6px rgba(var(--glow),.28),0 0 20px rgba(var(--glow),.34)}50%{box-shadow:0 0 0 4px var(--pn-bg),0 0 0 7px rgba(var(--glow),.52),0 0 36px rgba(var(--glow),.58)}}
  @media(prefers-reduced-motion:reduce){ .sea-rung.now .sea-rung-node{animation:none} .sea-spine i{transition:none} }
  .sea-rung-main{min-width:0}
  .sea-rung-tag{font-family:var(--mono);font-size:8px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--pn-muted)}
  .sea-rung.now .sea-rung-tag{color:var(--accent)}
  .sea-rung-n{font-weight:900;font-size:clamp(16px,2vw,20px);letter-spacing:-.02em;color:var(--pn-text);line-height:1.05;margin:1px 0}
  .sea-rung.now .sea-rung-n{color:var(--accent)}
  .sea-rung-sub{font-size:11px;line-height:1.35;color:var(--pn-muted)}
  .sea-grow{flex:none;overflow:visible}
  .sea-grow rect{fill:var(--pn-faint)}
  .sea-grow rect.on{fill:var(--pn-body)}
  .sea-rung.now .sea-grow rect.on{fill:var(--accent)}
  .sea-rung.done .sea-grow rect.on{fill:#3fd68f}
  .sea-rung-state{flex:none;font-family:var(--mono);font-size:8px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px 3px;border-radius:0;border:1.5px solid var(--pn-hairline);color:var(--pn-muted);white-space:nowrap;transform:rotate(-2deg)}
  .sea-rung-state.now{color:#160a02;background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 2px rgba(var(--glow),.22)}
  .sea-rung-state.done{color:#3fd68f;border-color:rgba(63,214,143,.5)}
  .sea-rung-state.next{color:var(--pn-body);border-color:var(--pn-border)}
  @media(max-width:640px){
    .sea-rung{grid-template-columns:auto minmax(0,1fr) auto;gap:11px;padding:12px 0}
    .sea-grow{display:none}
    .sea-spine{left:24px}
    .sea-rung-node{width:38px;height:38px}
    .sea-rung-state{font-size:7px;padding:3px 6px 2px;letter-spacing:.1em}
  }

  /* --- season objectives with progress bars (bridged to --pn-* → repaints per theme) --- */
  .sea-obj-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 10px}
  .sea-obj-count{font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--pn-muted)}
  .sea-objs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
  @media(max-width:640px){ .sea-objs{grid-template-columns:1fr} }
  .sea-obj{background:var(--pn-tile);border:1px solid var(--pn-border);border-radius:var(--pn-r);padding:12px 14px;display:flex;flex-direction:column;gap:8px}
  .sea-obj.done{border-color:rgba(63,214,143,.42)}
  .sea-obj-top{display:flex;align-items:center;gap:8px}
  .sea-obj-tick{flex:none;width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;background:var(--pn-elev);color:var(--pn-muted);border:1px solid var(--pn-border)}
  .sea-obj.done .sea-obj-tick{background:rgba(63,214,143,.18);color:#3fd68f;border-color:rgba(63,214,143,.5)}
  .sea-obj-lbl{font-weight:800;font-size:12.5px;letter-spacing:-.01em;color:var(--pn-text);line-height:1.25}
  .sea-obj.done .sea-obj-lbl{color:var(--pn-muted);text-decoration:line-through}
  .sea-obj-rew{margin-left:auto;flex:none;font-family:var(--mono);font-size:8px;font-weight:800;letter-spacing:.06em;color:var(--accent);background:rgba(var(--glow),.12);border:1px solid rgba(var(--glow),.34);padding:3px 7px;border-radius:0;white-space:nowrap}
  .sea-obj.done .sea-obj-rew{color:#3fd68f;background:rgba(63,214,143,.12);border-color:rgba(63,214,143,.34)}
  .sea-obj-bar{height:6px;border-radius:0;background:color-mix(in srgb,var(--pn-text) 12%,transparent);overflow:hidden}
  .sea-obj-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#ffb86b);transition:width .5s}
  .sea-obj.done .sea-obj-bar i{background:#3fd68f}
  .sea-obj-meta{font-family:var(--mono);font-size:9px;letter-spacing:.03em;color:var(--pn-muted)}

  /* --- THE PROMOTION — a crafted objective dossier (graded plate + spine + ticked criteria + one loud CTA) --- */
  .sea-promo{position:relative;overflow:hidden;border-radius:var(--pn-r);border:1px solid var(--pn-border);border-left:1px solid var(--lg-hair-neutral,rgba(128,132,140,.2));background:var(--pn-panel);box-shadow:var(--pn-shadow);margin-top:2px}
  .sea-promo-plate{position:absolute;inset:0;z-index:0;background:url('/assets/env/agency_floor.jpg') center/cover no-repeat;opacity:.13;filter:grayscale(.5) contrast(1.05)}
  .sea-promo-grad{position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,var(--pn-bg) 0%,color-mix(in srgb,var(--pn-bg) 74%,transparent) 52%,color-mix(in srgb,var(--pn-bg) 40%,transparent) 100%)}
  .sea-promo-in{position:relative;z-index:2;padding:20px 22px 22px}
  .sea-promo-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
  .sea-promo-obj{font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:8px}
  .sea-promo-obj::before{content:"";width:16px;height:2px;background:var(--accent)}
  .sea-promo-prog{font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:.08em;color:var(--pn-muted);white-space:nowrap}
  .sea-promo-title{margin:10px 0 6px;font-weight:900;font-style:italic;text-transform:uppercase;font-size:clamp(24px,3.6vw,34px);letter-spacing:-.03em;color:var(--pn-text);line-height:1}
  .sea-promo-lead{font-size:12.5px;line-height:1.55;color:var(--pn-body);max-width:64ch;margin:0 0 4px}
  .sea-promo-crits{display:flex;flex-direction:column;margin:16px 0;border-top:1px solid var(--pn-hairline)}
  .sea-po-crit{padding:12px 0 13px;border-bottom:1px solid var(--pn-hairline)}
  .sea-po-crit-top{display:flex;align-items:center;gap:10px}
  .sea-po-tick{flex:none;width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;background:var(--pn-tile);color:var(--pn-muted);border:1px solid var(--pn-border)}
  .sea-po-crit.pass .sea-po-tick{background:rgba(63,214,143,.16);color:#3fd68f;border-color:rgba(63,214,143,.5)}
  .sea-po-k{font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--pn-body)}
  .sea-po-v{margin-left:auto;font-size:13px;font-weight:900;letter-spacing:-.01em;color:var(--pn-text);font-variant-numeric:tabular-nums;white-space:nowrap}
  .sea-po-crit.pass .sea-po-v{color:#3fd68f}
  .sea-po-bar{height:5px;border-radius:0;background:color-mix(in srgb,var(--pn-text) 12%,transparent);overflow:hidden;margin-top:9px}
  .sea-po-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),#ffb86b);transition:width .95s cubic-bezier(.2,.75,.25,1)}
  .sea-promo.pn-shown .sea-po-bar i{width:var(--fill,0%)}
  .sea-po-crit.pass .sea-po-bar i{background:linear-gradient(90deg,#1f9d5a,#3fd68f)}
  @media(prefers-reduced-motion:reduce){ .sea-po-bar i{transition:none;width:var(--fill,0%)} }
  #promoteAgency.sea-promo-cta{width:100%;appearance:none;cursor:pointer;border-radius:var(--pn-r);font-weight:900;font-size:15px;letter-spacing:.02em;text-transform:uppercase;padding:15px 18px;border:1.5px solid var(--pn-border);background:var(--pn-tile);color:var(--pn-body);transition:transform .12s,filter .12s,background .12s,color .12s}
  #promoteAgency.sea-promo-cta:not(:disabled){background:linear-gradient(180deg,var(--accent),#e0640f);color:#fff;border-color:var(--accent);box-shadow:0 12px 30px rgba(var(--glow),.34)}
  #promoteAgency.sea-promo-cta:not(:disabled):hover{transform:translateY(-1px);filter:brightness(1.06)}
  #promoteAgency.sea-promo-cta:disabled{cursor:not-allowed}
  .sea-promo-foot{margin:11px 0 0;text-align:center;font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--pn-muted)}

  /* --- season milestone rewards (numeral filing nodes, no emoji; bridged to --pn-*) --- */
  .sea-miles{display:flex;flex-direction:column;margin-top:6px}
  .sea-mile{display:flex;gap:13px;align-items:center;padding:11px 0;border-bottom:1px solid var(--pn-hairline)}
  .sea-mile:last-child{border-bottom:0}
  .sea-mile-ico{flex:none;width:38px;height:38px;border-radius:var(--pn-r);display:flex;align-items:center;justify-content:center;background:var(--pn-tile);border:1px solid var(--pn-border)}
  .sea-mile-no{font-family:var(--mono);font-size:12px;font-weight:900;letter-spacing:-.02em;color:var(--pn-muted);font-variant-numeric:tabular-nums}
  .sea-mile.hit .sea-mile-ico{border-color:rgba(63,214,143,.5);background:rgba(63,214,143,.08)}
  .sea-mile.hit .sea-mile-no{color:#3fd68f}
  .sea-mile-body{flex:1;min-width:0}
  .sea-mile-t{font-weight:800;font-size:13px;color:var(--pn-text);letter-spacing:-.01em}
  .sea-mile-d{font-size:11px;line-height:1.4;color:var(--pn-muted);margin-top:1px}
  .sea-mile-tag{flex:none;font-family:var(--mono);font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px 3px;border-radius:0;color:var(--pn-muted);border:1px solid var(--pn-border)}
  .sea-mile.hit .sea-mile-tag{color:#3fd68f;border-color:rgba(63,214,143,.5)}

  /* --- Season greens read AA on LIGHT themes (dark greens wash out on porcelain/platinum) --- */
  body.mvc-light[data-view="office"] .sea-rung.done .sea-rung-no,
  body.mvc-light[data-view="office"] .sea-rung.done .sea-rung-state.done,
  body.mvc-light[data-view="office"] .sea-mile.hit .sea-mile-no,
  body.mvc-light[data-view="office"] .sea-mile.hit .sea-mile-tag,
  body.mvc-light[data-view="office"] .sea-obj.done .sea-obj-tick,
  body.mvc-light[data-view="office"] .sea-obj.done .sea-obj-rew,
  body.mvc-light[data-view="office"] .sea-po-crit.pass .sea-po-tick,
  body.mvc-light[data-view="office"] .sea-po-crit.pass .sea-po-v,
  body.mvc-light[data-view="office"] .sea-std-v.good,
  body.mvc-light[data-view="office"] .sea-std-sub.sea-std-good{color:#1a7a37}
  body.mvc-light[data-view="office"] .sea-rung.done .sea-grow rect.on{fill:#1a7a37}
  body.mvc-light[data-view="office"] .sea-std-sub.sea-std-bad{color:var(--mvc-red,#c0392b)}

  /* --- GROUP locked / coming-soon state --- */
  .grp-lock{position:relative;border-radius:14px;overflow:hidden;min-height:340px;display:flex;align-items:flex-end}
  .grp-lock-bg{position:absolute;inset:0;background:center/cover no-repeat;z-index:0;filter:grayscale(.3) brightness(.9)}
  .grp-lock-grad{position:absolute;inset:0;z-index:1;background:linear-gradient(160deg,rgba(6,10,17,.72) 0%,rgba(6,10,17,.9) 55%,rgba(6,10,17,.98) 100%)}
  .grp-lock-in{position:relative;z-index:2;padding:30px 32px 30px;width:100%}
  .grp-lock-k{font-family:var(--mono,monospace);font-size:8.5px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:#84a4ce !important;display:inline-flex;align-items:center;gap:7px}
  .grp-lock-k::before{content:"\1F512";font-size:11px}
  .grp-lock-title{margin:9px 0 8px;font-weight:900;font-style:italic;text-transform:uppercase;font-size:clamp(24px,3.6vw,36px);letter-spacing:-.02em;color:#fff !important;line-height:1.02}
  .grp-lock-lead{font-size:13.5px;line-height:1.6;color:#c3d2e6 !important;max-width:64ch;margin:0 0 18px}
  .grp-tease{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
  @media(max-width:640px){ .grp-tease{grid-template-columns:1fr} }
  .grp-tease-cell{background:rgba(9,14,23,.62);border:1px solid rgba(132,164,206,.2);border-radius:11px;padding:13px 14px;backdrop-filter:blur(4px)}
  .grp-tease-ico{font-size:20px;margin-bottom:6px}
  .grp-tease-t{font-weight:800;font-size:13px;color:#eaf1fb !important;letter-spacing:-.01em}
  .grp-tease-d{font-size:11px;line-height:1.45;color:#8194ab !important;margin-top:3px}
  .grp-next{background:linear-gradient(180deg,#0e1622,#0a0f18);border:1px solid rgba(var(--glow),.34);border-left:1px solid var(--lg-hair-neutral,rgba(128,132,140,.2));border-radius:11px;padding:14px 16px}
  .grp-next-k{font-family:var(--mono,monospace);font-size:8px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#ffb86b !important}
  .grp-next-t{font-weight:800;font-size:14px;color:#eaf1fb !important;margin:4px 0 3px}
  .grp-next-d{font-size:11.5px;line-height:1.5;color:#9fb0c6 !important;margin:0 0 10px}
  .grp-next-bar{height:7px;border-radius:99px;background:rgba(132,164,206,.16);overflow:hidden}
  .grp-next-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent,var(--accent)),#ffb86b);transition:width .5s}
  .grp-next-cta{margin-top:12px;appearance:none;cursor:pointer;font-weight:800;font-size:12.5px;padding:10px 16px;border-radius:9px;background:rgba(var(--glow),.14);border:1px solid rgba(var(--glow),.42);color:#ffcb9a;transition:background .12s,transform .12s}
  .grp-next-cta:hover{background:rgba(var(--glow),.24);transform:translateY(-1px)}

  /* ═══ SEASON STANDING — one loud figure + hairline field readout (kills the six-card wall) ═══ */
  .sea-standing{position:relative;display:flex;align-items:stretch;margin-top:8px;border:1px solid var(--pn-border);border-radius:var(--pn-r);background:var(--pn-panel);overflow:hidden;box-shadow:var(--pn-shadow)}
  .sea-standing::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);z-index:2}
  .sea-std-hero{flex:1 1 auto;min-width:0;padding:16px 22px 17px;display:flex;flex-direction:column;justify-content:center;gap:2px}
  .sea-std-eye{font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--pn-muted);display:flex;align-items:center;gap:9px}
  .sea-std-eye::before{content:"";width:16px;height:2px;background:var(--accent);flex:none}
  .sea-std-fig{font-size:clamp(34px,5.4vw,52px);font-weight:900;letter-spacing:-.035em;line-height:.9;color:var(--pn-text);font-variant-numeric:tabular-nums;margin:6px 0 3px}
  .sea-std-fig .cur{font-size:.44em;font-weight:800;vertical-align:.24em;margin-right:2px;color:var(--pn-body)}
  .sea-std-sub{font-family:var(--mono);font-size:10px;letter-spacing:.03em;color:var(--pn-muted)}
  .sea-std-sub.sea-std-good{color:#3fd68f}
  .sea-std-sub.sea-std-bad{color:#ff6a55}
  .sea-std-read{flex:none;display:flex;flex-direction:column;border-left:1px solid var(--pn-hairline);min-width:244px}
  .sea-std-row{flex:1;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 20px;min-height:46px;border-bottom:1px solid var(--pn-hairline)}
  .sea-std-row:last-child{border-bottom:0}
  .sea-std-k{font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--pn-muted)}
  .sea-std-v{font-size:15px;font-weight:900;letter-spacing:-.01em;color:var(--pn-text);font-variant-numeric:tabular-nums;white-space:nowrap}
  .sea-std-v em{font-family:var(--mono);font-style:normal;font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pn-muted);margin-left:5px}
  .sea-std-v.good{color:#3fd68f}
  @media(max-width:640px){
    .sea-standing{flex-direction:column}
    .sea-std-read{border-left:0;border-top:1px solid var(--pn-hairline);min-width:0}
    .sea-std-row{padding:12px 20px;min-height:0}
  }
  /* the awards countdown — a designed ticked meter (12-week season) */
  .sea-awards{margin-top:14px}
  .sea-aw-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:7px}
  .sea-aw-k{font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--pn-muted)}
  .sea-aw-v{font-family:var(--mono);font-size:10px;font-weight:900;letter-spacing:.06em;color:var(--accent)}
  .sea-aw-bar{position:relative;height:14px;border-radius:0;background:color-mix(in srgb,var(--pn-text) 12%,transparent);border:1px solid var(--pn-hairline);overflow:hidden}
  .sea-aw-bar i{position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,var(--accent),#ffb86b);box-shadow:0 0 12px rgba(var(--glow),.42);transition:width 1s cubic-bezier(.2,.75,.25,1)}
  .sea-awards.pn-shown .sea-aw-bar i{width:var(--aw,0%)}
  .sea-aw-ticks{position:absolute;inset:0;display:flex;z-index:2;pointer-events:none}
  .sea-aw-ticks span{flex:1;border-right:1px solid var(--pn-bg)}
  .sea-aw-ticks span:last-child{border-right:0}
  .sea-aw-ticks span.done{background:rgba(var(--glow),.06)}
  @media(prefers-reduced-motion:reduce){ .sea-aw-bar i{transition:none;width:var(--aw,0%)} }
  @media(max-width:720px){ .client-board{grid-template-columns:1fr} .camp-board{grid-template-columns:1fr} }

  /* ══════════════════════════════════════════════════════════════════════════════════════════════
     THE ASCENT (CEO 2026-07-31: "this whole season page needs more imagery/video … make this more fun")
     THE BIG IDEA — **the climb is a building you can see**. Each rung is a FLOOR of the empire, shot
     from the committed library: boxes-on-the-floor loft → a working agency floor → the long boardroom
     → the room in the clouds. The rung you are ON is the only one in full colour and the only one that
     MOVES (a muted ambient loop on its own still poster, so the composition holds at zero video —
     set-piece law). Cleared floors are archived (desaturated, green keyline). Floors above you are not
     grey rows: they keep their photography, cool-graded behind a venetian occlusion, so they read as
     WITHHELD — something to want. Every plate carries its own dark slab for type (Law 1 on media).
     ══════════════════════════════════════════════════════════════════════════════════════════════ */
  .sea-rung{grid-template-columns:auto 168px minmax(0,1fr) auto auto auto;gap:16px;padding:14px 2px}
  .sea-rung.locked{opacity:1}   /* the old blanket opacity IS the "grey row" the CEO rejected */
  .sea-plate{position:relative;margin:0;width:168px;aspect-ratio:16/10;overflow:hidden;flex:none;
    border-radius:var(--pn-r);border:1px solid var(--pn-border);background:var(--pn-tile);isolation:isolate}
  .sea-plate img,.sea-plate video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
  .sea-plate video{z-index:1}
  .sea-plate-grade{position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(180deg,rgba(6,10,17,0) 34%,rgba(6,10,17,.55) 72%,rgba(6,10,17,.88) 100%)}
  .sea-plate-tag{position:absolute;left:0;bottom:0;z-index:3;font-family:var(--mono);font-size:7.5px;font-weight:800;
    letter-spacing:.16em;text-transform:uppercase;color:#fff;background:rgba(6,10,17,.9);padding:3px 7px 2px;
    white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  /* ink on an ACCENT fill is theme-split (the house pattern set by .sea-rung-state.now): near-black on
     the bright dark-theme orange, white on the deepened light-theme burnt orange. Both clear AA. */
  .sea-plate-live{position:absolute;top:6px;left:6px;z-index:3;display:inline-flex;align-items:center;gap:5px;
    font-family:var(--mono);font-size:7.5px;font-weight:900;letter-spacing:.16em;color:#160a02;background:var(--accent);padding:3px 7px 2px}
  .sea-plate-live i{width:5px;height:5px;border-radius:50%;background:#160a02;animation:seaRec 1.6s ease-in-out infinite}
  body.mvc-light[data-view="office"] .sea-plate-live{color:#fff}
  body.mvc-light[data-view="office"] .sea-plate-live i{background:#fff}
  @keyframes seaRec{0%,100%{opacity:1}50%{opacity:.25}}
  @media(prefers-reduced-motion:reduce){ .sea-plate-live i{animation:none} }
  /* cleared floors — archived, not dimmed to death */
  .sea-rung.done .sea-plate{border-color:rgba(63,214,143,.42)}
  .sea-rung.done .sea-plate img{filter:grayscale(.86) contrast(1.06) brightness(.96)}
  /* floors above — withheld behind a venetian occlusion (SST motif: blinds), NOT greyed out.
     Graded to stay READABLE as a room: you have to be able to see what you are climbing toward. */
  .sea-rung.locked .sea-plate img{filter:grayscale(.42) contrast(1.02) brightness(.78) saturate(.7)}
  .sea-rung.locked .sea-plate::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:repeating-linear-gradient(179deg,rgba(6,10,17,.5) 0 2px,rgba(6,10,17,0) 2px 6px)}
  /* the floor you are ON — the one hero object on the ladder */
  .sea-rung.now{padding:18px 2px 20px;background:linear-gradient(90deg,rgba(var(--glow),.10),transparent 52%)}
  .sea-rung.now .sea-plate{aspect-ratio:4/3;border-color:var(--accent);
    box-shadow:0 16px 36px rgba(0,0,0,.26),0 0 0 3px rgba(var(--glow),.16)}
  .sea-rung.now .sea-rung-n{font-size:clamp(20px,2.6vw,26px)}
  .sea-rung-up{margin-top:6px;padding-left:9px;border-left:2px solid var(--pn-border);
    font-family:var(--mono);font-size:9px;line-height:1.5;letter-spacing:.04em;color:var(--pn-muted);max-width:52ch}
  .sea-rung.now .sea-rung-up{border-left-color:var(--accent);color:var(--pn-body)}
  /* "every rung re-specs the game" — say WHAT it re-specs, in the dead column the ladder used to have */
  .sea-spec{display:flex;flex-direction:column;gap:5px;min-width:132px;max-width:190px}
  .sea-spec span{font-family:var(--mono);font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    color:var(--pn-muted);padding-left:11px;position:relative;line-height:1.35}
  .sea-spec span::before{content:"";position:absolute;left:0;top:.42em;width:5px;height:2px;background:var(--pn-border)}
  .sea-rung.now .sea-spec span{color:var(--pn-body)}
  .sea-rung.now .sea-spec span::before{background:var(--accent)}
  .sea-rung.done .sea-spec span::before{background:#3fd68f}
  @media(max-width:1080px){ .sea-spec{display:none} }
  @media(max-width:1080px){ .sea-rung{grid-template-columns:auto 168px minmax(0,1fr) auto auto} }
  @media(max-width:820px){
    .sea-rung{grid-template-columns:auto 124px minmax(0,1fr) auto}
    .sea-plate{width:124px}
    .sea-grow{display:none}
  }
  @media(max-width:560px){
    /* the state chip moves INTO the flow — floated over the plate it would put low-contrast ink on
       raw photography (Law 1 on media), which the 390px render caught */
    .sea-rung{grid-template-columns:auto minmax(0,1fr);
      grid-template-areas:"node plate" "main main" "state state";gap:12px}
    .sea-rung-node{grid-area:node}
    .sea-plate{grid-area:plate;width:100%}
    .sea-rung-main{grid-area:main}
    .sea-rung-state{grid-area:state;justify-self:start;margin:0}
  }

  /* ══ THE SEASON TAPE — the season's real numbers, drawn like a trading desk ══════════════════
     Two live series off S.kpiHist (the sim's own weekly snapshot): VALUATION as the loud accent area,
     REPUTATION as a quiet second line on its own right-hand scale. One annotated threshold (the actual
     promotion bar from the sim's criteria), semantic spine, mono tabular labels, one lit endpoint.
     Below it a designed TALLY of season form — wins/WahWahs are counts, so they are drawn as counted
     marks, never as an invented time series (the honest-single-datum law, DECISIONS 2026-07-25). ══ */
  /* the tape docks straight onto the standing readout and continues its accent spine — the season's
     figure and the season's line are ONE instrument, not two floating boxes */
  .sea-tape{position:relative;margin-top:-1px;border:1px solid var(--pn-border);border-top-color:var(--pn-hairline);
    border-radius:0 0 var(--pn-r) var(--pn-r);background:var(--pn-panel);box-shadow:var(--pn-shadow);overflow:hidden}
  .sea-tape::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);z-index:2}
  .sea-standing{border-radius:var(--pn-r) var(--pn-r) 0 0}
  .sea-tape-hd{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;
    padding:13px 18px 10px;border-bottom:1px solid var(--pn-hairline)}
  .sea-tape-eye{font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
    color:var(--pn-muted);display:flex;align-items:center;gap:9px}
  .sea-tape-eye::before{content:"";width:16px;height:2px;background:var(--accent);flex:none}
  .sea-tape-keys{display:flex;gap:14px;flex-wrap:wrap}
  .sea-tape-key{font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    color:var(--pn-muted);display:inline-flex;align-items:center;gap:6px}
  .sea-tape-key i{width:14px;height:2px;flex:none;background:var(--accent)}
  .sea-tape-key.rep i{background:#2b8f83}
  .sea-tape-key.is-thr i{background:transparent;border-top:2px dashed var(--pn-muted)}
  .sea-tape-plot{padding:14px 18px 4px}
  .sea-tape-svg{display:block;width:100%;height:auto;overflow:visible}
  .sea-tape-svg .gl{stroke:var(--pn-hairline);stroke-width:1}
  .sea-tape-svg .lbl{font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.1em;fill:var(--pn-muted)}
  .sea-tape-svg .lbl-hi{font-family:var(--mono);font-size:9px;font-weight:900;letter-spacing:.06em;fill:#fff}
  .sea-tape-svg .barlbl{font-family:var(--mono);font-size:8px;font-weight:800;letter-spacing:.1em;fill:var(--pn-body)}
  .sea-tape-foot{display:flex;align-items:center;gap:10px 26px;flex-wrap:wrap;padding:12px 18px 14px;
    border-top:1px solid var(--pn-hairline);background:color-mix(in srgb,var(--pn-text) 3%,transparent)}
  .sea-tally{display:flex;align-items:center;gap:9px}
  .sea-tally-k{font-family:var(--mono);font-size:8.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--pn-muted)}
  .sea-tally-marks{display:flex;gap:3px;align-items:flex-end}
  .sea-tally-marks i{width:6px;height:15px;background:var(--accent);display:block}
  .sea-tally-marks i.off{background:color-mix(in srgb,var(--pn-text) 14%,transparent);height:9px}
  .sea-tally-marks .wah{width:11px;height:15px;background:none;
    clip-path:polygon(0 0,100% 0,84% 46%,58% 62%,58% 84%,80% 100%,20% 100%,42% 84%,42% 62%,16% 46%);background-color:#b8860b}
  .sea-tally-v{font-size:15px;font-weight:900;letter-spacing:-.01em;color:var(--pn-text);font-variant-numeric:tabular-nums}
  .sea-tally-v em{font-family:var(--mono);font-style:normal;font-size:8px;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;color:var(--pn-muted);margin-left:5px}
  .sea-tally-v.is-good{color:#1f9d5a}
  .sea-tally-v.is-bad{color:#ff7a66}                                     /* AA on the dark panels */
  body.mvc-light[data-view="office"] .sea-tally-v.is-bad{color:#a52a1c}  /* AA on porcelain/platinum */
  .sea-tape-empty{padding:6px 18px 16px;font-family:var(--mono);font-size:9.5px;line-height:1.6;letter-spacing:.04em;color:var(--pn-muted)}

  /* ══ THE UNLOCK LADDER — milestones as a designed board, each with its own unlock imagery ══════
     The NEXT one to fall is the hero cell (full-width, big plate, live progress off real state); the
     rest are compact tiles. Locked tiles keep their photograph behind the venetian occlusion — the
     point is to WANT the room, not to read a grey "LOCKED" row. ══════════════════════════════════ */
  .sea-mls{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-top:8px}
  .sea-ml{position:relative;display:grid;grid-template-columns:124px minmax(0,1fr);gap:0;margin:0;
    border:1px solid var(--pn-border);border-radius:var(--pn-r);background:var(--pn-tile);overflow:hidden}
  .sea-ml-plate{position:relative;margin:0;overflow:hidden;min-height:96px;background:var(--pn-elev);isolation:isolate}
  .sea-ml-plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .sea-ml-plate .g{position:absolute;inset:0;z-index:2;
    background:linear-gradient(90deg,rgba(6,10,17,.34),rgba(6,10,17,.06) 60%,rgba(6,10,17,.42))}
  .sea-ml-no{position:absolute;left:0;bottom:0;z-index:3;font-family:var(--mono);font-size:7.5px;font-weight:900;
    letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(6,10,17,.9);padding:3px 7px 2px;
    white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .sea-ml.is-wide{grid-column:1 / -1}
  .sea-ml:not(.hit) .sea-ml-plate img{filter:grayscale(.4) brightness(.8) saturate(.72) contrast(1.02)}
  .sea-ml:not(.hit) .sea-ml-plate::after{content:"";position:absolute;inset:0;z-index:2;
    background:repeating-linear-gradient(179deg,rgba(6,10,17,.46) 0 2px,rgba(6,10,17,0) 2px 6px)}
  .sea-ml.hit{border-color:rgba(63,214,143,.45)}
  .sea-ml-body{padding:11px 13px 12px;display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0}
  .sea-ml-t{margin:0;font-weight:800;font-size:13px;letter-spacing:-.01em;color:var(--pn-text);line-height:1.2}
  .sea-ml-d{margin:0;font-size:11px;line-height:1.4;color:var(--pn-muted)}
  .sea-ml-tag{position:absolute;right:9px;top:9px;z-index:4;font-family:var(--mono);font-size:7.5px;font-weight:900;
    letter-spacing:.14em;text-transform:uppercase;padding:3px 7px 2px;color:var(--pn-muted);
    background:var(--pn-bg);border:1px solid var(--pn-border);transform:rotate(-2deg)}
  .sea-ml.hit .sea-ml-tag{color:#0d3a20;background:#3fd68f;border-color:#3fd68f}
  /* the hero cell — the next thing you can actually take */
  .sea-ml.is-next{grid-column:1 / -1;grid-template-columns:232px minmax(0,1fr);border-color:var(--accent);
    background:linear-gradient(90deg,rgba(var(--glow),.10),var(--pn-tile) 46%)}
  .sea-ml.is-next .sea-ml-plate{min-height:150px}
  .sea-ml.is-next .sea-ml-plate img{filter:none}
  .sea-ml.is-next .sea-ml-plate::after{display:none}
  .sea-ml.is-next .sea-ml-body{padding:15px 18px 16px;gap:5px}
  .sea-ml.is-next .sea-ml-t{font-size:clamp(17px,2.1vw,21px);font-weight:900;letter-spacing:-.02em}
  .sea-ml.is-next .sea-ml-d{font-size:12px;max-width:56ch}
  .sea-ml-eye{font-family:var(--mono);font-size:8.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
    color:var(--accent);display:flex;align-items:center;gap:8px}
  .sea-ml-eye::before{content:"";width:14px;height:2px;background:var(--accent);flex:none}
  .sea-ml-room{font-family:var(--mono);font-size:7.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
    color:var(--pn-muted);margin-bottom:1px}
  .sea-ml-prog{height:6px;margin-top:7px;background:color-mix(in srgb,var(--pn-text) 12%,transparent);overflow:hidden}
  .sea-ml-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),#ffb86b);
    transition:width .95s cubic-bezier(.2,.75,.25,1)}
  .sea-ml.pn-shown .sea-ml-prog i{width:var(--fill,0%)}   /* data-pn-reveal="stack" lands pn-shown on the CHILDREN */
  @media(prefers-reduced-motion:reduce){ .sea-ml-prog i{transition:none;width:var(--fill,0%)} }
  .sea-ml-meta{font-family:var(--mono);font-size:9px;letter-spacing:.05em;color:var(--pn-muted);margin-top:5px}
  .sea-ml.is-next .sea-ml-tag{color:#160a02;background:var(--accent);border-color:var(--accent)}
  body.mvc-light[data-view="office"] .sea-ml.is-next .sea-ml-tag{color:#fff}
  @media(max-width:820px){
    .sea-mls{grid-template-columns:1fr}
    .sea-ml.is-next{grid-template-columns:150px minmax(0,1fr)}
    .sea-ml.is-next .sea-ml-plate{min-height:124px}
  }
  @media(max-width:520px){
    .sea-ml,.sea-ml.is-next{grid-template-columns:1fr}
    .sea-ml-plate,.sea-ml.is-next .sea-ml-plate{min-height:108px}
  }

  /* light themes: the two chart greens/golds must clear AA on porcelain */
  body.mvc-light[data-view="office"] .sea-tally-marks .wah{background-color:#8a6508}
  body.mvc-light[data-view="office"] .sea-tape-key.rep i{background:#1f6f65}
  body.mvc-light[data-view="office"] .sea-ml.hit .sea-ml-tag{color:#08331b;background:#3fd68f;border-color:#2fae72}

  /* ═══ REDESIGNED HUB VIEWS — Performance · Floor · NBO (dark-card recipe, explicit light text) ═══ */
  /* KPI strips reuse .hire-budget/.hb-* grammar; these just widen the grid */
  .perf-vitals,.floor-pulse{grid-template-columns:repeat(5,1fr)}
  @media(max-width:900px){ .perf-vitals,.floor-pulse{grid-template-columns:repeat(3,1fr)} }
  @media(max-width:560px){ .perf-vitals,.floor-pulse{grid-template-columns:repeat(2,1fr)} }
  .hb-cell .hb-v.warn{color:#ffb86b}
  .perf-readrow{margin:18px 0 2px;padding-top:14px;border-top:1px solid rgba(132,164,206,.16)}
  .perf-readrow .tac-eyebrow{margin:0}

  /* FLOOR — week rhythm strip */
  .floor-rhythm{display:flex;align-items:center;gap:14px;margin-top:12px;flex-wrap:wrap}
  .floor-rhythm .fr-wk{font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--accent,var(--accent));text-transform:uppercase;white-space:nowrap}
  .floor-rhythm .fr-days{display:flex;gap:6px;flex:1;min-width:200px}
  .floor-rhythm .fr-day{flex:1;text-align:center;font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:.1em;color:#7f8ea3;background:rgba(132,164,206,.08);border:1px solid rgba(132,164,206,.16);border-radius:5px;padding:6px 4px}
  .floor-rhythm .fr-day.done{color:#9fb0c6;opacity:.55}
  .floor-rhythm .fr-day.on{color:#160a02;background:var(--accent,var(--accent));border-color:var(--accent,var(--accent));box-shadow:0 0 14px rgba(var(--glow),.5)}
  .floor-rhythm .fr-clock{font-family:var(--mono);font-size:15px;font-weight:900;color:#eaf1fb;font-variant-numeric:tabular-nums;white-space:nowrap}

  /* FLOOR — the board: war room + shipping + on the wire */
  .floor-board{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:14px;margin-top:10px}
  @media(max-width:820px){ .floor-board{grid-template-columns:1fr} }
  .fb-col{background:linear-gradient(180deg,#0e1622,#0a0f18);border:1px solid rgba(132,164,206,.2);border-radius:12px;padding:14px 15px;box-shadow:0 10px 30px rgba(0,0,0,.22);display:flex;flex-direction:column;gap:9px}
  .fb-col .tac-eyebrow{margin:0}
  .fb-warroom{border-color:rgba(var(--glow),.34)}
  .fb-live{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:.14em;color:#3fd68f}
  .fb-livedot{width:7px;height:7px;border-radius:50%;background:#3fd68f;box-shadow:0 0 8px #3fd68f;animation:fbpulse 1.6s infinite}
  @keyframes fbpulse{0%,100%{opacity:1}50%{opacity:.35}}
  @media (prefers-reduced-motion: reduce){ .fb-livedot{animation:none} }
  .fb-idle{font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.14em;color:#8194ab}
  .fb-hero{font-size:20px;font-weight:900;letter-spacing:-.02em;color:#eaf1fb;line-height:1.05}
  .fb-crew{display:flex;flex-wrap:wrap;gap:6px}
  .fb-chip{font-family:var(--mono);font-size:9.5px;font-weight:700;color:#d3deee;background:rgba(132,164,206,.14);border:1px solid rgba(132,164,206,.28);border-radius:20px;padding:3px 9px}
  .fb-note{font-size:11.5px;line-height:1.5;color:#9fb0c6 !important;margin:2px 0 0}
  .fb-col .linkbtn{align-self:flex-start;margin-top:2px}
  .fb-ships{display:flex;flex-direction:column;gap:7px}
  .fb-ship{display:flex;align-items:center;gap:9px;text-align:left;width:100%;background:rgba(132,164,206,.06);border:1px solid rgba(132,164,206,.16);border-radius:9px;padding:8px 10px;cursor:pointer;transition:.14s}
  .fb-ship:hover{border-color:var(--accent,var(--accent));background:rgba(var(--glow),.1);transform:translateX(2px)}
  .fb-ship.late{border-color:rgba(255,106,85,.45)}
  .fb-ship-logo{font-size:17px;flex:none}
  .fb-ship-body{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
  .fb-ship-body b{color:#eaf1fb;font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fb-ship-body i{color:#8194ab;font-style:normal;font-size:10.5px;font-family:var(--mono);letter-spacing:.03em}
  .fb-ship-due{font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:.06em;color:#ffb86b;flex:none}
  .fb-ship.late .fb-ship-due{color:#ff8a75}
  .fb-wire{display:flex;flex-direction:column;gap:7px}
  .fb-wire-line{display:flex;align-items:flex-start;gap:8px;font-size:11.5px;line-height:1.4;color:#c3d2e6}
  .fb-wire-dot{width:6px;height:6px;border-radius:50%;background:var(--accent,var(--accent));margin-top:5px;flex:none;box-shadow:0 0 6px rgba(var(--glow),.6)}

  /* ═══ NBO — THE WAR TABLE (Vero 2026-07-17 · CEO "AI slop" de-slop) ═══
     Kills the four generic rounded stat cards. In their place: ONE crafted tactical briefing bar —
     hairline-structured, burnt-orange spine, one loud figure (fee on the table), the rest read as a
     mono field-readout. Opportunity cards become brutalist CASE-FILE dossiers, not uniform SaaS cards. */
  .nbo-brief-bar{position:relative;display:flex;align-items:stretch;margin-top:16px;
    background:var(--pn-tile);border:1px solid var(--pn-border);border-left:1px solid var(--lg-hair-neutral,rgba(128,132,140,.2));
    border-radius:var(--pn-r,2px);overflow:hidden;box-shadow:var(--pn-shadow)}
  .nbo-bb-hero{flex:1 1 auto;min-width:0;padding:15px 22px 15px;display:flex;flex-direction:column;justify-content:center;gap:2px}
  .nbo-bb-eye{font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--pn-muted);display:flex;align-items:center;gap:9px}
  .nbo-bb-eye::before{content:"";width:18px;height:2px;background:var(--accent);flex:none}
  .nbo-bb-fig{font-size:clamp(34px,5.4vw,50px);font-weight:900;letter-spacing:-.035em;line-height:.9;color:var(--pn-text);font-variant-numeric:tabular-nums;margin:5px 0 2px}
  .nbo-bb-fig .cur{font-size:.46em;font-weight:800;vertical-align:.24em;margin-right:2px;color:var(--pn-body)}
  .nbo-bb-sub{font-family:var(--mono);font-size:10px;letter-spacing:.03em;color:var(--pn-muted)}
  .nbo-bb-read{flex:none;display:flex;flex-direction:column;justify-content:stretch;border-left:1px solid var(--pn-hairline);min-width:236px}
  .nbo-bb-row{flex:1;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 20px;border-bottom:1px solid var(--pn-hairline)}
  .nbo-bb-row:last-child{border-bottom:0}
  .nbo-bb-k{font-family:var(--mono);font-size:8.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--pn-muted);white-space:nowrap}
  .nbo-bb-v{font-family:var(--mono);font-size:14px;font-weight:900;letter-spacing:.02em;color:var(--pn-text);font-variant-numeric:tabular-nums;text-align:right;display:flex;align-items:baseline;gap:7px;justify-content:flex-end}
  .nbo-bb-v .u{font-family:var(--mono);font-size:8.5px;font-weight:800;letter-spacing:.12em;color:var(--accent)}
  .nbo-bb-v.good{color:#3fd68f} .nbo-bb-v.warn{color:#ffb86b} .nbo-bb-v.bad{color:#ff6a55}
  .nbo-bb-v.name{font-size:12px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;line-height:1.25}
  .nbo-bb-v.name em{display:block;font-style:normal;font-size:8.5px;font-weight:700;letter-spacing:.1em;color:var(--pn-muted)}
  @media(max-width:640px){
    .nbo-brief-bar{flex-direction:column}
    .nbo-bb-read{border-left:0;border-top:1px solid var(--pn-hairline);min-width:0}
    .nbo-bb-row{padding:11px 20px}
  }

  /* the board of dossiers */
  .nbo-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:8px}
  @media(max-width:720px){ .nbo-board{grid-template-columns:1fr} }
  .nbo-card{position:relative;display:flex;flex-direction:column;background:linear-gradient(180deg,#0e1622,#0a0f18);border:1px solid rgba(132,164,206,.2);border-radius:var(--pn-r,2px);overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,.3);transition:transform .15s,box-shadow .15s,border-color .15s}
  .nbo-card:hover{transform:translateY(-3px);box-shadow:0 22px 54px rgba(0,0,0,.42);border-color:rgba(132,164,206,.42)}
  .nbo-card.is-urgent{border-left:1px solid var(--lg-hair-neutral,rgba(128,132,140,.2))}
  .nbo-card.is-conflict{opacity:.72}
  .nbo-banner{position:relative;height:130px;background:#141d2c center/cover no-repeat;overflow:hidden}
  .nbo-reel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s;z-index:1}
  .nbo-banner:hover .nbo-reel{opacity:1}
  .nbo-grad{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(8,12,20,.15) 0%,rgba(8,12,20,.42) 55%,rgba(8,12,20,.94) 100%)}
  .nbo-no{position:absolute;top:2px;left:11px;z-index:3;font-style:italic;font-weight:900;font-size:40px;line-height:1;color:rgba(255,255,255,.2);font-variant-numeric:tabular-nums;letter-spacing:-.04em}
  /* the classified STAMP — a hand-stamped filing mark, not a rounded pill */
  .nbo-chip{position:absolute;top:12px;right:12px;z-index:3;font-family:var(--mono);font-size:9px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:rgba(10,16,26,.5);border:1.5px solid rgba(255,255,255,.82);padding:4px 8px 3px;border-radius:0;transform:rotate(-3deg);box-shadow:0 0 0 2px rgba(10,16,26,.28),inset 0 0 0 1px rgba(255,255,255,.14);backdrop-filter:blur(2px)}
  .nbo-flag{position:absolute;top:41px;right:12px;z-index:3;font-family:var(--mono);font-size:8.5px;font-weight:900;letter-spacing:.08em;color:#160a02;background:var(--accent,var(--accent));padding:3px 7px;border-radius:0}
  .nbo-tape{position:absolute;left:12px;bottom:44px;z-index:3;font-family:var(--mono);font-size:8px;font-weight:800;letter-spacing:.12em;background:var(--accent,var(--accent));color:#160a02;padding:2px 6px;border-radius:0;opacity:.94;transition:opacity .2s}
  .nbo-banner:hover .nbo-tape{opacity:0}
  .nbo-brand{position:absolute;left:12px;bottom:10px;right:12px;z-index:3;display:flex;align-items:center;gap:9px}
  .nbo-logo{font-size:22px;flex:none}
  .nbo-name{font-size:19px;font-weight:900;letter-spacing:-.03em;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6);line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* CASE-FILE hairline meta rule — the dossier feel */
  .nbo-file{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--pn-hairline);font-family:var(--mono);font-size:8.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--pn-muted)}
  .nbo-file b{color:var(--accent);font-weight:900}
  .nbo-file .d{opacity:.5}
  .nbo-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px}
  .nbo-topline{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
  .nbo-sector{font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8194ab}
  .nbo-fee{font-size:23px;font-weight:900;letter-spacing:-.03em;color:#eaf1fb;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1}
  .nbo-fee em{font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8194ab;font-style:normal;margin-left:5px}
  .nbo-brief{font-size:12px;line-height:1.5;color:#b4c3d8 !important;margin:0;min-height:36px}
  /* FIT READ — a designed, ticked meter that fills on entrance */
  .nbo-fit{background:rgba(4,8,14,.5);border:1px solid rgba(132,164,206,.14);border-left:2px solid rgba(132,164,206,.3);border-radius:0;padding:10px 12px}
  .nbo-fit-head{display:flex;align-items:center;justify-content:space-between}
  .nbo-fit-k{font-family:var(--mono);font-size:8px;font-weight:800;letter-spacing:.16em;color:#8194ab}
  .nbo-fit-v{font-family:var(--mono);font-size:11.5px;font-weight:900;letter-spacing:.04em;color:#eaf1fb}
  .nbo-fit-v.good{color:#3fd68f}.nbo-fit-v.bad{color:#ff6a55}.nbo-fit-v.warn{color:#ffb86b}
  .nbo-oddsbar{position:relative;height:12px;border-radius:0;background:rgba(132,164,206,.12);border:1px solid rgba(132,164,206,.16);overflow:hidden;margin:8px 0 5px}
  .nbo-oddsbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),#ffb86b);transition:width .95s cubic-bezier(.2,.75,.25,1)}
  .nbo-card.pn-shown .nbo-oddsbar i{width:var(--fill,0%)}
  .nbo-oddsbar::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),rgba(132,164,206,.22) calc(10% - 1px),rgba(132,164,206,.22) 10%)}
  .nbo-oddsbar.good i{background:linear-gradient(90deg,#1f9d5a,#3fd68f)}
  .nbo-oddsbar.bad i{background:linear-gradient(90deg,#7f1d1d,#ff6a55)}
  .nbo-oddsbar.warn i{background:linear-gradient(90deg,#b45309,#ffb86b)}
  .nbo-fit-scale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:7.5px;font-weight:800;letter-spacing:.08em;color:#6f7f95;margin:0 0 6px}
  .nbo-fit-meta{font-family:var(--mono);font-size:9.5px;letter-spacing:.02em;color:#7f8ea3}
  @media(prefers-reduced-motion:reduce){ .nbo-oddsbar i{transition:none;width:var(--fill,0%)} }
  /* LIGHT themes (CEO 2026-07-09, "visibility is fucked"): the card body was hardcoded dark-theme
     ink — near-white fee, slate brief and a translucent-dark fit slab all wash out on porcelain. */
  body.mvc-light[data-view="office"] .nbo-fee{color:var(--rust-ink)}
  body.mvc-light[data-view="office"] .nbo-fee em,
  body.mvc-light[data-view="office"] .nbo-sector{color:var(--rust-ink-55)}
  body.mvc-light[data-view="office"] .nbo-brief{color:var(--rust-ink-70) !important}
  body.mvc-light[data-view="office"] .nbo-fit{background:var(--track);border-color:var(--rust-border)}
  body.mvc-light[data-view="office"] .nbo-fit-k{color:var(--rust-ink-55)}
  body.mvc-light[data-view="office"] .nbo-fit-v{color:var(--rust-ink)}
  body.mvc-light[data-view="office"] .nbo-fit-v.good{color:#1f7a3a}
  body.mvc-light[data-view="office"] .nbo-fit-v.bad{color:var(--mvc-red,#c0392b)}
  body.mvc-light[data-view="office"] .nbo-fit-meta{color:var(--rust-ink-55)}
  body.mvc-light[data-view="office"] .nbo-fit-scale{color:var(--rust-ink-55)}
  body.mvc-light[data-view="office"] .nbo-file{color:var(--rust-ink-55);border-color:var(--rust-border)}
  /* the briefing bar rides the --pn-* bridge, so its ink follows the theme; only recolour the
     semantic good/warn/bad readouts for AA on porcelain (the dark greens/ambers wash out on light). */
  body.mvc-light[data-view="office"] .nbo-bb-v.good{color:#1f7a3a}
  body.mvc-light[data-view="office"] .nbo-bb-v.warn{color:#b45309}
  body.mvc-light[data-view="office"] .nbo-bb-v.bad{color:var(--mvc-red,#c0392b)}
  .nbo-cta{appearance:none;cursor:pointer;border:0;width:100%;padding:11px;border-radius:var(--pn-r,2px);background:var(--accent,var(--accent));color:#160a02;font-weight:900;font-size:13px;letter-spacing:.04em;text-transform:uppercase;transition:.14s}
  .nbo-cta:hover{filter:brightness(1.08);transform:translateY(-1px)}
  .nbo-cta.off{background:rgba(132,164,206,.12);color:#8194ab;cursor:not-allowed}
  /* the light "office" skin forces h2/h3 dark via !important — override on our dark hero/empty panels */
  body[data-view="office"] .floor-live h2,body[data-view="office"] .floor-top h2{color:#fff !important;text-shadow:0 4px 20px rgba(0,0,0,.6)}
  body[data-view="office"] .floor-live .tac-eyebrow{color:#cfe0f5 !important}
  body[data-view="office"] .clients-empty h3,body[data-view="office"] .nbo-empty h3{color:#fff !important}

  body[data-view="meetteam"] #app{display:flex;align-items:center;justify-content:center}
  .meetteam-stage{max-width:min(780px,calc(100vw - 24px));margin:3vh auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;background:rgba(9,14,23,.82);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:28px 34px 30px;box-shadow:0 30px 80px rgba(0,0,0,.4)}
  .mt-title{font-weight:900;font-size:clamp(26px,4vw,42px);letter-spacing:-.02em;margin:6px 0 0;font-style:italic;text-transform:uppercase;color:#fff}
  .mt-sub{max-width:56ch;color:#c3d2e6;font-size:14px;line-height:1.6;margin:6px 0 14px}
  /* CEO 2026-07-21: the meetteam stage is an always-dark seam; the light-theme cascade was
     repainting the headline/body to dark ink -> dark-on-dark. Force the text light here. */
  body[data-view="meetteam"] .mt-title{color:#fff !important}
  body[data-view="meetteam"] .mt-sub{color:#c3d2e6 !important}
  body[data-view="meetteam"] .meetteam-stage .tac-eyebrow{color:var(--gold,#ffb86b) !important}
  .mt-cardzone{display:flex;align-items:center;gap:18px;max-width:100%}
  .mt-nav{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);
    color:#eaf1fb;font-size:22px;cursor:pointer;flex:none} .mt-nav:disabled{opacity:.25;cursor:default}
  /* 390 h-scroll law: the card carousel must never exceed the viewport — arrows stay, card shrinks */
  @media(max-width:520px){
    .mt-cardzone{gap:8px;width:100%;justify-content:center}
    .mt-cardzone .mt-card, .mt-cardzone>*:not(.mt-nav){min-width:0;flex:1 1 auto;max-width:calc(100vw - 140px)}
    .mt-nav{width:38px;height:38px;font-size:18px}
  }
  .mt-count{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:#aebfd6;margin-top:10px}
  .mt-go{margin-top:14px}
  .mt-toggle{display:flex;gap:6px;margin:2px 0 10px}
  .mt-toggle button{font:800 10px var(--mono);letter-spacing:.14em;padding:7px 14px;border-radius:7px;cursor:pointer;
    border:1px solid rgba(255,255,255,.22);background:none;color:#c3d2e6}
  .mt-toggle button.on{background:var(--accent);border-color:var(--accent);color:#160a02}
  /* ============================================================================
     THE STARTING XI — a dealt SPREAD of dossier player cards (Jon, 2026-07-17:
     "use it as a spread of cards, I want all the details to animate/build").
     SST talent-dossier language: grayscale portraits, classified mono tags,
     brutalist edges, one accent moment. This screen is an explicit dark
     cinematic seam (day-one, like the interview/pitch room) — UX_RULES §5.
     ============================================================================ */
  .mt-deck{width:100%;max-width:min(880px,calc(100vw - 20px));margin:2px auto 0}
  .mt-deck-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 2px 12px;
    border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:8px;text-align:left}
  .mt-deck-hd .mt-deck-eyebrow{font:800 10px var(--mono);letter-spacing:.28em;color:var(--accent);text-transform:uppercase}
  .mt-deck-hd .mt-deck-n{font:700 10px var(--mono);letter-spacing:.16em;color:#8fa1ba;white-space:nowrap}
  .mt-spread{display:grid;grid-template-columns:repeat(auto-fill,minmax(206px,1fr));gap:14px;text-align:left;
    justify-content:center}
  @media(min-width:760px){ .mt-spread{grid-template-columns:repeat(3,1fr)} }
  .sq-card{position:relative;background:linear-gradient(180deg,#0e1626,#080d16);border:2px solid rgba(255,255,255,.14);
    border-radius:3px;overflow:hidden;box-shadow:6px 6px 0 rgba(0,0,0,.5),0 12px 30px rgba(0,0,0,.34);
    transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;will-change:transform}
  .sq-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:8px 8px 0 var(--accent),0 16px 36px rgba(0,0,0,.44)}
  .sq-card--lead{border-color:color-mix(in srgb,var(--accent) 62%,rgba(255,255,255,.14))}
  /* the grayscale dossier portrait */
  .sq-portrait{position:relative;height:158px;background:#141c2b center 20%/cover no-repeat;
    filter:grayscale(1) contrast(1.14) brightness(.94);border-bottom:2px solid rgba(255,255,255,.14)}
  .sq-portrait::after{content:"";position:absolute;inset:0;pointer-events:none;
    background-image:radial-gradient(rgba(255,255,255,.5) 8%,transparent 9%);background-size:5px 5px;opacity:.06;mix-blend-mode:overlay}
  .sq-portrait::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(6,10,18,0) 38%,rgba(6,10,18,.5) 66%,rgba(6,10,18,.92) 100%)}
  .sq-card--lead .sq-portrait{filter:grayscale(.82) contrast(1.16) brightness(.98)}
  /* classified stamp — bordered mono, angled (SST motif) */
  .sq-stamp{position:absolute;top:9px;left:9px;z-index:3;font:800 8px var(--mono);line-height:1.25;letter-spacing:.14em;
    color:#eaf1fb;text-transform:uppercase;padding:4px 6px;border:1px solid rgba(255,255,255,.4);
    background:rgba(8,12,20,.42);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transform:rotate(-5deg)}
  /* OVR badge — the one accent moment, brutalist square, dark ink on accent (house tt-ovr convention) */
  .sq-ovr{position:absolute;top:9px;right:9px;z-index:3;display:flex;flex-direction:column;align-items:center;line-height:1;
    background:var(--accent);color:#160a02;padding:5px 8px 6px;border-radius:2px;box-shadow:0 4px 12px rgba(0,0,0,.4)}
  .sq-ovr em{font:800 7px var(--mono);letter-spacing:.2em;font-style:normal;opacity:.85}
  .sq-ovr b{font:900 20px Inter,sans-serif;font-style:italic;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
  /* black-slab nameplate punched over the portrait base */
  .sq-plate{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:9px 11px 10px}
  .sq-disc{display:block;font:800 8.5px var(--mono);letter-spacing:.18em;color:var(--accent);text-transform:uppercase;margin-bottom:2px}
  .sq-name{margin:0;font:900 19px Inter,sans-serif;font-style:italic;text-transform:uppercase;letter-spacing:-.02em;
    line-height:.92;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.55)}
  .sq-name span{display:block;font-size:12.5px;font-weight:800;color:rgba(255,255,255,.82);letter-spacing:0}
  .sq-body{padding:11px 12px 13px}
  /* QA 2026-07-31 (defect #4): nowrap+ellipsis truncated the money — "CHIEF STRATEGY OFFICER ·
     £2,3…". Truncated salary is a legibility-law fail; wrap to a second line instead. */
  .sq-role{font:600 10.5px var(--mono);letter-spacing:.02em;color:#9fb0c8;text-transform:uppercase;margin-bottom:9px;
    padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.08);line-height:1.5}
  .sq-role .sq-pay{white-space:nowrap}
  .sq-trait{display:flex;align-items:center;gap:8px;margin-top:6px}
  .sq-tk{flex:none;width:74px;font:700 8.5px var(--mono);letter-spacing:.1em;color:#8fa1ba;text-transform:uppercase}
  .sq-bar{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.09);overflow:hidden}
  .sq-bar i{display:block;height:100%;border-radius:3px;transform-origin:left;
    background:linear-gradient(90deg,var(--accent),#ffb86b)}
  .sq-bar--hi i{background:linear-gradient(90deg,#2fae6b,#5ef0a3)}
  .sq-bar--mid i{background:linear-gradient(90deg,#f0871f,#ffc16b)}
  .sq-bar--lo i{background:linear-gradient(90deg,#d0433a,#ff7a6b)}
  .sq-tv{flex:none;width:20px;text-align:right;font:800 11px Inter,sans-serif;font-variant-numeric:tabular-nums}
  .sq-tv--hi{color:#5ef0a3} .sq-tv--mid{color:#ffc16b} .sq-tv--lo{color:#ff8a75}
  .sq-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:11px}
  .sq-tag{font:800 8px var(--mono);letter-spacing:.1em;color:#c3d2e6;text-transform:uppercase;
    padding:3px 6px;border:1px solid rgba(255,255,255,.18);border-radius:2px;background:rgba(255,255,255,.03)}
  .sq-tag--ceil{color:#ffd27a;border-color:rgba(255,210,122,.34);letter-spacing:.04em}
  /* motion: cards + interior build in via animateSquadSpread — resting state is the FINAL/opaque
     truth (motion-kit law 7). No horizontal overflow at any width. */
  @media(max-width:460px){
    .mt-spread{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:11px}
    .sq-portrait{height:140px}
    .sq-name{font-size:16px} .sq-ovr b{font-size:17px}
  }
  @media(max-width:340px){ .mt-spread{grid-template-columns:1fr} }
  /* AA under mvc-light: the house accent deepens to rust (#b4380d) globally. On this dark-pinned
     seam the accent-fill OVR badge + accent micro-labels would drop below 4.5:1 with their dark-theme
     ink, so switch to legible ink here (UX_RULES §1 — every theme). Dark base themes keep bright
     accent + dark ink and are untouched; player pack accents stay bright and pass. */
  body.mvc-light .sq-disc, body.mvc-light .mt-deck-eyebrow{color:#f3944e}
  body.mvc-light .sq-ovr{color:#fff}
  body.mvc-light .mt-toggle button.on{color:#fff}
  .teamsheet{width:min(640px,92vw);margin:4px auto 0;text-align:left;background:linear-gradient(180deg,rgba(10,16,26,.6),rgba(7,11,18,.8));
    border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px 18px}
  .ts-ceo{text-align:center;margin-bottom:10px;padding-bottom:10px;border-bottom:1px dashed rgba(255,255,255,.15)}
  .ts-ceo b{display:block;font-style:italic;font-size:16px;letter-spacing:.02em;color:#fff}
  .ts-ceo span{font:700 9px var(--mono);letter-spacing:.16em;color:#8fa1ba}
  .ts-row{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.07)} .ts-row:last-child{border-bottom:0}
  .ts-dept{display:flex;align-items:center;gap:9px;font:800 10px var(--mono);letter-spacing:.16em;color:#ffb86b}
  .ts-avg{color:#8fa1ba;font-weight:700}
  .ts-flag{font:800 8px var(--mono);letter-spacing:.1em;padding:2px 7px;border-radius:4px}
  .ts-flag.under{background:rgba(255,106,85,.18);color:#ff8a75;border:1px solid rgba(255,106,85,.45)}
  .ts-flag.over{background:rgba(255,210,63,.14);color:#ffd23f;border:1px solid rgba(255,210,63,.4)}
  .ts-line{display:flex;gap:8px;flex-wrap:wrap;margin-top:7px;justify-content:center}
  .ts-chip{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
    border-radius:999px;padding:4px 12px 4px 4px;cursor:pointer;color:#eaf1fb}
  .ts-chip:hover{border-color:var(--accent)}
  .ts-chip i{width:26px;height:26px;border-radius:50%;background:center 20%/cover no-repeat;display:block;filter:var(--col-grade,none)}
  .ts-chip b{font-size:11.5px} .ts-chip em{font-style:normal;font:800 10px var(--mono);color:var(--accent)}
  .ts-empty{font-size:11px;color:#8fa1ba;font-style:italic;padding:4px 0}
  .col-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:10px}
  .col-card{border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:14px 15px;background:linear-gradient(160deg,rgba(var(--glow),.10),rgba(10,16,26,.5))}
  .col-card.owned{opacity:.75}
  .col-name{font-weight:900;font-style:italic;font-size:15px;letter-spacing:.02em}
  .col-blurb{font-size:11.5px;color:#b7c6dc;margin:5px 0 4px;line-height:1.45}
  .col-items{font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:#8fa1ba;margin:0 0 10px;text-transform:uppercase}
  .col-preview{position:relative;height:96px;border-radius:8px;background:center/cover no-repeat;margin-bottom:10px;overflow:hidden;border:1px solid rgba(255,255,255,.12)}
  .col-cast{position:absolute;left:8px;bottom:8px;display:flex}
  .col-cast i{width:30px;height:30px;border-radius:50%;background:center 20%/cover no-repeat;border:2px solid rgba(10,16,26,.9);margin-right:-8px;display:block}
  /* boot splash — covers the auth handshake so the interview never flashes on reload */
  .boot-splash{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#05070c;z-index:5}
  .boot-splash img{width:min(320px,60vw);animation:bootpulse 1.6s ease-in-out infinite}
  @keyframes bootpulse{0%,100%{opacity:.55}50%{opacity:1}}
  /* MY AGENCIES — the epic front door (env shot hero; skin upgradeable via the store) */
  .agdash{position:fixed;inset:0;z-index:6;background:#05070c center/cover no-repeat;display:flex;align-items:center;justify-content:center;padding:24px}
  .agdash::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(4,7,12,.92) 0%,rgba(4,7,12,.55) 46%,rgba(4,7,12,.25) 100%)}
  .agdash-in{position:relative;width:min(680px,94vw);color:#eaf1fb}
  .agdash-eyebrow{font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.3em;color:#ffb86b;text-transform:uppercase}
  .agdash-title{font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(34px,5vw,56px);line-height:.95;margin:8px 0 4px;color:#fff}
  .agdash-sub{color:#b9c8dd;font-size:13.5px;margin:6px 0 20px;max-width:52ch}
  /* ══ MY AGENCIES — DOSSIER / CASE-FILE MODULES (CEO 2026-07-18: the old rounded .ag-row/.ag-new read
     as "AI slop, too standard — edgier, less standard treatment"). This is the SAME module language now
     canonized in pn-glass.css as `.lg-card` / `.lg-card--dossier` / `.lg-card--action` (the next brick of
     the global system) — applied here to the existing .ag-* markup CSS-ONLY (account.js is owned by a
     parallel agent this session, so no re-markup). When that markup is swapped to the .lg-card classes,
     THIS block collapses to nothing. Signature DNA (shared with .lg-btn): THE CLIP (45° sliced top-right
     corner, near-square 2px radius), a burnt-orange REGISTRATION SLASH lit on the cut, a subtle film-grain
     tooth, brutalist navy monogram slab, a mono ledger strip, and a staggered clip-wipe entrance. ══ */
  .agdash-in{counter-reset:agy}
  /* the dossier PLATE — clipped glass over the env photo; elevation via filter:drop-shadow (clip-path
     clips box-shadow, so the shadow must trace the chamfer). Interior hairline splits mark / body. */
  .ag-row{position:relative;isolation:isolate;counter-increment:agy;
    display:flex;align-items:center;gap:13px;margin-top:11px;padding:15px 18px 15px 15px;
    border-radius:2px;color:#eaf1fb;
    background:linear-gradient(158deg,rgba(26,37,56,.72),rgba(9,14,24,.82));
    border:1px solid rgba(255,255,255,.15);
    clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%);
    /* ⛔ CEO-78 ("agencies keep flickering and can't be seen"). Chromium is provably clean — an
       instrumented run counted ZERO re-renders, ZERO animation replays, pixel-identical frames
       over 5s. What this row DID stack was backdrop-filter + double drop-shadow + an ANIMATED
       clip-path on one element: a known WebKit compositing failure class (shimmer/blank), and
       the CEO plays on Safari. The blur goes — the gradient behind it is opaque enough that the
       glass read survives — and the shadow moves to box-shadow so filter never shares the element
       with the animated clip. Needs one real-device confirm; this sandbox has no WebKit. */
    box-shadow:0 18px 34px rgba(0,0,0,.44),0 2px 5px rgba(0,0,0,.32);
    transition:border-color .18s,transform .18s;
    animation:agdossier-in .5s cubic-bezier(.22,.61,.36,1) both}
  .ag-row:nth-child(4){animation-delay:.02s} .ag-row:nth-child(5){animation-delay:.09s}
  .ag-row:nth-child(6){animation-delay:.16s} .ag-row:nth-child(7){animation-delay:.23s}
  .ag-row:nth-child(n+8){animation-delay:.3s}
  /* film-grain tooth + one raking sheen (SST halftone motif, subtle not dirty) */
  .ag-row::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:linear-gradient(122deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 72%,rgba(255,255,255,.04) 100%),
      radial-gradient(rgba(255,255,255,.05) 9%,transparent 10%);background-size:100% 100%,6px 6px}
  /* A6 (CEO 2026-07-18): machined FUI corner furniture (was a lone accent slash that recoloured PINK
     under a worn accent on this holding page). INK hairlines (never accent) + one accent pip. --cut:20px. */
  .ag-row{--cut:20px;--ag-fui:rgba(234,241,251,.66);--ag-fui-2:rgba(234,241,251,.3);--ag-pip:var(--accent,#f97316)}
  /* CEO 2026-07-18 (ABSOLUTELY FINAL, everywhere): the My-Agencies card had its OWN duplicate corner
     furniture (separate from .lg-card) — bracket, ticks, pip. DEAD. Clean clipped card, nothing in the corner. */
  .ag-row::after{content:none}
  .ag-row>*{position:relative;z-index:1}
  .ag-row:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent,#f97316) 52%,transparent);
    --ag-fui:rgba(234,241,251,.92);--ag-fui-2:rgba(234,241,251,.5);
    /* box-shadow, not filter — see the CEO-78 note above: filter must never share this element
       with the animated clip-path. Same hard-shard + lift read, WebKit-safe. */
    box-shadow:4px 4px 0 rgba(157,67,0,.5),0 24px 44px rgba(0,0,0,.5),0 2px 5px rgba(0,0,0,.32)}
  /* the clipped MONOGRAM PLATE — navy brutalist slab (SST motif #6), orange italic initials, own cut. */
  .ag-logo{position:relative;width:52px;height:52px;flex:none;border-radius:0;overflow:visible;
    display:flex;align-items:center;justify-content:center;
    font:900 18px/1 Inter,sans-serif;font-style:italic;letter-spacing:-.02em;color:#f97316; /* brand-fixed: the holding page is OS chrome — worn --accent must never repaint it (skinning law) */
    background:#0b1c30;border:1px solid rgba(255,255,255,.10);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -6px 14px rgba(0,0,0,.30);
    clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,0 100%)}
  /* BODY: mono index stamp (CSS counter → AGY_01) · name · a bordered mono ledger strip */
  .ag-meta{flex:1;min-width:0;border-left:1px solid rgba(255,255,255,.12);padding-left:16px}
  .ag-meta::before{content:"AGY_" counter(agy,decimal-leading-zero);display:block;margin-bottom:5px;
    font:700 9.5px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;
    color:color-mix(in srgb,#f97316 84%,#fff)}   /* brand-fixed with .ag-logo (skinning law) */
  .ag-meta b{display:block;font:800 17px/1.12 Inter,sans-serif;letter-spacing:-.01em;color:#f4f8ff;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ag-meta span{display:inline-block;margin-top:9px;padding:6px 11px;max-width:100%;
    border:1px solid rgba(255,255,255,.14);border-radius:1px;
    font:700 11px/1.5 var(--mono);letter-spacing:.07em;font-feature-settings:'tnum' 1;
    color:#cdd9ea;text-transform:uppercase;white-space:normal}   /* wraps (never truncates) the ledger on narrow */
  /* OPEN — the THE-CLIP burnt-orange glass primary (matches .lg-btn--primary: white ink @ AA, navy
     inverted slash, hard-shard hover). Same 44px height as the ghost trash. */
  .ag-open{position:relative;isolation:isolate;overflow:hidden;flex:none;appearance:none;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 22px;border-radius:3px;
    font:700 13px/1 Inter,sans-serif;letter-spacing:.02em;text-transform:uppercase;color:#fff;
    text-shadow:0 1px 1.5px rgba(74,26,0,.62);border:1px solid rgba(255,182,120,.55);
    background:radial-gradient(140% 150% at 50% 47%,rgba(114,42,0,.64) 0%,rgba(114,42,0,.34) 50%,rgba(114,42,0,0) 80%),
      linear-gradient(178deg,#ffa04a 0%,#f97316 24%,#e2650f 60%,#c1530a 100%);
    clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
    box-shadow:inset 0 1px 0 rgba(255,244,232,.72),inset 0 0 0 1px rgba(255,168,96,.32),inset 0 -13px 24px -12px rgba(112,42,0,.6);
    filter:drop-shadow(0 7px 15px rgba(249,115,22,.45)) drop-shadow(0 3px 6px rgba(96,38,0,.42));
    transition:transform .16s,filter .16s,border-color .16s}
  .ag-open::before{content:"";position:absolute;left:0;right:0;top:0;height:42%;pointer-events:none;border-radius:3px 3px 0 0;
    background:linear-gradient(180deg,rgba(255,241,225,.52) 0%,rgba(255,214,172,.1) 46%,rgba(255,255,255,0) 100%)}
  /* CEO: the OPEN button's diagonal corner slash that GREW on hover — the "animating corner feature" — is DEAD. */
  .ag-open::after{content:none}
  .ag-open:hover{transform:translateY(-1px);border-color:rgba(255,196,140,.7);
    filter:drop-shadow(4px 4px 0 rgba(157,67,0,.92)) drop-shadow(0 13px 28px rgba(249,115,22,.5)) drop-shadow(0 4px 9px rgba(96,38,0,.46)) brightness(1.05) saturate(1.04)}
  .ag-open:active{transform:translateY(1px) scale(.995)}
  /* TRASH — clipped ghost that ARMS red on hover (destructive). Square, same 44px height as OPEN. */
  .ag-del{position:relative;isolation:isolate;overflow:hidden;flex:none;appearance:none;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;width:44px;min-height:44px;padding:0;border-radius:3px;
    color:rgba(234,241,251,.72);background:transparent;border:1px solid transparent;
    clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,0 100%);
    transition:color .16s,background .16s,border-color .16s}
  .ag-del::after{content:none}
  .ag-del svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .ag-del:hover{color:#ff6a55;background:rgba(255,106,85,.10);border-color:rgba(255,106,85,.5)}
  /* + FOUND A NEW AGENCY — a full-width clipped ghost bar with crosshair REGISTRATION corner ticks +
     the slash. Hover ARMS it (ticks + slash ignite orange, grain lifts) — stamping a case file open. */
  .ag-new{position:relative;isolation:isolate;appearance:none;cursor:pointer;overflow:visible;
    display:flex;align-items:center;justify-content:center;gap:12px;width:100%;margin-top:18px;padding:17px 20px;border-radius:3px;color:#eaf1fb;
    font:700 12px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;
    background:radial-gradient(rgba(255,255,255,.04) 9%,transparent 10%) 0 0/6px 6px,
      linear-gradient(158deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
    border:1px solid rgba(255,255,255,.17);
    clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);
    filter:drop-shadow(0 12px 26px rgba(0,0,0,.30));
    -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
    transition:filter .2s,border-color .2s,background .2s,color .2s,transform .16s;
    animation:agdossier-in .5s cubic-bezier(.22,.61,.36,1) both;animation-delay:.3s}
  /* CEO: the "+ Found a new agency" crosshair registration ticks (::before) AND corner slash+pip (::after)
     that ignited on hover — DEAD. Clean clipped bar, nothing in the corners. */
  .ag-new::before{content:none}
  .ag-new::after{content:none}
  .ag-new:hover{transform:translateY(-1px);color:#fff;border-color:color-mix(in srgb,var(--accent,#f97316) 62%,transparent);
    background:radial-gradient(rgba(255,255,255,.07) 9%,transparent 10%) 0 0/6px 6px,
      linear-gradient(158deg,color-mix(in srgb,var(--accent,#f97316) 14%,rgba(255,255,255,.05)),rgba(255,255,255,.02));
    filter:drop-shadow(0 16px 30px rgba(249,115,22,.22)) drop-shadow(0 4px 9px rgba(0,0,0,.32))}
  /* clip-wipe entrance (case file opening) — resolves into the resting chamfer; snaps under reduce. */
  @keyframes agdossier-in{
    from{opacity:0;transform:translateY(9px);clip-path:polygon(0 0,7% 0,7% 0,7% 100%,0 100%)}
    55%{opacity:1}
    to{opacity:1;transform:translateY(0)}}
  /* narrow: actions drop to a full-width row 2 so the name/ledger column isn't strangled (UX_RULES §3) */
  @media (max-width:560px){
    .ag-row{display:grid;grid-template-columns:auto minmax(0,1fr);
      grid-template-areas:"logo meta" "open del";column-gap:14px;row-gap:13px;align-items:center}
    .ag-logo{grid-area:logo} .ag-meta{grid-area:meta}
    .ag-open{grid-area:open;width:100%} .ag-del{grid-area:del;justify-self:end}
  }
  @media (prefers-reduced-motion: reduce){ .mar-stage .mar-face,.interview .tile.client .face-img{animation:none}
    .ag-row,.ag-new{animation:none} .ag-row:hover,.ag-new:hover,.ag-open:hover,.ag-open:active{transform:none} }
  /* FULL-WIDTH LAUNCH HERO — light editorial (framed film still left | aggressive type right) */
  .launch-hero{ position:relative; display:grid; grid-template-columns:1fr 1.18fr; gap:52px; align-items:center;
    min-height:60vh; padding:40px; margin-bottom:28px; }
  @media (max-width:960px){ .launch-hero{ grid-template-columns:1fr; gap:30px; padding:28px; min-height:auto; } }
  .launch-portrait{ position:relative; }
  .launch-portrait img,.launch-portrait video{ width:100%; height:auto; max-height:74vh; object-fit:cover;
    object-position:center top; border:4px solid var(--ink) !important; border-radius:2px !important;
    filter:grayscale(.15) contrast(1.12); box-shadow:14px 14px 0 var(--accent),30px 30px 70px rgba(11,28,48,.18) !important; }
  .portrait-label{ position:absolute; bottom:18px; left:-6px; right:auto;
    background:var(--ink) !important; backdrop-filter:none; border:none !important;
    padding:12px 18px; border-radius:0 !important; }
  .portrait-label b{ display:block; font-size:20px; font-weight:900; color:#fff !important; margin-bottom:3px; font-style:italic; text-transform:uppercase; letter-spacing:-.02em; }
  .portrait-label span{ font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.18em;
    text-transform:uppercase; color:var(--accent) !important; }
  .launch-content{ position:relative; max-width:620px; }
  .launch-content .hookkicker{ font-family:var(--mono); font-size:11px; font-weight:800; letter-spacing:.26em;
    text-transform:uppercase; color:var(--accent2) !important; display:block; margin-bottom:16px; }
  .launch-content .hookline{ font-weight:900; font-style:italic; font-size:clamp(44px,6.4vw,76px);
    color:var(--ink) !important; line-height:.86; letter-spacing:-.045em; margin:0 0 22px; text-transform:uppercase;
    text-shadow:none !important; }
  .launch-content .hookline .hl-accent{ color:var(--accent); }
  .launch-content .hooksub{ font-size:17px; line-height:1.6; color:var(--muted) !important; margin:0;
    border-left:1px solid var(--lg-hair-neutral,rgba(128,132,140,.2)); padding-left:14px; }

  /* ============================================================================
     OFFICE — LIGHT PENTHOUSE RELIGHT  (Dave, 2026-06-23, v2 brief)
     Jon approved the LIGHT dash-preview look and said "apply it to the game".
     This block is placed LAST + scoped to body[data-view="office"] so it WINS over
     the earlier dark command-hub. The launch/interview shell stays dark on purpose.
     Strategy: re-point the dark theme's --d-* tokens to LIGHT values (flips every
     token-built surface at once), then override the literal-dark rules + restore the
     penthouse photo, editorial bleed type and the manic-rebel shard craft from
     dash-preview.html. Skin only — every ID / handler / sim path untouched. ==== */
  body[data-view="office"]{
    --d-bg:#f8f9ff; --d-panel:#ffffff; --d-panel-2:#f3f4fa; --d-panel-3:#eef1fb;
    --d-tile:rgba(255,255,255,.50); --d-tile-2:rgba(255,255,255,.40);
    --d-edge:rgba(var(--glow),.55); --d-hair:rgba(11,28,48,.12); --d-hair-2:rgba(11,28,48,.20);
    --d-text:#0b1c30 !important; --d-text-2:#5a6b7d !important; --d-amber:#9d4300;
    background:var(--surface-bright) !important;
    background-image:url('https://www.transparenttextures.com/patterns/handmade-paper.png') !important;
    color:var(--ink) !important;
  }
  /* PRESENT Higgsfield agency room behind the glass HUD — a real photographic space, softened by a
     light editorial scrim so the glass panels read as glass floating in a room (the reference move),
     not a flat white page. The room stays legible-airy, never muddy. */
  body[data-view="office"] #penthouse-bg{
    background:
      radial-gradient(120% 90% at 84% -12%, color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 52%),
      linear-gradient(180deg, rgba(247,249,255,.50) 0%, rgba(238,242,253,.40) 46%, rgba(247,249,255,.64) 100%),
      url('/assets/env/agency_floor.jpg') !important;
    background-size:cover,cover,cover !important;
    background-position:center,center,center 42% !important;
    background-repeat:no-repeat !important;
    filter:none !important; opacity:1 !important;
  }
  body[data-view="office"] #penthouse-bg .photo,
  body[data-view="office"] #penthouse-bg .video,
  body[data-view="office"] #bgplate{opacity:.34 !important;filter:saturate(.86) contrast(1.09) brightness(1.02) !important}
  body[data-view="office"] #penthouse-bg .skyline{opacity:.14 !important}
  body[data-view="office"] #penthouse-bg .wash{
    background:linear-gradient(to top right,color-mix(in srgb,var(--accent) 6%,transparent),transparent 55%,color-mix(in srgb,var(--accent-yellow) 8%,transparent)) !important}
  body[data-view="office"] #penthouse-bg .halftone-bg{
    background-image:radial-gradient(#0b1c30 12%,transparent 13%) !important;background-size:5px 5px !important;opacity:.10 !important;mix-blend-mode:multiply !important}
  body[data-view="office"] #penthouse-bg .grit-bg{opacity:.08 !important;mix-blend-mode:overlay !important}
  body[data-view="office"] #penthouse-bg::after{
    background:radial-gradient(140% 120% at 50% 0%,transparent 45%,rgba(11,28,48,.10) 100%) !important}
  body[data-view="office"]::after{mix-blend-mode:multiply !important;opacity:.05 !important}
  /* restore the giant faint editorial bleed words behind the board */
  body[data-view="office"] .bleed-text{display:block !important;color:rgba(11,28,48,.035) !important}
  body[data-view="office"] .bleed-2{color:rgba(157,67,0,.05) !important}

  /* (logo swap now handled by .brandmark-mark theme rules — see the (5) BRANDMARK block) */
  /* topbar → light glass ops bar */
  body[data-view="office"] .topbar{
    background:rgba(255,255,255,.62) !important;border-bottom:1px solid rgba(11,28,48,.12) !important;
    box-shadow:0 1px 0 rgba(var(--glow),.18),0 14px 40px rgba(11,28,48,.08) !important;
    backdrop-filter:blur(18px) !important;-webkit-backdrop-filter:blur(18px) !important}
  body[data-view="office"] .brandmark{color:var(--ink) !important}
  body[data-view="office"] .brandmark b{color:var(--accent) !important}
  body[data-view="office"] #hud .stat b{color:var(--ink) !important}
  body[data-view="office"] #hud .hud-secondary .stat b{color:var(--ink-2) !important}
  body[data-view="office"] #hud .stat span{color:var(--muted) !important}
  body[data-view="office"] #hud .stat .stat-unit{color:var(--muted) !important}
  body[data-view="office"] #hud .stat.stat-hero b{color:var(--accent) !important;text-shadow:none !important}
  body[data-view="office"] #hud .hud-group{border-left-color:rgba(11,28,48,.12) !important}
  body[data-view="office"] .topbar button{
    background:#fff !important;color:var(--ink) !important;border:2px solid var(--ink) !important;border-radius:2px}
  body[data-view="office"] .topbar button:hover{background:var(--ink) !important;color:#fff !important;border-color:var(--ink) !important}

  /* masthead → light glass slab with the navy hard offset shadow (dash-preview resource HUD) */
  body[data-view="office"] .masthead.dash-bar{
    background:rgba(255,255,255,.46) !important;backdrop-filter:blur(24px) !important;-webkit-backdrop-filter:blur(24px) !important;
    border:1px solid rgba(255,255,255,.6) !important;border-left:1px solid var(--lg-hair-neutral,rgba(128,132,140,.2)) !important;border-radius:2px !important;
    box-shadow:8px 8px 0 rgba(11,28,48,.9) !important;transform:none !important}
  body[data-view="office"] .masthead .glasswall{opacity:.4;mix-blend-mode:multiply}
  body[data-view="office"] .masthead .glasswall .gw-ink{stroke:rgba(11,28,48,.35)}
  body[data-view="office"] .masthead .glasswall text{fill:rgba(11,28,48,.3)}
  body[data-view="office"] .masthead .tac-eyebrow{color:var(--accent2) !important}
  body[data-view="office"] .masthead.dash-bar .mh-kicker{color:var(--muted) !important}
  body[data-view="office"] .masthead.dash-bar .mh-name{color:var(--ink) !important;text-shadow:none !important;font-style:italic;text-transform:uppercase}
  body[data-view="office"] .masthead.dash-bar .mh-sub{color:var(--muted) !important;border-left-color:var(--accent)}
  body[data-view="office"] .masthead.dash-bar .mh-data .big{color:var(--accent) !important;text-shadow:none !important}
  body[data-view="office"] .masthead.dash-bar .mh-data .lbl{color:var(--muted) !important}

  /* section nav rail → light glass */
  body[data-view="office"] .hub-nav{
    background:rgba(255,255,255,.5) !important;border:1px solid rgba(11,28,48,.10) !important;
    box-shadow:0 10px 30px rgba(11,28,48,.08) !important;backdrop-filter:blur(14px)}
  body[data-view="office"] .hub-tab{color:var(--muted) !important}
  body[data-view="office"] .hub-tab:hover{color:var(--ink) !important;background:rgba(11,28,48,.05) !important}
  body[data-view="office"] .hub-tab.on{color:var(--ink) !important;background:rgba(var(--glow),.12) !important;border-color:rgba(var(--glow),.3) !important;
    box-shadow:inset 0 -2px 0 var(--accent) !important}

  /* the LIVE-VITALS strip + KPI tiles + panels → bright glass-shards, brutalist hard offset shadows */
  body[data-view="office"] .kpi{
    background:rgba(255,255,255,.5) !important;border:1px solid rgba(11,28,48,.12) !important;border-radius:2px !important;
    box-shadow:6px 6px 0 rgba(11,28,48,.10) !important}
  body[data-view="office"] .kpi::before{background:var(--accent) !important;box-shadow:none !important}
  body[data-view="office"] .kpi .kpi-lbl{color:var(--muted) !important}
  body[data-view="office"] .kpi .kpi-val{color:var(--ink) !important;text-shadow:none !important}
  body[data-view="office"] .kpi .kpi-sub{color:var(--muted) !important}
  body[data-view="office"] .kpi.kpi-hero{
    background:linear-gradient(135deg,#fff,#f3f3f3) !important;border:2px solid var(--accent) !important}
  body[data-view="office"] .kpi.kpi-hero .kpi-lbl{color:var(--accent2) !important}
  body[data-view="office"] .kpi.kpi-hero .kpi-val{color:var(--accent) !important;text-shadow:none !important}

  /* TOP-LEVEL panels → SST bright glass-shard, clip-path silhouette, hard editorial offset shadow */
  body[data-view="office"] .dash-grid>.card,
  body[data-view="office"] .card.shard{
    background:rgba(255,255,255,.46) !important;backdrop-filter:blur(24px) !important;-webkit-backdrop-filter:blur(24px) !important;
    border:1px solid rgba(255,255,255,.6) !important;border-radius:2px !important;
    box-shadow:10px 10px 0 rgba(var(--glow),.85),24px 24px 60px rgba(11,28,48,.10) !important}
  body[data-view="office"] .card.shard.shard-2{
    box-shadow:10px 10px 0 rgba(11,28,48,.85),24px 24px 60px rgba(11,28,48,.10) !important}
  body[data-view="office"] .card.shard.shard-1{clip-path:polygon(1.2% 0,100% .6%,98.8% 100%,0 99.4%) !important}
  body[data-view="office"] .card.shard.shard-2{clip-path:polygon(0 1%,98.8% 0,100% 99%,1.2% 100%) !important}
  body[data-view="office"] .card.shard.floorpanel{transform:rotate(-.4deg) !important}
  body[data-view="office"] .dash-grid>.card:hover,
  body[data-view="office"] .card.shard:hover{
    transform:translate(2px,2px);border-color:rgba(255,255,255,.8) !important;
    box-shadow:6px 6px 0 rgba(var(--glow),.85),18px 18px 46px rgba(11,28,48,.12) !important}
  body[data-view="office"] .card.shard::before{
    content:"";position:absolute;left:0;right:auto;top:18px;bottom:18px;width:5px;height:auto;
    background:var(--accent) !important;box-shadow:none !important;border-radius:0}
  body[data-view="office"] .card.shard.shard-2::before{background:rgba(11,28,48,.4) !important}
  /* faint navy halftone inside each panel (printed tooth) */
  body[data-view="office"] .card.shard::after{
    content:"" !important;display:block !important;position:absolute;inset:0;pointer-events:none;z-index:0;
    background-image:radial-gradient(#0b1c30 10%,transparent 11%) !important;background-size:7px 7px !important;opacity:.05 !important;mix-blend-mode:multiply !important}
  body[data-view="office"] .card.shard>*{position:relative;z-index:1}
  body[data-view="office"] .dash-grid .card .card{
    background:rgba(11,28,48,.035) !important;border:1px solid rgba(11,28,48,.10) !important;border-radius:2px}
  /* restore the giant per-panel bleed words (faint navy, behind content) */
  body[data-view="office"] .dash-bleed{display:block !important;color:rgba(11,28,48,.045) !important}
  body[data-view="office"] .dash-bleed.orange{color:rgba(157,67,0,.08) !important}
  body[data-view="office"] .tac-eyebrow{color:var(--accent2) !important}
  body[data-view="office"] .dash-grid h2{color:var(--ink) !important;font-style:italic;text-transform:uppercase}
  body[data-view="office"] .dash-grid h2 span{color:var(--accent) !important}
  body[data-view="office"] .dash-grid h2.sub{color:var(--muted) !important}
  body[data-view="office"] .corner-flag{background:var(--accent) !important}
  body[data-view="office"] .corner-flag span{color:#fff !important}
  body[data-view="office"] h1:not([class]),body[data-view="office"] h2:not([class]),body[data-view="office"] h3:not([class]){color:var(--ink) !important}
  body[data-view="office"] .muted,body[data-view="office"] .small,body[data-view="office"] p:not([class]){color:var(--muted) !important}

  /* meters / tower / stream rows / dossier cards / buttons → light */
  body[data-view="office"] .hud-meter .hm-top b{color:var(--ink) !important}
  body[data-view="office"] .hud-meter .hm-bar{background:rgba(11,28,48,.08) !important;border:1px solid rgba(11,28,48,.18) !important;box-shadow:none !important}
  body[data-view="office"] .tower .tw-track{background:rgba(11,28,48,.10) !important}
  body[data-view="office"] .tower .tw-fill::after{background:#fff !important;border:2px solid var(--accent) !important}
  body[data-view="office"] .tower .tw-rungs{color:rgba(11,28,48,.35) !important}
  body[data-view="office"] .rfi-row{border-bottom:1px solid rgba(11,28,48,.10) !important}
  body[data-view="office"] .rfi-row .rfi-no{color:var(--ink) !important;opacity:.10}
  body[data-view="office"] .rfi-row .rfi-title{color:var(--ink) !important}
  body[data-view="office"] .rfi-row:hover{background:var(--ink) !important}
  body[data-view="office"] .rfi-row:hover .rfi-title,
  body[data-view="office"] .rfi-row:hover .rfi-sub,
  body[data-view="office"] .rfi-row:hover .muted{color:#fff !important}
  body[data-view="office"] .rfi-row:hover .rfi-no{color:#fff !important;opacity:.28}
  body[data-view="office"] .rfi-row:hover .rfi-budget b{color:#fff !important}
  body[data-view="office"] .dossier-card{
    background:linear-gradient(135deg,#fff,#f3f3f3) !important;color:var(--ink) !important;
    border:1px solid rgba(11,28,48,.12) !important;border-radius:2px !important;
    box-shadow:6px 6px 0 rgba(var(--glow),.18) !important}
  body[data-view="office"] .dossier-card:hover{box-shadow:8px 8px 0 var(--accent) !important;transform:translate(-1px,-1px)}
  body[data-view="office"] .dossier-card .doss-name{color:var(--ink) !important}
  body[data-view="office"] .dossier-card .doss-photo{background:#e9edf3 !important;border:1px solid rgba(11,28,48,.12) !important;box-shadow:none !important}
  body[data-view="office"] .doss-dots i{background:rgba(11,28,48,.12) !important}
  body[data-view="office"] .doss-dots i.on{background:var(--accent) !important}
  body[data-view="office"] .doss-tag.vetted{background:var(--accent-yellow) !important;color:var(--ink) !important}
  body[data-view="office"] .bar{background:rgba(11,28,48,.10) !important;box-shadow:none !important}
  body[data-view="office"] .pill{border-color:rgba(11,28,48,.16) !important;color:var(--muted) !important;background:rgba(11,28,48,.03) !important}
  body[data-view="office"] button.primary{
    background:var(--ink) !important;color:#fff !important;border:2px solid var(--ink) !important;
    box-shadow:10px 10px 0 var(--accent) !important}
  body[data-view="office"] button.primary:hover{transform:translate(3px,3px);box-shadow:5px 5px 0 var(--accent) !important}
  body[data-view="office"] .dash-grid button:not(.primary),
  body[data-view="office"] .masthead button:not(.primary){
    background:#fff !important;color:var(--ink) !important;border:2px solid var(--ink) !important;border-radius:2px}
  body[data-view="office"] .dash-grid button:not(.primary):hover,
  body[data-view="office"] .masthead button:not(.primary):hover{background:var(--ink) !important;color:#fff !important}
  body[data-view="office"] .holdco-strong,
  body[data-view="office"] b[style*="var(--ink)"]{color:var(--ink) !important}
  /* THE FLOOR crew cards → light dossier tiles (was a dark band) */
  body[data-view="office"] .crew{
    background:linear-gradient(135deg,#fff,#f3f3f3) !important;color:var(--ink) !important;
    border:1px solid rgba(11,28,48,.12) !important;box-shadow:5px 5px 0 rgba(11,28,48,.08) !important}
  body[data-view="office"] .crew::after{background-image:radial-gradient(#0b1c30 9%,transparent 10%) !important;opacity:.05 !important;mix-blend-mode:multiply}
  body[data-view="office"] .crew .crew-role{color:var(--muted) !important}
  body[data-view="office"] .crew .crew-act{color:var(--ink) !important;opacity:.7}
  body[data-view="office"] .crew .crew-face{filter:grayscale(.2)}
  body[data-view="office"] .crew.me{outline-color:var(--accent) !important}

  /* the real keyed dry-erase marker scribbles as natural annotations on the board */
  .scrib{position:absolute;pointer-events:none;background-size:contain;background-repeat:no-repeat;mix-blend-mode:multiply;z-index:30;filter:saturate(1.15)}
  .scrib-circle{background-image:url('/assets/scribbles/scrib_circle.png')}
  .scrib-cross{background-image:url('/assets/scribbles/scrib_cross.png')}
  .scrib-arrow{background-image:url('/assets/scribbles/scrib_arrow.png')}
  .scrib-cluster{background-image:url('/assets/scribbles/scrib_cluster.png')}

  /* ── PITCH DELIVER cohesion — LIGHT EDITORIAL (Stitch) ── scoped to .deliver-mode so it matches the
     relit interview: the "room" tiles were dark navy (Teams-call) dropped onto the light page; they now
     read as framed grayscale film stills on bright dossier card-stock with hard offset shadows + halftone. */
  .deliver-mode .meet{gap:14px;margin-bottom:20px}
  .deliver-mode .meet .tile{background:linear-gradient(135deg,#fff,#f1f3fb);border:1px solid rgba(11,28,48,.12);
    border-radius:2px;box-shadow:6px 6px 0 rgba(11,28,48,.08)}
  .deliver-mode .meet .tile.client{border:3px solid var(--ink);box-shadow:8px 8px 0 var(--accent)}
  .deliver-mode .meet .tile.speaking{border-color:var(--accent);box-shadow:6px 6px 0 var(--accent)}
  .deliver-mode .meet .tile .spic{filter:grayscale(.85) contrast(1.12) brightness(1.0)}
  .deliver-mode .meet .tile.speaking .spic{filter:grayscale(.25) contrast(1.1) brightness(1.04) saturate(1.04)}
  .deliver-mode .meet .tile .nm,.deliver-mode .meet .tile .read{color:var(--ink);text-shadow:none}
  .deliver-mode .meet .tile .nm{background:#fff;border:1px solid rgba(11,28,48,.14);border-radius:0;font-weight:700}
  .deliver-mode .meet .tile .read{background:var(--ink);color:#fff;display:inline-block;left:6px;right:auto;width:auto;
    padding:2px 9px;font-family:var(--mono);letter-spacing:.14em;border-radius:0}
  .deliver-mode .meet .tile .face{filter:none}
  .deliver-mode .meet .tile .mc{color:var(--muted)}
  .deliver-mode .pitch-inner{padding-top:4px}
  .deliver-mode .meetbar{background:rgba(255,255,255,.55);border:1px solid rgba(11,28,48,.10);border-radius:2px;padding:6px 10px}
  .deliver-mode .meetbar .boomlogo{color:#fff}
  .deliver-mode .meetbar .pill{color:var(--ink)}

  /* ═══════════════════════════════════════════════════════════════════════════════════════════
     IN-ROOM PITCH — THE LIVE CALL (CEO #1 surface, 2026-07-17). A deliberate DARK CINEMATIC SEAM
     (UX Law 5 — recorded): the deliver room stays a graded noir "War Room HUD" in every theme, so
     the real video plates read. Accent still recolours per pack (--accent). Overrides the light
     editorial deliver rules above, scoped to .boardroom-mode so the interview screen is untouched.
     ═══════════════════════════════════════════════════════════════════════════════════════════ */
  .pitch-wrap.boardroom-mode.deliver-mode{background:radial-gradient(130% 100% at 84% -10%,#16233c 0%,#0b1220 46%,#070a12 100%) !important;
    border:3px solid #05070d !important;box-shadow:16px 16px 0 rgba(0,0,0,.35),0 40px 90px rgba(0,0,0,.5) !important;color:#e9eefb}
  .pitch-wrap.boardroom-mode.deliver-mode .muted,
  .pitch-wrap.boardroom-mode.deliver-mode .small{color:rgba(226,233,247,.62) !important}
  /* live-call app header */
  .boardroom-mode.deliver-mode .meetbar{background:linear-gradient(90deg,rgba(12,20,34,.92),rgba(9,14,24,.78)) !important;
    border:1px solid rgba(255,255,255,.09) !important;border-radius:8px !important;padding:8px 12px !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
  .boardroom-mode.deliver-mode .meetbar .boomlogo{background:#0b1220 !important;color:#fff !important;
    border:1px solid rgba(var(--glow),.5);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 18px rgba(var(--glow),.25)}
  .boardroom-mode.deliver-mode .meetbar .pill{background:rgba(255,255,255,.07) !important;color:#e9eefb !important;
    border:1px solid rgba(255,255,255,.12);letter-spacing:.02em}
  .boardroom-mode.deliver-mode .meetbar .muted,
  .boardroom-mode.deliver-mode .meetbar .small{color:rgba(226,233,247,.72) !important}
  .boardroom-mode.deliver-mode #camtoggle{background:rgba(255,255,255,.06);color:#e9eefb;border:1px solid rgba(255,255,255,.16);
    border-radius:999px;padding:4px 12px;font-size:11px;font-weight:700;letter-spacing:.02em}
  .boardroom-mode.deliver-mode #camtoggle:hover{background:rgba(255,255,255,.12)}

  /* webcam tiles — cinematic dark, whoever's talking goes live on camera */
  .boardroom-mode.deliver-mode .meet .tile{background:linear-gradient(180deg,#0f1a2c,#080d16) !important;
    border:1px solid rgba(255,255,255,.09) !important;border-radius:9px !important;
    box-shadow:0 10px 26px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05) !important;overflow:hidden}
  .boardroom-mode.deliver-mode .meet .tile.speaking{border-color:rgba(var(--glow),.85) !important;
    box-shadow:0 0 0 2px rgba(var(--glow),.55),0 12px 30px rgba(0,0,0,.45) !important}
  .boardroom-mode.deliver-mode .meet .tile.client{border:2px solid rgba(var(--glow),.6) !important;
    box-shadow:0 0 0 1px rgba(0,0,0,.5),0 16px 42px rgba(0,0,0,.55) !important}
  .boardroom-mode.deliver-mode .meet .tile .spic,
  .boardroom-mode.deliver-mode .meet .tile .face-img{filter:grayscale(.82) contrast(1.16) brightness(.94) !important}
  .boardroom-mode.deliver-mode .meet .tile.speaking .spic,
  .boardroom-mode.deliver-mode .meet .tile.client .cli-cam{filter:grayscale(.32) contrast(1.14) brightness(1.02) saturate(1.06) !important}
  .boardroom-mode.deliver-mode .meet .tile .nm{background:rgba(6,10,18,.72) !important;color:#eef3ff !important;
    border:1px solid rgba(255,255,255,.12) !important;border-radius:6px !important;font-weight:700;text-shadow:none;backdrop-filter:blur(4px)}
  .boardroom-mode.deliver-mode .meet .tile .read{background:rgba(6,10,18,.7) !important;color:#fff !important;
    border:1px solid rgba(var(--glow),.4);border-radius:6px !important;font-family:var(--mono);letter-spacing:.14em;
    display:inline-block;left:8px;right:auto;width:auto;padding:3px 10px;backdrop-filter:blur(4px)}
  /* the LIVE dot — a real "on air" tally-light on the active camera */
  .boardroom-mode.deliver-mode .meet .tile.is-onair::before,
  .boardroom-mode.deliver-mode .meet .tile.client.speaking::before{content:"● LIVE";position:absolute;top:7px;right:7px;z-index:4;
    font-family:var(--mono);font-size:8px;font-weight:800;letter-spacing:.12em;color:#fff;padding:2px 6px;border-radius:4px;
    background:rgba(186,26,26,.9);box-shadow:0 0 12px rgba(186,26,26,.6);animation:onair 1.7s ease-in-out infinite}
  /* client reaction WASH over the webcam — the room's colour reads even on the video */
  .tile.client .cli-wash{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
    transition:opacity .6s ease,background .6s ease}
  .tile.client[data-state="warm"] .cli-wash,.tile.client[data-state="thaw"] .cli-wash{opacity:.9;
    background:radial-gradient(120% 130% at 50% 30%,rgba(var(--glow),.34),transparent 66%),linear-gradient(0deg,rgba(157,67,0,.32),transparent 55%)}
  .tile.client[data-state="sold"] .cli-wash{opacity:1;
    background:radial-gradient(120% 130% at 50% 30%,rgba(31,122,58,.4),transparent 68%),linear-gradient(0deg,rgba(31,122,58,.34),transparent 55%)}
  .tile.client[data-state="cool"] .cli-wash,.tile.client[data-state="frozen"] .cli-wash{opacity:.92;
    background:radial-gradient(120% 130% at 50% 60%,rgba(40,86,150,.44),transparent 66%),linear-gradient(0deg,rgba(20,40,70,.5),transparent 60%)}
  .boardroom-mode.deliver-mode .meet .tile.client .read,
  .boardroom-mode.deliver-mode .meet .tile.client .nm{z-index:3}
  .boardroom-mode.deliver-mode .meet .tile.client .mc{z-index:3}

  /* ── ROOM TEMPERATURE — the visceral gauge (the tension of the room, sold as a dramatic mechanic) ── */
  .boardroom-mode.deliver-mode .roommeter{margin:14px 0 6px;padding:14px 15px 13px;border-radius:12px;
    background:linear-gradient(180deg,rgba(13,21,36,.9),rgba(7,11,20,.82));border:1px solid rgba(255,255,255,.09);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 30px rgba(0,0,0,.4)}
  .rm-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:11px}
  .rm-eyebrow{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;font-weight:800;
    letter-spacing:.26em;text-transform:uppercase;color:rgba(226,233,247,.62)}
  .rm-live{width:7px;height:7px;border-radius:50%;background:#ba1a1a;box-shadow:0 0 10px rgba(186,26,26,.8);animation:onair 1.7s ease-in-out infinite}
  .rm-state{font-family:var(--pn-disp),var(--mono);font-weight:900;font-style:italic;font-size:clamp(20px,3vw,30px);
    letter-spacing:-.03em;line-height:.9;text-transform:uppercase}
  .rm-win .rm-state{color:#43d17a;text-shadow:0 0 26px rgba(31,122,58,.55)}
  .rm-lose .rm-state{color:#ff6a5a;text-shadow:0 0 26px rgba(186,26,26,.5)}
  .rm-edge .rm-state{color:var(--accent);text-shadow:0 0 26px rgba(var(--glow),.5);animation:rmEdge 1.25s ease-in-out infinite}
  @keyframes rmEdge{0%,100%{opacity:.82}50%{opacity:1}}
  .boardroom-mode.deliver-mode .roomtrack{position:relative;height:20px;border-radius:999px;overflow:visible;
    background:linear-gradient(90deg,#2a4568 0%,#4a5b78 26%,#c98a4e 56%,var(--accent) 76%,#1f7a3a 100%);
    border:1px solid rgba(0,0,0,.5);box-shadow:inset 0 2px 6px rgba(0,0,0,.45)}
  .boardroom-mode.deliver-mode .roomtrack::after{content:"";position:absolute;inset:0;border-radius:999px;pointer-events:none;
    background:repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 1px,transparent 1px 9%)}
  .boardroom-mode.deliver-mode .roomtrack .band{position:absolute;top:0;bottom:0;z-index:2;border-radius:2px;
    background:repeating-linear-gradient(45deg,rgba(255,255,255,.42),rgba(255,255,255,.42) 3px,rgba(255,255,255,.14) 3px,rgba(255,255,255,.14) 7px);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
  .band-lbl{position:absolute;left:50%;top:-15px;transform:translateX(-50%);font-family:var(--mono);font-size:7.5px;
    font-weight:800;letter-spacing:.14em;color:rgba(255,255,255,.7);white-space:nowrap}
  .boardroom-mode.deliver-mode .roomtrack .barline{position:absolute;top:-5px;bottom:-5px;z-index:3;width:3px;
    background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 10px rgba(255,255,255,.4)}
  .bar-lbl{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);font-family:var(--mono);font-size:7.5px;
    font-weight:800;letter-spacing:.14em;color:rgba(255,255,255,.82);white-space:nowrap}
  .boardroom-mode.deliver-mode .roomtrack .needle{position:absolute;top:-6px;bottom:-6px;z-index:4;width:4px;
    background:#0b1220;box-shadow:0 0 0 2px #fff,0 4px 14px rgba(0,0,0,.6);border-radius:3px;
    transition:left .6s cubic-bezier(.22,1,.36,1)}
  .ndl-head{position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:14px;height:14px;border-radius:50%;
    background:#fff;box-shadow:0 0 0 2px #0b1220,0 0 16px rgba(255,255,255,.7)}
  .rm-win .roomtrack .needle,.rm-win .ndl-head{box-shadow:0 0 0 2px #43d17a,0 0 18px rgba(67,209,122,.8)}
  .rm-lose .roomtrack .needle,.rm-lose .ndl-head{box-shadow:0 0 0 2px #ff6a5a,0 0 18px rgba(255,106,90,.8)}
  .rm-ends{display:flex;justify-content:space-between;margin-top:9px;font-family:var(--mono);font-size:8px;
    font-weight:800;letter-spacing:.18em;color:rgba(226,233,247,.4)}
  .boardroom-mode.deliver-mode .roomverdict{font-size:13px;font-weight:700;color:#eef3ff;margin-top:8px;font-style:italic;line-height:1.4}
  .rm-win .roomverdict{color:#8fe6ad}.rm-lose .roomverdict{color:#ffb3aa}

  /* ── LIVE TRANSCRIPT — the beat feed reads like the room reacting in real time ── */
  .boardroom-mode.deliver-mode .matchfeed{background:linear-gradient(180deg,rgba(12,19,33,.9),rgba(7,11,20,.8)) !important;
    border:1px solid rgba(255,255,255,.09) !important;border-radius:12px !important;box-shadow:0 12px 30px rgba(0,0,0,.4)}
  .boardroom-mode.deliver-mode .matchfeed>.row b{color:#eef3ff;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
  .boardroom-mode.deliver-mode .beat{background:rgba(255,255,255,.04) !important;color:#e9eefb !important;
    border-left:3px solid rgba(255,255,255,.2);border-radius:0 8px 8px 0;padding:9px 12px;font-size:12.5px;line-height:1.5}
  .boardroom-mode.deliver-mode .beat b{color:#fff}
  .boardroom-mode.deliver-mode .beat .muted,.boardroom-mode.deliver-mode .beat .small{color:rgba(226,233,247,.6) !important}
  .boardroom-mode.deliver-mode .beat-warm{border-left-color:var(--accent) !important;background:linear-gradient(90deg,rgba(var(--glow),.16),rgba(255,255,255,.03) 60%) !important}
  .boardroom-mode.deliver-mode .beat-cool{border-left-color:#6f8bb5 !important;background:linear-gradient(90deg,rgba(70,110,170,.2),rgba(255,255,255,.02) 60%) !important}
  .boardroom-mode.deliver-mode .beat-event{border-left-color:#c084fc !important;background:linear-gradient(90deg,rgba(192,132,252,.18),rgba(255,255,255,.02) 62%) !important}
  .boardroom-mode.deliver-mode .beat-swing{border-left-color:var(--accent) !important;background:rgba(var(--glow),.12) !important;font-weight:700}
  .boardroom-mode.deliver-mode .beat-luck{border-left-color:#38bdf8 !important;background:linear-gradient(90deg,rgba(56,189,248,.2),rgba(255,255,255,.02) 60%) !important;font-weight:700}
  .boardroom-mode.deliver-mode .beat-open{border-left-color:rgba(255,255,255,.28) !important;font-style:italic;color:rgba(226,233,247,.72) !important}
  /* the newest line lands with a soft glow so the transcript feels live */
  .boardroom-mode.deliver-mode .beatfeed>.beat:first-child{animation:beatIn .5s cubic-bezier(.16,.84,.3,1) 1;box-shadow:inset 3px 0 0 -1px rgba(var(--glow),.4)}
  @keyframes beatIn{0%{opacity:0;transform:translateY(-6px)}100%{opacity:1;transform:none}}
  .boardroom-mode.deliver-mode .swing{background:linear-gradient(180deg,rgba(var(--glow),.14),rgba(255,255,255,.02)) !important;border:1px solid rgba(var(--glow),.5) !important;border-radius:10px}
  .boardroom-mode.deliver-mode .swing h4{color:#fff !important}
  .boardroom-mode.deliver-mode .swing .opt{background:rgba(255,255,255,.05) !important;color:#eef3ff !important;border:1px solid rgba(255,255,255,.14) !important}
  .boardroom-mode.deliver-mode .swing .opt small{color:rgba(226,233,247,.62) !important}

  /* the on-air header + KEY slide emphasis on the stage */
  .boardroom-mode.deliver-mode .bm-head h2{color:#fff}
  .boardroom-mode.deliver-mode .bm-eyebrow.live{color:#fff}
  .bs-slide.is-key .bs-kick{color:#fff;background:var(--accent);padding:2px 7px;border-radius:3px;display:inline-block}
  @media (prefers-reduced-motion:reduce){
    .rm-edge .rm-state,.rm-live,.boardroom-mode.deliver-mode .meet .tile.is-onair::before,
    .boardroom-mode.deliver-mode .meet .tile.client.speaking::before,
    .boardroom-mode.deliver-mode .beatfeed>.beat:first-child{animation:none !important}
  }

  /* ===== WAR ROOM — talent assignment cards (skill + cost + swap) ===== */
  .talentcard .tc-photo{position:relative}
  .talentcard .tc-disc{position:absolute;left:6px;top:6px;background:var(--ink);color:#fff;font-family:var(--mono);font-size:8px;font-weight:800;letter-spacing:.16em;padding:2px 7px;text-transform:uppercase;z-index:2}
  .talentcard.p-strategy .tc-disc{background:var(--accent);color:#fff}
  .talentcard .tc-pills{position:absolute;right:6px;top:6px;display:flex;gap:3px;z-index:2}
  .talentcard .tc-body{padding:7px 8px 9px;gap:5px}
  .tc-name{font-weight:900;font-size:13px;letter-spacing:-.01em;color:var(--ink);display:flex;flex-direction:column;line-height:1.05}
  .p-strategy .tc-name{color:#fff}
  .tc-name .tc-role{font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:2px}
  .p-strategy .tc-name .tc-role{color:rgba(255,255,255,.6)}
  .tc-skillrow,.tc-qualrow{display:flex;align-items:center;gap:6px}
  .tc-mini{font-family:var(--mono);font-size:7.5px;font-weight:800;letter-spacing:.14em;color:var(--muted);width:30px;flex:none}
  .p-strategy .tc-mini{color:rgba(255,255,255,.55)}
  .tc-skill{flex:1;height:6px;background:rgba(11,28,48,.10);overflow:hidden}
  .p-strategy .tc-skill{background:rgba(255,255,255,.14)}
  .tc-skill>i{display:block;height:100%;background:var(--ink)}
  .p-strategy .tc-skill>i{background:#fff}
  .tc-skillno{font-family:var(--mono);font-size:11px;font-weight:900;width:22px;text-align:right}
  .tc-skillno.tier-A,.tc-cand-sk.tier-A{color:var(--good)}
  .tc-skillno.tier-B,.tc-cand-sk.tier-B{color:var(--accent)}
  .tc-skillno.tier-C,.tc-cand-sk.tier-C{color:var(--muted)}
  .tc-skillno.tier-D,.tc-cand-sk.tier-D{color:var(--bad)}
  .p-strategy .tc-skillno.tier-C{color:rgba(255,255,255,.7)}
  .tc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:2px}
  .tc-cost{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
  .p-strategy .tc-cost{color:rgba(255,255,255,.6)}
  .tc-swap{font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border:1px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;border-radius:0}
  .tc-swap:hover{background:var(--ink);color:#fff}
  .p-strategy .tc-swap{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.4)}
  .p-strategy .tc-swap:hover{background:var(--accent);border-color:var(--accent)}
  .tc-picker{margin-top:6px;display:flex;flex-direction:column;gap:3px;max-height:176px;overflow-y:auto;background:rgba(255,255,255,.72);border:1px solid rgba(11,28,48,.14);padding:4px;backdrop-filter:blur(6px)}
  .tc-cand{display:flex;align-items:center;gap:7px;padding:4px;border:1px solid transparent;background:none;cursor:pointer;text-align:left;width:100%;border-radius:0}
  .tc-cand:hover{background:rgba(11,28,48,.06)}
  .tc-cand.on{border-color:var(--accent);background:rgba(var(--glow),.10)}
  .tc-cand img{width:30px;height:34px;object-fit:cover;object-position:center top;filter:grayscale(1) contrast(1.2);flex:none}
  .tc-cand-nm{font-weight:800;font-size:11px;color:var(--ink)}
  .tc-cand-role{flex:1;font-family:var(--mono);font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tc-cand-sk{font-family:var(--mono);font-size:12px;font-weight:900;width:22px;text-align:right;flex:none}
  /* DEPARTMENT-STRENGTH overview (squad health per discipline) */
  .dept-overview{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:12px}
  @media(max-width:640px){ .dept-overview{grid-template-columns:repeat(2,1fr)} }  /* critic B4: 5-col crushed to ~65px at 390 */
  .dept{background:rgba(255,255,255,.55);border:1px solid rgba(11,28,48,.12);border-top:3px solid var(--muted);border-radius:2px;padding:8px 9px}
  .dept-key{box-shadow:inset 0 0 0 1px rgba(var(--glow),.25)}
  .dept-strong{border-top-color:var(--good)} .dept-solid{border-top-color:var(--accent)} .dept-thin{border-top-color:#c2700a} .dept-weak{border-top-color:var(--bad)}
  .dept-top{display:flex;justify-content:space-between;align-items:center;gap:4px}
  .dept-name{font-weight:900;font-size:11px;letter-spacing:-.01em;text-transform:uppercase;color:var(--ink)}
  .dept-keytag{font-family:var(--mono),monospace;font-size:7px;font-weight:800;letter-spacing:.1em;background:var(--accent);color:#fff;padding:1px 4px}
  .dept-bar{height:5px;background:rgba(11,28,48,.10);margin:6px 0 5px;overflow:hidden}
  .dept-bar>i{display:block;height:100%}
  .dept-strong .dept-bar>i{background:var(--good)} .dept-solid .dept-bar>i{background:var(--accent)} .dept-thin .dept-bar>i{background:#c2700a} .dept-weak .dept-bar>i{background:var(--bad)}
  .dept-meta{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono),monospace;font-size:8px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
  .dept-flag{color:var(--ink)} .dept-weak .dept-flag,.dept-thin .dept-flag{color:var(--bad)}
  .dept-depth{color:var(--muted)}
  .dept-bolster{margin-top:6px;width:100%;font-family:var(--mono),monospace;font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px;border:1px solid var(--bad);background:#fff;color:var(--bad);cursor:pointer;border-radius:0}
  .dept-bolster:hover{background:var(--bad);color:#fff}
  /* ROLL THE DICE (CEO 2026-07-26) — the escape hatch on every free-text input.
     Deliberately quieter than the primary action: it is the alternative to doing the work, so it
     reads as a mono utility chip, never as the thing you're being pushed towards. Theme-driven
     tokens only, so it inherits every palette. */
  /* CEO 2026-07-31 (defect 2, "this is sloppy design"): the dice + its "?" were two loose objects at
     two different heights with an orphaned circle floating between chips. They are now ONE segmented
     control — a single hairline frame, the ? butted on as a divided segment — sitting on the shared
     32px chip baseline every control in this row uses (--pn-chiph). One unit, one height, one rhythm. */
  .pn-dice-wrap{--pn-chiph:32px;display:inline-flex;align-items:stretch;gap:0;flex:0 0 auto;position:relative;
    height:var(--pn-chiph);border:1px solid color-mix(in srgb,var(--ink) 24%,transparent);border-radius:2px;
    background:color-mix(in srgb,var(--ink) 5%,transparent);overflow:hidden}
  .pn-dice-wrap:hover{border-color:color-mix(in srgb,var(--ink) 38%,transparent)}
  /* CEO 2026-07-31 iteration 3 ("make these buttons more prominent- add dice imagery"): the dice
     is a real chance mechanic — it earns a loud accent slab with a big tilted die, not a quiet
     mono ghost that reads as a label. */
  .pn-dice{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
    font-family:var(--mono),monospace;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
    color:var(--pn-on-p,#fff);background:var(--accent,#f97316) !important;
    border:0;border-radius:2px;padding:9px 16px 9px 12px;
    clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%);
    box-shadow:4px 4px 0 rgba(11,28,48,.28);
    transition:background .14s ease,transform .12s ease,box-shadow .12s ease}
  .pn-dice:hover{background:var(--accent);filter:brightness(1.12);transform:translate(1px,1px);
    box-shadow:2px 2px 0 rgba(11,28,48,.28)}
  .pn-dice:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .pn-dice-i{width:22px;height:22px;flex:0 0 auto;transform:rotate(-12deg);
    filter:drop-shadow(1px 1px 0 rgba(0,0,0,.25))}
  .pn-dice b{font-weight:700}
  /* the throw: one decisive tumble, not a spinner. Honours reduced-motion. */
  .pn-dice.is-rolling .pn-dice-i{animation:pn-dice-throw .42s cubic-bezier(.2,.9,.25,1)}
  @keyframes pn-dice-throw{
    0%{transform:rotate(0) scale(1)}
    55%{transform:rotate(200deg) scale(1.16)}
    100%{transform:rotate(360deg) scale(1)}
  }
  .pn-dice-filled{animation:pn-dice-fill .5s ease}
  @keyframes pn-dice-fill{0%{background:color-mix(in srgb,var(--accent) 18%,#fff)}100%{background:#fff}}
  @media (prefers-reduced-motion:reduce){
    .pn-dice.is-rolling .pn-dice-i{animation:none}
    .pn-dice-filled{animation:none}
  }
  /* the "?" is a SEGMENT of the dice control, not an orphan circle — same height, divided by a hairline */
  .pn-dice-q{cursor:pointer;width:28px;flex:0 0 auto;border-radius:0;align-self:stretch;
    display:inline-flex;align-items:center;justify-content:center;padding:0;
    font-family:var(--mono),monospace;font-size:11px;font-weight:800;line-height:1;
    color:color-mix(in srgb,var(--ink) 66%,transparent);background:color-mix(in srgb,var(--ink) 5%,transparent);
    border:0;border-left:1px solid color-mix(in srgb,var(--ink) 22%,transparent);
    transition:background .14s ease,color .14s ease}
  .pn-dice-q:hover{color:var(--pn-on-p,#fff);background:var(--accent)}
  .pn-dice-q[aria-expanded="true"]{color:var(--pn-on-p,#fff);background:var(--accent)}
  .pn-dice-q:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  /* the explainer stays put until dismissed — a hover tooltip is useless on the iPad this ships to */
  /* Sits IN THE FLOW on its own row rather than floating: an absolute panel here covered the very
     input the player had just filled, hiding the rolled line (occlusion violation, caught in the
     render gate 2026-07-26). Pushing layout is the honest answer. */
  .pn-dice-help{flex:1 1 100%;width:100%;min-width:0;order:99;margin-top:9px;
    font-family:var(--body,inherit);font-size:12px;font-style:normal;font-weight:400;line-height:1.45;letter-spacing:0;text-transform:none;
    color:var(--ink);background:var(--paper,#fff);
    border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);border-left:2px solid var(--accent);
    padding:9px 11px;box-shadow:4px 4px 0 color-mix(in srgb,var(--ink) 10%,transparent)}
  .pn-dice-help[hidden]{display:none}
  /* the one-pager head's control cluster: dice-unit + the file chip, ONE baseline, ONE rhythm.
     `min-width:0` + wrap keeps the explainer (which claims 100%) from inflating the cluster's
     min-content width and shunting the whole group onto its own left-aligned line (the CEO's
     "misaligned, three different heights" screenshot). */
  .poap-head-tools{display:flex;align-items:center;gap:10px;margin-left:auto;position:relative;
    flex:0 1 auto;min-width:0;flex-wrap:wrap;justify-content:flex-end}
  /* the angle label is baseline-aligned for its two text runs; the control must not ride on that */
  .wr-angle-label .pn-dice-wrap{align-self:center;margin-left:auto}
  /* YOUR ANGLE — the founder's proposition input that steers the build */
  .prop-input{margin-top:12px;background:linear-gradient(135deg,#fff,#f1f3fb);border:1px solid rgba(11,28,48,.14);border-left:1px solid var(--lg-hair-neutral,rgba(128,132,140,.2));border-radius:2px;padding:11px 14px}
  .prop-label{display:block;font-family:var(--mono),monospace;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--accent2);margin-bottom:7px}
  .prop-input textarea{width:100%;resize:vertical;border:1px solid rgba(11,28,48,.16);background:#fff;border-radius:2px;padding:8px 10px;font-family:inherit;font-size:15px;font-style:italic;color:var(--ink);line-height:1.4}
  .prop-input textarea:focus{outline:none;border-color:var(--accent);box-shadow:3px 3px 0 rgba(var(--glow),.18)}
  .prop-input.is-locked{border-left-color:var(--ink)}
  .prop-locked{margin:2px 0 0;font-size:15px;font-style:italic;color:var(--ink)}
  .fc-angle .fc-bub{background:#fff7ed;border-color:rgba(var(--glow),.4)}
  .fc-angle .fc-nm{color:var(--accent2)}
  .bs-angle-banner{margin-top:8px;display:inline-block;font-family:var(--mono),monospace;font-size:11px;font-weight:700;letter-spacing:.04em;font-style:italic;color:var(--ink);background:rgba(var(--glow),.12);border-left:1px solid var(--lg-hair-neutral,rgba(128,132,140,.2));padding:5px 12px}
  /* TOP-NAV DASHBOARD — clickable stat groups + expanding detail panel */
  .stat-tap{cursor:pointer;border-radius:3px;transition:background .12s}
  .stat-tap:hover{background:rgba(11,28,48,.06)}
  .stat-tap.on{background:rgba(var(--glow),.14)}
  .navpanel{position:fixed;top:60px;left:0;right:0;z-index:48;display:flex;justify-content:center;pointer-events:none}
  .navpanel.hidden{display:none}
  .np-inner{position:relative;pointer-events:auto;width:min(640px,94vw);background:#fff;border:1px solid rgba(11,28,48,.16);border-top:3px solid var(--accent);box-shadow:0 24px 60px rgba(11,28,48,.22);padding:16px 18px;animation:npdrop .16s ease-out}
  @keyframes npdrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .np-head{font-weight:900;font-size:15px;text-transform:uppercase;letter-spacing:-.01em;color:var(--ink);display:flex;align-items:baseline;gap:8px;margin-bottom:12px}
  .np-head span{font-family:var(--mono),monospace;font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
  .np-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .np-cell{background:rgba(11,28,48,.03);border:1px solid rgba(11,28,48,.08);padding:8px 10px;display:flex;flex-direction:column;gap:2px}
  .np-cell.hero{border-left:1px solid var(--lg-hair-neutral,rgba(128,132,140,.2))}
  .np-k{font-family:var(--mono),monospace;font-size:8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .np-v{font-size:18px;font-weight:900;color:var(--ink)}
  .np-v.bad{color:var(--bad)}
  .np-list{display:flex;flex-direction:column;gap:4px;max-height:240px;overflow-y:auto}
  .np-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:7px 9px;background:rgba(11,28,48,.03);border:1px solid rgba(11,28,48,.08)}
  .np-row-nm{font-weight:800;font-size:13px;color:var(--ink)}
  .np-sub{font-family:var(--mono),monospace;font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
  .np-empty,.np-note{font-size:12px;color:var(--muted);margin:10px 2px 0;line-height:1.5}
  .np-cta{margin-top:12px;font-family:var(--mono),monospace;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:#fff;border:none;padding:8px 14px;cursor:pointer;border-radius:2px}
  .np-cta:hover{background:var(--accent)}
  .np-close{position:absolute;top:6px;right:10px;background:none;border:none;font-size:22px;line-height:1;color:var(--muted);cursor:pointer}
  .np-close:hover{color:var(--ink)}
  /* CLIENT MOOD — non-emoji mood orb + engagement column (replaces the smiley) */
  .cmood{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;width:100%;height:100%;min-height:140px;padding:16px}
  .cmood-orb{position:relative;width:min(52%,118px);aspect-ratio:1}
  .cmood-orb::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 38% 32%,var(--orb-hi),var(--orb-lo) 72%);box-shadow:0 8px 30px -6px var(--orb-glow),inset 0 0 18px -4px rgba(255,255,255,.4)}
  .cmood-orb::after{content:"";position:absolute;inset:-14%;border-radius:50%;border:2px solid var(--orb-glow);animation:cmpulse var(--orb-spd,4s) ease-in-out infinite}
  @keyframes cmpulse{0%,100%{transform:scale(.9);opacity:.12}50%{transform:scale(1.1);opacity:.5}}
  .cmood-engage{display:flex;gap:5px;align-items:flex-end;height:24px}
  .cmood-engage i{width:7px;height:100%;background:rgba(11,28,48,.12);border-radius:1px;transition:background .4s}
  .cmood-engage i.on{background:var(--orb-glow)}
  .cmood-frozen{--orb-hi:#6b7d96;--orb-lo:#1d2738;--orb-glow:#46566e;--orb-spd:6.5s}
  .cmood-cool{--orb-hi:#86a0c6;--orb-lo:#27374f;--orb-glow:#5d7eb0;--orb-spd:5s}
  .cmood-neutral{--orb-hi:#c2b29a;--orb-lo:#473b2e;--orb-glow:#90806a;--orb-spd:4s}
  .cmood-thaw{--orb-hi:#ffc890;--orb-lo:#7a3a10;--orb-glow:#e8923a;--orb-spd:3s}
  .cmood-warm{--orb-hi:#ffb478;--orb-lo:#9d4300;--orb-glow:var(--accent);--orb-spd:2.2s}
  .cmood-sold{--orb-hi:#86e6a6;--orb-lo:#0e4a26;--orb-glow:#1f9d4a;--orb-spd:1.5s}
  /* BOARDROOM vs WAR ROOM — make the live stage read distinct from the prep room */
  .bm-head{align-items:flex-start}
  .bm-eyebrow{display:inline-block;font-family:var(--mono),monospace;font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--accent2);margin-bottom:3px}
  .bm-eyebrow.live{color:#fff;background:var(--bad);padding:3px 11px;animation:onair 1.3s ease-in-out infinite}
  @keyframes onair{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(186,26,26,.55)}50%{opacity:.72;box-shadow:0 0 0 5px rgba(186,26,26,0)}}
  .boardroom-mode{border-top:5px solid var(--ink)}
  .boardroom-mode.is-live{border-top-color:var(--bad)}
  .bm-await{margin:14px 0 6px;padding:14px 18px;background:rgba(11,28,48,.04);border:1px dashed rgba(11,28,48,.22);border-radius:2px;font-size:14px;color:var(--muted);line-height:1.5}
  .bm-await-k{display:block;font-family:var(--mono),monospace;font-size:10px;font-weight:800;letter-spacing:.2em;color:var(--accent2);margin-bottom:5px}
  /* label the live room's three reads */
  .deliver-mode .roommeter .lbl span:first-child::after{content:" · temperature";opacity:.6;font-weight:600}

  /* the "Get to work" WhatsApp-style build thread (cinematic). z ABOVE the PN/OS dock (z:300) so the
     build is a clean full takeover — the dock used to float over it (CEO #1 "layers stack wrong"). */
  /* CEO 2026-08-01 (CEO-46): top-anchored, NOT centered — a centered panel grows downward AND upward
     as build messages land, so the header Skip crept up the screen every beat. Anchored, it never moves. */
  .floorchat{position:fixed;inset:0;z-index:400;display:flex;align-items:flex-start;justify-content:center;padding-top:7vh}
  /* CEO-27: the way back from "stepped away mid-pitch" — always on screen, above the dock */
  #pn-awaychip{position:fixed;left:50%;transform:translateX(-50%);bottom:86px;z-index:390;
    background:var(--accent);color:#fff;border:0;border-radius:2px;cursor:pointer;
    font-family:var(--mono);font-size:12px;font-weight:800;letter-spacing:.12em;padding:12px 18px;
    box-shadow:6px 6px 0 rgba(11,28,48,.55)}
  #pn-awaychip:hover{filter:brightness(1.08)}
  /* CEO-43: PRESSURE bar — fixed right edge, office view only */
  #pn-pressure{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:60;width:26px;
    display:flex;flex-direction:column;align-items:center;gap:6px;cursor:help}
  #pn-pressure b{font:900 10px/1 var(--mono);letter-spacing:.06em;color:var(--pn-muted,#8aa0bc)}
  #pn-pressure .track{width:10px;height:34vh;border-radius:6px;background:rgba(127,127,127,.18);
    border:1px solid rgba(127,127,127,.3);display:flex;align-items:flex-end;overflow:hidden}
  #pn-pressure .track i{display:block;width:100%;background:#2e9e5b;transition:height .5s ease}
  #pn-pressure.warm .track i{background:#e0a23c}
  #pn-pressure.hot .track i{background:#d0432c}
  #pn-pressure.hot b{color:#d0432c}
  @media(max-width:900px){ #pn-pressure{display:none} }
  .floorchat[hidden]{display:none}
  /* FULLY occlude the war room behind the build thread (Law 2 — the .55 scrim let the team cards, dock
     and topbar bleed through, which read as the "layers stack wrong / bubbles bleeding through" glitch). */
  .floorchat .fc-backdrop{position:absolute;inset:0;background:rgba(5,8,14,.92);
    -webkit-backdrop-filter:blur(16px) saturate(115%);backdrop-filter:blur(16px) saturate(115%)}
  .fc-panel{position:relative;width:min(540px,94vw);max-height:84vh;display:flex;flex-direction:column;background:linear-gradient(180deg,#fff,#eef2fb);border:1px solid rgba(11,28,48,.16);box-shadow:18px 18px 0 rgba(11,28,48,.85),40px 40px 80px rgba(0,0,0,.4);border-radius:2px;overflow:hidden}
  .fc-head{display:flex;align-items:center;gap:8px;padding:12px 14px;background:var(--ink);color:#fff;position:relative}
  .fc-head b{font-size:13px;font-weight:800}
  .fc-head .fc-sub{font-size:10px;color:rgba(255,255,255,.55);font-style:italic}
  .fc-dot{width:8px;height:8px;border-radius:50%;background:#1fd65f;box-shadow:0 0 8px #1fd65f;flex:none}
  .fc-prog{position:absolute;left:0;bottom:0;height:3px;width:100%;background:rgba(255,255,255,.12)}
  .fc-prog>i{display:block;height:100%;width:0;background:var(--accent);transition:width .4s}
  .fc-skip{margin-left:auto;font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:.1em;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3);padding:3px 8px;cursor:pointer;border-radius:0}
  .fc-skip:hover{background:var(--accent);border-color:var(--accent)}
  .fc-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:9px;background-image:radial-gradient(rgba(11,28,48,.05) 1px,transparent 0);background-size:14px 14px}
  .fc-sys{align-self:center;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:rgba(11,28,48,.06);padding:3px 10px;border-radius:999px}
  .fc-msg{display:flex;gap:8px;max-width:88%;animation:fcpop .26s ease-out}
  .fc-msg.me{align-self:flex-end;flex-direction:row-reverse}
  .fc-av{width:28px;height:28px;border-radius:50%;object-fit:cover;object-position:center top;filter:grayscale(.5) contrast(1.15);flex:none;align-self:flex-end}
  .fc-bub{position:relative;background:#fff;border:1px solid rgba(11,28,48,.12);padding:6px 10px;border-radius:10px;border-top-left-radius:2px}
  .fc-msg.me .fc-bub{background:#dcf7e3;border-color:rgba(31,122,58,.25);border-radius:10px;border-top-right-radius:2px}
  .fc-nm{display:block;font-size:10px;font-weight:800;color:var(--accent2);margin-bottom:1px}
  .fc-nm i{font-style:normal;font-family:var(--mono);font-size:8px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
  .fc-txt{font-size:13px;line-height:1.4;color:var(--ink)}
  .fc-react{display:inline-block;margin-left:6px;width:7px;height:7px;border-radius:50%;vertical-align:middle}
  .fc-react.warm,.fc-react.sold{background:var(--accent)}
  .fc-react.cool{background:#6b7790}
  .fc-typing{display:flex;gap:4px;align-items:center;padding:0 16px 12px}
  .fc-typing.me{justify-content:flex-end}
  .fc-typing[hidden]{display:none}
  .fc-typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:fcblink 1s infinite}
  .fc-typing span:nth-child(2){animation-delay:.2s}
  .fc-typing span:nth-child(3){animation-delay:.4s}
  @keyframes fcblink{0%,60%,100%{opacity:.25}30%{opacity:1}}
  @keyframes fcpop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

  /* THE ESTABLISHING BAND (CEO 2026-07-21, Task B) — replaces the broken video-card montage. ONE
     committed still (env_boardroom_night) over a dark base + bottom scrim, with a restrained mono
     eyebrow + title and the build progress line. The dark base means NO frame can ever fall to a raw
     green gradient; the image only ever deepens the same premium band. Cinematic, calm, confident. */
  .fc-establish{position:relative;height:clamp(150px,23vh,200px);flex:none;overflow:hidden;background:#0a1018;
    border-bottom:1px solid rgba(11,28,48,.28)}
  .fc-establish-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;
    filter:grayscale(.28) contrast(1.06) brightness(.82) saturate(.92)}
  .fc-establish-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,rgba(6,10,17,.28) 0%,rgba(6,10,17,0) 34%,rgba(6,10,17,.5) 72%,rgba(5,8,13,.9) 100%),
      radial-gradient(120% 90% at 20% 10%,rgba(249,115,22,.14),transparent 55%)}
  .fc-establish-txt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 18px 16px;
    display:flex;flex-direction:column;gap:4px}
  .fc-establish-eyebrow{font-family:var(--mono),monospace;font-size:9.5px;font-weight:700;letter-spacing:.24em;
    text-transform:uppercase;color:var(--accent);text-shadow:0 1px 3px rgba(0,0,0,.6)}
  .fc-establish-title{font-family:var(--display,var(--pn-font));font-weight:900;font-size:clamp(22px,4.4vw,30px);
    line-height:.92;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.55);text-wrap:balance}
  .fc-establish .fc-prog{z-index:3}
  @media (prefers-reduced-motion:reduce){ .fc-establish-img{filter:grayscale(.34) contrast(1.05) brightness(.8)} }

  /* ══════════ THE PITCH-READY SET-PIECE (CEO 07-10 order, built 2026-07-25) ══════════
     The flat "Deck is built" interstitial is replaced by a four-beat moment:
       (i)   WORKING MONTAGE — committed pickup/montage clips cross-fade behind a mono site-line
             (screen_glow / keyboard_hands / pitch/montage_1-5). Muted, looping, loop-safe.
       (ii)  THE LAPTOP FACE — a CSS/3D laptop tilts up out of the montage; its screen carries
             "PITCH READY" and the BUILT DECK assembling as five pillar cards (one per discipline,
             each with its real quality bar — the deck you actually made, not a graphic).
       (iii) THE CLOSE — the lid folds shut on the finished deck (transform-only, 720ms).
       (iv)  THE CTA — the headline transfers from the screen to the page and the CTA set rises.
     REDUCED MOTION: no video, no fold. The laptop renders open and static with the five pillar
     cards already assembled, and the CTA is there immediately — the same information, no movement. */
  .pn-ready{position:fixed;inset:0;z-index:10040;display:flex;align-items:center;justify-content:center;padding:24px}
  /* THE VOID IS ART-DIRECTED, NEVER EMPTY (2026-07-31 restage).
     The old scrim was a flat radial to rgba(2,4,7,.985) + brightness(.4) on the reel — it crushed
     the montage/plate to ~1% luminance, so the top half read as an UNLOADED plate (QA, 07-31).
     It is now a DIRECTIONAL grade: the top band keeps real image presence (plate + b-roll), and it
     lands to near-solid exactly where the headline/CTA sit, so AA is preserved by geometry, not by
     blacking out the whole frame. Grain + halftone + a burnt-orange key-light sit over it (SST §3
     motifs 1 + 4), so black reads as film stock. */
  .pn-ready-scrim{position:absolute;inset:0;z-index:1;
    background:
      radial-gradient(74% 52% at 50% 26%,rgba(249,115,22,.11),transparent 72%),
      radial-gradient(126% 108% at 50% 34%,transparent 34%,rgba(2,4,7,.62) 78%,rgba(2,4,7,.9) 100%),
      linear-gradient(180deg,rgba(4,7,13,.50) 0%,rgba(4,7,13,.62) 32%,rgba(3,5,9,.86) 58%,rgba(2,4,7,.955) 74%,rgba(2,4,7,.975) 100%);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);animation:pnrScrim .3s ease both}
  /* halftone + film grain — the texture that makes the dark READ as stock, not as empty pixels */
  .pnr-tex{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5}
  .pnr-tex::before,.pnr-tex::after{content:"";position:absolute;inset:0}
  .pnr-tex::before{background-image:radial-gradient(rgba(255,255,255,.42) .55px,transparent .75px);
    background-size:3px 3px;opacity:.26;mix-blend-mode:screen}
  .pnr-tex::after{opacity:.5;mix-blend-mode:overlay;background-size:200px 200px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
  /* giant bleed word (SST motif 4) — the brand, huge and faint, cut across by the machine */
  .pnr-bleed{position:absolute;z-index:1;left:0;right:0;top:0;height:62%;overflow:hidden;
    pointer-events:none;display:flex;align-items:flex-start;justify-content:center;
    font-family:'Inter',sans-serif;font-weight:900;font-style:italic;text-transform:uppercase;
    font-size:clamp(96px,20vw,300px);line-height:.74;letter-spacing:-.075em;white-space:nowrap;
    color:#fff;opacity:.055;padding-top:5vh}
  /* (i) the working montage */
  .pnr-reel{position:absolute;inset:0;z-index:0;overflow:hidden;background:#05070b;
    background-size:cover;background-position:50% 38%;background-repeat:no-repeat;
    transition:opacity .9s ease,filter .9s ease}
  .pnr-reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
    filter:grayscale(.42) contrast(1.14) brightness(.66);transition:opacity .55s linear}
  .pnr-reel video.on{opacity:1}
  /* one grade over plate AND b-roll so they read as the same stock */
  .pnr-reel{filter:grayscale(.5) contrast(1.08) brightness(.92)}
  /* the machine takes focus — the room goes soft BEHIND it, it does not go out */
  .pn-ready.is-lap .pnr-reel{filter:grayscale(.62) contrast(1.1) brightness(.62) blur(2px)}
  .pnr-site{position:absolute;z-index:2;left:0;right:0;top:0;display:flex;justify-content:space-between;
    gap:14px;padding:18px 22px;font-family:var(--pn-mono);font-size:9.5px;font-weight:800;
    letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.82);
    text-shadow:0 1px 6px rgba(0,0,0,.85);transition:opacity .5s ease}
  .pnr-site .rec{display:inline-flex;align-items:center;gap:7px;color:var(--p2)}
  .pnr-site .rec::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;
    animation:pnrRec 1.4s steps(1) infinite}
  /* the top of frame is never surrendered: the REC line SWAPS to the classified stamp, it is not deleted */
  .pnr-site-l{position:relative;display:inline-flex;align-items:center;min-height:1em}
  .pnr-site .lock{position:absolute;left:0;top:50%;transform:translateY(-50%);white-space:nowrap;
    display:inline-flex;align-items:center;gap:.7em;opacity:0;transition:opacity .5s ease .1s;color:#fff}
  .pnr-site .lock::before{content:"";width:8px;height:8px;background:var(--p2);
    box-shadow:0 0 12px rgba(249,115,22,.9)}
  .pn-ready.is-cta .pnr-site .rec{opacity:0;transition:opacity .4s ease}
  .pn-ready.is-cta .pnr-site .lock{opacity:1}
  .pnr-site::after{content:"";position:absolute;left:22px;right:22px;bottom:0;height:1px;
    background:linear-gradient(90deg,rgba(249,115,22,.6),rgba(255,255,255,.13) 42%,rgba(255,255,255,.05))}
  /* the BOOKEND — the frame is closed top and bottom, so a tall viewport's foot is composed HUD
     chrome instead of 200px of dead plate (the iPad complaint). Mirrors the site bar exactly. */
  .pnr-foot{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;justify-content:space-between;
    gap:14px;padding:17px 22px 18px;font-family:var(--pn-mono);font-size:9.5px;font-weight:800;
    letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.62);
    opacity:0;transition:opacity .55s ease .22s}
  .pn-ready.is-cta .pnr-foot{opacity:1}
  .pnr-foot::before{content:"";position:absolute;left:22px;right:22px;top:0;height:1px;
    background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.13) 58%,rgba(249,115,22,.6))}
  .pnr-foot b{color:rgba(255,255,255,.9)}
  .pn-ready-inner{position:relative;z-index:3;width:min(720px,94vw);max-height:100%;text-align:center;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}
  /* (ii) the laptop — one 3D object, transform-only */
  .pnr-lap{flex:none;width:min(560px,88vw);perspective:2400px;perspective-origin:50% -22%;
    opacity:0;transform:translateY(26px) scale(.94);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.25,1)}
  .pn-ready.is-lap .pnr-lap{opacity:1;transform:none}
  .pnr-lap-rig{position:relative;transform:rotateX(22deg);transform-style:preserve-3d}
  .pnr-lid{position:relative;transform-origin:50% 100%;transform:rotateX(0deg);
    transition:transform .72s cubic-bezier(.55,0,.2,1),filter .72s ease;aspect-ratio:16/10;
    background:linear-gradient(168deg,#1b222d,#0a0e15);border:2px solid #2b3543;
    border-radius:11px 11px 3px 3px;box-shadow:0 34px 90px -26px rgba(0,0,0,.95);overflow:hidden}
  .pn-ready.is-closed .pnr-lid{transform:rotateX(-7deg) scaleY(.055);filter:brightness(.55) saturate(.6)}
  .pnr-screen{transition:opacity .34s ease .18s}
  .pn-ready.is-closed .pnr-screen{opacity:0}
  /* THE SEAM — the deck survives the fold as LIGHT.
     The lid is scaleY(.055) when shut, so anything inside it is squashed to nothing; the seam is a
     SIBLING pinned to the lid/base junction. Five ticks partition it by the pillars' real quality
     (the lead pillar owns the longest run of light) — the closed slab is no longer a blank object. */
  .pnr-seam{position:absolute;left:5%;right:5%;bottom:12px;height:4px;z-index:4;pointer-events:none;
    display:flex;align-items:center;opacity:0;transform:scaleX(.72);transform-origin:50% 50%;
    transition:opacity .46s ease .3s,transform .6s cubic-bezier(.2,.8,.25,1) .3s}
  .pn-ready.is-closed .pnr-seam{opacity:1;transform:none}
  .pnr-seam-glow{position:absolute;left:-6%;right:-6%;top:50%;height:2px;transform:translateY(-50%);
    background:linear-gradient(90deg,transparent,rgba(249,115,22,.9) 22%,rgba(255,214,170,.95) 50%,rgba(249,115,22,.9) 78%,transparent);
    box-shadow:0 0 28px 9px rgba(249,115,22,.26),0 0 70px 22px rgba(249,115,22,.12)}
  .pnr-seam-ticks{position:relative;display:flex;gap:9px;width:100%;align-items:flex-end;height:4px}
  .pnr-seam-ticks i{display:block;height:2px;min-width:4px;flex:var(--g,60) 1 0;
    background:rgba(255,206,160,.78);box-shadow:0 0 9px rgba(249,115,22,.7)}
  .pnr-seam-ticks i.is-lead{height:4px;background:#fff;box-shadow:0 0 18px rgba(255,180,110,1)}
  .pnr-screen{position:absolute;inset:6px;border-radius:6px;overflow:hidden;
    background:radial-gradient(120% 120% at 50% 0%,#121c2c,#070a11);
    display:flex;flex-direction:column;justify-content:space-between;gap:clamp(8px,1.6vw,14px);
    padding:clamp(13px,3.2vw,26px);text-align:left}
  .pnr-scr-mid{display:flex;flex-direction:column;gap:clamp(6px,1.2vw,10px)}
  .pnr-scr-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding-top:clamp(6px,1vw,9px);border-top:1px solid rgba(255,255,255,.14);
    font-family:var(--pn-mono);font-size:clamp(6.5px,.9vw,8.5px);font-weight:800;letter-spacing:.2em;
    text-transform:uppercase;color:rgba(255,255,255,.58)}
  .pnr-screen::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(104deg,rgba(255,255,255,.11),transparent 46%)}
  .pnr-scr-k{font-family:var(--pn-mono);font-size:clamp(7.5px,1.1vw,9.5px);font-weight:800;
    letter-spacing:.26em;text-transform:uppercase;color:var(--p2)}
  .pnr-scr-h{font-family:'Inter',sans-serif;font-weight:900;font-style:italic;text-transform:uppercase;
    font-size:clamp(20px,4.4vw,40px);line-height:.92;letter-spacing:-.04em;color:#fff;margin:0}
  /* the deck's actual thesis on the deck's actual face — real content, not a title card */
  .pnr-scr-angle{margin:0;font-family:var(--pn-sans);font-style:italic;
    font-size:clamp(9px,1.35vw,13px);line-height:1.35;color:rgba(255,255,255,.72);
    max-width:46ch;padding-left:clamp(6px,.9vw,10px);border-left:2px solid var(--p2)}
  .pnr-deck{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(4px,.9vw,8px);margin-top:2px}
  /* CEO-33: the numbers, printed — no bar without its numeral */
  .pnr-pill .pnr-q{font:800 10px/1 var(--mono);font-variant-numeric:tabular-nums;margin-left:6px;opacity:.85}
  .pnr-pill{--clip:8px;opacity:0;transform:translateY(14px);
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
    padding:clamp(6px,1vw,10px) clamp(5px,.9vw,9px);display:flex;flex-direction:column;gap:7px;min-width:0}
  .pnr-pill.on{opacity:1;transform:none;transition:opacity .34s ease,transform .34s cubic-bezier(.2,.8,.25,1)}
  .pnr-pill b{font-family:var(--pn-mono);font-size:clamp(6px,.85vw,7.5px);font-weight:800;letter-spacing:.1em;
    text-transform:uppercase;color:rgba(255,255,255,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pnr-pill i{display:block;height:3px;background:rgba(255,255,255,.14);overflow:hidden}
  .pnr-pill i>u{display:block;height:100%;width:0;background:var(--p2);text-decoration:none;
    transition:width .6s cubic-bezier(.2,.8,.25,1) .18s}
  .pnr-pill.on i>u{width:var(--q,70%)}
  .pnr-pill.is-lead{background:rgba(var(--glow),.16);border-color:rgba(var(--glow),.5)}
  .pnr-pill.is-lead b{color:#fff}
  .pnr-pill em{font-family:var(--pn-mono);font-style:normal;font-size:clamp(5.5px,.75vw,6.5px);
    font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#f97316}
  .pnr-deck{grid-template-columns:repeat(4,minmax(0,1fr)) 1.35fr}
  .pnr-base{height:14px;margin:0 -14px;background:linear-gradient(180deg,#39424f,#151b23);
    border-radius:2px 2px 10px 10px;box-shadow:0 24px 46px -18px rgba(0,0,0,.9)}
  .pnr-base::after{content:"";display:block;width:76px;height:3px;margin:4px auto 0;border-radius:0 0 3px 3px;
    background:rgba(255,255,255,.14)}
  /* (iv) the CTA set */
  .pn-ready-head{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.25,1)}
  .pn-ready.is-cta .pn-ready-head{opacity:1;transform:none}
  .pn-ready-eyebrow{font-family:var(--pn-mono);font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
    color:var(--p2);display:inline-flex;align-items:center;gap:.7em}
  .pn-ready-eyebrow::before,.pn-ready-eyebrow::after{content:"";width:26px;height:1.5px;background:currentColor;opacity:.6}
  .pn-ready-title{position:relative;font-family:'Inter',sans-serif;font-weight:900;font-style:italic;
    text-transform:uppercase;font-size:clamp(30px,5.6vw,58px);line-height:.92;letter-spacing:-.045em;
    color:#fff;margin:12px 0 0;padding-bottom:14px;text-wrap:balance}
  .pn-ready-title::after{left:50%;transform:translateX(-50%);width:54px;height:3px;
    background:var(--p2);box-shadow:none}
  .pn-ready-sub{font-family:var(--pn-sans);font-size:clamp(14px,1.7vw,17px);line-height:1.5;
    color:rgba(255,255,255,.84);max-width:48ch;margin:10px auto 0}
  .pn-ready-actions{opacity:0;transform:translateY(16px);
    transition:opacity .5s ease .12s,transform .5s cubic-bezier(.2,.8,.25,1) .12s;
    display:flex;flex-direction:column;align-items:center;gap:12px;width:min(500px,92vw)}
  .pn-ready.is-cta .pn-ready-actions{opacity:1;transform:none}
  .pn-ready-go:hover{transform:translateY(-3px)}
  .pn-ready-go .pnr-arrow{font-size:1em;margin-left:.5em}
  /* PINNED-DARK INK CONTRACT — declared, never inherited, identical in all four themes */
  body .pn-ready .pn-ready-title,body .pn-ready .pnr-scr-h,
  body.mvc-light .pn-ready .pn-ready-title,body.mvc-light .pn-ready .pnr-scr-h{color:#fff !important}
  body .pn-ready .pn-ready-sub,body.mvc-light .pn-ready .pn-ready-sub{color:rgba(255,255,255,.86) !important}
  body .pn-ready .pnr-pill b,body.mvc-light .pn-ready .pnr-pill b{color:rgba(255,255,255,.84) !important}
  body .pn-ready .pnr-scr-foot,body.mvc-light .pn-ready .pnr-scr-foot{color:rgba(255,255,255,.6) !important}
  body .pn-ready .pnr-site,body.mvc-light .pn-ready .pnr-site{color:rgba(255,255,255,.84) !important}
  body .pn-ready .pnr-site .lock,body.mvc-light .pn-ready .pnr-site .lock{color:#fff !important}
  body .pn-ready .pnr-scr-angle,body.mvc-light .pn-ready .pnr-scr-angle{color:rgba(255,255,255,.74) !important}
  body .pn-ready .pn-ready-eyebrow,body .pn-ready .pnr-scr-k,body .pn-ready .pnr-site .rec,
  body.mvc-light .pn-ready .pn-ready-eyebrow,body.mvc-light .pn-ready .pnr-scr-k,
  body.mvc-light .pn-ready .pnr-site .rec{color:#f97316 !important}
  body .pn-ready .pn-ready-title::after,body.mvc-light .pn-ready .pn-ready-title::after{background:#f97316 !important}
  @keyframes pnrScrim{from{opacity:0}to{opacity:1}}
  @keyframes pnrRec{0%,55%{opacity:1}56%,100%{opacity:.15}}
  @media (max-width:520px){ .pnr-deck{grid-template-columns:repeat(3,minmax(0,1fr))} }
  /* narrow: the site bar stays ONE row — the case-file stamp already lives on the laptop face */
  @media (max-width:620px){
    .pnr-site,.pnr-foot{padding-left:16px;padding-right:16px;font-size:8.5px;letter-spacing:.18em}
    .pnr-site{padding-top:14px;padding-bottom:14px}
    .pnr-site>span:last-child,.pnr-foot>span:last-child{display:none}
    .pnr-site::after,.pnr-foot::before{left:16px;right:16px}
    .pnr-bleed{font-size:clamp(74px,26vw,150px);height:56%}
  }
  @media (prefers-reduced-motion:reduce){
    .pn-ready-scrim{animation:none}
    .pnr-reel video{display:none}   /* the MOTION goes; the graded still plate stays (it never moved) */
    .pnr-reel{transition:none !important}
    .pnr-site .rec::before{animation:none}
    /* texture + bleed type are STATIC — they stay, so the reduced-motion frame is composed too,
       never the bare void the moving version was hiding behind. The seam belongs to the fold,
       which does not happen here, so it stays out. */
    .pnr-seam{display:none}
    .pnr-tex,.pnr-bleed{transition:none !important}
    .pnr-foot{opacity:1 !important;transition:none !important}
    .pnr-lap,.pn-ready-head,.pn-ready-actions{opacity:1 !important;transform:none !important;transition:none !important}
    .pnr-lid{transition:none !important;transform:rotateX(0deg) !important;filter:none !important}
    .pnr-screen{transition:none !important;opacity:1 !important}
    .pnr-pill{opacity:1 !important;transform:none !important;transition:none !important}
    .pnr-pill i>u{transition:none !important;width:var(--q,70%) !important}
    .pn-ready-go:hover{transform:none}
  }

  /* ══════════ WAR-ROOM: brand monogram + eyebrow (no emoji logos) ══════════ */
  .pn-mono-mark{font-family:var(--pn-mono);font-weight:700;font-size:16px;letter-spacing:.02em}
  .pitch-head-kick{font-family:var(--pn-mono);font-size:10.5px;font-weight:700;letter-spacing:.26em;
    text-transform:uppercase;color:var(--rust);opacity:.92}

  /* ══════════ WAR-ROOM MASTHEAD — client sector image as the hero identity ══════════
     Full-bleed sector banner (the SAME sectorArt() the NBO/client cards use) + a dark scrim
     so the brand name + meta read AA over ANY image, on light AND dark themes. The dark seam
     is intentional and matches the NBO/client banners (SST §5d cinematic, UX Law 5). */
  /* the hero band is a case-file COVER: one cut (via the token), never a plain rectangle */
  /* ══ BRIEF ON A PAGE (CEO-99) ══════════════════════════════════════════════════════════════
     Value and clock are the two biggest objects on the page, because they are the two facts that
     make a brief a brief. Everything the old page led with — sector, background, relationship
     history — is client intel, and it now sits below the decision instead of above it. */
  .bop{--clip:26px;position:relative;margin:0 0 18px;border:1px solid var(--pn-border,rgba(127,127,127,.28));
    background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.05));overflow:hidden}
  .bop-top{padding:20px 22px 18px;border-bottom:1px solid var(--pn-border,rgba(127,127,127,.24))}
  .bop-eyebrow{margin:0 0 12px;font:800 9.5px/1 var(--pn-mono,var(--mono));letter-spacing:.24em;
    text-transform:uppercase;color:var(--pn-rust,#e2653a)}
  .bop-heroes{display:flex;flex-wrap:wrap;gap:14px 34px;align-items:flex-end;margin:0 0 16px}
  .bop-hero{display:flex;flex-direction:column;gap:4px;min-width:0}
  .bop-hero-k{font:800 9px/1.2 var(--pn-mono,var(--mono));letter-spacing:.2em;text-transform:uppercase;opacity:.6}
  .bop-hero-v{font-weight:900;font-size:clamp(30px,5.4vw,52px);line-height:.95;letter-spacing:-.01em;
    font-family:var(--pn-display,var(--display,inherit));font-variant-numeric:tabular-nums}
  .bop-hero--clock.is-good .bop-hero-v{color:var(--mvc-green,#3fd68f)}
  .bop-hero--clock.is-warn .bop-hero-v{color:#ffb86b}
  .bop-hero--clock.is-bad  .bop-hero-v{color:#ff6a55}
  .bop-ask{margin:0 0 8px;font-weight:800;font-size:clamp(17px,2.3vw,25px);line-height:1.24;
    font-family:var(--pn-display,var(--display,inherit));max-width:44ch}
  .bop-who{margin:0;font:600 12px/1.4 var(--pn-mono,var(--mono));letter-spacing:.08em;opacity:.72}
  .bop-bot{padding:18px 22px 20px;display:flex;flex-direction:column;gap:18px}
  .bop-sec-k{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
    font:800 9.5px/1 var(--pn-mono,var(--mono));letter-spacing:.22em;text-transform:uppercase;opacity:.72}
  .bop-pool{font-style:normal;font-weight:600;letter-spacing:.1em;opacity:.62;margin-left:auto}
  .bop-team{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
  .bop-team-line{margin:0;font-weight:600;font-size:13.5px;line-height:1.45}
  .bop-team-line--none{opacity:.72;font-style:italic}
  .bop-team-line em{font-style:normal;color:#ffb86b}
  .bop-levels{display:flex;flex-direction:column;gap:10px}
  .bop-lvl-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
  .bop-lvl{display:flex;flex-direction:column;gap:6px;text-align:left;cursor:pointer;
    padding:14px 15px 15px;border:1px solid var(--pn-border,rgba(127,127,127,.3));
    background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(0,0,0,.05));color:inherit;
    transition:border-color .14s ease,transform .14s ease,background .14s ease}
  .bop-lvl:hover:not(:disabled){transform:translateY(-2px);border-color:var(--pn-rust,#e2653a)}
  .bop-lvl.is-on{border-color:var(--pn-rust,#e2653a);box-shadow:inset 0 0 0 1px var(--pn-rust,#e2653a)}
  .bop-lvl:disabled{opacity:.42;cursor:default}
  .bop-lvl.is-short{opacity:.55}
  .bop-lvl-n{font:800 9px/1 var(--pn-mono,var(--mono));letter-spacing:.22em;color:var(--pn-rust,#e2653a)}
  .bop-lvl-name{font-weight:900;font-size:17px;line-height:1.15;font-family:var(--pn-display,var(--display,inherit))}
  .bop-lvl-time{font:800 10px/1 var(--pn-mono,var(--mono));letter-spacing:.14em;text-transform:uppercase;opacity:.78}
  .bop-lvl-blurb{font-weight:500;font-size:12.5px;line-height:1.45;opacity:.82}
  .bop-lvl-risk{margin-top:2px;padding-top:7px;border-top:1px solid var(--pn-border,rgba(127,127,127,.22));
    font:600 11px/1.4 var(--pn-mono,var(--mono));letter-spacing:.04em;opacity:.66}
  .bop-lvl-no{font:800 10px/1 var(--pn-mono,var(--mono));letter-spacing:.14em;color:#ff6a55}
  @media(max-width:760px){
    .bop-top,.bop-bot{padding-left:15px;padding-right:15px}
    .bop-heroes{gap:12px 22px}
    .bop-lvl-row{grid-template-columns:1fr}
    .bop-lvl{min-height:44px}
  }
  .wr-masthead{--clip:30px;position:relative;overflow:hidden;min-height:clamp(182px,25vw,286px);
    background-size:cover;background-position:center 38%;background-color:#0b1119;
    display:flex;flex-direction:column;justify-content:space-between;border-bottom:1px solid var(--rust-border)}
  /* the case-ref stamp, punched into the cover (same file # the client dossier opens on) */
  .wr-mh-case{position:absolute;z-index:3;left:22px;bottom:auto;top:52px;
    font-family:var(--pn-mono);font-size:9px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
    color:#fff;padding:5px 10px;border:1.5px solid rgba(255,255,255,.5);background:rgba(10,14,20,.36);
    transform:rotate(-2.5deg);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  @media (max-width:640px){ .wr-mh-case{top:46px;left:16px} }
  .wr-mh-reel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
    filter:grayscale(.14) contrast(1.06) saturate(1.02)}
  .wr-mh-grad{position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,rgba(6,9,14,.58) 0%,rgba(6,9,14,.12) 28%,rgba(6,9,14,.55) 60%,rgba(6,9,14,.95) 100%),
      linear-gradient(72deg,rgba(6,9,14,.72) 0%,rgba(6,9,14,.30) 44%,rgba(6,9,14,0) 70%)}
  .wr-masthead::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background-image:radial-gradient(rgba(0,0,0,.55) .7px,transparent 0);background-size:5px 5px;opacity:.3;mix-blend-mode:multiply}
  .wr-mh-top{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:15px 22px 0}
  .wr-mh-kick{font-family:var(--pn-mono);font-size:10.5px;font-weight:700;letter-spacing:.26em;
    text-transform:uppercase;color:#fff;opacity:.94;text-shadow:0 1px 6px rgba(0,0,0,.75);padding-top:8px}
  .wr-mh-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
  .wr-mh-body{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:0 22px 16px}
  .wr-mh-id{display:flex;align-items:flex-end;gap:14px;min-width:0}
  .wr-mh-mono{flex:none;width:46px;height:46px;display:flex;align-items:center;justify-content:center;
    font-family:var(--pn-mono);font-weight:700;font-size:16px;letter-spacing:.02em;color:#fff;
    background:rgba(10,14,20,.5);border:1.5px solid rgba(255,255,255,.42);border-radius:2px;
    box-shadow:0 6px 18px rgba(0,0,0,.4);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  .wr-mh-nametxt{min-width:0;display:flex;flex-direction:column;gap:2px}
  .wr-mh-id{align-items:flex-end}
  .wr-masthead .wr-mh-name{padding-bottom:9px !important}
  .wr-masthead .wr-mh-name::after{width:38px;height:3px;background:var(--rust);box-shadow:none}
  .wr-mh-mono{margin-bottom:1px}
  /* name sits OVER the image → always white in both themes (beats body[data-view=pitch] h2) */
  .wr-masthead .wr-mh-name,body[data-view="pitch"] .wr-masthead .wr-mh-name{margin:0 !important;
    color:#fff !important;line-height:.94 !important;font-size:clamp(29px,4.7vw,52px);
    /* house display voice: Inter 900 italic (the Heming grotesque stretches + has the broken D) */
    font-family:'Inter',sans-serif !important;font-style:italic !important;font-weight:900 !important;
    letter-spacing:-.035em !important;text-transform:uppercase;text-shadow:0 3px 22px rgba(0,0,0,.7),0 1px 3px rgba(0,0,0,.55)}
  .wr-mh-meta{font-family:var(--pn-mono);font-size:10.5px;font-weight:700;letter-spacing:.13em;
    text-transform:uppercase;color:rgba(255,255,255,.84);text-shadow:0 1px 6px rgba(0,0,0,.75)}
  .wr-mh-tape{flex:none;font-family:var(--pn-mono);font-size:10px;font-weight:800;letter-spacing:.18em;
    text-transform:uppercase;color:#fff;background:rgba(10,14,20,.42);border:1px solid rgba(255,255,255,.32);
    padding:5px 10px;border-radius:2px;opacity:0;transition:opacity .18s;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  .wr-masthead:hover .wr-mh-tape{opacity:.9}
  /* the Back CTA sits over the dark-scrimmed image → light ink in BOTH themes */
  .wr-masthead .wr-cta.pn-btn--ghost{color:#fff !important;border:1px solid rgba(255,255,255,.34) !important;
    background:rgba(10,14,20,.34) !important;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    text-shadow:0 1px 4px rgba(0,0,0,.6)}
  .wr-masthead .wr-cta.pn-btn--ghost:hover{background:rgba(10,14,20,.58) !important;border-color:rgba(255,255,255,.55) !important}
  /* ══════════ THE CORNER LANGUAGE — "THE CLIP", promoted to a token (CTO 2026-07-25) ══════════
     The house already owned one idiom: a single 45-degree clipped corner. It was being re-typed as
     a literal polygon() at every call site, which is how a system rots into a hundred magic numbers
     and how a surface ends up with four identical hard-square corners instead of one decision.
     It is now a token with a scale and two directions, and the rule is ONE CUT PER SURFACE:
        --clip-s 11px (chips, tabs) · --clip-m 18px (plates, slips) · --clip-l 30px (hero bands)
        .clip-tr  the new-business cut (top-right)      .clip-bl  the client-work cut (bottom-left)
     A surface picks a size + a direction; it never picks four rounded corners, and it never picks
     two cuts. Every dossier plate below consumes the token — nothing re-types the polygon. */
  .clip-tr{clip-path:polygon(0 0,calc(100% - var(--clip,18px)) 0,100% var(--clip,18px),100% 100%,0 100%)}
  .clip-bl{clip-path:polygon(0 0,100% 0,100% 100%,var(--clip,18px) 100%,0 calc(100% - var(--clip,18px)))}
  .clip-s{--clip:11px} .clip-m{--clip:18px} .clip-l{--clip:30px}
  /* the SHEET variants: a second sheet of paper behind an object, cut by the same idiom. It has to
     live on a wrapper — a pseudo-element inside a clipped box is clipped away with it. */
  .sheet{position:relative}
  .sheet>*{position:relative;z-index:1}
  .sheet::before{content:"";position:absolute;z-index:0;left:10px;right:-10px;top:10px;bottom:-10px;
    background:var(--rust-ink-08);border:1px solid var(--rust-border)}
  .sheet.clip-tr::before{clip-path:polygon(0 0,calc(100% - var(--clip,18px)) 0,100% var(--clip,18px),100% 100%,0 100%)}
  .sheet.clip-bl::before{clip-path:polygon(0 0,100% 0,100% 100%,var(--clip,18px) 100%,0 calc(100% - var(--clip,18px)))}
  .is-clientwork .sheet::before{background:var(--wr-paper);border-color:var(--wr-paper-hi)}

  /* ══════════ THE CASE DOSSIER — war-room layout (CEO 2026-07-25) ══════════
     "should look more like a dossier — the boxes are too square, it doesn't use space well."
     So: THE CLIP chamfer on every plate, layered paper (the file sits on a stacked sheet), mono
     case-ref stamps, tab dividers between sections, and an ASYMMETRIC main + intel-rail split
     instead of one 100%-wide column of stacked rectangles. */
  .wr-split{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
  @media (min-width:1080px){
    /* the rail STRETCHES to the row height so its sticky travel actually works — with
       align-items:start the grid item shrank to content and the intel scrolled away, leaving a dead
       half-column beside the response section (Layout Law: no dead half-screens). */
    .wr-split{grid-template-columns:minmax(0,1fr) 300px;column-gap:26px;align-items:stretch;
      padding-right:24px}
    .wr-split>.wr-main{min-width:0}
    .wr-rail{margin:22px 0 0;display:flex;flex-direction:column;gap:20px}
  }
  .wr-rail{margin:22px 24px 0;display:flex;flex-direction:column;gap:14px}
  /* the intel plate — chamfered top-right CLIP, layered paper behind it */
  /* a plate is a SHEET: its own paper, a cut corner, a second sheet behind it, and a cast shadow.
     It should read as an object on a desk — not a div with a border. */
  .wr-plate{--clip:18px;position:relative;background:var(--rust-card);border:1px solid var(--rust-border);
    padding:16px 18px 17px;filter:drop-shadow(0 14px 26px rgba(0,0,0,.34))}
  @media (min-width:1080px){ .wr-rail{padding-right:10px} }
  .wr-plate-k{display:flex;align-items:center;gap:10px;margin-bottom:14px;
    font-family:var(--pn-mono);font-size:12px;font-weight:800;letter-spacing:.16em;
    text-transform:uppercase;color:var(--rust-ink,var(--rust))}
  .wr-plate-k::after{content:"";flex:1;height:2px;background:currentColor;opacity:.55}
  .wr-lrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 0;
    border-top:1px solid var(--rust-border)}
  .wr-lrow dt{font-size:11px;letter-spacing:.1em}
  .wr-lrow:first-of-type{border-top:0;padding-top:0}
  .wr-lrow dt{font-family:var(--pn-mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--rust-ink-55);margin:0}
  .wr-lrow dd{margin:0;text-align:right;font-family:var(--pn-sans);font-size:13px;font-weight:700;
    color:var(--rust-ink);font-variant-numeric:tabular-nums}
  .wr-lrow dd.mono{font-family:var(--pn-mono);font-size:11.5px;font-weight:800;letter-spacing:.04em}
  .wr-rail-note{margin:0;font-family:var(--pn-sans);font-size:12.5px;line-height:1.5;color:var(--rust-ink-70)}
  /* the TAB DIVIDER — a file tab, not a horizontal rule */
  .wr-tab{display:flex;align-items:center;gap:0;margin:26px 24px 2px}
  .wr-tab b{font-family:var(--pn-mono);font-size:9.5px;font-weight:800;letter-spacing:.24em;
    text-transform:uppercase;color:var(--rust);background:rgba(var(--glow),.1);
    border:1px solid rgba(var(--glow),.42);border-left:3px solid var(--rust);
    padding:6px 15px 6px 12px;--clip:11px}
  .wr-tab i{flex:1;height:1px;background:var(--rust-border);font-style:normal}
  .wr-tab s{flex:none;text-decoration:none;font-family:var(--pn-mono);font-size:9px;font-weight:700;
    letter-spacing:.18em;text-transform:uppercase;color:var(--rust-ink-40);padding-left:12px}
  .wr-split .wr-tab,.wr-split .wr-brief-lead,.wr-split .wr-tension,.wr-split .wr-work,
  .wr-split .poap,.wr-split .room-mod,.wr-split .prep-deliver{margin-right:0}
  @media (max-width:1079px){ .wr-split .wr-tab,.wr-split .wr-brief-lead,.wr-split .wr-tension,
    .wr-split .wr-work,.wr-split .prep-deliver{margin-right:24px} }
  @media (max-width:640px){
    .wr-rail{margin-left:16px;margin-right:16px}
    .wr-tab{margin-left:16px;margin-right:16px}
    .wr-tab b{font-size:9px;letter-spacing:.16em;padding:6px 12px 6px 10px;white-space:nowrap}
    .wr-tab s{display:none}
    .wr-brief-lead{margin:16px 16px 0 20px}
    .wr-tension{margin:24px 16px 24px 20px;padding:16px 17px 18px}
    /* the angle field held a 3-line placeholder in a 2-line box at 390 (clipped copy = a finish
       failure). Give it the room the copy actually needs on a phone. */
    .wr-angle textarea{min-height:104px}
  }
  /* ══════════ TWO SIBLING LANGUAGES ON ONE SET OF DOSSIER BONES (CEO 2026-07-25) ══════════
     "we need Pitches and Live client work to have an entirely different look and language."
     Same skeleton (hero → tabs → main + intel rail), two materials + two vocabularies. You can
     tell which mode you're in in under a second from THREE independent signals:
       (1) the eyebrow + stamp wording   CASE FILE // WAR ROOM   vs   JOB // THE STUDIO
       (2) the material + the cut        cold plate, CLIP top-right, rotated stamp
                                         vs warm ruled paper, cut bottom-LEFT, squared typed label
       (3) the verb                      "Pitch it" / take it     vs   "Work it" / land it
     No new hue is invented: client mode warms the PAPER (an ochre wash that reads in both themes)
     and keeps the theme accent, so the theme engine still repaints everything (Theme Law §5). */
  .is-clientwork{--wr-paper:rgba(214,158,78,.2);--wr-paper-hi:rgba(214,158,78,.34)}
  body.mvc-light .is-clientwork{--wr-paper:rgba(150,104,42,.28);--wr-paper-hi:rgba(150,104,42,.46)}
  /* (1) material: warm paper wash + feint ruling on every plate */
  .is-clientwork .wr-plate{
    background:repeating-linear-gradient(180deg,transparent 0 25px,var(--wr-paper) 25px 26px),
      linear-gradient(178deg,var(--wr-paper),transparent 74%),var(--rust-card);
    border-color:var(--wr-paper-hi)}
  .is-clientwork .wr-plate-k{color:var(--rust-ink)}
  /* the sibling material carries PAST the tabs — the response plates are job-sheet paper too, so
     the mode doesn't quietly stop being declared halfway down the page. */
  .is-clientwork .wr-angle,.is-clientwork .poap{
    background:repeating-linear-gradient(180deg,transparent 0 25px,var(--wr-paper) 25px 26px),
      linear-gradient(178deg,var(--wr-paper),transparent 74%),var(--rust-card);
    border-color:var(--wr-paper-hi);border-left-color:var(--rust)}
  .is-clientwork .wr-angle textarea,.is-clientwork .poap-ta{border-color:var(--wr-paper-hi)}
  .is-clientwork .wr-brief-lead{border-left:2px solid var(--wr-paper-hi);padding-left:14px}
  /* (2) the cut flips DIRECTION through the same token — bottom-left, the way a bound job sheet
     sits in a folder. Same idiom, same scale, opposite corner: two languages, one system. */
  .is-clientwork .wr-tension{
    background:linear-gradient(97deg,var(--wr-paper-hi),var(--wr-paper) 58%,var(--rust-ink-08));
    border-color:var(--wr-paper-hi);border-left-color:var(--rust)}
  /* the stamp stops being a rotated evidence mark and becomes a straight typed job label */
  .is-clientwork .wr-mh-case{transform:none;border:0;border-bottom:1.5px solid rgba(255,255,255,.6);
    background:transparent;padding:2px 1px 4px;-webkit-backdrop-filter:none;backdrop-filter:none;
    letter-spacing:.26em}
  /* the tab is an outlined index tab, not a filled evidence flag */
  .is-clientwork .wr-tab b{background:transparent;color:var(--rust-ink);
    border:1px solid var(--wr-paper-hi);border-bottom:2px solid var(--rust)}
  /* the main column is an EDITORIAL COLUMN, not a full-bleed slab: a generous outer gutter, a
     hanging indent for body copy, and measure held at ~62ch so it reads like a document. */
  .wr-main{padding:0 6px 0 0}
  .wr-brief-lead{margin:20px 24px 0 40px;font-family:var(--pn-sans);font-size:15.5px;line-height:1.62;
    color:var(--rust-ink-70);max-width:62ch}
  .wr-brief-lead::first-line{color:var(--rust-ink)}
  /* the relationship strip — client mode only: the history a retained account carries in with it */
  .wr-rel{display:flex;gap:0;margin:2px 0 0;border-top:1px solid var(--wr-paper-hi)}
  .wr-rel div{flex:1;min-width:0;padding:10px 0 2px;border-right:1px solid var(--wr-paper-hi)}
  .wr-rel div:last-child{border-right:0}
  .wr-rel dt{margin:0 0 4px;font-family:var(--pn-mono);font-size:8.5px;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--rust-ink-55)}
  .wr-rel dd{margin:0;font-family:var(--pn-mono);font-size:19px;font-weight:800;line-height:1;
    color:var(--rust-ink);font-variant-numeric:tabular-nums}
  .wr-rel dd small{font-size:10px;font-weight:700;color:var(--rust-ink-55);margin-left:2px}
  .wr-eyebrow{font-family:var(--pn-mono);font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--rust)}
  /* THE INTERCEPT — the client tension as a designed intel moment: a chamfered evidence plate with
     an accent spine, mono classification, and the line in the HOUSE display voice (Inter 900 italic —
     never the Heming grotesque, whose stretched caps read as a different product). One loud moment. */
  /* THE INTERCEPT SLIP — an evidence slip laid ON the page, not a box welded to its edges. It is
     indented from the column, holds a hard measure, and is given real air above and below (CTO:
     "let the client-tension quote breathe"). Layered: a second sheet behind, a cast shadow, one cut. */
  .wr-split .sheet:has(>.wr-tension){max-width:34em;margin:38px 44px 34px 40px}
  @media (max-width:1079px){ .wr-split .sheet:has(>.wr-tension){margin-right:24px} }
  @media (max-width:640px){ .wr-split .sheet:has(>.wr-tension){margin:24px 16px 24px 20px} }
  .wr-tension{--clip:20px;position:relative;margin:0;padding:22px 26px 24px 26px;
    background:linear-gradient(97deg,rgba(var(--glow),.15),rgba(var(--glow),.04) 58%,var(--rust-ink-08));
    border:1px solid rgba(var(--glow),.32);border-left:3px solid var(--rust);
    filter:drop-shadow(0 18px 34px rgba(0,0,0,.4))}
  .wr-tension-q{display:none}
  .wr-tension-txt{min-width:0}
  .wr-tension .wr-eyebrow{display:flex;align-items:center;gap:10px;font-size:9.5px;letter-spacing:.24em}
  .wr-tension .wr-eyebrow::after{content:"";flex:1;height:1px;background:currentColor;opacity:.32}
  .wr-tension-line{font-family:'Inter',sans-serif;font-weight:900;font-style:italic;text-transform:uppercase;
    font-size:clamp(22px,3vw,35px);line-height:1.04;letter-spacing:-.035em;color:var(--rust-ink);
    margin:9px 0 0;text-wrap:balance;max-width:24ch}
  .wr-tension-sub{display:block;margin-top:11px;font-family:var(--pn-sans);font-size:12.5px;line-height:1.5;
    color:var(--rust-ink-55);max-width:54ch}
  /* THE PROPOSAL — angle + one-pager grouped as ONE crafted response object, not stacked boxes */
  .wr-work{margin:24px 24px 2px;padding-top:18px;border-top:1px solid var(--rust-border);display:flex;flex-direction:column;gap:14px}
  .wr-work-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
  .wr-work-note{font-family:var(--pn-sans);font-size:12.5px;color:var(--rust-ink-55)}
  .wr-angle{--clip:16px;background:var(--rust-card);border:1px solid var(--rust-border);
    border-left:3px solid var(--rust-border);border-radius:0;padding:17px 19px 18px}
  .wr-angle-label{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:9px}
  .wr-angle-k{font-family:var(--pn-mono);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--rust)}
  .wr-angle-hint{font-family:var(--pn-sans);font-size:12.5px;font-weight:600;color:var(--rust-ink-55)}
  .wr-angle textarea{width:100%;box-sizing:border-box;resize:vertical;min-height:76px;
    font-family:var(--pn-sans);font-size:16px;font-style:italic;line-height:1.5;color:var(--rust-ink);
    background:var(--rust-bg);border:0;border-bottom:1px solid var(--rust-border);border-radius:0;padding:10px 2px}
  .wr-angle textarea::placeholder{color:var(--rust-ink-40)}
  .wr-angle textarea:focus{outline:none;border-color:var(--rust);box-shadow:0 0 0 3px rgba(var(--glow),.16)}
  .wr-angle-locked{margin:0;font-family:var(--pn-sans);font-size:16px;font-style:italic;line-height:1.45;color:var(--rust-ink)}
  .wr-work .poap{margin:0}
  @media (max-width:560px){
    .wr-masthead{min-height:158px}
    .wr-tension{gap:10px} .wr-tension-q{font-size:46px}
    .wr-brief-lead,.wr-tension,.wr-work{margin-left:16px;margin-right:16px}
  }

  /* ══════════ PITCH ON A PAGE — the one-pager, inline in the war room ══════════
     Reads the theme via --rust-* so it's AA on light AND dark. (Pressure-test removed 2026-07-25.) */
  .poap{--clip:18px;margin:26px 24px 4px;padding:21px 23px 23px;border:1px solid var(--rust-border);
    border-left:3px solid var(--rust-border);border-radius:0;background:var(--rust-ink-08);
    display:flex;flex-direction:column;gap:14px}
  /* the head is ONE composed row: eyebrow + a hairline that runs to the controls, then the control
     cluster hard-right. Every chip on the row is 32px tall and centred on the same axis. */
  .poap-head{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;min-height:32px}
  .poap-eyebrow{display:flex;align-items:center;gap:12px;
    font-family:var(--pn-mono);font-size:11px;font-weight:700;letter-spacing:.22em;
    text-transform:uppercase;color:var(--rust);flex:1 1 auto;min-width:0;white-space:nowrap}
  .poap-eyebrow::after{content:"";flex:1 1 auto;height:1px;min-width:16px;background:var(--rust-border)}
  .poap-dossier{--clip:9px;display:inline-flex;align-items:center;gap:7px;height:32px;
    font-family:var(--pn-mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    padding:0 13px;border-radius:0;border:1px solid var(--rust);color:var(--rust);
    background:transparent;cursor:pointer;transition:background .16s,color .16s,transform .16s;white-space:nowrap}
  .poap-dossier:hover{background:var(--rust);color:#fff;transform:translateY(-1px)}
  .poap-dossier:focus-visible{outline:2px solid var(--rust);outline-offset:2px}
  .poap-sub{font-family:var(--pn-sans);font-size:14px;line-height:1.5;color:var(--rust-ink-70);margin:-2px 0 0;max-width:66ch}
  .poap-ta{width:100%;box-sizing:border-box;resize:vertical;min-height:150px;
    font-family:var(--pn-sans);font-size:15px;line-height:1.62;color:var(--rust-ink);
    background:var(--rust-card);border:0;border-top:1px solid var(--rust-border);border-radius:0;padding:14px 2px}
  .poap-ta::placeholder{color:var(--rust-ink-40);font-style:italic}
  .poap-ta:focus{outline:none;border-color:var(--rust);box-shadow:0 0 0 3px rgba(var(--glow),.16)}
  .poap-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .poap-hint{font-family:var(--pn-sans);font-size:12.5px;color:var(--rust-ink-55);flex:1;min-width:150px}
  /* CEO 2026-07-25 — PRESSURE-TEST REMOVED ("i said to remove pressure test"). The CTA, the .pt-win
     result window, its coach line and the whole verdict/coverage/notes presentation are gone. The
     one-pager itself stays: it still travels with the pitch, it just isn't graded back at you. */
  @media (max-width:640px){ .poap{margin:22px 16px 4px;padding:16px 15px 18px} }

  /* ══════════ THE DOSSIER — a classified intel file (deliberate dark seam, recorded) ══════════
     A framed dark dossier over the shell — legible on light + dark (like the other modals).
     Accent recolours per theme via --p2/--glow; the paper stays a warm classified black. */
  .pn-dossier{position:fixed;inset:0;z-index:10080;display:flex;align-items:center;justify-content:center;padding:24px}
  .dsr-scrim{position:absolute;inset:0;background:rgba(4,5,9,.9);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:dsrFade .24s ease both}
  .dsr-card{position:relative;z-index:2;width:min(760px,96vw);max-height:90vh;display:flex;flex-direction:column;
    background:linear-gradient(168deg,#17130c,#0c0a07);color:#efe7d8;border:1px solid rgba(210,180,120,.2);
    border-radius:14px;overflow:hidden;box-shadow:0 40px 120px -30px rgba(0,0,0,.85);
    background-image:radial-gradient(rgba(210,180,120,.05) .5px,transparent 0);background-size:7px 7px;
    animation:dsrRise .4s cubic-bezier(.2,.8,.25,1) both}
  /* FINDER-WINDOW LAW: the dossier now wears the mac traffic-light titlebar (red dot = close). */
  .dsr-card>.lg-titlebar{margin:0;--lg-tb-bg:rgba(255,255,255,.045);--lg-tb-border:rgba(210,180,120,.18);--lg-tb-ink:rgba(239,231,216,.62)}
  .dsr-head{display:flex;align-items:flex-start;gap:16px;padding:14px 26px 16px;
    border-bottom:1px solid rgba(210,180,120,.16)}
  .dsr-head-l{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
  .dsr-kick{font-family:var(--pn-mono);font-size:10.5px;font-weight:700;letter-spacing:.24em;
    text-transform:uppercase;color:var(--p2,#f97316)}
  .dsr-name{font-family:var(--pn-sans);font-weight:800;font-size:clamp(24px,3.6vw,34px);line-height:1;
    letter-spacing:-.02em;margin:0;color:#fff}
  .dsr-meta{font-family:var(--pn-mono);font-size:11px;letter-spacing:.08em;color:rgba(239,231,216,.6)}
  /* CEO 2026-07-31 (defect 3): a real ✕ in the sticky header — the mac dot alone was not a close
     affordance anyone could find, and the header used to scroll away with the copy. */
  .dsr-close{flex:none;align-self:flex-start;margin-top:2px;width:34px;height:34px;border-radius:2px;
    border:1px solid rgba(210,180,120,.3);
    background:transparent;color:#efe7d8;font-size:14px;cursor:pointer;line-height:1;
    display:flex;align-items:center;justify-content:center;transition:background .16s,color .16s,border-color .16s}
  .dsr-close:hover{background:var(--p2,#f97316);border-color:var(--p2,#f97316);color:#0b1c30}
  .dsr-close:focus-visible{outline:2px solid var(--p2,#f97316);outline-offset:2px}
  .dsr-scroll{overflow-y:auto;padding:20px 26px 8px;-webkit-overflow-scrolling:touch}
  .dsr-warn{font-family:var(--pn-sans);font-size:14px;line-height:1.5;font-style:italic;
    color:rgba(239,231,216,.82);margin:0 0 18px;padding-left:12px;border-left:1px solid var(--lg-hair-neutral,rgba(210,180,120,.24))}
  .dsr-sec{margin:0 0 22px}
  .dsr-sec-t{display:flex;align-items:baseline;gap:12px;font-family:var(--pn-sans);font-weight:800;
    font-size:15px;letter-spacing:.02em;text-transform:uppercase;color:#fff;margin:0 0 8px;
    padding-bottom:8px;border-bottom:1px solid rgba(210,180,120,.14)}
  .dsr-sec-n{font-family:var(--pn-mono);font-size:12px;font-weight:700;color:var(--p2,#f97316)}
  .dsr-sec-b{font-family:var(--pn-sans);font-size:14.5px;line-height:1.62;color:rgba(239,231,216,.86)}
  .dsr-sec-b p{margin:0 0 10px}
  .dsr-sec-b b{color:#fff;font-weight:700}
  .dsr-sec-b h5{font-family:var(--pn-mono);font-size:11px;font-weight:700;letter-spacing:.16em;
    text-transform:uppercase;color:var(--p2,#f97316);margin:14px 0 6px}
  .dsr-sec-b ul{margin:0 0 8px;padding-left:20px}
  .dsr-sec-b li{margin:0 0 5px}
  .dsr-sec-b blockquote{margin:6px 0 10px;padding:12px 16px;border-left:1px solid var(--lg-hair-neutral,rgba(210,180,120,.24));
    background:rgba(210,180,120,.06);border-radius:0 8px 8px 0;font-style:italic;color:#f4ede0}
  .dsr-sec-b blockquote small{display:block;margin-top:6px;font-style:normal;font-family:var(--pn-mono);
    font-size:11px;letter-spacing:.06em;color:rgba(239,231,216,.6)}
  .dsr-empty{color:rgba(239,231,216,.6);font-style:italic}
  /* the CLOSE BAR at the foot — a real docked bar (file reference left, close right), not a lone
     ghost button that vanished into the stock in light theme. */
  .dsr-foot{padding:12px 26px;border-top:1px solid rgba(210,180,120,.18);display:flex;align-items:center;
    justify-content:space-between;gap:16px;flex:none;background:rgba(0,0,0,.24)}
  .dsr-foot-ref{font-family:var(--pn-mono);font-size:10px;font-weight:700;letter-spacing:.18em;
    text-transform:uppercase;color:rgba(239,231,216,.5);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dsr-foot-close{flex:none;height:34px;padding:0 18px;cursor:pointer;border-radius:2px;
    font-family:var(--pn-mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    border:1px solid rgba(210,180,120,.42);background:transparent;color:#efe7d8;
    transition:background .16s,color .16s,border-color .16s}
  .dsr-foot-close:hover{background:var(--p2,#f97316);border-color:var(--p2,#f97316);color:#0b1c30}
  .dsr-foot-close:focus-visible{outline:2px solid var(--p2,#f97316);outline-offset:2px}
  @keyframes dsrFade{from{opacity:0}to{opacity:1}}
  @keyframes dsrRise{from{transform:translateY(24px) scale(.97)}to{transform:none}}
  @media (prefers-reduced-motion:reduce){ .dsr-scrim,.dsr-card{animation:none} }
  @media (max-width:520px){ .dsr-head,.dsr-scroll,.dsr-foot{padding-left:16px;padding-right:16px} .dsr-stamp{display:none}
    .dsr-foot-ref{display:none} .dsr-foot{justify-content:flex-end} }

  /* ── DARK THEMES: lift the file OFF pure black (CEO: "this whole dossier is too dark") ──
     The stock was #17130c→#0c0a07 sitting on a .9-opacity near-black scrim — a hole in the screen.
     It now reads as an ELEVATED object: a warmer charcoal stock, a lit top edge, a visible ring and
     a real drop, with the classified grain kept. Ink unchanged (already AA), grounds only. */
  .dsr-card{background-color:#16120c;
    background-image:radial-gradient(rgba(226,197,140,.055) .5px,transparent 0),
      linear-gradient(168deg,#221d15,#14110c 62%,#100d09);
    background-size:7px 7px,auto;
    border-color:rgba(226,197,140,.26);
    box-shadow:0 2px 0 rgba(255,236,200,.05) inset,0 0 0 1px rgba(0,0,0,.6),0 48px 130px -34px rgba(0,0,0,.9)}
  .dsr-scrim{background:rgba(4,5,9,.78)}
  /* the header is STICKY — the client's name and the ✕ never scroll away from the reader */
  .dsr-head{position:sticky;top:0;z-index:4;flex:none;
    background:linear-gradient(180deg,#241f16,#1b1710);
    box-shadow:0 10px 22px -18px rgba(0,0,0,.9)}
  /* an accent SPINE down the file — the SST burnt-orange edge, one loud line, nothing else */
  .dsr-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;z-index:5;
    background:linear-gradient(180deg,var(--p2,#f97316),color-mix(in srgb,var(--p2,#f97316) 30%,transparent));
    pointer-events:none}

  /* ── LIGHT THEMES: a PAPER dossier, not a black slab (CEO defect 3) ──
     Cream stock, ink type, the same accent spine, the same classified grain — the physical file the
     war room hands you. Every leaf re-inked; measured AA in the gate. */
  body.mvc-light .dsr-scrim{background:rgba(36,28,16,.66)}
  body.mvc-light .dsr-card{
    background-color:#efe7d6;
    background-image:radial-gradient(rgba(58,44,26,.10) .5px,transparent 0),
      linear-gradient(168deg,#faf5ea,#efe7d6 58%,#e6dcc8);
    background-size:7px 7px,auto;
    color:#241f1b;border:1px solid rgba(58,44,26,.22);
    box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 40px 110px -34px rgba(52,38,20,.5)}
  body.mvc-light .dsr-card>.lg-titlebar{
    --lg-tb-bg:rgba(58,44,26,.06);--lg-tb-border:rgba(58,44,26,.18);--lg-tb-ink:rgba(46,38,28,.72)}
  body.mvc-light .dsr-head{background:linear-gradient(180deg,#fdfaf2,#f4ecdd);
    border-bottom:1px solid rgba(58,44,26,.2);box-shadow:0 10px 20px -18px rgba(52,38,20,.5)}
  body.mvc-light .dsr-kick{color:#9d4300}
  body.mvc-light .dsr-name{color:#1c1813}
  body.mvc-light .dsr-meta{color:#5c5145}
  body.mvc-light .dsr-close{color:#33291d;border-color:rgba(58,44,26,.34)}
  body.mvc-light .dsr-close:hover{background:#9d4300;border-color:#9d4300;color:#fff}
  body.mvc-light .dsr-warn{color:#3a322a;border-left-color:rgba(58,44,26,.3)}
  body.mvc-light .dsr-sec-t{color:#1c1813;border-bottom-color:rgba(58,44,26,.2)}
  body.mvc-light .dsr-sec-n{color:#9d4300}
  body.mvc-light .dsr-sec-b{color:#37302a}
  body.mvc-light .dsr-sec-b b{color:#12100d}
  body.mvc-light .dsr-sec-b h5{color:#8a3b02}
  body.mvc-light .dsr-sec-b blockquote{background:rgba(58,44,26,.055);border-left-color:rgba(58,44,26,.3);color:#332c25}
  body.mvc-light .dsr-sec-b blockquote small{color:#5c5145}
  body.mvc-light .dsr-empty{color:#5c5145}
  body.mvc-light .dsr-foot{background:rgba(58,44,26,.06);border-top-color:rgba(58,44,26,.2)}
  body.mvc-light .dsr-foot-ref{color:#6b6157}
  body.mvc-light .dsr-foot-close{color:#2c251d;border-color:rgba(58,44,26,.42)}
  body.mvc-light .dsr-foot-close:hover{background:#9d4300;border-color:#9d4300;color:#fff}
  body.mvc-light .dsr-card::before{background:linear-gradient(180deg,#9d4300,rgba(157,67,0,.35))}

  /* ══════════ THE VC SUMMONS — spoken-video mount ("Sit down.") ══════════ */
  /* ── INSOLVENCY ALARM (CEO 2026-07-31: "HUGE warning the agency is about to go bust") ──
     body.pn-crisis is set by render() when cash can't cover a week's wages. The whole frame goes
     to alert: a fixed klaxon band across the screen top + red-shifted hero ring. Reduced-motion
     drops the pulse, keeps the band. */
  /* CEO 2026-07-31 iteration 2 ("closable alert it blocks nav"): the band is a real element with
     an ✕ — dismiss hides it for the current week (it re-arms next week if still in crisis). The
     band itself never eats clicks; only its button does. */
  #pn-klaxon{position:fixed;top:0;left:0;right:0;z-index:9450;pointer-events:none;display:flex;
    align-items:center;justify-content:center;gap:14px;height:26px;
    font:800 10px/26px var(--mono,monospace);letter-spacing:.3em;text-align:center;color:#fff;
    background:repeating-linear-gradient(-45deg,#b3261e 0 18px,#8f1d17 18px 36px);
    box-shadow:0 2px 14px rgba(179,38,30,.55);
    animation:pn-klaxon 1.6s ease-in-out infinite}
  /* QA 2026-08-11 (edge #5): the dismiss on a screaming red ALERT measured 18px tall — less than
     half the 44px floor this codebase enforces everywhere else. The one control a stressed player
     is guaranteed to reach for is the last one allowed to be tiny. */
  #pn-klaxon button{pointer-events:auto;min-height:44px;min-width:44px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.5);
    color:#fff;font:800 10px/1 var(--mono,monospace);letter-spacing:.1em;padding:3px 8px;border-radius:2px;
    cursor:pointer;flex:0 0 auto}
  #pn-klaxon button:hover{background:rgba(0,0,0,.6)}
  @keyframes pn-klaxon{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}
  body.pn-crisis .hero-card,body.pn-crisis .fb-col.fb-warroom,
  body.pn-crisis .stat.stat-hero b{--glow:255,74,58}
  body.pn-crisis .topbar{box-shadow:inset 0 -3px 0 #b3261e,0 10px 30px rgba(179,38,30,.18) !important}
  @media (prefers-reduced-motion:reduce){ body.pn-crisis::before{animation:none} }
  /* CFO emergency cost plan (CEO 2026-07-31) — dossier slab over a red-shifted scrim */
  #pn-cfo-crisis{position:fixed;inset:0;z-index:9600;display:flex;align-items:center;justify-content:center;
    background:rgba(12,6,5,.78);backdrop-filter:blur(6px);padding:20px}
  .cfoX-slab{width:min(680px,94vw);max-height:88vh;overflow-y:auto;background:#fbf8f2;color:#17120e;
    border-left:6px solid #b3261e;border-radius:2px;box-shadow:14px 14px 0 rgba(179,38,30,.55),0 40px 90px rgba(0,0,0,.6);
    padding:0 0 20px}
  /* CEO iteration 2: "look like a red alert email from CFO" — mail chrome, not a dossier slab */
  .cfoX-flag{background:repeating-linear-gradient(-45deg,#b3261e 0 16px,#8f1d17 16px 32px);color:#fff;
    font:800 10.5px/1 var(--mono,monospace);letter-spacing:.22em;padding:10px 24px;text-transform:uppercase}
  .cfoX-head-mail{padding:16px 26px 12px;border-bottom:1px solid #e2d9c9;background:#fff}
  .cfoX-hrow{display:flex;gap:14px;padding:4px 0;align-items:baseline}
  .cfoX-hrow i{flex:0 0 64px;font:700 10px/1.6 var(--mono,monospace);letter-spacing:.14em;color:#a0937f;font-style:normal}
  .cfoX-hrow b{font-size:13.5px;color:#17120e;font-weight:700}
  .cfoX-body{padding:16px 26px 4px}
  .cfoX-body p{margin:0 0 12px;font-size:14px;line-height:1.6;color:#2c2519 !important;-webkit-text-fill-color:#2c2519}
  .cfoX-body b{color:#b3261e}
  .cfoX-ask{font-weight:700}
  .cfoX-sig{padding:2px 26px 12px;font-size:13.5px;font-style:italic;color:#5a5044}
  .cfoX-mail .cfoX-rows{margin:0 26px 14px}
  .cfoX-mail .cfoX-read{margin:0 26px 14px}
  .cfoX-mail .cfoX-acts{padding:0 26px}
  .cfoX-eyebrow{font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.14em;color:#b3261e;font-weight:700}
  .cfoX-title{display:block;font-size:24px;line-height:1.1;margin:8px 0 10px;letter-spacing:-.01em}
  /* hard ink: a themed `p{color:… !important}` (white ink for the dark chrome) otherwise wins and
     washes this paragraph out on the cream slab — the ID selector outguns it */
  .cfoX-stmt{font-size:13.5px;line-height:1.5;font-style:italic;margin:0 0 16px}
  #pn-cfo-crisis .cfoX-stmt, body #pn-cfo-crisis p.cfoX-stmt{color:#3c332b !important;-webkit-text-fill-color:#3c332b !important;opacity:1 !important}
  .cfoX-rows{display:flex;flex-direction:column;gap:6px;margin:0 0 14px}
  .cfoX-row{display:flex;align-items:center;gap:12px;padding:10px 12px;background:#fff;border:1px solid #d9d0c2;
    border-radius:2px;cursor:pointer;user-select:none}
  .cfoX-row input{position:absolute;opacity:0;pointer-events:none}
  .cfoX-box{width:18px;height:18px;flex:0 0 18px;border:2px solid #17120e;border-radius:2px;position:relative;background:#fff}
  .cfoX-row input:checked + .cfoX-box{background:#b3261e;border-color:#b3261e}
  .cfoX-row input:checked + .cfoX-box::after{content:"✕";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:12px;font-weight:800}
  .cfoX-who{flex:1;display:flex;flex-direction:column;min-width:0}
  .cfoX-who b{font-size:14px} .cfoX-who i{font-size:11.5px;color:#7a6f61;font-style:normal}
  .cfoX-save{font-family:ui-monospace,Menlo,monospace;font-size:11px;font-weight:700;color:#b3261e;letter-spacing:.04em;white-space:nowrap}
  .cfoX-row input:checked ~ .cfoX-save{text-decoration:none;background:#b3261e;color:#fff;padding:3px 7px;border-radius:2px}
  .cfoX-read{display:flex;flex-direction:column;gap:4px;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;
    letter-spacing:.03em;padding:12px;background:#17120e;color:#e8e1d5;border-radius:2px;margin:0 0 14px}
  .cfoX-read .ok{color:#5fce8a} .cfoX-read .no{color:#ff7a6e}
  .cfoX-acts{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
  .cfoX-hold{background:none;border:1px solid #b7ab99;color:#5a5044;padding:11px 16px;border-radius:2px;
    font-size:12px;font-weight:700;letter-spacing:.05em;cursor:pointer}
  .cfoX-exec{background:#b3261e;border:0;color:#fff;padding:11px 18px;border-radius:2px;font-size:12px;
    font-weight:800;letter-spacing:.05em;cursor:pointer}
  .cfoX-exec:disabled{opacity:.4;cursor:not-allowed}
  /* ⛔ NOTHING ON THIS SCREEN IS PINNED ON TOP OF ANYTHING ELSE (CEO, 2026-08-10: "this screen
     which is a mess"). The summons used to centre .vc-body in flow while .vc-caption was
     absolutely pinned to the bottom — two layout systems, one screen, and no relationship between
     them. On a phone the body is tall (a 52px+ display headline, a note box and two buttons) so it
     ran straight down into the caption: "Back to the floor" landed on top of the speaker byline
     and the quote, and the fixed TESTER RUN chip sat on the quote as well. Every element was doing
     exactly what it was told; nothing was telling them about each other.
     ONE COLUMN, IN FLOW, THAT SCROLLS. Auto margins put the caption at the bottom when there is
     room and let it simply follow the body when there is not — the same trick as the auth card,
     and the only centring that never creates unreachable overflow. overflow-y:auto means a long
     quote on a small phone scrolls instead of colliding. */
  .vc-summons{position:fixed;inset:0;z-index:10060;overflow-x:hidden;overflow-y:auto;background:#05060a;
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;
    padding:clamp(56px,9vh,72px) 20px 0;overscroll-behavior:contain}
  /* the film is the ROOM, not a column item — it stays put while the column scrolls over it */
  .vc-vid{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;
    filter:grayscale(.35) contrast(1.08) brightness(.92)}
  .vc-vid.vc-vid-off{display:none}
  .vc-scrim{position:fixed;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(4,5,9,.72) 0%,rgba(4,5,9,.34) 30%,rgba(4,5,9,.5) 62%,rgba(4,5,9,.92) 100%),
      radial-gradient(120% 90% at 50% 34%,transparent 34%,rgba(4,5,9,.62) 100%)}
  .vc-sound{position:absolute;top:18px;right:18px;z-index:3;display:inline-flex;align-items:center;gap:8px;
    font-family:var(--pn-mono,monospace);font-size:12px;font-weight:700;letter-spacing:.08em;
    padding:9px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.34);
    background:rgba(8,10,16,.66);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .vc-sound:hover{background:rgba(20,24,34,.82);border-color:#fff}
  .vc-sound:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .vc-sound.is-on{border-color:rgba(var(--glow),.7)}
  .vc-body{position:relative;z-index:4;max-width:640px;width:100%;flex:0 0 auto;margin-top:auto;
    display:flex;flex-direction:column;align-items:center;gap:14px}
  .vc-pill{font-family:var(--pn-mono,monospace);font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
    padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff}
  .vc-pill.bad{background:#7f1d1d;color:#ffe3e0;box-shadow:0 0 24px rgba(180,30,20,.5)}
  .vc-head{font-family:var(--pn-disp,'Anton',sans-serif);font-weight:400;font-size:clamp(38px,8.4vw,96px);
    line-height:.92;letter-spacing:-.01em;font-style:italic;margin:2px 0 4px;
    text-shadow:0 4px 40px rgba(0,0,0,.7);text-wrap:balance}
  /* the summons is a pinned-dark cinematic surface — explicit LIGHT ink in EVERY theme (UX_RULES §1),
     so light-theme heading/paragraph overrides can never dim it on a light theme. */
  .vc-summons .vc-head{color:#fff !important}
  .vc-summons .vc-line{color:#fff !important}
  .vc-summons .vc-speaker{color:rgba(255,255,255,.66) !important}
  .vc-summons .vc-pill{color:#fff !important}
  .vc-summons .vc-pill.bad{color:#ffe3e0 !important}
  .vc-summons .pn-btn--secondary{background:rgba(255,255,255,.14) !important;color:#fff !important;border-color:rgba(255,255,255,.46) !important}
  .vc-summons .pn-btn--secondary:hover{background:rgba(255,255,255,.24) !important;border-color:#fff !important;color:#fff !important}
  .vc-note{max-width:48ch;padding:11px 16px;border:1px solid rgba(220,60,40,.55);border-radius:8px;
    font-family:var(--pn-mono,monospace);font-size:12px;line-height:1.65;letter-spacing:.06em;
    text-align:left;color:#ffb27a;background:rgba(60,10,6,.4)}
  .vc-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:8px}
  /* ⛔ OCCLUSION LAW. This block is bottom-pinned, full-width, and its gradient starts at
     `transparent` — so its top half is INVISIBLE and was still swallowing every click aimed at
     the two buttons above it. Same z-index as .vc-body but later in the DOM, so it won.
     It is pure subtitle: no controls, nothing to select. pointer-events:none is the fix; the
     raised .vc-body z-index above it is the belt to that braces. */
  /* IN FLOW, and pushed to the bottom by an auto margin rather than by being taken out of the
     layout. When the column is taller than the screen it scrolls with everything else instead of
     being sat on. The bottom padding reserves the lane the fixed TESTER RUN chip occupies
     (pnos.js, CEO-75) — the chip is bottom-left and z-indexed above every overlay, so the quote
     has to leave it room rather than share the pixels with it. */
  .vc-caption{position:relative;z-index:2;width:100%;flex:0 0 auto;margin-top:auto;
    padding:20px 24px calc(30px + env(safe-area-inset-bottom,0px));
    pointer-events:none;
    display:flex;flex-direction:column;align-items:center;gap:8px;
    background:linear-gradient(180deg,transparent,rgba(4,5,9,.9) 55%)}
  /* ⛔ THE TESTER CHIP STANDS DOWN FOR THE SUMMONS. It is position:fixed bottom-left at z-index
     21000 (CEO-75), so on a scrolling column NO amount of padding keeps the quote out from under
     it — the content simply travels through that lane on its way past. Reserving space only works
     for content that cannot move. The precedent is already in pnos.js: the pool cabinet hides the
     chip for its duration because the stamp is STATE, not a control, and it survives in the save
     whether or not it is drawn. Same reasoning, same treatment. */
  body.pn-vc-open #pn-tester{display:none !important}
  body:has(#pn-vc) #pn-tester{display:none !important}
  .vc-speaker{font-family:var(--pn-mono,monospace);font-size:10.5px;font-weight:800;letter-spacing:.24em;
    text-transform:uppercase;color:rgba(255,255,255,.62)}
  .vc-line{max-width:60ch;margin:0;font-family:var(--pn-sans,'Inter',sans-serif);font-size:clamp(15px,2vw,19px);
    line-height:1.5;font-weight:600;color:#fff;
    background:rgba(6,8,14,.62);padding:12px 20px;border-radius:10px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
    text-shadow:0 1px 12px rgba(0,0,0,.8)}
  @media (max-width:520px){ .vc-caption{padding:16px 14px 22px} .vc-line{font-size:15px;padding:10px 14px} }
  @media (prefers-reduced-motion:reduce){ .vc-summons *{animation:none !important} }

  /* ===== STAGE 3 — THE BOARDROOM presentation screen ===== */
  .boardroom-stage{margin:8px 0 14px}
  .bs-screen{position:relative;width:100%;aspect-ratio:16/9;max-height:48vh;background:#0b1320;
    border:3px solid var(--ink);border-radius:2px;overflow:hidden;
    box-shadow:14px 14px 0 var(--accent),30px 30px 64px rgba(11,28,48,.20)}
  /* ACTUAL PITCH (is-live): the deck shrinks to a presenter strip so the ROOM + the live read lead.
     War-room prep keeps the full-size deck. */
  .boardroom-mode.is-live .boardroom-stage{margin:4px 0 10px}
  .boardroom-mode.is-live .bs-screen{aspect-ratio:auto;height:30vh;min-height:200px;max-height:32vh;
    box-shadow:9px 9px 0 var(--bad),0 18px 40px rgba(11,28,48,.18)}
  .boardroom-mode.is-live .bs-disc{font-size:clamp(20px,3.3vw,40px)}
  .boardroom-mode.is-live .bs-line{font-size:clamp(11px,1.4vw,15px);max-width:62%}
  .boardroom-mode.is-live .bs-inner{padding:3.5% 5%}
  .bs-cliptag.live{border-color:rgba(186,26,26,.65);color:#fff;background:rgba(186,26,26,.82);
    animation:onair 1.8s ease-in-out infinite}
  .bs-slide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;display:flex;align-items:flex-end;pointer-events:none}
  .bs-slide.on{opacity:1;pointer-events:auto}
  /* 017#7a: during the .7s crossfade both slides' TEXT stacked into an unreadable pile —
     the backdrop keeps the slow fade; the text exits fast and enters only after the handoff */
  .bs-slide .bs-inner{opacity:0;transition:opacity .22s ease}
  .bs-slide.on .bs-inner{opacity:1;transition:opacity .34s ease .26s}
  .bs-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.25) contrast(1.06)}
  .bs-vid.bs-novid{display:none}
  .bs-fallback{position:absolute;inset:0;background:linear-gradient(135deg,#101a2e 0%,#1b2c47 100%)}
  .bs-insight .bs-fallback{background:linear-gradient(135deg,#0e2030,#1d4e57)}
  .bs-strategy .bs-fallback{background:linear-gradient(135deg,#111a30,#3a2456)}
  .bs-bigidea .bs-fallback{background:linear-gradient(135deg,#2a1605,#9d4300)}
  .bs-craft .bs-fallback{background:linear-gradient(135deg,#0f1d2e,#27406b)}
  .bs-commercials .bs-fallback{background:linear-gradient(135deg,#0e2418,#1f5a3a)}
  .bs-fallback::after{content:"";position:absolute;inset:0;
    background:repeating-linear-gradient(115deg,rgba(255,255,255,.04) 0 2px,transparent 2px 26px),
      radial-gradient(120% 90% at 85% 12%,rgba(var(--glow),.28),transparent 55%)}
  .bs-grain{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 0);background-size:5px 5px;mix-blend-mode:overlay;pointer-events:none}
  .bs-vignette{position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,8,14,.86) 0%,rgba(5,8,14,.25) 45%,transparent 70%);pointer-events:none}
  .bs-inner{position:relative;z-index:2;padding:5% 6%;width:100%;color:#fff}
  .bs-kick{font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.28em;color:var(--accent);text-transform:uppercase}
  .bs-disc{font-size:clamp(32px,6vw,76px);font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.045em;line-height:.86;margin:2px 0 0;text-shadow:0 4px 30px rgba(0,0,0,.5)}
  .bs-line{font-size:clamp(12px,1.7vw,18px);max-width:72%;margin-top:10px;color:rgba(255,255,255,.88);font-style:italic;line-height:1.4}
  .bs-meter{display:flex;align-items:center;gap:8px;margin-top:14px}
  .bs-meter span{font-family:var(--mono);font-size:8px;font-weight:800;letter-spacing:.2em;color:rgba(255,255,255,.55)}
  .bs-meter .bs-track{display:block;height:5px;width:180px;max-width:46%;background:rgba(255,255,255,.18);overflow:hidden}
  .bs-meter .bs-track>i{display:block;height:100%;background:var(--accent)}
  .bs-brand{position:absolute;top:12px;right:14px;z-index:3;font-weight:900;font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.5)}
  .bs-cliptag{position:absolute;top:12px;left:14px;z-index:3;font-family:var(--mono);font-size:8px;font-weight:800;letter-spacing:.18em;color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.25);padding:2px 7px}
  .bs-dots{display:flex;gap:7px;justify-content:center;margin-top:10px}
  .bs-dot{width:9px;height:9px;border-radius:50%;background:rgba(11,28,48,.18);transition:background .3s,transform .3s;cursor:default}
  .bs-dot.on{background:var(--accent);transform:scale(1.25)}

  /* ══════════════ PRE-PRESENT — the open laptop plays the deck, folds shut, prompts PITCH IT
     (CEO brief: agency name on a cover, then client + logo; laptop closes to a sting; the pitch call
      lands. Progressive-enhancement: the resting HTML is the open laptop on the cover + a live PITCH
      IT button; JS only ADDS the close/sting beat; reduced-motion stays on the open cover. P1 law:
      the CTA is never opacity-gated — the fold/sting animate transform only.) ══════════════ */
  .pn-preroom .pitch-inner{max-width:720px;margin-inline:auto}
  .pn-preroom .boardroom-mode{border-top:none}
  .pn-preroom-head{text-align:center;margin:2px 0 2px}
  .pn-preroom-kick{justify-content:center;color:var(--p2) !important}
  .pn-preroom-h{font-family:var(--pn-disp) !important;font-weight:400 !important;font-style:normal !important;
    font-size:clamp(34px,6.2vw,64px) !important;line-height:.9 !important;letter-spacing:-.02em !important;
    text-transform:uppercase;color:var(--mvc-fg) !important;text-wrap:balance;margin:7px 0 0 !important}
  .pn-preroom-sub{font-family:var(--pn-sans);font-size:clamp(13px,1.5vw,15px);color:var(--mvc-fg-70) !important;
    max-width:48ch;margin:9px auto 0;line-height:1.5}

  /* the deck's COVER (leads the laptop deck) */
  .bs-cover .bs-cover-bg{background:
    radial-gradient(120% 92% at 84% 6%,rgba(var(--glow),.36),transparent 55%),
    linear-gradient(158deg,#080d16 0%,#11131d 58%,#1c1305 100%)}
  .bs-cover-inner{position:relative;z-index:2;width:100%;padding:5% 6.5%;color:#fff}
  .bs-cover-kick{font-family:var(--pn-mono),monospace;font-size:10px;font-weight:700;letter-spacing:.32em;
    text-transform:uppercase;color:rgba(var(--glow),.96)}
  .bs-cover-agency{font-family:var(--pn-disp);font-weight:400;font-size:clamp(30px,6.6vw,72px);line-height:.88;
    letter-spacing:-.02em;text-transform:uppercase;margin:8px 0 0;text-wrap:balance;text-shadow:0 6px 44px rgba(0,0,0,.6)}
  .bs-cover-for{display:flex;align-items:center;gap:11px;margin-top:16px;flex-wrap:wrap}
  .bs-cover-forlbl{font-family:var(--pn-disp);font-style:italic;font-size:clamp(15px,2.1vw,23px);color:rgba(255,255,255,.58)}
  .bs-cover-mono{display:inline-flex;align-items:center;justify-content:center;min-width:2em;height:2em;padding:0 .4em;
    font-family:var(--pn-mono),monospace;font-weight:700;font-size:clamp(12px,1.7vw,17px);letter-spacing:.02em;
    color:#0a0f18;background:#fff;border-radius:5px;box-shadow:0 4px 18px rgba(0,0,0,.45)}
  .bs-cover-client{font-family:var(--pn-sans);font-weight:800;font-size:clamp(16px,2.5vw,28px);letter-spacing:-.01em}
  .bs-cover-meta{font-family:var(--pn-mono),monospace;font-size:9.5px;font-weight:600;letter-spacing:.2em;
    text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:14px}

  /* the laptop.  NB: the perspective lives on .pn-lap (the lid's direct parent). Nesting it a level
     up (on the stage, with .pn-lap preserve-3d) makes Chromium cull the 3D-transformed lid's paint —
     the deck + folded brandmark render only when perspective is on the immediate parent. */
  .pn-lap-stage{--lw:min(460px,84vw);width:var(--lw);margin:20px auto 4px;cursor:pointer;
    -webkit-user-select:none;user-select:none}
  .pn-lap{position:relative;perspective:1300px;perspective-origin:50% 34%}
  /* lid = bezel + deck; folds forward on the hinge (transform only) */
  .pn-lap-lid{position:relative;transform-style:preserve-3d;transform-origin:50% 100%;
    transform:rotateX(-3deg);transition:transform .92s cubic-bezier(.5,.06,.2,1)}
  .pn-lap-face{position:relative;z-index:2;backface-visibility:hidden;-webkit-backface-visibility:hidden;
    padding:14px 14px 15px;border-radius:15px 15px 4px 4px;
    background:linear-gradient(180deg,#2c313d,#1a1d26);border:1px solid rgba(255,255,255,.09);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 24px 34px rgba(4,7,13,.42)}
  .pn-lap-cam{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;
    background:#0b0e15;box-shadow:0 0 0 2px rgba(255,255,255,.06),0 0 7px rgba(var(--glow),.55)}
  .pn-lap-screen{position:relative;border-radius:5px;overflow:hidden;background:#05070c;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 0 46px rgba(0,0,0,.55)}
  .pn-lap-screen .boardroom-stage{margin:0}
  .pn-lap-screen .bs-screen{border:0 !important;border-radius:0 !important;max-height:none !important;box-shadow:none !important}
  .pn-lap-screen .bs-dots{display:none}
  /* lid outer (revealed when closed) — the agency brandmark */
  .pn-lap-back{position:absolute;inset:0;z-index:1;transform:rotateX(180deg);backface-visibility:hidden;
    -webkit-backface-visibility:hidden;border-radius:15px 15px 4px 4px;
    background:radial-gradient(120% 130% at 50% 34%,#30353f,#14171f);border:1px solid rgba(255,255,255,.07);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
  .pn-lap-back-mark{font-family:var(--pn-disp);font-size:clamp(20px,3.6vw,36px);color:rgba(255,255,255,.92);
    letter-spacing:-.01em;text-align:center;text-transform:uppercase;padding:0 9%;line-height:.95}
  .pn-lap-back-sub{font-family:var(--pn-mono),monospace;font-size:8.5px;letter-spacing:.34em;
    color:rgba(var(--glow),.9);text-transform:uppercase}
  .pn-lap-back::after{content:"";width:38px;height:3px;border-radius:2px;background:rgba(var(--glow),.85);
    box-shadow:0 0 16px rgba(var(--glow),.7)}
  /* hinge + keyboard deck (base) */
  .pn-lap-hinge{position:relative;z-index:4;height:9px;margin:-1px 5% 0;border-radius:0 0 4px 4px;
    background:linear-gradient(180deg,#13161d,#070a0e);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
  .pn-lap-base{position:relative;z-index:3;height:18px;width:106%;margin-left:-3%;border-radius:0 0 13px 13px;
    background:linear-gradient(180deg,#252932,#0f1218);
    box-shadow:0 18px 32px rgba(4,7,13,.5),inset 0 1px 0 rgba(255,255,255,.09)}
  .pn-lap-pad{position:absolute;left:50%;top:5px;transform:translateX(-50%);width:22%;height:6px;border-radius:3px;
    background:rgba(255,255,255,.07)}
  /* WALK INTO THE ROOM — the lid STAYS OPEN. A short clean intro (laptop rises in, the deck cover
     glows up like the room lighting) then the live meeting loads. No fold-shut, no sting clip.
     Transform/opacity only (Law 4 — no deformed frames). CEO 2026-07-17. */
  .pn-lap-stage{transition:opacity .6s ease, transform .62s cubic-bezier(.16,.84,.3,1)}
  .pn-lap-stage[data-beat="arrive"]{opacity:0;transform:translateY(16px) scale(.982)}
  .pn-lap-stage[data-beat="play"],
  .pn-lap-stage[data-beat="connect"],
  .pn-lap-stage[data-beat="open"]{opacity:1;transform:none}
  /* the screen "boots" — a single soft bloom sweeps the deck as the room lighting comes up */
  .pn-lap-screen::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;
    background:radial-gradient(120% 82% at 50% 0%,rgba(var(--glow),.55),transparent 62%)}
  .pn-lap-stage[data-beat="play"] .pn-lap-screen::after{animation:pnBoot 1.6s ease-out 1}
  @keyframes pnBoot{0%{opacity:.92}100%{opacity:0}}
  /* the hand-off — the whole preroom lifts and clears as the live room takes over */
  .pn-preroom.is-entering .pn-lap-stage{opacity:0;transform:translateY(-10px) scale(1.014)}
  .pn-preroom.is-entering .pn-preroom-head,
  .pn-preroom.is-entering .pn-preroom-cta{opacity:0;transition:opacity .3s ease}
  /* the CONNECTING status line (replaces the second "Pitch it") */
  .pn-preroom-cta{display:flex;flex-direction:column;align-items:center;gap:13px;margin-top:18px}
  .pn-preroom-connect{display:inline-flex;align-items:center;gap:9px;
    font-family:var(--pn-mono),monospace;font-size:11px;font-weight:700;letter-spacing:.24em;
    text-transform:uppercase;color:var(--mvc-fg-70) !important}
  .pn-preroom-connect .ppc-dot{width:8px;height:8px;border-radius:50%;background:var(--bad);
    box-shadow:0 0 0 0 rgba(186,26,26,.55);animation:pnLiveDot 1.6s ease-in-out infinite}
  @keyframes pnLiveDot{0%,100%{box-shadow:0 0 0 0 rgba(186,26,26,.5)}50%{box-shadow:0 0 0 6px rgba(186,26,26,0)}}
  .pn-preroom-connect .ppc-ell{display:inline-flex;gap:4px}
  .pn-preroom-connect .ppc-ell i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.3;
    animation:pnEll 1.15s ease-in-out infinite}
  .pn-preroom-connect .ppc-ell i:nth-child(2){animation-delay:.16s}
  .pn-preroom-connect .ppc-ell i:nth-child(3){animation-delay:.32s}
  @keyframes pnEll{0%,100%{opacity:.25}50%{opacity:1}}
  @media (prefers-reduced-motion:reduce){
    .pn-lap-stage,.pn-preroom.is-entering .pn-lap-stage{transition:none}
    .pn-lap-stage[data-beat="arrive"]{opacity:1;transform:none}
    .pn-lap-screen::after,.pn-preroom-connect .ppc-dot,.pn-preroom-connect .ppc-ell i{animation:none}
  }

  /* ══════════════ 21st.dev GLASS SYSTEM → PitchNoir (applied) ══════════════
     Recipes adapted from live 21st.dev components: Glass Card (#14746) + Glassmorphism Minimal
     Metrics (#10614). rounded-3xl radii, translucent glass + backdrop-blur, top-highlight hairline,
     inner gradient wash, wide-tracked pill labels, hover-lift. Layered over the present agency room. */

  /* — SHAPE-CONSISTENCY LOCK (design-taste-frontend): ONE radius scale, documented rule —
       shell panels 22px · data tiles 16px · buttons/pills full. No random per-card radii. — */
  body[data-view="office"] .card.shard{border-radius:22px !important;
    box-shadow:0 20px 54px rgba(11,28,48,.10), inset 0 1px 0 rgba(255,255,255,.9) !important}

  /* — DATA TILES: smoked glass, ONE locked COOL-SLATE palette (ui-ux-pro-max: #0F172A/#1E293B).
       Translucent so the room reads through; consistent 16px radius; white top-highlight; hover-lift.
       COLOR-CONSISTENCY LOCK: no warm/cool fluctuation — the brown tints are gone. — */
  body[data-view="office"] .hb-cell,
  body[data-view="office"] .kpi,
  body[data-view="office"] .perf-vital,
  body[data-view="office"] .fc-tile,
  body[data-view="office"] .fc-board,
  body[data-view="office"] .fb-item{
    border-radius:16px !important;
    background:linear-gradient(160deg, rgba(30,41,59,.62), rgba(15,23,42,.76)) !important;
    -webkit-backdrop-filter:blur(18px) saturate(1.1) !important; backdrop-filter:blur(18px) saturate(1.1) !important;
    border:1px solid rgba(255,255,255,.13) !important;
    box-shadow:0 14px 40px rgba(2,6,23,.28), inset 0 1px 0 rgba(255,255,255,.18) !important;
    position:relative; overflow:hidden;
    transition:transform .22s ease, box-shadow .22s ease !important;
  }
  body[data-view="office"] .hb-cell::after,
  body[data-view="office"] .kpi::after,
  body[data-view="office"] .perf-vital::after{content:"";position:absolute;top:0;left:14px;right:14px;height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);pointer-events:none}
  body[data-view="office"] .hb-cell:hover,
  body[data-view="office"] .kpi:hover,
  body[data-view="office"] .perf-vital:hover,
  body[data-view="office"] .fc-tile:hover{transform:translateY(-2px) !important;
    box-shadow:0 22px 50px rgba(2,6,23,.36), inset 0 1px 0 rgba(255,255,255,.24) !important}

  /* — HERO TOP-PADDING CAP (design-taste-frontend): kill the deadspace at the top. The ghost word
       is texture BEHIND the headline, low-opacity, not a floating block that reads as a layout bug. — */
  body[data-view="office"] .card.shard:has(.dash-bleed),
  body[data-view="office"] .hub-view.on>.card.shard:first-child,
  body[data-view="office"] .hub-view.on>.card.shard.shard-1:first-of-type{padding-top:16px !important;min-height:0 !important}
  body[data-view="office"] .dash-bleed{position:absolute !important; z-index:0 !important;
    font-size:clamp(50px,7vw,92px) !important; opacity:.05 !important;
    top:auto !important; bottom:6px !important; right:16px !important; left:auto !important;
    letter-spacing:-.06em !important; line-height:1 !important; pointer-events:none;}
  /* the diamond corner-flag + ghost word were IN FLOW, reserving ~150px of hero deadspace —
     force them absolute so the eyebrow + headline sit at the top of the card (taste top-padding cap) */
  body[data-view="office"] .card.shard>.corner-flag{position:absolute !important;
    top:-12px !important; right:-12px !important; left:auto !important; bottom:auto !important;
    transform:rotate(45deg) scale(.82) !important; opacity:.95; z-index:3;}

  /* — EYEBROW RESTRAINT (design-taste-frontend): the eyebrow is a plain quiet mono kicker, NOT a
       glass pill on every section (that templated rhythm is the #1 taste violation). No pill. — */
  body[data-view="office"] .card.shard>.tac-eyebrow{background:none !important;border:0 !important;
    padding:0 !important;border-radius:0 !important;box-shadow:none !important;backdrop-filter:none !important;
    color:color-mix(in srgb,var(--accent) 62%, var(--ink)) !important;}

  /* ══════════════ TYPOGRAPHY HIERARCHY (revised) ══════════════
     Kills the blanket italic-uppercase-everything (the "poor / all-same" tell). Upright confident
     editorial with a real display>section>module>label ladder. Hero = the ONE card per screen that
     carries the giant ghost word (:has(.dash-bleed)); everything else is a subordinate section head. */
  body[data-view="office"] h2:not([class]),
  body[data-view="office"] .dash-grid h2{
    font-family:Inter,system-ui,sans-serif !important; font-style:normal !important;
    font-weight:800 !important; text-transform:uppercase !important; letter-spacing:-.022em !important;
    font-size:clamp(19px,2.05vw,27px) !important; line-height:1.04 !important;
  }
  body[data-view="office"] .card:has(.dash-bleed) h2{
    font-weight:900 !important; font-size:clamp(38px,5.1vw,60px) !important;
    letter-spacing:-.045em !important; line-height:.94 !important;
  }
  body[data-view="office"] h2 span[style*="accent"],
  body[data-view="office"] .dash-grid h2 span{color:var(--accent) !important; font-style:normal !important}
  body[data-view="office"] h3:not([class]){font-family:Inter,system-ui,sans-serif !important; font-weight:700 !important;
    text-transform:uppercase !important; letter-spacing:.02em !important; font-size:13.5px !important}
  body[data-view="office"] .tac-eyebrow{font-family:var(--mono) !important; font-weight:700 !important;
    font-size:9px !important; letter-spacing:.2em !important; text-transform:uppercase !important}
  body[data-view="office"] .hb-k,body[data-view="office"] .kpi-lbl,body[data-view="office"] .pv-k{
    letter-spacing:.16em !important; text-transform:uppercase !important; font-family:var(--mono) !important; font-size:9px !important}
  /* — DO-THIS-NOW banner: stronger dark glass so it stays legible over the busy room — */
  body[data-view="office"] .do-now:not(.calm){
    border-radius:20px !important;
    background:linear-gradient(100deg, rgba(var(--glow),.30), rgba(9,15,26,.90)) !important;
    -webkit-backdrop-filter:blur(16px) !important; backdrop-filter:blur(16px) !important;
    box-shadow:0 18px 44px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.14) !important;
  }
  body[data-view="office"] .do-now:not(.calm) .dn-text,
  body[data-view="office"] .do-now:not(.calm) .dn-text small{color:#f4f8ff !important}
  body[data-view="office"] .do-now:not(.calm) .dn-eyebrow{color:var(--accent) !important}
  /* LIGHT themes (Vero gate, 2026-07-09): the translucent-dark urgent gradient composites to a tan
     wash on porcelain — white heading ~2:1, AA fail. Give light themes a solid on-spine urgent card
     (var(--p) deepens per palette: #b4380d platinum, near-black concrete-rust) and a calm card on
     glass with dark text; --d-text-2 is unset in light palettes so .dn-text small went fragile. */
  body.mvc-light[data-view="office"] .do-now:not(.calm){
    background:linear-gradient(100deg,var(--p),color-mix(in srgb,var(--p) 62%,#000)) !important;
    box-shadow:0 18px 44px rgba(40,20,5,.28), inset 0 1px 0 rgba(255,255,255,.18) !important;
  }
  body.mvc-light[data-view="office"] .do-now:not(.calm) .dn-eyebrow{color:#ffe0d2 !important}
  body.mvc-light[data-view="office"] .do-now.calm{
    background:linear-gradient(100deg,rgba(31,122,58,.10),var(--glass-b)) !important;
    box-shadow:0 14px 34px rgba(40,20,5,.14) !important}
  body.mvc-light[data-view="office"] .do-now.calm .dn-text,
  body.mvc-light[data-view="office"] .do-now.calm .dn-text small{color:var(--mvc-fg-70) !important}

  /* ═══════════════════════════════════════════════════════════════════════════════════
     PN SHELL v4 — CLEAN-SLATE SINGLE SYSTEM. Authored from the design-critic build spec.
     ONE coherent dark-noir cockpit that supersedes the three stacked office generations via
     cascade. Palette: ui-ux-pro-max engine. Rules: design-taste-frontend (one palette, one
     radius, one type scale, theme-lock all-dark, eyebrow restraint). This is the LAST word.
     ═══════════════════════════════════════════════════════════════════════════════════ */
  /* open-design system: BMW M (near-black motorsport cockpit) — dark-cockpit palette from its DESIGN.md.
     Sharp geometry, flat surfaces, hairlines, UPPERCASE editorial, photography full-bleed, orange as the
     SCARCE signature stripe (never a fill except the single primary CTA). ONE system, one page. */
  /* ═══ THEME BRIDGE for the office shell (Vero, 2026-07-16 — the "themes bar is useless" fix) ═══
     The BMW-M cockpit pinned every --pn-* surface token to a near-black literal, so the WHOLE office
     (the dominant management surface: hero, valuation, DO-NOW, cards, KPI rails, clients/hires/NBO/
     season tabs, meet-team) stayed black on ALL FOUR themes — light themes only repainted stray text.
     Root cause of the CEO complaint. FIX: bridge --pn-* to the live --mvc-* theme tokens (exactly like
     the --rust-* bridge below), so dark themes resolve to the cinematic cockpit and light themes resolve
     to a genuine LIGHT shell — one place, whole shell re-skins. Geometry (--pn-r) stays constant. */
  :root{
    --pn-bg:var(--mvc-bg);
    --pn-panel:linear-gradient(160deg,var(--glass-a),var(--glass-b));
    --pn-panel-2:linear-gradient(160deg,var(--glass-b),var(--glass-a));
    --pn-tile:var(--glass-b); --pn-elev:var(--glass-a);
    --pn-border:var(--mvc-brd); --pn-border-hi:var(--accent); --pn-hairline:var(--mvc-brd);
    --pn-text:var(--mvc-fg); --pn-body:var(--mvc-fg-70); --pn-muted:var(--mvc-fg-55); --pn-faint:var(--mvc-fg-30);
    --pn-shadow:var(--glass-shadow); --pn-shadow-hi:var(--glass-shadow);
    --pn-r:2px; --pn-r-sm:2px;
  }
  /* -- ONE base + retune the inherited text tokens LIGHT (the old light gen pinned them dark at :2538,
        which is why component text like .rfi-title / meters went invisible on the new dark base) -- */
  body[data-view="office"]{background:var(--pn-bg) !important;
    /* text tokens follow the theme (were pinned near-white → invisible on light shells) */
    --d-text:var(--mvc-fg) !important; --d-text-2:var(--mvc-fg-55) !important; --d-edge:var(--mvc-brd) !important;
    --ink:var(--mvc-fg) !important; --muted:var(--mvc-fg-55) !important; --line:var(--mvc-brd) !important; --line-2:var(--mvc-brd-hi) !important;}
  body[data-view="office"] #penthouse-bg{
    background:
      linear-gradient(180deg, rgba(2,6,23,.88) 0%, rgba(2,6,23,.965) 60%, var(--pn-bg) 100%),
      radial-gradient(120% 90% at 50% -10%, rgba(2,6,23,0) 30%, var(--pn-bg) 100%),
      url('/assets/env/agency_floor.jpg') !important;
    background-size:cover,cover,cover !important; background-position:center !important; background-repeat:no-repeat !important;
    filter:grayscale(1) contrast(1.04) brightness(.55) !important; opacity:1 !important;
  }
  body[data-view="office"] #penthouse-bg .photo,
  body[data-view="office"] #penthouse-bg .video,
  body[data-view="office"] #bgplate{opacity:.10 !important; filter:grayscale(1) brightness(.6) !important}
  /* kill the competing texture sublayers (the three generations' rival grit systems) */
  body[data-view="office"] #penthouse-bg .wash,
  body[data-view="office"] #penthouse-bg .grit-bg,
  body[data-view="office"] #penthouse-bg .halftone-bg,
  body[data-view="office"] #penthouse-bg .skyline,
  body[data-view="office"] .pn-collage,
  body[data-view="office"] .card.shard>.corner-flag{display:none !important}
  body[data-view="office"] #penthouse-bg::after{background:radial-gradient(130% 100% at 50% 0%, transparent 42%, rgba(2,6,23,.55)) !important}
  /* LIGHT THEMES — the office backdrop becomes a genuine light shell: the loft photo is light-graded
     to a faint, high-key wash so the room is still *felt* (the cinematic seam the SST wants) but the
     surface reads LIGHT, dark ink is legible, and glass panels sit on light. (Vero 2026-07-16 theme fix) */
  body.mvc-light[data-view="office"] #penthouse-bg{
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--mvc-bg) 62%, transparent) 0%, color-mix(in srgb, var(--mvc-bg) 86%, transparent) 58%, var(--mvc-bg) 100%),
      radial-gradient(120% 90% at 50% -8%, color-mix(in srgb, #ffffff 55%, transparent) 26%, var(--mvc-bg) 100%),
      url('/assets/env/agency_floor.jpg') !important;
    background-size:cover,cover,cover !important; background-position:center !important; background-repeat:no-repeat !important;
    filter:grayscale(.55) contrast(.9) brightness(1.5) saturate(.7) !important; opacity:1 !important;
  }
  body.mvc-light[data-view="office"] #penthouse-bg::after{background:radial-gradient(130% 100% at 50% 0%, transparent 52%, color-mix(in srgb, var(--mvc-bg) 60%, transparent)) !important}

  /* -- Topbar + hub-nav: dark to match the system (were pinned light → labels went invisible) -- */
  body[data-view="office"] .topbar{background:var(--glass-b) !important; border-bottom:1px solid var(--pn-border) !important; backdrop-filter:blur(16px) saturate(150%) !important}
  body[data-view="office"] .topbar .tb-btn,body[data-view="office"] .topbar button{background:transparent !important; border:1px solid var(--pn-border) !important; color:var(--pn-text) !important}
  body[data-view="office"] .topbar .tb-btn:hover{border-color:var(--pn-border-hi) !important; color:var(--accent) !important}
  /* ── TOPBAR STAT LEGIBILITY (UX_RULES §1 — the #1 RECURRING failure) ──────────────────────────────
     The office topbar is theme glass: near-black on ONYX/MIDNIGHT, porcelain on the two LIGHT themes.
     Its readout inks were inherited from the root, which broke on the dark bar: the CRED/WahCoins
     SECONDARY values used --ink-2 (#2a3a4d) = 1.7:1 dark-on-dark; Cash used --primary (#9d4300) = 3.0:1;
     labels + the identity line rode alpha-fg over a photo (unstable). FIX: bind every label + value to
     the LIVE theme foreground so they flip with the theme and clear AA 4.5:1 on the bar in all 4 bases.
     Measured on the composited bar (dark ≈#07080e / light ≈#f5f1eb):
       values (--mvc-fg) 15–19:1 · labels+identity (--mvc-fg-70) 6.7–10.3:1 · secondary values (--mvc-fg)
       15:1 · Cash/title (--p2 on dark = 8.5–9:1 · --p on light = 5.3–5.6:1). Labels stay quiet but AA. */
  body[data-view="office"] .topbar .stat b{color:var(--mvc-fg) !important}
  body[data-view="office"] .topbar .stat span{color:var(--mvc-fg-70) !important; opacity:1 !important}
  body[data-view="office"] .topbar .hud-secondary .stat b{color:var(--mvc-fg) !important}   /* was --ink-2 → dark-on-dark */
  body[data-view="office"] .topbar .stat.stat-id b{color:var(--mvc-fg) !important}
  body[data-view="office"] .topbar .stat.stat-id span{color:var(--mvc-fg-70) !important}
  /* LIGHT THEMES — the small labels (CASH/REPUTATION/CLIENTS/WEEK/CRED/WAHCOINS) + the JON·RAINMAKER
     identity line read AA (fg-70 ≈ 6.7:1) but FAINT, so the whole cluster looked "unchanged" on
     platinum/porcelain (CEO). Darken to a near-full ink (~12:1) so the readout reads crisp — a hair
     softer than the bold values, so hierarchy (weight + this darker tier) still holds. (Vero 2026-07-16) */
  body.mvc-light[data-view="office"] .topbar .stat span,
  body.mvc-light[data-view="office"] .topbar .stat.stat-id span{
    color:color-mix(in srgb,var(--mvc-fg) 90%,transparent) !important}
  /* Cash hero + any equipped-title accent: bright brand orange on the dark bars, deep brand orange on
     the light bars — burnt-orange stays the spine, AA on both. */
  body[data-view="office"] .topbar .stat.stat-hero b,
  body[data-view="office"] .topbar .stat b span{color:var(--p2) !important}
  body.mvc-light[data-view="office"] .topbar .stat.stat-hero b,
  body.mvc-light[data-view="office"] .topbar .stat b span{color:var(--p) !important}
  body[data-view="office"] .hub-nav{background:var(--glass-b) !important; border:1px solid var(--pn-border) !important; border-radius:var(--pn-r) !important; backdrop-filter:blur(12px) saturate(150%) !important}
  body[data-view="office"] .hub-tab{color:var(--pn-muted) !important}
  body[data-view="office"] .hub-tab.on{background:rgba(var(--glow),.12) !important; color:var(--pn-text) !important; border-color:rgba(var(--glow),.3) !important; box-shadow:inset 0 -2px 0 var(--accent) !important}

  /* -- ONE panel recipe for EVERY card. No bespoke gradients, no clip-path, no tilt, no offset shadow. -- */
  body[data-view="office"] .card,
  body[data-view="office"] .card.shard,
  body[data-view="office"] .client-card,
  body[data-view="office"] .nbo-card,
  body[data-view="office"] .tt-card,
  body[data-view="office"] .scout-card,
  body[data-view="office"] .camp-card,
  body[data-view="office"] .dossier-card{
    background:var(--pn-panel) !important;
    -webkit-backdrop-filter:blur(16px) !important; backdrop-filter:blur(16px) !important;
    border:1px solid var(--pn-border) !important;
    border-radius:var(--pn-r) !important;
    box-shadow:var(--pn-shadow), inset 0 1px 0 rgba(255,255,255,.04) !important;
    clip-path:none !important; transform:none !important; color:var(--pn-text) !important;
  }
  body[data-view="office"] .card::before,body[data-view="office"] .card.shard::before,
  body[data-view="office"] .card::after,body[data-view="office"] .card.shard::after{display:none !important}
  /* BMW-M SIGNATURE: one orange brand-stripe down the hero card's left edge. Scarce — this is the only
     structural use of the accent as a mark (never a card fill). Sharp, engineered, unmistakable. */
  body[data-view="office"] .card.shard:has(.dash-bleed){position:relative}
  body[data-view="office"] .card.shard:has(.dash-bleed)::before{display:block !important;content:"" !important;
    position:absolute !important;left:0 !important;top:0 !important;bottom:0 !important;right:auto !important;
    width:3px !important;height:auto !important;background:var(--accent) !important;
    box-shadow:0 0 16px rgba(var(--glow),.55) !important;border-radius:0 !important;z-index:5 !important}
  /* flat surfaces — kill the glassy inner highlight, keep it engineered-matte (BMW M is flat, not glass) */
  body[data-view="office"] .card,body[data-view="office"] .card.shard,body[data-view="office"] .client-card,
  body[data-view="office"] .nbo-card,body[data-view="office"] .tt-card{box-shadow:var(--pn-shadow) !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
  body[data-view="office"] .muted,body[data-view="office"] p.small{color:var(--pn-body) !important}
  body[data-view="office"] .card.shard:hover,
  body[data-view="office"] .client-card:hover,
  body[data-view="office"] .nbo-card:hover,
  body[data-view="office"] .dossier-card:hover{border-color:var(--pn-border-hi) !important;
    box-shadow:var(--pn-shadow-hi), 0 0 0 1px var(--pn-border-hi) !important; transform:translateY(-2px) !important}
  /* nested module = subtle variant of the SAME family */
  body[data-view="office"] .card .card{background:var(--track) !important;border:1px solid var(--pn-hairline) !important;
    box-shadow:none !important;border-radius:var(--pn-r-sm) !important}

  /* -- KPI / DATA TILES: lighter alpha step of the same family, thin accent rule, radius-lock -- */
  body[data-view="office"] .hb-cell,
  body[data-view="office"] .kpi,
  body[data-view="office"] .perf-vital,
  body[data-view="office"] .fc-tile,
  body[data-view="office"] .fc-board,
  body[data-view="office"] .fb-item{
    background:var(--pn-tile) !important; border:1px solid var(--pn-border) !important;
    border-radius:var(--pn-r) !important; box-shadow:var(--pn-shadow) !important;
    -webkit-backdrop-filter:blur(14px) !important; backdrop-filter:blur(14px) !important;
  }
  body[data-view="office"] .hb-cell::after,body[data-view="office"] .kpi::after,body[data-view="office"] .perf-vital::after{
    content:"" !important;position:absolute !important;left:0 !important;right:auto !important;top:0 !important;bottom:0 !important;
    width:3px !important;height:auto !important;background:var(--pn-hairline) !important}
  body[data-view="office"] .kpi.kpi-hero::after,body[data-view="office"] .perf-vital.kpi-hero::after{
    background:var(--accent) !important;box-shadow:0 0 12px rgba(var(--glow),.5) !important}

  /* -- TEXT: light on dark, one hierarchy. Semantic colours survive. -- */
  body[data-view="office"] .card,body[data-view="office"] .hub-view,
  body[data-view="office"] h1:not([class]),body[data-view="office"] h2:not([class]),
  body[data-view="office"] h3:not([class]),body[data-view="office"] h4:not([class]),
  body[data-view="office"] .hb-v,body[data-view="office"] .kpi-val,body[data-view="office"] .tt-name,
  body[data-view="office"] .doss-name,body[data-view="office"] .cc-name{color:var(--pn-text) !important}
  body[data-view="office"] .muted,body[data-view="office"] .small.muted,body[data-view="office"] p.small,
  body[data-view="office"] .hb-k,body[data-view="office"] .hb-sub,body[data-view="office"] .kpi-lbl,body[data-view="office"] .kpi-sub,
  body[data-view="office"] .cc-rev-k,body[data-view="office"] .cc-loy-k,body[data-view="office"] .tt-role,body[data-view="office"] .tt-k{color:var(--pn-muted) !important}
  body[data-view="office"] .tac-eyebrow{color:var(--pn-muted) !important;background:none !important;border:0 !important;padding:0 !important;border-radius:0 !important;box-shadow:none !important;backdrop-filter:none !important;font-family:var(--mono) !important;font-weight:700 !important;font-size:9px !important;letter-spacing:.2em !important;text-transform:uppercase !important}
  body[data-view="office"] .card:has(.dash-bleed) .tac-eyebrow{color:var(--accent) !important}
  /* re-assert semantics so the light text doesn't flatten them */
  body[data-view="office"] .good,body[data-view="office"] .hb-v.good,body[data-view="office"] .pill.good,body[data-view="office"] .tt-v--hi{color:var(--good,#22c55e) !important}
  body[data-view="office"] .bad,body[data-view="office"] .hb-v.bad,body[data-view="office"] .pill.bad,body[data-view="office"] .tt-v--lo{color:var(--bad,#ef4444) !important}
  body[data-view="office"] .warn,body[data-view="office"] .pill.warn,body[data-view="office"] .tt-v--mid{color:var(--warn,#f59e0b) !important}

  /* -- HEADINGS: upright, never italic. Hero display = the ONE card with the ghost word. -- */
  body[data-view="office"] h2:not([class]){font-family:Inter,system-ui,sans-serif !important;font-style:normal !important;font-weight:800 !important;
    text-transform:uppercase !important;letter-spacing:-.02em !important;font-size:clamp(17px,1.7vw,21px) !important;line-height:1.1 !important}
  body[data-view="office"] .card:has(.dash-bleed) h2{font-weight:800 !important;font-size:clamp(28px,3.4vw,42px) !important;letter-spacing:-.03em !important;line-height:1.04 !important}
  body[data-view="office"] h2 span[style*="accent"],body[data-view="office"] .dash-grid h2 span{color:var(--accent) !important;font-style:normal !important}
  body[data-view="office"] .dash-bleed{display:none !important}  /* the ghost word was noise; the room + type carry it now */

  /* -- BUTTONS: liquid glass (mVC bar) — frosted fill + colour bloom, not a flat solid orange fill -- */
  body[data-view="office"] button.primary,body[data-view="office"] .primary,
  body[data-view="office"] .cc-dinner,body[data-view="office"] .sf-hire:not(.off){
    position:relative;isolation:isolate;
    background:linear-gradient(180deg,rgba(var(--glow),.42),rgba(var(--glow),.20)) !important;
    backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%);
    color:#fff !important;border:1px solid rgba(255,255,255,.24) !important;
    border-radius:999px !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 1.5px 1px rgba(255,255,255,.65),
      inset 0 -9px 16px rgba(0,0,0,.28),0 10px 26px rgba(var(--glow),.32) !important;
    font-weight:800 !important;transition:transform .2s cubic-bezier(.2,.7,.3,1)}
  body[data-view="office"] button.primary:hover,body[data-view="office"] .primary:hover{transform:translateY(-2px)}
  /* SYSTEM_V2: the legacy office catch-all must NOT re-skin system buttons — .pn-btn (actions) and
     .tb-btn (nav pills) are governed by pn-system. This is the fracture the constitution fixes. */
  body[data-view="office"] button:not(.primary):not(.hub-tab):not(.hub-advance):not(.sf-hire):not(.pn-btn):not(.tb-btn):not(.nbo-cta):not(.sea-promo-cta):not([class*="pnos-"]):not(.pnc-yes):not(.pnc-no):not(.wearing-chip):not(.lg-btn):not(.lg-dot):not(.mac-tb-dot):not(.s2-day):not(.s2-htab):not(.fr-day):not(.fl-ev):not(.fl-act):not(.fl-party):not(.sqd-train):not(.sqd-letgo):not(.evt-choice):not(.nm-go){
    background:rgba(255,255,255,.05) !important;backdrop-filter:blur(10px);color:var(--pn-text) !important;border:1px solid var(--pn-border) !important;border-radius:999px !important}
  body[data-view="office"] button:not(.primary):not(.hub-tab):not(.pn-btn):not(.tb-btn):not(.nbo-cta):not(.sea-promo-cta):not([class*="pnos-"]):not(.pnc-yes):not(.pnc-no):not(.wearing-chip):not(.lg-btn):not(.lg-dot):not(.mac-tb-dot):not(.s2-day):not(.s2-htab):not(.fr-day):not(.fl-ev):not(.fl-act):not(.fl-party):not(.sqd-train):not(.sqd-letgo):not(.evt-choice):not(.nm-go):hover{background:rgba(248,250,252,.09) !important;border-color:var(--pn-border-hi) !important}

  /* -- pills, bars, dividers on dark -- */
  body[data-view="office"] .pill{background:rgba(248,250,252,.07) !important;border:1px solid var(--pn-border) !important;color:var(--pn-muted) !important;border-radius:999px !important}
  body[data-view="office"] .bar{background:rgba(248,250,252,.10) !important}

  /* ============================================================================
     CONCRETE RUST REMIX — light Material theme (memory/project_pitchnoir_design_system.md
     THEMES log #1). This REPLACES the dark-glass build from earlier this session, which
     contradicted the locked spec ("light Material surfaces... dark-noir is the earned
     reward, not the week-one shell" — logged 2026-07-04, missed until now). Flat cards +
     real elevation shadow, not blur-glass (glassmorphism-as-default is an anti-pattern);
     one font throughout (Montserrat, matching the theme's own spec — no display/body split);
     rounded-rect buttons, not pills. Tokens live on plain `body` (not view-scoped) so the War
     Room/Boardroom (body[data-view="pitch"], reskinned further below) can reuse them too —
     one theme, not two copies of the same palette. Vault is unconverted on purpose — out of
     scope for this pass. ============================== */
  /* ── THEME BRIDGE (rebuilt 2026-07-07, Opus): the office/pitch shells were hardcoded to a
     single flat rust palette. Every legacy office class reads these --rust-* aliases, so pointing
     them at the authored --mvc-* theme tokens (assets/css/mvc-os.css) makes the WHOLE shell
     re-theme from the palette picker — 6 real themes, light+dark — instead of one dead palette.
     This is the fix for "themes only colour one or two modules": now they colour everything.
     --rust-card is a translucent glass gradient (not a flat fill) so the elegant glass craft from
     os-mvc.html renders again, tinted per theme. */
  body{
    --rust-ink:var(--mvc-fg); --rust-ink-70:var(--mvc-fg-70); --rust-ink-55:var(--mvc-fg-55);
    --rust-ink-40:var(--mvc-fg-40); --rust-ink-14:var(--mvc-brd-hi); --rust-ink-08:var(--track);
    --rust-bg:var(--mvc-bg); --rust-card:linear-gradient(160deg,var(--glass-a),var(--glass-b)); --rust-border:var(--mvc-brd);
    --rust-black:var(--p); --rust:var(--p2); --rust-teal:var(--acc); --rust-destructive:var(--mvc-red);
  }
  body[data-view="office"] #penthouse-bg{display:none !important}   /* the shader (dark themes) / flat bg (light) is the backdrop now */
  body[data-view="office"]{background:var(--mvc-bg) !important}
  body[data-view="office"] .topbar{
    background-color:var(--mvc-bg) !important;   /* F2: gradient alone left bg-color transparent — HUD overprinted scrolled cards */
    background:var(--rust-card) !important;border-bottom:1px solid var(--rust-border) !important;background-color:var(--mvc-bg) !important;
    backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  }
  body[data-view="office"] .topbar,body[data-view="office"] .topbar .stat,body[data-view="office"] .topbar .stat b{color:var(--rust-ink) !important}
  body[data-view="office"] .topbar .stat span{color:var(--rust-ink-55) !important}
  /* critic: on platinum the persistent topbar snapped to dark-glass during the week-summary flow — mirror the office light override */
  body.mvc-light[data-view="weeksummary"] .topbar{background:var(--rust-card) !important;background-color:var(--mvc-bg) !important;border-bottom:1px solid var(--rust-border) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
  body.mvc-light[data-view="weeksummary"] .topbar,body.mvc-light[data-view="weeksummary"] .topbar .stat,body.mvc-light[data-view="weeksummary"] .topbar .stat b{color:var(--rust-ink) !important}
  body.mvc-light[data-view="weeksummary"] .topbar .stat span{color:var(--rust-ink-55) !important}
  /* #hud's id-selector rules (line ~2689) outrank plain-class overrides above regardless of source
     order — match the id here to actually win */
  body[data-view="office"] #hud .stat b{color:var(--rust-ink) !important}
  body[data-view="office"] #hud .hud-secondary .stat b{color:var(--rust-ink-70) !important}
  body[data-view="office"] #hud .stat span{color:var(--rust-ink-55) !important}
  body[data-view="office"] .topbar button{background:transparent !important;color:var(--rust-ink) !important;border:1px solid var(--rust-border) !important}
  body[data-view="office"] .topbar button:hover{background:var(--rust-ink-08) !important;border-color:var(--rust-ink-14) !important}
  /* mvc-os.css's .mvc-glass is a dark frosted-blur base — flatten it for every office use
     (.mvc-kpi tiles, the "read the room" wrapper) so they match the card system above */
  body[data-view="office"] .mvc-glass{
    background:var(--rust-card) !important;border:1px solid var(--rust-border) !important;
    backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
    box-shadow:0 1px 2px rgba(28,25,23,.05),0 8px 24px rgba(28,25,23,.05) !important;
  }

  body[data-view="office"] .hud-main{
    display:grid !important;grid-template-columns:88px 1fr !important;
    flex-direction:row !important;align-items:start !important;gap:18px !important;overflow:visible !important;
  }
  body[data-view="office"] .hub-nav{
    grid-column:1 !important;flex-direction:column !important;flex-wrap:nowrap !important;
    align-items:stretch !important;gap:4px !important;margin:0 !important;padding:14px 7px !important;
    position:sticky !important;top:calc(var(--hud-h) + 6px) !important;
    max-height:calc(100vh - var(--hud-h) - 32px) !important;overflow-y:auto !important;overflow-x:visible !important;
    background:var(--rust-card) !important;border:1px solid var(--rust-border) !important;border-radius:14px !important;
    box-shadow:0 1px 2px rgba(28,25,23,.06),0 8px 24px rgba(28,25,23,.06) !important;backdrop-filter:none !important;
  }
  body[data-view="office"] .hub-tab{
    flex-direction:column !important;justify-content:center !important;gap:5px !important;
    padding:12px 4px !important;border-radius:8px !important;text-align:center !important;
    font-size:9.5px !important;letter-spacing:.02em !important;white-space:normal !important;line-height:1.2 !important;
    color:var(--rust-ink-55) !important;
  }
  body[data-view="office"] .hub-tab .ht-ico svg{width:19px !important;height:19px !important}
  body[data-view="office"] .hub-tab.on{
    color:var(--rust-ink) !important;background:rgba(var(--glow),.12) !important;border-color:rgba(var(--glow),.3) !important;
    box-shadow:inset 0 -2px 0 var(--accent) !important;
  }
  body[data-view="office"] .hub-advance{
    margin:6px 0 0 !important;flex-direction:column !important;padding:12px 4px !important;
    border-radius:8px !important;font-size:9.5px !important;letter-spacing:.02em !important;
    text-align:center !important;white-space:normal !important;line-height:1.2 !important;order:90 !important;gap:3px !important;
    background:var(--rust-ink-08) !important;color:var(--rust-ink) !important;border:1px solid var(--rust-border) !important;box-shadow:none !important;
  }
  body[data-view="office"] .hub-body{grid-column:2 !important;min-width:0 !important;display:flex;flex-direction:column;gap:10px}
  @media (max-width:900px){
    body[data-view="office"] .hud-main{grid-template-columns:1fr !important}
    body[data-view="office"] .hub-nav{
      position:static !important;max-height:none !important;flex-direction:row !important;
      overflow-x:auto !important;overflow-y:visible !important;
    }
    body[data-view="office"] .hub-tab,body[data-view="office"] .hub-advance{flex:none !important;width:66px !important}
    body[data-view="office"] .hub-body{grid-column:1 !important}
  }

  /* flat elevated cards — no blur/translucency (impeccable's own anti-slop rule: glassmorphism
     is rare-and-purposeful or nothing, not a default). Rounded-rect, real shadow, real border. */
  body[data-view="office"] .card.shard{
    clip-path:none !important;transform:none !important;
    background:var(--rust-card) !important;border:1px solid var(--rust-border) !important;border-radius:14px !important;
    box-shadow:0 1px 2px rgba(28,25,23,.05),0 8px 24px rgba(28,25,23,.05) !important;
    backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  }
  body[data-view="office"] .card.shard::before,body[data-view="office"] .card.shard::after{display:none !important}
  body[data-view="office"] .card.shard:hover{transform:none !important}
  body[data-view="office"] .dash-grid .card .card{
    background:var(--rust-ink-08) !important;border-radius:10px !important;border:1px solid var(--rust-border) !important;
  }
  /* real bug, found live: this rule set top:70px !important but never cleared the earlier
     bottom:16px rule (line ~87) — with both top AND bottom set on a position:fixed element with
     no explicit height, it stretches to fill the gap between them (nearly full viewport height),
     which is exactly the giant dark capsule Jon flagged. bottom:auto fixes it. */
  /* Theme picker parks bottom-center at every width: top-right now holds the Bond hero valuation
     chart on desktop, and ≤700px the old top:70px position sat ON the wrapped hub-nav row and
     stole every tab tap (found in QA — nav dead on phones). Bottom-center collides with nothing. */
  /* F1: the Vault keeps its dark stage in light themes — re-pin fg tokens to light ink inside
     the store view so headers/chips stay legible on the espresso backdrop (platinum was invisible) */
  body.mvc-light[data-view="store"],body.mvc-light[data-view="pass"]{
    --mvc-fg:#f6f8fb; --mvc-fg-70:rgba(255,255,255,.72); --mvc-fg-55:rgba(255,255,255,.56);
    --mvc-fg-40:rgba(255,255,255,.4); --rust-ink:#f6f8fb; --rust-ink-70:rgba(255,255,255,.72); --rust-ink-55:rgba(255,255,255,.56);
    /* F1b (Vero 2026-07-10): F1 re-pinned only the INK to light — the glass SURFACES stayed light, so
       white text washed out on every text card (packs / accents / avatars / titles / powerups / pass rows).
       The image-fronted collection/office cards hid it; the retrofitted text shelves exposed it. Re-pin the
       surface tokens to the onyx-dark set too, so the Vault + Season Pass are a true espresso boutique on
       light themes — one identity on both, white text legible everywhere (AA on #05060a). */
    --mvc-brd:rgba(255,255,255,.10); --mvc-brd-hi:rgba(255,255,255,.2);
    --mvc-bg:#05060a; --glass-a:rgba(24,27,37,.52); --glass-b:rgba(9,11,17,.62);
    --glass-shadow:0 26px 60px rgba(0,0,0,.55),0 4px 14px rgba(0,0,0,.4);
    --glass-hi:rgba(255,255,255,.62); --track:rgba(0,0,0,.32);
  }
  /* F5: mobile hub-nav scrolls but showed no affordance — fade mask hints the overflow */
  @media(max-width:640px){
    body[data-view="office"] .hub-nav{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  }
  /* mobile: fixed picker ate ~9% of viewport permanently (critic HIGH-8) — collapsed launcher */
  @media(max-width:640px){
    .mvc-palfloat{max-width:56px;overflow:hidden;opacity:.85;transition:max-width .25s,opacity .2s;justify-content:flex-start;padding:8px}
    .mvc-palfloat.open{max-width:calc(100vw - 20px);opacity:1}
  }
  body[data-view="create"] .mvc-palfloat,body[data-view="boot"] .mvc-palfloat,
  body[data-view="meetteam"] .mvc-palfloat,body[data-view="result"] .mvc-palfloat{display:none !important}
  /* DX4: bottom-CENTRE sat on top of charts/CTAs on every screen — dock it in the quiet corner,
     dim at rest so it reads as chrome, not content */
  .mvc-palfloat{top:auto !important;bottom:14px !important;right:14px !important;left:auto !important;
    height:auto !important;transform:none;max-width:calc(100vw - 20px);
    flex-wrap:wrap;justify-content:center;opacity:.6;transition:opacity .18s}
  .mvc-palfloat:hover,.mvc-palfloat.open{opacity:1}
  /* critic re-audit: the dock rule above cancelled the mobile collapse (critic HIGH-8) by source
     order — re-assert it after the dock so phones get the collapsed launcher back */
  @media(max-width:640px){
    .mvc-palfloat{max-width:64px;overflow:hidden;opacity:.85;justify-content:flex-start;padding:8px}
    .mvc-palfloat.open{max-width:calc(100vw - 20px);opacity:1}
    /* collapsed launcher = a tidy single row of accent swatches (names hidden); tap expands to the
       full named picker. Prevents the wrapping named control from clipping into a messy stack. */
    .mvc-palfloat:not(.open) .mvc-themeseg{flex-wrap:nowrap}
    .mvc-palfloat:not(.open) .mvc-themeseg button{padding:6px 5px}
    .mvc-palfloat:not(.open) .mvc-themeseg button span,
    .mvc-palfloat:not(.open) .mvc-themesep{display:none}
    .mvc-palfloat.open .mvc-themeseg{flex-wrap:wrap}
  }

  /* SA8 + P2 SEV3 (CEO 2026-07-21): the ink-flip must key off the ACTUAL bar, not the theme. The topbar
     is LIGHT only on the office dashboard + week-summary (see the brandmark rule below) — dark ink there.
     On EVERY other light-theme surface the bar STAYS dark-glass (Store, meet-team, holding, default HUD,
     pass), so the old global flip painted black-on-dark → invisible. Give those white ink. Pitch self-
     paints via its rust theme tokens (higher-specificity rules below), so it is excluded. */
  body.mvc-light[data-view="office"] .topbar button,body.mvc-light[data-view="office"] .topbar .tb-btn,
  body.mvc-light[data-view="weeksummary"] .topbar button,body.mvc-light[data-view="weeksummary"] .topbar .tb-btn{color:#13202f !important;border-color:rgba(11,28,48,.35) !important}
  body.mvc-light[data-view="office"] .topbar .material-symbols-outlined,
  body.mvc-light[data-view="weeksummary"] .topbar .material-symbols-outlined{color:#b4380d !important}
  body.mvc-light:not([data-view="office"]):not([data-view="weeksummary"]):not([data-view="pitch"]) .topbar button,
  body.mvc-light:not([data-view="office"]):not([data-view="weeksummary"]):not([data-view="pitch"]) .topbar .tb-btn{color:#eaf1fb !important;border-color:rgba(255,255,255,.22) !important}
  /* SA14: war-room candidate pickers were 17px wide at 390px — thumb-sized rows, single column */
  @media(max-width:640px){
    .pillar-grid.talent-grid{grid-template-columns:1fr !important}
    .tc-cand{min-height:44px;padding:8px}
  }
  /* KPI hero row — standalone flat tiles, real sparklines off S.kpiHist */
  body[data-view="office"] .mvc-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:12px}
  body[data-view="office"] .mvc-kpi{padding:16px 18px 14px}
  body[data-view="office"] .mvc-kpi-lbl{font-family:var(--mono);font-size:9.5px;font-weight:800;letter-spacing:.14em;color:var(--rust-ink-55);text-transform:uppercase}
  body[data-view="office"] .mvc-kpi-v{font-size:30px;margin:6px 0 3px;font-weight:700;color:var(--rust-ink)}
  body[data-view="office"] .mvc-kpi-foot{font-size:12px;font-weight:700;margin-bottom:4px}
  @media(max-width:1180px){ body[data-view="office"] .mvc-kpi-row{grid-template-columns:repeat(2,1fr)} }
  @media(max-width:520px){ body[data-view="office"] .mvc-kpi-row{grid-template-columns:1fr} }

  /* ── BOND DATAVIZ (HANDOFF §3): hero chart · KPI vizzes · radar · donut · pipeline ──
     Everything reads the theme tokens so ONYX/PLATINUM (and the cosmetics) reskin it. */
  body[data-view="office"] .pv-hero-row{display:grid;grid-template-columns:1.3fr .7fr;gap:14px;align-items:stretch}
  @media(max-width:1100px){ body[data-view="office"] .pv-hero-row{grid-template-columns:1fr} }

  /* ════════ SYSTEM_V2 P3 — DASHBOARD VIBE LAYER ════════
     Jon: "dull financial report — where's the vibe?" + "I like pages with agency
     video/image backgrounds." The dashboard landing (masthead is display:none on
     office; the real header = .pv-hero-row) gets a graded agency-film backdrop so
     the greeting + the valuation glass float OVER living footage. Performance:
     pn-vibe.js lazy-loads + plays only when visible + tab-visible + not reduced-
     motion; the graded poster still carries it otherwise. */
  :root{--vibe-grade:contrast(1.06) saturate(1.08) brightness(.9)}
  body[data-view="office"] .pv-hero-row.pn-vibe-row{position:relative;isolation:isolate;border-radius:16px;overflow:hidden;
    padding:14px;border:1px solid var(--mvc-brd,rgba(255,255,255,.1))}
  body[data-view="office"] .pn-vibe{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
  body[data-view="office"] .pn-vibe-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    filter:var(--vibe-grade);transform:scale(1.05)}
  /* the plate was "barely visible" (CEO): the scrim was near-opaque (.92→.46) AND the grade dark, so the
     living footage read as a black slab. Open the RIGHT/lower reveal so the film reads, while keeping the
     LEFT text safe-area strongly scrimmed (headline stays AA over it) — Media Law: composed for the overlay. */
  body[data-view="office"] .pn-vibe-scrim{position:absolute;inset:0;
    background:linear-gradient(110deg,rgba(4,6,11,.9),rgba(4,6,11,.62) 44%,rgba(4,6,11,.24)),
               linear-gradient(0deg,rgba(4,6,11,.58),transparent 66%)}
  /* LIGHT THEMES — the valuation hero stays cinematic (graded film behind glass, the CEO's signature
     look) but flips to a BRIGHT high-key scrim so it reads LIGHT with dark ink, not a dark takeover.
     Same film, opposite key — so ONYX→PORCELAIN visibly repaints the hero too. (Vero 2026-07-16) */
  body.mvc-light[data-view="office"] .pn-vibe-scrim{
    background:linear-gradient(110deg,rgba(255,255,255,.88),rgba(255,255,255,.44) 46%,rgba(255,255,255,.1)),
               linear-gradient(0deg,color-mix(in srgb,var(--mvc-bg) 40%,transparent),transparent 64%)}
  body[data-view="office"] .pn-vibe-row>.perf-hero,
  .pv-distress{margin-top:8px;padding:7px 10px;border-radius:2px;font:700 10.5px/1.45 var(--mono,monospace);
    letter-spacing:.06em;text-transform:uppercase}
  .pv-distress.watch{background:rgba(179,38,30,.12);color:#c22d23;border-left:3px solid #b3261e}
  .pv-distress.fire{background:#b3261e;color:#fff;border-left:3px solid #6e120d}
  body[data-view="office"] .pn-vibe-row>.pv-herochartbox{position:relative;z-index:1}
  body[data-view="office"] .pn-vibe-row>.perf-hero{background:transparent !important;border:0 !important;box-shadow:none !important}
  body[data-view="office"] .pn-vibe-row>.perf-hero .mvc-h1,
  body[data-view="office"] .pn-vibe-row>.perf-hero .perf-hero-h1{color:#fff !important;text-shadow:0 4px 24px rgba(0,0,0,.6)}
  body[data-view="office"] .pn-vibe-row>.perf-hero .perf-hero-sub{color:rgba(255,255,255,.84) !important}
  body[data-view="office"] .pn-vibe-row>.perf-hero .mvc-kpi-lbl{color:var(--p2) !important}
  body[data-view="office"] .pn-vibe-row>.perf-hero .mvc-hero-accent{color:var(--p2) !important}
  /* the valuation glass now floats over living footage — deepen it a touch for legibility */
  body[data-view="office"] .pn-vibe-row>.pv-herochartbox{background:linear-gradient(160deg,rgba(12,15,22,.6),rgba(6,8,13,.72)) !important;
    backdrop-filter:blur(26px) saturate(150%) !important;-webkit-backdrop-filter:blur(26px) saturate(150%) !important;border:1px solid rgba(255,255,255,.13) !important}
  body[data-view="office"] .pn-vibe-row>.pv-herochartbox .mvc-num,
  body[data-view="office"] .pn-vibe-row>.pv-herochartbox .mvc-kpi-lbl{color:#fff !important}
  /* LIGHT THEMES — hero text + valuation glass flip to dark ink on light glass (were pinned white) */
  body.mvc-light[data-view="office"] .pn-vibe-row>.perf-hero .mvc-h1,
  body.mvc-light[data-view="office"] .pn-vibe-row>.perf-hero .perf-hero-h1{color:var(--mvc-fg) !important;text-shadow:0 2px 14px rgba(255,255,255,.5) !important}
  body.mvc-light[data-view="office"] .pn-vibe-row>.perf-hero .perf-hero-sub{color:var(--mvc-fg-70) !important}
  body.mvc-light[data-view="office"] .pn-vibe-row>.pv-herochartbox{
    background:linear-gradient(160deg,var(--glass-a),var(--glass-b)) !important;border:1px solid var(--mvc-brd) !important}
  body.mvc-light[data-view="office"] .pn-vibe-row>.pv-herochartbox .mvc-num,
  body.mvc-light[data-view="office"] .pn-vibe-row>.pv-herochartbox .mvc-kpi-lbl{color:var(--mvc-fg) !important}
  /* per-theme grade — the film is coloured to the active theme's world (all 4 live themes covered) */
  [data-palette="neon-onyx"]{--vibe-grade:contrast(1.16) saturate(1.18) brightness(.96) hue-rotate(-4deg)}
  [data-palette="midnight"]{--vibe-grade:contrast(1.18) saturate(1.1) brightness(.94) hue-rotate(-14deg)}
  /* light themes: the film was brightened to near-white (1.28–1.34) AND buried under a 50–90% white
     scrim → "washed-out barely-there blur" (CEO). Pull the brightness back so tonal depth returns and
     the footage reads as a FILM, with the reveal-side scrim opened above. Headline safe-area stays scrimmed. */
  [data-palette="platinum"]{--vibe-grade:contrast(1.1) saturate(1.06) brightness(1.06) sepia(.1)}
  [data-palette="porcelain"]{--vibe-grade:contrast(1.08) saturate(1.0) brightness(1.08) hue-rotate(4deg)}
  @media (prefers-reduced-motion:reduce){ body[data-view="office"] .pn-vibe-media{transform:none} }
  body[data-view="office"] .pv-herochartbox{padding:18px 22px;display:flex;flex-direction:column;min-height:210px}
  body[data-view="office"] .pv-heroval{font-size:34px;margin-top:4px}
  body[data-view="office"] .pv-herochart-wrap{flex:1;display:flex;margin-top:10px;min-height:110px}
  body[data-view="office"] .pv-herochart{width:100%;height:100%;overflow:visible}
  /* FIX 3 · the single-datum state: the chart bay becomes a seed dot on a waiting baseline, with the
     denominator stated in words underneath. No invented curve, no dead void. */
  body[data-view="office"] .pv-herochartbox:has(.pv-herochart--seed) .pv-herochart-wrap{
    flex-direction:column; justify-content:center; gap:12px; min-height:112px}
  body[data-view="office"] .pv-herochart--seed{width:100%;height:auto;flex:none;max-height:64px}
  body[data-view="office"] .pv-seed-note{margin:0;font-family:var(--mono);font-size:9.5px;line-height:1.6;
    letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.72);max-width:44ch}
  body[data-view="office"] .pv-seed-note b{color:#fff;font-weight:800}
  body.mvc-light[data-view="office"] .pv-seed-note{color:var(--mvc-fg-70)}
  body.mvc-light[data-view="office"] .pv-seed-note b{color:var(--mvc-fg)}
  body[data-view="office"] .pv-pill{font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.08em;
    padding:5px 10px;border-radius:999px;border:1px solid var(--rust-border);white-space:nowrap}
  body[data-view="office"] .pv-pill.good{color:var(--mvc-green);border-color:color-mix(in srgb,var(--mvc-green) 40%,transparent)}
  body[data-view="office"] .pv-pill.bad{color:var(--mvc-red);border-color:color-mix(in srgb,var(--mvc-red) 40%,transparent)}
  /* .fl used --rust-ink-55 (a light-theme token) → invisible on the two dark bases. AA floor in both. */
  body[data-view="office"] .pv-pill.fl{color:rgba(255,255,255,.72)}
  body.mvc-light[data-view="office"] .pv-pill.fl{color:var(--mvc-fg-70)}
  /* ── VALUATION MODULE = a LIVE instrument (defect 3) — the right hero card duplicated the KPI-row
     VALUATION tile ("doing nothing"). It now has a job: a pulsing LIVE marker + the number counts up on
     entrance + a distinct THIS-WEEK momentum line (the week-over-week swing the flat KPI tile doesn't own). */
  body[data-view="office"] .pv-hero-lbl{display:inline-flex;align-items:center;gap:7px}
  body[data-view="office"] .pv-live{width:7px;height:7px;border-radius:50%;background:var(--p2);flex:none;
    box-shadow:0 0 8px color-mix(in srgb,var(--p2) 90%,transparent)}
  @media (prefers-reduced-motion:no-preference){ body[data-view="office"] .pv-live{animation:pvLive 1.9s ease-in-out infinite} }
  @keyframes pvLive{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.34;transform:scale(.8)}}
  body[data-view="office"] .pv-hero-delta{display:flex;align-items:baseline;gap:10px;margin-top:9px}
  body[data-view="office"] .pv-hero-delta .pv-hd-k{font-family:var(--mono);font-size:9px;font-weight:700;
    text-transform:uppercase;letter-spacing:.18em;color:#fff;opacity:.72;white-space:nowrap}
  body[data-view="office"] .pv-hero-delta .pv-hd-v{font-family:var(--mono);font-size:12px;font-weight:800;letter-spacing:.04em}
  body[data-view="office"] .pv-hero-delta.good .pv-hd-v{color:var(--mvc-green)}
  body[data-view="office"] .pv-hero-delta.bad .pv-hd-v{color:var(--mvc-red)}
  body[data-view="office"] .pv-hero-delta.fl .pv-hd-v{color:rgba(255,255,255,.82)}
  body.mvc-light[data-view="office"] .pv-hero-delta .pv-hd-k{color:var(--mvc-fg)}
  body.mvc-light[data-view="office"] .pv-hero-delta.fl .pv-hd-v{color:var(--mvc-fg-70)}
  /* KPI vizzes */
  body[data-view="office"] .pv-kpi-ring{align-items:center}
  body[data-view="office"] .pv-ringwrap{position:relative;width:96px;height:96px;margin:6px auto 0}
  body[data-view="office"] .pv-ringwrap svg{width:96px;height:96px}
  body[data-view="office"] .pv-ringc{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1}
  body[data-view="office"] .pv-ringc b{font-size:22px;color:var(--rust-ink)}
  body[data-view="office"] .pv-ringc span{font-family:var(--mono);font-size:8px;letter-spacing:.12em;color:var(--rust-ink-55);text-transform:uppercase;margin-top:2px}
  body[data-view="office"] .pv-segs{display:flex;gap:3px;margin-top:10px}
  body[data-view="office"] .pv-segs i{flex:1;height:8px;border-radius:2px}
  /* panels + insight row */
  body[data-view="office"] .pv-cols{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;margin-top:12px}
  @media(max-width:1100px){ body[data-view="office"] .pv-cols{grid-template-columns:1fr} }
  body[data-view="office"] .pv-panel{padding:18px 22px}
  body[data-view="office"] .pv-ph{margin:0;font-size:clamp(20px,2vw,26px);color:var(--rust-ink)}
  body[data-view="office"] .pv-radarrow{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;align-items:center;margin-top:10px}
  @media(max-width:640px){ body[data-view="office"] .pv-radarrow{grid-template-columns:1fr} }
  body[data-view="office"] .pv-radarwrap svg{width:100%;max-width:320px;height:auto;overflow:visible;display:block;margin:0 auto}
  body[data-view="office"] .pv-radlbl{font-family:var(--mono);font-size:9px;letter-spacing:.08em;fill:var(--rust-ink-55)}
  body[data-view="office"] .pv-radkey{display:flex;flex-direction:column;gap:7px;margin-top:10px}
  body[data-view="office"] .pv-radkey span{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--rust-ink-55)}
  body[data-view="office"] .pv-radkey i{width:16px;height:10px;border-radius:2px;flex:none}
  body[data-view="office"] .pv-k1{background:rgba(var(--glow),.3);border:1.5px solid var(--p)}
  body[data-view="office"] .pv-k2{border:1.5px dashed var(--rust-ink-40)}
  /* donut */
  body[data-view="office"] .pv-donutrow{display:grid;grid-template-columns:130px 1fr;gap:18px;align-items:center;margin-top:12px}
  @media(max-width:520px){ body[data-view="office"] .pv-donutrow{grid-template-columns:1fr;justify-items:center} }
  body[data-view="office"] .pv-donutwrap{position:relative;width:130px;height:130px}
  body[data-view="office"] .pv-donutwrap svg{width:130px;height:130px}
  body[data-view="office"] .pv-donutc{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1.05}
  body[data-view="office"] .pv-donutc b{font-size:24px;color:var(--rust-ink)}
  body[data-view="office"] .pv-donutc span{font-family:var(--mono);font-size:8px;letter-spacing:.14em;color:var(--rust-ink-55);text-transform:uppercase;margin-top:2px}
  body[data-view="office"] .pv-legend{display:flex;flex-direction:column;gap:9px;min-width:0;width:100%}
  body[data-view="office"] .pv-leg{display:flex;align-items:center;gap:10px;min-width:0}
  body[data-view="office"] .pv-legsw{width:11px;height:11px;border-radius:3px;flex:none}
  body[data-view="office"] .pv-legnm{flex:1;min-width:0;font:700 12.5px var(--mvc-f);color:var(--rust-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body[data-view="office"] .pv-legnm small{display:block;font-weight:600;font-size:10.5px;color:var(--rust-ink-55)}
  body[data-view="office"] .pv-legv{font-size:16px;color:var(--rust-ink)}
  /* pipeline bars */
  body[data-view="office"] .pv-barchart{display:flex;flex-direction:column;gap:12px;margin-top:12px}
  body[data-view="office"] .pv-pbar{cursor:pointer;border-radius:10px;padding:4px 6px;margin:-4px -6px;transition:background .14s}
  body[data-view="office"] .pv-pbar:hover{background:var(--rust-ink-08)}
  body[data-view="office"] .pv-pbar.dim{opacity:.72}
  body[data-view="office"] .pv-pbar-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;min-width:0}
  body[data-view="office"] .pv-pbar-nm{font:700 12.5px var(--mvc-f);color:var(--rust-ink);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body[data-view="office"] .pv-pbar-nm small{font-weight:600;color:var(--rust-ink-55);margin-left:6px;text-transform:none}
  body[data-view="office"] .pv-pbar-v{font-size:16px}
  body[data-view="office"] .pv-pbar-track{height:9px;border-radius:999px;background:var(--rust-ink-08);margin-top:6px;overflow:hidden}
  body[data-view="office"] .pv-pbar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--p2),var(--p))}
  body[data-view="office"] .pv-barfoot{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--rust-border);padding-top:10px;margin-top:2px}
  body[data-view="office"] .pv-barfoot .mvc-num{font-size:19px}
  /* light-theme contrast polish (Vero dataviz gate): deeper good-green + darker decorative bars
     (WCAG 1.4.11 ≥3:1 on porcelain), radar/donut micro-labels up a step, and the squad card
     clears the sticky topbar so the radar's apex label never tucks under it. */
  body.mvc-light[data-view="office"]{--pv-good:#1f7a3a;--pv-colbar:rgba(28,25,23,.30)}
  body.mvc-light[data-view="office"] .pv-radlbl{fill:var(--rust-ink-70)}
  body.mvc-light[data-view="office"] .pv-radkey span,
  body.mvc-light[data-view="office"] .pv-donutc span,
  body.mvc-light[data-view="office"] .pv-ringc span{color:var(--rust-ink-70)}
  body[data-view="office"] .pv-panel{scroll-margin-top:84px}
  body[data-view="office"] .pv-radarwrap{padding-top:8px}
  /* CEO-68 — THE LIT OBJECT. A notice deep-links to the thing it named; this is how the thing says
     "here I am" when you arrive. Ring + lift only, no colour change, so it reads in every theme and
     never fights the card's own status colour. Clears itself after 2.6s — a permanent marker would
     become furniture. Honours reduced-motion by dropping the pulse, keeping the ring. */
  .pn-focused{position:relative;z-index:3;
    outline:3px solid var(--accent);outline-offset:3px;border-radius:inherit;
    animation:pnFocusPulse 1.1s ease-out 2}
  @keyframes pnFocusPulse{
    0%  {box-shadow:0 0 0 0 rgba(var(--glow),.50)}
    70% {box-shadow:0 0 0 14px rgba(var(--glow),0)}
    100%{box-shadow:0 0 0 0 rgba(var(--glow),0)}}
  @media (prefers-reduced-motion:reduce){ .pn-focused{animation:none} }

  /* global leaderboard rows */
  body[data-view="office"] .pn-board{display:flex;flex-direction:column;gap:6px;margin-top:10px}
  body[data-view="office"] .pn-brow{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;
    padding:9px 12px;border-radius:10px;border:1px solid var(--rust-border);background:var(--rust-card)}
  body[data-view="office"] .pn-brow.me{border-color:var(--p);box-shadow:0 0 0 1px rgba(var(--glow),.35)}
  body[data-view="office"] .pn-brank{font-family:var(--mono);font-size:11px;font-weight:800;color:var(--rust-ink-55)}
  body[data-view="office"] .pn-brow.me .pn-brank{color:var(--p)}
  body[data-view="office"] .pn-bnm{min-width:0;font:700 13px var(--mvc-f);color:var(--rust-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body[data-view="office"] .pn-bnm small{display:block;font-weight:600;font-size:10.5px;color:var(--rust-ink-55)}
  body[data-view="office"] .pn-bval{font-family:var(--mvc-disp);font-size:16px;color:var(--rust-ink);font-variant-numeric:tabular-nums}

  /* CEO-81 · WHERE YOU STAND — sits ABOVE the board, because a board without your position on it is
     a list, not a competition. Three cells: value, global, home country. Same flat-card family as
     .pn-brow so it reads as part of the same object, with the numbers stepped up to display size —
     the standing is the headline and the twenty rows beneath it are the evidence. */
  body[data-view="office"] .pn-stand{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0 12px}
  body[data-view="office"] .ps-cell{display:flex;flex-direction:column;gap:2px;min-width:0;
    padding:11px 12px;border-radius:10px;border:1px solid var(--rust-border);background:var(--rust-card)}
  body[data-view="office"] .ps-cell--val{border-color:var(--p);box-shadow:0 0 0 1px rgba(var(--glow),.30)}
  body[data-view="office"] .ps-k{font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.1em;
    text-transform:uppercase;color:var(--rust-ink-55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body[data-view="office"] .ps-n{font-family:var(--mvc-disp);font-size:clamp(20px,4.4vw,28px);line-height:1.05;
    color:var(--rust-ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
  body[data-view="office"] .ps-cell--val .ps-n{color:var(--p)}
  body[data-view="office"] .ps-n--out{color:var(--rust-ink-55)}
  body[data-view="office"] .ps-of{font-size:11px;line-height:1.35;color:var(--rust-ink-55)}
  body[data-view="office"] .ps-note{margin:0 0 10px;font-size:11px;line-height:1.45;color:var(--rust-ink-55)}
  body[data-view="office"] .pn-stand--off{grid-template-columns:1fr}
  /* phone: three cells at 390 gives ~110px each — the value cell takes the full width and the two
     ranks share the row beneath, so no number is ever set smaller to fit. */
  @media (max-width:560px){
    body[data-view="office"] .pn-stand{grid-template-columns:repeat(2,minmax(0,1fr))}
    body[data-view="office"] .ps-cell--val{grid-column:1 / -1}
  }

  /* every other screen's stat-tile/card family — same flat-card treatment, no markup changes */
  body[data-view="office"] .hb-cell{
    background:var(--rust-card) !important;border:1px solid var(--rust-border) !important;border-radius:10px !important;
    backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
    box-shadow:0 1px 2px rgba(28,25,23,.04) !important;
  }
  body[data-view="office"] .client-card,body[data-view="office"] .nbo-card,body[data-view="office"] .tt-card,
  body[data-view="office"] .rfi-row,body[data-view="office"] .camp-card,body[data-view="office"] .dossier-card{
    background:var(--rust-card) !important;border:1px solid var(--rust-border) !important;border-radius:12px !important;
    backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
    box-shadow:0 1px 2px rgba(28,25,23,.05),0 6px 18px rgba(28,25,23,.05) !important;
  }
  /* critic/CEO: on platinum the client-card body re-themes to light glass (--rust-card) but the
     .cc-body figures kept their dark-theme near-white ink → 1.05:1 ghost text. Re-pin body text to
     theme ink on light only; the banner (.cc-name) stays white on its always-dark image scrim. */
  body.mvc-light[data-view="office"] .cc-rev-v{color:var(--rust-ink) !important}
  body.mvc-light[data-view="office"] .cc-rev-k,body.mvc-light[data-view="office"] .cc-loy-k,
  body.mvc-light[data-view="office"] .cc-stats{color:var(--rust-ink-70) !important}
  body.mvc-light[data-view="office"] .cc-stat b{color:var(--rust-ink) !important}
  body.mvc-light[data-view="office"] .cc-stat b.bad{color:#c0392b !important}
  body.mvc-light[data-view="office"] .cc-alert{color:#8a2a1c !important}

  /* ══ TYPE CATCH-ALL, DEFUSED (2026-07-31 — root cause of "typography is screwed again") ══
     This rule used to read `body[data-view="office"] h1,h2,h3 { font-family:var(--mvc-disp)!important;
     text-transform:none!important; letter-spacing:-.01em!important; color:var(--rust-ink)!important }`
     with the comment "one font throughout — Montserrat, per the theme's own spec". That theme is long
     retired; the rule was not. It is a BROAD ELEMENT CATCH-ALL — the exact defect class that shipped the
     beige-button bug the CEO caught twice (DECISIONS_LOG 2026-07-31 late-night-4, [CEO-05]) — and it
     stamped the display face, sentence case and -.01em tracking over EVERY heading in the office view,
     including components that author their own type: the ACCOUNT FILE's mono section heads (.pnac-h,
     SST motif 8 tactical micro-copy) came out as sentence-case Space Grotesk, and .pnac-name lost its
     Inter 900. Symptom-patching it with per-component !important (as .pnac-name's colour did) is why
     the regression kept coming back on new surfaces.
     LAW (restated for TYPE): components own their type. A heading that carries a CLASS declares its own
     role and is never repainted from here. Only genuinely unstyled headings inherit the view default. */
  body[data-view="office"] h1:not([class]),
  body[data-view="office"] h2:not([class]),
  body[data-view="office"] h3:not([class]){
    font-family:var(--mvc-disp);font-weight:700;font-style:normal;
    text-transform:none;letter-spacing:-.01em;color:var(--rust-ink);
  }
  body[data-view="office"] .masthead .mh-name{
    font-family:var(--mvc-disp) !important;font-weight:700 !important;font-style:normal !important;
    text-transform:none !important;letter-spacing:-.01em !important;color:var(--rust-ink) !important;text-shadow:none !important;
  }
  /* same law for body copy + controls: `p` and `button` are element catch-alls, so they only apply to
     elements that have NOT declared a type role of their own. A classed control (.s2-cli-open's mono
     tape, .pn-btn, .tb-btn) keeps the face its component authored. Named classes below are explicit
     opt-ins and keep their !important. */
  body[data-view="office"] p:not([class]),body[data-view="office"] button:not([class]){font-family:var(--mvc-f)}
  body[data-view="office"] .muted,body[data-view="office"] .small,
  body[data-view="office"] .hb-k,body[data-view="office"] .hb-v,
  body[data-view="office"] .hb-sub,body[data-view="office"] .doss-name,body[data-view="office"] .tt-name,
  body[data-view="office"] .cc-name,body[data-view="office"] .hub-tab{font-family:var(--mvc-f) !important}
  body[data-view="office"] .muted,body[data-view="office"] .small.muted,body[data-view="office"] p.small,
  body[data-view="office"] .hb-k,body[data-view="office"] .hb-sub{color:var(--rust-ink-55) !important}
  body[data-view="office"] .card,body[data-view="office"] .hb-v,body[data-view="office"] .doss-name,
  body[data-view="office"] .tt-name{color:var(--rust-ink) !important}
  /* LIGHT-THEME FIX (Vero 2026-07-12): the .dossier-card text (active-client names + subtext on the
     dashboard) was pinned to the dark-office --d-text (#f8fafc white) by the more-specific
     `.dossier-card .doss-name` rules (0,3,1) — invisible white-on-white on PLATINUM/PORCELAIN, and
     the --d-text-2 subtext (#94a3b8) was sub-AA. Re-point .dossier-card text at the theme ink on
     LIGHT themes only (dark themes keep the correct white). Specificity (0,4,1) wins; placed late. */
  body.mvc-light[data-view="office"] .dossier-card,
  body.mvc-light[data-view="office"] .dossier-card .doss-name{color:var(--mvc-fg) !important}
  body.mvc-light[data-view="office"] .dossier-card .muted,
  body.mvc-light[data-view="office"] .dossier-card .small,
  body.mvc-light[data-view="office"] .dossier-card .doss-role{color:var(--mvc-fg-55) !important}
  /* Same dark-office leak on the OTHER light-glass content panels — the NBO/RFI stream brand names
     (.rfi-title were INVISIBLE white-on-white), the agency-vitals meter numbers + labels, and the
     Live-work subtitle. These leaves are pinned to --ink/--d-text/--d-text-2 (white) with !important
     (lines ~2892/3440), so a token re-pin can't reach them — override the color DIRECTLY on light
     themes with higher specificity. Scoped to the leaves so the always-dark hero is untouched. */
  body.mvc-light[data-view="office"] .rfi-row .rfi-title{color:var(--mvc-fg) !important}
  body.mvc-light[data-view="office"] .rfi-row .rfi-sub{color:var(--mvc-fg-55) !important}
  body.mvc-light[data-view="office"] .rfi-row .rfi-no{color:var(--mvc-fg) !important}
  body.mvc-light[data-view="office"] .hud-meter .hm-top b{color:var(--mvc-fg) !important}
  body.mvc-light[data-view="office"] .hud-meter .hm-top>span{color:var(--mvc-fg-55) !important}
  body.mvc-light[data-view="office"] .perf-iso-sub{color:var(--mvc-fg-55) !important}
  /* .cc-name stays white — it sits on the always-dark banner image scrim (never theme-inked) */

  /* buttons — solid rounded-rect (Primary=black, Secondary=rust), not glass pills */
  body[data-view="office"] button.primary,body[data-view="office"] .primary,body[data-view="office"] .linkbtn.right,
  body[data-view="office"] .cc-dinner,body[data-view="office"] .sf-hire:not(.off){
    border-radius:8px !important;background:var(--rust-black) !important;color:#fff !important;
    border:0 !important;box-shadow:none !important;font-weight:600 !important;
  }
  body[data-view="office"] button.primary:hover,body[data-view="office"] .primary:hover,
  body[data-view="office"] .linkbtn.right:hover{
    background:var(--rust) !important;transform:none !important;
  }
  body[data-view="office"] button:not(.primary):not(.hub-tab):not(.hub-advance):not(.sf-hire):not(.pn-btn):not(.tb-btn):not(.nbo-cta):not(.sea-promo-cta):not([class*="pnos-"]):not(.pnc-yes):not(.pnc-no):not(.wearing-chip):not(.lg-btn):not(.lg-dot):not(.mac-tb-dot):not(.s2-day):not(.s2-htab):not(.fr-day):not(.fl-ev):not(.fl-act):not(.fl-party):not(.sqd-train):not(.sqd-letgo):not(.evt-choice):not(.nm-go){
    background:var(--rust-card) !important;color:var(--rust-ink) !important;
    border:1px solid var(--rust-border) !important;border-radius:8px !important;
  }
  body[data-view="office"] button:not(.primary):not(.hub-tab):not(.pn-btn):not(.tb-btn):not(.nbo-cta):not(.sea-promo-cta):not([class*="pnos-"]):not(.pnc-yes):not(.pnc-no):not(.wearing-chip):not(.lg-btn):not(.lg-dot):not(.mac-tb-dot):not(.s2-day):not(.s2-htab):not(.fr-day):not(.fl-ev):not(.fl-act):not(.fl-party):not(.sqd-train):not(.sqd-letgo):not(.evt-choice):not(.nm-go):hover{background:var(--rust-ink-08) !important}

  /* isometric folder stack (Performance) — real "in production" briefs, mvc-os.css .mvc-stack/.mvc-fold.
     .mvc-stack keeps its own display:grid (that's how the 3 folds overlap) — just center the block. */
  /* ── CEO 2026-07-31 (defect 4): "these '3d' folders need more design love, they look sloppy." ──
     What was wrong, measured: the fan offsets were arbitrary (-72,-46 / -4,-2 / 64,42 — no rhythm),
     mvc-os's `::after` painted a --mvc-bg gradient wipe across 62% of every card which ATE the
     titles ("Out-…", "Direc…"), and the back cards were `grayscale(1) brightness(.72)` — dead grey
     slabs. They were rounded rectangles at an angle, not folders.
     Rebuilt as REAL folder anatomy on an even fan: a coloured TAB (::before, carrying the --edge
     accent), a front flap that holds the type, and a PAPER STACK peeking out of the top-right
     (::after + its offset sheets). Even 80×48 steps, even 6% scale steps, one shared iso shear.
     Scoped to the office Performance view — the shared mvc-os kit is untouched. */
  body[data-view="office"] .perf-iso .mvc-stack{
    margin:30px auto 0;height:262px;
    --fold-paper:#ece2cd;--fold-paper-2:#f8f3e7;--fold-sheet:#fdfbf4;--fold-sheet-2:#efe8d8;
    --fold-edge:rgba(58,44,26,.26);--fold-edge-hi:rgba(58,44,26,.4);--fold-drop:rgba(52,38,20,.3);
  }
  body:not(.mvc-light)[data-view="office"] .perf-iso .mvc-stack{
    --fold-paper:#161d28;--fold-paper-2:#212b3a;--fold-sheet:#2b3648;--fold-sheet-2:#1d2532;
    --fold-edge:rgba(226,236,251,.18);--fold-edge-hi:rgba(226,236,251,.34);--fold-drop:rgba(0,0,0,.6);
  }
  body[data-view="office"] .perf-iso .mvc-fold{
    width:288px !important;height:152px !important;padding:18px 20px 16px !important;
    display:flex !important;flex-direction:column !important;justify-content:space-between !important;
    overflow:visible !important;border-radius:2px 3px 2px 2px !important;
    background:linear-gradient(166deg,var(--fold-paper-2),var(--fold-paper)) !important;
    border:1px solid var(--fold-edge) !important;backdrop-filter:none !important;
    box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 10px 14px 26px -14px var(--fold-drop) !important;
    transition:transform .5s cubic-bezier(.2,.7,.3,1),filter .5s,box-shadow .3s !important;
  }
  /* THE TAB — the folder's index tab, carrying the one accent edge (--edge = --p) */
  body[data-view="office"] .perf-iso .mvc-fold::before{
    content:"" !important;position:absolute !important;left:-1px !important;right:auto !important;
    top:-14px !important;width:104px !important;height:15px !important;z-index:1 !important;
    background:linear-gradient(180deg,var(--fold-paper-2),var(--fold-paper)) !important;
    border:1px solid var(--fold-edge) !important;border-bottom:0 !important;
    border-top:3px solid var(--edge,var(--p)) !important;
    border-radius:2px 9px 0 0 !important;
  }
  /* THE PAPER STACK — sheets peeking out of the top-right of the flap, two leaves, hairlined */
  body[data-view="office"] .perf-iso .mvc-fold::after{
    content:"" !important;position:absolute !important;top:-6px !important;right:12px !important;
    left:118px !important;height:12px !important;width:auto !important;z-index:-1 !important;
    background:var(--fold-sheet) !important;border:1px solid var(--fold-edge) !important;
    border-radius:1px 2px 0 0 !important;pointer-events:none !important;
    box-shadow:5px -5px 0 -1px var(--fold-sheet-2), 5px -5px 0 0 var(--fold-edge) !important;
  }
  /* THE FAN — even 116px × 44px steps, even 3% depth steps, one shared iso shear (no jitter) */
  body[data-view="office"] .perf-iso .mvc-fold.f1{transform:skewY(-8deg) translate(-116px,-44px) scale(.94) !important;
    filter:saturate(.6) brightness(.97) !important;z-index:1 !important}
  body[data-view="office"] .perf-iso .mvc-fold.f2{transform:skewY(-8deg) translate(0,0) scale(.97) !important;
    filter:saturate(.8) brightness(.99) !important;z-index:2 !important}
  body[data-view="office"] .perf-iso .mvc-fold.f3{transform:skewY(-8deg) translate(116px,44px) scale(1) !important;
    filter:none !important;z-index:3 !important}
  body:not(.mvc-light)[data-view="office"] .perf-iso .mvc-fold.f1{filter:saturate(.6) brightness(.8) !important}
  body:not(.mvc-light)[data-view="office"] .perf-iso .mvc-fold.f2{filter:saturate(.8) brightness(.9) !important}
  /* A fanned stack only exposes ~116px of each card behind — so the back folders carry their CLIENT
     TAB LABEL there and nothing else. Title + status are held at 0 opacity until the stack opens,
     which is why no two labels can collide (the CEO's clipped "Out-… / Direc…" mess). */
  body[data-view="office"] .perf-iso .mvc-fold.f1 .fold-title,
  body[data-view="office"] .perf-iso .mvc-fold.f1 .fold-foot,
  body[data-view="office"] .perf-iso .mvc-fold.f2 .fold-title,
  body[data-view="office"] .perf-iso .mvc-fold.f2 .fold-foot{opacity:0;transition:opacity .34s ease}
  /* HOVER — the fan OPENS by an even step per card and the back folders' type fades up */
  body[data-view="office"] .perf-iso .mvc-stack:hover .mvc-fold.f1{transform:skewY(-8deg) translate(-116px,-96px) scale(.94) !important;filter:none !important}
  body[data-view="office"] .perf-iso .mvc-stack:hover .mvc-fold.f2{transform:skewY(-8deg) translate(0,-50px) scale(.97) !important;filter:none !important}
  body[data-view="office"] .perf-iso .mvc-stack:hover .mvc-fold.f3{transform:skewY(-8deg) translate(116px,44px) scale(1) !important}
  body[data-view="office"] .perf-iso .mvc-stack:hover .mvc-fold .fold-title,
  body[data-view="office"] .perf-iso .mvc-stack:hover .mvc-fold .fold-foot{opacity:1}
  body[data-view="office"] .perf-iso .mvc-fold:hover{z-index:9 !important;
    box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 14px 20px 34px -14px var(--fold-drop) !important}
  /* .mvc-fold is a real <button> (Jon: "should be clickable/openable") — undo the UA/reset
     button defaults the generic office button-reset rule doesn't cover, keep the skewed layout */
  body[data-view="office"] .mvc-fold-btn{
    appearance:none !important;-webkit-appearance:none !important;text-align:left !important;
    font:inherit !important;cursor:pointer !important;outline-offset:4px;
  }
  /* TYPE — three fixed roles, each on one line, ellipsis before anything can collide */
  body[data-view="office"] .perf-iso .mvc-fold>*{position:relative;z-index:2;min-width:0;max-width:100%;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body[data-view="office"] .mvc-fold .mvc-kpi-lbl{display:block;font-family:var(--mono),monospace;
    font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--rust-ink-55)}
  body[data-view="office"] .mvc-fold .fold-title{font-family:var(--mvc-disp);font-size:23px;line-height:1.05;
    margin:auto 0 0;color:var(--rust-ink)}
  body[data-view="office"] .mvc-fold .fold-foot{font-family:var(--mono),monospace;font-size:10px;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;color:var(--rust-ink-55);margin-top:9px}
  body:not(.mvc-light)[data-view="office"] .mvc-fold .mvc-kpi-lbl,
  body:not(.mvc-light)[data-view="office"] .mvc-fold .fold-foot{color:rgba(226,236,251,.62)}
  body:not(.mvc-light)[data-view="office"] .mvc-fold .fold-title{color:#eaf1fb}
  @media (prefers-reduced-motion:reduce){
    body[data-view="office"] .perf-iso .mvc-fold{transition:none !important}
  }

  /* ══════════════ SYSTEM_V2 · P5 RETROFIT — the office runs on the ONE system now ══════════════
     Applies pn-system to the CEO's screen (was fractured per-view overrides). Placed after the
     office block so its !important fixes win. Preserves every id/handler — skin only. */
  /* (5) BRANDMARK — the wordmark is the BAKED two-tone artwork (white PITCH + orange NOIR), NOT a
     token-filled mask. So the live cosmetic/theme --accent can NEVER recolour it (Jon, non-negotiable:
     white+orange ALWAYS — this was the green-in-pitch-view bug: the old mask flooded with --p2/--accent,
     which pitch view set to teal). Dark shells use the white-PITCH artwork; light themes swap to the
     black-PITCH artwork so PITCH stays legible on a light bg. Aspect ratio 5.3 == 138×26, no layout shift. */
  .brandmark-mark{display:block;height:26px;width:138px;
    background:url('/assets/brand/pitchnoir-twotone.png') left center/contain no-repeat}
  /* The HUD topbar is DARK in almost every state (all dark themes; and on the light PLATINUM/PORCELAIN
     themes it STAYS dark on the default HUD, meet-team, store, pass and pitch views) — so white-PITCH
     twotone is the legible default. The topbar only turns LIGHT on the OFFICE dashboard and the
     WEEK-SUMMARY, and ONLY on a light theme — those are the sole surfaces that need the black-PITCH
     artwork so PITCH doesn't vanish on the pale bar. (Keying off theme alone painted black PITCH onto
     the dark meet-team/onboarding bar on light themes → invisible; this keys off the actual bar.) */
  body.mvc-light[data-view="office"] .brandmark-mark,
  body.mvc-light[data-view="weeksummary"] .brandmark-mark,
  body.mvc-light[data-view="pitch"] .brandmark-mark{background-image:url('/assets/brand/pitchnoir-color.png')}
  /* (1) topbar utilities stay PILLS on the office view (legacy .topbar button rules force 2px rects) */
  body[data-view="office"] .topbar .tb-btn{border-radius:999px !important}
  /* (1) the hero CTA is now a .pn-btn — let it go full-width on mobile like the old pill did */
  @media(max-width:760px){ body[data-view="office"] .perf-hero-cta{width:100%}
    body[data-view="office"] .perf-hero-cta .pn-btn{width:100%} }
  /* (3) KPI instruments on the .pn-card--stat family — give each viz room under the number */
  body[data-view="office"] .mvc-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:stretch}
  @media(max-width:900px){ body[data-view="office"] .mvc-kpi-row{grid-template-columns:repeat(2,1fr)} }
  @media(max-width:460px){ body[data-view="office"] .mvc-kpi-row{grid-template-columns:1fr} }
  body[data-view="office"] .pv-kpi{gap:8px;min-width:0}
  body[data-view="office"] .pv-kpi .pv-kpi-foot{font-family:var(--mono);font-size:11px;font-weight:600;min-height:1.2em}
  body[data-view="office"] .pv-kpi .mvc-spk{width:100%;height:38px;margin-top:2px}
  body[data-view="office"] .pv-kpi .pv-segs{margin-top:2px}
  body[data-view="office"] .pv-kpi.pv-kpi-ring{align-items:center;text-align:center}
  body[data-view="office"] .pv-kpi.pv-kpi-ring .pn-stat-top{width:100%}
  /* (6) week-1 valuation empty state — a designed baseline, not a 300px void (white ink over the film scrim) */
  .pv-hero-empty{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;min-height:110px;gap:0}
  .pv-hero-emptyspk{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
  .pv-hero-emptytxt{position:relative;z-index:1;text-shadow:0 1px 10px rgba(3,8,16,.85),0 0 2px rgba(3,8,16,.9)}   /* critic: scrim so the sparkline marker can't collide with 'The line starts here.' */
  .pv-hero-emptylead{font-family:var(--mvc-disp);font-size:26px;line-height:1;color:#fff;margin:8px 0 4px;letter-spacing:-.01em}
  .pv-hero-emptysub{font-family:var(--mvc-f);font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.78);margin:0;max-width:40ch}
  /* (9) Live-work folder stack — was rust-token'd → illegible on ONYX. Reads theme-neutral tokens now. */
  body[data-view="office"] .mvc-fold-btn{background:linear-gradient(160deg,var(--glass-a),var(--glass-b)) !important;border:1px solid var(--mvc-brd) !important}
  body[data-view="office"] .mvc-fold .mvc-kpi-lbl{color:var(--mvc-fg-55) !important}
  body[data-view="office"] .mvc-fold .fold-title{color:var(--mvc-fg) !important}
  body[data-view="office"] .mvc-fold .fold-foot{color:var(--mvc-fg-55) !important}

  /* ── mVC OS PIVOT — THE VAULT. Same complaint as the office shell had: solid opaque panels
     hide the shader entirely, so "glass" reads as a flat black box. Keeps the boutique gold/
     espresso identity (sharp vitrine corners, champagne hairlines) — just gives it real depth:
     translucent + blurred so the shader glows through, plus the Heming headline font. ── */
  body[data-view="store"] .card.vault{
    background:linear-gradient(165deg,rgba(20,22,28,.6),rgba(8,9,12,.7)) !important;
    backdrop-filter:blur(30px) saturate(150%) !important;-webkit-backdrop-filter:blur(30px) saturate(150%) !important;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),0 30px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06) !important;
  }
  body[data-view="store"] .vault-case,body[data-view="store"] .vault .store-group{
    background:rgba(255,255,255,.025) !important;
    backdrop-filter:blur(18px) saturate(130%) !important;-webkit-backdrop-filter:blur(18px) saturate(130%) !important;
  }
  body[data-view="store"] .vault .store-item,body[data-view="store"] .vault .store-pack{
    background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015)) !important;
    backdrop-filter:blur(16px) saturate(130%) !important;-webkit-backdrop-filter:blur(16px) saturate(130%) !important;
  }
  body[data-view="store"] .vault-mast h2{font-family:var(--mvc-disp) !important;font-weight:400 !important}

  /* ════════════════════════════════════════════════════════════════════════════
     SYSTEM_V2 P2 — THE VAULT STOREFRONT (screenStore/collectionsHTML/group emit .pn-*).
     "Sell what they can see": the committed store art now fronts every product; dual
     currency reads at a glance; the fantasy leads. Composes from pn-system.css tokens. */
  body[data-view="store"] .card.vault,body[data-view="pass"] .card.vault{padding:clamp(16px,3vw,30px) !important}
  body[data-view="store"] .pn-store-topbar,body[data-view="pass"] .pn-store-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
  /* dual currency — earned vs bought are visibly DIFFERENT objects (shared by Vault + Season Pass) */
  body[data-view="store"] .pn-store-cur,body[data-view="pass"] .pn-store-cur{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:11px;
    font-family:var(--pn-sans);font-weight:800;font-size:15px;font-variant-numeric:tabular-nums;line-height:1}
  body[data-view="store"] .pn-store-cur .sym,body[data-view="pass"] .pn-store-cur .sym{font-size:14px}
  /* QA sweep 2 (defect #7): 3px read as "✦120EARNED" — one smashed token. Real gap + top-align. */
  body[data-view="store"] .pn-store-cur em,body[data-view="pass"] .pn-store-cur em{font-family:var(--pn-mono);font-style:normal;font-size:8.5px;font-weight:500;letter-spacing:.16em;opacity:.72;margin-left:7px}
  body[data-view="store"] .cur-cred,body[data-view="pass"] .cur-cred{background:var(--track);border:1px solid var(--mvc-brd-hi);color:var(--mvc-fg)}
  body[data-view="store"] .cur-cred .sym,body[data-view="pass"] .cur-cred .sym{color:var(--pn-cred)}   /* Cred ✦ — fixed gold */
  body[data-view="store"] .cur-coin,body[data-view="pass"] .cur-coin{background:linear-gradient(180deg,color-mix(in srgb,var(--pn-coin-face) 80%,#fff),var(--pn-coin-face));color:var(--pn-coin-ink);box-shadow:0 6px 16px -7px rgba(249,115,22,.6)}   /* WahCoin ◈ — fixed coin, never worn accent */
  body[data-view="store"] .pn-store-mast,body[data-view="pass"] .pn-store-mast{margin:14px 0 6px}
  /* ── A9 (CEO 2026-07-18): the Vault reads "shit and illegible" while wearing a bright collection.
     Root cause: masthead copy sat RAW on the worn ambient plate. Fix = (1) solid heavy brand display
     headline (was reading ghost-thin), (2) a left-anchored scrim so copy ALWAYS clears AA under any
     worn look, fading to transparent so the ambient art still shows, (3) a legibility floor on the
     section eyebrows/mono labels that float on the plate. Extends UX_RULES §1 (copy never sits raw
     on the ambient plate — it sits on a scrim). ── */
  /* NOTE: the Vault surface is pinned DARK in every theme (cinematic seam), so the scrim is a FIXED
     dark — keying it to --mvc-bg would go light-on-light-text in the light theme. */
  body[data-view="store"] .pn-store-mast .pn-display{font-weight:800 !important;letter-spacing:-.02em;
    color:#f6f9ff;text-shadow:0 2px 24px rgba(6,9,14,.85)}
  body[data-view="store"] .pn-store-topbar,body[data-view="store"] .pn-store-mast{position:relative;isolation:isolate}
  body[data-view="store"] .pn-store-topbar::before,body[data-view="store"] .pn-store-mast::before{
    content:"";position:absolute;inset:-8px -26px -14px -26px;z-index:-1;border-radius:4px;
    background:linear-gradient(100deg,rgba(6,9,14,.82) 0%,rgba(6,9,14,.5) 56%,transparent 88%)}
  body[data-view="store"] .pn-store-mast .pn-body{max-width:64ch;text-shadow:0 1px 10px rgba(6,9,14,.7)}
  /* section eyebrows sit on the plate between cards — give them a legibility floor in every worn look */
  body[data-view="store"] .pn-eyebrow{text-shadow:0 1px 8px rgba(6,9,14,.75)}
  body[data-view="store"] .pn-store-mast .pn-display,body[data-view="pass"] .pn-store-mast .pn-display{font-size:clamp(40px,7vw,84px)}
  body[data-view="store"] .pn-store-sec,body[data-view="pass"] .pn-store-sec{margin-top:clamp(28px,4vw,44px)}
  /* compact cosmetic tiles (accent/avatar/title/banner) */
  body[data-view="store"] .pn-store-tile{padding:14px;display:flex;flex-direction:column;gap:11px;text-align:center;border-radius:14px}
  body[data-view="store"] .pn-store-tile .pn-name{color:var(--mvc-fg)}
  body[data-view="store"] .pn-store-tile.is-eq{border-color:color-mix(in srgb,var(--mvc-green) 50%,var(--mvc-brd))}
  body[data-view="store"] .pn-store-swatch{height:62px;border-radius:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 0 0 1px rgba(0,0,0,.15)}
  body[data-view="store"] .pn-store-emoji{height:62px;display:flex;align-items:center;justify-content:center;font-size:32px;background:rgba(var(--glow),.06);border-radius:10px}
  body[data-view="store"] .pn-store-plaque{min-height:46px;display:flex;align-items:center;justify-content:center;padding:8px 10px;
    font-family:var(--pn-disp);font-size:15px;color:var(--mvc-fg);background:rgba(var(--glow),.06);border-radius:8px;border-left:1px solid var(--lg-hair-neutral,rgba(128,132,140,.2))}
  body[data-view="store"] .pn-store-sw{width:9px;height:9px;border-radius:50%;display:inline-block;box-shadow:0 0 5px rgba(0,0,0,.5)}
  body[data-view="store"] .pn-store-hero .pn-hero-media img{transition:transform .6s var(--pn-ease)}
  body[data-view="store"] .pn-store-hero:hover .pn-hero-media img{transform:scale(1.03)}
  /* power-up card */
  body[data-view="store"] .pn-pu{padding:16px;display:flex;flex-direction:column;gap:11px}
  body[data-view="store"] .pn-pu-top{display:flex;align-items:center;gap:10px}
  body[data-view="store"] .pn-pu-top .pn-name{flex:1;color:var(--mvc-fg);font-size:14px}
  body[data-view="store"] .pn-pu-have{color:var(--p2)}
  body[data-view="store"] .pn-pu-kind{font-size:9px;letter-spacing:.14em;align-self:flex-start;flex-shrink:0}
  body[data-view="store"] .pn-pu-desc{margin:0;flex:1}
  body[data-view="store"] .pn-pu.is-owned{border-color:color-mix(in srgb,var(--mvc-green) 45%,var(--mvc-brd))}
  /* ── CEO-92c · THE PHONE TYPE FLOOR, APPLIED TO THE STORE ────────────────────────────────────
     The office and the two arcade routes were swept to an 11px floor; the VAULT never was. 137 text
     nodes on this route rendered between 8px and 10.5px — on the one surface the CEO says he
     actually looks at, on the phone he is testing from. 8px is not small type, it is unreadable.
     Raised to 11px at the END of the store block so it wins on source order against every rule
     above without needing a specificity arms race, and scoped to [data-view="store"] so no other
     screen moves. Tracking is trimmed where it was set for 9px type — the same letter-spacing at
     11px would push these chips wider than their containers. */
  @media (max-width:900px){
    body[data-view="store"] .pn-pack-tier,
    body[data-view="store"] .pn-pack-rate,
    body[data-view="store"] .bp-sub,
    body[data-view="store"] .pn-bureau-safe,
    body[data-view="store"] .vv-badge,
    body[data-view="store"] .pn-chip,
    body[data-view="store"] .pn-afford,
    body[data-view="store"] .pn-afford-go,
    body[data-view="store"] .pn-artlabel,
    body[data-view="store"] .pn-world-era,
    body[data-view="store"] .pn-where,
    body[data-view="store"] .pn-pu-kind,
    body[data-view="store"] .pn-pu-where,
    body[data-view="store"] .pn-spec-none,
    body[data-view="store"] .pn-spec-cap,
    body[data-view="store"] .pn-nb-chip,
    body[data-view="store"] .pn-small em,
    body[data-view="store"] .pn-card small,
    body[data-view="store"] .pn-card em,
    body[data-view="store"] .pn-card b,
    body[data-view="store"] small,
    body[data-view="store"] em{ font-size:11px !important; }
    body[data-view="store"] .pn-pack-tier,
    body[data-view="store"] .pn-pu-kind,
    body[data-view="store"] .pn-chip{ letter-spacing:.08em !important; }
    /* every "Top up →" in the store was a 34px target — the one button a player presses the moment
       they cannot afford something, i.e. the most-pressed control on the route, under the tap floor. */
    body[data-view="store"] .pn-afford-go{ min-height:44px !important; padding-inline:14px !important; }
  }

  /* coin pack — BUREAU DE CHANGE product cards, value-framed by bonus tier */
  body[data-view="store"] .pn-pack{position:relative;padding:17px 14px 15px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
  body[data-view="store"] .pn-pack .pn-ic{width:44px;height:44px}
  body[data-view="store"] .pn-pack .pn-ic svg{width:22px;height:22px}
  body[data-view="store"] .pn-pack-tier{font:600 9.5px var(--pn-mono);letter-spacing:.15em;text-transform:uppercase;color:var(--mvc-fg-55)}
  body[data-view="store"] .pn-pack-tier.is-hot{color:var(--p2)}
  body[data-view="store"] .pn-pack-coins{font-family:var(--pn-disp);font-size:26px;line-height:1;color:var(--mvc-fg);font-variant-numeric:tabular-nums}
  body[data-view="store"] .pn-pack-coins .cur{font-size:.6em;color:var(--p2)}
  body[data-view="store"] .pn-pack-rate{font:500 10px var(--pn-mono);letter-spacing:.03em;color:var(--mvc-fg-55);font-variant-numeric:tabular-nums}
  body[data-view="store"] .pn-pack .pn-btn{margin-top:2px}
  body[data-view="store"] .pn-pack.is-key{border-top:2px solid var(--p)}
  body[data-view="store"] .pn-pack.is-key::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(var(--glow),.26)}
  /* theme-pack hero cards — each previews its OWN palette (scoped data-palette) */
  body[data-view="store"] .pn-pack-grid{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
  /* TRUE THEMES grid — a clean 2-up at desktop (no half-empty void), stacking on tablet/mobile */
  body[data-view="store"] .pn-pack-grid.pn-theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  @media (max-width:1000px){
    body[data-view="store"] .pn-pack-grid.pn-theme-grid{grid-template-columns:1fr}
  }
  body[data-view="store"] .pn-pack-hero{min-height:264px}
  body[data-view="store"] .pn-pack-hero .pn-display{overflow-wrap:anywhere}
  body[data-view="store"] .pn-pack-hero .pn-hero-media img{transition:transform .6s var(--pn-ease)}
  body[data-view="store"] .pn-pack-hero:hover .pn-hero-media img{transform:scale(1.04)}

  /* ════════ THE FLEX LINE — titles / banners / avatars as typographic SPECIMENS ════════
     Each card shows the cosmetic AS the nameplate it becomes, so the player buys the flex,
     not a bare text row. Composes pn-system tokens; the champagne hairline = an accent rule. */
  body[data-view="store"] .pn-specimen-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(228px,1fr))}
  body[data-view="store"] .pn-specimen-grid--wide{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
  body[data-view="store"] .pn-specimen{display:flex;flex-direction:column;padding:0;overflow:hidden;transition:transform var(--pn-base) var(--pn-ease),border-color var(--pn-base)}
  body[data-view="store"] .pn-specimen:hover{transform:translateY(-3px);border-color:var(--mvc-brd-hi)}
  body[data-view="store"] .pn-spec-stage{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;gap:9px;
    padding:22px 18px 20px;min-height:120px;
    background:radial-gradient(130% 90% at 50% -10%,rgba(var(--glow),.11),transparent 65%),linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.32));
    border-bottom:1px solid var(--mvc-brd)}
  body[data-view="store"] .pn-spec-stage::after{content:"";position:absolute;left:18px;right:18px;top:15px;height:1px;
    background:linear-gradient(90deg,transparent,rgba(var(--glow),.55),transparent)}   /* champagne hairline */
  body[data-view="store"] .pn-spec-foot{padding:12px 14px 14px;display:flex;align-items:center;gap:10px}
  body[data-view="store"] .pn-spec-foot .pn-btn{flex:1}
  body[data-view="store"] .pn-spec-cap{font:600 10.5px var(--pn-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mvc-fg-55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42%}
  body[data-view="store"] .pn-specimen.is-eq{border-color:color-mix(in srgb,var(--mvc-green) 50%,var(--mvc-brd))}
  /* TITLE — the prefix set as the plate it becomes */
  body[data-view="store"] .pn-spec-title{font-family:var(--pn-disp);font-size:clamp(26px,3.8vw,34px);line-height:.9;letter-spacing:-.01em;color:var(--p2);text-wrap:balance}
  body[data-view="store"] .pn-spec-agency{font:700 12.5px var(--pn-sans);letter-spacing:.01em;color:var(--mvc-fg-70)}
  body[data-view="store"] .pn-spec-none{font:500 9.5px var(--pn-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mvc-fg-55)}
  /* AVATAR — founder flair beside the name */
  body[data-view="store"] .pn-spec-flair{display:flex;align-items:center;gap:13px}
  body[data-view="store"] .pn-spec-emoji{font-size:38px;line-height:1;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}
  body[data-view="store"] .pn-spec-emoji.is-empty{display:inline-flex}
  body[data-view="store"] .pn-spec-emoji.is-empty svg{width:30px;height:30px;stroke:var(--mvc-fg-40);fill:none;stroke-width:1.5}
  /* BANNER — the actual flex chip on the nameplate subline */
  body[data-view="store"] .pn-nb-line{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font:700 13px var(--pn-sans);color:var(--mvc-fg)}
  body[data-view="store"] .pn-nb-line em{color:var(--mvc-fg-40);font-style:normal}
  body[data-view="store"] .pn-nb-chip{display:inline-flex;align-items:center;gap:5px;font:600 12px var(--pn-sans);
    padding:5px 11px;border-radius:999px;background:rgba(var(--glow),.13);border:1px solid var(--mvc-brd-hi);color:var(--mvc-fg)}
  body[data-view="store"] .pn-nb-chip.is-empty{background:transparent;border-style:dashed;color:var(--mvc-fg-40);font:500 10px var(--pn-mono);letter-spacing:.16em;text-transform:uppercase}

  /* ════════ SMALL-ASSET CLARITY — one crisp "what & where" line per tile (CEO 2026-07-11) ════════ */
  body[data-view="store"] .pn-where{font:500 10px/1.42 var(--pn-mono);letter-spacing:.02em;color:var(--mvc-fg-55);display:block}
  body[data-view="store"] .pn-store-tile .pn-where{margin-top:-3px}
  body[data-view="store"] .pn-specimen .pn-where{padding:9px 14px 0;margin-top:auto}
  body[data-view="store"] .pn-card--product .pn-body .pn-where{margin:-2px 0 2px}
  body[data-view="store"] .pn-pu-where{font:500 9.5px/1.4 var(--pn-mono);letter-spacing:.03em;color:var(--mvc-fg-55);display:flex;align-items:flex-start;gap:7px;margin-top:auto;padding-top:9px}
  body[data-view="store"] .pn-pu-where::before{content:"";width:5px;height:5px;flex:none;margin-top:3px;border-radius:1px;background:var(--p2);transform:rotate(45deg)}

  /* ════════ BUREAU — the ONLY real-money step reads as a safe one-click Stripe handoff ════════ */
  body[data-view="store"] .pn-pack .pn-btn{height:auto;padding:9px 10px}
  body[data-view="store"] .pn-pack-buy{display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.05}
  body[data-view="store"] .pn-pack-buy .bp-main{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:12.5px}
  body[data-view="store"] .pn-pack-buy .bp-sub{font:600 8px var(--pn-mono);letter-spacing:.16em;opacity:.85;text-transform:uppercase}
  body[data-view="store"] .pn-pack-buy .pn-lock{width:11px;height:11px;flex:none;stroke:currentColor;fill:none;stroke-width:2}
  body[data-view="store"] .pn-bureau-safe{display:flex;align-items:center;justify-content:center;gap:9px;margin:16px auto 0;max-width:62ch;text-align:center;
    font:500 10.5px/1.5 var(--pn-mono);letter-spacing:.03em;color:var(--mvc-fg-55)}
  body[data-view="store"] .pn-bureau-safe svg{width:15px;height:15px;flex:none;stroke:var(--mvc-green);fill:none;stroke-width:1.7}

  /* ════════════════════════════════════════════════════════════════════════════
     VAULT REBUILD — CEO 2026-07-25, order 1: "this is sloppy design and poor typography".
     Three fixes, all scoped to the Vault/detail surface:
       (a) THE VAULT VOICE. Every display line on this surface now speaks Inter 900 ITALIC —
           the house voice. The theme display face (a stretched grotesque under PORCELAIN /
           PLATINUM, which is what THE VAULT and RESKIN THE ENTIRE AGENCY were set in) is
           retired here. Vendored locally: a blocked font CDN must never silently fall back
           to a system grotesque on the surface that sells the art direction.
       (b) THE WALLET PLINTH. The wallet row was raw copy over the ghost VAULT wordmark —
           overprinted and illegible. It is now its own object: a dark plinth, hairline,
           its own elevation, with the ghost bleed masked out behind it.
       (c) EYEBROW RHYTHM. Eyebrows get air above AND below (never crammed against the
           headline or the controls), one rule for every section head.
     ════════════════════════════════════════════════════════════════════════════ */
  /* DISPLAY VOICE = Space Grotesk (CEO 2026-07-25, option C). Upright-only, tops at 700 — with
     font-synthesis:none (mvc-os.css) the browser renders what the file draws instead of shearing
     a fake italic, which is the sloppy-type failure we just retired Heming for. */
  @font-face{font-family:'PN Vault Voice';font-style:normal;font-weight:600 700;font-display:swap;
    src:url('/assets/fonts/spacegrotesk-700.woff2') format('woff2')}
  body[data-view="store"],.pn-detail{--pn-vault-voice:'PN Vault Voice','Inter',system-ui,sans-serif}
  body[data-view="store"] .pn-store-mast .pn-display,
  body[data-view="store"] .pn-store-sec .pn-h2,
  body[data-view="store"] .pn-store-hero .pn-display,
  body[data-view="store"] .pn-world-name,
  .pn-detail .pn-detail-hero h2{
    font-family:var(--pn-vault-voice) !important;font-style:italic !important;font-weight:900 !important;
    letter-spacing:-.03em;word-spacing:.1em;text-transform:uppercase}
  /* the mast scrim keeps its job (copy never sits raw on the ambient plate) but loses its hard
     rectangle edges — it fades out top and bottom instead of stamping a band across the art. */
  body[data-view="store"] .pn-store-mast::before{
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 74%,transparent);
    mask-image:linear-gradient(180deg,transparent,#000 16%,#000 74%,transparent)}
  /* the masthead is the one loud moment: bigger, tighter, optically de-indented for the italic */
  body[data-view="store"] .pn-store-mast .pn-display{line-height:.82;margin-left:-.035em}
  body[data-view="store"] .pn-store-sec .pn-h2{font-size:clamp(21px,2.5vw,30px);line-height:.98}
  body[data-view="store"] .pn-store-hero .pn-display{line-height:.86}

  /* (b) THE WALLET PLINTH ── its own surface, never the ghost wordmark bleeding through */
  body[data-view="store"] .pn-store-topbar{
    display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;
    margin:0 0 clamp(20px,2.6vw,30px) 0;padding:12px 15px 13px;border-radius:15px;
    background:linear-gradient(180deg,rgba(11,14,20,.95),rgba(6,8,12,.985));
    border:1px solid rgba(255,255,255,.135);
    box-shadow:0 22px 44px -30px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.07)}
  body[data-view="store"] .pn-store-topbar::before{content:none}   /* the old smear scrim is retired */
  body[data-view="store"] .pn-wallet-id{display:flex;flex-direction:column;gap:9px;min-width:0}
  body[data-view="store"] .pn-wallet-id .pn-eyebrow{margin:0;color:rgba(255,255,255,.66);text-shadow:none}
  body[data-view="store"] .pn-wallet-cur{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
  body[data-view="store"] .pn-store-topbar .pn-row{gap:8px;flex-wrap:wrap;justify-content:flex-end}
  /* mask the ghost VAULT bleed strictly behind the plinth's own footprint */
  body[data-view="store"] .pn-store-topbar{position:relative;isolation:isolate;z-index:2}

  /* (c) EYEBROW RHYTHM — air above and below, one rule for every section head */
  body[data-view="store"] .pn-store-sec .pn-head{display:flex;flex-direction:column;gap:11px;
    margin:0 0 clamp(16px,2vw,22px)}
  body[data-view="store"] .pn-store-sec .pn-head .pn-eyebrow{margin:0;padding-top:2px}
  body[data-view="store"] .pn-store-mast .pn-display{margin-bottom:14px}

  /* ════════ PACK / COLLECTION DETAIL — "try it on before you buy" (the sell) ════════ */
  .pn-detail{position:fixed;inset:0;z-index:115;display:flex;align-items:flex-end;justify-content:center}
  @media(min-width:721px){ .pn-detail{align-items:center;padding:24px} }
  .pn-detail-scrim{position:absolute;inset:0;background:rgba(3,4,7,.74);backdrop-filter:blur(6px);animation:pndScrim .3s ease-out both}
  @keyframes pndScrim{from{opacity:0}to{opacity:1}}
  .pn-detail-sheet{position:relative;width:min(660px,100%);max-height:92vh;display:flex;flex-direction:column;
    /* INK-SWEEP 2026-07-25: this sheet is a PINNED-DARK surface — re-pin the whole ink/surface token
       context to the dark set ON the sheet (same technique as .bigmodal-card) so its legibility never
       depends on which view/theme the body happens to be in. Light themes previously relied on the
       store view's F1 re-pin reaching it; standalone it washed dark-on-dark. --p/--p2 untouched. */
    --mvc-fg:#eef4fc;--mvc-fg-70:rgba(238,244,252,.74);--mvc-fg-55:rgba(238,244,252,.62);--mvc-fg-40:rgba(238,244,252,.46);
    --mvc-brd:rgba(255,255,255,.12);--mvc-brd-hi:rgba(255,255,255,.22);--track:rgba(255,255,255,.08);
    --rust-ink:#eef4fc;--rust-ink-70:rgba(238,244,252,.74);--rust-ink-55:rgba(238,244,252,.62);
    background:linear-gradient(180deg,#13151d,#0a0c11);border:1px solid var(--mvc-brd-hi);border-bottom:0;
    border-radius:22px 22px 0 0;overflow:hidden;box-shadow:0 -34px 90px rgba(0,0,0,.66);transform:translateY(0);animation:pndUp .44s cubic-bezier(.16,1,.3,1) both}
  @media(min-width:721px){ .pn-detail-sheet{border-radius:22px;border-bottom:1px solid var(--mvc-brd-hi);box-shadow:0 44px 110px rgba(0,0,0,.72)} }
  @keyframes pndUp{from{transform:translateY(26px)}to{transform:translateY(0)}}
  .pn-detail-x{position:absolute;top:12px;right:12px;z-index:4;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    border:1px solid var(--mvc-brd-hi);background:rgba(0,0,0,.45);color:#fff;font-size:15px;cursor:pointer;backdrop-filter:blur(4px);transition:background .15s}
  .pn-detail-x:hover{background:rgba(0,0,0,.66)}
  .pn-detail-hero{position:relative;padding:26px 24px 20px;min-height:186px;display:flex;flex-direction:column;justify-content:flex-end;flex:none}
  /* INK-SWEEP 2026-07-25: the `>*` text-lift below also lifted the IMG to z2, burying the ::after
     scrim (z-auto) UNDER the photo — bright art (LA CROISETTE gold) washed straight over the white
     hero type. Photo pinned to z0, scrim to z1, text stays z2: art < scrim < ink, always. */
  .pn-detail-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
  /* A5 (CEO 2026-07-18): a firmer scrim under the title/eyebrow so bright art (Miami Deco pastels)
     never washes over the type — art stays visible up top, the title band is guaranteed dark. */
  .pn-detail-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(158deg,rgba(6,7,11,.34) 0%,rgba(6,7,11,.5) 34%,rgba(6,7,11,.86) 74%,rgba(6,7,11,.96) 100%)}
  .pn-detail-hero>*{position:relative;z-index:2}
  .pn-detail-hero .pn-eyebrow{color:#fff;opacity:.92}
  .pn-detail-hero h2{font-family:var(--pn-disp);font-size:clamp(32px,7.2vw,48px);line-height:.9;margin:7px 0 9px;color:#fff;text-wrap:balance}
  .pn-detail-hero p{margin:0;max-width:46ch;color:rgba(255,255,255,.86);font:400 13.5px/1.5 var(--pn-sans)}
  .pn-detail-body{padding:20px 24px 14px;overflow-y:auto;flex:1;scrollbar-width:thin}
  .pn-detail-body>.pn-eyebrow{color:var(--p2);display:block;margin-bottom:6px}
  /* NOIR pack modal — silver chrome, no rust: the whole sheet reads black-and-white, brass only on the CTA */
  .pn-detail--noir .pn-detail-hero--pack h2::after{background:#c2ccd7}
  .pn-detail--noir .pn-detail-body>.pn-eyebrow{color:#c3ccd7}
  .pn-detail--noir .pn-spec-wrap.is-after .pn-spec-cap{color:#c3ccd7}
  .pn-detail--noir .pn-comp-where b{color:#eef2f7!important}
  .pn-comp{display:flex;gap:15px;align-items:flex-start;padding:15px 0;border-top:1px solid var(--mvc-brd)}
  .pn-comp:first-of-type{border-top:0}
  .pn-comp-pv{flex:none}
  .pn-comp-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
  .pn-comp-lbl{font:700 11px var(--pn-mono);letter-spacing:.13em;text-transform:uppercase;color:#fff}
  .pn-comp-name{font:700 14px var(--pn-sans);color:var(--p2)}
  .pn-comp-where{font:400 12.5px/1.46 var(--pn-sans);color:var(--mvc-fg-70)}
  .pn-comp-sw{display:block;width:56px;height:56px;border-radius:13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 0 0 1px rgba(0,0,0,.34)}
  .pn-comp-plate{width:118px;height:56px;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    background:linear-gradient(160deg,#1a1d26,#0d0f15);border:1px solid var(--mvc-brd-hi);padding:5px 8px;overflow:hidden}
  .pn-comp-plate img{width:118px;height:56px;object-fit:cover;border-radius:11px}
  .pn-comp-plate .cp-title{font-family:var(--pn-disp);font-size:19px;line-height:.9;color:var(--p2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .pn-comp-plate .cp-emoji{font-size:30px;line-height:1}
  .pn-comp-plate .cp-tag{font:700 7.5px var(--pn-mono);letter-spacing:.1em;color:var(--mvc-fg-55)}
  /* ═══ NOW ⇄ WITH COMPARE (CEO 2026-07-25 order 3) ═══ one full-width plate the buyer can
     actually read, with a segmented toggle. Replaces the two 70px thumbnails + arrow. */
  .pn-cmp{display:flex;flex-direction:column;gap:10px}
  .pn-cmp-stage{position:relative;display:grid;border-radius:13px;overflow:hidden;
    border:1px solid var(--mvc-brd-hi);background:#0a0c11;box-shadow:0 18px 40px -22px rgba(0,0,0,.8)}
  .pn-cmp-cell{grid-area:1/1;min-width:0;opacity:0;transition:opacity .34s var(--pn-ease,cubic-bezier(.16,1,.3,1))}
  .pn-cmp[data-on="now"] .is-now,.pn-cmp[data-on="with"] .is-with{opacity:1}
  .pn-cmp-cell img{display:block;width:100%;height:clamp(150px,26vw,208px);object-fit:cover}
  /* at full width the specimen is a hero demo, not a thumbnail — size its type to be READ */
  .pn-cmp-cell .pn-spec{border:0;border-radius:0;box-shadow:none;padding:16px 18px}
  .pn-cmp-cell .pn-spec-mark{font-size:16px}
  .pn-cmp-cell .pn-spec-coins{font-size:10px}
  .pn-cmp-cell .pn-spec-tab{font-size:9.5px;padding:6px 0}
  .pn-cmp-cell .pn-spec-lbl{font-size:8px}
  .pn-cmp-cell .pn-spec-val{font-size:26px}
  .pn-cmp-cell .pn-spec-subs .pn-spec-val{font-size:18px}
  .pn-cmp-cell .pn-spec-up{font-size:8.5px}
  .pn-cmp-cell .pn-spec-meter .m-top{font-size:8px}
  .pn-cmp-cell .pn-spec-track{height:8px}
  .pn-cmp-cell .pn-spec-bars{height:34px}
  .pn-cmp-cell .pn-spec-cta{font-size:10px;padding:9px 6px}
  .pn-cmp-cell .pn-spec-enc{font-size:8px}
  .pn-cmp-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:11px;
    background:rgba(255,255,255,.06);border:1px solid var(--mvc-brd)}
  .pn-cmp-seg button{border:0;cursor:pointer;border-radius:8px;padding:9px 8px;background:transparent;
    font:700 10px var(--pn-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .18s,color .18s}
  .pn-cmp-seg button:hover{color:#fff;background:rgba(255,255,255,.08)}
  /* the ACTIVE segment is white, never brand orange — orange stays reserved for the CTA
     (orange discipline: one accent, one job). */
  .pn-cmp-seg button.is-on{background:rgba(255,255,255,.94);color:#0a0c11}
  .pn-cmp-seg button:focus-visible{outline:2px solid #fff;outline-offset:2px}
  @media(prefers-reduced-motion:reduce){ .pn-cmp-cell{transition:none} }
  .pn-detail-foot{flex:none;display:flex;align-items:center;gap:14px;padding:15px 24px 18px;border-top:1px solid var(--mvc-brd-hi);
    background:linear-gradient(180deg,rgba(10,12,17,0),rgba(10,12,17,.55))}
  .pn-detail-price{display:flex;flex-direction:column;line-height:1.02}
  .pn-detail-price .dp-num{font-family:var(--pn-disp);font-size:30px;color:#fff;font-variant-numeric:tabular-nums}
  .pn-detail-price .dp-num .cur{font-size:.56em;color:var(--pn-cred)}   /* brand-fixed currency ink */
  .pn-detail-price .dp-note{font:600 9px var(--pn-mono);letter-spacing:.11em;color:var(--mvc-fg-55);text-transform:uppercase;margin-top:2px}
  .pn-detail-foot .pn-btn{margin-left:auto;flex:none}
  @media(max-width:560px){ .pn-comp{flex-direction:column;gap:11px} .pn-ba{width:100%} .pn-ba-cell img{height:88px} .pn-comp-plate,.pn-comp-plate img{width:132px} }
  @media(max-width:420px){ .pn-detail-foot{flex-wrap:wrap} .pn-detail-foot .pn-btn{width:100%;margin-left:0} }
  @media(prefers-reduced-motion:reduce){ .pn-detail-scrim,.pn-detail-sheet{animation:none !important} }

  /* ════════════════════════════════════════════════════════════════════════════
     VAULT REBUILD — CEO 2026-07-25, orders 2 + 3 (the pack/collection detail window).
       order 2 "vault packs look poor and have poor legibility":
         · the hero scrim is now BOTTOM-UP (it was a diagonal wash that left LA CROISETTE's
           white title sitting on a sunlit terrace — unreadable). Ink is explicitly white.
         · body rows re-pinned AA on the dark sheet — labels #fff, copy .86 white, no
           inherited --mvc-fg-* (which goes dark-on-dark in the light theme).
         · the ghost/secondary CTA gets a real border + white ink. Quiet ≠ invisible.
         · the sheet now sits ABOVE the OS dock (z 9100 > dock 300) so the price + CTA row
           can never be occluded (UX_RULES §2).
       order 3: the pressable in-context row + the peel state that reveals the live game.
     ════════════════════════════════════════════════════════════════════════════ */
  .pn-detail{z-index:9100}
  /* the floating theme puck sat ON the sheet's ghost CTA at 390 (UX_RULES §6: a floating control
     never overlaps content). It stands down for as long as a detail sheet is open — nothing else
     about the picker changes. */
  body:has(#pn-detail) .mvc-theme-toggle{opacity:0;pointer-events:none;transition:opacity .2s}
  .pn-detail-hero{min-height:232px;padding-bottom:22px}
  /* ROOT CAUSE of "poor legibility": `.pn-detail-hero>*{z-index:2}` also hit the <img>, so the
     photo painted ON TOP of the scrim — the hero had no scrim at all on a collection. The art
     goes to the back, the scrim sits between art and copy. */
  .pn-detail-hero>img{z-index:0}
  .pn-detail-hero::after{z-index:1}
  /* the plate the copy sits on is near-solid; the art keeps the top third and fades in */
  .pn-detail-hero::after{background:linear-gradient(0deg,
    rgba(5,6,10,.985) 0%,rgba(5,6,10,.965) 46%,rgba(5,6,10,.88) 66%,rgba(5,6,10,.5) 84%,rgba(5,6,10,.16) 100%)}
  .pn-detail-hero .pn-eyebrow{color:#fff;opacity:1;text-shadow:0 1px 10px rgba(0,0,0,.85)}
  .pn-detail-hero h2{color:#fff;text-shadow:0 6px 28px rgba(0,0,0,.72)}
  .pn-detail-hero p{color:rgba(255,255,255,.9);text-shadow:0 1px 10px rgba(0,0,0,.7)}
  /* rows: AA on the fixed-dark sheet in BOTH themes */
  /* eyebrow rhythm inside the sheet: air above and below, never crammed onto the next label */
  .pn-detail-body{padding-top:22px}
  .pn-detail-body>.pn-eyebrow{color:#ffb17a;margin:0 0 16px}
  .pn-detail .pn-spec-section > .pn-comp-lbl{margin-bottom:13px}
  .pn-detail .pn-spec-section{padding:18px 0}
  .pn-detail .pn-comp-lbl{color:#fff}
  .pn-detail .pn-comp-where{color:rgba(255,255,255,.86)}
  .pn-detail .pn-comp-name{color:#ffb17a}
  /* --p2 follows the THEME, which can land a mid-tone on this always-dark sheet — pin the
     emphasis ink instead (NOIR's silver override still wins on specificity). */
  .pn-detail .pn-comp-where b{color:#ffb17a}
  .pn-detail .pn-spec-section{border-top-color:rgba(255,255,255,.12)}
  .pn-detail .pn-comp{border-top-color:rgba(255,255,255,.12)}
  .pn-detail .pn-keep-demo{color:rgba(255,255,255,.86)}
  .pn-detail .pn-keep-name{color:#fff}
  .pn-detail-foot .dp-note{color:rgba(255,255,255,.72);white-space:nowrap}
  /* the body scrolls — fade its bottom edge so a half-cut row reads as "more below", not as a bug */
  .pn-detail-body{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 24px),transparent);
    mask-image:linear-gradient(180deg,#000 calc(100% - 24px),transparent)}
  /* the WITH state is edged, so the toggle's effect is legible even on a gentle grade */
  .pn-cmp[data-on="with"] .pn-cmp-stage{border-color:color-mix(in srgb,var(--p) 55%,rgba(255,255,255,.2))}
  .pn-detail-foot .pn-btn--secondary,.pn-detail-foot .pn-btn--ghost{
    color:#fff !important;background:rgba(255,255,255,.10) !important;
    border:1px solid rgba(255,255,255,.42) !important}
  .pn-detail-foot .pn-btn--secondary:hover,.pn-detail-foot .pn-btn--ghost:hover{
    background:rgba(255,255,255,.18) !important;border-color:#fff !important}
  .pn-detail-x{background:rgba(0,0,0,.62);border-color:rgba(255,255,255,.45);color:#fff}

  /* ── the pressable row: a real button, with an obvious "tap me" cue ── */
  .pn-comp--press{width:100%;text-align:left;background:transparent;border:0;border-top:1px solid rgba(255,255,255,.12);
    cursor:pointer;font:inherit;padding:15px 10px 15px 0;margin:0;border-radius:0 12px 12px 0;
    transition:background .18s,padding .18s}
  .pn-comp--press:hover,.pn-comp--press:focus-visible{background:rgba(255,255,255,.055);padding-left:10px}
  .pn-comp--press:focus-visible{outline:2px solid #fff;outline-offset:-2px}
  .pn-comp-cue{display:inline-flex;align-items:center;gap:7px;margin-top:6px;
    font:700 9.5px var(--pn-mono);letter-spacing:.15em;text-transform:uppercase;color:#ffb17a}
  .pn-comp-cue i{width:16px;height:16px;border-radius:50%;border:1.5px solid currentColor;position:relative;flex:none}
  .pn-comp-cue i::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;
    background:currentColor;transform:translate(-50%,-50%)}
  .pn-comp--press[aria-pressed="true"]{background:rgba(255,177,122,.12)}
  .pn-comp--press[aria-pressed="true"] .pn-comp-cue{color:#fff}
  .pn-comp--press[aria-pressed="true"] .pn-comp-cue i{animation:pnPvPulse 1.6s ease-in-out infinite}
  @keyframes pnPvPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}50%{box-shadow:0 0 0 5px rgba(255,255,255,0)}}
  /* NOIR keeps its monochrome quarantine — the new inks respect it (the CTA stays the only warm note) */
  .pn-detail--noir .pn-comp-name,.pn-detail--noir .pn-comp-cue{color:#c9d2dc}
  .pn-detail--noir .pn-comp--press[aria-pressed="true"]{background:rgba(201,210,220,.12)}
  .pn-comp-plate--era{background:radial-gradient(120% 120% at 50% -20%,var(--w-spine),#07080c 72%);border:0}
  .pn-comp-plate--era .cp-tag{color:rgba(255,255,255,.8)}

  /* ── PEEL: the sheet gets completely out of the way so the change lands on the LIVE game.
     The sheet slides out (animation:none defeats the pndUp keyframe's fill-mode, which otherwise
     pins the transform), the scrim clears, and the only chrome left is the exit bar — parked at
     the BOTTOM so it can never occlude the topbar, which is exactly where a TITLE try-on paints. */
  /* the (now invisible) scrim stays clickable: tap anywhere on the game to come back — the try-on
     can never be left stranded by navigating away underneath it. */
  .pn-detail.is-peeled .pn-detail-scrim{background:rgba(3,4,7,0);backdrop-filter:none;pointer-events:auto}
  .pn-detail.is-peeled .pn-detail-sheet{animation:none !important;transform:translateY(112%);opacity:0;
    transition:transform .44s cubic-bezier(.16,1,.3,1),opacity .3s linear;pointer-events:none}
  .pn-detail.is-peeled .pn-pv-bar{pointer-events:auto}
  .pn-detail-sheet{transition:transform .44s cubic-bezier(.16,1,.3,1),opacity .3s linear}
  @media(prefers-reduced-motion:reduce){ .pn-detail-sheet,.pn-detail.is-peeled .pn-detail-sheet{transition:none} }
  body.pn-vv-floor #app{opacity:0;pointer-events:none;filter:blur(3px);
    transition:opacity .42s cubic-bezier(.16,1,.3,1)}
  /* a title try-on lands in the real nameplate — ring it so the change is impossible to miss */
  #hud .stat-id.is-pv-live{border-radius:10px;box-shadow:0 0 0 2px rgba(249,115,22,.9),0 0 26px rgba(249,115,22,.35)}
  @media(prefers-reduced-motion:reduce){ body.pn-vv-floor #app{transition:none} }
  .pn-pv-bar{position:fixed;left:50%;bottom:calc(122px + env(safe-area-inset-bottom));transform:translateX(-50%);
    z-index:2;display:flex;align-items:center;gap:14px;padding:9px 10px 9px 15px;border-radius:14px;
    max-width:min(680px,calc(100vw - 24px));
    background:linear-gradient(180deg,rgba(12,15,21,.97),rgba(7,9,13,.99));
    border:1px solid rgba(255,255,255,.24);box-shadow:0 26px 60px -24px rgba(0,0,0,.9);
    animation:pnPvIn .3s cubic-bezier(.16,1,.3,1) both}
  @keyframes pnPvIn{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
  @media(prefers-reduced-motion:reduce){ .pn-pv-bar{animation:none} }
  .pn-pv-bar .pv-live{display:inline-flex;align-items:center;gap:7px;flex:none;
    font:700 9.5px var(--pn-mono);letter-spacing:.18em;color:#fff}
  .pn-pv-bar .pv-live i{width:7px;height:7px;border-radius:50%;background:var(--p,#f97316);
    box-shadow:0 0 0 0 rgba(249,115,22,.7);animation:pnPvPulse 1.6s ease-in-out infinite}
  .pn-pv-bar .pv-what{display:flex;flex-direction:column;gap:1px;min-width:0}
  .pn-pv-bar .pv-what b{font:800 12.5px var(--pn-sans);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pn-pv-bar .pv-what em{font:500 10px var(--pn-mono);letter-spacing:.08em;font-style:normal;color:rgba(255,255,255,.7);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pn-pv-bar .pv-esc{flex:none;font:700 8.5px var(--pn-mono);letter-spacing:.14em;color:rgba(255,255,255,.55);
    border:1px solid rgba(255,255,255,.24);border-radius:5px;padding:3px 6px}
  .pn-pv-bar .pv-what{flex:1 1 auto}
  .pn-pv-bar .pn-btn{flex:none}
  @media(max-width:560px){
    .pn-pv-bar{left:12px;right:12px;transform:none;max-width:none;gap:10px;padding:8px 8px 8px 12px}
    @keyframes pnPvIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
    .pn-pv-bar .pv-esc{display:none}
    .pn-pv-bar .pv-live{font-size:0;gap:0}   /* the word goes, the live dot stays */
    .pn-pv-bar .pv-what b{font-size:11.5px}
    .pn-pv-bar .pv-what em{font-size:9px}
    .pn-pv-bar .pn-btn{font-size:11px;padding:9px 12px} }
  /* the real topbar nameplate acknowledges a title try-on */
  #hud .stat-id.is-pv-flash{animation:pnPvFlash .7s ease-out both}
  @keyframes pnPvFlash{0%{box-shadow:0 0 0 0 rgba(249,115,22,.55)}100%{box-shadow:0 0 0 12px rgba(249,115,22,0)}}
  @media(prefers-reduced-motion:reduce){ #hud .stat-id.is-pv-flash{animation:none} }

  /* ══════════ PACK SPECIMEN (Vero P2, 2026-07-12) ══════════
     "The demo IS the product." A pack is a full-shell [data-palette] reskin, so instead of a
     hue-rotated stock photo + flat gradient swatches, we render a REAL miniature of the player's
     own dashboard — scoped to a palette so it paints itself. NOW (their live theme) vs AFTER
     (the pack) are BOTH live UI. Green/amber runway bars survive the reskin (semantics proof). */
  .pn-spec-section{padding:16px 0;border-top:1px solid var(--mvc-brd)}
  .pn-spec-section:first-of-type{border-top:0;padding-top:4px}
  .pn-spec-section > .pn-comp-lbl{display:block;margin-bottom:11px}
  .pn-spec-ba{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:stretch}
  .pn-spec-arrow{align-self:center;color:var(--p2);font-size:22px;font-weight:800;font-family:var(--pn-disp);line-height:1}
  .pn-spec-wrap{display:flex;flex-direction:column;min-width:0}
  .pn-spec-cap{display:block;font:700 8.5px var(--pn-mono);letter-spacing:.15em;text-transform:uppercase;margin-bottom:7px;color:var(--mvc-fg-55)}
  .pn-spec-wrap.is-after .pn-spec-cap{color:var(--p2)}
  .pn-spec{position:relative;overflow:hidden;border-radius:13px;padding:11px;flex:1;
    background:radial-gradient(120% 88% at 82% -12%,rgba(var(--glow),.2),transparent 56%),var(--mvc-bg);
    border:1px solid var(--mvc-brd);color:var(--mvc-fg);font-family:var(--pn-sans);
    box-shadow:0 14px 32px -14px rgba(0,0,0,.62)}
  .pn-spec-wrap.is-after .pn-spec{border-color:color-mix(in srgb,var(--p) 52%,var(--mvc-brd));
    box-shadow:0 18px 44px -14px rgba(var(--glow),.55)}
  .pn-spec-fx{position:absolute;inset:0;pointer-events:none;z-index:0;mix-blend-mode:screen}
  .pn-spec > *{position:relative;z-index:1}
  .pn-spec-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
  .pn-spec-mark{font-family:var(--pn-disp);font-size:13px;letter-spacing:.01em;line-height:1;color:var(--mvc-fg)}
  .pn-spec-mark b{color:var(--p)}
  .pn-spec-coins{font:700 8.5px var(--pn-mono);letter-spacing:.06em;color:var(--mvc-fg-70);border:1px solid var(--mvc-brd);border-radius:999px;padding:3px 8px}
  .pn-spec-coins b{color:var(--p2)}
  .pn-spec-tabs{display:flex;gap:2px;background:var(--track);border-radius:999px;padding:2px;margin-bottom:9px}
  .pn-spec-tab{flex:1;text-align:center;font:600 7.5px var(--pn-sans);letter-spacing:.02em;padding:4px 0;border-radius:999px;color:var(--mvc-fg-55)}
  .pn-spec-tab.on{background:var(--p);color:var(--pn-on-p)}
  .pn-spec-stats{display:grid;grid-template-columns:1.25fr 1fr;gap:6px;margin-bottom:8px}
  .pn-spec-stat{background:linear-gradient(160deg,var(--glass-a),var(--glass-b));border:1px solid var(--mvc-brd);border-radius:9px;padding:7px 8px}
  .pn-spec-stat.key{border-top:2px solid var(--p)}
  .pn-spec-lbl{font:700 6.5px var(--pn-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--mvc-fg-55);display:block}
  .pn-spec-val{font-family:var(--pn-disp);font-size:17px;line-height:1;color:var(--mvc-fg);font-variant-numeric:tabular-nums;margin-top:3px}
  .pn-spec-val .cur{font-family:var(--pn-sans);font-weight:700;font-size:.5em;color:var(--mvc-fg-55)}
  .pn-spec-up{font:700 7px var(--pn-mono);color:var(--mvc-green);margin-top:2px;display:block}
  .pn-spec-subs{display:grid;grid-template-rows:1fr 1fr;gap:6px}
  .pn-spec-subs .pn-spec-val{font-size:13px}
  .pn-spec-meter{margin-bottom:9px}
  .pn-spec-meter .m-top{display:flex;justify-content:space-between;font:700 6.5px var(--pn-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mvc-fg-55);margin-bottom:4px}
  .pn-spec-meter .m-top b{color:var(--p2)}
  .pn-spec-track{height:6px;border-radius:999px;background:var(--track);overflow:hidden}
  .pn-spec-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--p),var(--p2))}
  .pn-spec-bars{display:flex;align-items:flex-end;gap:3px;height:26px;margin-bottom:10px}
  .pn-spec-bars i{flex:1;border-radius:2px 2px 0 0;background:var(--mvc-green);opacity:.92}
  .pn-spec-bars i.a{background:var(--mvc-amber)} .pn-spec-bars i.p{background:var(--p)}
  .pn-spec-foot{display:flex;align-items:center;gap:7px}
  .pn-spec-cta{flex:1;text-align:center;font:700 8px var(--pn-sans);letter-spacing:.04em;padding:7px 6px;border-radius:8px;color:var(--pn-on-p);background:linear-gradient(180deg,var(--p2),var(--p));box-shadow:0 6px 14px -6px rgba(var(--glow),.6)}
  .pn-spec-enc{font:500 6.5px var(--pn-mono);letter-spacing:.05em;color:var(--mvc-fg-40);white-space:nowrap}
  @media(max-width:560px){ .pn-spec-ba{grid-template-columns:1fr;gap:8px} .pn-spec-arrow{transform:rotate(90deg);justify-self:center} }
  /* the exclusive cosmetic as a REAL held object, not a swatch */
  .pn-keep{position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:12px;border-radius:12px;
    background:linear-gradient(160deg,var(--glass-a),var(--glass-b));border:1px solid var(--mvc-brd-hi)}
  /* SST tactical stamp — pinned at an angle, brutalist hard-offset shadow, near-square radius, mono */
  .pn-keep-stamp{position:absolute;top:-9px;right:14px;transform:rotate(-5deg);z-index:2;
    font:800 8px var(--pn-mono);letter-spacing:.12em;line-height:1.05;text-align:center;text-transform:uppercase;
    color:var(--p2);border:1.5px solid var(--p2);border-radius:3px;padding:3px 6px;background:var(--mvc-bg);
    box-shadow:2px 2px 0 rgba(var(--glow),.32)}
  .pn-keep-obj{width:54px;height:54px;border-radius:13px;flex:none;position:relative;
    background:radial-gradient(circle at 50% 30%,var(--_ac),color-mix(in srgb,var(--_ac) 38%,#05060a));
    box-shadow:0 8px 20px -6px var(--_ac),inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 0 1px rgba(255,255,255,.12)}
  .pn-keep-obj::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(150deg,rgba(255,255,255,.28),transparent 46%)}
  .pn-keep-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
  .pn-keep-lbl{font:700 8px var(--pn-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--p2)}
  .pn-keep-name{font:800 15px var(--pn-sans);color:var(--mvc-fg);letter-spacing:-.01em}
  .pn-keep-demo{font:400 11.5px/1.4 var(--pn-sans);color:var(--mvc-fg-70)}
  .pn-keep-pill{display:inline-block;font:700 9px var(--pn-mono);letter-spacing:.08em;color:#06070c;padding:1px 7px;border-radius:999px;vertical-align:middle}
  /* bespoke pack hero — palette-driven (no hue-rotated stock photo) + SST halftone print grit */
  .pn-detail-hero--pack{background:
      radial-gradient(rgba(255,255,255,.10) 1px,transparent 1.5px) 0 0/8px 8px,
      radial-gradient(130% 110% at 84% -12%,rgba(var(--glow),.5),transparent 58%),
      linear-gradient(158deg,color-mix(in srgb,var(--mvc-bg) 55%,#000),var(--mvc-bg));}
  /* bottom legibility scrim under the copy (replaces the disabled default ::after) — protects the
     hero body text on the warm synthwave sunset even if the glow widens (design-critic LOW 2026-07-12) */
  .pn-detail-hero--pack::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60%;z-index:1;pointer-events:none;
    background:linear-gradient(0deg,color-mix(in srgb,var(--mvc-bg) 78%,transparent),transparent)}
  .pn-detail-hero--pack .pn-detail-fx{position:absolute;inset:0;z-index:1;pointer-events:none}
  .pn-detail-hero--pack>*{position:relative;z-index:2}
  .pn-detail-hero--pack h2{text-shadow:0 4px 30px rgba(var(--glow),.55)}

  /* ── theme-pack GRID card — each card is its own palette specimen (real goods on the shelf) ── */
  /* ═══════ PREMIUM WORLDS — luxury lookbook cards (CD 2026-07-20) ═══════
     CEO verdict on the old cards: "utter garbage" — they were fake neon mini-dashboards (gacha slop).
     Rebuilt as a curated collection: a restrained dark MOOD PLATE (the world's own colour contained
     to one motif + the world name set large), then canon PitchNoir meta — elegant copy, clean price,
     ONE canon CTA. The world's cyan/magenta/silver/gold NEVER leaks into the frame or CTA (those
     follow the shell accent, orange by default). Killed: pnSpecimen mockup, meter bars, neon CTAs. */
  body[data-view="store"] .pn-pack-card{display:flex;flex-direction:column;overflow:hidden}
  body[data-view="store"] .pn-world{position:relative;overflow:hidden;aspect-ratio:16/10;min-height:196px;
    display:flex;align-items:flex-end;padding:22px;isolation:isolate;
    background:radial-gradient(130% 110% at 50% -12%,color-mix(in srgb,var(--w-spine) 20%,#0b0d13),#07080c 72%)}
  /* bottom-up scrim guarantees AA for the white world name over any motif (both themes) */
  body[data-view="store"] .pn-world::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(0deg,rgba(4,5,8,.72),rgba(4,5,8,.10) 46%,transparent 66%)}
  /* a single hairline plinth in the world's colour — the one contained accent gesture */
  body[data-view="store"] .pn-world::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:2;pointer-events:none;
    background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--w-spine) 60%,transparent) 34%,transparent 82%)}
  body[data-view="store"] .pn-world-motif{position:absolute;inset:0;z-index:0;pointer-events:none}
  body[data-view="store"] .pn-world-plate{position:relative;z-index:3;display:flex;flex-direction:column;gap:7px;min-width:0}
  body[data-view="store"] .pn-world-era{margin:0;font:600 10px var(--pn-mono);letter-spacing:.26em;text-transform:uppercase;
    color:color-mix(in srgb,var(--w-spine) 55%,#ffffff)}
  body[data-view="store"] .pn-world-name{margin:0;font-family:var(--pn-disp);font-weight:600;
    font-size:clamp(26px,3.1vw,38px);line-height:.92;letter-spacing:-.02em;color:#fff;text-shadow:0 3px 34px rgba(0,0,0,.55);
    /* never split a word — "MIDNIGHT NEON" breaks at the space (two natural lines max), not mid-word */
    word-break:keep-all;hyphens:none;overflow-wrap:normal}
  /* per-world motif — one restrained gesture each, NOT a neon takeover */
  body[data-view="store"] .pn-world[data-world="pack-arcade"] .pn-world-motif{opacity:.5;background:
    repeating-linear-gradient(0deg,color-mix(in srgb,var(--w-spine) 12%,transparent) 0 1px,transparent 1px 6px),
    radial-gradient(90% 62% at 50% 0%,color-mix(in srgb,var(--w-spine) 24%,transparent),transparent 62%)}
  body[data-view="store"] .pn-world[data-world="pack-synthwave"] .pn-world-motif{opacity:.62;background:
    linear-gradient(180deg,transparent 42%,color-mix(in srgb,var(--w-spine) 34%,transparent) 82%,color-mix(in srgb,var(--w-glow) 46%,transparent) 100%),
    repeating-linear-gradient(90deg,color-mix(in srgb,#38e0f0 16%,transparent) 0 1px,transparent 1px 20px) bottom/100% 34% no-repeat}
  body[data-view="store"] .pn-world[data-world="pack-noir"] .pn-world-motif{opacity:.5;background:
    repeating-linear-gradient(-22deg,color-mix(in srgb,var(--w-spine) 14%,transparent) 0 2px,transparent 2px 22px),
    radial-gradient(78% 70% at 80% -6%,color-mix(in srgb,var(--w-spine) 18%,transparent),transparent 58%)}
  body[data-view="store"] .pn-world[data-world="pack-deco"] .pn-world-motif{opacity:.5;background:
    repeating-conic-gradient(from 90deg at 50% -5%,color-mix(in srgb,var(--w-spine) 18%,transparent) 0 1deg,transparent 1deg 7deg),
    radial-gradient(70% 54% at 50% -6%,color-mix(in srgb,var(--w-spine) 20%,transparent),transparent 60%)}
  /* META — canon PitchNoir, follows theme, quiet editorial hierarchy */
  body[data-view="store"] .pn-pack-meta{display:flex;flex-direction:column;gap:12px;padding:20px;flex:1}
  body[data-view="store"] .pn-pack-mood{margin:0;max-width:46ch;font:400 13.5px/1.55 var(--pn-sans);color:var(--mvc-fg-70)}
  body[data-view="store"] .pn-pack-line{margin:0;font:500 10.5px/1.55 var(--pn-mono);letter-spacing:.04em;color:var(--mvc-fg-55)}
  /* CEO-73 — the SHORT state. A card you cannot buy must LOOK different from one you can, and it
     must print the gap. Recessed, not shouted: the shelf still reads as a shop, but the eye lands
     on what is in reach first. */
  body[data-view="store"] .pn-afford{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0;
    font:700 10px/1.4 var(--pn-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mvc-fg-55)}
  body[data-view="store"] .pn-afford b{color:var(--pn-rust,#e2653a);font-weight:900;letter-spacing:.1em}
  body[data-view="store"] .pn-afford span{opacity:.62;font-weight:500;letter-spacing:.08em}
  body[data-view="store"] .pn-afford-go{background:none;border:0;padding:0;cursor:pointer;margin-left:auto;
    font:800 10px/1.4 var(--pn-mono);letter-spacing:.14em;text-transform:uppercase;
    color:var(--pn-rust,#e2653a);border-bottom:1px solid currentColor}
  body[data-view="store"] .pn-afford-go:hover{filter:brightness(1.2)}
  body[data-view="store"] .pn-card.is-short{opacity:.74}
  body[data-view="store"] .pn-card.is-short:hover,body[data-view="store"] .pn-card.is-short:focus-within{opacity:1}
  body[data-view="store"] .pn-card.is-short .pn-art img,
  body[data-view="store"] .pn-card.is-short .pn-world{filter:saturate(.55)}
  body[data-view="store"] .pn-card.is-short:hover .pn-art img,
  body[data-view="store"] .pn-card.is-short:hover .pn-world{filter:none}
  body[data-view="store"] .pn-pack-excl{margin:0;font:500 12px/1.45 var(--pn-sans);color:var(--mvc-fg-70)}
  body[data-view="store"] .pn-pack-excl b{color:var(--mvc-fg);font-weight:700}
  body[data-view="store"] .pn-pack-pricerow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:15px;border-top:1px solid var(--mvc-brd)}
  body[data-view="store"] .pn-pack-price{font-family:var(--pn-disp);font-size:24px;color:var(--mvc-fg);font-variant-numeric:tabular-nums;line-height:1}
  body[data-view="store"] .pn-pack-price .cur{color:var(--p2);font-size:.7em}
  body[data-view="store"] .pn-pack-price small{display:block;font:600 9px var(--pn-mono);letter-spacing:.08em;color:var(--mvc-fg-55);margin-top:3px}

  /* the in-world CONFIRM body — names exactly what you get + the price */
  .bigmodal-card .pn-cf{display:flex;flex-direction:column;gap:7px;text-align:left}
  .bigmodal-card .pn-cf .pn-eyebrow{color:var(--p2,#f97316)}
  .bigmodal-card .pn-cf-name{font-family:var(--pn-disp);font-size:26px;line-height:1;margin:2px 0}
  .bigmodal-card .pn-cf-what{font:400 13.5px/1.5 var(--pn-sans);margin:0}
  .bigmodal-card .pn-cf-pay{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:8px;padding-top:11px;border-top:1px solid rgba(255,255,255,.13)}
  .bigmodal-card .pn-cf-price{font-family:var(--pn-disp);font-size:24px;color:#fff !important;font-variant-numeric:tabular-nums}
  .bigmodal-card .pn-cf-inst{font:500 11px/1.35 var(--pn-mono);letter-spacing:.02em;color:#8fe0b0}

  /* ════════ SEASON PASS — the reward ladder, on the store system (body[data-view="pass"]) ════════ */
  body[data-view="pass"] .pn-pass-progress{display:flex;align-items:center;gap:12px;margin:16px 0 4px}
  body[data-view="pass"] .pn-pass-bar{flex:1;height:8px;border-radius:999px;background:rgba(var(--glow),.10);border:1px solid var(--mvc-brd);overflow:hidden}
  body[data-view="pass"] .pn-pass-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--p2),var(--p))}
  body[data-view="pass"] .pn-pass-progress .lbl{font:600 10.5px var(--pn-mono);letter-spacing:.1em;color:var(--mvc-fg-55);white-space:nowrap}
  /* velvet-rope UNLOCK card */
  body[data-view="pass"] .pn-pass-unlock{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;margin:10px 0 4px;
    padding:22px 24px;background:radial-gradient(140% 130% at 100% 0%,rgba(var(--glow),.17),transparent 58%),linear-gradient(160deg,var(--glass-a),var(--glass-b))}
  body[data-view="pass"] .pn-pass-unlock-body{flex:1;min-width:240px;display:flex;flex-direction:column;gap:8px}
  body[data-view="pass"] .pn-pass-unlock-body .pn-small{max-width:58ch}
  body[data-view="pass"] .pn-pass-unlock-cta{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
  body[data-view="pass"] .pn-pass-price{font-family:var(--pn-disp);font-size:34px;line-height:1;color:var(--mvc-fg);font-variant-numeric:tabular-nums}
  body[data-view="pass"] .pn-pass-price .cur{font-size:.58em;color:var(--pn-cred)}   /* brand-fixed currency ink */
  body[data-view="pass"] .pn-pass-active{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0 4px;padding:14px 18px}
  /* ladder */
  body[data-view="pass"] .pn-pass-ladder{padding:0;overflow:hidden}
  body[data-view="pass"] .pn-pass-ladder-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 18px;border-bottom:1px solid var(--mvc-brd)}
  body[data-view="pass"] .pn-pass-scroll{max-height:min(58vh,540px);overflow-y:auto;scrollbar-width:thin}
  body[data-view="pass"] .pn-pass-row{display:flex;align-items:center;gap:14px;padding:11px 18px;border-bottom:1px solid var(--mvc-brd);position:relative}
  body[data-view="pass"] .pn-pass-row:last-child{border-bottom:0}
  body[data-view="pass"] .pn-pass-lvl{flex:none;width:32px;font-family:var(--pn-mono);font-variant-numeric:tabular-nums;font-size:13px;font-weight:700;letter-spacing:.03em;color:var(--mvc-fg-55);text-align:center}
  body[data-view="pass"] .pn-pass-cta{margin-left:auto;flex:none;display:flex;align-items:center;gap:8px}
  body[data-view="pass"] .pn-pass-lock{font:500 10px var(--pn-mono);letter-spacing:.14em;color:var(--mvc-fg-55)}
  /* current-level highlight */
  body[data-view="pass"] .pn-pass-row.is-here{background:rgba(var(--glow),.07)}
  body[data-view="pass"] .pn-pass-row.is-here .pn-pass-lvl{color:var(--p2)}
  body[data-view="pass"] .pn-pass-row.is-here::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--p)}
  body[data-view="pass"] .pn-pass-row.is-claimed{opacity:.66}
  /* DRIP rows — quiet one-liners */
  body[data-view="pass"] .pn-pass-drip{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
  body[data-view="pass"] .pn-pass-drip span{display:inline-flex;align-items:baseline;gap:6px;font-family:var(--pn-mono);font-variant-numeric:tabular-nums;font-size:13px;color:var(--mvc-fg-70)}
  body[data-view="pass"] .pn-pass-drip em{font-style:normal;font-size:8.5px;letter-spacing:.14em;color:var(--mvc-fg-55)}
  body[data-view="pass"] .pn-pass-drip .pro.is-locked{color:var(--mvc-fg-55);opacity:.9}
  /* ITEM rows — real cosmetics get visual weight */
  body[data-view="pass"] .pn-pass-row--item{padding-top:14px;padding-bottom:14px}
  body[data-view="pass"] .pn-pass-main{display:flex;align-items:center;gap:14px;min-width:0}
  body[data-view="pass"] .pn-pass-meta{display:flex;flex-direction:column;gap:3px;min-width:0}
  body[data-view="pass"] .pn-pass-name{font-family:var(--pn-disp);font-size:20px;line-height:1;letter-spacing:-.01em;color:var(--mvc-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body[data-view="pass"] .pn-pass-free{font:500 11px var(--pn-mono);letter-spacing:.03em;color:var(--mvc-fg-55)}
  body[data-view="pass"] .pn-pass-row--item .pn-eyebrow{color:var(--p2)}
  body[data-view="pass"] .pn-pass-row--item.is-locked .pn-eyebrow{color:var(--mvc-fg-40)}
  body[data-view="pass"] .pn-pass-spec{flex:none;width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
    background:rgba(var(--glow),.08);border:1px solid var(--mvc-brd-hi);overflow:hidden;position:relative}
  body[data-view="pass"] .pn-pass-spec--dot::after{content:"";width:22px;height:22px;border-radius:50%;background:var(--dot);box-shadow:0 0 0 1px rgba(255,255,255,.25),0 0 12px -2px var(--dot)}
  body[data-view="pass"] .pn-pass-spec--emoji{font-size:26px}
  body[data-view="pass"] .pn-pass-spec--title{font-family:var(--pn-disp);font-size:12px;color:var(--p2);text-align:center;line-height:.88;padding:4px}
  body[data-view="pass"] .pn-pass-spec--thumb{background-size:cover;background-position:center}
  body[data-view="pass"] .pn-pass-row--item.is-locked .pn-pass-spec{filter:saturate(.55) brightness(.82)}
  body[data-view="pass"] .pn-pass-row--item.is-locked .pn-pass-spec::before{content:"";position:absolute;inset:0;background:rgba(4,5,9,.36)}
  body[data-view="pass"] .pn-pass-lockmark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:15px;height:15px}
  body[data-view="pass"] .pn-pass-lockmark svg{width:100%;height:100%;stroke:#fff;fill:none;stroke-width:2}
  @media(max-width:520px){
    body[data-view="pass"] .pn-pass-row{flex-wrap:wrap}
    body[data-view="pass"] .pn-pass-cta{margin-left:0;width:100%;justify-content:flex-start}
    body[data-view="pass"] .pn-pass-unlock-cta{align-items:stretch;width:100%}
    body[data-view="pass"] .pn-pass-unlock-cta .pn-btn{width:100%}
    body[data-view="pass"] .pn-pass-unlock-cta .pn-pass-price{align-self:flex-start}
  }

  /* ============================================================================
     WAR ROOM / BOARDROOM (body[data-view="pitch"], see screenPitch()) — TaskMaster #40.
     This screen renders through a totally separate render path from the office hub (real
     `document.body.dataset.view` value is "pitch" whenever S.activePitch exists, per render()'s
     `S.activePitch?'pitch':...` branch), so NONE of the office-scoped CSS above ever touched it —
     that's the actual reason it still read as an unrelated, unconverted generation. Same Concrete
     Rust Remix tokens (--rust-*, now defined on plain `body` above), same flat-card-not-glass call.
     ============================================================================ */
  body[data-view="pitch"]{ background:var(--rust-bg) !important; --primary:var(--rust); --accent:var(--rust-teal); }
  /* QA sweep 2 (defect #2): same F2 bug the office view fixed long ago — a translucent gradient
     alone leaves background-color transparent, and with backdrop-filter off, scrolled war-room
     copy double-exposed through the light topbar over the HUD stats. Solid floor under the glass. */
  body[data-view="pitch"] .topbar{background-color:var(--mvc-bg) !important;background:var(--rust-card) !important;background-color:var(--mvc-bg) !important;border-bottom:1px solid var(--rust-border) !important;backdrop-filter:none !important}
  body[data-view="pitch"] .topbar,body[data-view="pitch"] #hud .stat b,body[data-view="pitch"] #hud .hud-secondary .stat b{color:var(--rust-ink) !important}
  body[data-view="pitch"] #hud .stat span{color:var(--rust-ink-55) !important}
  /* topbar utilities are NAV pills governed by pn-system — the SAME on office AND pitch (P6: they
     were 8px rust rects here while office made them 999px pills — the exact "buttons differ by
     screen" fracture SYSTEM_V2 names). Exclude .tb-btn/.pn-btn from the catch-all, then mirror the
     office pill treatment on the pitch topbar so the utility bar reads identically across views. */
  body[data-view="pitch"] .topbar button:not(.tb-btn):not(.pn-btn){background:transparent !important;color:var(--rust-ink) !important;border:1px solid var(--rust-border) !important}
  body[data-view="pitch"] .topbar .tb-btn{background:transparent !important;border:1px solid var(--mvc-brd) !important;color:var(--mvc-fg) !important;border-radius:999px !important}
  body[data-view="pitch"] .topbar .tb-btn:hover{border-color:var(--p) !important;color:var(--p) !important}
  body[data-view="pitch"] .pitch-wrap:not(.pn-card){
    background:var(--rust-card) !important;border:1px solid var(--rust-border) !important;border-radius:14px !important;
    box-shadow:0 1px 2px rgba(28,25,23,.05),0 8px 24px rgba(28,25,23,.05) !important;
  }
  /* P6: the prep war-room container is now a system .pn-card. The legacy .card base (white
     gradient, 2px radius) sits later in the cascade and beats the external pn-system glass, so
     force the system glass/geometry here so the panel reads as the ONE card family on every theme. */
  body[data-view="pitch"] .pitch-wrap.pn-card{
    background:linear-gradient(160deg,var(--glass-a),var(--glass-b)) !important;
    border:1px solid var(--mvc-brd) !important;border-radius:var(--pn-card-r) !important;
    box-shadow:var(--glass-shadow),var(--glass-inset) !important;
  }
  /* every :not() here ADDS specificity, which is how this catch-all kept beating the pinned-dark ink
     contract and painting "PITCH READY" near-black on near-black in PORCELAIN. The three headlines
     that sit on imagery or on a pinned-dark overlay own their own voice and ink — exempt them. */
  body[data-view="pitch"] h2:not(.pnp2-hd):not(.wr-mh-name):not(.pn-ready-title):not(.rv-brand){font-family:'Montserrat',sans-serif !important;font-weight:700 !important;
    font-style:normal !important;color:var(--rust-ink) !important;letter-spacing:-.01em !important}
  body[data-view="pitch"] .muted,body[data-view="pitch"] .feedback{color:var(--rust-ink-55) !important}
  body[data-view="pitch"] .prop-input{
    background:var(--rust-ink-08) !important;border:1px solid var(--rust-border) !important;
    border-left:1px solid var(--lg-hair-neutral,rgba(128,132,140,.2)) !important;border-radius:8px !important;
  }
  body[data-view="pitch"] .prop-input textarea{background:transparent;color:var(--rust-ink)}
  body[data-view="pitch"] .prep-floor-label{color:var(--rust-ink) !important}
  /* discipline overview bars (INSIGHT/STRATEGY/BIG IDEA/CRAFT/COMMERCIALS row) */
  body[data-view="pitch"] .dept{
    background:var(--rust-card) !important;border:1px solid var(--rust-border) !important;
    border-top:3px solid var(--rust-ink-14) !important;border-radius:8px !important;
  }
  body[data-view="pitch"] .dept.dept-key{border-top-color:var(--rust) !important}
  body[data-view="pitch"] .dept-name,body[data-view="pitch"] .dept-flag{color:var(--rust-ink) !important}
  body[data-view="pitch"] .dept-depth{color:var(--rust-ink-55) !important}
  body[data-view="pitch"] .dept-bar{background:var(--rust-ink-08) !important}
  body[data-view="pitch"] .dept-bar>i{background:var(--rust) !important}
  body[data-view="pitch"] .dept-bolster{border:1px solid var(--rust) !important;color:var(--rust) !important;background:transparent !important}
  /* the discipline talent cards — flat, not blurred glass; bigger portrait area */
  body[data-view="pitch"] .pillar-card{
    background:var(--rust-card) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
    border:1px solid var(--rust-border) !important;border-top:3px solid var(--rust) !important;border-radius:10px !important;
  }
  body[data-view="pitch"] .pillar-card .pillar-img{aspect-ratio:1/1 !important}
  body[data-view="pitch"] .tc-disc{background:var(--rust-black) !important}
  body[data-view="pitch"] .tc-name{color:var(--rust-ink) !important}
  body[data-view="pitch"] .tc-role{color:var(--rust-ink-55) !important}
  body[data-view="pitch"] .tc-skill{background:var(--rust-ink-08) !important}
  body[data-view="pitch"] .tc-skill>i{background:var(--rust) !important}
  body[data-view="pitch"] .ppill.focus{background:rgba(194,65,12,.12) !important;color:var(--rust) !important}
  body[data-view="pitch"] .ppill.valued{background:var(--rust-ink-08) !important;color:var(--rust-ink-55) !important}
  body[data-view="pitch"] .tc-swap{border:1px solid var(--rust-ink) !important;color:var(--rust-ink) !important;background:transparent !important;border-radius:6px !important}
  body[data-view="pitch"] .tc-swap:hover{background:var(--rust-ink) !important;color:#fff !important}
  body[data-view="pitch"] .tc-picker{background:var(--rust-card) !important;border:1px solid var(--rust-border) !important;backdrop-filter:none !important}
  body[data-view="pitch"] .tc-cand{color:var(--rust-ink) !important}
  body[data-view="pitch"] .tc-cand.on{background:var(--rust-ink-08) !important}
  /* LEGACY war-room buttons only — the system action buttons (.pn-btn: EXECUTE/present/build/back)
     are governed by pn-system.css. This is the P6 fracture fix: exclude .pn-btn/.tb-btn so a Primary
     is the SAME object on every screen (rect=action, pill=nav), only its palette changing per theme. */
  body[data-view="pitch"] button.primary:not(.pn-btn){
    background:var(--rust-black) !important;color:#fff !important;border:0 !important;border-radius:8px !important;
    font-weight:600 !important;box-shadow:none !important;
  }
  body[data-view="pitch"] button.primary:not(.pn-btn):hover{background:var(--rust) !important}
  /* THE REVIEW's fork buttons (.rv-opt) are components with their own skin — excluded here for the
     same root-cause reason the dice/dossier were (CEO 2026-07-31): never style controls with a broad
     element catch-all; components own their skin. */
  body[data-view="pitch"] button:not(.primary):not(.pn-btn):not(.tb-btn):not(.pnc-yes):not(.pnc-no):not(.wearing-chip):not(.lg-btn):not(.lg-dot):not(.pn-dice):not(.pn-dice-q):not(.poap-dossier):not(.rv-opt):not([class*="pnos-"]){
    background:var(--rust-card) !important;color:var(--rust-ink) !important;
    border:1px solid var(--rust-border) !important;border-radius:8px !important;
  }
  /* ── ALTERNATION LAW on the paper world (CEO 2026-07-31, 2nd ask: "this is all too beige, make
     buttons clearer and dark colours... on light themes have dark buttons and vice versa").
     The war room is light stock, so every control here is a DARK slab with light ink. ── */
  body[data-view="pitch"] .pn-dice{background:#141b26 !important;color:#f6f2ea !important;
    border:0 !important;border-radius:2px !important;box-shadow:4px 4px 0 rgba(20,27,38,.22) !important}
  body[data-view="pitch"] .pn-dice:hover{background:#0b1220 !important}
  body[data-view="pitch"] .pn-dice-q{background:#141b26 !important;color:#f6f2ea !important;
    border:0 !important;border-left:1px solid rgba(255,255,255,.18) !important;border-radius:0 2px 2px 0 !important}
  body[data-view="pitch"] .poap-dossier{background:#141b26 !important;color:#f6f2ea !important;
    border:0 !important;border-radius:2px !important;box-shadow:4px 4px 0 rgba(20,27,38,.22) !important}
  body[data-view="pitch"] .pn-btn--secondary{background:#141b26 !important;color:#f6f2ea !important;
    border:0 !important}
  /* dark themes keep the inverse: light controls on the dark shell */
  html.pn-dark body[data-view="pitch"] .pn-dice,
  body.mvc-dark[data-view="pitch"] .pn-dice{background:#f2ece1 !important;color:#141b26 !important;
    box-shadow:4px 4px 0 rgba(0,0,0,.4) !important}
  html.pn-dark body[data-view="pitch"] .pn-dice-q,
  body.mvc-dark[data-view="pitch"] .pn-dice-q{background:#f2ece1 !important;color:#141b26 !important;
    border-left:1px solid rgba(0,0,0,.2) !important}
  html.pn-dark body[data-view="pitch"] .poap-dossier,
  body.mvc-dark[data-view="pitch"] .poap-dossier{background:#f2ece1 !important;color:#141b26 !important}
  body[data-view="pitch"] .pitch-bgstrip-bleed{color:var(--rust-ink) !important}
  /* boardroom (deliver phase) — same flat card + ink, keep the live-cam/meeting imagery as-is */
  body[data-view="pitch"] .bm-await{color:var(--rust-ink-55) !important}
  body[data-view="pitch"] .bm-eyebrow{color:var(--rust-ink-55) !important}
  body[data-view="pitch"] .bm-eyebrow.live{color:var(--rust) !important}
  body[data-view="pitch"] .bs-angle-banner{background:var(--rust-ink-08) !important;color:var(--rust-ink) !important;border-left:1px solid var(--lg-hair-neutral,rgba(128,132,140,.2)) !important}

  /* ── the hero. Reference (mvc-os-home_v5 / v1_material) leads with this: greeting, a huge
     display headline, real subtext, one primary CTA. Flat light card, no glow-wash hack needed —
     that was a dark-glass-only problem (text-over-animated-shader). Plain dark ink on light bg. ── */
  body[data-view="office"] .perf-hero{
    display:flex !important;justify-content:space-between !important;align-items:flex-end !important;
    gap:28px;flex-wrap:wrap;margin:4px 0 18px;padding:20px 24px;position:relative;
    background:var(--rust-card);border:1px solid var(--rust-border);border-radius:14px;
    box-shadow:0 1px 2px rgba(28,25,23,.05),0 8px 24px rgba(28,25,23,.05);
  }
  body[data-view="office"] .perf-hero::before{display:none}
  body[data-view="office"] .perf-hero-txt{max-width:64ch}
  body[data-view="office"] .perf-hero-txt .mvc-kpi-lbl{color:var(--rust-ink-55);text-shadow:none}
  body[data-view="office"] .perf-hero-h1{margin:8px 0 0 !important;text-wrap:balance;color:var(--rust-ink);text-shadow:none}
  body[data-view="office"] .mvc-hero-accent{color:var(--rust)}
  body[data-view="office"] .perf-hero-sub{font-family:var(--mvc-f) !important;color:var(--rust-ink-70);
    font-size:15px;margin-top:10px;max-width:60ch;text-shadow:none}
  body[data-view="office"] .perf-hero-cta{flex:none;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end}
  body[data-view="office"] .perf-hero-cta .mvc-gb{font-family:var(--mvc-f) !important;font-weight:700 !important}
  @media(max-width:760px){ body[data-view="office"] .perf-hero-cta{width:100%} body[data-view="office"] .perf-hero-cta .mvc-gb{width:100%;justify-content:center} }

  /* isometric folder stack — real section header + designed empty state, not a silent blank */
  body[data-view="office"] .perf-iso{margin:20px 0 4px}
  body[data-view="office"] .perf-iso-head{margin-bottom:14px}
  body[data-view="office"] .perf-iso-h2{font-size:clamp(26px,3.4vw,38px) !important;margin:0 !important;color:var(--rust-ink);text-shadow:none}
  body[data-view="office"] .perf-iso-sub{font-family:var(--mvc-f) !important;color:var(--rust-ink-55);margin-top:6px;
    font-size:14px;text-shadow:none}
  body[data-view="office"] .perf-iso-empty{padding:22px;border:1px dashed var(--rust-border);border-radius:14px;
    display:flex;justify-content:center}
  /* mobile: keep the Live-work dossiers VISIBLE (was display:none) — mvc-os.css scales the stack
     (.8 ≤860px, .6 ≤600px) and clamps its layout box; these margins just re-center the scaled box
     (transform-origin is top-left, so margin:auto can't center it). */
  @media(max-width:900px){ body[data-view="office"] .perf-iso .mvc-stack{margin:0 0 -50px max(0px,calc(50% - 208px))} }
  @media(max-width:600px){ body[data-view="office"] .perf-iso .mvc-stack{margin:0 0 -100px max(0px,calc(50% - 156px))} }

  /* the liquid-glass CTA (.mvc-gbwrap/.mvc-gb, mvc-os.css) is dark-theme-specific — flatten it to
     match Primary/Secondary from the theme card for the hero + any office use of the real markup */
  body[data-view="office"] .mvc-gb{
    background:var(--rust-black) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
    box-shadow:none !important;border-radius:8px !important;
  }
  body[data-view="office"] .mvc-gbwrap:hover .mvc-gb{transform:translateY(-2px) !important}

  /* ════════ GLASS RESTORATION (2026-07-07, Opus) ════════
     Earlier this session I flattened every office/pitch surface with backdrop-filter:none and killed
     the .mvc-gb specular/bloom — that was the regression Jon called out ("elegant glass lost"). This
     block sits last in the cascade so it wins: it re-enables the real frosted glass + liquid-button
     craft from os-mvc.html, now driven by the theme tokens so it renders correctly light OR dark. */
  body[data-view="office"] .card.shard,body[data-view="office"] .hb-cell,body[data-view="office"] .client-card,
  body[data-view="office"] .nbo-card,body[data-view="office"] .tt-card,body[data-view="office"] .rfi-row,
  body[data-view="office"] .camp-card,body[data-view="office"] .dossier-card,body[data-view="office"] .hub-nav,
  body[data-view="office"] .perf-hero,body[data-view="office"] .mvc-kpi,body[data-view="office"] .mvc-glass,
  body[data-view="pitch"] .pitch-wrap,body[data-view="pitch"] .pillar-card,body[data-view="pitch"] .dept{
    backdrop-filter:blur(26px) saturate(160%) !important;-webkit-backdrop-filter:blur(26px) saturate(160%) !important;
    box-shadow:var(--glass-shadow),var(--glass-inset) !important;
  }
  /* liquid-glass buttons back (specular strip + colour bloom + floating glow, themed via --glow) */
  body[data-view="office"] .mvc-gb,body[data-view="pitch"] .mvc-gb{
    background:linear-gradient(180deg,rgba(var(--glow),.30),rgba(var(--glow),.10)) !important;
    backdrop-filter:blur(14px) saturate(180%) !important;-webkit-backdrop-filter:blur(14px) saturate(180%) !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 1.5px 1px var(--glass-hi),
      inset 0 -9px 16px rgba(0,0,0,.30),inset 0 9px 16px rgba(var(--glow),.24) !important;color:#fff !important;
  }
  body[data-view="office"] .mvc-gb::before,body[data-view="office"] .mvc-gb::after,
  body[data-view="pitch"] .mvc-gb::before,body[data-view="pitch"] .mvc-gb::after{display:block !important}
  body[data-view="office"] .mvc-gbshadow,body[data-view="pitch"] .mvc-gbshadow{display:block !important}

  /* ══════════════════════════════════════════════════════════════════════════════════════════════
     SURFACE-V3 — the war-room on THE LADDER + orange discipline (CEO 2026-07-18, branch pn-surface-v3)
     CEO verbatim: "not enough contrast, similar coloured light modules on light backgrounds, not enough
     gradients — your fundamental design logic is fucked" + "these lame ass orange lines look weak and AI
     sloppy". Fix: the whole prep war-room rides the pn-glass FOUR-level ladder (--lg-surface-0..3), and
     orange is NEVER structural (no outlines / left spines / top rules) — only typographic accents, ONE
     CTA, the corner pip. Light ladder is bridged onto body.mvc-light so .lg-s* flip porcelain.
     ══════════════════════════════════════════════════════════════════════════════════════════════ */
  /* LADDER BRIDGE — set on body (play.html's own sheet) so BOTH themes are deterministic in the pitch
     view; pn-glass carries the canonical :where(html)/.lg-light copies for standalone reuse (login/index). */
  body{                                                /* DARK LADDER (default) — mirrors pn-glass :where(html) */
    --lg-hair-neutral:rgba(150,162,184,.17);
    --lg-surface-0:#090a10; --lg-s1-top:#1a1d29; --lg-s1-bot:#101219;
    --lg-s2-top:#252936; --lg-s2-bot:#191d29; --lg-surface-3:#2e3340;
    --lg-elev-1:0 1px 3px rgba(0,0,0,.36);
    --lg-elev-2:0 18px 38px -16px rgba(0,0,0,.66), 0 2px 6px rgba(0,0,0,.36);
    --lg-elev-3:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.44);
  }
  body.mvc-light{                                      /* LIGHT LADDER (mirrors pn-glass .lg-light) */
    --lg-hair-neutral:rgba(58,44,26,.16);   /* CEO 2026-07-23: premium WARM BONE ladder (was cool blue) */
    --lg-surface-0:#e4dbca; --lg-s1-top:#f3eee2; --lg-s1-bot:#eae2d2;
    --lg-s2-top:#faf7f0; --lg-s2-bot:#f2ebe1; --lg-surface-3:#ffffff;
    --lg-elev-1:0 1px 3px rgba(74,54,28,.10);
    --lg-elev-2:0 18px 36px -16px rgba(74,54,28,.22), 0 2px 6px rgba(74,54,28,.09);
    --lg-elev-3:inset 0 1px 2px rgba(74,54,28,.10);
  }
  /* view = s0 canvas (ambient dimmed) — flat deepest ink, modules lift OFF it. Beats the glass-restore. */
  body[data-view="pitch"] .pitch-wrap.warroom.pn-card{
    background:var(--lg-surface-0) !important; border:1px solid var(--lg-hair-neutral) !important;
    box-shadow:0 26px 64px -22px rgba(0,0,0,.5) !important;
    backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  }
  /* RETIRE THE ORANGE SPINE — the legacy .card::before 5px accent left-tab is the exact "lame ass
     orange line" the CEO killed. Separation is the surface ladder now, never a structural accent line. */
  body[data-view="pitch"] .pitch-wrap.warroom::before{ display:none !important; }
  /* local data-tier palette (skill numbers = allowed data endpoints; bars are fills, never borders) */
  body[data-view="pitch"]{ --t-A:#3fce8b; --t-B:#f0a35e; --t-C:var(--rust-ink-55); --t-D:#eb7150; }
  .tier-A{color:var(--t-A)} .tier-B{color:var(--t-B)} .tier-C{color:var(--t-C)} .tier-D{color:var(--t-D)}

  /* ── ORANGE SWEEP: kill every structural orange line on the surfaces we keep ────────────────────── */
  body[data-view="pitch"] .wr-angle{ background:linear-gradient(168deg,var(--lg-s1-top),var(--lg-s1-bot)) !important;
    border:1px solid var(--lg-hair-neutral) !important; border-radius:12px !important; box-shadow:var(--lg-elev-1) !important; }
  body[data-view="pitch"] .wr-angle textarea{ background:var(--lg-surface-3) !important; border:1px solid var(--lg-hair-neutral) !important; color:var(--rust-ink) !important; }
  body[data-view="pitch"] .wr-angle textarea:focus{ border-color:var(--accent) !important; box-shadow:0 0 0 3px rgba(var(--glow),.20) !important; }
  body[data-view="pitch"] .poap{ background:linear-gradient(168deg,var(--lg-s1-top),var(--lg-s1-bot)) !important;
    border:1px solid var(--lg-hair-neutral) !important; border-left:1px solid var(--lg-hair-neutral) !important;
    border-radius:14px !important; box-shadow:var(--lg-elev-1) !important; }
  body[data-view="pitch"] .poap-ta{ background:var(--lg-surface-3) !important; border:1px solid var(--lg-hair-neutral) !important; }
  /* CEO 2026-08-01 ("some buttons still illegible"): this rule used to re-stamp color:var(--rust-ink)
     — dark ink — OVER the dark #141b26 slab set earlier at the alternation-law pass. Two !important
     rules, same specificity, later one wins on color: near-zero contrast. Same defect class as the
     seven stacked heading overrides. The slab and its ink must be declared TOGETHER or not at all. */
  body[data-view="pitch"] .poap-dossier{ border:1px solid var(--lg-hair-neutral) !important; }
  body[data-view="pitch"] .poap-dossier:hover{ background:var(--accent) !important; color:#fff !important; border-color:var(--accent) !important; }
  body[data-view="pitch"] .bs-angle-banner{ border-left:0 !important; padding-left:12px !important; }

  /* ══ THE ROOM YOU'RE SENDING — the team module (s1 section · s2 cards) ══════════════════════════ */
  .room-mod{ margin:26px 24px 4px; padding:20px 22px 22px; border-radius:16px; }
  .room-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
  .room-eyebrow{ display:block; font-family:var(--pn-mono,monospace); font-size:12px; font-weight:700; letter-spacing:.24em;
    text-transform:uppercase; color:var(--accent); }
  .room-sub{ margin:6px 0 0; font-family:var(--pn-sans,sans-serif); font-size:13px; line-height:1.5; color:var(--rust-ink-70); max-width:56ch; }
  .room-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; }
  @media(max-width:560px){ .room-grid{ grid-template-columns:1fr } .room-mod{ margin-left:16px;margin-right:16px } }
  .rm-card{ border-radius:12px; padding:13px 14px 12px; display:flex; flex-direction:column; gap:10px; }
  .rm-card.is-key{ border-color:color-mix(in srgb,var(--accent) 34%,var(--lg-hair-neutral)); }
  .rm-card-top{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:11px; align-items:center; }
  .rm-portrait{ width:46px; height:52px; flex:none; overflow:hidden; border-radius:3px; background:var(--rust-ink-08); }
  .rm-portrait img{ width:100%; height:100%; object-fit:cover; object-position:center top; filter:grayscale(1) contrast(1.18); }
  .rm-card-id{ min-width:0; display:flex; flex-direction:column; gap:2px; }
  .rm-disc{ font-family:var(--pn-mono,monospace); font-size:9px; font-weight:700; letter-spacing:.16em; color:var(--rust-ink-55);
    display:flex; align-items:center; gap:6px; }
  .rm-key{ font-style:normal; font-size:8px; letter-spacing:.12em; color:var(--accent);
    border:1px solid color-mix(in srgb,var(--accent) 40%,transparent); padding:1px 5px; border-radius:2px; }
  .rm-lead{ font-family:var(--pn-sans,sans-serif); font-weight:800; font-size:16px; letter-spacing:-.01em; color:var(--rust-ink);
    display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .rm-cover{ font-style:normal; font-family:var(--pn-mono,monospace); font-size:8.5px; font-weight:700; color:var(--t-B);
    border:1px solid color-mix(in srgb,var(--t-B) 42%,transparent); padding:0 4px; border-radius:2px; }
  .rm-role{ font-family:var(--pn-mono,monospace); font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--rust-ink-55); }
  .rm-stat{ flex:none; text-align:right; display:flex; flex-direction:column; align-items:flex-end; line-height:1; }
  .rm-stat b{ font-family:var(--pn-mono,monospace); font-size:26px; font-weight:800; font-variant-numeric:tabular-nums; }
  .rm-stat span{ font-family:var(--pn-mono,monospace); font-size:7.5px; font-weight:700; letter-spacing:.14em; color:var(--rust-ink-40); margin-top:2px; }
  .rm-bar{ height:5px; border-radius:3px; background:var(--rust-ink-08); overflow:hidden; }
  .rm-bar>i{ display:block; height:100%; border-radius:3px; background:currentColor; }
  .rm-bar>i.tier-A{background:var(--t-A)} .rm-bar>i.tier-B{background:var(--t-B)} .rm-bar>i.tier-C{background:var(--rust-ink-40)} .rm-bar>i.tier-D{background:var(--t-D)}
  .rm-why{ display:block; width:100%; text-align:left; cursor:pointer; appearance:none;
    background:var(--rust-ink-08); border:1px solid var(--lg-hair-neutral); border-radius:8px; padding:9px 11px;
    transition:border-color .16s,background .16s,transform .12s; }
  .rm-why.is-static{ cursor:default; }
  .rm-why:hover{ border-color:color-mix(in srgb,var(--accent) 46%,var(--lg-hair-neutral)); background:var(--rust-ink-14); transform:translateY(-1px); }
  .rm-why-txt{ display:block; font-family:var(--pn-sans,sans-serif); font-size:12px; line-height:1.42; color:var(--rust-ink-70); }
  .rm-why-txt b{ color:var(--rust-ink); font-weight:800; }
  .rm-why-cue{ display:inline-block; margin-top:7px; font-family:var(--pn-mono,monospace); font-size:9px; font-weight:700;
    letter-spacing:.16em; color:var(--accent); }
  .rm-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .rm-cost{ font-family:var(--pn-mono,monospace); font-size:10px; font-weight:700; letter-spacing:.1em; color:var(--rust-ink-55);
    border:1px solid var(--lg-hair-neutral); border-radius:3px; padding:3px 8px; }
  .rm-bolster{ appearance:none; cursor:pointer; font-family:var(--pn-mono,monospace); font-size:9px; font-weight:800; letter-spacing:.1em;
    color:var(--t-D); background:color-mix(in srgb,var(--t-D) 12%,transparent); border:1px solid color-mix(in srgb,var(--t-D) 42%,transparent);
    border-radius:3px; padding:4px 9px; transition:background .16s; }
  .rm-bolster:hover{ background:color-mix(in srgb,var(--t-D) 22%,transparent); }

  /* ══ THE TIME METER — pool→reserve, 8-per-talking-point notches (replaces the prose math) ═══════ */
  .tmeter{ margin:0 0 18px; }
  .tmeter-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px; }
  .tmeter-k{ font-family:var(--pn-mono,monospace); font-size:10px; font-weight:700; letter-spacing:.2em; color:var(--rust-ink-55); }
  .tmeter-v{ font-family:var(--pn-mono,monospace); font-size:18px; font-weight:800; color:var(--rust-ink); font-variant-numeric:tabular-nums; }
  .tmeter-v i{ font-style:normal; font-size:12px; color:var(--rust-ink-40); margin-left:4px; }
  .tmeter-track{ position:relative; height:14px; border-radius:4px; overflow:hidden;
    background:var(--lg-surface-3); border:1px solid var(--lg-hair-neutral); }
  .tmeter-fill{ position:absolute; left:0; top:0; bottom:0; border-radius:3px 0 0 3px;
    background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 88%,#fff),var(--accent)); }
  .tmeter-reserve{ position:absolute; left:0; top:0; bottom:0;
    background:repeating-linear-gradient(45deg,rgba(120,132,152,.28) 0 5px,transparent 5px 10px); }
  .tmeter-notch{ position:absolute; top:0; bottom:0; width:1px; background:var(--lg-surface-0); opacity:.6; }
  .tmeter-legend{ display:flex; flex-wrap:wrap; gap:16px; margin-top:8px; font-family:var(--pn-mono,monospace); font-size:9.5px;
    font-weight:700; letter-spacing:.06em; color:var(--rust-ink-55); }
  .tmeter-legend span{ display:inline-flex; align-items:center; gap:6px; }
  .tmeter-legend i{ width:11px; height:8px; border-radius:2px; flex:none; }
  .tmeter-legend .k-fill{ background:var(--accent); }
  .tmeter-legend .k-res{ background:repeating-linear-gradient(45deg,rgba(120,132,152,.5) 0 3px,transparent 3px 6px); border:1px solid var(--lg-hair-neutral); }

  /* ══ THE QUERY / SWAP window — Finder glass, ranked bench, override in-window ═══════════════════ */
  .pn-deptq{ position:fixed; inset:0; z-index:10090; display:flex; align-items:center; justify-content:center; padding:24px; }
  .pn-deptq .dq-scrim{ position:absolute; inset:0; background:rgba(6,9,15,.66);
    -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); animation:dqFade .22s ease both; }
  .dq-card{ position:relative; z-index:2; width:min(520px,94vw); max-height:86vh; overflow:auto; padding-bottom:20px !important; animation:dqRise .34s cubic-bezier(.2,.8,.25,1) both; }
  .dq-basis{ margin:0 0 14px; font-family:var(--pn-sans,sans-serif); font-size:12.5px; line-height:1.5; color:var(--lg-ink-dim,rgba(234,241,251,.62)); }
  .lg-light .dq-basis{ color:#6b6157; }
  .dq-list{ display:flex; flex-direction:column; gap:6px; }
  .dq-row{ display:grid; grid-template-columns:auto 30px minmax(0,1fr) 74px auto auto auto; align-items:center; gap:10px;
    width:100%; text-align:left; appearance:none; cursor:pointer; padding:8px 10px; border-radius:8px;
    background:var(--lg-surface-3); border:1px solid var(--lg-hair-neutral); transition:border-color .16s,transform .12s,background .16s; }
  .dq-row:hover{ transform:translateY(-1px); border-color:color-mix(in srgb,var(--accent) 52%,var(--lg-hair-neutral)); }
  .dq-row.is-on{ border-color:color-mix(in srgb,var(--accent) 62%,transparent); background:color-mix(in srgb,var(--accent) 9%,var(--lg-surface-3)); }
  .dq-row.is-titled{ box-shadow:inset 3px 0 0 color-mix(in srgb,var(--t-B) 70%,transparent); }
  .dq-rank{ font-family:var(--pn-mono,monospace); font-size:10px; font-weight:700; color:var(--lg-ink-dim,rgba(234,241,251,.5)); }
  .lg-light .dq-rank{ color:#8a7a68; }
  .dq-face{ width:30px; height:34px; object-fit:cover; object-position:center top; filter:grayscale(1) contrast(1.18); border-radius:2px; }
  .dq-who{ min-width:0; display:flex; flex-direction:column; gap:1px; }
  .dq-who b{ font-family:var(--pn-sans,sans-serif); font-weight:800; font-size:13px; color:var(--lg-ink,#eef3fb); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .lg-light .dq-who b{ color:#241f1b; }
  .dq-who i{ font-style:normal; font-family:var(--pn-mono,monospace); font-size:8.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--lg-ink-dim,rgba(234,241,251,.55)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .lg-light .dq-who i{ color:#6b6157; }
  /* CEO-62 — the lane tag. States WHY a read is what it is, in the row's own mono voice. Owner reads
     accent (this is their desk), out-of-lane recedes, compromised warns. 11px so it clears the phone
     type floor the rest of the game already holds. */
  .dq-lane{ font-style:normal; font-weight:800; font-size:11px; letter-spacing:.1em; }
  .dq-lane.is-owner{ color:var(--accent); }
  .dq-lane.is-out{ color:var(--lg-ink-dim,rgba(234,241,251,.42)); }
  .dq-lane.is-comp{ color:#ffb86b; }
  /* the bench window never had the phone type floor either — rank, read and the action label all sat
     at 8.5-10px on the screen where you pick your team. */
  @media (max-width:900px){
    .dq-who i, .dq-rank, .dq-read, .dq-do{ font-size:11px !important; letter-spacing:.06em !important; }
  }
  .dq-bar{ height:6px; border-radius:3px; background:rgba(150,162,184,.16); overflow:hidden; }
  .lg-light .dq-bar{ background:rgba(40,33,24,.12); }
  .dq-bar>i{ display:block; height:100%; border-radius:3px; }
  .dq-bar>i.tier-A{background:var(--t-A)} .dq-bar>i.tier-B{background:var(--t-B)} .dq-bar>i.tier-C{background:rgba(150,162,184,.5)} .dq-bar>i.tier-D{background:var(--t-D)}
  .dq-sk{ font-family:var(--pn-mono,monospace); font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; text-align:right; }
  .dq-read{ font-family:var(--pn-mono,monospace); font-size:8.5px; font-weight:800; letter-spacing:.1em; padding:2px 6px; border-radius:2px; }
  .dq-read.read-strong{ color:var(--t-A); border:1px solid color-mix(in srgb,var(--t-A) 40%,transparent); }
  .dq-read.read-ok{ color:var(--rust-ink-55,#9aa4b4); border:1px solid var(--lg-hair-neutral); }
  .dq-read.read-thin{ color:var(--t-D); border:1px solid color-mix(in srgb,var(--t-D) 40%,transparent); }
  .dq-do{ font-family:var(--pn-mono,monospace); font-size:8.5px; font-weight:800; letter-spacing:.1em; color:var(--accent); white-space:nowrap; }
  .dq-row.is-on .dq-do{ color:var(--lg-ink-dim,rgba(234,241,251,.5)); }
  .dq-foot-note{ margin:14px 0 0; font-family:var(--pn-mono,monospace); font-size:9.5px; letter-spacing:.04em; color:var(--lg-ink-dim,rgba(234,241,251,.5)); }
  .lg-light .dq-foot-note{ color:#8a7a68; }
  @media(max-width:520px){ .dq-row{ grid-template-columns:auto 26px minmax(0,1fr) auto auto; gap:8px } .dq-bar,.dq-do{ display:none } }
  @keyframes dqFade{from{opacity:0}to{opacity:1}}
  @keyframes dqRise{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){ .dq-scrim,.dq-card{animation:none} }

  /* ══ SQUAD-BUILD OVERLAY — Finder window + PN/OS DM bubbles (kill the iMessage green) ═══════════ */
  .fc-panel{ background:linear-gradient(168deg,var(--lg-s1-top),var(--lg-s1-bot)) !important;
    border:1px solid var(--lg-hair-neutral) !important; border-radius:16px !important;
    box-shadow:var(--lg-elev-2) !important; }
  .fc-head{ background:var(--lg-surface-0) !important; color:var(--rust-ink) !important;
    border-bottom:1px solid var(--lg-hair-neutral) !important; }
  .fc-head b{ color:var(--rust-ink) !important; } .fc-head .fc-sub{ color:var(--rust-ink-55) !important; }
  .fc-prog{ background:var(--lg-hair-neutral) !important; } .fc-prog>i{ background:var(--accent) !important; }
  .fc-skip{ background:transparent !important; color:var(--rust-ink) !important; border:1px solid var(--lg-hair-neutral) !important; border-radius:4px !important; }
  .fc-skip:hover{ border-color:var(--accent) !important; color:var(--accent) !important; background:transparent !important; }
  .fc-log{ background:transparent !important; }
  .fc-sys{ background:var(--rust-ink-08) !important; color:var(--rust-ink-55) !important; }
  .fc-bub{ background:var(--lg-surface-3) !important; border:1px solid var(--lg-hair-neutral) !important; border-radius:12px !important; border-top-left-radius:3px !important; box-shadow:var(--lg-elev-1) !important; }
  .fc-msg.me .fc-bub{ background:linear-gradient(166deg,var(--lg-s2-top),var(--lg-s2-bot)) !important; border-color:var(--lg-hair-neutral) !important; border-radius:12px !important; border-top-right-radius:3px !important; }
  .fc-nm{ color:var(--accent) !important; } .fc-txt{ color:var(--rust-ink) !important; } .fc-nm i{ color:var(--rust-ink-55) !important; }
  .fc-angle .fc-bub{ background:linear-gradient(166deg,var(--lg-s2-top),var(--lg-s2-bot)) !important; border-color:color-mix(in srgb,var(--accent) 40%,var(--lg-hair-neutral)) !important; }
  .fc-angle .fc-nm{ color:var(--accent) !important; }
  .fc-typing span{ background:var(--rust-ink-40) !important; }
  /* the establishing band stays a dark cinematic still in BOTH themes by design (white title reads AA
     over the scrim) — only its seam follows the theme hairline. */
  .fc-establish{ border-bottom:1px solid var(--lg-hair-neutral) !important; }

  /* ══ PITCH READY — CTA sizing: UI type in the button (never display type squeezed into a pill) ══ */
  .pn-ready-actions{ display:flex !important; flex-direction:column !important; align-items:center !important; gap:14px !important;
    width:auto !important; max-width:none !important; }
  .pn-ready-go{ width:auto !important; min-width:min(420px,86vw); max-width:min(520px,92vw);
    font-family:var(--pn-sans,sans-serif) !important; font-weight:800 !important;
    font-size:clamp(17px,2.3vw,22px) !important; letter-spacing:.01em !important; text-transform:none !important;
    line-height:1.1 !important; padding:18px 30px !important; white-space:nowrap !important; }
  .pn-ready-go .pnr-arrow{ font-size:1em !important; margin-left:.5em !important; }
  .pn-ready-tweak{ width:auto !important; min-width:min(420px,86vw); font-size:14px !important; padding:13px 24px !important; }
  /* the Tweak-it secondary sits on the dark scrim — explicit porcelain ink + a VISIBLE neutral hairline */
  .pn-ready .pn-ready-tweak.pn-btn--secondary{ color:#f4f7fb !important;
    background:rgba(255,255,255,.09) !important; border:1px solid rgba(255,255,255,.34) !important;
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
  .pn-ready .pn-ready-tweak.pn-btn--secondary:hover{ background:rgba(255,255,255,.17) !important; border-color:rgba(255,255,255,.55) !important; color:#fff !important; }
  .pn-ready-eyebrow::before,.pn-ready-eyebrow::after{ background:currentColor; }

  /* ════════ SCROLL FIX (2026-07-08) — "can't scroll and hire" ════════
     The old app-shell locked the office to the viewport (body{overflow:hidden;height:100%}) and
     relied on .hub-view.on{overflow:auto} as the inner scroller. My mVC grid override made
     .hud-main overflow:visible + unbounded, so .hub-view.on grew to full content height and its
     inner scroll never engaged — with body still overflow:hidden, NOTHING scrolled and anything
     below the fold (e.g. the hire buttons) was unreachable. Fix: let the office page scroll
     naturally. The rail nav is position:sticky so it stays put; the sticky topbar stays too. */
  html:has(body[data-view="office"]),html:has(body[data-view="pitch"]){height:auto !important;overflow:visible !important}
  body[data-view="office"],body[data-view="pitch"]{
    overflow:visible !important;overflow-y:auto !important;height:auto !important;min-height:100% !important;
  }
  /* #app was height:calc(100vh-60px);overflow:hidden — the actual viewport cap. Grow it to fit
     content (keep the flex-row so the feed rail still sits beside the main column). */
  body[data-view="office"] #app{
    height:auto !important;min-height:calc(100vh - 80px) !important;overflow:visible !important;
  }
  body[data-view="office"] .hud-main{overflow:visible !important;height:auto !important}
  body[data-view="office"] .hub-view.on{overflow:visible !important;min-height:0 !important;height:auto !important}
  body[data-view="office"] .hub-body{overflow:visible !important;height:auto !important}
  /* the in-flow feed rail: don't let it stretch to the full (tall) content height — pin it to the
     viewport so it stays a compact side rail while the main column scrolls past it. */
  body[data-view="office"] #app>.feed-rail{align-self:flex-start !important;position:sticky !important;top:70px !important;
    /* bottom was 100vh-18px → it crashed UNDER the 15px iPad bezel; pull it up so the rail bottom clears
       the frame with breathing room (Layout Law §3). */
    height:calc(100vh - 118px) !important;max-height:calc(100vh - 118px) !important}

  /* ════════ TEAM screen finesse (2026-07-08) ════════
     The budget + squad-overview panels were hardcoded to dark-theme colours (#fff / #8fa1ba on
     dark fills) so on the light Concrete Rust theme they read as faint, flat, near-invisible —
     Jon's "flat and weak". Bridge them to the theme tokens + give the numbers real Heming
     presence, matching the KPI tiles on Performance. */
  /* budget tiles → real glass KPI tiles */
  body[data-view="office"] .hire-budget.mvc-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
  body[data-view="office"] .hb-kpi{padding:16px 18px 14px}
  body[data-view="office"] .hb-kpi .mvc-kpi-v{font-size:28px;margin:8px 0 4px;font-weight:400;color:var(--mvc-fg)}
  body[data-view="office"] .hb-kpi .mvc-kpi-v.up{color:var(--mvc-green)}
  body[data-view="office"] .hb-kpi .mvc-kpi-v.dn{color:var(--mvc-red)}
  body[data-view="office"] .hb-kpi .hb-per{font-family:var(--mvc-f);font-size:.5em;font-weight:600;color:var(--mvc-fg-55)}
  body[data-view="office"] .hb-kpi-sub{font-size:11.5px;color:var(--mvc-fg-55);font-family:var(--mvc-f)}
  @media(max-width:1180px){ body[data-view="office"] .hire-budget.mvc-kpi-row{grid-template-columns:repeat(2,1fr)} }
  @media(max-width:520px){ body[data-view="office"] .hire-budget.mvc-kpi-row{grid-template-columns:1fr} }
  /* squad overview cells → prominent Heming numbers on theme glass */
  body[data-view="office"] .squad-ov .so-cell{
    background:linear-gradient(160deg,var(--glass-a),var(--glass-b)) !important;
    border:1px solid var(--mvc-brd) !important;border-radius:14px !important;padding:14px 16px !important;
    backdrop-filter:blur(20px) saturate(150%) !important;box-shadow:0 1px 2px rgba(0,0,0,.05) !important;
  }
  body[data-view="office"] .squad-ov .so-cell b,body[data-view="office"] .squad-ov .so-cell b.mvc-num{
    font-family:var(--mvc-disp) !important;font-size:30px !important;font-weight:400 !important;color:var(--mvc-fg) !important;line-height:1 !important}
  body[data-view="office"] .squad-ov .so-cell b .u,body[data-view="office"] .squad-ov .so-cell .cur{
    font-family:var(--mvc-f) !important;font-size:13px !important;color:var(--mvc-fg-55) !important;font-weight:600 !important}
  body[data-view="office"] .squad-ov .so-cell span{color:var(--mvc-fg-55) !important;font-weight:700 !important}
  body[data-view="office"] .squad-ov .so-cell.warn b{color:var(--mvc-red) !important}
  /* department-coverage chips → real theme pills */
  body[data-view="office"] .squad-cover .cov{
    background:var(--track) !important;border:1px solid var(--mvc-brd) !important;color:var(--mvc-fg-70) !important;
    border-radius:999px !important;padding:6px 13px !important;font-weight:600 !important}
  body[data-view="office"] .squad-cover .cov b{color:var(--p2) !important;font-weight:800 !important}
  body[data-view="office"] .squad-cover .cov em{color:var(--mvc-fg-40) !important}
  body[data-view="office"] .squad-cover .cov.thin{border-color:var(--mvc-red) !important;color:var(--mvc-red) !important}
  body[data-view="office"] .squad-cover .cov.thin em{color:var(--mvc-red) !important}

  /* ════════ FEED RAIL — "THE WIRE": a classified live-feed object, not a card-wall (2026-07-16, Vero-UI) ════════
     De-slopped per UX_RULES §12 (anti-slop) + §11 (motion-on-everything). CEO verdict on the old rail:
     "this feed is poor ai slop" — a stack of grey rounded modules. Rebuilt as ONE glass rail with a
     burnt-orange (--p) SPINE down its leading edge, mono tactical eyebrows, HAIRLINE rules (no nested
     boxes), a single loud CASH readout (Heming hero), an intercepted dispatch, a numbered field manual,
     and a classified event log whose newest row runs live. All tokenised → repaints per theme (§5) and
     reads AA in light + dark (§1). Numbers count up / rows wire in via pn-motion (§11). */
  body[data-view="office"] .feed-rail{
    background:linear-gradient(180deg,var(--glass-a),var(--glass-b)) !important;
    border:1px solid var(--mvc-brd) !important;border-radius:14px !important;overflow:hidden !important;
    box-shadow:var(--glass-shadow) !important;backdrop-filter:blur(26px) saturate(150%) !important;
  }
  body[data-view="office"] .feed-rail.closed{width:46px !important;border-left:1px solid var(--lg-hair-neutral,rgba(128,132,140,.2)) !important}
  body[data-view="office"] .feed-rail .fr-tab{color:var(--mvc-fg-55) !important}
  body[data-view="office"] .feed-rail.closed .fr-tab{gap:12px !important}
  body[data-view="office"] .feed-rail .fr-tab-lbl{color:var(--mvc-fg-70) !important;letter-spacing:.28em !important}
  body[data-view="office"] .fr-dot{background:var(--p) !important;animation:frPulse 2.4s ease-out infinite !important}
  /* THE SPINE — a burnt-orange rule down the open panel's leading edge (the signature) */
  body[data-view="office"] .feed-rail .fr-panel{border-left:1px solid var(--lg-hair-neutral,rgba(128,132,140,.2)) !important}
  /* channel title bar — a mono terminal header */
  body[data-view="office"] .fr-head{
    color:var(--mvc-fg) !important;font-family:var(--mono) !important;align-items:center !important;gap:8px !important;
    border-bottom:1px solid var(--mvc-brd) !important;padding:13px 14px !important}
  body[data-view="office"] .ft-dot{width:7px !important;height:7px !important;border-radius:50% !important;background:var(--p) !important;box-shadow:0 0 8px var(--p) !important;animation:frPulse 2.4s ease-out infinite !important}
  body[data-view="office"] .fr-head-t{font:800 11px/1 var(--mono) !important;letter-spacing:.22em !important;text-transform:uppercase !important;color:var(--mvc-fg) !important}
  body[data-view="office"] .fr-head-tag{font:700 9px/1 var(--mono) !important;letter-spacing:.14em !important;color:var(--mvc-fg-55) !important;padding:3px 6px !important;border:1px solid var(--mvc-brd) !important;border-radius:3px !important}
  /* the collapse glyph is a borderless mono chevron — ID-scoped so it beats the office
     button:not(...) catch-all (~0,7,2 !important) that would otherwise box it; keeps the hairline system pure */
  body[data-view="office"] #frClose.fr-x{margin-left:auto !important;background:none !important;border:none !important;border-radius:0 !important;padding:0 !important;color:var(--mvc-fg-55) !important}
  body[data-view="office"] #frClose.fr-x:hover{background:none !important;border:none !important;color:var(--p) !important}
  body[data-view="office"] .fr-list{padding:0 !important}
  /* ── STATUS: the classified readout (hairline-ruled sections, zero nested cards) ── */
  body[data-view="office"] .fr-status{padding:14px 15px 4px !important;display:flex !important;flex-direction:column !important;gap:14px !important;background:transparent !important;border:none !important}
  body[data-view="office"] .fr-chan{display:flex !important;align-items:baseline !important;justify-content:space-between !important;gap:8px !important;padding-bottom:11px !important;border-bottom:1px solid var(--mvc-brd) !important}
  body[data-view="office"] .fr-chan-ey{font:700 8.5px/1.3 var(--mono) !important;letter-spacing:.14em !important;color:var(--mvc-fg-55) !important;text-transform:uppercase !important}
  body[data-view="office"] .fr-chan-meta{font:700 8.5px/1 var(--mono) !important;letter-spacing:.1em !important;color:var(--mvc-fg-70) !important;white-space:nowrap !important}
  /* CASH — the ONE loud figure: Heming hero (tabular, un-slashed 0) with a burnt-orange baseline tick */
  body[data-view="office"] .fr-cash{display:flex !important;flex-direction:column !important;gap:6px !important;padding-bottom:13px !important;border-bottom:1px solid var(--mvc-brd) !important;position:relative !important}
  body[data-view="office"] .fr-cash-k{font:700 9px/1 var(--mono) !important;letter-spacing:.18em !important;color:var(--mvc-fg-55) !important;text-transform:uppercase !important}
  body[data-view="office"] .fr-cash-v{display:flex !important;align-items:baseline !important;gap:2px !important;font-family:var(--mvc-disp) !important;font-size:37px !important;line-height:.85 !important;color:var(--mvc-fg) !important;font-weight:400 !important;letter-spacing:-.01em !important;font-variant-numeric:tabular-nums !important;font-feature-settings:"zero" 0,"tnum" 1 !important}
  body[data-view="office"] .fr-cash-cur{font-size:21px !important;color:var(--p) !important;font-family:var(--mvc-disp) !important}
  body[data-view="office"] .fr-cash::after{content:"" !important;position:absolute !important;left:0 !important;bottom:-1px !important;width:34px !important;height:2px !important;background:var(--p) !important}
  /* REP / CLIENTS / WEEK — a hairline-divided mono readout strip (no boxes) */
  body[data-view="office"] .fr-mini{display:grid !important;grid-template-columns:repeat(3,1fr) !important}
  body[data-view="office"] .frm{display:flex !important;flex-direction:column !important;gap:4px !important;padding:1px 11px !important;border-left:1px solid var(--mvc-brd) !important}
  body[data-view="office"] .frm:first-child{padding-left:0 !important;border-left:none !important}
  body[data-view="office"] .frm-k{font:700 8px/1 var(--mono) !important;letter-spacing:.14em !important;color:var(--mvc-fg-55) !important}
  body[data-view="office"] .frm-v{font-family:var(--mvc-disp) !important;font-size:20px !important;line-height:1 !important;color:var(--mvc-fg) !important;font-weight:400 !important;font-variant-numeric:tabular-nums !important;font-feature-settings:"zero" 0,"tnum" 1 !important}
  /* INTERCEPT dispatch — spine + mono tag + editorial line, flush (NOT a rounded quote card) */
  body[data-view="office"] .fr-street{background:transparent !important;border:none !important;border-left:1px solid var(--lg-hair-neutral,rgba(128,132,140,.2)) !important;border-radius:0 !important;padding:1px 0 1px 12px !important}
  body[data-view="office"] .frs-tag{display:block !important;font:800 8px/1 var(--mono) !important;letter-spacing:.16em !important;color:var(--p2) !important;margin-bottom:6px !important;text-transform:uppercase !important}
  body[data-view="office"] .fr-street p{margin:0 !important;font:italic 400 13px/1.5 var(--mvc-f) !important;color:var(--mvc-fg-70) !important}
  /* FIELD MANUAL — numbered (CSS counter), hairline rows, one loud GOT IT */
  body[data-view="office"] .fr-tips{display:flex !important;flex-direction:column !important;gap:0 !important;counter-reset:frt !important;border-top:1px solid var(--mvc-brd) !important;padding-top:11px !important}
  body[data-view="office"] .fr-tips-hd{font:800 8.5px/1 var(--mono) !important;letter-spacing:.18em !important;color:var(--mvc-fg-55) !important;text-transform:uppercase !important;margin-bottom:8px !important}
  body[data-view="office"] .frt{counter-increment:frt !important;font:400 12px/1.45 var(--mvc-f) !important;color:var(--mvc-fg-55) !important;padding:8px 0 8px 26px !important;border:none !important;border-bottom:1px solid var(--mvc-brd) !important;background:none !important;border-radius:0 !important;position:relative !important}
  body[data-view="office"] .frt::before{content:counter(frt,decimal-leading-zero) !important;position:absolute !important;left:0 !important;top:9px !important;font:800 9px/1 var(--mono) !important;letter-spacing:.05em !important;color:var(--p) !important}
  body[data-view="office"] .frt b{color:var(--mvc-fg) !important;font-weight:700 !important}
  /* GOT IT — the ONE loud CTA: solid burnt-orange, white ink. ID-scoped so the office button:not(...)
     catch-all (~0,7,2 !important) can't strip its fill back to a transparent hairline box (AA: white on --p). */
  body[data-view="office"] #fsGotit.frt-got{align-self:flex-start !important;margin-top:11px !important;display:inline-flex !important;align-items:center !important;gap:7px !important;font:800 10px/1 var(--mono) !important;letter-spacing:.14em !important;color:#fff !important;background:var(--p) !important;border:none !important;border-radius:4px !important;padding:9px 15px !important;cursor:pointer !important;transform:none !important}
  body[data-view="office"] #fsGotit.frt-got:hover{background:var(--p) !important;border:none !important;color:#fff !important;filter:brightness(1.08) !important}
  body[data-view="office"] #fsGotit.frt-got:hover .frt-got-ar{transform:translateX(3px) !important}
  body[data-view="office"] .frt-got-ar{transition:transform .16s ease !important}
  /* EVENT LOG — divider header with a live count */
  body[data-view="office"] .fr-feedhdr{display:flex !important;align-items:center !important;justify-content:space-between !important;font:800 9px/1 var(--mono) !important;letter-spacing:.18em !important;color:var(--mvc-fg-55) !important;text-transform:uppercase !important;padding:14px 15px 9px !important;border-top:1px solid var(--mvc-brd) !important;margin-top:6px !important;background:rgba(var(--glow),.04) !important}
  body[data-view="office"] .fr-feedhdr-c{color:var(--mvc-fg-70) !important;font-weight:800 !important}
  /* THE WIRE — event rows: connector tick + hairline; the newest row runs live (--p bar + pulse) */
  body[data-view="office"] .fr-log{padding:0 0 8px !important}
  body[data-view="office"] .fr-item{display:flex !important;gap:9px !important;align-items:flex-start !important;color:var(--mvc-fg-70) !important;font-family:var(--mvc-f) !important;font-size:12px !important;line-height:1.4 !important;padding:9px 15px !important;border-bottom:1px solid var(--mvc-brd) !important;background:none !important;border-radius:0 !important;position:relative !important}
  body[data-view="office"] .fri-tick{flex:none !important;width:5px !important;height:5px !important;margin-top:5px !important;border-radius:50% !important;background:var(--mvc-fg-30) !important}
  body[data-view="office"] .fri-txt{min-width:0 !important}
  body[data-view="office"] .fr-item[data-fresh]{background:rgba(var(--glow),.06) !important}
  body[data-view="office"] .fr-item[data-fresh]::before{content:"" !important;position:absolute !important;left:0 !important;top:0 !important;bottom:0 !important;width:2px !important;background:var(--p) !important}
  body[data-view="office"] .fr-item[data-fresh] .fri-tick{background:var(--p) !important;box-shadow:0 0 7px var(--p) !important;animation:frPulse 2.4s ease-out infinite !important}
  body[data-view="office"] .fr-item-empty{color:var(--mvc-fg-40) !important;font-style:italic !important;background:none !important}
  body[data-view="office"] .fr-item-empty .fri-tick{background:var(--mvc-fg-30) !important;animation:none !important}
  /* the LIVE pulse (channel dot + freshest tick) — one shared ring; killed on reduced-motion */
  @keyframes frPulse{0%{box-shadow:0 0 0 0 rgba(var(--glow),.5)}70%{box-shadow:0 0 0 6px rgba(var(--glow),0)}100%{box-shadow:0 0 0 0 rgba(var(--glow),0)}}
  @media(prefers-reduced-motion:reduce){
    body[data-view="office"] .fr-dot,body[data-view="office"] .ft-dot,body[data-view="office"] .fr-item[data-fresh] .fri-tick{animation:none !important}
  }

  /* ═══════════════════════════════════════════════════════════════════════════════════════════
     CEO BATCH 2026-07-16 (Vero Lane C) — ITEMS 2 & 6 · THE FINDER-GLASS WINDOW STANDARD + OCCLUSION
     ONE window component for every popup. The mac-Finder chrome (traffic-light bar) + a real glass
     body (backdrop blur+saturate) sits over a scrim that FULLY occludes what's beneath — no double-
     exposure, and the topbar never bleeds over an active overlay. Gated vs UX_RULES §1 (AA) + §2.
     .bigmodal-card is the canon (toastBig · pnConfirm · week-summary · CFO-hire · welcome · vc);
     .pn-window is its alias for net-new popups; .coo-card + the CFO window adopt it too.
     ═══════════════════════════════════════════════════════════════════════════════════════════ */
  /* — OCCLUSION LAW: the shared scrim heavily blurs + darkens beneath, and outranks the topbar (z20) — */
  .bigmodal{ background:rgba(5,8,14,.85) !important; backdrop-filter:blur(16px) saturate(112%) !important;
    -webkit-backdrop-filter:blur(16px) saturate(112%) !important; z-index:10050 !important; }
  .coo-overlay{ background:rgba(5,8,14,.85) !important; backdrop-filter:blur(16px) saturate(112%) !important;
    -webkit-backdrop-filter:blur(16px) saturate(112%) !important; z-index:10050 !important; }
  /* the CFO/COO/help windows also live above the topbar */
  #__cfoOverlay{ z-index:10060 !important; }
  /* — THE GLASS WINDOW (dark-glass default): frosted panel, hairline highlight, deep soft shadow — */
  .bigmodal-card, .pn-window, .coo-card{
    background:linear-gradient(168deg, rgba(30,43,64,.86), rgba(12,19,31,.92)) !important;
    -webkit-backdrop-filter:blur(30px) saturate(150%); backdrop-filter:blur(30px) saturate(150%);
    border:1px solid rgba(255,255,255,.14) !important;
    box-shadow:0 44px 110px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.09) !important;
  }
  /* — LIGHT-GLASS VARIANT (porcelain) via token — used by the welcome digest + any .pn-window--light — */
  .pn-window--light, #toast.wb-modal .bigmodal-card{
    background:linear-gradient(168deg, rgba(252,250,247,.9), rgba(238,232,222,.94)) !important;
    border:1px solid rgba(20,14,8,.14) !important; color:#241f1b !important;
    box-shadow:0 44px 110px rgba(40,28,14,.4), inset 0 1px 0 rgba(255,255,255,.6) !important;
  }
  /* — TRAFFIC-LIGHT TITLE BAR: canonical, glassy, red dot is a real close control (§2) — */
  .mac-titlebar{ background:rgba(255,255,255,.05) !important; border-bottom:1px solid rgba(255,255,255,.12) !important;
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
  .pn-window--light .mac-titlebar, #toast.wb-modal .mac-titlebar{ background:rgba(20,14,8,.04) !important; border-bottom:1px solid rgba(20,14,8,.1) !important; }
  .mac-tb-title{ color:rgba(234,241,251,.62) !important; }
  .pn-window--light .mac-tb-title, #toast.wb-modal .mac-tb-title{ color:#8a7a68 !important; }
  .mac-tb-dot.red{ box-shadow:inset 0 0 0 .5px rgba(0,0,0,.18); }
  .mac-tb-dot.red:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
  /* — CFO/COO windows adopt the standard chrome; their readout rows read AA on the glass — */
  .coo-card{ border-top:none !important; padding-top:0 !important; overflow:hidden; }
  .coo-card .mac-titlebar{ margin:0 -28px 16px; }
  #__cfoOverlay .cfo-row .cr-lbl, .coo-card .cfo-row .cr-lbl{ color:rgba(226,236,248,.72) !important; }
  /* CFO snapshot as a centred Finder window (was a floating popover) */
  #__cfoOverlay{ position:fixed !important; top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
    min-width:0 !important; display:flex !important; align-items:center; justify-content:center; padding:24px;
    background:rgba(5,8,14,.85) !important; -webkit-backdrop-filter:blur(16px) saturate(112%); backdrop-filter:blur(16px) saturate(112%);
    border:0 !important; box-shadow:none !important; animation:bmFade .18s ease both; }
  #__cfoOverlay .pn-window{ width:min(440px,100%); border-radius:12px; overflow:hidden; }
  #__cfoOverlay .cfo-body{ padding:20px 26px 22px; }
  #__cfoOverlay h4{ display:none; }
  @media(prefers-reduced-motion:reduce){ .bigmodal-card,.pn-window,.coo-card,#__cfoOverlay{animation:none !important} }

  /* ═══════════════════════════════════════════════════════════════════════════════════════════
     CEO BATCH 2026-07-16 (Vero Lane C) — ITEM 7 · THE INTERVIEW = ONE FIXED WINDOW
     A designed dark cinematic seam (UX_RULES §5). Geometry is LOCKED across Q1–Q8 (the window never
     resizes); ONE persistent clip of Marlowe watching you fills the film side; content swaps in fixed
     slots on the right. Generous space, real block rhythm (coordinator "less crushed" law).
     ═══════════════════════════════════════════════════════════════════════════════════════════ */
  /* CEO 2026-07-16 (Vero-UI, branch pn-interrogation-window) — THE INTERROGATION IS A FINDER WINDOW.
     CEO verbatim: "I liked the finder window approach — keep this for the questionnaire and make it
     more elegant." The question flow now lives in the canonized .pn-window Apple-Finder glass chrome
     (mac traffic-light bar + glass body) floating on a dark cinematic scene → reads as a window over a
     scene, not a full-bleed HUD (UX_RULES §10). DECLUTTERED: the REC · INTERROGATION chrome, the
     "FILE 01 // 08" header clutter, the on-film name plate, the heavy scanlines and the footer hint
     are gone. ONE persistent clip of Marlowe watching fills the film side; only the QUESTION swaps.
     The needle is demoted to a quiet slim strip. Hero = one focal question · four clean answer cards ·
     her watching. UX_RULES §1 (AA) / §3 (no 390 h-scroll) / §4 (clean motion) / §10 (Finder window). */
  .vc-backdrop{ position:fixed; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(120% 82% at 50% -12%, rgba(157,67,0,.17), transparent 56%),
               radial-gradient(100% 100% at 50% 118%, rgba(4,6,11,0), rgba(4,6,11,.92)),
               linear-gradient(162deg,#0a0f18,#05080e); }
  .vc-backdrop::before{ content:""; position:absolute; inset:0;
    background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px); background-size:16px 16px; opacity:.45; }
  .vc-backdrop::after{ content:"INTERROGATION"; position:absolute; left:50%; top:48%;
    transform:translate(-50%,-50%) rotate(-4deg); white-space:nowrap; text-transform:uppercase;
    font:italic 900 21vw/1 var(--mvc-disp,'Archivo Black',sans-serif); letter-spacing:-.05em; color:rgba(255,255,255,.02); }
  /* THE WINDOW — .pn-window glass chrome + titlebar; geometry LOCKED across Q1–Q8 (never resizes). */
  .vc-room{ position:relative; z-index:1; display:flex; flex-direction:column;
    width:min(980px,100%); height:min(84vh,700px); margin:min(6vh,52px) auto 0; border-radius:14px; overflow:hidden; }
  .vc-room .mac-titlebar{ flex:none; }
  .vc-room-inner{ flex:1 1 auto; display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,1fr); min-height:0; }
  .vc-room-film{ position:relative; overflow:hidden; background:#05080e; min-height:0; }
  .vc-room-vid,.vc-room-still{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    object-position:center 28%; filter:grayscale(.3) contrast(1.06) brightness(.92); }
  .vc-room-still{ z-index:0; transition:opacity .6s; }
  .vc-room-vid{ z-index:1; }
  .vc-room-grade{ position:absolute; inset:0; z-index:2; pointer-events:none;
    background:linear-gradient(90deg,rgba(7,11,18,0) 60%,rgba(7,11,18,.6) 100%),
               linear-gradient(180deg,rgba(7,11,18,.34) 0%,rgba(7,11,18,0) 34%,rgba(7,11,18,.44) 100%); }
  /* the content panel (glass over the scene) — fixed regions so nothing jumps: head · body(flex) · meter */
  .vc-room-panel{ display:flex; flex-direction:column; padding:24px 30px 22px; min-height:0;
    border-left:1px solid rgba(255,255,255,.09); background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 32%); }
  .vc-room-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex:none; margin-bottom:14px; }
  .vc-room-kick{ font-family:var(--mono),monospace; font-size:10px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); }
  .vc-dots{ display:flex; gap:5px; flex:none; }
  .vc-dot{ width:14px; height:3px; border-radius:2px; background:rgba(255,255,255,.16); transition:background .3s,width .3s; }
  .vc-dot.done{ background:rgba(255,255,255,.4); }
  .vc-dot.on{ width:22px; background:var(--accent); box-shadow:0 0 10px rgba(var(--glow),.55); }
  /* ⛔ QA 2026-08-11 (#1): on desktop, Q6's long question pushed the 4th answer UNDER the meter —
     visible in the box model, un-hittable by elementFromPoint, and a scoring-relevant choice
     silently vanished from the game. overflow:visible on a fixed-height flex column doesn't grow
     the panel; it just paints the overflow underneath the next block. The body scrolls instead:
     every answer is always reachable, whatever the question's length. */
  .vc-room-body{ flex:1 1 auto; display:flex; flex-direction:column; min-height:0; overflow-y:auto; }
  .vc-beat{ font-style:italic; font-size:12.5px; line-height:1.45; color:rgba(226,236,248,.64); margin:0 0 10px; flex:none; }
  .vc-beat b{ color:rgba(255,255,255,.9); font-style:normal; font-weight:700; }
  .vc-q{ font-family:var(--mvc-disp,'Archivo Black',Inter,sans-serif); font-weight:900; font-size:clamp(21px,2.2vw,30px);
    line-height:1.05; letter-spacing:-.02em; color:#fff; margin:0 0 15px; text-wrap:balance; flex:none; }
  .vc-q--hero{ font-size:clamp(30px,4vw,50px); font-style:italic; text-transform:uppercase; line-height:.98; }
  .vc-hl{ color:var(--accent); }
  .vc-answers{ display:flex; flex-direction:column; gap:8px; margin:0; overflow-y:auto; padding-right:4px; min-height:0; }
  .vc-ans{ display:block; width:100%; text-align:left; padding:11px 15px; border-radius:11px;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); color:#eef4fc !important;
    font-size:14.5px; line-height:1.4; font-weight:600; cursor:pointer; transition:background .14s,border-color .14s,transform .1s; }
  .vc-ans:hover,.vc-ans:focus-visible{ background:rgba(var(--glow),.15); border-color:var(--accent); transform:translateX(3px); outline:none; }
  .vc-intro{ font-size:clamp(15px,1.6vw,18px); line-height:1.55; font-style:italic; color:#eaf1fb; margin:4px 0 20px; min-height:5.2em; }
  .vc-cta-row{ margin:2px 0 14px; }
  .vc-begin{ font-size:14px; }
  .vc-fine{ font-size:11.5px; line-height:1.45; color:rgba(226,236,248,.55); margin:12px 0 0; flex:none; }
  .vc-fine i{ color:rgba(226,236,248,.72); }
  /* THE NEEDLE — demoted to a quiet slim strip pinned at the bottom of the panel (a real mechanic, not HUD noise) */
  .vc-room-meter{ flex:none; margin-top:13px; padding-top:12px; border-top:1px solid rgba(255,255,255,.08); }
  .vc-room-meter .roommeter{ margin:0; }
  .vc-room-meter .roommeter .lbl{ color:rgba(226,236,248,.6); margin-bottom:5px; }
  .vc-room-meter .roommeter .lbl span,.vc-room-meter .roomverdict{ color:#eaf1fb !important; }
  .vc-room-meter .roomtrack{ height:9px; }
  .vc-room-meter .roomverdict{ font-size:10.5px; margin-top:6px; }
  @media(max-width:820px){
    .vc-room{ width:min(560px,100%); height:auto; min-height:0; margin:16px auto 24px; }
    .vc-room-inner{ grid-template-columns:1fr; }
    .vc-room-film{ height:196px; }
    .vc-room-panel{ padding:20px 18px 22px; border-left:none; border-top:1px solid rgba(255,255,255,.09); }
    .vc-answers{ overflow:visible; }
    .vc-backdrop::after{ font-size:34vw; }
  }
  @media(prefers-reduced-motion:reduce){ .vc-dot,.vc-ans,.vc-room-still{ transition:none } }

  /* ── ITEM 8 (CEO 2026-07-16, Lane C) — THE BACKED VERDICT: muted clip + her words as CAPTIONS ──
     She doesn't speak; her verdict reveals as subtitle-style captions over a scrim (AA), typewritten.
     SEED CHEQUE stays the loud type moment. Buttons rebuilt: primary = brand burnt-orange + WHITE ink
     (AA 5.9:1 — the old maroon .primary failed the button law); LinkedIn = clean on-system secondary. */
  .vc-captions{ position:absolute; left:0; right:0; bottom:0; z-index:4; padding:30px 32px 24px;
    display:flex; flex-direction:column; gap:7px; align-items:flex-start; pointer-events:none;
    background:linear-gradient(180deg,rgba(5,8,14,0),rgba(5,8,14,.55) 45%,rgba(5,8,14,.9)); }
  .vc-cap{ max-width:88%; font-size:clamp(15px,1.9vw,21px); line-height:1.38; font-weight:600; color:#fff;
    text-shadow:0 2px 14px rgba(0,0,0,.85); }
  .vc-cap--lead{ font-weight:900; letter-spacing:-.01em; font-size:clamp(17px,2.2vw,25px); color:#fff; }
  .vc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:14px 26px; border-radius:12px;
    font-family:var(--pn-sans,Inter,sans-serif); font-size:14.5px; font-weight:800; letter-spacing:.01em; cursor:pointer;
    border:1px solid transparent; transition:transform .12s,filter .14s,background .14s,border-color .14s; }
  .vc-btn:hover{ transform:translateY(-1px); }
  .vc-btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
  .vc-btn--primary{ background:#a83e00; color:#fff !important; box-shadow:0 12px 32px rgba(168,62,0,.4); }
  .vc-btn--primary:hover{ filter:brightness(1.1); }
  .vc-btn--li{ background:transparent; color:#eaf1fb !important; border:1px solid rgba(255,255,255,.3); }
  .vc-btn--li svg path{ fill:#eaf1fb; }
  .vc-btn--li:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
  .vc-prob{ font-size:13px; line-height:1.5; color:#ffb27a; margin:0 0 14px; }
  .vc-prob b{ color:#fff; }
  @media(prefers-reduced-motion:reduce){ .vc-btn{ transition:none } }
  /* SEED CHEQUE = the loud type moment, pulled top-right so the bottom captions never bury it */
  .vc-verdict .vc-overlay{ left:auto; right:22px; bottom:auto; top:52px; padding:0; z-index:5; text-align:right; }
  .vc-verdict .vc-cheque{ align-items:flex-end; padding:10px 16px; border-radius:12px;
    background:linear-gradient(160deg,rgba(5,8,14,.5),rgba(5,8,14,.32)); backdrop-filter:blur(4px);
    border:1px solid rgba(255,255,255,.14); box-shadow:0 10px 30px rgba(0,0,0,.4); }
  .vc-verdict .vc-cheque span{ color:var(--accent); font-weight:800; }
  .vc-verdict .vc-cheque b{ font-size:clamp(30px,4.4vw,44px); }
  @media(max-width:640px){ .vc-verdict .vc-overlay{ top:46px; right:14px } .vc-verdict .vc-cheque b{ font-size:30px } }

  /* ── SHE SPEAKS (CEO 2026-08-11: "I want to see and HEAR Marlowe giving me a speech") ──────
     The audio control for her verdict speech. Three rules it exists to obey:
       · It sits BOTTOM-RIGHT, opposite the captions, which are left-aligned at max-width 88%.
         The captions are pointer-events:none, so nothing above it eats the tap — but it still
         has to be somewhere the eye is not reading, or it competes with her own words.
       · 44px minimum box and an 11px type floor, because this is the same mobile law the audit
         enforces everywhere else and a control on a video is exactly where that gets forgotten.
       · It is a SECONDARY control. The primary action on this screen is founding the agency;
         the voice plays by itself when it can, and this button exists for the times autoplay is
         refused. It must read as available, never as the thing to press. */
  .vc-voice{ position:absolute; right:14px; bottom:14px; z-index:6;
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    min-height:44px; min-width:44px; padding:0 14px; border-radius:22px;
    font-family:var(--pn-sans,Inter,sans-serif); font-size:12.5px; font-weight:800; letter-spacing:.02em;
    color:#eaf1fb; background:rgba(5,8,14,.62); border:1px solid rgba(255,255,255,.28);
    backdrop-filter:blur(6px); cursor:pointer; transition:background .14s,border-color .14s; }
  .vc-voice:hover{ background:rgba(5,8,14,.82); border-color:#fff; }
  .vc-voice:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
  .vc-voice span{ font-size:14px; line-height:1; opacity:.9; }
  @media(max-width:640px){ .vc-voice{ right:10px; bottom:10px; font-size:11.5px; padding:0 12px } }
  @media(prefers-reduced-motion:reduce){ .vc-voice{ transition:none } }
  /* ⛔ RESERVE THE ROW, do not trust it to be free. The captions are bottom-anchored and grow
     upward at max-width 88%, so the LAST line runs straight through where this button sits —
     on a 960px card the caption's right edge lands at ~877px and the button starts at ~836px.
     Because the captions are pointer-events:none the button still works, which is worse: it
     looks like overlapping text and nobody catches it. So the caption block reserves the row
     (button height 44 + its offset), and the two can never collide at any width.
     Only when she is actually speaking — the button exists only then. */
  .vc-stage:has(.vc-voice) .vc-captions{ padding-bottom:72px; }
  @media(max-width:640px){ .vc-stage:has(.vc-voice) .vc-captions{ padding-bottom:64px } }

  /* ═══════════════════════════════════════════════════════════════════════════════════════════
     CEO BATCH 2026-07-16 (Vero Lane C) — ITEMS 3 · 4 · 5 (chrome-only sweeps)
     ═══════════════════════════════════════════════════════════════════════════════════════════ */
  /* ── ITEM 3 · DARK-ON-DARK / LIGHT-ON-LIGHT SWEEP (non-pitch) — explicit AA ink on every theme ──
     The week-clock chip was pinned near-white (.58 α) → invisible on the two LIGHT themes. Now ink
     is chosen per theme, AA on the chip in all four. Ghost/utility controls get an AA floor too. */
  .game-clock{ color:rgba(236,242,251,.82) !important; background:rgba(255,255,255,.08); }
  /* SUPERSEDED 2026-07-25 (FIX 4) — this rule keyed the chip's ink off the THEME, but the topbar is
     only LIGHT on office / week-summary / pitch; on the VAULT, Season Pass, meet-team and result it
     stays dark glass in every theme. So in a light theme the Vault's "WK1 MON 18:00" chip printed
     near-black ink on a near-black plate. Scoped to the bars that are actually light; the deeper AA
     re-pin (both directions, every time-of-day tint) is in the FIX 4 block at the end of this sheet. */
  body.mvc-light[data-view="office"] .game-clock,
  body.mvc-light[data-view="weeksummary"] .game-clock,
  body.mvc-light[data-view="pitch"] .game-clock{ color:rgba(20,27,40,.82) !important; background:rgba(11,28,48,.07) !important; }
  /* topbar utility pills — ghost treatment must still pass AA (quiet ≠ invisible). Dark themes → light
     ink; light themes already handled by the shipped batch. The wipe-save danger pill keeps ≥AA too. */
  body:not(.mvc-light) .topbar .tb-btn{ color:rgba(236,242,251,.9); }
  body:not(.mvc-light) .topbar .tb-danger{ opacity:.62; }
  body:not(.mvc-light) .topbar .tb-danger:hover{ opacity:1; }

  /* ── ITEM 4 · iPAD FRAME INNER GUTTER (Layout Law §3, RECURRING — CEO: "the inner grey framing is
     crashing the dashboard content — add more spacing around the edge overall") ────────────────────
     The graphite bezel is 15px thick (6px ≤880) with a 26px corner radius; a consistent safe-area on
     EVERY side keeps the topbar, hero band, KPI row, the right-hand Live-Feed rail and the last card
     off the frame, both widths. Root cause of the recurrence: the office #app bottom padding was 12px —
     UNDER the 15px bezel — so content ran off the bottom edge; the sides now also carry more breathing
     room per the CEO note. Values clear the bezel + rounded corners with margin. ── */
  body.pn-folio #app,body.pn-folio .wrap{ padding-left:max(34px,2.6vw); padding-right:max(34px,2.6vw); }
  body.pn-folio[data-view="office"] #app{ padding-left:max(40px,3vw) !important; padding-right:max(40px,3vw) !important;
    padding-top:18px !important; padding-bottom:30px !important; }
  body.pn-folio .topbar{ padding-left:max(32px,2.4vw); padding-right:max(32px,2.4vw); padding-top:6px; }
  @media(max-width:880px){
    body.pn-folio #app,body.pn-folio .wrap{ padding-left:18px; padding-right:18px; }
    body.pn-folio[data-view="office"] #app{ padding-left:18px !important; padding-right:18px !important; padding-bottom:22px !important; }
    body.pn-folio .topbar{ padding-left:16px; padding-right:16px; }
  }
  /* CEO 2026-07-25 ("pages become useless when I can't scroll to the bottom"): the folio overrides
     above squeeze #app's bottom padding to 22-30px — but with the PN/OS dock on, the fixed dock bar
     overlays ~100px of the screen bottom, burying the last row of action buttons (POACH RAIDS etc.).
     CLASS FIX: whenever the dock is mounted, every folio view keeps enough bottom clearance to scroll
     the final controls fully above the bar. Wins the office override on specificity (0,4,1). */
  body.pn-folio.pnos-dock-on #app{ padding-bottom:172px !important; }
  body.pn-folio.pnos-dock-on[data-view="office"] #app{ padding-bottom:172px !important; }
  @media(max-width:880px){
    body.pn-folio.pnos-dock-on #app,
    body.pn-folio.pnos-dock-on[data-view="office"] #app{ padding-bottom:150px !important; }
  }

  /* ── ITEM 5 · NEW-BUSINESS / HUB NAV — more elegant, legible labels, never double-stacks ──
     The section rail (Performance · Floor · NBOs · Clients · Hires · Season) is the nav the CEO called
     "messy": inactive labels sat sub-AA and the row wrapped into two stacked lines on some widths. Now
     it holds ONE row (horizontal scroll on narrow, never wrap) and every label clears AA. */
  body[data-view="office"] .hub-nav{ flex-wrap:nowrap !important; }
  body:not(.mvc-light)[data-view="office"] .hub-tab{ color:rgba(226,235,248,.82) !important; }
  body:not(.mvc-light)[data-view="office"] .hub-tab:hover{ color:#fff !important; }
  body.mvc-light[data-view="office"] .hub-tab{ color:rgba(24,31,44,.82) !important; }
  @media(max-width:760px){
    body[data-view="office"] .hud-main>.hub-nav{ flex-wrap:nowrap !important; overflow-x:auto !important;
      scrollbar-width:none; -ms-overflow-style:none; }
    body[data-view="office"] .hud-main>.hub-nav::-webkit-scrollbar{ display:none; }
    body[data-view="office"] .hub-advance{ flex:0 0 auto !important; width:auto !important; order:0 !important; }
  }
  /* UX_RULES §3 belt-and-braces: kill the last few px of decorative bleed overflow at the narrowest
     widths so there is NEVER horizontal scroll at 320 (clip, not hidden → no scroll container). */
  @media(max-width:420px){ html{ overflow-x:clip; } }

  /* ══════════════════════════════════════════════════════════════════════════════════════════
     SCREENS UNIT 1 (s1-) — COO · CFO (+ Report to Marlowe) · Season additions.
     Self-contained token set → guaranteed AA in BOTH themes (dark cinematic default, .mvc-light
     porcelain repaint). Reads the game --accent (worn-collection recolour) with a safe orange
     fallback. Full-screen VIEWS (COO/CFO) carry NO Finder chrome (UX_RULES §10); popups inside
     them (Report to Marlowe) DO. Motion via data-pn-reveal / data-pn-count (pn-motion.js).
     ══════════════════════════════════════════════════════════════════════════════════════════ */
  /* token set — defined on BOTH the full-screen views and the Marlowe overlay (which is appended to
     body separately, so it can't inherit the view's custom props) */
  .s1-screen, .s1-mrl-over{
    --s1-accent:var(--accent,#f97316);
    --s1-bg:#070d16; --s1-bg2:#0d1826; --s1-ink:#eef4fc; --s1-ink2:#c3d2e6; --s1-muted:#8ba0ba;
    --s1-panel:rgba(255,255,255,.045); --s1-panel2:rgba(255,255,255,.028);
    --s1-edge:rgba(255,255,255,.11); --s1-edge2:rgba(255,255,255,.07);
    --s1-good:#3ddc84; --s1-warn:#ffb638; --s1-bad:#ff6a55; --s1-grid:rgba(255,255,255,.06);
  }
  .s1-screen{
    position:fixed; inset:0; z-index:9500; overflow-y:auto; overflow-x:hidden;
    background:
      radial-gradient(120% 80% at 82% -6%, color-mix(in srgb, var(--s1-accent) 15%, transparent), transparent 60%),
      linear-gradient(168deg, var(--s1-bg2), var(--s1-bg) 72%);
    color:var(--s1-ink);
    font:15px/1.55 Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Arial;
    -webkit-font-smoothing:antialiased;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .34s ease;
  }
  .s1-screen.on{ opacity:1; visibility:visible; pointer-events:auto; }
  body.mvc-light .s1-screen, body.mvc-light .s1-mrl-over{
    /* WARM BONE repaint (CEO 2026-07-23): the CFO/COO full-screen views were cool blue-grey
       (#eef1f8 canvas · #111925 cool-slate ink · navy-tinted panels) — repaint to the warm-bone
       family so they match the pn-glass .lg-light ladder + the office porcelain. Panels now LIFT
       off the deeper bone canvas (a light warm ivory fill, not a recessing dark navy tint). */
    --s1-bg:#e4dbca; --s1-bg2:#f2ecdf; --s1-ink:#241f1b; --s1-ink2:#524a40; --s1-muted:#6b6157;
    --s1-panel:rgba(255,252,246,.66); --s1-panel2:rgba(255,251,244,.42);
    --s1-edge:rgba(58,44,26,.16); --s1-edge2:rgba(58,44,26,.09);
    --s1-good:#178a4c; --s1-warn:#a3610a; --s1-bad:#c0392b; --s1-grid:rgba(58,44,26,.10);
  }
  /* the plates LIFT off the bone canvas with a soft warm elevation (ΔL law) — clip-free panels/notes
     only; .s1-scn is clip-pathed so its shadow would clip (fill + hairline carry its separation). */
  body.mvc-light .s1-panel, body.mvc-light .s1-note{
    box-shadow:0 2px 6px rgba(74,54,28,.07), 0 14px 30px -20px rgba(74,54,28,.22);
  }
  .s1-screen::-webkit-scrollbar{ width:10px } .s1-screen::-webkit-scrollbar-thumb{ background:var(--s1-edge); border-radius:10px }
  /* grain + halftone wash so it reads art-directed, never a flat SaaS pane */
  .s1-screen::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
    background:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px); background-size:4px 4px; mix-blend-mode:overlay; }
  body.mvc-light .s1-screen::before{ background:radial-gradient(rgba(58,44,26,.05) 1px, transparent 1.4px); background-size:4px 4px; mix-blend-mode:multiply; opacity:.6; }
  .s1-wrap{ position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:26px clamp(18px,4vw,40px) 64px; overflow-x:clip; }
  @media(max-width:520px){ .s1-wrap{ padding:20px 16px 52px; } }

  /* giant faint bleed word behind the header (SST motif #4) — clipped by .s1-wrap so it never scrolls */
  .s1-bleed{ position:absolute; top:-2vh; right:0; z-index:0; pointer-events:none;
    font:900 italic 26vw/.8 Inter,sans-serif; letter-spacing:-.06em; text-transform:uppercase;
    color:var(--s1-ink); opacity:.035; white-space:nowrap; max-width:100%; }

  /* header */
  .s1-top{ position:relative; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; }
  .s1-eye{ font:800 10px/1.4 var(--mono),monospace; letter-spacing:.24em; text-transform:uppercase; color:var(--s1-accent); display:block; }
  .s1-h{ margin:6px 0 0; font:900 italic clamp(30px,6vw,54px)/.86 Inter,sans-serif; letter-spacing:-.045em; text-transform:uppercase; color:var(--s1-ink); }
  .s1-h em{ color:var(--s1-accent); font-style:italic; }
  .s1-sub{ margin:9px 0 0; max-width:62ch; color:var(--s1-ink2); font-size:13.5px; line-height:1.55; }
  .s1-close{ flex:none; appearance:none; display:inline-flex; align-items:center; gap:8px; cursor:pointer;
    font:800 11px/1 var(--mono),monospace; letter-spacing:.14em; text-transform:uppercase;
    color:var(--s1-ink); background:var(--s1-panel); border:1px solid var(--s1-edge); border-radius:2px; padding:11px 15px;
    clip-path:polygon(0 0, 100% 0, 100% 100%, 9px 100%, 0 calc(100% - 9px)); transition:.16s; }
  .s1-close:hover{ background:var(--s1-accent); border-color:var(--s1-accent); color:#0b1c30; transform:translateY(-1px); }
  .s1-close svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.4; }

  /* dashboard grid + panels */
  .s1-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .s1-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  @media(max-width:820px){ .s1-grid-2,.s1-grid-3{ grid-template-columns:1fr; } }
  .s1-row{ margin-top:14px; }
  .s1-panel{ position:relative; background:var(--s1-panel); border:1px solid var(--s1-edge); border-radius:3px;
    padding:16px 18px; overflow:hidden; }
  .s1-panel.tall{ display:flex; flex-direction:column; }
  .s1-panel--accent{ border-left:3px solid var(--s1-accent); }
  .s1-ph{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px; }
  .s1-ph .s1-eye{ color:var(--s1-muted); }
  .s1-ph-n{ font:900 13px/1 Inter,sans-serif; letter-spacing:.02em; text-transform:uppercase; color:var(--s1-ink); }

  /* mono ledger */
  .s1-ledger{ display:flex; flex-direction:column; }
  .s1-lrow{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:7px 0; border-bottom:1px solid var(--s1-edge2); }
  .s1-lrow:last-child{ border-bottom:0; }
  .s1-lk{ font:600 12px/1.3 Inter,sans-serif; color:var(--s1-ink2); }
  .s1-lv{ font:800 15px/1 var(--mono),monospace; font-variant-numeric:tabular-nums; letter-spacing:-.01em; color:var(--s1-ink); white-space:nowrap; }
  .s1-lv.s1-good{ color:var(--s1-good); } .s1-lv.s1-warn{ color:var(--s1-warn); } .s1-lv.s1-bad{ color:var(--s1-bad); }

  /* big hero figure (count-up) */
  .s1-figure{ display:flex; flex-direction:column; gap:2px; }
  .s1-fig-v{ font:900 italic clamp(34px,5vw,46px)/.9 Inter,sans-serif; letter-spacing:-.03em; color:var(--s1-ink); font-variant-numeric:tabular-nums; }
  .s1-fig-v .cur{ font-size:.62em; color:var(--s1-accent); vertical-align:.06em; margin-right:2px; }
  .s1-fig-lbl{ font:700 10px/1.3 var(--mono),monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--s1-muted); }

  /* gauges (arc) */
  .s1-gauges{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .s1-gauge{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 0; }
  .s1-gauge svg{ width:100%; max-width:132px; height:auto; display:block; }
  .s1-gauge .g-track{ stroke:var(--s1-edge); }
  .s1-gauge .g-val{ stroke:var(--s1-accent); stroke-linecap:round; }
  .s1-gauge .g-num{ font:900 20px var(--mono),monospace; fill:var(--s1-ink); font-variant-numeric:tabular-nums; }
  .s1-gauge .g-lbl{ font:700 9.5px var(--mono),monospace; letter-spacing:.14em; text-transform:uppercase; fill:var(--s1-muted); }

  /* sparkline / line chart */
  .s1-chart{ width:100%; height:auto; display:block; overflow:visible; }
  .s1-chart .c-grid{ stroke:var(--s1-grid); stroke-width:1; }
  .s1-chart .c-axis{ stroke:var(--s1-edge); stroke-width:1; }
  .s1-chart .c-line{ fill:none; stroke:var(--s1-accent); stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round; }
  .s1-chart .c-line.proj{ stroke-dasharray:5 5; opacity:.85; }
  .s1-chart .c-fill{ opacity:.14; }
  .s1-chart .c-dot{ fill:var(--s1-accent); }
  .s1-chart .c-death{ fill:var(--s1-bad); }
  .s1-chart .c-death-ring{ fill:none; stroke:var(--s1-bad); stroke-width:2; }
  .s1-chart .c-lbl{ font:700 9px var(--mono),monospace; letter-spacing:.08em; fill:var(--s1-muted); text-transform:uppercase; }
  .s1-chart .c-lbl.death{ fill:var(--s1-bad); font-weight:900; }
  .s1-chart .c-zero{ stroke:var(--s1-bad); stroke-width:1; stroke-dasharray:3 4; opacity:.7; }

  /* bar charts (win-rate, burn-vs-billings, payroll) */
  .s1-bars{ display:flex; align-items:flex-end; gap:8px; height:120px; padding-top:8px; }
  .s1-bar{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; height:100%; justify-content:flex-end; }
  .s1-bar-stack{ width:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; flex:1; gap:3px; min-height:0; }
  .s1-bar-fill{ width:76%; max-width:34px; border-radius:2px 2px 0 0; background:var(--s1-accent); transform-origin:bottom; }
  .s1-bar-fill.burn{ background:var(--s1-bad); } .s1-bar-fill.bill{ background:var(--s1-good); }
  .s1-bar-lbl{ font:700 9px var(--mono),monospace; letter-spacing:.06em; color:var(--s1-muted); text-transform:uppercase; }
  .s1-legend{ display:flex; gap:16px; flex-wrap:wrap; margin-top:10px; }
  .s1-leg{ display:inline-flex; align-items:center; gap:6px; font:700 10px var(--mono),monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--s1-muted); }
  .s1-leg i{ width:11px; height:11px; border-radius:2px; display:inline-block; }
  .s1-leg.burn i{ background:var(--s1-bad); } .s1-leg.bill i{ background:var(--s1-good); }
  .s1-leg.won i{ background:var(--s1-good); } .s1-leg.lost i{ background:var(--s1-bad); }

  /* payroll / client rows with inline share bars */
  .s1-row-bar{ display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:center; padding:8px 0; border-bottom:1px solid var(--s1-edge2); }
  .s1-row-bar:last-child{ border-bottom:0; }
  .s1-rb-name{ font:700 13px Inter,sans-serif; color:var(--s1-ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .s1-rb-sub{ font:600 10.5px var(--mono),monospace; letter-spacing:.04em; color:var(--s1-muted); text-transform:uppercase; }
  .s1-rb-v{ font:800 14px var(--mono),monospace; font-variant-numeric:tabular-nums; color:var(--s1-ink); text-align:right; white-space:nowrap; }
  .s1-rb-track{ grid-column:1/-1; height:5px; border-radius:3px; background:var(--s1-edge2); overflow:hidden; }
  .s1-rb-track i{ display:block; height:100%; border-radius:3px; background:var(--s1-accent); transform-origin:left; }

  /* sector imagery plates */
  .s1-plates{ display:flex; gap:8px; flex-wrap:wrap; }
  .s1-plate{ position:relative; width:96px; height:64px; border-radius:3px; overflow:hidden; border:1px solid var(--s1-edge); flex:none; }
  .s1-plate img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.15) brightness(.86); }
  .s1-plate .s1-plate-tag{ position:absolute; left:0; bottom:0; right:0; padding:3px 6px;
    font:800 8px var(--mono),monospace; letter-spacing:.1em; text-transform:uppercase; color:#fff;
    background:linear-gradient(0deg,rgba(0,0,0,.82),transparent); }
  .s1-plate::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--s1-accent) 0%,transparent); transition:.16s; }
  .s1-plate:hover::after{ box-shadow:inset 0 0 0 2px var(--s1-accent); }

  /* concern flags */
  .s1-flags{ display:flex; flex-direction:column; gap:0; }
  .s1-flag{ display:flex; align-items:flex-start; gap:10px; padding:8px 0; border-bottom:1px solid var(--s1-edge2); font-size:13.5px; line-height:1.5; color:var(--s1-ink2); }
  .s1-flag:last-child{ border-bottom:0; }
  .s1-flag .s1-dot{ width:8px; height:8px; border-radius:50%; flex:none; margin-top:6px; }
  .s1-flag.red .s1-dot{ background:var(--s1-bad); } .s1-flag.amber .s1-dot{ background:var(--s1-warn); } .s1-flag.good .s1-dot{ background:var(--s1-good); }
  .s1-flag.red{ color:var(--s1-ink); }

  /* assessment / comment notes */
  .s1-note{ background:var(--s1-panel2); border:1px solid var(--s1-edge2); border-left:3px solid var(--s1-accent); border-radius:3px; padding:13px 15px; }
  .s1-note.cfo{ border-left-color:var(--s1-good); }
  .s1-note-h{ font:800 11px var(--mono),monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--s1-ink); margin-bottom:7px; display:flex; align-items:center; gap:6px; }
  .s1-note p{ margin:0 0 6px; font-size:13.5px; line-height:1.55; color:var(--s1-ink2); }
  .s1-note p:last-child{ margin-bottom:0; }
  .s1-note b{ color:var(--s1-ink); }

  /* scenario strip (CFO) */
  .s1-scenarios{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; }
  .s1-scn{ position:relative; background:var(--s1-panel2); border:1px solid var(--s1-edge2); border-radius:3px; padding:12px 14px;
    clip-path:polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
  .s1-scn-tag{ font:700 9px var(--mono),monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--s1-muted); }
  .s1-scn-move{ font:800 14px Inter,sans-serif; color:var(--s1-ink); margin:5px 0 3px; line-height:1.3; }
  .s1-scn-out{ font:800 14px var(--mono),monospace; font-variant-numeric:tabular-nums; }
  .s1-scn-out.good{ color:var(--s1-good); } .s1-scn-out.bad{ color:var(--s1-bad); } .s1-scn-out.warn{ color:var(--s1-warn); }

  /* CFO death-week callout */
  .s1-death-card{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .s1-death-fig{ font:900 italic clamp(26px,4vw,36px)/.9 Inter,sans-serif; letter-spacing:-.02em; }
  .s1-death-fig.bad{ color:var(--s1-bad); } .s1-death-fig.good{ color:var(--s1-good); }
  .s1-death-note{ font-size:12.5px; color:var(--s1-ink2); max-width:40ch; line-height:1.5; }

  /* ── Report to Marlowe — a Finder-glass compose popup (UX_RULES §10) ── */
  .s1-mrl-cta{ appearance:none; cursor:pointer; display:inline-flex; align-items:center; gap:9px;
    font:800 12px var(--mono),monospace; letter-spacing:.1em; text-transform:uppercase; color:#0b1c30;
    background:var(--s1-accent); border:0; border-radius:2px; padding:13px 20px;
    clip-path:polygon(0 0, 100% 0, 100% 100%, 13px 100%, 0 calc(100% - 13px)); transition:.16s; }
  .s1-mrl-cta:hover{ filter:brightness(1.08); transform:translateY(-1px); box-shadow:6px 6px 0 color-mix(in srgb,var(--s1-accent) 40%,transparent); }
  /* CEO 2026-07-31 (defect 5, "dark text on dark buttons — really?"): on LIGHT themes the live
     --accent deepens to rust #b4380d (applyCosmetics), so the near-black #0b1c30 ink this button
     hard-coded landed dark-on-dark (~1.6:1). Per the SST + UX Law 1 the burnt-orange light fill
     carries WHITE ink (#fff on #b4380d = 4.66:1 AA). Dark themes keep #0b1c30 on bright orange —
     that IS the AA pairing there (#0b1c30 on #ff6a2b = 7.3:1) and is not touched. */
  body.mvc-light .s1-mrl-cta{ color:#fff; text-shadow:0 1px 1.5px rgba(74,26,0,.45); }
  .s1-mrl-cta svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; }
  .s1-mrl-over{ position:fixed; inset:0; z-index:9620; display:flex; align-items:center; justify-content:center; padding:20px;
    background:rgba(4,7,12,.74); backdrop-filter:blur(10px) saturate(1.1); -webkit-backdrop-filter:blur(10px) saturate(1.1);
    opacity:0; transition:opacity .28s ease; }
  .s1-mrl-over.on{ opacity:1; }
  .s1-mrl-win{ width:min(680px,100%); max-height:92vh; overflow-y:auto;
    background:linear-gradient(168deg, color-mix(in srgb,var(--s1-bg2) 88%, #101c2c), var(--s1-bg));
    border:1px solid var(--s1-edge); border-radius:12px; box-shadow:0 40px 120px rgba(0,0,0,.6);
    color:var(--s1-ink); }
  body.mvc-light .s1-mrl-win{ background:linear-gradient(168deg,#fdfaf3,#f2ecdf); }
  .s1-mrl-tb{ display:flex; align-items:center; gap:8px; padding:11px 15px; border-bottom:1px solid var(--s1-edge2); }
  .s1-mrl-tb .d{ width:12px; height:12px; border-radius:50%; }
  .s1-mrl-tb .d.r{ background:#ff5f57; } .s1-mrl-tb .d.a{ background:#febc2e; } .s1-mrl-tb .d.g{ background:#28c840; }
  .s1-mrl-tb .t{ margin-left:8px; font:700 11px var(--mono),monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--s1-muted); }
  .s1-mrl-body{ padding:18px 20px 22px; }
  .s1-mrl-head{ display:flex; gap:14px; align-items:center; margin-bottom:16px; }
  .s1-mrl-face{ width:56px; height:56px; border-radius:4px; object-fit:cover; border:1px solid var(--s1-edge); filter:grayscale(.3) contrast(1.05); flex:none; }
  .s1-mrl-name{ font:900 italic 20px Inter,sans-serif; letter-spacing:-.02em; color:var(--s1-ink); }
  .s1-mrl-role{ font:700 9.5px var(--mono),monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--s1-accent); }
  .s1-mrl-lbl{ font:800 10px var(--mono),monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--s1-muted); margin:16px 0 8px; display:block; }
  .s1-mrl-warn{ font-size:12px; color:var(--s1-warn); line-height:1.5; margin:4px 0 0; }
  .s1-stats{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  @media(max-width:520px){ .s1-stats{ grid-template-columns:1fr; } }
  .s1-stat-chip{ display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none;
    background:var(--s1-panel2); border:1px solid var(--s1-edge2); border-radius:3px; padding:10px 12px; transition:.14s; }
  .s1-stat-chip:hover{ border-color:var(--s1-edge); }
  .s1-stat-chip.on{ border-color:var(--s1-accent); background:color-mix(in srgb,var(--s1-accent) 10%, transparent); }
  .s1-stat-chip.dis{ opacity:.42; cursor:not-allowed; }
  .s1-stat-box{ width:18px; height:18px; border-radius:3px; border:1.5px solid var(--s1-edge); flex:none; display:flex; align-items:center; justify-content:center; }
  .s1-stat-chip.on .s1-stat-box{ background:var(--s1-accent); border-color:var(--s1-accent); }
  .s1-stat-box svg{ width:12px; height:12px; stroke:#0b1c30; stroke-width:3; fill:none; opacity:0; }
  .s1-stat-chip.on .s1-stat-box svg{ opacity:1; }
  .s1-stat-main{ min-width:0; flex:1; }
  .s1-stat-k{ font:700 11px Inter,sans-serif; color:var(--s1-ink); display:flex; align-items:center; gap:6px; }
  .s1-stat-v{ font:800 13px var(--mono),monospace; font-variant-numeric:tabular-nums; color:var(--s1-ink2); }
  .s1-trend{ font:800 8px var(--mono),monospace; letter-spacing:.06em; padding:1px 5px; border-radius:2px; text-transform:uppercase; }
  .s1-trend.up{ color:var(--s1-good); background:color-mix(in srgb,var(--s1-good) 16%,transparent); }
  .s1-trend.down{ color:var(--s1-bad); background:color-mix(in srgb,var(--s1-bad) 16%,transparent); }
  .s1-trend.flat{ color:var(--s1-muted); background:var(--s1-edge2); }
  .s1-tones{ display:flex; gap:8px; flex-wrap:wrap; }
  .s1-tone{ flex:1 1 160px; cursor:pointer; text-align:left; background:var(--s1-panel2); border:1px solid var(--s1-edge2); border-radius:3px; padding:11px 13px; transition:.14s; }
  .s1-tone:hover{ border-color:var(--s1-edge); }
  .s1-tone.on{ border-color:var(--s1-accent); background:color-mix(in srgb,var(--s1-accent) 10%,transparent); }
  .s1-tone-n{ font:800 10px var(--mono),monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--s1-accent); }
  .s1-tone-l{ font:500 12.5px/1.45 Inter,sans-serif; color:var(--s1-ink2); margin-top:5px; font-style:italic; }
  .s1-mrl-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:20px; flex-wrap:wrap; }
  .s1-btn-ghost{ appearance:none; cursor:pointer; font:800 11px var(--mono),monospace; letter-spacing:.1em; text-transform:uppercase;
    color:var(--s1-ink2); background:transparent; border:1px solid var(--s1-edge); border-radius:2px; padding:12px 18px; transition:.14s; }
  .s1-btn-ghost:hover{ color:var(--s1-ink); border-color:var(--s1-edge); background:var(--s1-panel); }
  .s1-btn-send{ appearance:none; cursor:pointer; font:800 11px var(--mono),monospace; letter-spacing:.1em; text-transform:uppercase;
    color:#0b1c30; background:var(--s1-accent); border:0; border-radius:2px; padding:12px 22px; transition:.14s;
    clip-path:polygon(0 0, 100% 0, 100% 100%, 11px 100%, 0 calc(100% - 11px)); }
  .s1-btn-send:hover{ filter:brightness(1.08); transform:translateY(-1px); }
  .s1-btn-send:disabled{ opacity:.4; cursor:not-allowed; transform:none; filter:none; }
  /* Marlowe verdict card */
  .s1-verdict{ display:flex; flex-direction:column; gap:14px; }
  .s1-verdict-media{ width:100%; border-radius:6px; overflow:hidden; border:1px solid var(--s1-edge); background:#000; aspect-ratio:16/9; }
  .s1-verdict-media video,.s1-verdict-media img{ width:100%; height:100%; object-fit:cover; display:block; }
  .s1-verdict-txt{ font:500 15px/1.6 Inter,sans-serif; color:var(--s1-ink); }
  .s1-verdict-txt.caught{ color:var(--s1-bad); }
  .s1-verdict-shift{ font:800 13px var(--mono),monospace; letter-spacing:.06em; padding:8px 12px; border-radius:3px; display:inline-flex; align-items:center; gap:8px; align-self:flex-start; }
  .s1-verdict-shift.up{ color:var(--s1-good); background:color-mix(in srgb,var(--s1-good) 14%,transparent); }
  .s1-verdict-shift.down{ color:var(--s1-bad); background:color-mix(in srgb,var(--s1-bad) 14%,transparent); }
  .s1-verdict-shift.flat{ color:var(--s1-muted); background:var(--s1-edge2); }

  /* ── SEASON additions (s1-) — loop explainer · next-rung checklist · WahWahs finale countdown ── */
  .s1-sea-loop{ display:flex; align-items:center; gap:12px; padding:12px 16px; margin-top:-2px;
    background:rgba(var(--glow),.07); border:1px solid rgba(var(--glow),.22);
    border-left:1px solid var(--lg-hair-neutral,rgba(128,132,140,.2)); border-radius:3px; }
  .s1-sea-loop svg{ width:22px; height:22px; flex:none; stroke:var(--accent,#f97316); fill:none; stroke-width:1.8; }
  .s1-sea-loop b{ color:var(--accent,#f97316); }
  .s1-nr-crit{ display:grid; grid-template-columns:auto 1fr auto; gap:3px 10px; align-items:center; padding:9px 0; }
  .s1-nr-crit + .s1-nr-crit{ border-top:1px solid var(--s1-edge2,rgba(255,255,255,.07)); }
  .s1-nr-tick{ width:20px; height:20px; border-radius:50%; border:1.5px solid currentColor; display:flex; align-items:center; justify-content:center; font-size:11px; }
  .s1-nr-crit.pass .s1-nr-tick{ color:#3ddc84; }
  .s1-nr-k{ font:700 13px Inter,sans-serif; }
  .s1-nr-v{ font:800 13px var(--mono),monospace; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .s1-nr-bar{ grid-column:1/-1; height:6px; border-radius:3px; overflow:hidden; margin-top:3px; background:rgba(130,150,175,.18); }
  .s1-nr-bar i{ display:block; height:100%; border-radius:3px; transform-origin:left; background:var(--accent,#f97316); }
  .s1-nr-crit.pass .s1-nr-bar i{ background:#3ddc84; }
  .s1-nr-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:4px; }
  .s1-nr-count{ font:700 10px var(--mono),monospace; letter-spacing:.12em; text-transform:uppercase; }
  .s1-finale{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; }
  @media(max-width:560px){ .s1-finale{ grid-template-columns:1fr; } }
  .s1-finale-count{ text-align:center; padding:8px 18px; border-right:1px solid rgba(130,150,175,.25); }
  @media(max-width:560px){ .s1-finale-count{ border-right:0; border-bottom:1px solid rgba(130,150,175,.25); padding-bottom:14px; } }
  .s1-finale-n{ font:900 italic 46px/.86 Inter,sans-serif; letter-spacing:-.03em; color:var(--accent,#f97316); font-variant-numeric:tabular-nums; }
  .s1-finale-u{ font:700 9px var(--mono),monospace; letter-spacing:.18em; text-transform:uppercase; }
  .s1-finale-bar{ height:8px; border-radius:4px; overflow:hidden; margin-top:10px; position:relative; background:rgba(130,150,175,.18); }
  .s1-finale-bar i{ display:block; height:100%; border-radius:4px; background:var(--accent,#f97316); transform-origin:left; }
  .s1-finale-bar span{ position:absolute; top:0; bottom:0; width:2px; background:rgba(255,255,255,.35); }
  /* Season lives inside the dashboard render (no s1Animate) — its bars grow via a one-shot keyframe */
  @keyframes s1-grow-x{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
  .s1-nr-bar i, .s1-finale-bar i{ animation:s1-grow-x .9s cubic-bezier(.22,.61,.36,1) both; }
  @media(prefers-reduced-motion:reduce){ .s1-nr-bar i,.s1-finale-bar i{ animation:none; } }

  /* HARDENING — the office view's `body[data-view=office] button:not(...)` catch-all (≈0,9,2 + !important)
     would repaint every s1 button flat + pill-shaped. Scoping under the view IDs (ID specificity beats it)
     lets our system buttons win, per SST §5e "system classes always win over per-view overrides". */
  #__cooView .s1-close, #__cfoView .s1-close{ background:var(--s1-panel)!important; border:1px solid var(--s1-edge)!important; color:var(--s1-ink)!important; border-radius:2px!important; }
  #__cooView .s1-close:hover, #__cfoView .s1-close:hover{ background:var(--s1-accent)!important; border-color:var(--s1-accent)!important; color:#0b1c30!important; }
  #__cfoView .s1-mrl-cta{ background:var(--s1-accent)!important; color:#0b1c30!important; border:0!important; border-radius:2px!important; }
  #__cooView .s1-btn-ghost{ background:transparent!important; border:1px solid var(--s1-edge)!important; color:var(--s1-ink2)!important; border-radius:2px!important; }
  #__cooView .s1-btn-ghost:hover{ background:var(--s1-panel)!important; color:var(--s1-ink)!important; }
  #__mrlOver .s1-btn-send{ background:var(--s1-accent)!important; color:#0b1c30!important; border:0!important; border-radius:2px!important; }
  #__mrlOver .s1-btn-send:disabled{ opacity:.4!important; }
  #__mrlOver .s1-btn-ghost{ background:transparent!important; border:1px solid var(--s1-edge)!important; color:var(--s1-ink2)!important; border-radius:2px!important; }
  #__mrlOver .s1-btn-ghost:hover{ background:var(--s1-panel)!important; color:var(--s1-ink)!important; }
  #__mrlOver .s1-tone{ background:var(--s1-panel2)!important; border:1px solid var(--s1-edge2)!important; color:var(--s1-ink2)!important; border-radius:3px!important; }
  #__mrlOver .s1-tone:hover{ border-color:var(--s1-edge)!important; }
  #__mrlOver .s1-tone.on{ border-color:var(--s1-accent)!important; background:color-mix(in srgb,var(--s1-accent) 10%,transparent)!important; }

  /* ══════════════════════════════════════════════════════════════════════════════════════════
     FEED WAVE (2026-07-18) — appended block, wins the cascade by position.
     1) THE WIRE rebuilt as a trade-press stream on the SURFACE LADDER (s1 shell / s2 items,
        pn-glass canon values bridged locally as --fw-*). Semantic event colours are BRAND-FIXED
        hexes (verified ≥4.5:1 on every fw surface, both themes) — never the worn --accent.
     2) ORANGE DISCIPLINE sweep on the rail: the --p spines/bars/ticks are retired (orange is
        never structural); alerts go fixed amber, LIVE goes fixed signal-red.
     3) HERO GLASS THINNED (CEO: "doesn't show enough of the video behind"): the full-panel wash
        is gone — the film reads; text AA rides a BOTTOM-ANCHORED scrim + localized text-backing
        gradients only (Media Law: composed for the overlay).
     ══════════════════════════════════════════════════════════════════════════════════════════ */
  /* — the wire's token set: ladder surfaces + semantic ink, dark default / porcelain repaint — */
  body[data-view="office"]{
    --fw-hair:rgba(150,162,184,.17);
    --fw-s1-top:#1a1d29; --fw-s1-bot:#101219;
    --fw-s2-top:#252936; --fw-s2-bot:#191d29;
    --fw-ink:#eef3fb; --fw-dim:#9aa7bb;
    --fw-win:#5fd695; --fw-loss:#ff8d7a; --fw-money:#e9c76a; --fw-people:#93bdff;
    --fw-rival:#d2a9f5; --fw-echo:#ffb385; --fw-wirec:#a7b3c6; --fw-live:#ff7a66;
    --fw-alert:#ffb638; --fw-slab:#0b1c30;
  }
  body.mvc-light[data-view="office"]{
    --fw-hair:rgba(40,33,24,.17);
    --fw-s1-top:#f4f0e8; --fw-s1-bot:#e9e3d8;
    --fw-s2-top:#fdfbf7; --fw-s2-bot:#f3efe7;
    --fw-ink:#241f1b; --fw-dim:#5c5347;
    --fw-win:#136a3c; --fw-loss:#b3261e; --fw-money:#755800; --fw-people:#1d5db4;
    --fw-rival:#71399f; --fw-echo:#9d4300; --fw-wirec:#57616e; --fw-live:#b3261e;
    --fw-alert:#8a5b00;
  }
  /* — rail shell = ladder s1 (measured gradient, neutral hairline; the glass wash is retired) — */
  body[data-view="office"] .feed-rail{
    background:linear-gradient(180deg,var(--fw-s1-top),var(--fw-s1-bot)) !important;
    border:1px solid var(--fw-hair) !important;
    backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  }
  @media(min-width:1100px){ body[data-view="office"] .feed-rail:not(.closed){width:330px} }
  /* orange discipline: no --p spine on the closed tab or the open panel edge */
  body[data-view="office"] .feed-rail.closed{border-left:1px solid var(--fw-hair) !important}
  body[data-view="office"] .feed-rail .fr-panel{border-left:0 !important}
  /* rail state dots: rest = neutral · alert = FIXED amber (semantic, never the worn accent) */
  body[data-view="office"] .fr-dot{background:var(--fw-dim) !important;box-shadow:none !important;animation:none !important}
  body[data-view="office"] .feed-rail.alert .fr-dot{background:var(--fw-alert) !important;box-shadow:0 0 8px rgba(255,182,56,.5) !important;animation:frBlink 1.1s ease-in-out infinite !important}
  body[data-view="office"] .ft-dot{background:var(--fw-live) !important;box-shadow:none !important;animation:fwPulse 2.2s ease-out infinite !important}
  /* cash readout: the orange baseline tick is structural orange — retired (the £ glyph carries the brand) */
  body[data-view="office"] .fr-cash::after{display:none !important}
  /* intercept dispatch: neutral hairline, not an orange spine (the mono tag stays the accent moment) */
  body[data-view="office"] .fr-street{border-left:1px solid var(--fw-hair) !important}
  /* — THE WIRE masthead — an editorial title, not a terminal label — */
  body[data-view="office"] .fw-mast{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
    padding:16px 15px 10px;border-top:1px solid var(--fw-hair);margin-top:8px}
  body[data-view="office"] .fw-mast-t{font:900 italic 17px/1 var(--mvc-disp,Inter),Inter,sans-serif;letter-spacing:-.01em;
    color:var(--fw-ink);text-transform:uppercase}
  body[data-view="office"] .fw-mast-ed{font:700 8.5px/1.5 var(--mono);letter-spacing:.13em;color:var(--fw-dim);
    text-transform:uppercase;white-space:nowrap}
  body[data-view="office"] .fw-mast-ed b{color:var(--fw-ink);font-weight:800}
  /* — the stream: s2 items, flush, hairline-ruled (a wire, not a card-wall) — */
  body[data-view="office"] .fw-stream{padding:0 0 8px !important}
  body[data-view="office"] .fw-item{position:relative;padding:11px 15px 13px;border-bottom:1px solid var(--fw-hair);
    background:linear-gradient(166deg,var(--fw-s2-top),var(--fw-s2-bot))}
  body[data-view="office"] .fw-item.fw-lead{padding-top:13px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 26px -18px rgba(0,0,0,.55)}
  body[data-view="office"] .fw-kick{display:flex;align-items:center;gap:9px;margin-bottom:7px}
  body[data-view="office"] .fw-tag{font:800 8.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--fw-wirec)}
  body[data-view="office"] .fw-win .fw-tag{color:var(--fw-win)}
  body[data-view="office"] .fw-loss .fw-tag{color:var(--fw-loss)}
  body[data-view="office"] .fw-money .fw-tag{color:var(--fw-money)}
  body[data-view="office"] .fw-people .fw-tag{color:var(--fw-people)}
  body[data-view="office"] .fw-rival .fw-tag{color:var(--fw-rival)}
  body[data-view="office"] .fw-echo .fw-tag{color:var(--fw-echo)}
  body[data-view="office"] .fw-wk{margin-left:auto;font:700 8.5px/1 var(--mono);letter-spacing:.12em;color:var(--fw-dim)}
  body[data-view="office"] .fw-live{display:inline-flex;align-items:center;gap:5px;
    font:800 8.5px/1 var(--mono);letter-spacing:.16em;color:var(--fw-live)}
  body[data-view="office"] .fw-live i{width:6px;height:6px;border-radius:50%;background:var(--fw-live);animation:fwPulse 2.2s ease-out infinite}
  @keyframes fwPulse{0%{box-shadow:0 0 0 0 rgba(255,122,102,.45)}70%{box-shadow:0 0 0 6px rgba(255,122,102,0)}100%{box-shadow:0 0 0 0 rgba(255,122,102,0)}}
  /* — media plates: real campaign/rival imagery; caption is a pinned-dark seam (AA white ink) — */
  body[data-view="office"] .fw-plate{position:relative;margin:0 0 9px;border:1px solid var(--fw-hair);
    border-radius:3px;overflow:hidden;background:var(--fw-slab)}
  body[data-view="office"] .fw-plate .fw-art{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
    background-size:cover;background-position:center;filter:saturate(1.05) contrast(1.05)}
  body[data-view="office"] .fw-cap{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;
    padding:7px 9px;background:linear-gradient(0deg,rgba(4,6,11,.88),rgba(4,6,11,.42) 76%,transparent)}
  body[data-view="office"] .fw-mark{flex:none;width:22px;height:22px;display:flex;align-items:center;justify-content:center;
    background:var(--fw-slab);color:#f97316;font:900 italic 9.5px/1 Inter,sans-serif;letter-spacing:-.02em;
    border:1px solid rgba(255,255,255,.16);
    clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,0 100%)}
  body[data-view="office"] .fw-cap-t{min-width:0;display:flex;flex-direction:column;gap:2px;
    font:800 10px/1 Inter,sans-serif;color:#fff;overflow:hidden}
  body[data-view="office"] .fw-cap-t i{font:700 7.5px/1 var(--mono);letter-spacing:.16em;color:rgba(255,255,255,.74);
    font-style:normal;text-transform:uppercase}
  /* non-lead subjects run a square thumb beside the copy (a wire listing, not a poster wall) */
  body[data-view="office"] .fw-item.fw-thumb{display:grid;grid-template-columns:54px minmax(0,1fr);
    grid-template-areas:"kick kick" "art head";gap:7px 11px}
  body[data-view="office"] .fw-item.fw-thumb .fw-kick{grid-area:kick;margin-bottom:0}
  body[data-view="office"] .fw-item.fw-thumb .fw-plate{grid-area:art;margin:0;height:54px}
  body[data-view="office"] .fw-item.fw-thumb .fw-plate .fw-art{aspect-ratio:auto;height:100%}
  body[data-view="office"] .fw-item.fw-thumb .fw-cap{padding:0 0 3px 3px;background:none}
  body[data-view="office"] .fw-item.fw-thumb .fw-cap-t{display:none}
  body[data-view="office"] .fw-item.fw-thumb .fw-mark{width:17px;height:17px;font-size:7.5px}
  body[data-view="office"] .fw-head{margin:0;grid-area:head;font:600 12px/1.5 var(--mvc-f,Inter),Inter,sans-serif;color:var(--fw-ink)}
  body[data-view="office"] .fw-lead .fw-head{font:750 14px/1.42 var(--mvc-f,Inter),Inter,sans-serif;letter-spacing:-.004em}
  body[data-view="office"] .fw-empty .fw-head{color:var(--fw-dim);font-style:italic}
  @media(prefers-reduced-motion:reduce){
    body[data-view="office"] .fw-live i,body[data-view="office"] .ft-dot{animation:none !important}
  }
  /* mobile drawer: the wire clears the PN/OS dock — nothing renders under it (dock canon) */
  @media(max-width:760px){
    body.pnos-dock-on .feed-rail{bottom:96px}
  }
  /* — nav ? chip for the Play-the-week explainer (touch affordance; column rail centres it) — */
  body[data-view="office"] .hub-adv-help{align-self:center;margin:8px 0 2px}
  @media(max-width:900px){ body[data-view="office"] .hub-adv-help{align-self:center;margin:0 0 0 2px;flex:none} }

  /* ── HERO GLASS THINNED (items 3+4) — the film reads; AA via bottom scrim + local backings ── */
  body[data-view="office"] .pv-hero-row.pn-vibe-row{min-height:clamp(250px,26vw,340px)}
  body[data-view="office"] .pn-vibe-scrim{background:
    linear-gradient(0deg,rgba(4,6,11,.88) 0%,rgba(4,6,11,.56) 28%,rgba(4,6,11,.14) 54%,rgba(4,6,11,0) 72%) !important}
  body.mvc-light[data-view="office"] .pn-vibe-scrim{background:
    linear-gradient(0deg,rgba(250,250,252,.86) 0%,rgba(250,250,252,.48) 26%,rgba(250,250,252,.10) 48%,rgba(250,250,252,0) 64%) !important}
  /* the "knives are out" panel itself: fully clear glass — no frost, no fill, no border */
  body[data-view="office"] .pn-vibe-row>.perf-hero{
    background:transparent !important;border:0 !important;box-shadow:none !important;
    backdrop-filter:none !important;-webkit-backdrop-filter:none !important;align-self:end;width:100%;
  }
  /* the headline sits LOWER-THIRD editorial in the film row — capped so the block hugs the scrim */
  body[data-view="office"] .pn-vibe-row .perf-hero-h1{font-size:clamp(30px,3.4vw,46px) !important}
  /* localized text-backing (Media Law): a feathered pool behind the words only, not a panel wash */
  body[data-view="office"] .pn-vibe-row .perf-hero-txt{position:relative;z-index:1}
  body[data-view="office"] .pn-vibe-row .perf-hero-txt::before{content:"";position:absolute;z-index:-1;
    inset:-30px -44px -24px -36px;filter:blur(8px);
    background:radial-gradient(125% 150% at 36% 46%,rgba(4,6,11,.87) 0%,rgba(4,6,11,.68) 55%,rgba(4,6,11,.3) 78%,transparent 94%)}
  body.mvc-light[data-view="office"] .pn-vibe-row .perf-hero-txt::before{
    inset:-18px -26px -16px -22px;
    background:radial-gradient(105% 125% at 36% 46%,rgba(250,250,252,.90) 0%,rgba(250,250,252,.56) 52%,rgba(250,250,252,.18) 76%,transparent 90%)}
  /* the mono greeting eyebrow stays an orange-family typographic accent but AA over the pool:
     bright apricot on the dark backing, deep burnt spine on the porcelain backing */
  body[data-view="office"] .pn-vibe-row>.perf-hero .mvc-kpi-lbl{color:#ffc09a !important}
  body.mvc-light[data-view="office"] .pn-vibe-row>.perf-hero .mvc-kpi-lbl{color:#7c3500 !important}
  /* the ghost CTA self-backs over open film (quiet ≠ invisible) */
  body[data-view="office"] .pn-vibe-row .perf-hero-cta .pn-btn--ghost{
    background:rgba(4,6,11,.58) !important;border:1px solid rgba(255,255,255,.3) !important;color:#fff !important;
    backdrop-filter:blur(8px) !important;-webkit-backdrop-filter:blur(8px) !important}
  body.mvc-light[data-view="office"] .pn-vibe-row .perf-hero-cta .pn-btn--ghost{
    background:rgba(250,250,252,.78) !important;border:1px solid rgba(11,28,48,.3) !important;color:var(--mvc-fg,#1a1f2b) !important}
  /* valuation glass: thinned to a breath — the ink keeps AA via a localized top-left pool only */
  body[data-view="office"] .pn-vibe-row>.pv-herochartbox{
    background:
      radial-gradient(150% 100% at 30% 16%,rgba(6,8,13,.8),rgba(6,8,13,.3) 58%,rgba(6,8,13,.08) 82%),
      linear-gradient(160deg,rgba(12,15,22,.28),rgba(6,8,13,.4)) !important;
    backdrop-filter:blur(8px) saturate(140%) !important;-webkit-backdrop-filter:blur(8px) saturate(140%) !important;
    border:1px solid rgba(255,255,255,.14) !important;
  }
  body.mvc-light[data-view="office"] .pn-vibe-row>.pv-herochartbox{
    background:
      radial-gradient(165% 110% at 32% 16%,rgba(250,250,252,.97) 0%,rgba(250,250,252,.62) 60%,rgba(250,250,252,.18) 84%),
      linear-gradient(160deg,rgba(250,250,252,.3),rgba(250,250,252,.4)) !important;
    border:1px solid rgba(20,14,8,.16) !important;
  }

  /* ══════════════════════════════════════════════════════════════════════════════════════════════
     DESIGN SYSTEM v1 — PERFORMANCE DASHBOARD ON THE LADDER (Creative Director, 2026-07-19)
     ------------------------------------------------------------------------------------------------
     The office/Performance landing rebuilt as the definitive expression of PN_DESIGN_SYSTEM.md — the
     consolidation of the fragmented systems into ONE. Modules ride the surface ladder (s0 canvas →
     s2 plates, neutral hairlines), the CTA is the ONE orange .lg-btn primary, orange is NEVER
     structural (the accent left-tab / top-rule "lame ass orange lines" are killed), spacing is
     iPad-app generous, motion stays (data-pn-reveal / count-up). APPEND-ONLY and scoped to
     .hub-view[data-view="v-perf"] so no other screen is touched. Reads the ladder tokens bridged onto
     body (dark) / body.mvc-light (porcelain) above — one system, both themes.
     ══════════════════════════════════════════════════════════════════════════════════════════════ */
  /* view rhythm — generous, even vertical cadence between modules (no cramped 8px walls). The bottom
     padding clears the PN/OS dock so the last module (STAFF & HR) always scrolls above it (Law: no
     content under the dock). */
  body[data-view="office"] .hub-view[data-view="v-perf"].on{ display:flex; flex-direction:column; gap:22px; padding-bottom:104px; }
  body[data-view="office"] .hub-view[data-view="v-perf"] > *{ margin-top:0 !important; margin-bottom:0 !important; }

  /* ── every module = an s2 ladder plate. Direct children only, so nested rfi/client/staff cards keep
     their own treatment. Neutral hairline + real elevation + generous gutter. clip-path cleared. ── */
  body[data-view="office"] .hub-view[data-view="v-perf"] > .card.shard,
  body[data-view="office"] .hub-view[data-view="v-perf"] > .mvc-glass,
  body[data-view="office"] .hub-view[data-view="v-perf"] .perf-grid > .card.shard{
    background:linear-gradient(166deg,var(--lg-s2-top),var(--lg-s2-bot)) !important;
    border:1px solid var(--lg-hair-neutral) !important;
    box-shadow:var(--lg-elev-2) !important;
    border-radius:16px !important;
    padding:22px 26px !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
    clip-path:none !important; transform:none !important;
  }
  /* KILL orange structural lines on the Performance plates (orange NEVER structural, §1.2) */
  body[data-view="office"] .hub-view[data-view="v-perf"] > .card.shard::before,
  body[data-view="office"] .hub-view[data-view="v-perf"] > .card.shard::after,
  body[data-view="office"] .hub-view[data-view="v-perf"] .perf-grid > .card.shard::before,
  body[data-view="office"] .hub-view[data-view="v-perf"] .perf-grid > .card.shard::after,
  body[data-view="office"] .hub-view[data-view="v-perf"] > .mvc-glass::before{ display:none !important; content:none !important; }

  /* ── HERO: greeting eyebrow + headline + the ONE orange CTA, over the film. Generous, balanced. ── */
  body[data-view="office"] .hub-view[data-view="v-perf"] .pv-hero-row{ padding:30px 30px 28px !important; border-radius:18px !important; gap:26px !important; }
  body[data-view="office"] .hub-view[data-view="v-perf"] .perf-hero-eyebrow{
    color:#ffc09a !important; font-family:var(--mono) !important; font-size:10px !important;
    font-weight:700 !important; letter-spacing:.24em !important; }
  body.mvc-light[data-view="office"] .hub-view[data-view="v-perf"] .perf-hero-eyebrow{ color:#7c3500 !important; }
  body[data-view="office"] .hub-view[data-view="v-perf"] .perf-hero-cta{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
  body[data-view="office"] .hub-view[data-view="v-perf"] .perf-hero-cta .lg-btn{ min-height:48px; }
  /* the win-CTA leads; keep both from ballooning on desktop */
  body[data-view="office"] .hub-view[data-view="v-perf"] .perf-hero-cta .lg-btn--ghost{ color:#eaf1fb !important; }
  body.mvc-light[data-view="office"] .hub-view[data-view="v-perf"] .perf-hero-cta .lg-btn--ghost{ color:#241f1b !important; }
  /* task #47 — the primary "Pitch it" hero CTA was pale-on-pale in light themes: force accent slab + white ink */
  body.mvc-light[data-view="office"] .hub-view[data-view="v-perf"] .perf-hero-cta .lg-btn:not(.lg-btn--ghost),
  body.mvc-light[data-view="office"] .hub-view[data-view="v-perf"] .perf-hero-cta .pn-btn--primary{
    background:var(--accent) !important; color:#fff !important; border-color:var(--accent) !important; }

  /* ── DO THIS NOW: an s2 dossier strip. Neutral hairline (no orange border), navy monogram slab with
     the accent glyph, mono eyebrow, ONE orange CTA. Calm/on-track = green semantic, secondary CTA. ── */
  body[data-view="office"] .hub-view[data-view="v-perf"] .do-now{
    background:linear-gradient(166deg,var(--lg-s2-top),var(--lg-s2-bot)) !important;
    border:1px solid var(--lg-hair-neutral) !important;
    box-shadow:var(--lg-elev-2) !important;
    border-radius:14px !important; padding:16px 18px !important; gap:16px !important;
  }
  body[data-view="office"] .hub-view[data-view="v-perf"] .do-now:hover{ transform:translateY(-1px); border-color:color-mix(in srgb,var(--accent) 30%,var(--lg-hair-neutral)) !important; }
  body[data-view="office"] .hub-view[data-view="v-perf"] .do-now .dn-ico{
    background:var(--lg-ink-slab,#0b1c30) !important; color:var(--accent) !important;
    border:1px solid rgba(255,255,255,.10) !important; border-radius:9px !important; width:40px; height:40px;
  }
  body[data-view="office"] .hub-view[data-view="v-perf"] .do-now.calm .dn-ico{ color:#5cc98a !important; }
  body[data-view="office"] .hub-view[data-view="v-perf"] .do-now .dn-eyebrow{ font-size:9.5px !important; color:var(--accent) !important; }
  body[data-view="office"] .hub-view[data-view="v-perf"] .do-now.calm .dn-eyebrow{ color:#5cc98a !important; }
  body[data-view="office"] .hub-view[data-view="v-perf"] .do-now .dn-text{ color:var(--lg-ink,#eef3fb) !important; }
  body.mvc-light[data-view="office"] .hub-view[data-view="v-perf"] .do-now .dn-text{ color:#241f1b !important; }
  body[data-view="office"] .hub-view[data-view="v-perf"] .do-now .dn-text small{ color:var(--lg-ink-dim,#9aa6bd) !important; }
  body.mvc-light[data-view="office"] .hub-view[data-view="v-perf"] .do-now .dn-text small{ color:#6b6157 !important; }

  /* ── KPI STAT ROW: four distinct instruments on s2. The KEY stat (CASH) leads with the accent
     top-edge; the rest carry neutral hairlines. Not nine identical KPI boxes (§3.5). ── */
  body[data-view="office"] .hub-view[data-view="v-perf"] .mvc-kpi-row{ gap:16px !important; }
  body[data-view="office"] .hub-view[data-view="v-perf"] .pv-kpi{
    background:linear-gradient(166deg,var(--lg-s2-top),var(--lg-s2-bot)) !important;
    border:1px solid var(--lg-hair-neutral) !important;
    box-shadow:var(--lg-elev-2) !important;
    border-radius:14px !important; padding:18px 20px !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
  body[data-view="office"] .hub-view[data-view="v-perf"] .pv-kpi.is-key{ border-top:2px solid var(--accent) !important; }
  body[data-view="office"] .hub-view[data-view="v-perf"] .pv-kpi .pn-eyebrow{ color:var(--accent) !important; }
  body[data-view="office"] .hub-view[data-view="v-perf"] .pv-kpi .pn-stat-val,
  body[data-view="office"] .hub-view[data-view="v-perf"] .pv-kpi .mvc-num{ color:var(--lg-ink,#f4f8ff) !important; }
  body.mvc-light[data-view="office"] .hub-view[data-view="v-perf"] .pv-kpi .pn-stat-val,
  body.mvc-light[data-view="office"] .hub-view[data-view="v-perf"] .pv-kpi .mvc-num{ color:#241f1b !important; }

  /* ── valuation glass (hero right) stays, but on the neutral ladder hairline (already neutral). ── */
  body[data-view="office"] .hub-view[data-view="v-perf"] .pv-herochartbox{ border-radius:16px !important; }

  /* ── brand monogram badge (EMOJI BAN sweep, §7.3): replaces the raw brand emoji in rfi/client rows
     with a brand-fixed navy slab + orange initials — the .lg-mark language, small. Global (improves
     the NBO + Clients views too), never skinned by a worn accent. ── */
  .rfi-mono{ display:inline-flex; align-items:center; justify-content:center; flex:none;
    width:24px; height:24px; margin-right:2px; border-radius:5px;
    background:var(--lg-ink-slab,#0b1c30); color:#f97316; border:1px solid rgba(255,255,255,.10);
    font:900 10.5px/1 'Inter',sans-serif; font-style:italic; letter-spacing:-.02em; }
  body.mvc-light .rfi-mono{ border-color:rgba(20,14,8,.16); }

  /* ── mobile (≤760): CTAs go full-width, single clean column, no h-scroll ── */
  @media (max-width:760px){
    body[data-view="office"] .hub-view[data-view="v-perf"] .pv-hero-row{ padding:22px 20px !important; }
    body[data-view="office"] .hub-view[data-view="v-perf"] .perf-hero-cta{ width:100%; }
    body[data-view="office"] .hub-view[data-view="v-perf"] .perf-hero-cta .lg-btn{ flex:1 1 100%; justify-content:center; }
    body[data-view="office"] .hub-view[data-view="v-perf"] > .card.shard,
    body[data-view="office"] .hub-view[data-view="v-perf"] .perf-grid > .card.shard,
    body[data-view="office"] .hub-view[data-view="v-perf"] > .mvc-glass{ padding:18px 18px !important; }
    body[data-view="office"] .hub-view[data-view="v-perf"] .do-now{ flex-wrap:wrap; }
    body[data-view="office"] .hub-view[data-view="v-perf"] .do-now .dn-act{ flex:1 1 100%; justify-content:center; }
  }

  /* ══════════════════════════════════════════════════════════════════════════════════════════════
     LIGHT + MIAMI REFERENCE FIX — the DASHBOARD chrome is BRAND-LOCKED (CEO 2026-07-19, append-only)
     ------------------------------------------------------------------------------------------------
     CEO verdict: light theme wearing the Miami pack is a "design car crash" — every prior fix was
     gated in DARK, where the worn accent happens to be brand orange. The v1 rebuild laddered the
     Performance PLATES but left the CHROME reading var(--accent)/var(--p)/rgba(var(--glow)) — so
     wearing MIAMI DECO (worn --accent #ff8ac2, spine #ff4d8d) bled PINK into the mono eyebrows, the
     active-nav icon+text, the ?-help chips, the CASH top-edge, the DO-THIS-NOW tile, badges, the
     reputation ring and the HUD £-value. Per the SKINNING LAW, structural labels + OS chrome +
     control furniture are BRAND-FIXED — only genuine data-viz may wear the pack. Fix at the token
     root: re-pin the accent family to brand orange on the office scope (#f97316 dark · #b4380d
     AA-deepened on porcelain), so NO worn pack can repaint the chrome again. The pack still reskins
     the backdrop WORLD (photo + grade via applyWornWorld) — only the chrome is locked. Then finish
     the light ladder (the SQUAD/REVENUE .mvc-glass.pv-panel modules still used the dark --glass-a/b)
     and lay a controlled greige CANVAS so every porcelain plate reads with depth (ΔL≥3).
     ══════════════════════════════════════════════════════════════════════════════════════════════ */
  /* (1) BRAND-LOCK the accent across the whole office/perf dashboard (structure never wears the pack) */
  body[data-view="office"]{
    --accent:#f97316 !important; --accent2:#f97316 !important; --accent-yellow:#ff8a4f !important;
    --p:#f97316 !important; --p2:#ff8a4f !important; --glow:249,115,22 !important;
    --primary:#f97316 !important; --primary-deep:#9d4300 !important; --surface-tint:#f97316 !important;
  }
  body.mvc-light[data-view="office"]{
    --accent:#b4380d !important; --accent2:#b4380d !important; --accent-yellow:#c8641f !important;
    --p:#b4380d !important; --p2:#c8641f !important; --glow:180,56,13 !important;
    --primary:#b4380d !important; --primary-deep:#7a2600 !important; --surface-tint:#b4380d !important;
    /* INK → DARK: the worn base pack is a DARK palette, so --mvc-fg / --rust-ink stayed light and
       every module label washed to white-on-cream (the valuation card, SQUAD/REVENUE headers). Re-pin
       the ink families to porcelain-AA dark so all plate text is legible (≥4.5:1 on the s2 plate). */
    --mvc-fg:#241f1b; --mvc-fg-70:#524a40; --mvc-fg-55:#6b6157; --mvc-fg-40:#8a7d6d;
    --rust-ink:#241f1b; --rust-ink-70:#524a40; --rust-ink-55:#6b6157; --rust-ink-40:#8a7d6d;
    --rust-ink-08:rgba(40,33,24,.07); --rust-ink-14:rgba(40,33,24,.14); --track:rgba(40,33,24,.10);
  }
  /* the HUD cash value is OS chrome — reads INK, never the accent (kills the pink £125,000 leak) */
  body[data-view="office"] .topbar .stat b,
  body[data-view="office"] .topbar .stat b span{ color:inherit !important; }
  /* HERO TEXT IN LIGHT = DARK ink. The light hero flips the film to a BRIGHT high-key white scrim +
     near-white text pool (the CEO's "same film, opposite key" signature), so the headline/sub/eyebrow
     must read DARK on that light backing — NOT white (white-on-white washed to 1.5:1). The ink re-pin
     already darkens the headline (--mvc-fg) + sub (--mvc-fg-70); pin the greeting eyebrow to the deep
     burnt spine so it clears AA on the bright pool too. */
  body.mvc-light[data-view="office"] .hub-view[data-view="v-perf"] .pv-hero-row .perf-hero-eyebrow{ color:#7c3500 !important; text-shadow:none !important; }
  body.mvc-light[data-view="office"] .hub-view[data-view="v-perf"] .pv-hero-row .perf-hero-h1,
  body.mvc-light[data-view="office"] .hub-view[data-view="v-perf"] .pv-hero-row .mvc-h1{ color:#241f1b !important; text-shadow:none !important; }
  body.mvc-light[data-view="office"] .hub-view[data-view="v-perf"] .pv-hero-row .perf-hero-sub{ color:#3a3128 !important; text-shadow:none !important; }
  /* the valuation HERO card is a PORCELAIN plate on the film → its number + labels read DARK ink */
  body.mvc-light[data-view="office"] .hub-view[data-view="v-perf"] .pv-herochartbox .mvc-num,
  body.mvc-light[data-view="office"] .hub-view[data-view="v-perf"] .pv-herochartbox .mvc-kpi-lbl,
  body.mvc-light[data-view="office"] .hub-view[data-view="v-perf"] .pv-herochartbox .pv-hero-lbl{ color:#241f1b !important; }

  /* (2) FINISH THE LIGHT LADDER — repaint the remaining dark glass panels (SQUAD CAPABILITY /
     REVENUE MIX / live-work / vitals) to the porcelain s2 plate so nothing floats dark on the photo. */
  body.mvc-light[data-view="office"] .hub-view[data-view="v-perf"] .mvc-glass,
  body.mvc-light[data-view="office"] .hub-view[data-view="v-perf"] .mvc-glass.pv-panel,
  body.mvc-light[data-view="office"] .hub-view[data-view="v-perf"] .card.shard,
  body.mvc-light[data-view="office"] .hub-view[data-view="v-perf"] .pv-panel{
    background:linear-gradient(166deg,var(--lg-s2-top),var(--lg-s2-bot)) !important;
    border:1px solid var(--lg-hair-neutral) !important;
    box-shadow:var(--lg-elev-2) !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
  /* CONTROLLED BACKDROP — veil the busy office photo to a calm greige CANVAS (ladder s0) so the
     porcelain plates separate; the cinematic hero FILM lives inside .pv-hero-row and stays above. */
  body.mvc-light[data-view="office"] #app{
    background:linear-gradient(180deg,rgba(221,215,203,.90),rgba(210,203,189,.94)) !important;
  }
  /* KPI plate = s1 porcelain (one step below the white inner chip) so the three ladder tiers each
     clear ΔL≥3: greige canvas (L86) → s1 card (L≈95) → white inner chip (L100). Depth per plate. */
  body.mvc-light[data-view="office"] .hub-view[data-view="v-perf"] .pv-kpi{
    background:linear-gradient(166deg,var(--lg-s1-top),var(--lg-s1-bot)) !important;
  }
  /* the KPI icon chip = the white s3 INNER surface → canvas→card→inner ΔL each ≥3 (depth per plate) */
  body.mvc-light[data-view="office"] .hub-view[data-view="v-perf"] .pv-kpi .pn-ic{
    background:#ffffff !important; border:1px solid var(--lg-hair-neutral) !important;
    box-shadow:var(--lg-elev-1) !important; color:#b4380d !important;
  }
  /* the ?-HELP CHIP must pass AA in BOTH themes (UX_RULES §14). Worn-orange text on the orange tint
     washed to 2.9:1 in light — pin it to a white chip with deep-ink-orange glyph + brand-orange ring. */
  body.mvc-light[data-view="office"] .help-chip{
    background:#ffffff !important; color:#8a2b00 !important;
    border:1px solid color-mix(in srgb,#b4380d 60%,transparent) !important;
  }
  body.mvc-light[data-view="office"] .help-chip:hover{ background:#b4380d !important; color:#fff !important; }
  /* the LEFT NAV rail rides the porcelain ladder in light so every tab label is AA on a defined
     surface (it used the dark --glass-b → dark-ink-on-dark ambiguity). Active tab stays brand orange. */
  body.mvc-light[data-view="office"] .hub-nav{
    background:linear-gradient(166deg,var(--lg-s1-top),var(--lg-s1-bot)) !important;
    border:1px solid var(--lg-hair-neutral) !important;
  }
  body.mvc-light[data-view="office"] .hub-tab{ color:#3a3128 !important; }
  body.mvc-light[data-view="office"] .hub-tab.on{ color:#b4380d !important; background:rgba(180,56,13,.10) !important; }
  body.mvc-light[data-view="office"] .hub-tab.on .ht-ico{ color:#b4380d !important; }
  /* the calm "YOU'RE ON TRACK" eyebrow: the bright #5cc98a green washed to 2:1 on the porcelain plate
     — deepen to an AA semantic green in light (the calm icon glyph stays green on its dark navy slab). */
  body.mvc-light[data-view="office"] .hub-view[data-view="v-perf"] .do-now.calm .dn-eyebrow{ color:#0f7a3f !important; }

  /* (3) NO H-SCROLL at 390 (UX_RULES §3) — at ≤760 the office body becomes its OWN scroll container
     (overflow:auto), so the viewport overflow is taken from html, which stayed `visible` → the narrow
     topbar chrome could scroll the page sideways. Clip the ROOT for the office view (vertical scroll
     unaffected: overflow-y stays visible → body scrolls y as before). */
  /* NOTE: an earlier rule pins html `overflow:visible !important` for the office view (so the viewport
     scrolls vertically) — override ONLY the x-axis with !important; overflow-y stays visible (v-scroll ok). */
  html:has(body[data-view="office"]){ overflow-x:clip !important; }
  body[data-view="office"]{ overflow-x:clip; }
  body[data-view="office"] .bleed-text{ max-width:100vw; overflow:hidden; }

  /* ═══════════════════════════════════════════════════════════════════════════════════════════════
     LIGHT + WORN-PACK SWEEP — every OTHER screen to the #118 dashboard standard (CEO 2026-07-19, append-only)
     -------------------------------------------------------------------------------------------------
     Companion to #118. The SAME failure class the CEO called a "car crash" on the Performance dashboard
     existed on every other screen — they were all gated in DARK only. In the CEO's live config (LIGHT
     theme WEARING a pack), two faults surfaced screen-wide:
       (A) ACCENT LEAK — structural chrome read var(--accent)/--p/rgba(--glow), so a worn pack (Miami =
           pink) bled PINK into eyebrows, section-underlines, active tabs, help-chips, badges, ring/gauge
           chrome. For the office hub-views this is ALREADY killed by #118's body[data-view="office"]
           accent-family brand-lock (it covers ALL hub-views). It is NOT covered for the Vault
           (data-view="store"), the CFO/COO full-screen views (which read var(--accent) via --s1-accent
           and leak the instant the body scope isn't "office"), or the My Agencies holding page — those
           are brand-locked below.
       (B) WASHED / DARK CARDS — the plates on FLOOR/NBOs/CLIENTS/HIRES/SEASON still used the DARK glass
           (hardcoded #0d1523-family gradients or --glass-a/b, never re-pinned for light) and hardcoded
           light ink (.hb-v #eaf1fb, .so-cell b #fff), so they floated dark on the greige canvas and any
           value washed light-on-light. Finish the porcelain ladder per view (canvas 86 → card → inner,
           ΔL≥3) and force dark ink where it was hardcoded light.
     GENUINE MEDIA stays cinematic dark by design (Media Law §8): the live floor CAM (.floor-live), the
     NBO/client card banners, cast portraits. Only STRUCTURE is laddered/brand-fixed. Per SKINNING LAW,
     only true data-viz may wear the pack — here nothing structural does.
     ═══════════════════════════════════════════════════════════════════════════════════════════════ */

  /* ── FOUNDATION (the 5 non-perf hub-views; v-perf keeps its #118 rules untouched) ───────────────
     ROOT-CAUSE ink fix: --pn-text/-body/-muted are declared as `var(--mvc-fg…)` ON :root, so the
     browser substitutes them with HTML's stale (light-shell default) --mvc-fg and they stayed LIGHT
     even after #118 re-pinned --mvc-fg on <body> — so management text (nbo pipeline figures, season
     rungs/standing) rendered light-on-light once a plate went light. Re-pin the --pn-* bridge DIRECTLY
     on the hub-view containers so the shell text goes dark and the panel/tile tokens ride the porcelain
     ladder (the intended "genuine LIGHT shell" the --pn-* bridge comment describes). Then explicitly
     ladder the plates that hardcode a dark gradient or read a non-bridged glass token (--glass-rebel). */
  body.mvc-light[data-view="office"] .hub-view:not([data-view="v-perf"]){
    --pn-text:#241f1b; --pn-body:#524a40; --pn-muted:#6b6157; --pn-faint:#8a7d6d;
    --pn-panel:linear-gradient(166deg,var(--lg-s2-top),var(--lg-s2-bot));
    --pn-panel-2:linear-gradient(166deg,var(--lg-s1-top),var(--lg-s1-bot));
    --pn-tile:var(--lg-s1-top); --pn-elev:var(--lg-s2-top);
    --pn-border:var(--lg-hair-neutral); --pn-hairline:var(--lg-hair-neutral);
    --pn-shadow:var(--lg-elev-2); --pn-shadow-hi:var(--lg-elev-1);
  }
  body.mvc-light[data-view="office"] .hub-view:not([data-view="v-perf"]) :is(.card.shard,.mvc-glass,.mvc-glass.mvc-kpi){
    background:linear-gradient(166deg,var(--lg-s2-top),var(--lg-s2-bot)) !important;
    border:1px solid var(--lg-hair-neutral) !important; box-shadow:var(--lg-elev-2) !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }

  /* ── FLOOR ──────────────────────────────────────────────────────────────────────────────────────
     The header shard + the FLOOR-PULSE status cells ride the porcelain ladder; the live CAM feed
     (.floor-live: video + scrim + white crew overlay) stays cinematic dark — that is the shot. */
  body.mvc-light[data-view="office"] .hub-view[data-view="v-floor"] .card.shard{
    background:linear-gradient(166deg,var(--lg-s2-top),var(--lg-s2-bot)) !important;
    border:1px solid var(--lg-hair-neutral) !important; box-shadow:var(--lg-elev-2) !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
  body.mvc-light[data-view="office"] .hub-view[data-view="v-floor"] .hb-cell{
    background:linear-gradient(166deg,var(--lg-s1-top),var(--lg-s1-bot)) !important;
    border:1px solid var(--lg-hair-neutral) !important; box-shadow:var(--lg-elev-1) !important;
  }
  body.mvc-light[data-view="office"] .hub-view[data-view="v-floor"] .hb-cell .hb-v{ color:var(--rust-ink) !important; }
  /* the live CAM overlay is a DARK surface — its micro-chrome (the "YOU"/"LIVE" crew ticks, the "me"
     avatar) needs the DARK-surface accent/semantic, not the light-deepened #b4380d which fails AA on
     the video (3.1:1). Restore bright tokens WITHIN the dark cam only (a directly-set custom prop on
     .floor-live wins over the inherited office brand-lock for this subtree). */
  body.mvc-light[data-view="office"] .hub-view[data-view="v-floor"] .floor-live{
    --accent:#f97316; --p:#f97316; --glow:249,115,22; --good:#3ddc84; --rust-ink:#f4f7fb;
  }
  /* the CAM-thumbnail LIVE/YOU pips also ride dark media (their mug is a graded photo) — pin to the
     bright dark-surface green/orange so they clear AA on the shot (the light --s2-good/#b4380d fail). */
  body.mvc-light[data-view="office"] .hub-view[data-view="v-floor"] .s2-crew-live{ color:#3fd68f !important; }
  body.mvc-light[data-view="office"] .hub-view[data-view="v-floor"] .s2-crew-live.me{ color:#f97316 !important; }

  /* ── NBOs ───────────────────────────────────────────────────────────────────────────────────────
     The card body text is ALREADY re-inked dark for light (nbo-sector/brief/fit-*), but every plate
     kept the DARK glass background so it read dark-on-dark. Ladder the plate backgrounds; keep the
     orange urgency + pipeline left-borders; keep the card BANNER (photo media) dark; re-ink the bright
     semantic figures for the light plate. */
  body.mvc-light[data-view="office"] .hub-view[data-view="v-nbo"] .card.shard{
    background:linear-gradient(166deg,var(--lg-s2-top),var(--lg-s2-bot)) !important;
    border:1px solid var(--lg-hair-neutral) !important; box-shadow:var(--lg-elev-2) !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
  body.mvc-light[data-view="office"] .hub-view[data-view="v-nbo"] .nbo-brief-bar,
  body.mvc-light[data-view="office"] .hub-view[data-view="v-nbo"] .nbo-card{
    background:linear-gradient(166deg,var(--lg-s2-top),var(--lg-s2-bot)) !important;
    box-shadow:var(--lg-elev-2) !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
  body.mvc-light[data-view="office"] .hub-view[data-view="v-nbo"] .nbo-bb-v.good{ color:#1f7a3a !important; }
  body.mvc-light[data-view="office"] .hub-view[data-view="v-nbo"] .nbo-bb-v.warn{ color:#a3610a !important; }
  body.mvc-light[data-view="office"] .hub-view[data-view="v-nbo"] .nbo-bb-v.bad{ color:#c0392b !important; }
  /* accent-FILLED chrome (urgency flag, THE ROOM tape, the PITCH-IT CTA) carried DARK glyph text that
     passed on the bright dark-theme orange but fails on the AA-deepened light orange (#b4380d, 3.3:1).
     Per UX_RULES §1 button text is WHITE on brand-orange fills — flip to white in light (dark keeps its
     dark glyph). The disabled CTA gets legible quiet ink (quiet ≠ invisible). */
  body.mvc-light[data-view="office"] .hub-view[data-view="v-nbo"] :is(.nbo-cta,.nbo-flag,.nbo-tape){ color:#fff !important; }
  body.mvc-light[data-view="office"] .hub-view[data-view="v-nbo"] .nbo-cta.off{ background:var(--rust-ink-08) !important; color:var(--rust-ink-55) !important; }

  /* ── CLIENTS ────────────────────────────────────────────────────────────────────────────────────
     The KPI cells (.hb-cell) hardcode a dark glass gradient via later !important rules (--rust-card /
     the raw glass literal), so the --pn-tile re-pin can't reach them — repaint explicitly (higher
     specificity + later source wins). .hb-v value ink -> dark. Applied to all non-perf views (FLOOR's
     FLOOR-PULSE + CLIENTS' book-of-business cells share the class). */
  body.mvc-light[data-view="office"] .hub-view:not([data-view="v-perf"]) .hb-cell{
    background:linear-gradient(166deg,var(--lg-s1-top),var(--lg-s1-bot)) !important;
    border:1px solid var(--lg-hair-neutral) !important; box-shadow:var(--lg-elev-1) !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
  body.mvc-light[data-view="office"] .hub-view:not([data-view="v-perf"]) .hb-cell .hb-v{ color:var(--rust-ink) !important; }
  body.mvc-light[data-view="office"] .hub-view:not([data-view="v-perf"]) .hb-cell::after{ background:var(--lg-hair-neutral) !important; }
  /* the client-card BANNER is a dark graded photo (media) — its chrome wears DARK-surface tokens so the
     monogram/tape/status pills clear AA on the shot (not the light-deepened accent). Status pill keeps
     its dark glyph on the bright fill. */
  body.mvc-light[data-view="office"] .hub-view[data-view="v-clients"] .s2-cli-banner{
    --accent:#f97316; --p:#f97316; --glow:249,115,22; --s2-good:#3fd68f; --s2-warn:#ffb638; --s2-bad:#ff6a55;
  }
  body.mvc-light[data-view="office"] .hub-view[data-view="v-clients"] .s2-cli-status{ color:#06111d !important; }
  body.mvc-light[data-view="office"] .hub-view[data-view="v-clients"] .s2-cli-tape{ color:#160a02 !important; }

  /* ── HIRES (People Ops / Team) ───────────────────────────────────────────────────────────────────
     Header + KPI cards already ladder via the foundation. Remaining dark plates + hardcoded-light ink:
     the squad-stat cells (.so-cell, white-alpha glass + #fff numbers), the talent-market cards
     (.tt-card, dark cinematic gradient), and the bright semantic figures that wash on the porcelain. */
  body.mvc-light[data-view="office"] .squad-ov .so-cell{
    background:linear-gradient(166deg,var(--lg-s1-top),var(--lg-s1-bot)) !important;
    border:1px solid var(--lg-hair-neutral) !important; box-shadow:var(--lg-elev-1) !important;
  }
  body.mvc-light[data-view="office"] .squad-ov .so-cell b{ color:var(--rust-ink) !important; }
  body.mvc-light[data-view="office"] .squad-ov .so-cell b .u,
  body.mvc-light[data-view="office"] .squad-ov .so-cell span{ color:var(--rust-ink-55) !important; }
  /* squad-capability chips: number rode --p2 (#c8641f, 3.8:1) -> brand deep orange; faint 'avg' label
     -> AA ink; the 'thin, hire here' warning red washed (2.8:1) -> deepened AA red. */
  body.mvc-light[data-view="office"] .squad-cover .cov b{ color:#b4380d !important; }
  body.mvc-light[data-view="office"] .squad-cover .cov em{ color:var(--rust-ink-55) !important; }
  body.mvc-light[data-view="office"] .squad-cover .cov.thin,
  body.mvc-light[data-view="office"] .squad-cover .cov.thin em{ color:#c0392b !important; }
  /* the RUNWAY 'up' KPI value: bright #5cc98a washed on the porcelain plate -> AA semantic green */
  body.mvc-light[data-view="office"] .hub-view[data-view="v-hires"] .mvc-kpi-v.up,
  body.mvc-light[data-view="office"] .hub-view[data-view="v-hires"] .mvc-kpi-v.good{ color:#0f7a3f !important; }
  /* talent cards: dark cinematic plate -> porcelain (keep the accent highlight border + portrait mug);
     re-ink body + OVR trait figures AA on the light plate. */
  body.mvc-light[data-view="office"] .tt-card{
    background:linear-gradient(166deg,var(--lg-s2-top),var(--lg-s2-bot)) !important;
    color:var(--rust-ink) !important; box-shadow:var(--lg-elev-2) !important;
  }
  body.mvc-light[data-view="office"] .tt-flavor{ color:var(--rust-ink-70) !important; }
  body.mvc-light[data-view="office"] .tt-v--hi{ color:#0f7a3f !important; }
  body.mvc-light[data-view="office"] .tt-v--mid{ color:#a3610a !important; }
  body.mvc-light[data-view="office"] .tt-v--lo{ color:#c0392b !important; }
  body.mvc-light[data-view="office"] :is(.tt-disc,.tt-ovr,.tc-disc){ color:#fff !important; }
  /* ROOT-CAUSE for washed office BUTTONS (staff INVEST/FIRE, and any generic office button): a broad
     `button:not(...)` reset paints --rust-card / --rust-border, both of which resolve DARK for office
     even in light theme (--rust-card = the dark glass literal) — so those buttons went dark-card with
     dark ink (1.2:1). Re-pin the two card tokens to the porcelain ladder for office-light; every reset
     button then reads dark rust-ink on a light card (AA). Explicit panel repaints above override this
     where a specific plate ladder is wanted. */
  body.mvc-light[data-view="office"]{
    --rust-card:linear-gradient(166deg,var(--lg-s1-top),var(--lg-s1-bot));
    --rust-border:var(--lg-hair-neutral);
  }

  /* ── SEASON (The Climb) ──────────────────────────────────────────────────────────────────────────
     The ladder rungs + standing panel already ride the foundation (dark ink on porcelain). Remaining:
     the 'You are here' accent-fill badge (dark glyph -> white), the standing sub that stayed on bright
     --mvc-red, and the SEASON-FINALE promo strip which floats a photo — give it a controlled LIGHT veil
     so its accent/body text clears AA (was ~4.2:1 over the darkened grad). */
  body.mvc-light[data-view="office"] .hub-view[data-view="v-season"] .sea-rung-state.now{ color:#fff !important; }
  body.mvc-light[data-view="office"] .hub-view[data-view="v-season"] .sea-std-sub.sea-std-bad{ color:#c0392b !important; }
  body.mvc-light[data-view="office"] .hub-view[data-view="v-season"] .sea-promo{
    background:linear-gradient(166deg,var(--lg-s2-top),var(--lg-s2-bot)) !important;
    border:1px solid var(--lg-hair-neutral) !important; border-left:1px solid var(--lg-hair-neutral,rgba(128,132,140,.2)) !important; box-shadow:var(--lg-elev-2) !important;
  }
  body.mvc-light[data-view="office"] .hub-view[data-view="v-season"] .sea-promo-grad{
    background:linear-gradient(115deg,rgba(244,240,232,.94),rgba(244,240,232,.74)) !important;
  }
  body.mvc-light[data-view="office"] .hub-view[data-view="v-season"] .sea-promo-plate{ opacity:.06 !important; }
  /* the loop-explainer strip is a translucent orange callout on the canvas — its accent <b> at 13.5px
     hit only 4.2:1; deepen to the burnt-ink orange (≈6:1) used for the help-chip glyph. */
  body.mvc-light[data-view="office"] .hub-view[data-view="v-season"] .s1-sea-loop b{ color:#8a2b00 !important; }

  /* ── THE VAULT (store) ───────────────────────────────────────────────────────────────────────────
     The Vault is a DELIBERATELY dark espresso boutique in both themes (a designed seam). It is NOT under
     the office accent-lock, so its OWN page chrome read the worn --accent and bled Miami pink: the section
     underline (h2::after) and the legal links (inline color:var(--accent)). Brand-FIX those to orange.
     Everything still pink here is a genuine PRODUCT PREVIEW — each pack/collection specimen renders its
     OWN palette (data-palette / inline FX gradients) to sell the look; that is content, not chrome, and
     must keep its colour (SKINNING LAW: previews may show the pack). The Vault surface is dark, so the
     brand-fix uses the bright dark-surface orange #f97316 (matches the store's CTAs), not the light deep. */
  body[data-view="store"] h2::after{ background:#f97316 !important; }
  body[data-view="store"] a[href*="legal"]{ color:#f97316 !important; }

  /* ── CFO / COO full-screen views (.s1-screen) ────────────────────────────────────────────────────
     These read --s1-accent:var(--accent) with an orange fallback. Today they render orange ONLY because
     they open while <body data-view="office"> (the #118 office lock forces --accent orange, and they
     inherit it). The instant the body scope is anything else — proven live by rendering the COO over the
     store view — --accent falls back to the WORN pack and every structural s1 element (mono eyebrows,
     the italic head, panel left-borders, the currency marks, the ledger figures, gauge/chart strokes)
     bleeds PINK. Per the SKINNING LAW the CFO/COO chrome is brand-fixed BY INTENT, not by an inherited
     accident: pin --s1-accent to brand orange directly on the view (deepened on the light porcelain
     repaint). No worn pack can repaint the boardroom now, from any entry scope. */
  .s1-screen, .s1-mrl-over{ --s1-accent:#f97316; }
  body.mvc-light .s1-screen, body.mvc-light .s1-mrl-over{ --s1-accent:#b4380d; }
  /* STORE QA 2026-08-11 (SEV-2 rider): the pin above is right — chrome stays brand — but it made the
     boardroom 0.0% pixel-identical under EVERY bought look, and COO/CFO are not on the CEO-74
     exclusion list (that names the Vault and the pitch set-piece). Split the two jobs: --s1-accent
     stays the brand-fixed CHROME ink; --s1-mood is the ambience-only channel (theme, then collection,
     then brand) and repaints ONLY the canvas wash, so a 900 ◈ Midnight Neon shows up in this room
     without a single eyebrow, ledger figure or gauge leaving brand orange. */
  .s1-screen, .s1-mrl-over{ --s1-mood:var(--pnth-accent, var(--worn-a, #f97316)); }
  .s1-screen{
    background:
      radial-gradient(120% 80% at 82% -6%, color-mix(in srgb, var(--s1-mood) 16%, transparent), transparent 60%),
      linear-gradient(168deg, color-mix(in srgb, var(--s1-mood) 7%, var(--s1-bg2)), var(--s1-bg) 72%);
  }

  /* ── MY AGENCIES holding page (account.js .pn-stage.u3-hold) ──────────────────────────────────────
     The dossier PLATES are a logged dark seam in BOTH themes (white ink, AA), so there are no washed
     cards to ladder here. But the OS chrome still had unfixed var(--accent) reads that wear the pack:
     the .ag-row corner PIP (--ag-pip), the row hover border, and the '+ Found a new agency' registration
     ticks + hover. .ag-logo / .ag-meta::before / .ag-open were already brand-fixed (skinning law) — this
     finishes the job: brand-lock the accent family on the holding page so the worn pack can never repaint
     the case-file chrome. Bright #f97316 (the plates are dark in both themes; matches the hardcoded
     .ag-open gradient), so nothing here bleeds Miami pink from any entry scope. */
  .pn-stage.u3-hold{ --accent:#f97316; --p:#f97316; --glow:249,115,22; }

  /* ══════════════════════════════════════════════════════════════════════════════════════════════
     LIGHT + MIAMI — THE PITCH LOOP: dark-seam brand-lock + war-room canvas AA (CEO gate, append-only)
     ------------------------------------------------------------------------------------------------
     The prep WAR ROOM (data-view="pitch") re-derives --accent from --rust-teal, so its chrome never
     wore the worn Miami pink (verified LEAK=0). The two remaining light+Miami failures were on the
     PINNED-DARK cinematic seams, which the light theme wrongly DEEPENED to #b4380d (dim/illegible on
     their dark interiors — the same class of bug #119 fixed on the floor live-cam) and — in the RESULT
     view, which does NOT shadow --accent — actually bled Miami pink. Fix: brand-fix the dark seams to
     BRIGHT #f97316 in both themes, and deepen the war-room canvas eyebrows to clear AA on the greige s0.
     (The pnp2 set-piece / pnl league Finder windows are brand-locked in pn-pitch2.js / pn-league.js —
     they theme-flip to porcelain via .lg-light and get the AA-deep #b4380d there.) ═══════════════════ */
  /* THE CALL (live pitch modal) — dark seam in BOTH themes. Its structural accents (the speaking
     participant ring + glow, the participant monogram initials, the event transcript beat spine, the
     swing option hover) read var(--accent)/rgba(--glow); a worn pack could tint the ring pink and the
     light-deepened #b4380d was dim on the dark call. Pin BRIGHT brand orange on the modal scope. */
  .pn-callroom{ --accent:#f97316 !important; --p:#f97316 !important; --glow:249,115,22 !important; }
  /* THE RESULT verdict (dark seam) — the debrief WIN spine is a SEMANTIC cue (win = brand orange, loss
     stays steel), never the worn accent. Kills the Miami-pink border-left the result view inherited. */
  .result-win .result-debrief{ border-left-color:#f97316 !important; }
  /* WAR ROOM light: the section eyebrow + KEY chip ride the greige s0 CANVAS (L86, no plate), where the
     standard #b4380d (4.2:1) and the .wr-eyebrow's #c8641f (2.8:1) fail AA — deepen to an AA-safe burnt
     (#8a2b00 ≈ 6:1 on greige) in light only. Dark is untouched (bright orange already clears AA there). */
  body.mvc-light[data-view="pitch"] .room-eyebrow,
  body.mvc-light[data-view="pitch"] .wr-eyebrow{ color:#8a2b00 !important; }
  body.mvc-light[data-view="pitch"] .rm-key{ color:#8a2b00 !important;
    border-color:color-mix(in srgb,#8a2b00 42%,transparent) !important; }

  /* ══════════ P1-A · COMPACT COMMAND BAR (CEO 2026-07-21 — "a car crash of space and design") ══════════
     ONE tight, crafted control strip: no dead vertical air; identity + core stats on a single line;
     the utility buttons pulled into a tight, evenly-spaced right cluster; rarely-used controls
     (Explain / Sign out / Wipe save) demoted to the ⋯ overflow. Authoritative — placed last so it
     wins over the per-view topbar paints without touching their colour treatment. */
  /* QA 2026-07-31 (defect #3): 6px vertical inset (was 0). When the second stat row wraps the bar
     to ~115px the identity lands on its own flex line at the very top, and with zero padding the
     cased screen's 30px corner radius cut the founder line in half. align-self can't fix it (the
     item is alone on its wrapped line — proven by live probe); vertical padding is the only thing
     that clears the corner at every bar height. One-line mode is unaffected (min-height still 50). */
  .topbar{ min-height:50px !important; padding:6px 14px !important; gap:7px !important; }
  /* identity: a compact editorial block, never a sprawling stack.
     QA 2026-07-31 (defect #3): align-self:center — stretched-to-top, the ~25px identity column sat
     flush against the cased screen's rounded corner whenever the second stat row grew the bar to
     ~115px, and the corner cut the founder line in half. This block is authoritative (placed last),
     so the fix must live HERE — the earlier .stat-id rule is overridden by these !importants. */
  .topbar .stat.stat-id{ max-width:188px !important; padding:0 14px 0 0 !important; align-self:center !important;
    /* margin-top is the one lever PROVEN (live probe) to clear the cased screen's corner radius
       when the bar wraps and the identity lands alone on the top flex line — align-self is a no-op
       there (alone on its line) and .topbar padding loses to a later !important. In one-line mode
       this reads as a ~3px optical offset; invisible next to a founder name cut in half. */
    margin-top:7px !important; }
  /* the readout shows its figures — CASH never clips mid-glyph again */
  .topbar #hud{ overflow:visible !important; }
  .topbar #hud .hud-group{ gap:14px !important; padding:0 14px !important; }
  .topbar #hud .hud-group.hud-secondary{ gap:12px !important; padding:0 12px !important; }
  /* game clock: the day/time slab is redundant with the WEEK stat + the PN/OS dock clock, and its
     footprint forced the CRED/WahCoins cluster to collide — drop it from the tight office/pitch
     console (Store/Pass/Result bars keep it; they wrap and have the room). */
  body[data-view="office"] .topbar .game-clock,
  body[data-view="pitch"] .topbar .game-clock{ display:none !important; }
  /* the utility cluster — tight, connected, right-aligned */
  .topbar .tb-btn{ height:30px !important; padding:0 11px !important; gap:6px !important;
    font-size:9.5px !important; letter-spacing:.1em !important; }
  .topbar .tb-btn.tb-ico{ width:30px !important; padding:0 !important; }
  .topbar #account{ gap:6px !important; }
  .topbar #account button{ height:30px !important; padding:0 11px !important; font-size:9.5px !important; }
  .topbar .acc-chip{ width:30px !important; height:30px !important; }
  .topbar #tbMore{ margin-left:0 !important; }
  /* DEMOTE the rarely-used controls into the ⋯ overflow at desktop too (they stay wired via proxy).
     The primary utilities — Store / CFO / COO / Feed / League — remain the standing cluster. */
  @media(min-width:761px){
    .topbar #helpBtn, .topbar #resetBtn, .topbar #acc-out{ display:none !important; }
    .topbar .tb-more{ display:inline-flex !important; }
    /* the desktop overflow holds ONLY the demoted items — hide the proxies whose pill is standing */
    #tbOverflow [data-tbproxy="storeBtn"],
    #tbOverflow [data-tbproxy="cfoBtn"],
    #tbOverflow [data-tbproxy="cooBtn"],
    #tbOverflow [data-tbproxy="feedBtn"],
    #tbOverflow [data-pnl-of]{ display:none !important; }
  }

  /* ══════════ FIX 1 · THE CONDENSED COMMAND BAR ≤900px (CEO 2026-07-25, 834px screenshots) ══════════
     THE DEFECT: between 761px and 900px NOTHING collapsed. The bar kept the full desktop layout —
     brandmark + identity + two stat tiers + the WK clock slab + five utility pills + ⋯ — in a strip
     that only fits about half of it. Everything piled up: "£120,000" printed UNDER the STORE chip,
     "REPUTATION 40.0" under CFO, the "WK1 MON 18:00" clock slab straight over Cash on the Vault, and
     the whole SECONDARY tier (CRED/VALUATION/TIME/WAHWAHS/WAHCOINS) bled out past the bar's bottom
     edge onto the page. The office/pitch views were partly protected by their own scoped rules — the
     Vault, Season Pass, meet-team, week-summary and result bars were not. Hence: view-agnostic.

     THE FIX — two DECKS, not a wrap accident. #hud goes display:contents so its children become
     direct flex children of the bar and can be ordered independently:
       DECK 1 (identity) — brandmark · agency + founder · everything else folded behind ⋯
       DECK 2 (instrument strip) — CASH · REPUTATION · CLIENTS · WEEK, hairline-ruled, tabular,
                                   with the game clock pinned to its right end.
     One hairline separates the decks so it reads as a designed instrument panel (the idiom is a
     trading terminal's ticker rail), never two stranded rows of pills. UX_RULES §3 is honoured in
     substance: no stranded utility pills, no wrapped chrome, no overlap, at any width ≥320px. */
  @media(max-width:900px){
    .topbar{ flex-wrap:wrap !important; align-items:center; align-content:center;
      row-gap:0; column-gap:8px !important; padding:0 14px !important; min-height:0 !important; }
    /* #hud stops being a box so its cells can be dealt to either deck */
    .topbar #hud{ display:contents !important; }

    /* ── DECK 1 ─────────────────────────────────────────────────────────────────────── */
    .topbar .brandmark{ order:1; align-self:center; height:44px; padding-right:12px; margin-right:0;
      font-size:16px; border-right:1px solid var(--line); }
    .topbar .stat.stat-id{ order:2; align-self:center; min-width:0; flex:1 1 auto;
      max-width:none !important; padding:0 0 0 12px !important; }
    .topbar .stat.stat-id b{ font-size:12.5px; }
    .topbar .stat.stat-id span{ font-size:7.5px; }
    .topbar .wearing-chip{ order:3; align-self:center; flex:none; }
    /* every utility folds into the ⋯ menu — the bar carries identity + numbers, nothing else */
    .topbar #storeBtn,.topbar #cfoBtn,.topbar #cooBtn,.topbar #feedBtn,.topbar #pnlLeagueBtn,
    .topbar #helpBtn,.topbar #resetBtn,.topbar #account{ display:none !important; }
    .topbar .tb-more{ display:inline-flex !important; order:4; flex:none; align-self:center; margin-left:0 !important; }
    /* …so the overflow must hand every one of them back (the ≥761 rule hid these proxies) */
    #tbOverflow [data-tbproxy="storeBtn"],
    #tbOverflow [data-tbproxy="cfoBtn"],
    #tbOverflow [data-tbproxy="cooBtn"],
    #tbOverflow [data-tbproxy="feedBtn"],
    #tbOverflow [data-pnl-of]{ display:flex !important; }

    /* ── the deck break: the old flex spacer is repurposed as a zero-height full-width rule ── */
    .topbar .spacer{ display:block !important; order:5; flex:0 0 100%; width:100%;
      height:0; min-width:0; margin:0; border-top:1px solid color-mix(in srgb, currentColor 15%, transparent); }

    /* ── DECK 2 · the instrument strip ──────────────────────────────────────────────── */
    .topbar #hud .hud-group.hud-primary{ order:6; display:flex; flex:1 1 auto; min-width:0;
      align-self:stretch; align-items:center; height:38px;
      gap:0 !important; padding:0 !important; border-left:0;
      overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
    .topbar #hud .hud-group.hud-primary::-webkit-scrollbar{ display:none; }
    .topbar #hud .hud-primary .stat{ flex:none; padding:0 14px; height:26px; justify-content:center;
      border-right:1px solid color-mix(in srgb, currentColor 13%, transparent); }
    .topbar #hud .hud-primary .stat:first-child{ padding-left:0; }
    .topbar #hud .hud-primary .stat:last-child{ border-right:0; }
    /* the ≤760 rule dropped CLIENTS + WEEK because the OLD single-row bar had no room for them. The
       strip does (and scrolls in its own container if a figure ever gets long), so the readout stops
       lying by omission — all four primaries are present at 390. */
    .topbar #hud .hud-primary .stat[data-panel="clients"],
    .topbar #hud .hud-primary .stat[data-panel="calendar"]{ display:flex !important; }
    .topbar #hud .hud-primary .stat b{ font-size:14px; line-height:1; }
    .topbar #hud .hud-primary .stat.stat-hero b{ font-size:16px; }
    .topbar #hud .hud-primary .stat span{ font-size:7px; letter-spacing:.14em; margin-bottom:3px; }
    /* the SECONDARY tier is gone at this width on EVERY view (it lives in the CFO wallet + tap-panels) */
    .topbar #hud .hud-group.hud-secondary{ display:none !important; }
    .topbar #hud .hud-group.hud-holdco{ order:7; flex:none; align-self:center; padding:0 0 0 12px; border-left:0; }
    .topbar #hud .hud-holdco .stat b{ font-size:11px; } .topbar #hud .hud-holdco .stat span{ font-size:7px; }
    /* the clock is pinned to the strip's right end — it can no longer land on top of Cash */
    .topbar .game-clock{ display:block !important; order:8; flex:none; align-self:center;
      margin-left:auto; min-width:0; font-size:9px; padding:3px 8px; letter-spacing:.1em; }
  }
  /* very narrow: the clock chip yields to the numbers (WEEK already carries the week) */
  @media(max-width:560px){
    .topbar .game-clock{ display:none !important; }
    .topbar #hud .hud-primary .stat{ padding:0 11px; }
    .topbar .brandmark{ font-size:14px; padding-right:9px; }
  }

  /* ══════════ FIX 4 · THE GAME-CLOCK CHIP READS AA ON THE BAR IT ACTUALLY SITS ON ══════════
     THE DEFECT: `body.mvc-light .game-clock` painted near-black ink (rgba(20,27,40,.82)) on a near-
     black plate on the VAULT — because the topbar is only LIGHT on office/week-summary/pitch; on the
     Store, Season Pass, meet-team, result and default HUD bars it stays dark glass in every theme.
     Keying the ink off the THEME instead of off the BAR is the same class of bug the topbar buttons
     were fixed for (SA8/P2 SEV3); this re-pins the chip to the identical scoping. */
  .game-clock{ color:#eaf1fb !important;
    background:rgba(255,255,255,.10) !important;
    border:1px solid rgba(255,255,255,.20) !important; }         /* 13.6:1 on the dark bar */
  body.mvc-light[data-view="office"] .game-clock,
  body.mvc-light[data-view="weeksummary"] .game-clock,
  body.mvc-light[data-view="pitch"] .game-clock{
    color:#13202f !important;                                     /* 14.1:1 on the porcelain bar */
    background:rgba(11,28,48,.07) !important;
    border:1px solid rgba(11,28,48,.20) !important; }
  /* the time-of-day tint is a MOOD, never a legibility tax — every state stays ≥ AA on its own bar */
  .game-clock[data-tod="night"]{ color:#b9caf6 !important; }      /* 9.4:1 dark bar */
  .game-clock[data-tod="dawn"]{ color:#ffc078 !important; }       /* 11.0:1 */
  .game-clock[data-tod="dusk"]{ color:#f3b3d6 !important; }       /* 10.6:1 */
  body.mvc-light[data-view="office"] .game-clock[data-tod="night"],
  body.mvc-light[data-view="weeksummary"] .game-clock[data-tod="night"],
  body.mvc-light[data-view="pitch"] .game-clock[data-tod="night"]{ color:#23305c !important; }   /* 10.9:1 light bar */
  body.mvc-light[data-view="office"] .game-clock[data-tod="dawn"],
  body.mvc-light[data-view="weeksummary"] .game-clock[data-tod="dawn"],
  body.mvc-light[data-view="pitch"] .game-clock[data-tod="dawn"]{ color:#7a3d00 !important; }    /* 7.5:1 */
  body.mvc-light[data-view="office"] .game-clock[data-tod="dusk"],
  body.mvc-light[data-view="weeksummary"] .game-clock[data-tod="dusk"],
  body.mvc-light[data-view="pitch"] .game-clock[data-tod="dusk"]{ color:#7a1f57 !important; }    /* 8.6:1 */

  /* ══════════ FIX 2 · THE CONSENT BANNER — a docked strip that occludes nothing ══════════
     THE DEFECT: a 340px floating card pinned bottom-left. It sat ON TOP of the squad cards and the
     Vault's product tiles (interactive content), and at narrow widths its flex-wrap dropped the two
     buttons past the card's own edge — copy cut mid-sentence, "Accept"/"Decline" half-clipped.
     THE FIX: a full-bleed strip seated on the screen floor. It is a LAYOUT participant, not an
     overlay — `body.pn-consent-on` reserves the strip's height at the foot of the scroller and lifts
     the PN/OS dock, so nothing it covers is ever content. Copy is one line at ≥620px, wraps freely
     below; both actions are always fully inside the strip. */
  /* QA 2026-07-31 (defect #14): while a pitch set-piece scrim (z 10045) is up, the consent strip
     (z 280) sat trapped underneath it — ACCEPT half-visible and unclickable, and the stack ate
     ~200px of the war room. A privacy notice must never compete with a cinematic: it DEFERS —
     hidden while any set-piece scrim is present, back the moment it closes. */
  /* ── OCCLUSION LAW · the consent card must never own the bottom of a full-bleed set-piece ──────
     Found while QA-ing CEO-67: with the verdict CTA now anchored to the bottom of the screen, the
     analytics consent card (fixed, bottom:0, z-index 280 — above the verdict's 90) sat directly on
     top of it. On a first session, a player finishing their first pitch could not press Continue at
     all. The pitch set-piece already had this exemption; the verdict, the two end screens and the
     Marlowe summons never did, and they are the same kind of surface. All four now step aside. */
  /* ⛔ FIFTH APPEARANCE (CEO, 2026-08-10: "You need to sort this mobile shit experience out").
     The mobile audit found it on the very first screen a new player sees: on a phone the consent
     strip sat on top of "Begin the interview →" — elementFromPoint at the button's own centre
     returned #pn-consent. The onboarding interview is a full-bleed set-piece exactly like the four
     already exempted; it was simply never added to the list.
     THE LIST IS THE DEFECT. Enumerating surfaces one at a time guarantees a sixth appearance the
     next time somebody builds a full-bleed screen. `.vc-room` (the interview) is added below, and
     `.pn-setpiece` is the marker any NEW full-bleed surface can carry to opt in without editing
     this rule again. The strip is a layout participant on ordinary pages and stands aside for
     anything that owns the whole screen. */
  body:has(.pnp2-scrim) #pn-consent,
  body[data-view="result"] #pn-consent,
  body:has(.result-screen) #pn-consent,
  body:has(#pn-end) #pn-consent,
  body:has(.vc-room) #pn-consent,
  body:has(.pn-setpiece) #pn-consent,
  body:has(#pn-vc) #pn-consent{ visibility:hidden; }
  /* ⛔ QA 2026-08-11 (#2): the auth stage is fixed at z-index 10000 and this strip sat at 280 —
     so a first-time ONLINE player was never shown the consent choice at all; it rendered fully
     buried behind the sign-in screen. A consent control is the one element that must never lose
     a stacking fight: it now sits above every stage. (Overlays that must beat even this — the
     death screen — live at 21000+.) */
  #pn-consent{ position:fixed; left:0; right:0; bottom:0; z-index:10500;
    display:flex; align-items:center; gap:16px 18px; flex-wrap:wrap;
    padding:13px clamp(14px,3.4vw,30px) calc(13px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(180deg,#101b2c,#08101c);
    border-top:1px solid rgba(249,115,22,.42);
    box-shadow:0 -18px 44px rgba(0,0,0,.5); }
  /* the mono eyebrow is the house tell — this is a system notice, not a cookie popup */
  #pn-consent .pnc-eye{ flex:none; font:800 8.5px/1 var(--mono); letter-spacing:.3em; text-transform:uppercase;
    color:#ff9a5f; padding-right:16px; border-right:1px solid rgba(255,255,255,.16); }
  #pn-consent .pnc-copy{ flex:1 1 320px; min-width:0; font:400 12.5px/1.5 var(--body,inherit);
    color:#e7eefa; margin:0; }                                     /* 14.9:1 */
  #pn-consent .pnc-copy a{ color:#ffa25c; text-decoration:underline; text-underline-offset:2px; }  /* 7.4:1 */
  #pn-consent .pnc-acts{ flex:none; display:flex; gap:9px; margin-left:auto; }
  #pn-consent button{ flex:none; height:34px; padding:0 18px; border-radius:4px; cursor:pointer;
    font:800 10.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
    transition:background .14s, border-color .14s, color .14s; }
  /* !important because the view-scoped office/pitch button paints are themselves !important and would
     otherwise flip both actions to identical porcelain pills in a light theme (caught in gate 4) */
  #pn-consent .pnc-yes{ background:#f97316 !important; border:1px solid #f97316 !important; color:#0b1c30 !important; }   /* 8.2:1 */
  #pn-consent .pnc-yes:hover{ background:#ff8a37 !important; border-color:#ff8a37 !important; }
  #pn-consent .pnc-no{ background:transparent !important; border:1px solid rgba(255,255,255,.34) !important; color:#d7e2f2 !important; }  /* 11.5:1 */
  #pn-consent .pnc-no:hover{ border-color:#e7eefa !important; color:#fff !important; }
  #pn-consent button:focus-visible{ outline:2px solid #ff9a5f; outline-offset:2px; }
  /* RESERVE THE SPACE — the strip displaces, it never covers. --pn-consent-h is measured from the
     live element (and re-measured on resize) so the reservation is always exactly right, whatever the
     copy wraps to; every floating layer that lives on the screen floor is lifted by the same amount. */
  body.pn-consent-on #app{ padding-bottom:calc(var(--pn-consent-h,96px) + 22px); }
  body.pn-consent-on .pnos-dock{ bottom:var(--pn-consent-h,96px) !important; }
  /* the floating theme picker STANDS DOWN while the strip is up. Lifting it (gate 2 + gate 4) only
     parked it on top of the dashboard cards — and UX_RULES §6 is explicit that a set-and-forget
     control never squats on prime UI. One decision on screen at a time; the picker returns on tap. */
  body.pn-consent-on .mvc-palfloat{ display:none !important; }
  @media(max-width:620px){
    #pn-consent{ gap:11px 14px; }
    #pn-consent .pnc-eye{ border-right:0; padding-right:0; flex:1 0 100%; }
    #pn-consent .pnc-acts{ flex:1 0 100%; margin-left:0; }
    #pn-consent .pnc-acts button{ flex:1 1 0; }
  }

  /* ══════════ P1-B · RESPONSIVE DASHBOARD — TWO COLUMNS WHEN WIDTH PERMITS ══════════
     The Performance view was a single tall column that wasted the iPad's width. At wide widths the
     modules lay into a 2-column masonry grid; the command spine (hero · do-this-now · KPI strip ·
     insight) spans full width. Collapses to one column below 880px (narrow iPad portrait + phone). */
  @media(min-width:880px){
    body[data-view="office"] .hub-view[data-view="v-perf"].on{
      display:grid !important; grid-template-columns:1fr 1fr; gap:18px;
      align-items:start; align-content:start; grid-auto-flow:row dense; }
    body[data-view="office"] .hub-view[data-view="v-perf"].on > *{ min-width:0; }
    /* full-width command spine + internally-wide modules */
    body[data-view="office"] .hub-view[data-view="v-perf"].on > .pv-hero-row,
    body[data-view="office"] .hub-view[data-view="v-perf"].on > .do-now,
    body[data-view="office"] .hub-view[data-view="v-perf"].on > .mvc-kpi-row,
    body[data-view="office"] .hub-view[data-view="v-perf"].on > .pv-cols{ grid-column:1 / -1; }
    /* unwrap the NEW-BUSINESS / CLIENTS pair so both cards join the 2-col masonry directly */
    body[data-view="office"] .hub-view[data-view="v-perf"].on > .perf-grid{ display:contents !important; }
    /* every module card tops out in its cell (masonry read, no stretch) */
    body[data-view="office"] .hub-view[data-view="v-perf"].on > .card.shard,
    body[data-view="office"] .hub-view[data-view="v-perf"].on > .mvc-glass,
    body[data-view="office"] .hub-view[data-view="v-perf"].on .perf-grid > .card.shard{ align-self:start; }
  }

  /* ⛔ SIGNING IN IS NOT AN OVERFLOW-MENU NICETY (CEO, 2026-08-07: "Where's my login?" — asked
     three times). The phone rules above hide #account entirely to save topbar width, which is
     right when it holds an avatar and a Sign out button you rarely need. It is WRONG when it
     holds the only route back to an account: a signed-out player on a phone could see no way in,
     which is exactly why the login looked deleted rather than skipped. When signed out the slot
     stays, and it is the one thing in the topbar that must never be collapsed. */
  .topbar #account.is-signedout,
  .topbar.is-tight #account.is-signedout{ display:inline-flex !important; }
  /* 44px, because this is the primary action for a signed-out player on a phone and the phone
     floor applies to it more than to anything else in the topbar. The generic #account button
     rule sets 32px, which is fine for Sign out and not fine for the way back in. */
  #account.is-signedout button{ background:var(--accent); color:#0b0d12; border-color:transparent;
    font-weight:900; height:auto; min-height:44px; padding:0 14px; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   MOBILE LEGIBILITY FLOOR (CEO, 2026-08-10: "You need to sort this mobile shit experience out")
   ──────────────────────────────────────────────────────────────────────────────────────────────
   UX_RULES §1 puts the floor at 11px on a 390 screen. tools/mobile_audit.js measures every text
   node that actually renders and reports anything under it, and on the first screen a new player
   sees it found six: the topbar Sign in at 9.5px, the interview eyebrow and both meter labels at
   10px, the verdict line and Decline at 10.5px. Small mono caps are the house voice and they stay
   — they just stop shrinking below the point where they are decoration rather than words.
   Scoped to phone widths so the desktop typography is untouched.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width:430px){
  /* .topbar #account button carries font-size:9.5px !important at (0,2,1) — an !important on a
     weaker selector loses, which is why the first attempt at this rule changed nothing and the
     audit still reported 9.5px. Match the specificity or do not bother. */
  .topbar #account button, .topbar #account .who,
  #account button, #account .who{ font-size:11px !important; letter-spacing:.06em; }
  .vc-room-kick{ font-size:11px !important; letter-spacing:.18em; }
  .vc-room-meter .roommeter .lbl span{ font-size:11px !important; }
  .vc-room-meter .roomverdict,
  .roomverdict{ font-size:11.5px !important; }
  #pn-consent button{ font-size:11px !important; letter-spacing:.1em; height:44px; }
  /* the consent actions are the one pair of buttons every single player meets — they get the
     full 44px target on a phone, not a 34px pill sized for a mouse */
  #pn-consent .pnc-acts button{ min-height:44px; }
  /* onboarding "You're in." — the board strip and the BACKED pill were 8.5-10px */
  .cb-label{ font-size:11px !important; letter-spacing:.12em !important; }
  .cb-count{ font-size:11px !important; letter-spacing:.05em !important; }
  .city-btn .ct-meta{ font-size:11px !important; }
  span.pill{ font-size:11px !important; }
  /* meet-the-team — the role/salary line and the dossier stamp were 10.5px and 8px. The stamp is
     deliberately small print, and small print still has to be readable at arm's length. */
  .sq-role{ font-size:11.5px !important; }
  .sq-stamp{ font-size:11px !important; letter-spacing:.06em !important; }
  /* the wire band and the dossier serial — house small-caps, still words */
  .wire-band-k, .wire-band-ref, .wire-band-cls{ font-size:11px !important; letter-spacing:.08em !important; }
  .pnd-serial{ font-size:11px !important; letter-spacing:.1em !important; }
  #pn-doss-caption{ font-size:11.5px !important; }
}

/* ── ONBOARDING ACTION BAR · the sticky footer must not eat the city picker ─────────────────────
   Found by tools/mobile_audit.js on the "You're in." screen: elementFromPoint at the centre of the
   LDN and NYC buttons returned the action row, not the buttons. The row is position:sticky with a
   gradient that starts at `transparent`, so its top ~38% is INVISIBLE and was still swallowing
   every tap aimed at the two cities underneath it. Identical to the .vc-caption defect: a bottom-
   pinned box whose see-through half is still a click target.
   The row is furniture; only the button inside it is a control. And the grid gets bottom padding
   so the last row of cities can scroll clear of the bar rather than living permanently under it. */
  .onb-actionbar{ margin-top:8px; position:sticky; bottom:0; z-index:5; padding:10px 0;
    pointer-events:none;                       /* the bar is not a control */
    background:linear-gradient(180deg,transparent,rgba(7,14,26,.88) 38%); }
  .onb-actionbar > *{ pointer-events:auto; }   /* the button inside it is */
  /* QA 2026-08-11 (#5): the sticky Found-the-agency bar floated over live city rows (LAX on
     desktop; TOR/SEO/MEL on phone) — hit-tests landed on the bar's button. The grid reserves the
     bar's height so its last rows can always scroll above it. */
  #onb-city-grid{ padding-bottom:96px; }

/* ── A DEAD AGENCY LOOKS DEAD (CEO, 2026-08-10) ─────────────────────────────────────────────────
   "If the doors are shut I should see this with a big Red Cross through the agency."
   state._dead is set the moment showGameOver() runs, and My Agencies ignored it: an insolvent
   agency sat on the shelf with a live-looking week counter and the same orange OPEN button as an
   agency still trading. You had to open it to find out it was a corpse.
   The cross is struck THROUGH the logo tile — drawn, not a glyph, so it scales with the plate and
   never depends on a font that might not have loaded. The row is drained of colour so a shelf of
   agencies reads at a glance, and OPEN steps back to a ghost button: the wreck is still yours to
   look at, it just stops competing with the agencies you can actually play. */
  .ag-row.is-dead{ --ag-pip:#c2402a; opacity:.72; filter:saturate(.35); }
  .ag-row.is-dead:hover{ opacity:.92; filter:saturate(.6); }
  .ag-logo{ position:relative; }
  .ag-cross{ position:absolute; inset:-3px; width:calc(100% + 6px); height:calc(100% + 6px);
    pointer-events:none; overflow:visible; }
  .ag-cross path{ stroke:#e0301a; stroke-width:9; stroke-linecap:square; fill:none;
    filter:drop-shadow(0 0 6px rgba(224,48,26,.55)); vector-effect:non-scaling-stroke; }
  .ag-dead-tag{ display:inline-block; margin-left:8px; padding:2px 7px; border-radius:3px;
    font:800 11px/1.35 var(--mono,ui-monospace,monospace); letter-spacing:.16em;
    color:#ffd9d2; background:rgba(194,64,42,.26); border:1px solid rgba(224,48,26,.6);
    vertical-align:middle; }
  .ag-row.is-dead .ag-meta span{ color:#e08b7d; letter-spacing:.06em; }
  /* the name truncates with an ellipsis, which ate the CLOSED tag sitting inside it. On a dead row
     the tag is the most important word on the card, so the name is allowed to wrap and the tag
     always survives. */
  .ag-row.is-dead .ag-meta b{ white-space:normal; overflow:visible; text-overflow:clip; }
  .ag-row.is-dead .ag-open{ background:transparent !important; color:#d9c4bf !important;
    border:1px solid rgba(224,48,26,.5) !important; box-shadow:none !important; }
  .ag-row.is-dead .ag-open:hover{ color:#fff !important; border-color:#e0301a !important; }

/* ── THE TESTER CHIP MUST NOT SIT ON "FOUND A NEW AGENCY" (CEO screenshot, 2026-08-10) ──────────
   Third surface where the fixed bottom-left chip lands on a control. On the summons the right
   answer was to hide it, because that screen is a cinematic that owns the viewport. Here it is the
   opposite: My Agencies is exactly where "this run is not ranked" MATTERS, so the chip stays and
   the list makes room for it. Reserving a lane works here precisely because this content scrolls
   to an end — the chip sits below the last row rather than travelling through it. */
  body.pn-tester-on .agdash-in,
  body.pn-tester-on #u3-aglist{ padding-bottom:76px; }

  /* ── AI DISCLOSURE (EU AI Act Art. 50, in force 2026-08-02) ────────────────────────────────
     Sits under the interview meter, on the first screen where the player meets Marlowe. It must
     be READABLE to count as a disclosure, so it takes the same 11px mobile floor and AA ink as
     any other copy — a 9px grey line at the bottom of a card is a disclosure in name only. Not
     dismissable and not behind a toggle. */
  .vc-ai-note{ margin:14px 0 0; padding-top:12px; border-top:1px solid rgba(255,255,255,.10);
    font-size:12px; line-height:1.5; color:rgba(234,241,251,.72); }
  .vc-ai-note b{ color:#eaf1fb; font-weight:800; }
  .vc-ai-note a{ color:var(--accent,#f97316); text-decoration:underline; text-underline-offset:2px; }
  @media(max-width:640px){ .vc-ai-note{ font-size:11.5px } }

  /* ═══ THE WIRE — the drawer CSS that was never shipped (CEO, 2026-08-11: "feed button does
     nothing") ══════════════════════════════════════════════════════════════════════════════
     FIX C (2026-07-20) moved the feed's entry point to the topbar FEED button and left this
     comment in script-01.js: "body.feed-open drives visibility via CSS". The JS shipped; the
     CSS never did — zero rules for feed-open existed in any stylesheet, so the button toggled
     a class the renderer had no opinion about and the rail sat in the office flex row as a
     broken sliver. This block is the missing half. The lesson is the same as the store's theme
     engine: state without a renderer is a dead switch, and it dies silently. */
  .feed-rail .fr-tab{display:none !important}          /* the vertical-strip idiom is retired */
  body:not(.feed-open) .feed-rail{display:none !important}
  body.feed-open .feed-rail,
  body.feed-open[data-view="office"] #app>.feed-rail{  /* outranks the office sticky !importants */
    display:flex !important;position:fixed !important;top:0 !important;right:0 !important;
    bottom:0 !important;width:min(360px,92vw) !important;height:auto !important;
    margin:0 !important;border-radius:0 !important;z-index:9600 !important;
    border-left:1px solid rgba(255,255,255,.12) !important;border-top:none;border-right:none;border-bottom:none;
    background:linear-gradient(180deg,#0c1622,#0a1019) !important;
    box-shadow:-24px 0 60px rgba(0,0,0,.5) !important;
    animation:pnWireIn .26s cubic-bezier(.2,.75,.25,1) both}
  body.feed-open .feed-rail .fr-panel{opacity:1 !important;pointer-events:auto !important;
    width:100% !important;overflow-y:auto}
  @keyframes pnWireIn{from{transform:translateX(28px);opacity:0}to{transform:none;opacity:1}}
  @media (prefers-reduced-motion:reduce){body.feed-open .feed-rail{animation:none}}

  /* QA 2026-08-11 (edge #4): at 390px the TESTER chip (fixed, bottom:92px) sat straight across
     the interview meter's "WILL SHE BACK YOU?" label. During the interview it drops to the floor
     of the screen — still stamping every screenshot, no longer reading her meter for her. */
  @media (max-width:430px){ body:has(.vc-room) #pn-tester{ bottom:10px } }
  /* QA 2026-08-11 (edge #6): late-game desktop office — a Pitch-it CTA and the help chip
     hit-tested to the fixed PN/OS dock at natural scroll. The shell reserves the dock's band so
     the last row of content can always scroll clear of it. */
  body[data-view="office"] #app{ padding-bottom:132px !important }
  /* ── WEEK-LOOP QA 2026-08-11 (D2): the CFO insolvency memo's only way out sat ~400px below the
     fold on a phone with no scroll affordance — a player in the highest-stakes dialog couldn't see
     the exit. The action row now STICKS to the slab's bottom edge over a cream fade, so the way
     out is on screen at every scroll position, and the fade itself says "there is more above". */
  .cfoX-mail .cfoX-acts{position:sticky;bottom:-1px;margin-top:8px;
    padding-top:18px;padding-bottom:16px;
    background:linear-gradient(180deg,rgba(251,248,242,0),#fbf8f2 42%)}
  .cfoX-hold{min-height:44px}
  .cfoX-exec{min-height:44px}
  /* ── WEEK-LOOP QA 2026-08-11 (D4): 44px tap floors on the small controls the audit measured
     (WIRE close 10×16, league CLOSE 69×25, GOT IT 89×28, Skip 56×22, cam 38×38). Invisible halo,
     same pattern as .help-chip's existing mobile halo — the visual stays, the target grows. */
  #frClose,.pnl-x,#fsGotit,#fc-skip,#camtoggle{position:relative}
  #frClose::after,.pnl-x::after,#fsGotit::after,#fc-skip::after,#camtoggle::after{
    content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:max(100%,44px);height:max(100%,44px)}
  /* CEO-79: in help-mode the inline ? chips join the lesson — lifted above the scrim and pulsed so
     "Explain this screen" lights every affordance the surface already carries, not just the badges. */
  body.help-mode .help-chip{position:relative;z-index:9010;animation:badgepop .18s cubic-bezier(.34,1.56,.64,1),helpchip-pulse 1.6s ease .3s 3}
  @keyframes helpchip-pulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--glow),.55)}50%{box-shadow:0 0 0 7px rgba(var(--glow),0)}}
  @media (prefers-reduced-motion:reduce){ body.help-mode .help-chip{animation:none} }