/* ══════════════════════════════════════════════════════════════════════════════════════════════
   pn-warroom-b-20260927.css — THE PITCH WINDOW (#pnp2-beat), DIRECTION B "TEAR-SHEET".
   CEO 2026-09-27 on the Ember Roastery brief: "shitty page"; then on Halo Money: "Illegible content".

   WHAT WAS WRONG (measured on the booted game, 1440x900 cased + uncased, 390x844):
     1. The window was a fixed 680px column centred in a 1320px device: 320px of dead dark glass
        either side. -> it now FILLS the device content area (max 1200px, 24px margins) and is the
        full viewport on phone (it was 2013px tall on phone, riding the page scroll, footer lost).
     2. pn-tearsheet-modules painted the window PAPER, but everything inside kept its dark-theme ink:
        the titlebar title (rgba(234,241,251,.8) on cream, 1.02:1), the carry-forward notes (1.01:1),
        every Angle and Squad & Rehearsal headline, name, role, copy and modline (1.01-1.6:1).
        -> ONE ink baseline for the paper window (#140a04, with -webkit-text-fill-color pinned to
        it), then each coloured block re-inks explicitly: cobalt/emerald take white, paper takes
        dark. Never dark text on a dark or blue ground.
     3. The case-file stamp was rotated and the hero bled -24px against a body gutter that other
        sheets had changed, so the stamp's right edge was clipped ("stray rectangle"). -> hero bleed
        is tied to the same --wrb-gut variable as the body gutter; stamp is square and inset.
     4. "FROM YOUR LAST ROOM" sat under the footer at the bottom of the scroll. -> the body carries
        bottom padding equal to the footer height.
     5. Stepper at 42-62% opacity grey-on-cream. -> solid cells: active orange (the one marker the
        colour law allows), done emerald with white ink, upcoming paper with full-strength ink.
     6. Orange eyebrows ("from your last room", "your angle ...", case ref) -> dark ink. Orange is
        buttons and the active step only.
   Specificity: every rule carries the three never-matching :not(#id) tiers that
   pn-tearsheet-modules uses, plus #pnp2-beat, so it wins over that sheet, pn-blockcolour,
   pn-pitch-beats, pn-final and pn-pitch2.js's injected <style> without new !important wars.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

:root{
  --wrb-ink:      #140a04;   /* dark ink on paper — 17:1 on --wrb-paper */
  --wrb-ink-2:    #3d3228;   /* secondary ink on paper — 10:1 */
  --wrb-frame:    #0b1c30;
  --wrb-paper:    #f3efe6;
  --wrb-paper-hi: #fffdf8;
  --wrb-paper-2:  #e9e2d2;
  --wrb-hair:     rgba(11,28,48,.22);
  --wrb-cobalt-a: #2a4fc4; --wrb-cobalt-b: #12245e;
  --wrb-emerald-a:#1fa37a; --wrb-emerald-b:#0b5e45;
  /* the law's #1fa37a light stop measures 3.19:1 under white 11-15px type (AA needs 4.5), so blocks
     that CARRY white text start one notch deeper; same hue, same #0b5e45 foot. 4.88:1 at the light end. */
  --wrb-emerald-t:#188062;
  --wrb-btn:      #f97316; --wrb-btn-hi: #ff9142; --wrb-btn-ink: #1d0d02;
  --wrb-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  --wrb-hl:    inset 0 1px 0 rgba(255,255,255,.28);
  --wrb-depth: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -18px 30px -22px rgba(0,0,0,.35), 0 10px 22px -12px rgba(0,0,0,.45), 0 2px 5px rgba(0,0,0,.18);
  --wrb-gut:    32px;
  --wrb-foot-h: 72px;
}

/* ── 1 · FRAME: fill the device, full-bleed on phone ─────────────────────────────────────────── */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat{
  padding: 20px 24px !important;
  align-items: stretch !important; justify-content: center !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-win{
  width: min(1200px, 100%) !important; max-width: 1200px !important;
  height: 100% !important; max-height: none !important;
  margin: 0 auto !important;
  display: flex !important; flex-direction: column !important; overflow: hidden !important;
  container: wrb / inline-size;
  background-color: var(--wrb-paper) !important;
  background-image: var(--wrb-noise), linear-gradient(170deg, #f7f3ea, #efe8da) !important;
  background-blend-mode: normal !important;
  border: 3px solid var(--wrb-frame) !important; border-radius: 4px !important;
  color: var(--wrb-ink) !important;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.7), 0 4px 12px rgba(0,0,0,.35) !important;
}
@media (max-width: 720px){
  :root{ --wrb-gut: 16px; --wrb-foot-h: 124px; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat{
    position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    height: 100dvh !important; padding: 0 !important;
  }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-win{
    width: 100% !important; max-width: none !important; height: 100% !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  }
}

/* ── 2 · INK BASELINE — everything on the paper window is dark ink unless a block says otherwise ─ */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-body,
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-body *{
  color: var(--wrb-ink) !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-foot *,
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .lg-titlebar *{
  -webkit-text-fill-color: currentColor !important;
}

/* ── 3 · TITLE BAR — the ink frame, paper type: legible, reads as the tear-sheet's top rule ───── */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .lg-titlebar{
  flex: none !important; min-height: 40px !important; height: auto !important; padding: 0 16px !important; margin: 0 !important;
  display: flex !important; align-items: center !important; gap: 14px !important;
  background: var(--wrb-frame) !important; background-image: none !important;
  border: 0 !important; border-bottom: 1px solid #000 !important; box-shadow: none !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .lg-tb-title{
  color: #f3efe6 !important; opacity: 1 !important;
  font: 800 11px/1.2 'JetBrains Mono', ui-monospace, monospace !important; letter-spacing: .14em !important;
  text-transform: uppercase !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  position: static !important; transform: none !important; margin: 0 !important; flex: 1 1 auto !important; min-width: 0 !important; text-align: left !important;
}

/* ── 4 · BODY: gutters tied to one variable; bottom padding = footer height ─────────────────── */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-body{
  flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important;
  padding: 0 var(--wrb-gut) calc(var(--wrb-foot-h) + 8px) !important;
  background: transparent !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}

/* ── 5 · HERO — a cobalt information block, stamp squared and inset (the "stray rectangle") ──── */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-hero{
  margin: 0 calc(-1 * var(--wrb-gut)) 0 !important; min-height: 150px !important;
  background-color: var(--wrb-cobalt-b) !important;
  background-image: var(--wrb-noise), radial-gradient(120% 140% at 10% -20%, rgba(255,255,255,.22), transparent 55%), linear-gradient(150deg, var(--wrb-cobalt-a), var(--wrb-cobalt-b)) !important;
  background-blend-mode: normal !important;
  box-shadow: var(--wrb-hl), inset 0 -26px 40px -26px rgba(0,0,0,.45) !important;
  border-bottom: 3px solid var(--wrb-frame) !important; overflow: hidden !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-hero::before,
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-hero::after{ content: none !important; display: none !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-hero-in{ padding: 18px var(--wrb-gut) 18px !important; gap: 14px !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-hero *{ color: #fff !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-hero .pnp2-hd{
  font: 900 clamp(28px, 3.4vw, 44px)/1 'Inter', system-ui, sans-serif !important; font-style: normal !important;
  letter-spacing: -.035em !important; text-transform: none !important; margin: 0 !important; padding: 0 !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-hero .pnp2-hd::after{ display: none !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-heroid .mt{
  font: 800 11px/1 'JetBrains Mono', ui-monospace, monospace !important; letter-spacing: .14em !important; opacity: 1 !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-plate{
  width: 48px !important; height: 48px !important; clip-path: none !important;
  background: rgba(255,255,255,.12) !important; border: 2px solid rgba(255,255,255,.85) !important; border-radius: 3px !important;
  font: 800 16px/1 'JetBrains Mono', ui-monospace, monospace !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-stamp{
  position: absolute !important; top: 16px !important; right: var(--wrb-gut) !important; left: auto !important;
  transform: none !important; max-width: calc(100% - 2 * var(--wrb-gut)) !important; white-space: nowrap !important;
  background: rgba(255,255,255,.12) !important; border: 1.5px solid rgba(255,255,255,.8) !important; border-radius: 3px !important;
  padding: 6px 10px !important; font: 800 11px/1 'JetBrains Mono', ui-monospace, monospace !important; letter-spacing: .12em !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}

/* beats 2-3 — the case strip becomes the same cobalt band, slimmer */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-casestrip{
  margin: 0 calc(-1 * var(--wrb-gut)) 0 !important; padding: 16px var(--wrb-gut) !important;
  display: flex !important; align-items: baseline !important; gap: 14px !important; flex-wrap: wrap !important;
  background-color: var(--wrb-cobalt-b) !important;
  background-image: var(--wrb-noise), linear-gradient(150deg, var(--wrb-cobalt-a), var(--wrb-cobalt-b)) !important;
  box-shadow: var(--wrb-hl) !important; border: 0 !important; border-bottom: 3px solid var(--wrb-frame) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-casestrip *{ color: #fff !important; opacity: 1 !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-casestrip .mono{ font: 800 11px/1 'JetBrains Mono', ui-monospace, monospace !important; letter-spacing: .14em !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-casestrip .mono.dim{ color: rgba(255,255,255,.88) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-casestrip .nm{ font: 900 20px/1 'Inter', system-ui, sans-serif !important; font-style: normal !important; text-transform: none !important; letter-spacing: -.02em !important; }

/* ── 6 · STEPPER — active orange, done emerald, upcoming readable ink ───────────────────────── */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-spine{ margin: 20px 0 6px !important; padding: 0 !important; background: none !important; border: 0 !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-steps{
  display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 6px !important;
  background: none !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-steps b{
  display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px !important;
  min-height: 48px !important; padding: 8px 12px !important; margin: 0 !important; opacity: 1 !important;
  background: var(--wrb-paper-hi) !important; background-image: none !important;
  border: 1.5px solid rgba(11,28,48,.4) !important; border-radius: 3px !important; box-shadow: none !important;
  color: var(--wrb-frame) !important; font: 800 11.5px/1.2 'JetBrains Mono', ui-monospace, monospace !important;
  letter-spacing: .08em !important; text-transform: uppercase !important; transform: none !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-steps b::before,
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-steps b::after{ content: none !important; display: none !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-steps b i{
  flex: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 24px !important; height: 24px !important; border-radius: 50% !important; opacity: 1 !important;
  border: 1.5px solid currentColor !important; font: 800 12px/1 'JetBrains Mono', ui-monospace, monospace !important; font-style: normal !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-steps b span{ display: inline !important; opacity: 1 !important; min-width: 0 !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-steps b,
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-steps b *{ color: var(--wrb-frame) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-steps b.done{
  background-color: var(--wrb-emerald-b) !important;
  background-image: var(--wrb-noise), linear-gradient(160deg, var(--wrb-emerald-t), var(--wrb-emerald-b)) !important;
  border-color: var(--wrb-emerald-b) !important; box-shadow: var(--wrb-hl) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-steps b.done,
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-steps b.done *{ color: #fff !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-steps b.on{
  background-color: var(--wrb-btn) !important;
  background-image: var(--wrb-noise), linear-gradient(180deg, var(--wrb-btn-hi), var(--wrb-btn)) !important;
  border-color: #c2570c !important; box-shadow: var(--wrb-hl), 0 4px 10px -4px rgba(194,87,12,.6) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-steps b.on,
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-steps b.on *{ color: var(--wrb-btn-ink) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-steps b.on i{ background: var(--wrb-btn-ink) !important; color: #fff !important; border-color: var(--wrb-btn-ink) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-now{ display: none !important; }
/* phone: numbers only, the ACTIVE step keeps its name and takes the spare width */
@media (max-width: 720px){
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-steps{ display: flex !important; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-steps b{ flex: 0 0 42px !important; justify-content: center !important; padding: 8px 4px !important; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-steps b span{ display: none !important; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-steps b.on{ flex: 1 1 auto !important; min-width: 0 !important; justify-content: flex-start !important; padding: 8px 10px !important; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-steps b.on span{ display: inline !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
}

/* ── 7 · READING TYPE ───────────────────────────────────────────────────────────────────────── */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-body > .pnp2-hd{
  font: 900 clamp(24px, 2.6vw, 34px)/1.05 'Inter', system-ui, sans-serif !important; font-style: normal !important;
  letter-spacing: -.03em !important; text-transform: none !important; margin: 6px 0 10px !important; max-width: 30ch;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-ey{
  display: block !important; margin: 26px 0 10px !important; opacity: 1 !important;
  font: 800 11px/1.3 'JetBrains Mono', ui-monospace, monospace !important; letter-spacing: .14em !important; text-transform: uppercase !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-copy{
  opacity: 1 !important; color: var(--wrb-ink-2) !important; max-width: 68ch !important;
  font: 400 15px/1.6 'Inter', system-ui, sans-serif !important; border-left: 3px solid var(--wrb-frame) !important; padding-left: 14px !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-rule{ margin: 28px 0 10px !important; display: flex !important; align-items: center !important; gap: 12px !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-rule i{
  opacity: 1 !important; font: 800 11px/1 'JetBrains Mono', ui-monospace, monospace !important; font-style: normal !important;
  letter-spacing: .14em !important; text-transform: uppercase !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-rule::after{ content: '' !important; flex: 1 1 auto !important; height: 2px !important; background: var(--wrb-frame) !important; opacity: 1 !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-bg{
  opacity: 1 !important; color: var(--wrb-ink-2) !important; max-width: 68ch !important; margin: 0 !important;
  font: 400 16px/1.62 'Inter', system-ui, sans-serif !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-modline{
  opacity: 1 !important; font: 700 12px/1.5 'JetBrains Mono', ui-monospace, monospace !important; letter-spacing: .06em !important; margin-top: 12px !important;
}

/* ── 8 · BRIEF: the ask (paper tear-sheet), the terms (cobalt tiles), the carry-forward notes ── */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-ask{
  margin: 20px 0 0 !important; padding: 22px 24px 26px !important;
  background-color: var(--wrb-paper-hi) !important;
  background-image: var(--wrb-noise), linear-gradient(170deg, #fffdf8, #f4eee2) !important;
  border: 2px solid var(--wrb-frame) !important; border-left-width: 8px !important; border-radius: 3px !important;
  box-shadow: var(--wrb-depth) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-ask .pn-stamp{
  display: inline-block !important; transform: none !important; margin: 0 0 14px !important; padding: 0 !important; border: 0 !important; background: none !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-ask .pn-stamp::before,
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-ask .pn-stamp::after{ content: none !important; display: none !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-ask .pn-stamp > b{
  display: inline-block !important; padding: 5px 9px !important; border-radius: 2px !important;
  background: var(--wrb-frame) !important; color: #fff !important; border: 0 !important;
  font: 800 11px/1 'JetBrains Mono', ui-monospace, monospace !important; letter-spacing: .14em !important; text-transform: uppercase !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-ask-line{
  font: 900 clamp(26px, 3vw, 40px)/1.05 'Inter', system-ui, sans-serif !important; font-style: normal !important;
  text-transform: none !important; letter-spacing: -.035em !important; max-width: 18ch !important; margin: 0 !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-terms{
  display: grid !important; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; gap: 10px !important;
  margin: 22px 0 0 !important; border: 0 !important; background: none !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-term{
  padding: 14px 16px 16px !important; border: 2px solid var(--wrb-frame) !important; border-radius: 3px !important;
  background-color: var(--wrb-cobalt-b) !important;
  background-image: var(--wrb-noise), linear-gradient(150deg, var(--wrb-cobalt-a), var(--wrb-cobalt-b)) !important;
  box-shadow: var(--wrb-depth) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-term *{ color: #fff !important; opacity: 1 !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-term > i{
  display: block !important; margin: 0 0 8px !important; font: 800 11px/1 'JetBrains Mono', ui-monospace, monospace !important;
  font-style: normal !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: rgba(255,255,255,.9) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-term > b{
  display: block !important; font: 900 20px/1.1 'Inter', system-ui, sans-serif !important; font-style: normal !important; letter-spacing: -.02em !important;
  color: #fff !important;
}
/* FROM YOUR LAST ROOM — CEO 2026-09-27 "Illegible content": dark ink #140a04 on paper, >= 7:1 */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-note{
  display: flex !important; gap: 12px !important; align-items: flex-start !important; opacity: 1 !important;
  margin: 0 0 8px !important; padding: 12px 16px !important;
  background: var(--wrb-paper-hi) !important; border: 1.5px solid var(--wrb-hair) !important; border-left: 5px solid var(--wrb-emerald-b) !important;
  border-radius: 3px !important; color: #140a04 !important; -webkit-text-fill-color: #140a04 !important;
  font: 500 14.5px/1.5 'Inter', system-ui, sans-serif !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-note::before{
  content: '\2192' !important; color: #140a04 !important; -webkit-text-fill-color: #140a04 !important; font-weight: 800 !important; flex: none !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-body > .pnp2-ey{ color: #140a04 !important; -webkit-text-fill-color: #140a04 !important; }

/* wide window: the brief reads as two columns — the ask on the left, the file on the right */
@container wrb (min-width: 920px){
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-body:has(> .pnp2-hero){
    display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important;
    column-gap: 36px !important; row-gap: 0 !important; align-content: start !important;
  }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-body:has(> .pnp2-hero) > *{ grid-column: 2 !important; min-width: 0 !important; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-body:has(> .pnp2-hero) > .pnp2-hero,
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-body:has(> .pnp2-hero) > .pnp2-spine{ grid-column: 1 / -1 !important; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-body:has(> .pnp2-hero) > .pnp2-ask{
    grid-column: 1 !important; grid-row: 3 / span 12 !important; align-self: start !important; margin-top: 22px !important;
    position: sticky !important; top: 22px !important;   /* the ask stays in view while the file column scrolls */
  }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-body:has(> .pnp2-hero) > .pnp2-rule:first-of-type{ margin-top: 24px !important; }
}

/* ── 9 · ANGLE ──────────────────────────────────────────────────────────────────────────────── */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-angle{
  width: 100% !important; max-width: 880px !important; min-height: 120px !important; display: block !important;
  padding: 16px 18px !important; border: 2px solid var(--wrb-frame) !important; border-radius: 3px !important;
  background: var(--wrb-paper-hi) !important; color: var(--wrb-ink) !important; -webkit-text-fill-color: var(--wrb-ink) !important;
  font: 600 20px/1.4 'Inter', system-ui, sans-serif !important; box-shadow: inset 0 2px 4px rgba(11,28,48,.08) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-angle::placeholder{ color: #5a5046 !important; -webkit-text-fill-color: #5a5046 !important; opacity: 1 !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-angle:focus{ outline: 3px solid var(--wrb-cobalt-a) !important; outline-offset: 2px !important; border-color: var(--wrb-frame) !important; }

/* ── 10 · SQUAD & REHEARSAL ─────────────────────────────────────────────────────────────────── */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-squad{
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; gap: 10px !important; margin-top: 14px !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-sq{
  display: grid !important; grid-template-columns: 48px minmax(0,1fr) auto !important; gap: 12px !important; align-items: center !important;
  min-height: 70px !important; padding: 10px 14px !important; margin: 0 !important; text-align: left !important; cursor: pointer;
  background: var(--wrb-paper-hi) !important; background-image: none !important;
  border: 2px solid rgba(11,28,48,.3) !important; border-radius: 3px !important; box-shadow: none !important; opacity: 1 !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-sq::before{ content: none !important; display: none !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-sq:hover:not(.on){ border-color: var(--wrb-frame) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-sq .m{
  width: 48px !important; height: 48px !important; border-radius: 3px !important; box-shadow: none !important;
  border: 2px solid var(--wrb-frame) !important; background-color: var(--wrb-frame) !important; color: #fff !important;
  display: flex !important; align-items: center !important; justify-content: center !important; font: 800 14px/1 'JetBrains Mono', monospace !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-sq .nm b{ display: block !important; font: 800 15.5px/1.2 'Inter', system-ui, sans-serif !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-sq .nm span{ display: block !important; margin-top: 3px !important; opacity: 1 !important; color: var(--wrb-ink-2) !important; font: 500 12.5px/1.3 'Inter', system-ui, sans-serif !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-sq .ovr{ font: 900 22px/1 'Inter', system-ui, sans-serif !important; font-feature-settings: 'tnum' 1 !important; }
/* picked = emerald (progress), white ink */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-sq.on{
  background-color: var(--wrb-emerald-b) !important;
  background-image: var(--wrb-noise), linear-gradient(160deg, var(--wrb-emerald-t), var(--wrb-emerald-b)) !important;
  border-color: var(--wrb-emerald-b) !important; box-shadow: var(--wrb-depth) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-sq.on *,
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-sq.on .nm span{ color: #fff !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-sq.on .m{ border-color: #fff !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-sq:focus-visible,
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-opt:focus-visible{ outline: 3px solid var(--wrb-cobalt-a) !important; outline-offset: 2px !important; }

html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-reh{
  display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; gap: 10px !important; margin-top: 14px !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-opt{
  display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: space-between !important; gap: 14px !important;
  min-height: 118px !important; padding: 16px 18px !important; text-align: left !important; cursor: pointer; transform: none !important;
  background-color: var(--wrb-paper-hi) !important;
  background-image: var(--wrb-noise), linear-gradient(170deg, #fffdf8, #f4eee2) !important;
  border: 2px solid var(--wrb-frame) !important; border-radius: 3px !important; box-shadow: var(--wrb-depth) !important; opacity: 1 !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-opt:hover{ border-color: var(--wrb-btn) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-opt[disabled]{ cursor: default; border-style: dashed !important; box-shadow: none !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-opt-t b{ display: block !important; font: 900 18px/1.15 'Inter', system-ui, sans-serif !important; letter-spacing: -.02em !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-opt-t em{ display: block !important; margin-top: 6px !important; font: 400 14px/1.45 'Inter', system-ui, sans-serif !important; font-style: normal !important; color: var(--wrb-ink-2) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-opt-mod,
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-opt-mod.is-var{
  display: inline-block !important; padding: 6px 9px !important; border-radius: 2px !important; border: 0 !important;
  background-color: var(--wrb-emerald-b) !important; background-image: linear-gradient(160deg, var(--wrb-emerald-t), var(--wrb-emerald-b)) !important;
  color: #fff !important; font: 800 11.5px/1 'JetBrains Mono', ui-monospace, monospace !important; font-style: normal !important; letter-spacing: .06em !important;
}
/* "wing it" is a gamble — the warning block: gold, dark ink */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-opt-mod.is-var{
  background-color: #f0a500 !important; background-image: linear-gradient(160deg, #ffd24a, #f0a500) !important; color: #1d1103 !important;
}

/* ── 11 · FOOTER — primary left, secondaries right, one 44px row; stacks on phone ───────────── */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-foot{
  flex: none !important; position: relative !important; z-index: 2 !important;
  display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important;
  min-height: var(--wrb-foot-h) !important; padding: 12px var(--wrb-gut) !important; margin: 0 !important;
  background-color: var(--wrb-paper-2) !important; background-image: var(--wrb-noise), linear-gradient(180deg, #efe8da, #e6dec9) !important;
  border: 0 !important; border-top: 3px solid var(--wrb-frame) !important; box-shadow: 0 -10px 18px -12px rgba(11,28,48,.35) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-foot > .pnp2-beatnav{
  display: flex !important; gap: 10px !important; margin: 0 !important; flex: 0 1 auto !important; opacity: 1 !important; transform: none !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-foot > .pnp2-ctrlbar{
  display: flex !important; flex-wrap: nowrap !important; gap: 10px !important; margin: 0 0 0 auto !important; padding: 0 !important; justify-content: flex-end !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-foot button{
  min-height: 44px !important; height: 44px !important; padding: 0 18px !important; margin: 0 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important;
  border-radius: 3px !important; transform: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-foot .lg-btn--primary{
  background-color: var(--wrb-btn) !important; background-image: linear-gradient(180deg, var(--wrb-btn-hi), var(--wrb-btn)) !important;
  color: var(--wrb-btn-ink) !important; border: 2px solid #c2570c !important;
  font: 800 14.5px/1 'Inter', system-ui, sans-serif !important; box-shadow: var(--wrb-hl), 0 6px 14px -6px rgba(194,87,12,.7) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-foot .lg-btn--primary *{ color: var(--wrb-btn-ink) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-foot .lg-btn--primary:hover{ background-image: linear-gradient(180deg, #ffa25e, var(--wrb-btn-hi)) !important; }
/* secondaries: Back, Just pitch it / Just work it, Close — the same outlined ink button */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-foot .lg-btn--secondary,
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-foot .pnp2-ctrl,
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-foot .pnp2-ctrl--fast,
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-foot [data-p2closectrl]{
  background: var(--wrb-paper-hi) !important; background-image: none !important;
  color: var(--wrb-frame) !important; border: 2px solid var(--wrb-frame) !important; box-shadow: none !important;
  font: 800 12px/1 'JetBrains Mono', ui-monospace, monospace !important; letter-spacing: .1em !important; text-transform: uppercase !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-foot .lg-btn--secondary *{ color: var(--wrb-frame) !important; }
/* the fast path (Just pitch it / Just work it) is the stronger secondary: solid ink, paper type */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-foot .pnp2-ctrl--fast{
  background: var(--wrb-frame) !important; color: #fff !important; border-color: var(--wrb-frame) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-foot .pnp2-ctrl:hover,
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-foot .lg-btn--secondary:hover{ border-color: var(--wrb-btn) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-foot button:focus-visible{ outline: 3px solid var(--wrb-cobalt-a) !important; outline-offset: 2px !important; }
@media (max-width: 720px){
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-foot{
    flex-wrap: wrap !important; padding: 10px var(--wrb-gut) calc(10px + env(safe-area-inset-bottom, 0px)) !important; gap: 8px !important;
  }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-foot > .pnp2-beatnav{ flex: 1 1 100% !important; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-foot > .pnp2-beatnav > button{ flex: 1 1 auto !important; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-foot > .pnp2-ctrlbar{ flex: 1 1 100% !important; margin: 0 !important; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-foot > .pnp2-ctrlbar > .pnp2-ctrl--fast{ flex: 1 1 auto !important; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-foot button{ padding: 0 14px !important; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-foot .lg-btn--primary{ white-space: normal !important; line-height: 1.15 !important; }
}
/* phone: the FEEDBACK edge tab sat on top of CLOSE. Same stand-down pn-contain gives the other full-bleed rooms.
   #pnfb-root is appended to <html>, not <body> (pn-feedback.js mount()), so the :has() hangs off html. */
@media (max-width: 720px){
  html:has(#pnp2-beat) #pnfb-root #pnfb-tab{ display: none !important; }
}
@media (prefers-reduced-motion: reduce){
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat *{ transition: none !important; }
}