/* ══════════════════════════════════════════════════════════════════════════════════════════════
   pn-blockcolour-20260927.css — BLOCK COLOUR + LEGIBILITY PASS (CEO launch-day review, 2026-09-27)
   ══════════════════════════════════════════════════════════════════════════════════════════════
   CEO, verbatim, on desktop review of five key screens: "I need you to improve these key designs —
   more block colour, clear differentiation and type legibility" / "this is all too busy" / "These
   screens are terrible all too dark — where are the block colour and lighter modules?"

   SCOPE — six screens, all inside play.html/script-01.js/pn-pitch2.js render output:
     1. Clients — "THE BOOK OF BUSINESS" (v-clients hub tab)
     2. "Your starting team" onboarding window
     3. The "WELCOME <agency>" bigmodal
     4. Pitch set-piece, beat 1 BRIEF (pn-pitch2.js beatWin/beatBrief)
     5. PRESENT-stage boardroom pre-room ("The client is waiting.")
     6. The Floor's AGENCY VALUATION hero card (perfHeroVizHTML) — added mid-pass, same defect class

   DIRECTION (unchanged noir world, STYLE_SOURCE_OF_TRUTH.md / UX_RULES.md): stay dark, but
   introduce LIGHTER RAISED MODULES (a machined slate, distinctly lighter than the ground — the
   ALTERNATION LAW's own move, applied harder) and SOLID BLOCK COLOUR for headline figures and
   section heads: the house orange (--p) as the primary block, plus ONE supporting cool-steel block
   (--bcx-steel) so two different kinds of "important" read as two different objects, never the
   same orange doing every job (SYSTEM_V2 §7 — accent stays disciplined). Minimum 13px body/label
   type, mono tracking cut from the 0.2–0.5em SST ceiling down to ~0.08–0.12em so labels stop
   reading as texture, and AA contrast checked in both themes per UX_RULES §1.

   CONSTRAINT: this file only. Loaded LAST (link line at the bottom of this comment block for
   whoever wires it into play.html):
     <link rel="stylesheet" href="assets/css/play/pn-blockcolour-20260927.css">
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

:root{
  /* the second block colour — a cool machined steel-blue, never orange's job (info/context blocks,
     never CTAs, never anything orange already owns) */
  --bcx-steel:      #3a5f7a;
  --bcx-steel-ink:  #eef4fb;
  --bcx-steel-dim:  rgba(58,95,122,.22);
  /* the lighter RAISED module surface — distinctly brighter than the dark ground it sits on */
  --bcx-panel-dark:   #1c2431;
  --bcx-panel-dark-2: #232c3b;
  --bcx-hair-dark:    rgba(255,255,255,.14);
  --bcx-panel-light:  #ffffff;
  --bcx-panel-light-2:#f3f0ea;
  --bcx-hair-light:   rgba(24,16,8,.14);
  /* ink-on-accent per SST §5f — dark theme orange takes near-black, light theme burnt-orange takes white */
  --bcx-on-accent-dark:  var(--pn-on-accent, #180a02);
  --bcx-on-accent-light: #fdfaf6;
}
html body.mvc-light{
  --bcx-panel:   var(--bcx-panel-light);
  --bcx-panel-2: var(--bcx-panel-light-2);
  --bcx-hair:    var(--bcx-hair-light);
  --bcx-ink:     #1c130b;
  --bcx-ink-dim: #5b4d40;
  --bcx-on-accent: var(--bcx-on-accent-light);
}
html body:not(.mvc-light){
  --bcx-panel:   var(--bcx-panel-dark);
  --bcx-panel-2: var(--bcx-panel-dark-2);
  --bcx-hair:    var(--bcx-hair-dark);
  --bcx-ink:     #eef3fa;
  --bcx-ink-dim: rgba(238,243,250,.68);
  --bcx-on-accent: var(--bcx-on-accent-dark);
}

/* ── SHARED MINIMUM LEGIBILITY (all six screens) ─────────────────────────────────────────────── */
html body .s2-book, html body .meetteam-stage, html body #toast.bigmodal:has(.pn-welcome-pt) .bigmodal-card-body,
html body .pnp2-win, html body .pn-preroom-head, html body .pn-preroom-sub,
html body .pv-herochartbox{
  --bcx-track: .09em; /* cut from SST's 0.2-0.5em ceiling — labels read as words, not texture */
}
html body .s2-eyebrow, html body .tac-eyebrow, html body .pnp2-now, html body .pnp2-term > i,
html body .ts-avg, html body .s2-bk-k, html body .s2-bk-s{
  letter-spacing: var(--bcx-track, .09em) !important;
}
html body .s2-bk-s, html body .pnp2-bg, html body .pn-preroom-sub,
html body .mt-sub, html body .mt-toggle-cap,
html body #toast.bigmodal:has(.pn-welcome-pt) .bigmodal-card-body p{
  font-size: 13.5px !important;
  line-height: 1.5 !important;
}

/* ══ 1 · CLIENTS — "THE BOOK OF BUSINESS" ═══════════════════════════════════════════════════════
   Was: navy-on-navy, hairline rows, tiny wide-tracked mono labels, the £212k figure sitting in
   plain type with no block behind it. Now: the run-rate is a solid orange BLOCK (the one loud
   object), the three stats sit on a lighter raised steel-slate rail (not more navy-on-navy), and
   Exposure gets the steel block reserved for "needs attention but isn't a number to celebrate". */
html body .s2-book{
  background: var(--bcx-panel) !important;
  border: 1px solid var(--bcx-hair) !important;
  border-radius: 4px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1.15fr 1fr !important;
  gap: 0 !important;
  overflow: hidden !important;
}
@media (max-width: 760px){
  html body .s2-book{ grid-template-columns: 1fr !important; }
}
html body .s2-book .s2-bk-hero{
  background: var(--p) !important;
  color: var(--bcx-on-accent) !important;
  padding: 26px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 6px !important;
}
html body .s2-book .s2-eyebrow{
  color: var(--bcx-on-accent) !important;
  opacity: .82 !important;
  font: 800 12px/1 'JetBrains Mono', ui-monospace, monospace !important;
  text-transform: uppercase !important;
}
html body .s2-book .s2-bk-big{
  color: var(--bcx-on-accent) !important;
  font: 900 clamp(40px,5vw,64px)/.92 'Archivo Black', Inter, sans-serif !important;
  letter-spacing: -0.02em !important;
}
html body .s2-book .s2-bk-big .cur, html body .s2-book .s2-bk-big em{
  font-size: .5em !important; opacity: .82 !important; font-style: normal !important;
}
html body .s2-book .s2-bk-sub{
  color: var(--bcx-on-accent) !important;
  opacity: .92 !important;
  font-size: 13.5px !important;
  max-width: 34ch;
}
html body .s2-book .s2-bk-rail{
  background: var(--bcx-panel-2) !important;
  display: flex !important;
  flex-direction: column !important;
}
html body .s2-book .s2-bk-row{
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-rows: auto auto !important;
  align-items: baseline !important;
  gap: 2px 12px !important;
  padding: 14px 22px !important;
  border-top: 1px solid var(--bcx-hair) !important;
}
html body .s2-book .s2-bk-row:first-child{ border-top: 0 !important; }
html body .s2-book .s2-bk-k{
  grid-column: 1; grid-row: 1;
  color: var(--bcx-ink-dim) !important;
  font: 800 12px/1 'JetBrains Mono', ui-monospace, monospace !important;
  text-transform: uppercase !important;
}
html body .s2-book .s2-bk-v{
  grid-column: 2; grid-row: 1 / span 2;
  color: var(--bcx-ink) !important;
  font: 900 30px/1 'Archivo Black', Inter, sans-serif !important;
  align-self: center;
}
html body .s2-book .s2-bk-s{
  grid-column: 1; grid-row: 2;
  color: var(--bcx-ink-dim) !important;
  font-size: 12.5px !important;
}
/* Exposure only earns the steel warning block when there IS exposure — content shapes the layout */
html body .s2-book .s2-bk-row.is-bad .s2-bk-v,
html body .s2-book.has-exposure .s2-bk-row:last-child .s2-bk-v{
  color: #ff8a6a !important;
}
html body .s2-book.has-exposure .s2-bk-row:last-child{
  background: linear-gradient(90deg, var(--bcx-steel-dim), transparent) !important;
  border-left: 4px solid var(--bcx-steel) !important;
  padding-left: 18px !important;
}
html body .s2-book .s2-bk-alert{
  grid-column: 1 / -1;
  background: var(--bcx-steel) !important;
  color: var(--bcx-steel-ink) !important;
  margin: 0 !important;
  padding: 12px 22px !important;
  font-size: 13.5px !important;
  border-radius: 0 !important;
}
html body .s2-book .s2-bk-alert b{ color: #fff !important; }
/* the view heading itself was thin caps on navy — give it the same weight rule as the rest of the pass */
html body [data-view="v-clients"] .tac-eyebrow{ color: var(--bcx-ink-dim) !important; }

/* ══ 2 · "YOUR STARTING TEAM" ONBOARDING WINDOW ════════════════════════════════════════════════
   Was: one dark card, tiny person chips, thin OVERWEIGHT/UNDERWEIGHT tags, low differentiation
   between departments. Now: each department row is its own lighter steel module with a solid
   colour flag block (steel = thin cover, orange = the department carrying the agency), bigger
   chips with real target size, legible 13px+ everywhere. */
html body .meetteam-stage{
  background: var(--bcx-panel-dark) !important;
  border: 1px solid var(--bcx-hair-dark) !important;
}
html body .meetteam-stage .mt-title{
  font-size: clamp(26px,3.4vw,38px) !important;
}
html body .meetteam-stage .mt-sub, html body .meetteam-stage .mt-toggle-cap{
  color: rgba(238,243,250,.78) !important;
  max-width: 62ch;
}
html body .teamsheet{
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
html body .teamsheet .ts-ceo{
  background: var(--p) !important;
  color: var(--bcx-on-accent-dark) !important;
  border-radius: 4px !important;
  padding: 10px 16px !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
}
/* CEO, second pass: "the orange YOU bar's CEO · <name> text is pale orange on orange, unreadable."
   Root cause: style-01.css:4784-4785 sets `.ts-ceo b{color:#fff}` / `.ts-ceo span{color:#8fa1ba}`
   as EXPLICIT declarations on the children — an explicit (non-!important) rule on the element
   itself still beats an inherited value from the parent, !important or not. Setting `color` on
   `.ts-ceo` alone was never going to reach `b`/`span`; they need their own explicit override. */
html body .teamsheet .ts-ceo b{
  font: 900 17px/1 'Archivo Black', Inter, sans-serif !important;
  color: var(--bcx-on-accent-dark) !important;
}
html body .teamsheet .ts-ceo span{
  font-size: 13px !important;
  color: var(--bcx-on-accent-dark) !important;
  opacity: .8 !important;
}
/* CEO, second pass: "each with a solid header colour." The department row now has an actual
   HEADER band (its own darker steel-tinted strip, holding the dept name/avg/flag) sitting on top
   of a distinctly lighter chip tray beneath it — two surfaces reading as one module, not a flat box. */
html body .teamsheet .ts-row{
  background: var(--bcx-panel-dark) !important;
  border: 1px solid var(--bcx-hair-dark) !important;
  border-radius: 4px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  overflow: hidden !important;
}
html body .teamsheet .ts-dept{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font: 800 13.5px/1 'JetBrains Mono', ui-monospace, monospace !important;
  letter-spacing: .09em !important;
  color: #f7fafd !important;
  background: var(--bcx-steel-dim) !important;
  border-bottom: 1px solid var(--bcx-hair-dark) !important;
  padding: 11px 16px !important;
}
html body .teamsheet .ts-line{ padding: 14px 16px !important; }
html body .teamsheet .ts-avg{
  color: rgba(238,243,250,.6) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
html body .teamsheet .ts-flag{
  font: 800 11px/1 'JetBrains Mono', monospace !important;
  letter-spacing: .06em !important;
  padding: 4px 10px !important;
  border-radius: 3px !important;
  text-transform: uppercase !important;
}
html body .teamsheet .ts-flag.under{ background: var(--bcx-steel) !important; color: var(--bcx-steel-ink) !important; }
html body .teamsheet .ts-flag.over{ background: var(--p) !important; color: var(--bcx-on-accent-dark) !important; }
html body .teamsheet .ts-line{ display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }
/* CEO, second pass: "make the person chips larger." Bigger touch target, bigger portrait,
   bigger name — the chip is a person, not a footnote. */
html body .teamsheet .ts-chip{
  min-height: 52px !important;
  padding: 7px 18px 7px 7px !important;
  border-radius: 999px !important;
  background: var(--bcx-panel-dark) !important;
  border: 1px solid var(--bcx-hair-dark) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}
html body .teamsheet .ts-chip i{
  width: 40px !important; height: 40px !important; border-radius: 50% !important;
  background-size: cover !important; background-position: center !important; display: block !important;
  flex: 0 0 auto !important;
}
html body .teamsheet .ts-chip b{ font-size: 15px !important; color: #f7fafd !important; }
html body .teamsheet .ts-chip em{
  font-style: normal !important; font: 800 13.5px/1 'JetBrains Mono', monospace !important;
  color: var(--p) !important;
}
html body .teamsheet .ts-empty{ font-size: 13px !important; color: rgba(238,243,250,.5) !important; }
html body .meetteam-stage .mt-go{
  background: var(--p) !important;
  color: var(--bcx-on-accent-dark) !important;
  font: 800 14px/1 Inter, sans-serif !important;
  min-height: 48px !important;
}

/* ══ 3 · THE "WELCOME <agency>" MODAL ══════════════════════════════════════════════════════════
   Was: one wall-of-text paragraph of bolded run-on prose. CSS alone cannot re-flow prose into list
   items (that needs the markup split below, applied by the coordinator) — but it CAN stop the
   paragraph reading as a solid ink block: bigger leading, capped measure, and a block-colour
   eyebrow so the card reads as a designed object instead of an alert banner.
   CEO, separately, on this pass: "What did I say about putting dark pops with dark content on
   dark backgrounds?! Stop it." Right — .bigmodal-card is a shared component pinned to a dark navy
   gradient (#16263f→#0a1320, style-01.css:2377) over a dark scrim (rgba(7,14,26,.74)) in BOTH
   themes; that is dark-on-dark by construction, everywhere it is reused (week-summary, CFO-hire,
   VC interview, this welcome). Scoped to ONLY the WELCOME instance (:has(.pn-welcome-pt), the one
   marker unique to showIntro()'s markup) so the fix does not reach into the other bigmodal-card
   surfaces outside this brief's six screens — the welcome card is now a genuinely LIGHTER block
   (warm porcelain, not more navy) with dark ink, popped clearly off the dark scrim behind it. */
html body #toast.bigmodal:has(.pn-welcome-pt) .bigmodal-card{
  background: #f3f0ea !important;
  border: 1px solid rgba(28,19,11,.14) !important;
  color: #1c130b !important;
}
html body #toast.bigmodal:has(.pn-welcome-pt) .mac-titlebar{
  background: rgba(28,19,11,.05) !important;
  border-bottom: 1px solid rgba(28,19,11,.12) !important;
}
html body #toast.bigmodal:has(.pn-welcome-pt) .mac-tb-title{ color: #6b5a48 !important; }
/* CEO, second pass: "the body text currently touches the card's left edge with zero padding."
   Confirmed — the shared .bigmodal-card-body rule this inherited from left only 4px/2px, so the
   only visual inset came from the numbered dot's own gap, not real padding on the card. Real
   padding on all four sides now. */
html body #toast.bigmodal:has(.pn-welcome-pt) .bigmodal-card-body{
  max-width: 56ch !important;
  padding: 18px 26px 24px !important;
}
html body #toast.bigmodal:has(.pn-welcome-pt) .bigmodal-card-body .pill.warn{
  background: var(--p) !important;
  color: var(--bcx-on-accent-light) !important;
  font: 800 11px/1 'JetBrains Mono', monospace !important;
  letter-spacing: .09em !important;
  padding: 6px 10px !important;
  border-radius: 3px !important;
}
html body #toast.bigmodal:has(.pn-welcome-pt) .bigmodal-card-body b:not(.pill.warn){ color: #1c130b !important; font-size: inherit; }
html body #toast.bigmodal:has(.pn-welcome-pt) .bigmodal-card-body p{
  color: #3a2e22 !important;
}
html body #toast.bigmodal:has(.pn-welcome-pt) .bigmodal-card-body p b{ color: #b4380d !important; }
html body #toast.bigmodal:has(.pn-welcome-pt) .bigmodal-foot{ border-top-color: rgba(28,19,11,.12) !important; }
html body #toast.bigmodal:has(.pn-welcome-pt) .bigmodal-foot button.primary{
  background: var(--p) !important; color: var(--bcx-on-accent-light) !important;
}
/* the scannable-points structure (see report for the exact showIntro() replacement) renders as a
   loose stack of short blocks once the markup ships; styled pre-emptively so it activates for free */
html body #toast.bigmodal:has(.pn-welcome-pt) .bigmodal-card-body .pn-welcome-pt{
  display: flex !important; gap: 14px !important; align-items: flex-start !important;
  padding: 12px 0 !important; border-top: 1px solid rgba(28,19,11,.12) !important;
}
html body #toast.bigmodal:has(.pn-welcome-pt) .bigmodal-card-body .pn-welcome-pt:first-of-type{ border-top: 0 !important; padding-top: 4px !important; }
html body #toast.bigmodal:has(.pn-welcome-pt) .bigmodal-card-body .pn-welcome-pt:last-of-type{ padding-bottom: 4px !important; }
html body #toast.bigmodal:has(.pn-welcome-pt) .bigmodal-card-body .pn-welcome-pt i{
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; margin-top: 1px;
  background: var(--p); color: var(--bcx-on-accent-light);
  font: 800 12px/24px 'JetBrains Mono', monospace; text-align: center; font-style: normal;
}
/* legible 15px+ body copy per the CEO's minimum, not the shared 13.5px floor other screens use */
html body #toast.bigmodal:has(.pn-welcome-pt) .bigmodal-card-body .pn-welcome-pt p{
  font-size: 15px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* ══ 4 · PITCH SET-PIECE — BEAT 1 BRIEF (pn-pitch2.js) ═════════════════════════════════════════
   Was: FIVE places printing "which stage am I on / what is this case" — the titlebar's "01 BRIEF"
   seal badge, the titlebar TEXT ("PITCH SET-PIECE // 1 OF 5 — BRIEF READ"), the 5-step stepper
   ("1 BRIEF"), the case stamp in the body ("01 · THE BRIEF" + "CASE REF 296"), and the hero's own
   "CASE FILE #296". CSS can delete the two purely-redundant instances (the tiny titlebar seal
   badge, and the case-ref sub-line repeating the hero's stamp) without touching markup; the
   titlebar TEXT itself needs a JS trim — exact snippet in the report. What is left: ONE case
   reference (the hero), ONE stage readout (the stepper), ONE section head ("01 · The brief"). */
html body #pnp2-beat .pnp2-seal{ display: none !important; } /* redundant with the stepper immediately below it */
html body #pnp2-beat .pnp2-ask .pn-stamp[data-stamp-sub]::after{ content: none !important; } /* "CASE REF n" — the hero already stamps this pitch */
html body #pnp2-beat .lg-tb-title{
  font-size: 12px !important;
  letter-spacing: .07em !important;
  opacity: .72;
}

/* block-colour structure for the rest of the beat */
html body #pnp2-beat .pnp2-win{
  background: var(--bcx-panel-dark) !important;
}
html body #pnp2-beat .pnp2-hero{
  min-height: 160px !important;
}
html body #pnp2-beat .pnp2-stamp{
  background: var(--bcx-steel) !important;
  color: var(--bcx-steel-ink) !important;
  font: 800 11px/1 'JetBrains Mono', monospace !important;
  letter-spacing: .09em !important;
  padding: 6px 10px !important;
  border-radius: 3px !important;
}
html body #pnp2-beat .pnp2-hd{
  font: 900 clamp(26px,3vw,36px)/1.02 'Archivo Black', Inter, sans-serif !important;
}
/* the stepper is now the ONE progress readout — make it read as one, with the current step a solid block */
html body #pnp2-beat .pnp2-steps{
  display: flex !important; gap: 6px !important; background: var(--bcx-panel-dark-2) !important;
  border-radius: 4px !important; padding: 6px !important;
}
html body #pnp2-beat .pnp2-steps b{
  flex: 1 1 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important;
  padding: 8px 4px !important; border-radius: 3px !important;
  font: 700 11.5px/1 'JetBrains Mono', monospace !important; letter-spacing: .05em !important;
  color: rgba(238,243,250,.5) !important;
}
html body #pnp2-beat .pnp2-steps b.on,
html body #pnp2-beat .pnp2-steps b.on[data-stg],
html body #pnp2-beat .pnp2-steps b.on[aria-current]{
  background: var(--p) !important; color: var(--bcx-on-accent-dark) !important; font-weight: 800 !important;
}
html body #pnp2-beat .pnp2-steps b.on i,
html body #pnp2-beat .pnp2-steps b.on span,
html body #pnp2-beat .pnp2-steps b.on[data-stg] i,
html body #pnp2-beat .pnp2-steps b.on[data-stg] span{ color: var(--bcx-on-accent-dark) !important; }
html body #pnp2-beat .pnp2-steps b.done{ color: rgba(238,243,250,.78) !important; }
html body #pnp2-beat .pnp2-steps b i{ font-style: normal; opacity: .7; }
html body #pnp2-beat .pnp2-now{ display: none !important; } /* the block-coloured stepper already says this, in the same window */

html body #pnp2-beat .pnp2-ask{
  background: var(--bcx-panel-dark-2) !important;
  border-left: 4px solid var(--p) !important;
  border-radius: 4px !important;
  padding: 18px 20px !important;
}
html body #pnp2-beat .pnp2-ask .pn-stamp > b{
  color: var(--p) !important;
  font: 800 12px/1 'JetBrains Mono', monospace !important;
  letter-spacing: .07em !important;
}
html body #pnp2-beat .pnp2-ask-line{
  font: 900 clamp(20px,2.4vw,28px)/1.15 Inter, sans-serif !important;
  color: var(--bcx-ink) !important;
  margin-top: 6px !important;
}
html body #pnp2-beat .pnp2-rule i{
  font-style: normal !important; text-transform: uppercase !important;
  font: 800 11px/1 'JetBrains Mono', monospace !important; letter-spacing: .08em !important;
  color: var(--bcx-ink-dim) !important;
}
html body #pnp2-beat .pnp2-bg{ color: var(--bcx-ink-dim) !important; }
html body #pnp2-beat .pnp2-terms{
  display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important;
}
html body #pnp2-beat .pnp2-term{
  background: var(--bcx-panel-dark-2) !important; border-radius: 4px !important; padding: 10px 14px !important;
  display: flex !important; flex-direction: column !important; gap: 3px !important;
}
html body #pnp2-beat .pnp2-term > i{
  font-style: normal !important; color: var(--bcx-ink-dim) !important;
  font: 800 11px/1 'JetBrains Mono', monospace !important; text-transform: uppercase !important;
}
html body #pnp2-beat .pnp2-term > b{ font-size: 14px !important; color: var(--bcx-ink) !important; }

/* footer: Move to Angle stays the loud primary block; Just Pitch It is the DIFFERENT (steel) block
   so it never competes with the primary orange for the same job — same distinction the CEO asked
   for ("clear differentiation"); Close stays a quiet outline */
html body #pnp2-beat .pnp2-foot{
  background: var(--bcx-panel-dark) !important;
  border-top: 1px solid var(--bcx-hair-dark) !important;
  padding: 12px 16px !important;
}
html body #pnp2-beat .lg-btn--primary{
  background: var(--p) !important; color: var(--bcx-on-accent-dark) !important;
  font: 800 13.5px/1 Inter, sans-serif !important; min-height: 44px !important; border-radius: 4px !important;
}
html body #pnp2-beat .pnp2-ctrl--fast{
  background: var(--bcx-steel) !important; color: var(--bcx-steel-ink) !important;
  font: 800 12.5px/1 'JetBrains Mono', monospace !important; letter-spacing: .04em !important;
  border-radius: 4px !important; min-height: 44px !important; padding: 0 16px !important;
}
html body #pnp2-beat [data-p2closectrl]{
  background: transparent !important; border: 1px solid var(--bcx-hair-dark) !important;
  color: rgba(238,243,250,.7) !important; min-height: 44px !important; border-radius: 4px !important;
}

/* ══ 5 · PRESENT STAGE — "THE CLIENT IS WAITING." BOARDROOM PRE-ROOM ═══════════════════════════
   CEO, second pass: "still flat navy-on-navy." Right — the first pass only lightened the head
   panel one notch off the ground (#1c2431 on a #0b1220 gradient), which still reads as "more navy."
   Now the head is a genuinely LIGHT porcelain block (the same warm-porcelain module the welcome
   card uses — one consistent "this is a light module" language across the pass), the laptop gets
   its own dark stage-plate so it isn't floating loose on the ambient gradient, the status strip is
   a solid steel block (not a slightly-lighter navy), and the watermark is gone outright — "should
   go or become barely there" — going, not fading. */
html body .pn-preroom .pitch-bgstrip-bleed{
  display: none !important;
}
html body .pn-preroom .pn-preroom-head{
  background: var(--bcx-panel-light-2) !important;
  border: 1px solid rgba(28,19,11,.14) !important;
  border-radius: 4px !important;
  padding: 22px 26px !important;
}
html body .pn-preroom .pn-preroom-kick{
  display: inline-block !important;
  background: var(--bcx-steel) !important;
  color: var(--bcx-steel-ink) !important;
  padding: 5px 10px !important;
  border-radius: 3px !important;
  font: 800 11px/1 'JetBrains Mono', monospace !important;
  letter-spacing: .07em !important;
}
/* :not(#pn-ds-never) is the codebase's own specificity-escalation trick (pn-ds.css) — needed here
   because style-01.css:8227 has `body[data-view="pitch"] h2:not(...4 classes...){color:var(--rust-ink)
   !important}` at (0,5,2), which otherwise beats a plain `.pn-preroom .pn-preroom-h` and pasted
   --rust-ink's PALE off-white straight onto this rule's new light porcelain panel — light-on-light,
   the exact defect class this whole pass exists to kill, just mirrored. */
html body .pn-preroom .pn-preroom-h:not(#pn-ds-never){
  font: 900 clamp(28px,4vw,44px)/1.04 'Archivo Black', Inter, sans-serif !important;
  color: #1c130b !important;
  margin-top: 10px !important;
}
html body .pn-preroom .pn-preroom-sub{
  color: #5b4d40 !important;
  margin-top: 6px !important;
}
/* the laptop needs a surface to sit on — otherwise it's a prop floating in void on the ambient
   gradient, which is exactly the "nothing lighter to look at" complaint one level down */
html body .pn-preroom .pn-lap-stage{
  background: var(--bcx-panel-dark) !important;
  border: 1px solid var(--bcx-hair-dark) !important;
  border-radius: 8px !important;
  padding: 28px 20px 22px !important;
  margin-top: 18px !important;
}
html body .pn-preroom .pn-preroom-cta{
  background: var(--bcx-steel) !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  border-radius: 4px !important;
  padding: 12px 18px !important;
}
html body .pn-preroom .ppc-label{
  font: 800 12px/1 'JetBrains Mono', monospace !important; letter-spacing: .06em !important;
  color: var(--bcx-steel-ink) !important;
}
html body .pn-preroom .ppc-dot{ background: var(--bcx-steel-ink) !important; }
html body .pn-preroom .ppc-ell i{ background: var(--bcx-steel-ink) !important; }
/* Back — was a near-invisible ghost outline on dark navy. A real visible control now. */
html body .pn-preroom #bail.pn-btn--ghost{
  background: rgba(255,255,255,.94) !important;
  color: #1c130b !important;
  border: 1px solid rgba(0,0,0,.16) !important;
  font-weight: 800 !important;
  min-height: 40px !important;
  border-radius: 4px !important;
}
html body .pn-preroom #bail.pn-btn--ghost:hover{ background: #fff !important; }

/* ══ 6 · THE FLOOR — AGENCY VALUATION HERO (week-1 seed state) ═════════════════════════════════
   Was: a tall card, mostly dead void — a lone dot on a dotted track sitting alone in the middle,
   "Opening mark" in sans clashing with wrapping mono "Week 1 · no movement yet", a tiny pill, the
   seed note floating loose at the bottom. Now: the card sizes to its content (no forced stretch),
   the value sits on its own solid block, the delta is one legible line, and the week track fills
   the card's width with real markers instead of hanging in empty space. */
html body .pv-herochartbox{
  height: auto !important;
  align-self: start !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--bcx-panel-dark) !important;
  border: 1px solid var(--bcx-hair-dark) !important;
}
html body.mvc-light .pv-herochartbox{ background: var(--bcx-panel-light) !important; border-color: var(--bcx-hair-light) !important; }
html body .pv-herochartbox > .row{
  background: var(--p) !important;
  margin: 0 !important;
  padding: 16px 18px !important;
  align-items: center !important;
}
html body .pv-herochartbox .pv-hero-lbl{
  color: var(--bcx-on-accent) !important;
  opacity: .85 !important;
  font: 800 11px/1 'JetBrains Mono', monospace !important;
  letter-spacing: .08em !important;
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
}
html body .pv-herochartbox .pv-live{ background: var(--bcx-on-accent) !important; }
html body .pv-herochartbox .mvc-num--hero{
  color: var(--bcx-on-accent) !important;
  font: 900 clamp(30px,3.4vw,40px)/1 'Archivo Black', Inter, sans-serif !important;
  margin-top: 4px !important;
}
html body .pv-herochartbox .mvc-num--hero .cur{ font-size: .6em !important; opacity: .8; }
html body .pv-herochartbox .pv-pill{
  background: rgba(0,0,0,.18) !important;
  color: var(--bcx-on-accent) !important;
  border: 0 !important;
  font: 800 11px/1 'JetBrains Mono', monospace !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}
/* one clean context line, no wrap, one face */
html body .pv-herochartbox .pv-hero-delta{
  display: flex !important; align-items: baseline !important; gap: 8px !important;
  padding: 12px 18px !important;
  background: var(--bcx-panel-dark-2) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  margin: 0 !important;
}
html body.mvc-light .pv-herochartbox .pv-hero-delta{ background: var(--bcx-panel-light-2) !important; }
html body .pv-herochartbox .pv-hd-k{
  color: var(--bcx-ink-dim) !important;
  font: 800 11px/1 'JetBrains Mono', monospace !important; letter-spacing: .06em !important;
  text-transform: uppercase !important; flex: 0 0 auto;
}
html body .pv-herochartbox .pv-hd-v{
  color: var(--bcx-ink) !important;
  font: 700 13.5px/1.3 Inter, sans-serif !important;
  overflow: hidden !important; text-overflow: ellipsis !important;
}
@media (max-width: 480px){
  html body .pv-herochartbox .pv-hero-delta{ white-space: normal !important; align-items: baseline !important; }
  html body .pv-herochartbox .pv-hd-v{ white-space: normal !important; text-overflow: clip !important; }
}
/* the week track: fills the card width, real legible markers, no dead height above/below it */
html body .pv-herochartbox .pv-herochart-wrap{
  padding: 16px 18px 14px !important;
  margin: 0 !important;
  min-height: 0 !important;
}
html body .pv-herochartbox .pv-herochart,
html body .pv-herochartbox .pv-herochart--seed{
  width: 100% !important;
  height: 34px !important;
  display: block !important;
}
html body .pv-herochartbox .pv-seed-note{
  margin: 0 !important;
  padding: 10px 18px 14px !important;
  border-top: 1px solid var(--bcx-hair-dark) !important;
  color: var(--bcx-ink-dim) !important;
  font-size: 12.5px !important;
}
html body.mvc-light .pv-herochartbox .pv-seed-note{ border-color: var(--bcx-hair-light) !important; }
html body .pv-herochartbox .pv-seed-note b{ color: var(--bcx-ink) !important; }
html body .pv-herochartbox .pv-distress{ margin: 0 18px !important; }

/* The run-rate figure and eyebrow carry gradient/text-fill paint from older sheets, which painted
   pale orange ON the orange block. Text on the block is solid ink, every child, no exceptions. */
html body .s2-book .s2-bk-hero, html body .s2-book .s2-bk-hero *{
  -webkit-text-fill-color: var(--bcx-on-accent, #180a02) !important;
  color: var(--bcx-on-accent, #180a02) !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important; background-clip: border-box !important;
  text-shadow: none !important;
}
html body .s2-book .s2-bk-hero{ background: var(--p, #f97316) !important; }