/* ═════════════════════════════════════════════════════════════
   procurement-platform.css — "Public Procurement Support SaaS" case study.
   Loaded by case-05-procurement-platform.html (renumbers to 001 at wire-in).

   Content-based slug (position-independent, like logitech.css / fior.css /
   urbs.css / meta-case.css). The case is the portfolio's most comprehensive,
   so it reuses patterns from ALL four prior cases, consolidated here:
     · cs-hero family + back-link + sections      → logitech.css / meta-case.css
     · .overview / .overview-item                 → shared case-study.css (not copied)
     · .media-frame / .classified-frame           → shared case-study.css (not copied)
     · .flow-grid / .flow-card                    → urbs.css (+ E.1 additions below)
     · .discipline-grid / scale-panel             → logitech.css
     · .ds-* design-system exhibits               → meta-case.css   (added when going wide)
     · .ds-showcase / .token-flow / .verdict-ladder / .ds-ramp → fior.css (added when going wide)
     · .metrics-table                             → urbs.css        (added when going wide)
     · .classified-section / .classified-card     → logitech.css    (added when going wide)

   Case-05-specific additions (become DS components after the build):
     · .flow-law            — per-card legal-basis micro-line on the flow diagram (E.1)
     · .flow-card.is-covered — marks the phases the platform directly covers (E.1)
     · .persona-* / cyclical-ADR SVG / focus-ring annotated spec → added when going wide

   Depends on: global.css, case-study.css, lightbox.css.
   Uses Quiet Console tokens ONLY (--accent #00E87A, etc.) — never the product
   tokens. Family-accent hexes shown later are swatch CONTENT, not site chrome.
   ═════════════════════════════════════════════════════════════ */

/* Case-05-local token — shared tokens live in global.css / case-study.css */
:root {
  --classified-red: #FF3333;
  /* more generous vertical rhythm; default in global.css is 3rem (cramped
     for a senior portfolio case), bump to 5rem so EVERY section transition and
     internal block uses the same wider scale. Affects this case only. */
  --cs-section-gap: 5rem;
}

/* ═══ CASE STUDY OVERRIDES ═══ */
.case-study { position: relative; z-index: 1; }
/* apply the bumped --cs-section-gap to every section's padding so the rhythm is
   visible BETWEEN sections, not just inside the .ov2-top block that uses it. */
.case-study main > section.cs-section { padding-top: var(--cs-section-gap); padding-bottom: var(--cs-section-gap); }

/* the .classified-section is now CREAM (// 04 flip), so the cream-to-dark
   compensation that used to sit before it is no longer needed: A11Y // 03 (cream)
   now meets Classified // 04 (cream) as a normal cream-to-cream transition. The
   dark beat moved to the Reflection // 05 below. (Rule removed; was: 2× pb on the
   section preceding .classified-section.) */

/* ═══ BACK LINK ═══ */
.back-link {
  max-width: var(--cs-content-max); margin: 0 auto;
  padding: 1.25rem var(--cs-gutter) 0;
  font-family: var(--f-mono); font-size: 0.68rem;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.back-link a { color: var(--accent-on-light); text-decoration: none; transition: color 0.2s; }
.back-link a:hover { color: var(--ink); }

/* ═══ HERO ═══ */
.cs-hero {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 5rem;
  align-items: start;
  padding: 2.5rem var(--cs-gutter) var(--cs-section-gap);
  max-width: var(--cs-content-max); margin: 0 auto;
  position: relative; overflow: hidden;
}
.cs-hero-content { display: flex; flex-direction: column; }
.cs-hero-visual {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.5rem;
}

.cs-hero-number {
  font-family: var(--f-mono); font-size: 0.68rem; color: var(--accent-on-light);
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: var(--cs-element-gap); opacity: 0;
  animation: slideUp 0.8s var(--ease) 0.1s forwards;
}
.cs-hero-title {
  font-family: var(--f-display); font-size: clamp(2rem, 3.5vw, 3.5rem);
  font-weight: 700; line-height: 1.05; margin-bottom: var(--cs-element-gap);
  letter-spacing: 0.05em; text-transform: uppercase;
  opacity: 0; animation: slideUp 0.8s var(--ease) 0.2s forwards;
}
.cs-tags {
  display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: var(--cs-inner-gap);
  opacity: 0; animation: slideUp 0.8s var(--ease) 0.3s forwards;
}
.cs-tag {
  font-family: var(--f-mono); font-size: 0.62rem; padding: 0.5rem 1rem;
  border: 1px solid var(--ink); border-radius: 0;
  text-transform: uppercase; letter-spacing: 0.18em;
  transition: all 0.3s var(--ease);
}
.cs-tag:hover { background: var(--ink); color: var(--bg); }
.cs-hero-description {
  font-family: var(--f-body); font-size: 1rem; line-height: 1.8;
  font-weight: 300;
  margin-bottom: var(--cs-inner-gap); max-width: 600px;
  opacity: 0; animation: slideUp 0.8s var(--ease) 0.4s forwards;
}
.cs-hero-meta {
  display: grid; grid-template-columns: repeat(4, auto);
  justify-content: start;
  gap: 0.5rem 2.5rem;
  opacity: 0; animation: slideUp 0.8s var(--ease) 0.5s forwards;
}
.cs-meta-item { font-family: var(--f-mono); }
.cs-meta-label {
  color: var(--accent-on-light); text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 0.58rem; margin-bottom: 0.35rem; display: block;
}
.cs-meta-value {
  color: var(--ink); font-size: 0.75rem; letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Hero classified frame — production UI withheld. Uses the shared
   .media-frame.classified-frame pattern; this caption + sizing is the only
   case-local styling. The frame's red hatch + brackets + hover glow are
   defined in case-study.css. */
.cs-hero-visual .media-frame { width: 100%; }

@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══ SECTIONS ═══ */
.cs-section {
  max-width: var(--cs-content-max); margin: 0 auto;
  padding: var(--cs-section-gap) var(--cs-gutter);
  position: relative;
}
.cs-section-label {
  position: absolute; left: 16px; top: 50%;
  translate: 0 -50%;
  font-family: var(--f-mono); font-size: 0.58rem;
  text-transform: uppercase; letter-spacing: 0.22em; color: var(--ink-dim);
  writing-mode: vertical-rl; transform: rotate(180deg);
  pointer-events: none;
}
.cs-section-label.is-accent { color: var(--accent-on-light); }

.cs-section-title {
  font-family: var(--f-display); font-size: 2rem; font-weight: 700;
  margin-bottom: 0.5rem; padding-left: 3rem;
}
.cs-section-intro {
  font-family: var(--f-body); font-size: 1rem; line-height: 1.8;
  color: var(--ink-mid); margin-bottom: var(--cs-section-gap);
  padding-left: 3rem; font-weight: 300; max-width: 880px;
}
.cs-section-intro strong { color: var(--ink); font-weight: 500; }

/* ═══ OVERVIEW v2 (rebalanced) — ORDERED + filled, no voids (mirror the
   siblings' structured columns). Row 1: the hook + the "system ✕ screens" figure
   (Act 1 of the diptych — the system and the screens, never connected). Row 2: the
   three framings in an aligned 3-col grid. Act 2 (DS section) connects them. ═══ */
.ov2-top {
  display: grid; grid-template-columns: 1fr; gap: var(--cs-inner-gap);
  padding-left: 3rem; margin: var(--cs-section-gap) 0; align-items: center;
}
.ov2-lead {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.8rem, 3.4vw, 2.85rem); line-height: 1.15; letter-spacing: 0.01em;
  color: var(--ink); max-width: 28ch; margin: 0; text-wrap: balance;
}
.ov2-lead em { color: var(--accent-on-light); font-style: normal; }
.ov2-fig { align-self: center; }
.ov2-svg { width: 100%; height: auto; display: block; max-width: none; }
.ov2-z { font-family: var(--f-mono); font-size: 8px; letter-spacing: 0.16em; fill: var(--ink-dim); }
.ov2-x { font-family: var(--f-mono); font-size: 13px; fill: var(--ink-mid); }

/* ── THE SEVER — kinetic thesis. DEFAULT (no .anim / no-JS / reduced-motion)
   = final severed state: strand hidden, stubs + ✕ shown. JS adds .anim
   (start: strand drawable+hidden-by-dash, stubs/✕ hidden, stubs pulled to centre),
   then .drawing (strand draws L→R, 0.6s), then .severed (strand dies, stubs recoil
   out + ✕ flickers in). Sharp ease, NO bounce. ── */
.ov2-strand { opacity: 0; fill: none; stroke: var(--accent-on-light); stroke-width: 1.6; }
.ov2-fig.anim .ov2-strand { opacity: 1; stroke-dasharray: 164; stroke-dashoffset: 164; }
.ov2-fig.anim.drawing .ov2-strand { transition: stroke-dashoffset 0.6s var(--ease); stroke-dashoffset: 0; }
.ov2-fig.anim.severed .ov2-strand { opacity: 0; transition: opacity 0.16s linear; }
.ov2-fig.anim .ov2-stub { opacity: 0; }
.ov2-fig.anim .ov2-stub-l { transform: translateX(26px); }
.ov2-fig.anim .ov2-stub-r { transform: translateX(-26px); }
.ov2-fig.anim.severed .ov2-stub {
  opacity: 1; transition: opacity 0.2s linear, transform 0.22s var(--ease);
}
.ov2-fig.anim.severed .ov2-stub-l,
.ov2-fig.anim.severed .ov2-stub-r { transform: translateX(0); }
.ov2-fig.anim .ov2-x { opacity: 0; }
.ov2-fig.anim.severed .ov2-x { opacity: 1; transition: opacity 0.2s linear; }

.ov2-fig-label {
  font-family: var(--f-mono); font-size: 0.55rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-dim); margin-top: 0.7rem;
  text-align: center;
}
.ov2-fig-label b { color: var(--ink-mid); font-weight: 400; }
/* Row 2 = the shared black overview cards (.overview / .overview-item, case-study.css).
   Only a scoped emphasis rule is needed: on the dark card, <strong> must read BRIGHTER
   (cream), never the dark --ink the light-bg cards would use. */
.overview-item p strong { color: var(--bg); font-weight: 500; }
@media (min-width: 900px) {
  /* 50/50 split — at vw 1304 this gives each column ~545px. The lead naturally
     breaks in 3 lines (was 5 before the rhythm bump), and the SEVER fig
     can fill its full 545px column with the widened svg max-width below. */
  .ov2-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; }
}
@media (max-width: 1024px) {
  .ov2-top { padding-left: 0; }
}

/* ═══ INTERNAL-PHASE RIBBON — E.1 (interactive artifact chain) ═══════════════
   Mobile-FIRST: vertical spine of tappable phases → horizontal "panorama" ribbon
   on desktop (≥900px). Re-skin of the Discovery [01] Domain artifact-chain
   with a DIFFERENT function: a fast panorama of how a
   Brazilian licitação works, its complexity, and where the platform acts.
   Coverage model (Rico): the product covers object-spec → price-map; DFD/ETP
   are upstream (not covered); legal + authorisation are internal-but-outside;
   tender notice is the external phase. The Discovery dossier (linked) carries the
   probative version; this one is the reader's orientation. */

/* --rail-x = single source of truth for the spine/dot centre axis (fix).
   Symmetric L/R gutter (the flush-right sin). */
.proc { padding-left: 3rem; padding-right: 3rem; --rail-x: 13px; }

/* figure caption — mirrors the probative capstrip, Quiet Console mono */
.proc-cap {
  font-family: var(--f-mono); font-size: 0.55rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-dim);
  display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; align-items: baseline;
  padding-bottom: 0.65rem; margin-bottom: 1.4rem;
  border-bottom: 1px solid rgba(8, 8, 8, 0.12);
}
.proc-cap .t { color: var(--accent-on-light); font-weight: 700; }
.proc-cap .r { margin-left: auto; }

/* legend (mobile shows it inline; desktop uses spanning brackets instead) */
.proc-legend {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem;
  font-family: var(--f-mono); font-size: 0.52rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-mid);
  margin-bottom: 1.25rem;
}
.proc-legend span { display: inline-flex; align-items: center; gap: 0.45rem; }
.proc-legend i { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.proc-legend .lg-cov  { background: var(--accent-on-light); }
.proc-legend .lg-out  { background: var(--bg); border: 1.5px dashed var(--ink-mid); }
.proc-legend .lg-up   { background: var(--bg); border: 1.5px solid var(--ink-dim); }

/* zone bracket labels (desktop only) */
.proc-zones { display: none; }

/* TRACK — mobile: vertical stack */
.proc-track {
  display: grid; grid-template-columns: 1fr; gap: 0;
  position: relative; margin-bottom: var(--cs-inner-gap);
}

/* NODE — a tappable phase */
.proc-node {
  appearance: none; -webkit-appearance: none; background: none; border: 0;
  font-family: inherit; color: inherit; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: calc(var(--rail-x) * 2) 1fr; align-items: start;
  column-gap: 0.85rem; padding: 0.8rem 0; position: relative;
  border-top: 1px solid rgba(8, 8, 8, 0.08);
  transition: background 0.2s var(--ease);
}
.proc-node:first-child { border-top: 0; }
/* vertical spine behind the dots — 1.5px neutral, centred on --rail-x */
.proc-node::before {
  content: ''; position: absolute; left: calc(var(--rail-x) - 0.75px); top: 0; bottom: 0;
  width: 1.5px; background: rgba(8, 8, 8, 0.14);
}
.proc-node:first-child::before { top: 1.45rem; }
.proc-node:last-child::before  { height: 1.45rem; bottom: auto; }
.proc-dot {
  grid-row: 1; grid-column: 1; justify-self: center; margin-top: 0.2rem;
  position: relative; z-index: 1;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--ink-dim);
  box-shadow: 0 0 0 4px var(--bg);
}
.proc-name {
  grid-row: 1; grid-column: 2;
  font-family: var(--f-display); font-size: 1rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink);
  line-height: 1.15;
}
.proc-sub {
  /* bumped 0.55→0.7rem to clear the mono-cap legibility floor
     (~11px). The .pax-mark-role on the Personas axis mirrors this size for
     sibling consistency — [[feedback-generalize-fixes-across-siblings]]. */
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.1em;
  color: var(--ink-dim); display: block; margin-top: 0.22rem;
}
.proc-tag {
  grid-row: 2; grid-column: 2; margin-top: 0.3rem;
  font-family: var(--f-mono); font-size: 0.55rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-dim);
  text-align: left; white-space: nowrap;
}

/* coverage states */
.proc-node.is-covered  .proc-dot { background: var(--accent-on-light); border-color: var(--accent-on-light); }
.proc-node.is-outside  .proc-dot { border-style: dashed; border-color: var(--ink-mid); }
.proc-node.is-upstream .proc-dot { border-color: var(--ink-dim); }
.proc-node.is-planned  .proc-dot { border-style: dashed; }
.proc-node.is-covered  .proc-tag { color: var(--accent-on-light); }
/* VALUE-RECESSION: non-covered nodes recede so the covered run emerges by
   contrast. Covered = full ink, flagship = phosphor (below), the rest = dim. */
.proc-node.is-upstream .proc-name,
.proc-node.is-outside  .proc-name,
.proc-node.is-external .proc-name { color: var(--ink-dim); }
/* colour the covered spine GREEN (the coverage signal carried by colour + the
   value-recession + the footprint bracket; orientation-safe, no width gymnastics).
   ::before is the segment leading INTO each node; the first covered node keeps a
   neutral incoming segment (the boundary). */
.proc-node.is-covered::before { background: var(--accent-on-light); }
.proc-node.is-covered-start::before { background: rgba(8, 8, 8, 0.14); }
/* flagship — phosphor ring + core dot (mirrors the probative orange HOT node) */
.proc-node.is-flagship .proc-dot {
  width: 17px; height: 17px; margin-top: 0.08rem;
  background: var(--bg); border: 2.4px solid var(--accent-on-light);
}
.proc-node.is-flagship .proc-dot::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent-on-light);
}
.proc-node.is-flagship .proc-name { color: var(--accent-on-light); }

/* interaction states */
.proc-node:hover .proc-name { color: var(--accent-on-light); }
.proc-node[aria-selected="true"] { background: rgba(8, 8, 8, 0.035); }
.proc-node[aria-selected="true"] .proc-dot { box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px rgba(0,140,80,0.35); }
.proc-node:focus-visible { outline: 2px solid var(--accent-on-light); outline-offset: 2px; border-radius: 2px; }

/* ─── SIGNATURE MOMENT 1b — the covered run DRAWS L→R on scroll-in (desktop),
   then the footprint fades up and the flagship ring pulses once. The chain
   assembles itself. No-JS / reduced-motion → everything is already in its final
   drawn state (the JS only adds .anim-armed when motion is allowed). ─── */
.proc-footprint { transition: opacity 0.6s var(--ease) 0.85s; }
.proc.anim-armed .proc-footprint { opacity: 0; }
.proc.anim-drawn .proc-footprint { opacity: 1; }
/* procFlagPulse keyframe removed (motion-cleanup, 4/4 unanimous).
   "Orange marks; it does not act — but the pulse made it act." The plate's
   argument is identical symmetry across 7 minis; the pulse contradicted that
   argument. Static orange mark; no pulse. */
@keyframes procScanSweep {
  0%   { opacity: 0; transform: translateX(0); }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateX(var(--proc-track-w, 880px)); }
}
@media (min-width: 900px) {
  .proc-node.is-covered::before { transition: transform 0.9s var(--ease); transform-origin: left center; }
  .proc.anim-armed .proc-node.is-covered::before { transform: scaleX(0); }
  .proc.anim-drawn .proc-node.is-covered::before { transform: scaleX(1); }
  /* flagship-mark pulse removed (motion-cleanup, 4/4 unanimous) */
}

/* external phase set apart by a dashed boundary */
.proc-node.is-external { margin-top: 0.7rem; padding-top: 1.1rem; }
.proc-node.is-external::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  border-top: 1px dashed rgba(8, 8, 8, 0.22);
}

/* DETAIL PANEL — shared, updates on selection (aria-live) */
.proc-detail {
  border-top: 1px solid var(--ink); padding-top: 1.25rem; margin-top: 0.4rem;
}
.proc-detail-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.85rem;
  margin-bottom: 0.65rem;
}
.proc-detail-name {
  font-family: var(--f-display); font-size: 1.3rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); line-height: 1;
}
.proc-detail-status {
  font-family: var(--f-mono); font-size: 0.52rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-dim);
  border: 1px solid rgba(8, 8, 8, 0.2); padding: 0.25rem 0.6rem;
}
.proc-detail[data-status="covered"] .proc-detail-status { color: var(--accent-on-light); border-color: rgba(0, 140, 80, 0.4); }
.proc-detail-body {
  font-family: var(--f-body); font-size: 0.95rem; line-height: 1.7;
  color: var(--ink-mid); font-weight: 300; max-width: 68ch;
}
.proc-detail-body strong { color: var(--ink); font-weight: 500; }
.proc-detail-law {
  font-family: var(--f-mono); font-size: 0.55rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-dim); margin-top: 0.85rem;
}

/* ═══ CARD A — CONTEXT READOUT — black scale band above Fig.01 ═══════════
   Asymmetric console gauge, NOT a 4-tile stat banner: ONE dominant phosphor number
   + three supporting LINEN values on a hairline + a 9-cell coverage micro-bar (4
   lit) that previews the ribbon below — the micro→macro trailer. Lifted by surface
   + corner brackets, never shadow (flat-by-default). Sits inside _CONTEXT, after the
   intros, before the ribbon. */
/* Card A — type ladder + container scale at large viewports (3-lens synth).
   Before: 374M 80px (cap) vs supports 23.2px FIXED → ratio 0.29, kicker 8.8px
   (below ~17px floor), card 1304×331 with 32px padding ballooning past 1500.
   After: card capped 1320, fluid padding/gap/type, supports clamp 25.6→40.6→44,
   kicker/labels/head 11.5→13.6 (mono-cap floor), gloss 15.2→18.4 (body floor).
   HOLD 374M at 5rem cap — Q1 "reads as a number, not a logo." */
.ctx-readout {
  background: var(--ink); color: var(--bg);
  max-width: 1320px; margin: 0 auto calc(var(--cs-inner-gap) + 0.5rem);
  padding: clamp(1.85rem, 1.1rem + 1.3vw, 2.85rem)
           clamp(1.85rem, 1.1rem + 1.7vw, 3.25rem);
  position: relative;
}
.ctx-readout::before, .ctx-readout::after {
  content: ''; position: absolute; width: 16px; height: 16px; pointer-events: none;
}
.ctx-readout::before { top: 9px; left: 9px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.ctx-readout::after  { bottom: 9px; right: 9px; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); }
.ctx-readout-head {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1rem;
  font-family: var(--f-mono); font-size: clamp(0.72rem, 0.6rem + 0.22vw, 0.85rem);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim);
  margin-bottom: clamp(1.5rem, 1.1rem + 0.8vw, 2.25rem);
}
.ctx-readout-head .l { color: var(--accent); }
.ctx-readout-body { display: grid; grid-template-columns: 1fr; gap: 1.75rem; align-items: end; }
.ctx-hero-stat { display: flex; flex-direction: column; gap: 0.4rem; }
.ctx-stat-kick {
  font-family: var(--f-mono); font-size: clamp(0.72rem, 0.6rem + 0.22vw, 0.85rem);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-on-dark);
}
.ctx-stat-big {
  font-family: var(--f-display); font-weight: 700; line-height: 0.82;
  font-size: clamp(3rem, 1.6rem + 4.2vw, 5rem); color: var(--accent); letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.ctx-stat-gloss {
  font-family: var(--f-body); font-size: clamp(0.95rem, 0.82rem + 0.32vw, 1.15rem);
  font-weight: 300; color: var(--ink-on-dark); line-height: 1.45; max-width: 32ch;
}
.ctx-stat-grid { display: grid; grid-template-columns: 1fr; }
.ctx-stat {
  padding: clamp(0.9rem, 0.65rem + 0.55vw, 1.35rem) 0;
  border-top: 1px solid rgba(240, 237, 232, 0.12);
}
.ctx-stat:first-child { border-top: 0; }
.ctx-v {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.6rem, 0.55rem + 2vw, 2.75rem);
  color: var(--bg); line-height: 0.95; display: block; margin-bottom: 0.55rem;
  font-variant-numeric: tabular-nums;
}
.ctx-l {
  font-family: var(--f-mono); font-size: clamp(0.72rem, 0.6rem + 0.22vw, 0.85rem);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-on-dark);
  display: block; line-height: 1.5;
}
/* coverage micro-bar — the ribbon trailer (4 of 9 lit phosphor) */
.ctx-pips {
  display: flex; max-width: clamp(240px, 17vw, 340px);
  gap: clamp(3px, 0.2vw, 5px); margin-top: clamp(0.7rem, 0.5rem + 0.35vw, 1rem);
}
.ctx-pips i {
  flex: 1; height: clamp(6px, 0.38vw, 9px); background: rgba(240, 237, 232, 0.14);
  transition: background 0.35s var(--ease);
}
.ctx-pips i.on { background: var(--accent); }

/* ── CARD A pip-ignition (→ trimmed) — on scroll-in the 9-pip bar
   IGNITES its 4 lit cells L→R as a single coverage-sweep beat. JS adds
   .boot-armed (start state where pips are dim) then per-cell .lit. Brackets
   stay at their default full state (brackets-draw removed Fork 1B). The
   374M number is a static text (count-up removed). No-JS / reduced →
   final state (pips already lit via .ctx-pips i.on default). */
.ctx-readout.boot-armed .ctx-pips i.on { background: rgba(240, 237, 232, 0.14); }
.ctx-readout.boot-armed .ctx-pips i.on.lit { background: var(--accent); }

@media (min-width: 760px) {
  .ctx-readout-body {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2.25rem, 1.2rem + 2.4vw, 4.25rem);
    align-items: stretch;
  }
}

/* ═══ MOBILE ACCORDION — the shared #proc-detail moves under the selected
   node on mobile so the change is always under the thumb (far-panel fix). On
   desktop the panel stays after the track (its authored slot). */
@media (max-width: 899px) {
  /* indented under the node's NAME column (rail + gap), hairline top — no side-stripe */
  #proc-detail.is-inline {
    border-top: 1px solid rgba(8, 8, 8, 0.12);
    margin: 0.3rem 0 0.5rem calc(var(--rail-x) * 2 + 0.85rem);
    padding: 0.85rem 0 0.4rem; grid-column: 1 / -1;
  }
}

/* ─── DESKTOP — horizontal panorama ribbon ─── */
@media (min-width: 900px) {
  .proc-legend { display: none; }

  /* zone brackets above the ribbon */
  .proc-zones {
    display: grid; grid-template-columns: 1fr; position: relative;
    margin-bottom: 0.4rem; height: 1.6rem;
  }
  .proc-zone {
    font-family: var(--f-mono); font-size: 0.55rem; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ink-dim); position: absolute; bottom: 0;
    display: flex; align-items: flex-end; padding-bottom: 0.35rem;
  }
  .proc-zone::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    height: 6px; border: 1px solid rgba(8, 8, 8, 0.18);
    border-bottom: 0;
  }
  .proc-zone.is-internal { left: 0; width: calc(100% / 9 * 8 - 0.5rem); }
  .proc-zone.is-external { right: 0; width: calc(100% / 9 - 0.5rem); justify-content: flex-end; }

  .proc-track {
    grid-template-columns: repeat(9, 1fr); column-gap: 0;
    margin-bottom: 0.5rem;
  }
  /* SCAN-SWEEP (the odradek) — a phosphor scan-line travels L→R across the
     9-node track on scroll-in; the covered-run green draw (scaleX, already built)
     reads as its WAKE. One-shot on .anim-drawn, never loops. JS sets --proc-track-w
     to the live track width so translateX lands exactly at the right edge.
     Reduced-motion / no-JS → no .anim-drawn → the line never appears. */
  .proc-track::after {
    content: ''; position: absolute; z-index: 3; pointer-events: none;
    top: 1.55rem; height: 2.5rem; left: 0; width: 2px;
    background: linear-gradient(to bottom, transparent, var(--accent-on-light) 28%, var(--accent-on-light) 72%, transparent);
    box-shadow: 0 0 7px 1px rgba(0, 140, 80, 0.45);
    opacity: 0;
  }
  .proc.anim-drawn .proc-track::after { animation: procScanSweep 1.05s var(--ease) 0.1s 1; }
  .proc-node {
    grid-template-columns: 1fr; row-gap: 0; align-items: stretch; justify-items: center;
    text-align: center; padding: 2.3rem 0.5rem 0; border-top: 0;
  }
  .proc-node:first-child { border-top: 0; }
  /* horizontal connector through the dots */
  .proc-node::before {
    left: -50%; right: 50%; top: calc(2.3rem + 6.5px); bottom: auto;
    width: auto; height: 2px;
  }
  .proc-node:first-child::before { display: none; }
  .proc-node.is-external::before { display: none; }   /* gap before external */
  .proc-node.is-external { margin-top: 0; padding-top: 2.3rem; }
  .proc-node.is-external::after { display: none; }
  .proc-dot { grid-row: auto; grid-column: auto; margin: 0 0 0.7rem; }
  .proc-name { grid-row: auto; grid-column: auto; font-size: 0.82rem; }
  .proc-sub { font-size: 0.7rem; } /* bump — clears the mono-cap floor across both breakpoints (sibling consistency with the Personas axis .pax-mark-role) */
  .proc-tag {
    grid-row: auto; grid-column: auto; text-align: center; margin-top: 0.5rem;
    white-space: normal; max-width: 9ch;
  }
  .proc-node[aria-selected="true"] { background: none; }
  .proc-node[aria-selected="true"] .proc-name { color: var(--accent-on-light); }

  /* footprint bracket below the covered columns (3rd–6th of 9) */
  .proc-footprint {
    display: block; position: relative; height: 2rem;
    margin: 0.2rem 0 0;
  }
  .proc-footprint span {
    position: absolute; top: 0.4rem;
    left: calc(100% / 9 * 2); width: calc(100% / 9 * 4);
    font-family: var(--f-mono); font-size: 0.56rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--accent-on-light); text-align: center;
    padding-top: 0.45rem;
  }
  .proc-footprint span::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px;
    border: 1px solid rgba(0, 140, 80, 0.45); border-top: 0;
  }
}

/* footprint hidden on mobile (covered phases carry their own tag/colour).
   max-width media (not a bare rule) so it never overrides the ≥900px display:block. */
@media (max-width: 899px) { .proc-footprint { display: none; } }

/* ═══ CONSTRAINTS — E.5 (logitech scale-panel + discipline-grid) ═══ */
.scale-panel {
  background: var(--dark); color: var(--bg);
  margin: 0; max-width: none; padding: calc(var(--cs-section-gap) * 2) var(--cs-gutter);
  position: relative; overflow: hidden;
}
.scale-inner { max-width: var(--cs-content-max); margin: 0 auto; position: relative; }
.scale-title {
  font-family: var(--f-display); font-size: 2rem; font-weight: 700;
  color: var(--bg); margin-bottom: 0.5rem;
}
.scale-subtitle {
  font-family: var(--f-body); font-size: 1rem; line-height: 1.8;
  color: var(--ink-on-dark); margin-bottom: var(--cs-section-gap);
  max-width: 720px; font-weight: 300;
}
.discipline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}
.discipline-card {
  border: 1px solid rgba(240, 237, 232, 0.1);
  padding: 1.5rem; position: relative;
  transition: border-color 0.3s var(--ease);
  overflow: hidden;
}
/*  banned 3px side-stripe ::before deleted — forbidden move.
   Hover now lifts the full 1px border, not a coloured edge bar. */
.discipline-card:hover { border-color: rgba(0, 232, 122, 0.35); }
.discipline-icon {
  font-family: var(--f-mono); font-size: 0.75rem;
  color: var(--accent); letter-spacing: 0.18em;
  text-transform: uppercase; margin-bottom: 0.85rem;
}
.discipline-name {
  font-family: var(--f-display); font-size: 1.4rem;
  font-weight: 600; color: var(--bg); margin-bottom: 0.6rem;
  line-height: 1.2; position: relative;
}
/* DECLASSIFY clearance line — a phosphor underline that draws under each
   constraint name on scroll-in (the // C-0X codes decode via decode.js). Default
   (no-JS / reduced-motion) = already drawn.arm-clear zeroes it; then
   .declassified draws it back, staggered C-01→C-04. Phosphor ignites, then rests. */
.discipline-name::after {
  content: ''; position: absolute; left: 0; bottom: -0.42rem;
  height: 1.5px; width: 38px; background: var(--accent);
}
.scale-panel.arm-clear .discipline-name::after { width: 0; }
/* DECLASSIFY underlines tightened to ~400ms total (motion-cleanup Fork 3A).
   Was: 0.45s transitions w/ delays 0.06/0.18/0.30/0.42 = ~870ms end-to-end.
   Now: 0.20s transitions w/ delays 0/0.06/0.12/0.18 = ~380ms end-to-end. */
.scale-panel.declassified .discipline-card:nth-child(1) .discipline-name::after { transition: width 0.20s var(--ease) 0s;    width: 38px; }
.scale-panel.declassified .discipline-card:nth-child(2) .discipline-name::after { transition: width 0.20s var(--ease) 0.06s; width: 38px; }
.scale-panel.declassified .discipline-card:nth-child(3) .discipline-name::after { transition: width 0.20s var(--ease) 0.12s; width: 38px; }
.scale-panel.declassified .discipline-card:nth-child(4) .discipline-name::after { transition: width 0.20s var(--ease) 0.18s; width: 38px; }
.discipline-desc {
  font-family: var(--f-body); font-size: 0.95rem;
  /* Same fix as .flow-desc — muted body on a dark panel must read (≈9:1). */
  color: var(--ink-on-dark); line-height: 1.6;
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1024px) {
  .cs-hero { grid-template-columns: 1fr; gap: 2rem; }
  .cs-hero-visual { max-width: 600px; }
  .cs-hero-meta { grid-template-columns: repeat(2, auto); }
  .cs-section-label { display: none; }
  .cs-section-title, .cs-section-intro { padding-left: 0; }
  .proc { padding-left: 0; padding-right: 0; }
}
@media (max-width: 768px) {
  :root { --cs-gutter: 1.25rem; }
  .cs-hero { padding: 1.5rem var(--cs-gutter) var(--cs-section-gap); }
  .cs-hero-visual { display: none; }
  .cs-hero-title { font-size: clamp(1.5rem, 7vw, 2rem); }
  .cs-hero-description { max-width: 100%; font-size: 0.9rem; }
  .cs-hero-meta { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .cs-meta-value { white-space: normal; font-size: 0.7rem; }
  .cs-tags { gap: 0.5rem; }
  .cs-tag { font-size: 0.55rem; padding: 0.4rem 0.75rem; letter-spacing: 0.12em; }
  .discipline-grid { grid-template-columns: 1fr; }
}

/* ═══ INTERTÍTULO — full-bleed dark editorial hinge (R3.1).
   The audit verdict that bridges DS Multi-Flow Grid (cream, // 01) into the
   SLAW dark band (// 02 post-R3.2). Reuses the .classified-section /
   .scale-panel full-bleed pattern. Background MUST equal SLAW (R3.2) and the
   governance plate (R3.3) so the three sections butt seamlessly into one
   continuous dark zone — no value-steps at section boundaries.
   Editorial register per V2 council vote: left-aligned audit verdict (NOT
   centered inspirational poster); Rajdhani italic 600/700 (NOT 500/600 —
   500 loses spine on dark); 38ch cap (NOT 28ch — first clause holds one line
   at desktop, "one breath"); 0.6em em margin (NOT 0.25em — proposition and
   interrogation need a beat of silence); -0.005em letter-spacing at desktop
   (NOT +0.01em — tightening italic display reads confident). ═══ */
.cs-intertitulo {
  background: var(--dark);
  margin: 0;
  max-width: none;
  padding: calc(var(--cs-section-gap) * 1.5) var(--cs-gutter);
}

.cs-intertitulo__inner {
  max-width: var(--cs-content-max);
  margin: 0 auto;
}

.cs-intertitulo__line {
  margin: 0;
  max-width: 38ch;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--bg);
  text-align: left;
}

.cs-intertitulo__line em {
  display: block;
  margin-top: 0.35em;
  font-style: italic;
  font-weight: 700;
}

.cs-intertitulo__acc { color: var(--accent); }

@media (min-width: 768px) {
  .cs-intertitulo__line {
    line-height: 1.2;
    letter-spacing: -0.005em;
  }
}

/* Mobile — preserve "alone with the question" at 375.
   Override the inherited 1.5×1.75rem=2.6rem block padding (too tight on
   phones — the question wouldn't feel alone). */
@media (max-width: 767px) {
  .cs-intertitulo {
    padding-block: 3.5rem;
  }
}

/* Cream-to-dark transition compensation (KEEP post-R3.2 — R3.1's "delete"
   note was wrong). DS section is cream and precedes the intertítulo + SLAW
   + (R3.3) plate dark band. The +1.5× pb on the cream side balances the
   value-step. Rule's purpose is THE BOUNDARY, not the band length —
   generalizes regardless of how many sections deep the dark zone runs.
   Tighter (1.5×) than the 2× rule for .classified-section at L48-50 —
   intertítulo is a hinge to pass through, not a destination to park at. */
.case-study main > section.cs-section:has(+ .cs-intertitulo) {
  padding-bottom: calc(var(--cs-section-gap) * 1.5);
}

/* ═══ CLASSIFIED — INSIDE THE REDESIGN — ported from logitech.css with the
   banned ::before diagonal stripes DROPPED and the classifiedPulse INFINITE loops
   REMOVED (nothing loops in the reading viewport). Elevation: the body is REDACTED
   into blacked-out bars that ink in L→R on scroll (the redaction-at-scale IS the
   mark); device-7 colour-semantic status dots; a corner-bracketed dossier cross-ref
   callout with an INERT clearance stamp. ═══ */
/* Classified // 04 flipped to CREAM ground (keeping its cards black), so the
   Reflection // 05 below can go DARK and join the all-dark reflection rhythm without
   butting two dark bands into one void (Rico's call — the section above the reflection
   was the only thing forcing it cream). The cards + the dossier cross-ref box keep an
   explicit dark bg so their dark-calibrated internals (redaction bars, light titles,
   status dots, green brackets, ds-btn) need no recolour; only the three bare header
   texts (title, subtitle, attest) recolour for cream. Reads like the Overview section:
   cream ground, black cards. EXPERIMENTAL — revert if the rhythm doesn't hold. */
.classified-section {
  background: var(--bg); color: var(--ink);
  margin: 0; padding: var(--cs-section-gap) var(--cs-gutter);
  position: relative; overflow: hidden;
}
/* cards + dossier box stay dark boxes on cream (internals unchanged) */
.classified-section .classified-card { background: var(--dark); }
.classified-section .cs-artifact-link { background: var(--dark); }
/* bare header texts recolour for cream (badge red + numeral handled separately) */
.classified-section .classified-title { color: var(--ink); }
.classified-section .classified-subtitle { color: var(--ink-mid); }
.classified-section .cls-attest { color: var(--ink-mid); }
.classified-inner { max-width: var(--cs-content-max); margin: 0 auto; position: relative; }
.classified-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.6rem; }
.classified-badge {
  font-family: var(--f-mono); font-size: 0.6rem; padding: 0.4rem 0.8rem;
  border: 1px solid var(--classified-red, #FF3333); color: var(--classified-red, #FF3333);
  text-transform: uppercase; letter-spacing: 0.18em;
}
.classified-title {
  font-family: var(--f-display); font-size: 2rem; font-weight: 700;
  color: var(--bg); margin-bottom: var(--cs-inner-gap);
}
.classified-subtitle {
  font-family: var(--f-body); font-size: 1rem; line-height: 1.8;
  color: var(--ink-on-dark); margin-bottom: var(--cs-section-gap); max-width: 70ch; font-weight: 300;
}
.classified-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
@media (max-width: 1024px) { .classified-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .classified-grid { grid-template-columns: 1fr; } }
.classified-card {
  border: 1px solid rgba(240, 237, 232, 0.12);
  padding: 1.5rem; position: relative; overflow: hidden;
  transition: border-color 0.3s var(--ease);
}
.classified-card:hover { border-color: rgba(240, 237, 232, 0.28); }
.classified-card-status {
  font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.2em;
  text-transform: uppercase; margin-bottom: 0.9rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.cls-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
/* device-7 colour-semantic status: phosphor-dim → amber → red (peak withholding) */
.cls-content .cls-dot    { background: rgba(0, 232, 122, 0.75); }
.cls-content .classified-card-status { color: rgba(0, 232, 122, 0.85); }
.cls-restricted .cls-dot { background: #E0A93B; }
.cls-restricted .classified-card-status { color: #E0A93B; }
.cls-denied .cls-dot     { background: var(--classified-red, #FF3333); }
.cls-denied .classified-card-status { color: var(--classified-red, #FF3333); }
.cls-denied { border-color: rgba(255, 51, 51, 0.30); }
.classified-card-title {
  font-family: var(--f-display); font-size: 1.05rem; font-weight: 600;
  color: var(--bg); margin-bottom: 1rem; line-height: 1.25;
}
/* redaction-as-mark — body is blacked-out bars (static final state). The L→R
   ink-in animation was removed in motion-cleanup (3/4 lenses): the redaction is a deliberate boundary, not a parlor trick to be staged. */
.cls-redaction { display: flex; flex-direction: column; gap: 0.42rem; margin-bottom: 1.25rem; }
.cls-redaction span {
  display: block; height: 0.7rem; background: rgba(240, 237, 232, 0.16);
  transform-origin: left;
}
.cls-denied .cls-redaction span { background: rgba(255, 51, 51, 0.22); }
.classified-card-footer {
  padding-top: 1rem; border-top: 1px solid rgba(240, 237, 232, 0.1);
  font-family: var(--f-mono); font-size: 0.6rem; color: var(--ink-dim);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.cls-attest {
  margin-top: var(--cs-section-gap); font-family: var(--f-mono);
  font-size: 0.7rem; letter-spacing: 0.1em; color: var(--ink-on-dark);
  line-height: 1.7; max-width: 76ch;
}

/* dossier cross-reference — corner-bracketed mono callout; INERT clearance stamp */
.cs-artifact-link {
  position: relative; display: block; margin-top: calc(var(--cs-inner-gap) + 0.75rem);
  max-width: 660px; padding: 1.6rem 1.85rem;
  border: 1px solid rgba(240, 237, 232, 0.14);
}
.cs-artifact-link::before, .cs-artifact-link::after {
  content: ''; position: absolute; width: 14px; height: 14px; pointer-events: none;
}
.cs-artifact-link::before { top: 8px; left: 8px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.cs-artifact-link::after  { bottom: 8px; right: 8px; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); }
.cs-artifact-kicker {
  display: block; font-family: var(--f-mono); font-size: 0.62rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.7rem;
}
.cs-artifact-body {
  font-family: var(--f-body); font-size: 0.9rem; line-height: 1.65;
  color: var(--ink-on-dark); font-weight: 300; margin: 0 0 1.1rem; max-width: 60ch;
}
.cs-clearance-stamp {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-dim);
  border: 1px solid rgba(240, 237, 232, 0.22); padding: 0.4rem 0.7rem;
  cursor: default;  /* INERT — never a link, no hover-lift, no pointer */
}
.cs-clearance-stamp svg { stroke: var(--ink-dim); }

/* ═══ DS DECODE & GLITCH EFFECT (decoding colours for case pages) ═══ */
[data-decode] .char,
[data-glitch-only] .char {
  display: inline-block;
  transition: color 0.08s;
}
[data-decode] .char.glitch,
[data-glitch-only] .char.glitch {
  color: var(--accent);
}
[data-decode] .char.decoding,
[data-glitch-only] .char.decoding {
  color: var(--ink-mid, #4A4A4A);
}

/* ═══ PERSONAS — Three roles, one product (Direction A) ══════════════════
   Asymmetric column hierarchy. Marina = 7 cols (primary, full content);
   João + Ana = 2.5 cols each (limit cases, compressed). SIZE is the data.
   Tier dots [●○○ / ○●○ / ○○●] echo Card A pip pattern but in a 3-cell
   badge — drawn mark, NOT a recycled Fig. 01 axis. Light cream surface
   (editorial breath between dark Slice 1 and the dark DS section). Primary
   card carries corner brackets to echo Card A; secondaries are bracketless
   so the hierarchy reads without ambiguity. Content verbatim from Figma
   E.6 (4612:635) + probative-proof. */
.ppl {
  display: grid; grid-template-columns: 1fr; gap: var(--cs-section-gap);
  margin-top: calc(var(--cs-inner-gap) + 1rem);
  align-items: stretch;   /* equal-height bounded panels — no voids beside Marina */
}
@media (min-width: 900px) {
  .ppl {
    grid-template-columns: minmax(0, 7fr) minmax(0, 2.5fr) minmax(0, 2.5fr);
    gap: 2.5rem;
  }
}
/* secondaries fill their stretched panel: header top, quote under it, meta pinned
   to the bottom edge — a deliberate HUD unit-card, not a small box with a void. */
.ppl-card.is-secondary, .ppl-card.is-tertiary { display: flex; flex-direction: column; }
.ppl-card.is-secondary .ppl-meta, .ppl-card.is-tertiary .ppl-meta { margin-top: auto; }

/* every persona is a BOUNDED HUD panel (border + corner ticks) — fixes the
   flat/continuous read; the surface gives each persona its own identity. The
   asymmetric SIZE (7fr vs 2.5fr) still carries the hierarchy. */
.ppl-card {
  position: relative;
  padding: 1.75rem;
  border: 1px solid rgba(8, 8, 8, 0.13);
}
/* primary — bigger panel + phosphor corner brackets (emphasis over the base border) */
.ppl-card.is-primary {
  padding: 2.5rem 2.25rem 2.25rem;
}
.ppl-card.is-primary::before,
.ppl-card.is-primary::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  pointer-events: none;
}
.ppl-card.is-primary::before {
  top: 10px; left: 10px;
  border-top: 1px solid var(--accent-on-light);
  border-left: 1px solid var(--accent-on-light);
}
.ppl-card.is-primary::after {
  bottom: 10px; right: 10px;
  border-bottom: 1px solid var(--accent-on-light);
  border-right: 1px solid var(--accent-on-light);
}
/* TIER-LOCK removed (motion-cleanup, 3/4 lenses). Hierarchy reads from
   layout in 200ms; the choreography re-stated what weight + position already
   declare. The dot-pulse infinite loop also violated the page's own "nothing
   loops in the reading view" rule. Static brackets + dot carry the hierarchy. */
/* secondaries — bounded panels with INK corner ticks (mirror Marina's brackets in
   ink; the panel surface + ticks give each persona its own identity, not flat text). */
.ppl-card.is-secondary,
.ppl-card.is-tertiary { padding: 1.75rem; }
.ppl-card.is-secondary::before, .ppl-card.is-secondary::after,
.ppl-card.is-tertiary::before, .ppl-card.is-tertiary::after {
  content: ''; position: absolute; width: 11px; height: 11px; pointer-events: none;
}
.ppl-card.is-secondary::before, .ppl-card.is-tertiary::before {
  top: 7px; left: 7px;
  border-top: 1px solid rgba(8, 8, 8, 0.32); border-left: 1px solid rgba(8, 8, 8, 0.32);
}
.ppl-card.is-secondary::after, .ppl-card.is-tertiary::after {
  bottom: 7px; right: 7px;
  border-bottom: 1px solid rgba(8, 8, 8, 0.32); border-right: 1px solid rgba(8, 8, 8, 0.32);
}

/* tier badge — 3 dots; one lit indicates this card's position in the trio */
.ppl-tier {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin-bottom: 1.1rem;
}
.ppl-tier i {
  width: 7px; height: 7px; border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(8, 8, 8, 0.28);
  flex-shrink: 0;
}
.ppl-tier i.on { background: var(--ink); border-color: var(--ink); }
.ppl-card.is-primary .ppl-tier i.on {
  background: var(--accent-on-light); border-color: var(--accent-on-light);
}
.ppl-tier-label {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-dim); line-height: 1;
  margin-left: 0.25rem;
}
.ppl-card.is-primary .ppl-tier-label { color: var(--accent-on-light); }

/* head — name + role; primary much larger */
.ppl-head { margin-bottom: 1.5rem; }
.ppl-name {
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.4rem; letter-spacing: 0.01em; color: var(--ink);
  line-height: 1.05; margin: 0 0 0.3rem;
}
.ppl-card.is-primary .ppl-name {
  font-size: clamp(2.25rem, 1.5rem + 1.8vw, 3rem);
  margin-bottom: 0.4rem;
}
.ppl-role {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-dim); margin: 0;
}
.ppl-card.is-primary .ppl-role {
  font-size: 0.78rem; color: var(--ink-mid);
}

/* body — Goals / Frustrations sub-blocks; primary only */
.ppl-body {
  display: grid; grid-template-columns: 1fr; gap: 1.5rem;
  margin-bottom: 1.75rem;
}
@media (min-width: 720px) {
  .ppl-card.is-primary .ppl-body { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}
.ppl-group-label {
  display: block; font-family: var(--f-mono);
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent-on-light); margin-bottom: 0.85rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(8, 8, 8, 0.12);
}
.ppl-group ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.55rem;
}
.ppl-group li {
  font-family: var(--f-body); font-size: 0.95rem; font-weight: 400;
  line-height: 1.5; color: var(--ink-mid);
  position: relative; padding-left: 1.15rem;
}
.ppl-group li::before {
  content: ""; position: absolute;
  left: 0; top: 0.65rem; width: 6px; height: 1px;
  background: var(--ink-dim);
}

/* quote — large editorial italic on primary; smaller on secondaries */
.ppl-quote {
  font-family: var(--f-display); font-weight: 500; font-style: italic;
  font-size: 1rem; line-height: 1.4; color: var(--ink);
  margin: 1.25rem 0 1rem;
  padding-left: 1rem;
  border-left: 2px solid rgba(8, 8, 8, 0.18);
}
.ppl-card.is-primary .ppl-quote {
  font-size: clamp(1.2rem, 0.95rem + 0.6vw, 1.5rem);
  border-left-color: var(--accent-on-light);
  border-left-width: 3px;
  padding-left: 1.25rem;
  margin: 1.5rem 0;
}
.ppl-q-mark {
  color: var(--ink-dim); font-style: normal; font-weight: 700;
  margin: 0 0.05em;
}
.ppl-card.is-primary .ppl-q-mark { color: var(--accent-on-light); }

/* meta — mono micro line at the bottom */
.ppl-meta {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-dim);
  margin: 1rem 0 0; line-height: 1.4;
}

/* coda — the closing reference line */
.ppl-coda {
  margin-top: var(--cs-section-gap); max-width: 64ch;
  font-family: var(--f-body); font-size: 0.95rem; line-height: 1.6;
  font-weight: 300; color: var(--ink-mid);
  padding-left: 1rem;
  border-left: 1px solid rgba(8, 8, 8, 0.12);
}
.ppl-coda strong { color: var(--ink); font-weight: 500; }

/* mobile — single column stack; secondaries get extra breathing */
@media (max-width: 899px) {
  .ppl-card.is-primary { padding: 2rem 1.5rem 1.75rem; }
  .ppl-card.is-primary::before { top: 8px; left: 8px; width: 14px; height: 14px; }
  .ppl-card.is-primary::after { bottom: 8px; right: 8px; width: 14px; height: 14px; }
  .ppl-name { font-size: 1.3rem; }
  .ppl-card.is-primary .ppl-name { font-size: 2rem; }
  .ppl-card.is-primary .ppl-quote { font-size: 1.15rem; }
}

/* ═══ DS BUTTON — the case-05 button component ═══
   Ported from the case-04 DS showcase (.ds-btn), on Quiet Console tokens
   (--dark → --ink, which case-05 defines). Phosphor fill = PRIMARY (the one
   green spend, reserved for the main dossier handoff in The Brief);
   cream-bordered = SECONDARY (supporting CTAs, e.g. the Classified cross-ref).
   Calibrated for dark grounds, matching the DS-section showcase that reuses it. */
.ds-btn {
  font-family: var(--f-mono); font-size: 0.8rem; padding: 0.75rem 1.5rem;
  background: transparent; border: 1px solid var(--bg); color: var(--bg);
  letter-spacing: 1px; cursor: pointer; transition: all 0.3s var(--ease);
  display: inline-block; text-decoration: none;
}
.ds-btn:hover, .ds-btn:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.ds-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.ds-btn--primary:hover, .ds-btn--primary:focus-visible { background: transparent; color: var(--accent); }

/* ═══ THE BRIEF — handoff cite ═══
   The cite + the primary dossier CTA, inside the dark .ctx-readout band so the
   phosphor .ds-btn--primary pops on --ink. Names what the Discovery owns; the
   case LINKS instead of rebuilding the ribbon / personas / method (all cut). */
.ctx-handoff {
  margin-top: clamp(1.6rem, 1.1rem + 0.9vw, 2.4rem);
  padding-top: clamp(1.5rem, 1.1rem + 0.8vw, 2rem);
  border-top: 1px solid rgba(240, 237, 232, 0.14);
  display: grid; gap: 1.25rem; max-width: 74ch;
}
.ctx-handoff-cite {
  font-family: var(--f-body); font-size: clamp(0.98rem, 0.9rem + 0.2vw, 1.08rem);
  font-weight: 300; line-height: 1.7; color: var(--ink-on-dark); margin: 0;
}
.ctx-handoff .ds-btn { justify-self: start; }
.ctx-handoff-sub {
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(240, 237, 232, 0.45); margin: 0;
}

/* handoff console PLACEMENT in The Brief — align the band to the .overview card
   column (mirror its responsive padding-left) and clear the cards above it. The base
   .ctx-readout centred itself (Card A, in the now-cut Context section); here it must
   align to the cards, not the section box, and not collide (margin-top was 0). */
.ctx-readout--brief {
  max-width: none;
  margin: var(--cs-section-gap) 0 0 3rem;
}
@media (max-width: 1024px) { .ctx-readout--brief { margin-left: 4rem; } }
@media (max-width: 768px)  { .ctx-readout--brief { margin-left: 0; } }

/* The Brief scale strip — 4 figures, 374M dominant, fills the band width (no voids) */
.ctx-readout--brief .bsr {
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 1.75rem 2.25rem;
  align-items: end;
}
.bsr-stat { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.bsr-num {
  font-family: var(--f-display); font-weight: 700; line-height: 0.85;
  font-size: clamp(1.7rem, 1rem + 2vw, 2.6rem); color: var(--bg);
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}
.bsr-hero .bsr-num { font-size: clamp(3.2rem, 1.8rem + 4.4vw, 5rem); color: var(--accent); }
.bsr-lab {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-on-dark); line-height: 1.45;
}
@media (max-width: 768px) { .ctx-readout--brief .bsr { grid-template-columns: 1fr 1fr; } }

/* ═══ Section heading scope — case-05 doesn't import fior.css, so .cs-section-
   title/intro have no left-padding by default and land at l=48. The Brief's lead +
   console sit at l=96 (their own 3rem indent), so without this rule the DS section
   reads as MISALIGNED with the Brief inside the same page. Mirror the .overview /
   .ov2-top responsive padding (3rem / 4rem / 0) so every block in the page indents
   identically. Audit-driven. */
.case-study .cs-section .cs-section-title,
.case-study .cs-section .cs-section-intro,
.case-study .cs-section .cs-section-num { padding-left: 3rem; }
@media (max-width: 1024px) {
  .case-study .cs-section .cs-section-title,
  .case-study .cs-section .cs-section-intro,
  .case-study .cs-section .cs-section-num { padding-left: 4rem; }
}
@media (max-width: 768px) {
  .case-study .cs-section .cs-section-title,
  .case-study .cs-section .cs-section-intro,
  .case-study .cs-section .cs-section-num { padding-left: 0; }
}

/* Chapter numeral above every section title (R2 #04) — restores wayfinding
   that the vertical _SECTION-NAME rail label loses below 1024px. Mono coordinate
   tag + hairline underneath, accent-on-light. Sub-blocks now use letter coords
   (// A · Pipeline) to avoid double-counting against the numeric section chapter. */
.cs-section-num {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-on-light);
  padding-top: 0.4rem;
  padding-bottom: 0.55rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(0, 104, 133, 0.25);
  max-width: 80ch;
}
.cs-section-num--on-dark {
  color: var(--accent);
  border-bottom-color: rgba(0, 232, 122, 0.3);
  padding-left: 0;
  max-width: none;
}
@media (max-width: 768px) {
  .cs-section-num {
    font-size: 0.65rem;
    margin-bottom: 0.75rem;
  }
}

/* ═══ DESIGN SYSTEM — Multi-Flow Grid (committee-driven) ═══
   The SEVER payoff: 3 lanes (color/type/space) × 4 stages (Global→Semantic→Component
   →Surface), 18 mini-plates routing to 1 dissected anonymous card. Dashed hairlines
   alias token→token; solid teal --accent-on-light hairlines paint surface slots —
   ink becomes teal at the moment of paint. Quiet Console adapted (square corners,
   bracket plates, terminal-banner headers, datum strips, HUD coordinate chrome). */
.dsg {
  position: relative;
  margin-top: var(--cs-section-gap);
  max-width: var(--cs-content-max, 1240px);
  margin-left: 3rem; margin-right: auto;
  padding: 0;
}
@media (max-width: 1024px) { .dsg { margin-left: 4rem; } }
@media (max-width: 768px)  { .dsg { margin-left: 0; } }

/* datum strips top + bottom */
.dsg__datum {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--f-mono); font-size: 0.68rem; color: var(--ink-dim);
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.55rem 0.9rem;
}
.dsg__datum--top { border-bottom: 1px solid var(--ink-mid); }
.dsg__datum--bot { border-top: 1px solid var(--ink-mid); }
.dsg__datum-r { color: var(--ink-mid); }

/* corner brackets at the 4 band corners (HUD frame) */
.dsg__corner {
  position: absolute; width: 12px; height: 12px; pointer-events: none;
}
.dsg__corner--tl { top: 0;   left: 0;   border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.dsg__corner--tr { top: 0;   right: 0;  border-top: 1px solid var(--ink); border-right: 1px solid var(--ink); }
.dsg__corner--bl { bottom: 0; left: 0;  border-bottom: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.dsg__corner--br { bottom: 0; right: 0; border-bottom: 1px solid var(--ink); border-right: 1px solid var(--ink); }

/* wires overlay — sits over the grid, beneath the plates' shadows but visible
   in the gutters between plates (plates are opaque so wires only show in gaps) */
.dsg__wires {
  position: absolute; left: 0; right: 0;
  top: 38px; bottom: 38px; /* clear the datum strips */
  width: 100%; height: calc(100% - 76px);
  pointer-events: none;
  z-index: 0;
}
.dsg-w-alias path { fill: none; stroke: var(--ink-mid); stroke-width: 1.25; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; }
.dsg-w-apply path { fill: none; stroke: var(--accent-on-light); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.dsg-j rect { fill: var(--ink); }
.dsg-j rect.t { fill: var(--accent-on-light); }

/* Motion PR B Fork 2A — DSG paint-wire stagger ADD.
   The component-stage paint wires paint into the surface card on scroll-in;
   each wire's slot terminal ignites phosphor as the wire arrives. The motion
   verb is "now connected" — the inverse of the Hero SEVER. JS sets
   stroke-dasharray + stroke-dashoffset + per-path transition inline; the
   `dsg-paint-armed` class only marks the hidden initial state for terminals.
   Default / no-JS / reduced-motion: wires solid + terminals lit (final state
   matches the CSS default — no override needed). */
.dsg.dsg-paint-armed .dsg-j rect.t { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .dsg.dsg-paint-armed .dsg-j rect.t { opacity: 1; }
  .dsg.dsg-paint-armed .dsg-w-apply path { stroke-dashoffset: 0 !important; }
}

/* the grid — lane labels (aside) + 4 stage columns. SURFACE col is wider. */
.dsg__grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 32px 1fr 1.05fr 1.15fr 1.5fr;
  gap: 0 2rem;
  padding: 1.5rem 1rem 1.75rem;
}

.dsg__aside {
  display: flex; flex-direction: column;
  justify-content: space-around; align-items: center;
  padding-top: 56px; /* match column-header height + gap */
}
.dsg__lane-label {
  font-family: var(--f-display); font-weight: 600;
  font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-mid);
  writing-mode: vertical-rl; transform: rotate(180deg);
  white-space: nowrap;
}

.dsg__col { display: flex; flex-direction: column; min-width: 0; }

/* column header — terminal banner: hairline above + below, coord-tag mono + title display */
.dsg__col-head {
  border-top: 1px solid var(--ink-mid);
  border-bottom: 1px solid var(--ink-mid);
  padding: 0.45rem 0;
  display: flex; gap: 0.5rem; align-items: baseline;
  margin-bottom: 1.25rem;
}
.dsg__col-coord {
  font-family: var(--f-mono); font-size: 0.6rem;
  color: var(--ink-dim); letter-spacing: 0.06em;
}
.dsg__col-title {
  font-family: var(--f-display); font-weight: 700;
  font-size: 0.88rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink);
}

.dsg__col-body {
  flex: 1;
  display: flex; flex-direction: column;
  gap: 1.25rem;
}
.dsg__lane {
  display: flex; flex-direction: column; gap: 0.5rem;
  flex: 1; justify-content: center;
}

/* THE PLATE — the atomic unit. ⌐ ¬ bracket corners, hairline ink border, off-white
   fill on cream. Swatch slot left, Space Mono label right. */
.dsg-plate {
  display: grid; grid-template-columns: 28px 1fr; align-items: center;
  gap: 0.55rem;
  background: #FAF8F4;
  border: 1px solid var(--ink);
  padding: 0.45rem 0.65rem;
  position: relative;
  min-height: 36px;
}
.dsg-plate::before, .dsg-plate::after {
  content: ''; position: absolute; width: 5px; height: 5px; pointer-events: none;
}
.dsg-plate::before { top: -1px; left: -1px; border-top: 1px solid var(--accent-on-light); border-left: 1px solid var(--accent-on-light); }
.dsg-plate::after  { bottom: -1px; right: -1px; border-bottom: 1px solid var(--accent-on-light); border-right: 1px solid var(--accent-on-light); }

/* swatch — three vocabularies per lane */
.dsg-plate__swatch {
  width: 22px; height: 22px; display: grid; place-items: center;
  border: 1px solid var(--ink-mid);
  font-family: var(--f-display); font-weight: 600;
  font-size: 0.7rem; color: var(--ink);
}
.dsg-plate__swatch--type { background: #FAF8F4; }
.dsg-plate__swatch--space {
  background: #FAF8F4; gap: 1px;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 3px 2px;
}
.dsg-plate__swatch--space i {
  flex: 1; background: var(--ink-mid); height: 60%;
}
.dsg-plate__swatch--space i:nth-child(2) { height: 70%; }
.dsg-plate__swatch--space i:nth-child(3) { height: 85%; }
.dsg-plate__swatch--space i:nth-child(4) { height: 100%; }

.dsg-plate__label {
  font-family: var(--f-mono); font-size: 0.74rem;
  color: var(--ink); letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* THE SURFACE COL — wider, holds one dissected anonymous card */
.dsg__col--surface .dsg__col-body { justify-content: center; padding-top: 0.5rem; }
.dsg__surface { padding-left: 0.5rem; }
.dsg-card {
  position: relative;
  background: #FAF8F4;
  border: 1px solid var(--ink);
  padding: 1.5rem 1.4rem 1.25rem;
}
.dsg-card::before, .dsg-card::after {
  content: ''; position: absolute; width: 10px; height: 10px; pointer-events: none;
}
.dsg-card::before { top: -1px; left: -1px; border-top: 1px solid var(--accent-on-light); border-left: 1px solid var(--accent-on-light); }
.dsg-card::after  { bottom: -1px; right: -1px; border-bottom: 1px solid var(--accent-on-light); border-right: 1px solid var(--accent-on-light); }

.dsg-card__title {
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.05rem; letter-spacing: 0.08em; color: var(--ink);
  margin: 0 0 0.8rem;
}
.dsg-card__pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: #FEF3C7; color: #78350F;
  padding: 0.25rem 0.65rem;
  font-family: var(--f-mono); font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 0.85rem;
  border: 1px solid rgba(146, 64, 14, 0.25);
}
.dsg-card__dot { width: 6px; height: 6px; background: #B45309; display: inline-block; }
.dsg-card__body {
  font-family: var(--f-body); font-weight: 300;
  font-size: 0.85rem; color: var(--ink-mid); line-height: 1.5;
  margin: 0 0 1rem;
}
.dsg-card__meta {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 0.85rem; border-top: 1px solid var(--ink-mid);
}
.dsg-card__money { font-family: var(--f-mono); font-size: 0.9rem; color: var(--ink); font-weight: 700; letter-spacing: 0.02em; }
.dsg-card__btn {
  font-family: var(--f-mono); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  background: var(--ink); color: var(--bg);
  border: 1px solid var(--ink);
}

/* DISSECTION LABELS — hidden in v1. The terminals are drawn by the JS wire
   routine instead (teal 4px squares where each apply-wire lands on the card edge).
   The label-on-slot-edge treatment will land in v2 once positioning is solved. */
.dsg-card__slot { display: none; }
.dsg-card__slot--HIDDEN-BELOW {
  position: absolute;
  font-family: var(--f-mono); font-size: 0.58rem;
  color: var(--accent-on-light); letter-spacing: 0.04em;
  white-space: nowrap; pointer-events: none;
  padding-left: 8px;
}
.dsg-card__slot::before {
  content: ''; position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px;
  background: var(--accent-on-light);
}
/* border-ink: top-left corner, hairline traces the top border for ~40px before label */
.dsg-card__slot--border      { top: -8px; left: 8px; background: var(--bg); padding: 0 6px 0 12px; }
.dsg-card__slot--border::before { left: 4px; }

/* title-color: tucked under the title to its right edge */
.dsg-card__slot--title-color { top: 28px; right: 18px; padding-left: 8px; }

/* title-font: under title-color */
.dsg-card__slot--title-font  { top: 42px; right: 18px; padding-left: 8px; }

/* padding-y: vertical tick inside the top padding band, with label rotated */
.dsg-card__slot--padding     { top: 12px; left: 18px; padding-left: 8px; }

/* pill.status-bg: right next to the pill */
.dsg-card__slot--pill        { top: 78px; right: 18px; padding-left: 8px; }

/* body-font: above the body text, right side */
.dsg-card__slot--body        { top: 132px; right: 18px; padding-left: 8px; }

/* the section caption — replaces the old tfa-label */
.dsg-cap {
  font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-dim);
  margin: 1.25rem 0 0;
  text-align: center;
}
.dsg-cap b { color: var(--accent-on-light); font-weight: 400; }

/* responsive — the diagram's THESIS is horizontal flow ("ink → teal at the moment
   of paint"); stacking vertically would kill it. So below 1024 we KEEP the
   horizontal composition and let the user scroll horizontally to explore, with a
   visible fade-hint on the right edge until the user reaches the end. */
@media (max-width: 1023px) {
  /* the section escapes the page's left padding so it can run gutter-to-gutter
     for horizontal scrolling */
  .dsg {
    margin-left: -2rem; margin-right: -2rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-left: 2rem; padding-right: 2rem;
    /* fade-out hint on the right indicating more content */
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%);
    scrollbar-width: thin;
  }
  .dsg__grid {
    min-width: 980px;
    grid-template-columns: 28px 1fr 1fr 1.1fr 1.4fr;
    gap: 0 1.2rem;
    padding: 1.25rem 0.5rem 1.5rem;
  }
  .dsg__datum { min-width: 980px; }
  .dsg-plate__label { font-size: 0.68rem; }
  .dsg-cap::before {
    content: '⇠ scroll → '; color: var(--accent-on-light); letter-spacing: 0.1em;
    margin-right: 0.5rem; font-weight: 700;
  }
}
@media (max-width: 768px) {
  /* on phones, narrower gutters; the band still scrolls horizontally */
  .dsg { margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; }
  .dsg__grid { min-width: 960px; }
  .dsg__datum { min-width: 960px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SYSTEM-MADE-INTO-LAW (.slaw)
   Three sub-blocks with DELIBERATELY DISTINCT vocabularies so this section
   doesn't echo the DS Multi-Flow Grid above or the Classified cards below:
   01 Pipeline = dark terminal panel (only dark beat in the section, eco of
                 the Hero tv-frame)
   02 Method = pure SVG circular ADR loop (nothing circular elsewhere)
   03 Proof = HTML semantic before/after table (zero card/plate overlap)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   SECTION-LEVEL FULL-BLEED DARK BAND (R3.2).
   Continuous with .cs-intertitulo above (--dark) and the R3.3 governance
   plate below (also --dark). Pattern mirrors .classified-section — children
   self-constrain via their own max-width; no __inner wrapper needed.
   Selector mirrors the L41 base rule (.case-study main > section.cs-section)
   so padding-top:0 wins on specificity, not just source order.
   ══════════════════════════════════════════════════════════════════════════ */
.case-study main > section.cs-section.slaw {
  background: var(--dark);
  margin: 0;
  max-width: none;
  padding-top: 0;                          /* intertítulo's pb owns the gap above */
  padding-bottom: var(--cs-section-gap);   /* R3.3 plate owns band-exit — SLAW is interior beat now (was 1.5x in R3.2) */
  padding-inline: 0;                       /* gutter moves to .slaw__inner so the
                                              centered spine matches cream sections */
}

/* R3.3 — SLAW mobile pb reverts to base; plate owns band-exit. */
@media (max-width: 767px) {
  .case-study main > section.cs-section.slaw {
    padding-bottom: var(--cs-section-gap);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   GOVERNANCE PLATE — system at feature scale.
   Dark-band interlude between SLAW and A11Y. Full-bleed; owns band-exit
   rhythm. Reductive schematic: abstracted silhouette + 4 rule callouts +
   7-mini proof-strip. Shows no real screens, no field names, no recognizable
   IA — the palette is a neutral 7-hue stand-in, not the real family hues.
   Silhouette↔strip tether (mini #4 + dotted hairline); status pill rotation
   on minis 2/5 (success/info) demonstrates the STATUS=TOKEN rule.
   ══════════════════════════════════════════════════════════════════════════ */

.governance-plate {
  /* Plate-scoped neutral cool-rotation palette — domain-neutral, chosen to
     avoid LCh overlap with the case's real family hues. Scoped (not global)
     because these are plate-specific stand-ins, not DS tokens. */
  --plate-orange:         #E89A3C;   /* main silhouette MH badge + tether mini #4 */
  --plate-status-warning: #E0A93B;   /* default status pill */
  --plate-status-success: #4A9B6A;   /* V2 status rotation */
  --plate-status-info:    #3F7AB5;   /* V2 status rotation */
  --plate-fam-1: #7A8290;            /* slate */
  --plate-fam-2: #5E6B7D;            /* steel */
  --plate-fam-3: #8A7E72;            /* taupe */
  --plate-fam-5: #756D80;            /* mauve-gray (mini #4 uses --plate-orange directly) */
  --plate-fam-6: #828F8A;            /* sage-gray */
  --plate-fam-7: #7F7470;            /* warm-gray */
}

.case-study main > section.cs-section.governance-plate {
  background: var(--dark);
  margin: 0;
  max-width: none;
  padding-top: 0;                                    /* SLAW pb owns gap above */
  padding-bottom: calc(var(--cs-section-gap) * 1.5); /* owns band-exit to A11Y */
  padding-inline: 0;                                 /* gutter moves to __inner */
}

@media (max-width: 767px) {
  .case-study main > section.cs-section.governance-plate {
    padding-bottom: 3.5rem;
  }
}

.governance-plate__inner {
  max-width: var(--cs-content-max);
  margin: 0 auto;
  padding-inline: var(--cs-gutter);
}

.governance-plate__svg {
  /* Match .slaw-term / .slaw-table-wrap / .slaw-loop-wrap column geometry
     so plate's left edge aligns with SLAW sub-blocks above. Previously
     max-width:960 + margin:0 auto centered the SVG in spine, but SLAW content
     starts at spine-left + 3rem — visual mismatch (plate read as right-shifted
     by 123px). Now matching the sibling column at left:109 / right:1209 desktop. */
  display: block;
  width: 100%;
  height: auto;
  max-width: 1100px;
  margin-left: 3rem;
  margin-right: auto;
}
@media (max-width: 1024px) {
  .governance-plate__svg { margin-left: 4rem; }
}

/* HUD identity strip — figure-level wayfinding, NOT chapter-level */
.gp-hud-kicker,
.gp-hud-mark {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--accent);
}
.gp-hud-mark { fill: var(--ink-on-dark); opacity: 0.55; }

/* Silhouette — primary stroke + demoted body frame */
.gp-silhouette rect,
.gp-silhouette line { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.gp-frame-demoted    { stroke-width: 1; opacity: 0.25; }
.gp-row-fill         { fill: var(--accent); opacity: 0.18; stroke: none; }
.gp-pill             { fill: none; stroke: var(--accent); opacity: 0.45; }
/* Action button — split fill vs stroke opacity so stroke reads as visible
   outline (target for the TEAL=ACT callout dot) while fill stays dim. The
   shared opacity:0.18 was washing the stroke too — action looked "apagado"
   vs pill (which had stroke at 0.45) and MH badge (fill at 0.85). */
.gp-action {
  fill: var(--accent);
  fill-opacity: 0.18;
  stroke: var(--accent);
  stroke-opacity: 0.85;
}
.gp-mh-badge         { fill: var(--plate-orange); opacity: 0.85; stroke: none; }
.gp-topbar-underline { stroke: var(--plate-orange); stroke-width: 2; }

/* Callouts — dot + connector line + 2-line mono lockup */
.gp-callout-line { stroke: var(--ink-on-dark); stroke-width: 1; opacity: 0.55; }
.gp-callout-kicker {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--accent);
}
.gp-callout-gloss {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  fill: var(--ink-on-dark);
}

/* Per-callout dot color (tied to the rule each names) */
.gp-callout--mh       .gp-callout-dot { fill: var(--plate-orange); opacity: 0.7; }
.gp-callout--identity .gp-callout-dot { fill: var(--plate-orange); }
.gp-callout--status   .gp-callout-dot { fill: var(--plate-status-warning); }
.gp-callout--action   .gp-callout-dot { fill: var(--accent); }

/* Proof strip (Fork 2b) — 7 minis, identical geometry, header hue rotates */
.gp-proof-kicker {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--ink-on-dark);
}
.gp-tether {
  /* V2 #1 — dotted vertical hairline tying silhouette MH band down to mini #4 */
  stroke: var(--plate-orange);
  stroke-width: 1;
  opacity: 0.35;
  fill: none;
}
.gp-mini-frame {
  fill: none;
  stroke: var(--ink-on-dark);
  stroke-opacity: 0.55;
  stroke-width: 1.5;
}
.gp-mini-row {
  stroke: var(--ink-on-dark);
  stroke-opacity: 0.32;
  stroke-width: 1;
}
.gp-mini-action { fill: var(--accent); }

/* Locked caption — Rico-verified verbatim */
.gp-caption {
  font-family: var(--f-mono);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: var(--ink-on-dark);
}

/* Mobile — Strategy A horizontal scroll (mirrors .a11y-viewport-wrap pattern).
   The plate's labels live in negative-x and far-right gutters; at 375 viewport
   they would scale to ~3.8px (illegible) without this. Min-width holds the
   plate at native readable scale; user pans to see callouts on both sides. */
@media (max-width: 767px) {
  .governance-plate__inner {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-inline: 1rem;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }
  .governance-plate__svg {
    min-width: 900px;
    margin: 0;                                     /* override 3rem/4rem desktop indent on mobile scroll */
  }
}

/* Inner spine — replicates the .cs-section default boundary
   (max-width: cs-content-max; margin: 0 auto; padding-inline: cs-gutter) so
   sub-blocks (with margin-left:3rem / padding-left:3rem) compute their offsets
   inside a CENTERED container — same alignment cream sections enjoyed via the
   base .cs-section rule. Mirrors .classified-inner and .cs-intertitulo__inner
   patterns. */
.slaw .slaw__inner {
  max-width: var(--cs-content-max);
  margin: 0 auto;
  padding-inline: var(--cs-gutter);
}

/* SLAW header — DESCENT treatment (V2 editorial, applied verbatim).
   Goal: title carries the intertítulo's voice (italic + 500 weight + smaller
   + dimmer α) so it reads as the answer rising under the question, NOT as
   Chapter 02 starting. Rail label removed in HTML (the loudest "new chapter"
   signal). Num demoted via existing --on-dark modifier + opacity. ONE phosphor
   accent per emphasised <strong> token in the prose (authority by scarcity). */
.slaw .cs-section-num--on-dark {
  opacity: 0.55;
  border-bottom-color: transparent;
}
.slaw .cs-section-title {
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2rem, 2.8vw, 2.4rem);
  color: rgba(240, 237, 232, 0.96);
  letter-spacing: 0.005em;
}
.slaw .cs-section-intro {
  color: var(--ink-on-dark);
}
.slaw .cs-section-intro strong {
  color: var(--accent);
  font-weight: 500;
}

.slaw .slaw-block { margin-top: var(--cs-section-gap); }
.slaw .slaw-block:first-of-type { margin-top: calc(var(--cs-section-gap) * 1.2); }

.slaw-head {
  padding-left: 3rem;
  max-width: 64ch;
  margin-bottom: 1.75rem;
}
@media (max-width: 1024px) { .slaw-head { padding-left: 4rem; } }
@media (max-width: 768px)  { .slaw-head { padding-left: 0; } }

/* Sub-block heads — token swap to dark-ground equivalents. Selectors live
   exclusively inside .slaw (no other usage in the codebase), so in-place
   modification is equivalent to scoping. */
.slaw-coord {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.7rem;
}
.slaw-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--bg);
  margin: 0 0 0.8rem;
}
.slaw-sub {
  font-family: var(--f-body);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-on-dark);
  margin: 0;
}
.slaw-sub code {
  font-family: var(--f-mono);
  font-size: 0.85em;
  background: rgba(240, 237, 232, 0.08);
  padding: 0.05em 0.4em;
  color: var(--bg);
}
.slaw-sub strong { color: var(--bg); font-weight: 500; }

/* ─── 01 · PIPELINE — terminal panel (the only dark beat in this section) ─── */
.slaw-term {
  position: relative;
  margin-left: 3rem;
  max-width: 1100px;
  background: var(--ink);
  color: rgba(240, 237, 232, 0.85);
  border: 1px solid var(--ink);
}
@media (max-width: 1024px) { .slaw-term { margin-left: 4rem; } }
@media (max-width: 768px)  { .slaw-term { margin-left: 0; } }
.slaw-term::before, .slaw-term::after {
  content: ''; position: absolute; width: 12px; height: 12px; pointer-events: none;
}
.slaw-term::before {
  top: -1px; left: -1px;
  border-top: 1px solid var(--accent);
  border-left: 1px solid var(--accent);
}
.slaw-term::after {
  bottom: -1px; right: -1px;
  border-bottom: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
}

.slaw-term-bar {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid rgba(240, 237, 232, 0.1);
}
.slaw-term-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: rgba(240, 237, 232, 0.18);
  display: inline-block;
}
.slaw-term-dot:nth-of-type(1) { background: #FF5F57; }
.slaw-term-dot:nth-of-type(2) { background: #FEBC2E; }
.slaw-term-dot:nth-of-type(3) { background: #28C840; }
.slaw-term-path {
  margin-left: 0.9rem;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  color: rgba(240, 237, 232, 0.4);
  letter-spacing: 0.06em;
}

.slaw-term-body {
  margin: 0;
  padding: 1.5rem 1.85rem 1rem;
  font-family: var(--f-mono);
  font-size: 0.82rem;
  line-height: 1.85;
  white-space: pre-wrap;
  word-break: break-word;
}
.slaw-term-body .p  { color: var(--accent); margin-right: 0.4em; font-weight: 700; }
.slaw-term-body .ok { color: var(--accent); margin-right: 0.55em; }
.slaw-term-body .f  { color: #6EC6FF; }
.slaw-term-body .hl { color: var(--accent); font-weight: 700; }

.slaw-term-livedocs {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin: 0.4rem 1.85rem 1.5rem;
  padding: 0.55rem 0.9rem;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.slaw-term-livedocs:hover, .slaw-term-livedocs:focus-visible {
  background: var(--accent); color: var(--ink); outline: none;
}
.slaw-term-livedocs-dot {
  width: 6px; height: 6px;
  background: var(--accent);
}

/* ─── 02 · METHOD — circular SVG ADR loop ─── */
/* Wrap matches terminal/table column geometry (margin-left:3rem; max-width:1100)
   so the loop is a peer of the sibling sub-blocks — same left edge, same width.
   SVG flex-centers inside the column (90/90 symmetric inside the block frame).
   Rico's feedback: loop "off-center in its block" = block frame is title-axis
   (left:109), not spine-axis (left:61). 1024 stair mirrors .slaw-term's 4rem
   margin so the column geometry stays in sync across breakpoints. */
.slaw-loop-wrap {
  margin-left: 3rem;
  max-width: 1100px;
  display: flex; justify-content: center;
}
@media (max-width: 1024px) {
  .slaw-loop-wrap { margin-left: 4rem; max-width: none; }
}

.slaw-loop {
  width: 100%; max-width: 920px; height: auto; display: block;
}
/* mobile: keep SVG at minimum readable size; let the wrap scroll horizontally
   so labels stay above the legibility floor instead of shrinking with the
   viewport. R3.2 fix: justify-content: flex-start (was center) removes the
   broken-scroll-left negative offset that prevented scrolling RIGHT. The
   procurement-platform.js IIFE sets scrollLeft to centre on first paint +
   animates it as motion-affordance. Dual-edge mask hints scrollability
   both sides. */
@media (max-width: 768px) {
  .slaw-loop-wrap {
    justify-content: flex-start;
    margin-left: -1rem; margin-right: -1rem;
    padding-left: 1rem; padding-right: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }
  .slaw-loop { min-width: 720px; }
}
/* The ring is ONE full circle; 4 nodes overlay with --dark fill (punch the
   ring into 4 arcs on dark band). V2 editorial: phosphor CONCENTRATES on
   the 4 node circles + the centre big number ONLY. Ring is demoted to
   low-α phosphor, arrows are cream (not phosphor), kickers are dim-cream
   — preserves "diagram/schematic" over "monochrome-HUD-glow". */
.slaw-loop-ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  opacity: 0.25;
}
.slaw-loop-arrows polygon { fill: var(--bg); }
.slaw-loop-nodes circle {
  fill: var(--dark);
  stroke: var(--accent);
  stroke-width: 1.75;
}
.slaw-loop-nodes text {
  fill: var(--accent);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 22px;
}
.slaw-loop-labels .kicker {
  fill: var(--ink-on-dark);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.slaw-loop-labels .title {
  fill: var(--bg);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.01em;
}
.slaw-loop-labels .sub {
  fill: var(--ink-on-dark);
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 13px;
}
.slaw-loop-centre .kicker {
  fill: var(--ink-on-dark);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.slaw-loop-centre .big {
  fill: var(--accent);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 38px;
  letter-spacing: 0.01em;
}

/* ─── 03 · PROOF — before/after table ─── */
.slaw-table-wrap {
  padding-left: 3rem;
  max-width: 1100px;
}
@media (max-width: 1024px) { .slaw-table-wrap { padding-left: 4rem; overflow-x: auto; } }
@media (max-width: 768px)  {
  .slaw-table-wrap {
    padding-left: 0;
    margin-left: -1rem; margin-right: -1rem;
    padding-left: 1rem; padding-right: 1rem;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
  }
}

.slaw-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-body);
}
/* Proof table — token swap to dark-ground (R3.2). V2 editorial: strike-through
   drops to 0.28α (was 0.45α equivalent on cream) — on dark, low-α strike reads
   as "dimmer text"; widening the gap restores the "killed text" semantic. The
   verdict pill (.vd) re-tints to phosphor with translucent fill for low chroma. */
.slaw-table thead th {
  text-align: left;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-on-dark);
  font-weight: 400;
  padding: 0.75rem 1rem;
  border-bottom: 1.5px solid rgba(240, 237, 232, 0.4);
}
.slaw-table tbody tr { border-bottom: 1px solid rgba(240, 237, 232, 0.1); }
.slaw-table tbody th {
  text-align: left;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--bg);
  padding: 0.95rem 1rem;
  width: 18%;
  vertical-align: top;
  letter-spacing: 0.01em;
}
.slaw-table tbody td {
  padding: 0.95rem 1rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-on-dark);
  font-weight: 300;
  vertical-align: top;
  width: 32%;
}
.slaw-table tbody td:last-child { width: 18%; }
.slaw-table tbody td s {
  text-decoration: line-through;
  text-decoration-color: rgba(240, 237, 232, 0.28);
  color: rgba(240, 237, 232, 0.28);
}
.slaw-table tbody td.t {
  color: var(--accent);
  font-weight: 500;
}
.slaw-table tbody td.t code,
.slaw-table tbody td.t b { color: var(--accent); font-weight: 700; }
.slaw-table .vd {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(0, 232, 122, 0.10);
  padding: 0.3rem 0.65rem;
  border: 1px solid rgba(0, 232, 122, 0.3);
}
.slaw-table-foot {
  margin-top: 1rem;
  padding: 0 1rem;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: rgba(240, 237, 232, 0.5);
}

@media (max-width: 768px) {
  .slaw-term-body { padding: 1rem 1.25rem; font-size: 0.7rem; line-height: 1.7; }
  .slaw-term-livedocs { margin: 0.4rem 1.25rem 1.25rem; }
  .slaw-table { min-width: 720px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   A11Y & DENSITY (.a11y)
   Three sub-blocks reuse the .slaw-* shell pattern (.a11y-block / .a11y-head /
   .a11y-coord / .a11y-title / .a11y-sub) but each visual is deliberately
   distinct from everything else in the case:
   01 Density = 3-column side-by-side row-stack comparison
   02 Contrast = horizontal bars crossing the AA 4.5:1 line (vertical threshold)
   03 Viewport = wireframe SVG of a 1366×768 notebook + per-row compliance dots
   ═══════════════════════════════════════════════════════════════════════════ */

.a11y .a11y-block { margin-top: var(--cs-section-gap); }
.a11y .a11y-block:first-of-type { margin-top: calc(var(--cs-section-gap) * 1.2); }

.a11y-head {
  padding-left: 3rem;
  max-width: 64ch;
  margin-bottom: 1.75rem;
}
@media (max-width: 1024px) { .a11y-head { padding-left: 4rem; } }
@media (max-width: 768px)  { .a11y-head { padding-left: 0; } }

.a11y-coord {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-on-light);
  margin-bottom: 0.7rem;
}
.a11y-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0 0 0.8rem;
}
.a11y-sub {
  font-family: var(--f-body);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-mid);
  margin: 0;
}
.a11y-sub strong { color: var(--ink); font-weight: 500; }
.a11y-sub code {
  font-family: var(--f-mono);
  font-size: 0.85em;
  background: rgba(8, 8, 8, 0.06);
  padding: 0.05em 0.4em;
  color: var(--ink);
}
.a11y-foot {
  padding-left: 3rem;
  margin-top: 1.25rem;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  max-width: 80ch;
}
@media (max-width: 1024px) { .a11y-foot { padding-left: 4rem; } }
@media (max-width: 768px)  { .a11y-foot { padding-left: 0; } }

/* ─── 01 · DENSITY — three columns side-by-side ─── */
.a11y-density {
  margin-left: 3rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 1100px;
}
@media (max-width: 1024px) { .a11y-density { margin-left: 4rem; } }
@media (max-width: 768px)  {
  .a11y-density { margin-left: 0; grid-template-columns: 1fr; gap: 1rem; }
}

.dens-col {
  background: #FAF8F4;
  border: 1px solid var(--ink-mid);
  padding: 1.25rem 1.25rem 0;
  position: relative;
}
.dens-col.is-default {
  border-color: var(--accent-on-light);
  border-width: 2px;
  background: rgba(0, 140, 80, 0.035);
}
.dens-head {
  display: flex; align-items: baseline; gap: 0.55rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed var(--ink-mid);
}
.dens-num {
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.6rem; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.dens-num i {
  font-style: normal; font-size: 0.85rem;
  color: var(--ink-mid); font-weight: 400;
  margin-left: 0.1em;
}
.dens-label {
  font-family: var(--f-mono); font-size: 0.7rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-dim);
}
.is-default .dens-label {
  color: var(--accent-on-light);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.dens-rows { display: flex; flex-direction: column; padding-bottom: 1.25rem; }
.dens-row {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--f-body); font-size: 0.82rem; color: var(--ink-mid);
  border-bottom: 1px solid rgba(8,8,8,0.07);
}
.dens-row:last-child { border-bottom: 0; }
.dens-num-r { font-family: var(--f-mono); font-size: 0.78rem; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Focus state on the Quantity row — makes the TAP TARGET visible. The same
   focus ring scales with density: compact = small hit area, comfortable = big.
   This is the actual accessibility outcome of the density choice, made visible. */
.dens-row.is-focused {
  position: relative;
  background: rgba(0, 104, 133, 0.07);
  outline: 1.5px solid var(--accent-on-light);
  outline-offset: -1.5px;
  margin: 0 -0.65rem;
  padding-left: 0.65rem;
  padding-right: 0.65rem;
  border-bottom-color: transparent;
}
.dens-row.is-focused::before {
  content: '';
  position: absolute;
  left: -0.65rem;
  top: 0; bottom: 0;
  width: 3px;
  background: var(--accent-on-light);
}
.dens-row.is-focused::after {
  content: 'tap target';
  position: absolute;
  right: -0.65rem;
  top: 100%;
  font-family: var(--f-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-on-light);
  padding: 0.2rem 0.4rem;
  background: var(--bg);
}

/* padding-block (longhand) so .dens-row.is-focused's padding-inline isn't zeroed
   by source-order specificity with these same-specificity rules. */
.is-compact     .dens-row { padding-block: 4px; }   /* 28px row */
.is-normal      .dens-row { padding-block: 8px; }   /* 36px */
.is-comfortable .dens-row { padding-block: 12px; }  /* 44px */

/* ─── 02 · CONTRAST — horizontal bars crossing AA line ─── */
.a11y-contrast {
  position: relative;
  margin-left: 3rem;
  max-width: 1100px;
  padding: 1.5rem 0 1.75rem;
  background:
    linear-gradient(to right,
      transparent 0%, transparent calc(38% + 3rem),
      rgba(0, 104, 133, 0.08) calc(38% + 3rem), rgba(0, 104, 133, 0.08) calc(38% + 3rem + 1px),
      transparent calc(38% + 3rem + 1px)
    );
}
@media (max-width: 1024px) { .a11y-contrast { margin-left: 4rem; } }
@media (max-width: 768px)  { .a11y-contrast { margin-left: 0; padding: 1rem 0; } }

.a11y-cb-scale {
  position: absolute; left: 38%; right: 0; top: 0; bottom: 0;
  margin-left: -1px;
  pointer-events: none;
}
.a11y-cb-scale .aaline,
.a11y-cb-scale .aaaline {
  position: absolute; top: 0; bottom: 0;
  font-family: var(--f-mono); font-size: 0.62rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.25rem 0.45rem;
  white-space: nowrap;
}
.a11y-cb-scale .aaline {
  color: var(--accent-on-light);
  border-left: 1px dashed var(--accent-on-light);
}
.a11y-cb-scale .aaaline {
  color: var(--ink-dim);
  border-left: 1px dashed var(--ink-dim);
}
.a11y-cb-scale .aaline,
.a11y-cb-scale .aaaline {
  background: transparent;
}
.a11y-cb-scale .aaline::after,
.a11y-cb-scale .aaaline::after {
  content: ''; position: absolute; bottom: 100%; left: 0;
  width: 0; height: 0;
}

.a11y-cb-row {
  display: grid;
  grid-template-columns: 38% 1fr 80px;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0;
  position: relative;
  z-index: 1;
}
.a11y-cb-row .lbl {
  font-family: var(--f-mono); font-size: 0.74rem;
  color: var(--ink-mid); letter-spacing: -0.005em;
}
.a11y-cb-row .bar {
  height: 12px; background: rgba(8, 8, 8, 0.05); display: block; position: relative;
}
.a11y-cb-row .bar i {
  display: block; height: 100%;
  background: var(--accent-on-light);
}
.a11y-cb-row .rat {
  font-family: var(--f-mono); font-size: 0.78rem; font-weight: 700;
  color: var(--ink); font-variant-numeric: tabular-nums;
}

/* ─── 03 · VIEWPORT — wireframe SVG of 1366×768 ─── */
.a11y-viewport-wrap {
  padding-left: 3rem;
  display: flex; justify-content: center;
  max-width: 1100px;
}
@media (max-width: 1024px) { .a11y-viewport-wrap { padding-left: 4rem; } }
/* mobile-first responsive: below 768 the wrap escapes the section padding and
   scrolls horizontally so the SVG stays at its readable min-width; labels stay
   above the legibility floor instead of shrinking with the viewport (same
   pattern used on the DS Multi-Flow Grid and the ADR loop). */
@media (max-width: 768px)  {
  .a11y-viewport-wrap {
    padding-left: 0;
    margin-left: -1rem; margin-right: -1rem;
    padding-left: 1rem; padding-right: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
    justify-content: flex-start;
  }
}

.a11y-viewport {
  width: 100%; max-width: 960px; height: auto; display: block;
}
@media (max-width: 768px) { .a11y-viewport { min-width: 800px; } }
.a11y-viewport .vp-frame {
  fill: none; stroke: var(--ink); stroke-width: 1.5;
}
.a11y-viewport .vp-bar {
  fill: rgba(8, 8, 8, 0.04);
  stroke: var(--ink-mid); stroke-width: 1;
}
.a11y-viewport .vp-mods rect {
  fill: var(--ink-mid);
}
.a11y-viewport .vp-rail {
  fill: rgba(8, 8, 8, 0.025);
  stroke: var(--ink-mid); stroke-width: 1;
}
.a11y-viewport .vp-rail-pills rect {
  fill: rgba(8, 8, 8, 0.08);
  stroke: var(--ink-mid); stroke-width: 0.5;
}
.a11y-viewport .vp-content line {
  stroke: rgba(8, 8, 8, 0.1); stroke-width: 1;
}
.a11y-viewport .vp-content-text rect {
  fill: rgba(8, 8, 8, 0.15);
}
.a11y-viewport .vp-comp circle {
  fill: var(--accent-on-light);
}
.a11y-viewport .vp-comp circle.warn {
  fill: #B45309;
}
.a11y-viewport .vp-callouts line {
  stroke: var(--accent-on-light); stroke-width: 1;
}
.a11y-viewport .vp-callouts .kicker {
  fill: var(--accent-on-light);
  font-family: var(--f-mono); font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.a11y-viewport .vp-callouts .cap {
  fill: var(--ink-dim);
  font-family: var(--f-mono); font-size: 13px;
  letter-spacing: 0.1em;
}
.a11y-viewport .vp-callouts .callout {
  fill: var(--ink-mid);
  font-family: var(--f-mono); font-size: 12px;
  letter-spacing: 0.08em;
}

@media (max-width: 768px) {
  /* Mobile: drop the vertical AA/AAA threshold lines (the line position was
     calibrated to the desktop 38% bar offset and the % math no longer holds when
     bars span 100% of the container). The per-row ratio numbers (5.7:1 → 15.2:1)
     are all above 4.5:1, so the verdict is self-evident — caption announces it. */
  .a11y-cb-row { grid-template-columns: 1fr; gap: 0.4rem; padding: 0.7rem 0; }
  .a11y-cb-row .bar { width: 100%; }
  .a11y-cb-scale { display: none; }
  .a11y-contrast::before {
    content: 'AA · 4.5 : 1 · all pairs clear';
    display: block;
    font-family: var(--f-mono);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-on-light);
    margin-bottom: 0.75rem;
  }
}

/* .refl block PROMOTED to case-study.css (shared) in case-02/03/04/05 now
   use the same editorial-reflection treatment on their dark closing band. case-01
   keeps using it on cream (.cs-section.refl) via the shared base rules. */

/* Hero deliverables line (round-1 #02) — sits under the hero meta row, one
   line, mono kicker + interpunct-separated list. Mirrors the .cs-meta-* visual
   vocabulary so it reads as part of the hero header strip. */
.cs-hero-deliverables {
  margin: 1rem 0 0;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ink-mid);
  line-height: 1.55;
  max-width: 76ch;
}
.cs-hero-deliverables .ddl-kicker {
  color: var(--accent-on-light);
  margin-right: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}

/* Hero disclosure (round-1 #03, REVISED) — lives inside the hero
   header strip (after Shipped line), reading as Role / Timeline / Shipped /
   Disclosure. Anchored by the hero block, never floats orphan. Quiet mono with
   teal kicker. DS stays in the room with the production UI. */
.cs-hero-disclosure {
  margin: 0.65rem 0 0;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--ink-mid);
  max-width: 76ch;
}
.cs-hero-disclosure .hdis-kicker {
  display: inline;
  color: var(--accent-on-light);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin-right: 0.5rem;
}
.cs-hero-disclosure .hdis-body { color: var(--ink-mid); }

/* Operator context (Option Z) — was a 5th orphan stat in the .bsr grid;
   now a context-line below the 4 KPI stats. Qualitatively different (screen
   spec, not a scale figure) so it earns its own register: top hairline divider,
   mono teal kicker, display-font value. The 4 KPI grid above is now coherent
   (no orphan row). */
.bsr-context {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(240, 237, 232, 0.1);
}
.bsr-context-label {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  flex-shrink: 0;
}
.bsr-context-value {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 0.85rem + 1.2vw, 1.65rem);
  letter-spacing: -0.005em;
  color: var(--bg);
  white-space: nowrap;
}
.bsr-mult {
  /* Multiplication-sign separator inside the operator-context value. <span>
     (not <i>) because decode.js only wraps TEXT_NODE/SPAN/BR; <i> is skipped
     and the char disappears. ink-on-dark color so it reads on the #141414
     ground (was --ink-mid, invisible on dark). */
  color: var(--ink-on-dark);
  margin: 0 0.06em;
  font-weight: 400;
}
@media (max-width: 768px) {
  .bsr-context { flex-direction: column; gap: 0.35rem; margin-top: 1.25rem; padding-top: 1rem; }
}

/* PT-BR localisation of CSS-generated a11y annotations (applies only when page lang is pt-BR).
   Overrides only the `content` text; positioning/font inherit from the base rules above. */
:lang(pt-BR) .dens-row.is-focused::after { content: 'alvo de toque'; }
@media (max-width: 768px) {
  :lang(pt-BR) .a11y-contrast::before { content: 'AA · 4.5 : 1 · todos os pares aprovados'; }
}