/* whatifnowai — CANONICAL design-system stylesheet. Identity v1.0 Northstar, July 2026.
   Edit ONLY here. All working-project pages reference this file by relative path.
   Copies inside the four *-report-v2/ folders, handoff/ and website-handoff/ are synced mirrors —
   do not hand-edit them; edit here and re-propagate. (The old northstar-design-package/ mirror
   was retired to archive/v1-handoff-2026-07/ in August 2026.) */
/* ==========================================================================
   whatifnowai — design system
   editorial / restrained. cream + ink, warm spectrum used functionally.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ---- [hidden] guard ------------------------------------------------------------------
   `[hidden] { display: none }` is a USER-AGENT rule, so ANY author rule that sets an explicit
   display on the same element outranks it and the element renders while its `hidden` attribute
   reads true. We shipped this bug twice in one day — the empty upload chip above the hero CTA,
   and an orphan "GROUNDED ON" label with no filename after it — both from ordinary
   `.thing { display: flex }` rules on elements that ship hidden.

   Fixing it per-component means remembering forever. This is the one place where !important is
   correct: `hidden` is a statement about whether the element exists for the user, not a style
   preference, and nothing should be able to overrule it. Any element that needs to animate
   in/out must use a class, not the attribute. */
[hidden] { display: none !important; }

:root {
  /* Surface */
  --cream:       #F4EEE6;
  --cream-deep:  #E8DFD2;
  --paper:       #FCF8F3;
  --ink:         #202C6E;
  --ink-2:       #4A549B;
  --ink-3:       #565E96;   /* darkened v1.0.2 so micro-labels clear AA on cream; the ratio is
                                measured in PACK-MANIFEST invariants.contrast_audit, not here */
  --rule:        rgba(32, 44, 110, 0.14);
  --rule-strong: rgba(32, 44, 110, 0.34);

  /* Cold spectrum (score scale, low → high) — v1.0 Northstar.
     NAMED BY POSITION as of drop AO: --band-1 is the 1–2 fill, --band-5 the 9–10 one. They were
     called --purple / --magenta / --red / --orange / --sun until then, and the names had outlived the
     values by an entire palette — the thing called red was a cobalt, orange a teal, magenta an
     indigo — so this comment used to document the contradiction ("token NAMES are legacy band
     aliases… values are cold") instead of resolving it. A rule stated in a comment beside the thing
     it fails to fix is the same defect as a ratio in a comment. Name a scale by its POSITION: a
     repaint breaks every name that describes a colour, and this palette has been repainted once
     already. Values are cold: deep violet → cobalt → teal. */
  --band-1: #2A1B52;
  --band-2: #4A3B8F;
  --band-3: #4A549B;
  --band-4: #1E7F8C;
  --band-5: #2AB5A0;
  /* The two bright bands in a TEXT role. A ramp value is a FILL value: at 7-8 and 9-10 the cold
     spectrum is bright by design, and bright is illegible as small text on cream and under cream
     text. Same two bands, darkened until they clear AA at the size they render, luminance order
     preserved (red < orange-ink < sun-ink) so the axis still reads low -> high in a text role.
     Bars, dots and swatches keep --band-4 / --band-5: adjacency has no contrast floor.
     The RATIOS are not written here. They are computed from these values at cut time into
     PACK-MANIFEST.json -> invariants.contrast_audit, because --accent-on-ink's own comment stated
     a ratio for two months that was true of the section and false of the panel in front of it
     (ENGINE-42 §4, RESPONSE-52 §5). A ratio in a comment cannot be told apart from a ratio that
     was measured, which is the whole defect. */
  --band-4-ink: #166B74;
  --band-5-ink:    #0D7360;
  --sun-stamp:#FFC629; /* celebration only: the period after a 9–10 verdict word. NOT a ramp colour:
     the verdict RAMP was drafted with a gold top end on the argument that warm-at-the-top was
     already the product's language, and this comment is the reason it is not — one glyph on one
     score band is a quarantined accent, not a system colour, and --accent owns warm for ACTION. */

  /* Verdict RAMP — five text-safe stops for the score numeral and its track (D1 option A, decided
     2026-08-20; top end reworked to scheme D, 2026-08-20). The band is ink on every tone now, so the
     ordinal job moved to the score, and none of the five band FILLs above survives as text on ink:
     the darkest is well below the large-text floor there, which is why the ramp exists at all.

     THE STOPS ARE NOT DERIVED FROM THE BAND HUES. An earlier cut lightened each band fill in place,
     which faithfully inherited that palette's own unevenness: hues 256/251/233/187/171 — three
     near-identical violets, a 46° cliff, then two near-identical cyans. The cliff landed between
     stops 3 and 4, i.e. exactly on the 6→7 Map→Build step every upgrading buyer sees, so the ramp's
     largest visual break sat at its least meaningful place. These are EVEN ~26° steps across the
     cold spectrum (265 → 158), each solved to an ascending contrast target on --ink.

     Named by POSITION, never by hue — and so are the band fills above, as of this drop. They were
     --purple / --magenta / --red / --orange / --sun, names that had outlived their values by a whole
     palette (the one called red was a cobalt, orange a teal), which is exactly what naming a scale
     after its appearance buys you. --ramp-N is the stop for score band N and survives the next
     repaint.

     Targets ASCEND because a single shared threshold is a single shared luminance, which collapsed
     adjacent stops to near-indistinguishable. Even so, adjacent-step separation stays small in every
     scheme we measured, including this one: the ramp reads low-versus-high in greyscale and print,
     NOT as five steps, and only hue separates neighbours. Do not claim more for it than that.

     Ratios are NOT written here (ENGINE-42 §4, enforced by no_ratio_in_comments) — they are computed
     per stop into PACK-MANIFEST invariants.contrast_audit, with the rendered size and the
     adjacent-step figure beside them, because the numeral shrinks under [data-mode="status"] and in
     print. That sentence stood here for a whole sitting directly above four ratio literals in this
     same file, while the assertion shipped pass:true — the rule broken by the comment stating it,
     for the second drop running. Prose may say WHICH WAY a number goes; only the generated block
     says what it is. */
  --ramp-1: #9C76D1;  /* score band 1–2  · hue 265 */
  --ramp-2: #9292D3;  /* score band 3–4  · hue 240 */
  --ramp-3: #8BAACD;  /* score band 5–6  · hue 212 */
  --ramp-4: #6FC4D1;  /* score band 7–8  · hue 188 */
  --ramp-5: #88D7BA;

  /* Third-party brand colours. Named, not tokenized-away: they are other companies' marks and must
     NOT move when our palette repaints — the opposite requirement to --band-N. They are here so an
     audit stops re-flagging them as stray literals and so nobody "fixes" them into a band token.
     The one place each is allowed is the source pill / social-post top border. */
  --brand-reddit:    #FF4500;
  --brand-linkedin:  #0077B5;
  --brand-twitter:   #1DA1F2;
  --brand-instagram: #E1306C;

  /* Motion scale (drop AP). Three durations and two easings, and the rule for which to use:
       --dur-fast  a state the pointer is already on (hover, press) — must not lag the finger
       --dur-base  a state change the reader initiated (depth switch, tab, chip)
       --dur-slow  something entering or leaving the page (toast, overlay)
       --ease-out  anything arriving or responding to input; decelerate into rest
       --ease-io   anything that returns to where it started (a pulse, a reversible reveal)
     Written as tokens because twelve distinct transition values were doing the work of three, and a
     duration in a declaration is invisible to review. `transition: all` is banned: it animates
     properties nobody chose, so a token change becomes an animation change. Name the properties. */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 250ms;
  --ease-out: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-io:  cubic-bezier(0.4, 0, 0.2, 1);

  /* Print ink. The @page margin boxes and the expanded-URL suffix are the only places the product
     prints text that is not on screen, and they were the last two hardcoded inks in the layer. */
  --print-ink: #565E96;  /* score band 9–10 · hue 158 */

  /* Brand accent — vermilion. Brand moments only (logo dot, links, run actions,
     progress, mitigation/action labels). NEVER a score band. (Identity v0.5) */
  --accent:      #FF3D1F;
  --accent-soft: #FFD0C2;
  /* Accent as SMALL TEXT on --paper / --cream. Fills, rails and dots keep --accent. */
  --accent-ink:  #B02710;
  /* Accent as small text on the ink SURFACE and on the wells inside it (.lr-col). Measured
     against the well, not the section behind it — a lift toward cream is the one direction that
     costs contrast, and this token's comment claimed the section's ratio for two months. */
  --accent-on-ink: #FF6E52;

  /* Tints for soft fills */
  --band-5-soft:     #C9EEE6;
  --band-4-soft:  #BFE0E4;
  --band-3-soft:     #DDE1F2;
  --band-2-soft: #D6D2EE;
  --band-1-soft:  #CBC2E4;

  /* Type */
  --display: "Instrument Serif", "Source Serif Pro", Georgia, serif;
  --sans:    "Geist", "Inter", system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Sizes */
  --fs-display:  clamp(64px, 9vw, 132px);
  --fs-h1:       clamp(40px, 5.4vw, 84px);
  --fs-h2:       clamp(30px, 3.4vw, 52px);
  --fs-h3:       clamp(22px, 2.2vw, 32px);
  --fs-lede:     clamp(20px, 1.6vw, 26px);
  --fs-body:     17px;
  --fs-small:    14px;
  --fs-micro:    12px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ink); color: var(--cream); }

a { color: inherit; }

/* ------------------------------------------------- UNIVERSAL AFFORDANCES
   Three rules the product shipped without for nineteen drops. They are here rather than in
   report-v2.css because the reports, the site and the internal docs all load this file, and a focus
   ring that exists on three surfaces out of four is the P1.3 defect in a different channel. */

/* A2.1 · 2.4.7. There was NO focus style anywhere: zero matches for :focus, :focus-visible or
   outline in either shared sheet, so the criterion passed only because the UA default was doing all
   of it — a ring tuned for white pages, landing on --ink bands three times per report. Wrapping the
   element list in :where() keeps specificity at (0,1,0), so a page can still override it without an
   !important war. Accent is the action channel and this is an action affordance. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* On the ink grounds the same ring goes lighter, not darker — the rule --accent-on-ink exists for. */
.verdict :focus-visible,
.esc-band :focus-visible,
.closing-band :focus-visible { outline-color: var(--accent-on-ink); }
/* Nothing in this file writes `outline: none`, and the rule for everywhere that does is PAIRING,
   not absence. Removing a UA focus ring is legitimate exactly when the same rule supplies a visible
   replacement; it is a 2.4.7 failure only when it does not. As of this cut the tree holds nine
   `outline: none` declarations outside archive/, and all nine are paired:
     · seven in page CSS on text inputs — `.idea-box textarea:focus`, `.t-gate-box input:focus`,
       `.co-ta/.co-email:focus` (index), `.modal input:focus` (teaser), `.ask-card
       textarea/input:focus` (how-it-works), `.auth-card input:focus`, `.ov-box
       input/textarea:focus` (dashboard) — each replacing the ring with `border-color: var(--accent)`
       plus a 3px `box-shadow`, which is a stronger affordance on a field than the UA outline;
     · two in internal/deck-stage.js — `.btn:focus` and `.thumb` — each answered by a
       `:focus-visible` rule two lines below it. That file is the investor deck's slide shell, loaded
       by one internal document, outside both packages, and named-and-excluded by the site pack's
       mirror rule with a stated reason.
   This comment previously read "the one file in the tree that does is internal/deck-stage.js", which
   was wrong twice: that file still writes it (paired, harmlessly), and it was never the only one.
   A count of a declaration is not a finding until you know what sits beside it — the corpse-versus-
   defect lesson (drop AN) applied to a property instead of a class. */

/* A3.5 · The visually-hidden utility. It was defined in website/index.html's page CSS only, so the
   report layer had no class to reach for and P2.5's live region had nowhere to live. Moved here
   verbatim; the page-local copy is deleted rather than left as a second definition. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* A5.4 · 2.3.3. One exemption, stated: the export spinner is a STATUS indicator, and stopping it
   mid-turn says the export died. Everything else here is decoration — hover translations, the
   calendar's today-pulse, the scroll progress bar's easing. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .export-btn.spin .ico { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
}

/* ----------------------------------------------------------------- LAYOUT */
.shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 56px;
}
@media (max-width: 800px) {
  .shell { padding: 0 24px; }
}

.col-text {
  max-width: 720px;
}

hr.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}

hr.rule-strong {
  border: 0;
  border-top: 1px solid var(--rule-strong);
  margin: 0;
}

/* ------------------------------------------------------------------- TYPE */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: 1.02; }
h2 { font-size: var(--fs-h2); line-height: 1.05; }
h3 { font-size: var(--fs-h3); line-height: 1.15; }

.display-xl {
  font-family: var(--display);
  font-size: var(--fs-display);
  line-height: 0.92;
  letter-spacing: -0.025em;
  font-weight: 400;
}

.italic { font-style: italic; font-family: var(--display); }

.lede {
  font-family: var(--display);
  font-size: var(--fs-lede);
  line-height: 1.4;
  color: var(--ink-2);
}

.eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-2);
  font-weight: 500;
}

.label {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  font-weight: 500;
}

.kicker {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-3);
  font-weight: 600;
}

.mono { font-family: var(--mono); }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------- HEADER */
.masthead {
  border-bottom: 1px solid var(--rule-strong);
  padding: 20px 0 18px;
  background: var(--cream);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(6px);
  background-color: rgba(241, 238, 226, 0.94);
}
.masthead-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}
.masthead-meta {
  display: flex;
  gap: 28px;
  align-items: baseline;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-2);
}
.masthead-meta .meta-strong { color: var(--ink); }

/* Export toolbar (in masthead) */
.export-bar { display: flex; align-items: center; gap: 7px; }
.export-btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); background: transparent; border: 1px solid var(--rule-strong); border-radius: 999px; padding: 7px 13px; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); white-space: nowrap; }
.export-btn:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.export-btn .ico { font-size: 12px; line-height: 1; }
.export-btn[disabled] { opacity: 0.6; cursor: default; }
.export-btn.spin .ico { animation: ebspin 0.7s linear infinite; display: inline-block; }
@keyframes ebspin { to { transform: rotate(360deg); } }
@media print { .export-bar{ display: none !important; } }

/* Logo */
.logo {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  text-decoration: none;
}
.logo .now {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  margin: 0 1px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.logo .dot {
  color: var(--accent);
}
/* Dynamic logo dot — the masthead/footer dot adopts the report's VERDICT tone,
   turning the wordmark into a status glance. Default (no data-verdict) stays
   brand-accent (vermilion): covers, Identity, and any no-verdict context. (Identity v0.5) */
body[data-verdict="avoid"]   .logo .dot { color: var(--ink); }
body[data-verdict="pivot"]   .logo .dot { color: var(--band-2); }
body[data-verdict="caution"] .logo .dot { color: var(--band-3); }
body[data-verdict="go"]      .logo .dot { color: var(--band-4); }
body[data-verdict="strong"]  .logo .dot { color: var(--band-5);
  /* sun is light on cream — a hairline keeps the dot legible at this size */
  text-shadow: 0 0 0 var(--band-5), 0.5px 0.5px 0 var(--ink-3); }

/* Accent "important" dot — period after a verdict word / high-impact statement. */
.vword-dot{ color: var(--accent); }

/* --------------------------------------------------------------- SECTIONS */
.section {
  padding: 88px 0 0;
}
.section > .section-head {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 40px;
  align-items: end;
}
.section > .section-head .nbr {
  font-family: var(--display);
  font-size: 84px;
  line-height: 0.9;
  font-style: italic;
  color: var(--ink-3);
}
/* .ttl is a REAL HEADING as of drop AO (A3.1): every numbered section title on every tier was a
   div, so a whole LAUNCH report contained one h1 and one h3 and heading navigation did nothing on
   a €279 document. margin and font-weight are pinned here so the element can be an h2 without the
   UA sheet moving anything — §0w, the class and its rule ship together, and the rule must not
   depend on which tag carries it. */
.section > .section-head .ttl {
  font-family: var(--display);
  font-size: var(--fs-h2);
  line-height: 1.0;
  color: var(--ink);
  margin: 0;
  font-weight: 400;
}
.section > .section-head .sub {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-2);
  margin-bottom: 8px;
}

@media (max-width: 720px) {
  .section { padding-top: 56px; }
  .section > .section-head { grid-template-columns: 1fr; gap: 8px; }
  .section > .section-head .nbr { font-size: 48px; }
}

/* ------------------------------------------------------------------ GRIDS */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: 24px; }
}

/* ------------------------------------------------------------- COMPONENTS */

/* Verdict band */
.verdict {
  margin: 24px 0 8px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 0;
  position: relative;
  overflow: hidden;
}
.verdict-inner {
  padding: 56px 56px 48px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: end;
}
.verdict .vlabel {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-deep);
  /* No alpha on a band label. The background is a TONE token, so a translucent eyebrow has as
     many ratios as the band has tones, and it failed on the two bright ones. Quiet comes from
     --cream-deep, not from opacity. Same for .vscore-of. Measured in contrast_audit. */
  margin-bottom: 14px;
}
.verdict .vword {
  font-family: var(--display);
  font-size: clamp(80px, 12vw, 180px);
  line-height: 0.86;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin-bottom: 8px;
}
.verdict .vword .stamp {
  display: inline-block;
}
.verdict .vsub {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 32px);
  color: var(--cream-deep);
  line-height: 1.3;
  max-width: 520px;
}
.verdict .vscore {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
/* The ramp is keyed on the SCORE, in CSS, exactly as .score-chip[data-s] already is — one way of
   doing this in the product rather than two. `data-s` carries both the stop and the track width, so
   the bar cannot disagree with the numeral above it: there is no second value for the engine to
   compute and no inline style for a reference to author (§0q). Default cream covers a missing or
   out-of-range score — an unknown score gets no ordinal claim. */
.verdict .vscore { --ramp: var(--cream); --fill: 0%; }
.verdict .vscore[data-s="1"]  { --ramp: var(--ramp-1); --fill: 10%; }
.verdict .vscore[data-s="2"]  { --ramp: var(--ramp-1); --fill: 20%; }
.verdict .vscore[data-s="3"]  { --ramp: var(--ramp-2); --fill: 30%; }
.verdict .vscore[data-s="4"]  { --ramp: var(--ramp-2); --fill: 40%; }
.verdict .vscore[data-s="5"]  { --ramp: var(--ramp-3); --fill: 50%; }
.verdict .vscore[data-s="6"]  { --ramp: var(--ramp-3); --fill: 60%; }
.verdict .vscore[data-s="7"]  { --ramp: var(--ramp-4); --fill: 70%; }
.verdict .vscore[data-s="8"]  { --ramp: var(--ramp-4); --fill: 80%; }
.verdict .vscore[data-s="9"]  { --ramp: var(--ramp-5); --fill: 90%; }
.verdict .vscore[data-s="10"] { --ramp: var(--ramp-5); --fill: 100%; }
/* The track is DECORATIVE reinforcement and aria-hidden in the markup: it does not reach 1.4.11's
   non-text floor, and the floor's own value is stated in PACK-MANIFEST.json, never here — a scanner
   that had to tell a CITATION of a floor from a MEASUREMENT would be keying on the shape of the text
   instead of on the fact, which is the name-prefix mistake §1d is about. That is defensible only
   because the numeral states the same value in text directly above — so the track never appears
   without it, and it takes the same --ramp so the two cannot drift apart. */
.verdict .vtrack {
  height: 3px;
  width: 120px;
  background: rgba(244, 238, 230, 0.22);
  margin-top: 14px;
}
.verdict .vtrack i { display: block; height: 3px; width: var(--fill); background: var(--ramp); }
.verdict .vscore-num {
  font-family: var(--display);
  font-size: clamp(120px, 16vw, 220px);
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: var(--ramp);
}
.verdict .vscore-of {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-deep);
  /* V2 · `OUT OF TEN · CONFIDENCE MEDIUM` is one string and wrapped it on all four tiers, directly
     under a 220px numeral — the widest thing on the page breaking under the largest. It stays on one
     line here and is released back to normal flow at 760px, where .vscore turns left-aligned and a
     two-line label is the correct answer rather than an overflow. */
  white-space: nowrap;
}
.verdict-bullets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(246, 241, 227, 0.2);
}
.verdict-bullets > div {
  padding: 24px 28px;
  border-right: 1px solid rgba(246, 241, 227, 0.2);
  font-size: 15px;
  line-height: 1.4;
  color: var(--cream-deep);
}
.verdict-bullets > div:last-child { border-right: 0; }
.verdict-bullets .arrow {
  font-family: var(--display);
  font-style: italic;
  font-size: 28px;
  color: var(--cream);
  margin-bottom: 8px;
  display: block;
  line-height: 1;
}

/* V6 · Three columns held to 900px, and between ~1000 and 900 each one is ~250px wide: the bullet
   headers broke mid-phrase in two of the three on every tier. Two columns first, then one — the step
   this scale was always missing. Declared BEFORE the 900px block so source order resolves the
   overlap in favour of one column at the narrow end. */
@media (max-width: 1000px) {
  .verdict-bullets { grid-template-columns: repeat(2, 1fr); }
  .verdict-bullets > div:nth-child(2n) { border-right: 0; }
  .verdict-bullets > div:nth-child(-n+2) { border-bottom: 1px solid rgba(246, 241, 227, 0.2); }
}
@media (max-width: 900px) {
  .verdict-inner { grid-template-columns: 1fr; padding: 32px 28px; }
  .verdict-bullets { grid-template-columns: 1fr; }
  .verdict-bullets > div:nth-child(-n+2) { border-bottom: 1px solid rgba(246, 241, 227, 0.2); }
  .verdict-bullets > div { border-right: 0; border-bottom: 1px solid rgba(246, 241, 227, 0.2); }
}

/* Verdict color variants — applied as data-tone */
/* THE BAND IS INK ON EVERY TONE (D1 option C, decided 2026-08-16; the ramp is option A, 2026-08-20).
   The five-tone surface scale is retired as a SURFACE: pivot against caution measured below the
   graphical-object floor with identical red channels, so the pair separated neither in greyscale nor
   under red-green CVD, and
   the ~8% case and the print case failed together. `data-tone` is NOT retired — the engine still
   sends it, it still drives body[data-verdict] and the tint elsewhere, and 1.4.1 holds where it
   always did: on the verdict WORD, which is text. What moved is the ordinal claim, onto the score
   numeral and its track, where it is one axis instead of five nominal colours (§0aa). The band's own
   contrast improves on all five tones — cream on ink is the pairing that already measured best.
   Keep the five selectors rather than collapsing to `.verdict`: a tone that stops resolving should
   surface as a missing selector, not silently inherit. */
.verdict[data-tone="avoid"],
.verdict[data-tone="pivot"],
.verdict[data-tone="caution"],
.verdict[data-tone="go"],
.verdict[data-tone="strong"]    { background: var(--ink); }
.sun-stamp { color: var(--sun-stamp); } /* engine wraps the final period of a 9–10 verdict word */

/* Score chip — number + ordinal meter. The numeral is always ink, so a 5 never
   looks more alarming than a 3; rank is read by meter LENGTH, band color is a
   secondary cue carried on the meter only. (Identity v0.4) */
.score-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-family: var(--display);
  font-size: 26px;
  line-height: 1;
  color: var(--ink);
  padding: 2px 0 9px;
  position: relative;
  min-width: 44px;
}
.score-chip .of {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.score-chip::before {            /* meter track */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 3px; border-radius: 2px;
  background: var(--rule);
}
.score-chip::after {             /* meter fill — width encodes the score */
  content: "";
  position: absolute;
  left: 0; bottom: 2px;
  height: 3px; border-radius: 2px;
  width: var(--fill, 0%);
  background: var(--ink-3);
}
.score-chip[data-s="1"]{--fill:10%}  .score-chip[data-s="2"]{--fill:20%}
.score-chip[data-s="3"]{--fill:30%}  .score-chip[data-s="4"]{--fill:40%}
.score-chip[data-s="5"]{--fill:50%}  .score-chip[data-s="6"]{--fill:60%}
.score-chip[data-s="7"]{--fill:70%}  .score-chip[data-s="8"]{--fill:80%}
.score-chip[data-s="9"]{--fill:90%}  .score-chip[data-s="10"]{--fill:100%}

/* band color on the meter only — activates when body[data-score-color="on"] */
body[data-score-color="on"] .score-chip[data-s="1"]::after,
body[data-score-color="on"] .score-chip[data-s="2"]::after  { background: var(--band-1); }
body[data-score-color="on"] .score-chip[data-s="3"]::after,
body[data-score-color="on"] .score-chip[data-s="4"]::after  { background: var(--band-2); }
body[data-score-color="on"] .score-chip[data-s="5"]::after,
body[data-score-color="on"] .score-chip[data-s="6"]::after  { background: var(--band-3); }
body[data-score-color="on"] .score-chip[data-s="7"]::after,
body[data-score-color="on"] .score-chip[data-s="8"]::after  { background: var(--band-4); }
body[data-score-color="on"] .score-chip[data-s="9"]::after,
body[data-score-color="on"] .score-chip[data-s="10"]::after { background: var(--band-5); }

/* Score bar */

/* ---- Type-scale utilities (Identity v0.4) -------------------------------
   Use these instead of ad-hoc inline font-sizes so rhythm stays consistent. */
.t-body  { font-size: 17px;   line-height: 1.55; }
.t-small { font-size: 14.5px; line-height: 1.55; }
.t-micro { font-size: 13px;   line-height: 1.5; }
.t-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
           text-transform: uppercase; color: var(--ink-3); }

/* ---- Confidence chip (shared) ------------------------------------------
   Meta-signal in ink tones + a fill-level dot. Never uses the score spectrum. */
.conf-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.conf-chip::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
}
/* A1.5 · These five selectors keyed `[data-c]` from v1 until drop AN. The partial, all five
   references and `.risk-meter` in this same file author `data-level`, so NONE of them matched: every
   chip inherited --ink-3 and, because ::before fills with currentColor, every dot rendered FILLED —
   the *high* state — including the nine SCAN cards whose own word says Low. The designed redundant
   encoding (tone + dot fill + word) was down to the word alone, which is 1.4.1 resting on one leg.
   A selector that matches nothing renders as the default state, which is why it looked deliberate. */
.conf-chip[data-level="high"]   { color: var(--ink); }
.conf-chip[data-level="medium"] { color: var(--ink-2); }
.conf-chip[data-level="medium"]::before { background: transparent;
  box-shadow: inset 0 0 0 1.5px currentColor; }
.conf-chip[data-level="low"]    { color: var(--ink-3); }
.conf-chip[data-level="low"]::before { background: transparent;
  box-shadow: inset 0 0 0 1.5px currentColor; opacity: 0.6; }

/* ---- Metric tile (canonical) -------------------------------------------
   One primitive for every labelled metric (replaces feat-count / kpi-tile /
   stat-cell / market-tier variants). Optional top rail via data-accent. */
.metric-tile {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--rule-strong);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.metric-tile .mt-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
}
.metric-tile .mt-value {
  font-family: var(--display); font-size: 40px; line-height: 1; color: var(--ink);
}
.metric-tile .mt-note { font-size: 13px; color: var(--ink-2); line-height: 1.45; margin: 0; }
.metric-tile[data-accent="purple"]  { border-top-color: var(--band-1); }
.metric-tile[data-accent="magenta"] { border-top-color: var(--band-2); }
.metric-tile[data-accent="red"]     { border-top-color: var(--band-3); }
.metric-tile[data-accent="orange"]  { border-top-color: var(--band-4); }
.metric-tile[data-accent="sun"]     { border-top-color: var(--band-5); }
.metric-tile[data-accent="ink"]     { border-top-color: var(--ink); }

/* ---- Plan rail — shared phased-plan timeline (SCAN 48h · MAP 90d · BUILD 30d) ---- */
.plan-rail { position: relative; padding-top: 26px; }
.plan-rail .rail { position: absolute; top: 32px; left: 4%; right: 4%; height: 2px; background: var(--rule-strong); }
.plan-rail .stops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; }
.plan-rail .stop { text-align: left; }
@media (max-width: 700px) { .plan-rail .stops { grid-template-columns: 1fr; gap: 18px; } .plan-rail .rail { display: none; } }

/* ---- Risk meter (BUILD verdict, replaces a word in the numeral slot) ---- */
.risk-meter { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.risk-meter .rm-track {
  display: flex; gap: 4px;
}
.risk-meter .rm-seg {
  width: 34px; height: 12px; border-radius: 2px; background: var(--rule);
}
.risk-meter[data-level="low"]  .rm-seg:nth-child(1),
.risk-meter[data-level="med"]  .rm-seg:nth-child(-n+2),
.risk-meter[data-level="high"] .rm-seg:nth-child(-n+3) { background: var(--cream); }
.risk-meter .rm-word { font-family: var(--display); font-size: 44px; line-height: 1; color: var(--cream); }

/* Inline tag */
.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--cream-deep);
  color: var(--ink);
  font-weight: 500;
}
.tag.tag-pri  { background: var(--ink); color: var(--cream); }
.tag.tag-sec  { background: transparent; box-shadow: inset 0 0 0 1px var(--rule-strong); }
.tag.tag-warn { background: var(--band-3); color: var(--cream); }
.tag.tag-go   { background: var(--band-4-ink); color: var(--cream); }
.tag.tag-watch{ background: var(--band-1); color: var(--cream); }

/* Card */
.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 28px;
}
.card.flat { background: transparent; border: 0; padding: 0; border-top: 1px solid var(--rule); padding-top: 20px; }
/* Flat cards given an inline left rail need full padding so text doesn't crowd the rail.
   Cards that set their own inline padding override this automatically. */
.card.flat[style*="border-left"] { padding: 16px 20px 16px 22px; border-top: 0; }

/* Pull quote */
blockquote.pull {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.2;
  color: var(--ink);
  position: relative;
  padding-left: 28px;
  border-left: 3px solid var(--accent);
}
blockquote.pull cite {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  margin-top: 18px;
  font-weight: 500;
}

/* Table — editorial */
table.report {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
table.report thead th {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--ink-3);
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule-strong);
}
table.report tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  line-height: 1.35;
}
table.report tbody td:first-child { font-weight: 500; }
table.report tbody tr:last-child td { border-bottom: 0; }

/* Marginalia — small note hanging in the left margin */

/* The v1 section rail (.toc-rail — a floating bordered panel, its collapse toggle, and the BUILD
   workbook variant) is DELETED at drop AO. v2 replaced it with .toc-spine, which lives in
   report-v2.css: a column of dots flush to the right edge, labels on hover. No markup in this
   product has carried .toc-rail, .toc-toggle or .toc-divider since v2 shipped, so ~29 declarations
   in seventeen copies of this file were styling nothing, and report-v2.js was binding a click
   handler to a toggle that cannot exist. Do not re-add: if the spine ever needs a collapsed state,
   it belongs beside .toc-spine in report-v2.css. */

/* A pressed state, for every control family in the layer (drop AP, P3.1).

   `:active` was 0 in this file, in report-v2.css and in all six pages: 45 hover rules and a global
   focus ring, and nothing acknowledging the press itself. On a touch screen hover does not exist, so
   a tap had NO feedback at all until the next paint — which on a slow connection is the moment the
   user taps again. It is one line per family, and it was missing product-wide.

   Two recipes, because two kinds of thing are being pressed. A BUTTON-shaped control moves 1px into
   the page. A LINK or text control deepens its ink instead — nudging text reads as a glitch.
   Deliberately no transition on the press: --dur-fast on the way in would delay the only feedback
   the finger gets. The release animates, because that is the hover rule taking over. */
.export-btn:active,
.tier-nav .tier-step:active,
.launch-cal .lc-tab:active { transform: translateY(1px); }
.tier-bar a.tb-step:active .tb-w { color: var(--ink); }

/* Footer */
.report-foot {
  margin-top: 120px;
  padding: 48px 0 56px;
  border-top: 1px solid var(--rule-strong);
}

/* Misc helpers */
.spacer-lg { height: 80px; }
.spacer-md { height: 48px; }
.spacer-sm { height: 24px; }

.text-ink-2 { color: var(--ink-2); }
.text-ink-3 { color: var(--ink-3); }
.swatch {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-block;
}

/* Roadmap timeline */
.timeline {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 32px;
  border-left: 1px solid var(--rule-strong);
  padding-left: 28px;
  position: relative;
}
.timeline + .timeline { margin-top: 40px; }
.timeline::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 6px;
  width: 11px;
  height: 11px;
  background: var(--accent);
  border-radius: 50%;
}

/* Experiment card priority strip */
.experiment {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 28px;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
}
.experiment:last-child { border-bottom: 0; }
.experiment .prio {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
}
.experiment[data-p="critical"] .prio { color: var(--band-3); }
.experiment[data-p="high"]     .prio { color: var(--band-4-ink); }
.experiment[data-p="medium"]   .prio { color: var(--band-2); }
.experiment[data-p="low"]      .prio { color: var(--band-1); }

.experiment dl {
  margin: 0;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px 24px;
  font-size: 15px;
}
.experiment dt {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  font-weight: 600;
  padding-top: 2px;
}

/* TAM/SAM/SOM nested */
.market-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
}
.market-tier {
  display: grid;
  grid-template-columns: 200px 1fr 140px;
  gap: 32px;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.market-tier:last-child { border-bottom: 0; }

/* ICP card */
.icp {
  background: var(--paper);
  padding: 32px;
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.icp[data-prio="primary"]   { border-top: 4px solid var(--band-4); }
.icp[data-prio="secondary"] { border-top: 4px solid var(--band-2); }
.icp[data-prio="avoid"]     { border-top: 4px solid var(--band-1); background: var(--cream-deep); }

.icp h3 { font-size: 24px; }
.icp dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.icp dt {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: 4px;
}
.icp dd { margin: 0; font-size: 14px; line-height: 1.4; }

/* Tweaks panel — minimal, hand-rolled (toggle by host) */

/* Cross-doc nav */
.doc-switch {
  display: inline-flex;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  overflow: hidden;
}
.doc-switch a {
  text-decoration: none;
  color: var(--ink-3);
  padding: 6px 14px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 500;
}
.doc-switch a.on { background: var(--ink); color: var(--cream); }
.doc-switch a.muted { color: var(--ink-3); opacity: 0.42; pointer-events: none; }

/* Report toolbar (Print / Copy) — inline in masthead, seamless with meta */

.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--cream);
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  box-shadow: 0 16px 40px -10px rgba(32, 44, 110, 0.4);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================ PRINT / PDF =============================
   Strictly print-scoped — none of these rules affect the on-screen view.
   Goal: a boardroom-grade PDF — landscape, binding margin, color preserved,
   no charts/cards split across pages, a running version footer. */

/* Running footer element — hidden on screen, shown only in print. */
.print-footer { display: none; }

@page {
  size: A4 landscape;
  /* generous LEFT margin = binding edge; roomier bottom reserves the footer */
  margin: 13mm 15mm 16mm 22mm;
}

@media print {
  /* hide all interactive chrome */ .scroll-progress, .toast { display: none !important; }
  .masthead { position: static !important; }

  /* Tabbed blocks: reveal EVERY panel in print (hidden tabs would otherwise drop
     3/4 of the content). Hide the tab buttons; label each panel with its title. */

  /* preserve the design's color (verdict bands, score meters, charts) —
     without this, browsers strip backgrounds and "color is data" breaks */
  html, body {
    background: white !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* widen the content to the landscape page */
  .shell { max-width: none !important; padding: 0 !important; }

  /* running version footer, repeats on every printed page */
  .print-footer {
    display: flex !important;
    position: fixed; left: 0; right: 0; bottom: 0;
    justify-content: space-between; align-items: baseline;
    font-family: var(--mono); font-size: 8px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-3);
    padding: 4px 0 0; border-top: 0.5px solid var(--rule);
  }
  .print-footer .pf-dot { color: var(--accent); }

  /* keep self-contained blocks whole */
  .breath, .sec-card, .verdict, .workbook-open { break-inside: avoid; page-break-inside: avoid; }
}

/* Additional break-avoid for graphics & grids that shouldn't split.
   Eleven dead v1 selectors were removed from this list at drop AP. The comment that used to sit
   INSIDE the selector list (labelling the last four as "v0.4 components") is above the rule now:
   a comment between a selector and its brace is invisible to a naive parser, and it is the reason
   this one rule survived the automated sweep that cleaned the other 330. Keep annotations out of
   selector lists. */
@media print {
  .pillar-grid, .kpi-grid, .market-stack, .grid-2, .grid-3, .grid-4,
  .timeline, .day-grid, .verdict-bullets, .verdict-inner,
  table.report, table.flow-steps, .non-goals, .launch-readiness,
  .risk-overview,
  .metric-tile, blockquote.pull, .conf-chip, .score-chip {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* Allow long containers (sections) to split, but avoid the workbook header itself orphaning */
  .workbook-open { break-after: avoid; page-break-after: avoid; }
  .section-head { break-after: avoid; page-break-after: avoid; }
  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }
}

/* =================================================== */
/*  BUILD-tier components                              */
/* =================================================== */

/* Workbook chapter opener — replaces section-head for workbook chapters */
.workbook-open {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  padding: 56px 0 28px;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 40px;
}
.workbook-open .wb-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.workbook-open .wb-title {
  font-family: var(--display);
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.0;
  color: var(--ink);
}
.workbook-open .wb-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.workbook-open .wb-meta .wb-confidence {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--cream-deep);
  color: var(--ink);
  font-weight: 600;
}
/* Confidence is a meta-signal, not a score — rendered in ink tones so it never
   competes with the warm score spectrum. (Identity v0.4)
   These three keep `data-c` ON PURPOSE. `.wb-confidence` is legacy workbook chrome that no partial
   and no reference emits (RESPONSE-52 §5), so renaming it to match A1.5's fix would turn three dead
   rules into three live ones with no author behind them. Two components, one attribute name, one of
   them live: the live one is `.conf-chip`, 700 lines up. */
.workbook-open .wb-meta .wb-confidence[data-c="high"]   { background: var(--ink); color: var(--cream); }
.workbook-open .wb-meta .wb-confidence[data-c="medium"] { background: var(--cream-deep); color: var(--ink); }
.workbook-open .wb-meta .wb-confidence[data-c="low"]    { background: transparent; box-shadow: inset 0 0 0 1px var(--rule-strong); color: var(--ink-2); }

@media (max-width: 720px) {
  .workbook-open { grid-template-columns: 1fr; }
  .workbook-open .wb-meta { align-items: flex-start; }
}

/* Section card with priority — used inside workbooks */
.sec-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 32px;
  position: relative;
  margin-bottom: 24px;
}
.sec-card[data-prio="primary"]   { border-left: 4px solid var(--band-4); }
.sec-card[data-prio="secondary"] { border-left: 4px solid var(--band-2); }
.sec-card[data-prio="reference"] { border-left: 4px solid var(--ink-3); background: var(--cream); }

.sec-card .sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.sec-card .sec-head h3 {
  font-size: 28px;
  margin: 0;
}
.sec-card .sec-prio { display: none; }
.sec-card[data-prio="primary"]   .sec-prio { background: var(--band-4-ink);  color: var(--cream); }
.sec-card[data-prio="secondary"] .sec-prio { background: var(--band-2); color: var(--cream); }
.sec-card[data-prio="reference"] .sec-prio { background: var(--cream-deep); color: var(--ink-2); }

/* Differentiator card (functional / process) */
.diff-card {
  border-left: 4px solid var(--band-2);
  background: var(--cream);
  padding: 16px 20px;
}
.diff-card[data-kind="functional"] { border-left-color: var(--rule-strong); }
.diff-card[data-kind="process"]    { border-left-color: var(--rule-strong); }
.diff-card .dc-name {
  font-family: var(--display);
  font-size: 22px;
  line-height: 1.15;
}
.diff-card .dc-kind {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-2);
  margin: 6px 0 10px;
  display: inline-block;
}
.diff-card[data-kind="functional"] .dc-kind { color: var(--ink-2); }
.diff-card[data-kind="process"]    .dc-kind { color: var(--ink-2); }
.diff-card p { font-size: 14.5px; line-height: 1.5; margin: 0; }

/* MVP feature card */
.mvp-card {
  background: var(--cream);
  padding: 14px 18px;
  border-left: 3px solid var(--ink-3);
}
.mvp-card .mc-name {
  font-family: var(--display);
  font-size: 19px;
  line-height: 1.2;
}
.mvp-card p { font-size: 14px; line-height: 1.5; margin: 6px 0 0; }

/* Priority badge — MUST / SHOULD / COULD */
.prio-badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 3px;
  display: inline-block;
}
.prio-badge.must   { background: var(--band-3);     color: var(--cream); }
.prio-badge.should { background: var(--band-4-ink);  color: var(--cream); }
.prio-badge.could  { background: var(--ink-3);   color: var(--cream); }

/* RICE feature row */
.rice-row {
  display: grid;
  grid-template-columns: 56px 1fr 180px;
  gap: 18px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.rice-row:last-child { border-bottom: 0; }
.rice-row .rice-rank {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 22px;
  line-height: 1;
}
.rice-row .rice-name {
  font-family: var(--display);
  font-size: 22px;
  line-height: 1.15;
}
.rice-row .rice-desc {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.45;
  margin-top: 6px;
}
.rice-row .rice-formula {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rice-row .rice-formula span { padding: 2px 6px; background: var(--cream-deep); border-radius: 3px; }
.rice-row .rice-formula span strong { color: var(--ink); font-weight: 600; margin-left: 4px; }
.rice-row .rice-score {
  text-align: right;
}
.rice-row .rice-score .rs-num {
  font-family: var(--display);
  font-size: 36px;
  line-height: 1;
}
.rice-row .rice-score .rs-bar {
  height: 4px;
  margin-top: 6px;
  background: var(--cream-deep);
  border-radius: 999px;
  overflow: hidden;
}
.rice-row .rice-score .rs-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--band-4);
}

@media (max-width: 720px) {
  .rice-row { grid-template-columns: 40px 1fr; }
  .rice-row .rice-score { grid-column: 1 / -1; text-align: left; }
}

/* JTBD card */
.jtbd {
  background: var(--ink);
  color: var(--cream);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px 24px;
  align-items: baseline;
}
.jtbd dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-deep);
  opacity: 0.65;
  font-weight: 600;
}
.jtbd dd {
  margin: 0;
  font-family: var(--display);
  font-size: 22px;
  line-height: 1.3;
  color: var(--cream);
}

@media (max-width: 720px) {
  .jtbd { grid-template-columns: 1fr; }
}

/* Non-goals chip list */
.non-goals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.non-goal {
  border-left: 3px solid var(--band-3);
  background: var(--cream);
  padding: 12px 14px;
}
.non-goal .ng-what {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
}
.non-goal .ng-why {
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 6px;
  line-height: 1.45;
}

/* Brand candidate card */
.brand-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.brand-card.recommended {
  background: var(--cream);
  border: 0;
  border-top: 4px solid var(--band-4);
}
.brand-card .brand-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.brand-card .brand-rank {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--ink-3);
}
.brand-card .brand-name {
  font-family: var(--display);
  font-size: 30px;
  line-height: 1;
}
.brand-card .brand-score {
  margin-left: auto;
  font-family: var(--display);
  font-size: 22px;
  color: var(--ink-2);
}
.brand-card .brand-bar {
  height: 4px;
  background: var(--cream-deep);
  border-radius: 999px;
  overflow: hidden;
}
.brand-card .brand-bar > span { display: block; height: 100%; background: var(--band-4); border-radius: 999px; }
.brand-card .brand-rationale { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.brand-card .brand-concern {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--band-3);
  border-top: 1px solid var(--rule);
  padding-top: 8px;
}

/* Archetype callout */
.archetype {
  background: var(--cream);
  border-left: 4px solid var(--band-1);
  padding: 20px 24px;
}
.archetype .arch-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--band-1);
  font-weight: 600;
}
.archetype .arch-name {
  font-family: var(--display);
  font-style: italic;
  font-size: 40px;
  line-height: 1;
  color: var(--band-1);
  margin-top: 4px;
}
.archetype .arch-drive {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 12px;
}
.archetype p { font-size: 14.5px; line-height: 1.55; margin: 10px 0 0; color: var(--ink); }

/* Risk register tile */
.risk-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.risk-overview .ro-tile {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 20px;
}
.risk-overview .ro-tile .ro-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.risk-overview .ro-tile .ro-value {
  font-family: var(--display);
  font-size: 44px;
  line-height: 1;
  margin-top: 8px;
}
.risk-overview .ro-tile[data-tone="high"]   .ro-value { color: var(--band-3); }
.risk-overview .ro-tile[data-tone="med"]    .ro-value { color: var(--band-4); }
.risk-overview .ro-tile[data-tone="low"]    .ro-value { color: var(--band-1); }

@media (max-width: 720px) { .risk-overview { grid-template-columns: 1fr 1fr; } }

/* Risk card — compact, less nested */
.risk-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--band-3);
  padding: 18px 22px;
  margin-bottom: 10px;
}
.risk-card[data-sev="high"]   { border-left-color: var(--band-3); }
.risk-card[data-sev="medium"] { border-left-color: var(--band-4); }
.risk-card[data-sev="low"]    { border-left-color: var(--band-1); }
.risk-card .risk-head {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 10px;
}
.risk-card .risk-id {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--ink-3);
  background: var(--cream-deep);
  padding: 3px 8px;
  border-radius: 3px;
  display: inline-block;
  width: fit-content;
}
.risk-card .risk-name {
  font-family: var(--display);
  font-size: 20px;
  line-height: 1.25;
  min-width: 0;
}
.risk-card .risk-sev-chips {
  display: flex;
  gap: 4px;
  align-items: center;
}
.risk-card .sev-chip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 3px;
}
.risk-card .sev-chip.sev   { background: var(--band-3); color: var(--cream); }
.risk-card .sev-chip.lik   { background: var(--cream); color: var(--band-3); box-shadow: inset 0 0 0 1px var(--band-3); }
.risk-card[data-sev="medium"] .sev-chip.sev { background: var(--band-4-ink); color: var(--cream); }
.risk-card[data-sev="medium"] .sev-chip.lik { color: var(--band-4-ink); box-shadow: inset 0 0 0 1px var(--band-4-ink); }
.risk-card[data-sev="low"] .sev-chip.sev { background: var(--band-1); color: var(--cream); }
.risk-card[data-sev="low"] .sev-chip.lik { color: var(--band-1); box-shadow: inset 0 0 0 1px var(--band-1); }
.risk-card p { font-size: 14px; line-height: 1.5; margin: 0; color: var(--ink-2); }
.risk-card .risk-mit {
  background: var(--cream);
  padding: 10px 14px;
  margin-top: 12px;
  border-radius: 3px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: baseline;
}
.risk-card .risk-mit .rm-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
.risk-card .risk-mit p { font-size: 13px; color: var(--ink); }
.risk-card .risk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-size: 12.5px;
  line-height: 1.4;
}
.risk-card .risk-grid > div + div { border-left: 1px solid var(--rule); padding-left: 14px; }
.risk-card .risk-grid dt {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
  margin-bottom: 3px;
}
.risk-card .risk-grid dd { margin: 0; color: var(--ink-2); }

@media (max-width: 720px) {
  .risk-card .risk-head { grid-template-columns: 1fr; }
  .risk-card .risk-grid { grid-template-columns: 1fr; }
  .risk-card .risk-grid > div + div { border-left: 0; padding-left: 0; padding-top: 10px; border-top: 1px solid var(--rule); margin-top: 10px; }
}

/* Risk-matrix dots — clickable */

/* Risk popover — in-page modal */

/* Tech-stack tile */

/* Compact archetype wheel */

/* Validation checklist */
.checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
}
.checklist > li {
  list-style: none;
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
  line-height: 1.5;
}
.checklist > li::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--ink-3);
  border-radius: 3px;
  flex: 0 0 14px;
  margin-top: 4px;
}

@media (max-width: 720px) { .checklist { grid-template-columns: 1fr; } }

/* User flow step table */
table.flow-steps {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
table.flow-steps thead th {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule-strong);
  font-weight: 600;
}
table.flow-steps tbody td {
  padding: 14px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  line-height: 1.45;
}
table.flow-steps tbody td:first-child {
  font-family: var(--display);
  font-size: 24px;
  color: var(--ink-3);
  width: 48px;
  font-style: italic;
}
table.flow-steps tbody td:last-child {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
}

/* User story card */
.story {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.story .story-meta {
  display: flex;
  gap: 10px;
  align-items: center;
}
.story .story-id {
  font-family: var(--mono);
  font-size: 11px;
  background: var(--cream-deep);
  padding: 2px 8px;
  border-radius: 3px;
  color: var(--ink-2);
  font-weight: 500;
  letter-spacing: 0.06em;
}
.story p { margin: 0; font-size: 13.5px; line-height: 1.5; }

/* Feature count tile */

/* Regulatory item */
.reg-item {
  display: grid;
  grid-template-columns: 140px 1fr 100px 140px;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.reg-item:last-child { border-bottom: 0; }
.reg-item .reg-area {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  font-weight: 600;
}
.reg-item .reg-req { font-size: 14px; line-height: 1.5; }
.reg-item .reg-jur {
  font-size: 12px;
  color: var(--ink-2);
}
.reg-item .reg-sev {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}
.reg-item[data-sev="mandatory"]   .reg-sev { color: var(--accent); }
.reg-item[data-sev="recommended"] .reg-sev { color: var(--ink); }

@media (max-width: 720px) {
  .reg-item { grid-template-columns: 1fr; gap: 6px; }
}

/* Build verdict — variant that doesn't show a numeric score */
.verdict[data-mode="status"] .vscore-num {
  font-size: clamp(60px, 8vw, 100px);
}
.verdict[data-mode="status"] .vscore-of {
  font-size: 12px;
  letter-spacing: 0.18em;
}

/* Inline meta strip */
.meta-strip {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-2);
}
.meta-strip strong { color: var(--ink); font-weight: 600; }

/* ---- Tier identity: depth ticks + type treatment (directions B + C) -------------
   ONE rule, four tiers. Two things vary and nothing else:
     B  how far up  → [data-rank] fills n of four ticks
     C  which tier  → .on blooms the name into display italic; the rest stay quiet mono
   Deliberately NO colour: the cold spectrum is the SCORE scale, so a tier owning a hue
   would make colour mean two things at once. Deliberately NO ink plate either — the ink
   surface belongs to the verdict, escalate and closing bands, and the breadcrumb sits
   directly above the verdict band on every page. */
.tier-bar { gap: 12px; }
.tier-bar .tb-step { display: inline-flex; align-items: center; gap: 8px; padding: 0; background: none; border-radius: 0; color: var(--ink-3); text-decoration: none; }
.tier-bar .tb-step.on { background: none; color: var(--ink); font-weight: 400; }
.tier-bar .tb-w { font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); }
.tier-bar .tb-step.on .tb-w { font-family: var(--display); font-style: italic; font-size: 21px; line-height: 1; letter-spacing: normal; text-transform: none; color: var(--ink); }
.tier-bar a.tb-step:hover .tb-w { color: var(--accent-ink); }
/* Four 3px bars on a 5px pitch: 4 bars + 3 gaps = 18px. The fill is the same comb
   clipped to n*5px-2px — 3 / 8 / 13 / 18px for ranks 1–4. */
.tb-tick { position: relative; flex: 0 0 18px; width: 18px; height: 12px; background-image: repeating-linear-gradient(to right, var(--rule-strong) 0 3px, transparent 3px 5px); }
.tb-tick::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--tb-f, 0) * 5px - 2px); background-image: repeating-linear-gradient(to right, var(--ink-3) 0 3px, transparent 3px 5px); }
.tb-step.on .tb-tick::before { background-image: repeating-linear-gradient(to right, var(--accent) 0 3px, transparent 3px 5px); }
[data-rank="1"] { --tb-f: 1; }
[data-rank="2"] { --tb-f: 2; }
[data-rank="3"] { --tb-f: 3; }
[data-rank="4"] { --tb-f: 4; }
/* On the ink surface the comb inverts. */
.on-ink .tb-tick, .esc-band .tb-tick { background-image: repeating-linear-gradient(to right, rgba(244,238,230,0.28) 0 3px, transparent 3px 5px); }
.on-ink .tb-tick::before, .esc-band .tb-tick::before { background-image: repeating-linear-gradient(to right, var(--accent-on-ink) 0 3px, transparent 3px 5px); }
.on-ink .tb-w, .esc-band .tb-w { color: rgba(244,238,230,0.55); }
.on-ink .tb-step.on .tb-w, .esc-band .tb-step.on .tb-w { color: var(--cream); }
@media (max-width: 640px) { .tier-bar { gap: 9px; } .tier-bar .tb-step.on .tb-w { font-size: 18px; } }


/* Tier bar — used on hero of each report tier.
   The per-step appearance is defined by the tier-identity component ABOVE (depth ticks +
   type treatment). The plate-and-pill styling that used to live here was superseded in
   Identity v1.0.3 and removed: it set an --ink background on .tb-step.on, and because it
   sat after the new component in source order it won the cascade and painted ink text on
   an ink plate — the active tier disappeared. Only the container rules remain here. */
.tier-bar {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.tier-bar .tb-arrow {
  color: var(--ink-3);
  opacity: 0.5;
}

/* =================================================== */
/*  Improvement-pass additions                          */
/* =================================================== */

/* Scroll progress bar (very top of page) */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 100;
  pointer-events: none;
}
.scroll-progress .fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width var(--dur-fast) linear;
}

/* Tier nav — replaces .doc-switch in masthead. Full step indicator. */
.tier-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.tier-nav .tier-step {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 7px 14px 6px;
  border-radius: 4px;
  color: var(--ink-3);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.tier-nav .tier-step:hover { color: var(--ink); background: var(--cream-deep); }
.tier-nav .tier-step.on {
  background: var(--ink);
  color: var(--cream);
  font-weight: 600;
}
.tier-nav .tier-step.on:hover { background: var(--ink); color: var(--cream); }
.tier-nav .tier-step.muted {
  color: var(--ink-3);
  opacity: 0.42;
  pointer-events: none;
}
.tier-nav .tier-arrow {
  font-family: var(--display);
  font-size: 18px;
  color: var(--ink-3);
  opacity: 0.4;
  padding: 0 2px;
}
.tier-nav .tier-meta {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex;
  gap: 24px;
  align-items: center;
}
.tier-nav .tier-meta .meta-strong { color: var(--ink); font-weight: 600; }

@media (max-width: 800px) {
  .tier-nav { flex-wrap: wrap; }
  .tier-nav .tier-meta { width: 100%; margin-left: 0; padding-top: 8px; }
  .tier-nav .tier-arrow { display: none; }
}

/* Breath — full-bleed quiet/loud editorial pause */
.breath {
  margin: 96px 0 32px;
  padding: 88px 0;
  background: var(--ink);
  color: var(--cream);
  text-align: center;
}
.breath blockquote.bq {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(36px, 5.4vw, 72px);
  line-height: 1.05;
  margin: 0 auto;
  padding: 0 48px;
  max-width: 1100px;
  border: 0;
  color: var(--cream);
}
.breath cite {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-deep);
  margin-top: 32px;
  font-style: normal;
  opacity: 0.7;
}

/* Risk matrix — 3×3 severity × likelihood */

/* Workbook color bar — full-width strip above each workbook opener */

/* =================================================== */
/*  LAUNCH-tier components                              */
/* =================================================== */

/* Priority — CRITICAL — the headline section card at LAUNCH-tier */
.sec-card[data-prio="critical"] {
  background: var(--ink);
  color: var(--cream);
  border: 0;
  border-left: 6px solid var(--accent);
  padding: 40px 44px;
}
.sec-card[data-prio="critical"] .sec-head h3 {
  color: var(--cream);
}
.sec-card[data-prio="critical"] .sec-prio {
  background: var(--accent);
  color: var(--ink);
}
.sec-card[data-prio="critical"] .label,
.sec-card[data-prio="critical"] .kicker {
  color: var(--cream-deep);
  opacity: 0.7;
}
.sec-card[data-prio="critical"] hr.rule {
  border-top-color: rgba(246, 241, 227, 0.15);
}

/* Launch readiness checklist — two-column Ready / Missing */
.launch-readiness {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 20px;
}
.launch-readiness .lr-col {
  /* A WELL, not a lift. rgba(246,241,227,0.06) raised this panel to #2D3875 and took --band-5 to
     and --accent-on-ink both under AA on the most actionable content in the LAUNCH report
     (ENGINE-42 §4; the four measurements are rows in contrast_audit). Sinking it instead separates
     the panel MORE and returns both tokens to the ratios they were chosen for. Never lighten a
     panel that carries ramp or accent text. */
  background: rgba(0, 0, 0, 0.14);
  padding: 20px 22px;
  border-radius: 4px;
}
.launch-readiness .lr-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 12px;
  display: block;
}
.launch-readiness .lr-col.ready  .lr-label { color: var(--band-5); }
.launch-readiness .lr-col.miss   .lr-label { color: var(--accent); }
.launch-readiness ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.launch-readiness li {
  display: flex;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--cream-deep);
}
.launch-readiness li::before {
  font-family: var(--mono);
  font-weight: 700;
  flex: 0 0 16px;
}
.launch-readiness .ready li::before { content: "✓"; color: var(--band-5); }
.launch-readiness .miss  li::before { content: "✕"; color: var(--accent); }

@media (max-width: 720px) { .launch-readiness { grid-template-columns: 1fr; } }

/* 30-day launch calendar — week tabs + day grid */
.launch-cal {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 24px;
  overflow-x: auto;
}
.launch-cal .lc-tab {
  background: transparent;
  border: 0;
  padding: 10px 16px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  cursor: pointer;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.launch-cal .lc-tab.on {
  color: var(--ink);
  border-bottom-color: var(--accent);
  font-weight: 700;
}
.launch-cal .lc-tab:hover { color: var(--ink); }

.lc-week {
  display: none;
}
.lc-week.on { display: block; }

.lc-week-goal {
  background: var(--cream-deep);
  padding: 14px 18px;
  border-left: 3px solid var(--accent);
  margin-bottom: 20px;
  font-size: 14.5px;
  line-height: 1.5;
}
.lc-week-goal strong {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  margin-right: 8px;
  font-weight: 600;
}

.day-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 900px) { .day-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .day-grid { grid-template-columns: 1fr; } }
.day-cell {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.day-cell .day-label {
  font-family: var(--display);
  font-size: 22px;
  line-height: 1;
  font-style: italic;
  color: var(--ink-2);
}
.day-cell ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  line-height: 1.4;
}
.day-cell ul li {
  padding-left: 14px;
  position: relative;
}
.day-cell ul li::before {
  content: "□";
  position: absolute;
  left: 0;
  color: var(--ink-3);
  font-size: 12px;
}
.day-cell .day-metric {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--accent);
  font-weight: 500;
  border-top: 1px solid var(--rule);
  padding-top: 8px;
}

/* GTM phase card — Pre-launch, Launch week, Sustain */
.gtm-phase {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--ink-3);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gtm-phase[data-phase="1"] { border-top-color: var(--band-2); }
.gtm-phase[data-phase="2"] { border-top-color: var(--band-4); }
.gtm-phase[data-phase="3"] { border-top-color: var(--band-5); }

.gtm-phase .gp-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.gtm-phase .gp-badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 3px;
  background: var(--cream-deep);
  color: var(--ink);
}
.gtm-phase[data-phase="1"] .gp-badge { background: var(--band-2); color: var(--cream); }
.gtm-phase[data-phase="2"] .gp-badge { background: var(--band-4-ink); color: var(--cream); }
.gtm-phase[data-phase="3"] .gp-badge { background: var(--band-5); color: var(--ink); }

.gtm-phase .gp-title {
  font-family: var(--display);
  font-size: 22px;
  line-height: 1.2;
}
.gtm-phase .gp-goal {
  font-family: var(--display);
  font-size: 18px;
  font-style: italic;
  line-height: 1.3;
  color: var(--ink-2);
  border-left: 3px solid var(--accent);
  padding-left: 14px;
}
.gtm-phase .gp-channels {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.gtm-phase ul.gp-actions {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gtm-phase ul.gp-actions li {
  font-size: 13.5px;
  line-height: 1.45;
  padding-left: 22px;
  position: relative;
}
.gtm-phase ul.gp-actions li::before {
  content: "☐";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14px;
  color: var(--ink-3);
}

/* KPI dashboard */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.kpi-tile {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kpi-tile .kpi-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.kpi-tile .kpi-target {
  font-family: var(--display);
  font-size: 24px;
  line-height: 1.15;
  color: var(--ink);
}
.kpi-tile .kpi-status {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
}

/* Iteration trigger card */
.trigger-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--band-3);
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 24px;
  margin-bottom: 10px;
}
.trigger-card[data-prio="critical"] { border-left-color: var(--band-3); }
.trigger-card[data-prio="high"]     { border-left-color: var(--band-4); }
.trigger-card[data-prio="med"]      { border-left-color: var(--band-2); }
.trigger-card .tc-signal {
  font-family: var(--display);
  font-size: 19px;
  line-height: 1.25;
}
.trigger-card .tc-prio {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
  align-self: start;
}
.trigger-card[data-prio="critical"] .tc-prio { color: var(--band-3); }
/* RESPONSE-52 §5 named THIS selector as one of the two examples of the ramp-value-as-text
     defect, and the fix landed on .prio-badge.should and not here. The audit ROW was corrected to
     --band-4-ink and the declaration was not, so the ledger described a fix the stylesheet never
     got (ENGINE-58 §3). Ratios live in PACK-MANIFEST.json, never in this comment. */
.trigger-card[data-prio="high"]     .tc-prio { color: var(--band-4-ink); }
.trigger-card[data-prio="med"]      .tc-prio { color: var(--band-2); }
.trigger-card .tc-action {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.trigger-card .tc-action strong {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-right: 6px;
  font-weight: 700;
}

/* DM swipe file */

.dm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}
.dm-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
/* DM category is nominal (no order) — neutral rail; the text label carries it. (Identity v0.4) */
.dm-card[data-cat="direct"],
.dm-card[data-cat="casual"],
.dm-card[data-cat="credibility"],
.dm-card[data-cat="referral"]    { border-left: 4px solid var(--rule-strong); }

.dm-card .dm-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.dm-card .dm-cat {
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--cream);
  font-weight: 700;
}
.dm-card[data-cat="direct"]      .dm-cat,
.dm-card[data-cat="casual"]      .dm-cat,
.dm-card[data-cat="credibility"] .dm-cat,
.dm-card[data-cat="referral"]    .dm-cat { background: var(--cream-deep); color: var(--ink); }

.dm-card .dm-msg {
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.35;
  color: var(--ink);
  padding: 10px 14px;
  background: var(--cream);
  border-radius: 4px;
}
.dm-card .dm-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.dm-card .dm-meta .char-count strong { color: var(--ink); font-weight: 600; }
.dm-card .dm-best { font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.dm-card .dm-best strong {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
}

/* Pill badge — small label chip */
.pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--cream-deep);
  color: var(--ink);
  font-weight: 600;
}
.pill.pill-reddit   { background: var(--brand-reddit); color: white; }
.pill.pill-email    { background: var(--ink); color: var(--cream); }

/* Carried-from strip — for sections demoted to reference in LAUNCH */
.carried {
  background: var(--cream-deep);
  border: 0;
  padding: 18px 22px;
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 20px;
  align-items: baseline;
}
.carried .cr-from {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
}
.carried .cr-name {
  font-family: var(--display);
  font-size: 22px;
  line-height: 1.15;
}
.carried .cr-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.carried a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
@media (max-width: 720px) {
  .carried { grid-template-columns: 1fr; }
}

/* Day Zero banner for LAUNCH hero */

/* When a workbook has a color bar, dial the bottom border back */

/* Economics narrative — paired pair */


/* ---------------------------------------------------------------------- */
/*  Comment-pass additions (Alina r1)                                     */
/* ---------------------------------------------------------------------- */

/* Competitor link styling */

/* Feasibility score — a more prominent display */
.feas {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
  padding: 4px 10px 5px;
  background: var(--cream-deep);
  border-radius: 4px;
}

/* Conclusion / closing card */
.closing {
  background: var(--ink);
  color: var(--cream);
  padding: 56px 64px;
  margin: 88px 0 32px;
}
.closing h2 {
  color: var(--cream);
  margin-top: 14px;
  font-style: italic;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
}
.closing p { font-size: 17px; color: var(--cream-deep); line-height: 1.55; max-width: 720px; margin-top: 18px; }
@media (max-width: 800px) {
  .closing { padding: 40px 28px; }
}

/* Expandable details — generic open/closed pattern */

/* Flow tabs */


/* ---------------------------------------------------------------------- */
/*  LAUNCH v2 components                                                  */
/* ---------------------------------------------------------------------- */

/* 30-day calendar grid — month view, all weeks visible */

/* Trust confidence dial */

/* Evidence card */

/* Messaging pillars */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.pillar-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--ink);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pillar-card:nth-child(1) { border-top-color: var(--ink); }
.pillar-card:nth-child(2) { border-top-color: var(--ink-2); }
.pillar-card:nth-child(3) { border-top-color: var(--ink-3); }
.pillar-card h4 {
  font-family: var(--display);
  font-size: 24px;
  line-height: 1.15;
  margin: 0;
}
.pillar-card ul {
  padding-left: 18px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
}
.pillar-card ul li { margin-bottom: 4px; }

/* Headline grid */

/* Word-choice columns */
.words {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
/* words.html emits .label, never an <h5> — the h5 selector was unreachable from the one partial
   that draws this block (§0q), and --band-5 as small text on cream never cleared AA either. */
.words .words-do .label { color: var(--band-5-ink); }
.words .words-dont .label { color: var(--band-3); }
.words ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.words ul li {
  padding: 4px 10px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
}
.words .words-do ul li { background: var(--cream-deep); color: var(--ink); }
.words .words-dont ul li { background: transparent; color: var(--ink-3); text-decoration: line-through; box-shadow: inset 0 0 0 1px var(--rule-strong); }

/* Landing page variant preview */

/* Social post cards */
.social-post {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
}
.social-post[data-net="linkedin"] { border-top: 3px solid var(--brand-linkedin); }
.social-post[data-net="twitter"]  { border-top: 3px solid var(--brand-twitter); }
.social-post[data-net="instagram"] { border-top: 3px solid var(--brand-instagram); }
.social-post .sp-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Channel rank card */

/* Strategic roadmap quarterly timeline */

/* Series-A milestone banner */

/* Pitch deck slide strip */

/* Bridge — single strip carrying multiple workbooks */


/* ---------------------------------------------------------------------- */
/*  Recommendation pass — tints, today cell, KPI colors, mini-cards       */
/* ---------------------------------------------------------------------- */

/* Quick field card — tone tints */

/* Verdict-band ETA chip (small, inside the bullets row) */

/* LAUNCH calendar — TODAY cell highlight with pulse */

/* KPI status — score spectrum coloring */
.kpi-tile .kpi-status[data-state="red"]    { color: var(--band-3); font-weight: 700; }
.kpi-tile .kpi-status[data-state="orange"] { color: var(--band-4-ink); font-weight: 700; }
.kpi-tile .kpi-status[data-state="sun"]    { color: var(--band-5-ink); font-weight: 700; }
.kpi-tile .kpi-status[data-state="ink"]    { color: var(--ink); font-weight: 600; }

/* Bridge mini-card with takeaways */

/* Pivot Switch icon — applied to MAP's pivot cards via data-kind */

/* Social post copy button */
.social-post {
  position: relative;
}

/* Pitch deck download CTA */


/* ---------------------------------------------------------------------- */
/*  Theme tweak — Night mode + flexible body font size                    */
/* ---------------------------------------------------------------------- */

body[data-theme="night"] {
  --accent-ink:  #FF6A52;
  --cream:       #202C6E;
  --cream-deep:  #2A325A;
  --paper:       #232C53;
  --ink:         #FBF9F0;
  --ink-2:       #D6D2C0;
  --ink-3:       #9A99A8;
  --rule:        rgba(252, 249, 238, 0.14);
  --rule-strong: rgba(252, 249, 238, 0.30);
}
body[data-theme="night"] ::selection { background: var(--ink); color: var(--cream); }
body[data-theme="night"] .masthead { background-color: rgba(32, 44, 110, 0.94); }
body[data-theme="night"] .verdict { background: #0E1430; }
/* No per-tone night overrides: the band is one surface on every tone now, so three selectors that
   re-coloured it were re-introducing the retired nominal scale in the one theme nobody proofs. */
body[data-theme="night"] .closing { background: #0E1430; }
body[data-theme="night"] .breath { background: #0E1430; }

body[data-theme="night"] .pill.pill-reddit,
body[data-theme="night"] .pill.pill-email { color: #FBF9F0; }

/* Flexible body font size */
body[data-font-size="s"] { --fs-body: 15px; }
body[data-font-size="l"] { --fs-body: 19px; }
body { font-size: var(--fs-body); }

/* Tweak panel — preserve in dark mode */

/* Hero triptych — scenario runs long, so it gets half the row (Identity v1.0.1) */
.hero-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 24px; } }