/* ═══════════════════════════════════════════════════════════════
   TREFT · treft.dev — the web front door (W01, redesigned W05,
   approval-cockpit homepage W09)
   One law, two illuminations. Night tokens are TFT-GC-002
   (design/glass-cockpit-v2.html) byte-exact; day tokens are C08's
   measured TFT-GC-003 (design/glass-cockpit-day-v1.html), applied
   via prefers-color-scheme. Zero glow in day: phosphor bloom is a
   night physics. No frameworks, no analytics, no cookies, no
   external requests — B612 is bundled (OFL, BRAND.md law 5).
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "B612";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/b612-400.woff2") format("woff2");
}
@font-face {
  font-family: "B612";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/b612-700.woff2") format("woff2");
}
@font-face {
  font-family: "B612";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/b612-italic-400.woff2") format("woff2");
}
@font-face {
  font-family: "B612 Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/b612mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "B612 Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/b612mono-700.woff2") format("woff2");
}

:root {
  /* NIGHT — the identity (TFT-GC-002, exact) */
  --void: #040507;
  --substrate: #070a0d;
  --panel: #0c1014;
  --panel2: #11161c;
  --inlay: #171d25;
  --line: rgba(220, 235, 245, 0.08);
  --line2: rgba(220, 235, 245, 0.17);
  --ink: #f2f6f8;
  --grey: #97a2ac;
  /* W07: #525c66 was the C08-convicted 2.91:1 AA failure — #77828C reads ≥4.5:1 on void/panel. */
  --faint: #77828c;
  --norm: #17e383;
  --mark: #17e383; /* the logo — the identity green (tracks --norm at night) */
  --cmd: #ee6fd8;
  --adv: #4fc3e8;
  --caut: #ffb52e;
  --warn: #ff4d52;
  --norm-dim: rgba(23, 227, 131, 0.12);
  --cmd-dim: rgba(238, 111, 216, 0.13);
  --adv-dim: rgba(79, 195, 232, 0.11);
  --caut-dim: rgba(255, 181, 46, 0.12);
  --warn-dim: rgba(255, 77, 82, 0.12);
  --norm-bd: rgba(23, 227, 131, 0.45);
  --cmd-bd: rgba(238, 111, 216, 0.55);
  --adv-bd: rgba(79, 195, 232, 0.4);
  --caut-bd: rgba(255, 181, 46, 0.45);
  --warn-bd: rgba(255, 77, 82, 0.4);
  /* phosphor bloom — night only */
  --glow-norm: 0 0 14px rgba(23, 227, 131, 0.4);
  --glow-norm-s: 0 0 9px rgba(23, 227, 131, 0.35);
  --glow-adv-s: 0 0 8px rgba(79, 195, 232, 0.45);
  --glow-caut-s: 0 0 9px rgba(255, 181, 46, 0.3);
  --grid: rgba(220, 235, 245, 0.016);
  --halo: rgba(79, 195, 232, 0.045);
  --shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
  --mono: "B612 Mono", ui-monospace, "SF Mono", monospace;
  --sans: "B612", -apple-system, "SF Pro Text", sans-serif;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    /* DAY — C08's measured tokens (TFT-GC-003, exact). Day ADDS; night never moves. */
    --void: #f4f7f9;
    --substrate: #e4e9ed;
    --panel: #dae0e6;
    --panel2: #d0d7de;
    --inlay: #c4ccd5;
    --line: rgba(16, 24, 32, 0.1);
    --line2: rgba(16, 24, 32, 0.22);
    --ink: #101820;
    --grey: #3f4b55;
    --faint: #57636d;
    --norm: #087040;
    --mark: #055c30; /* the logo — a darker green than --norm for contrast on the light ground */
    --cmd: #96177c;
    --adv: #0c647f;
    --caut: #7a5000;
    --warn: #b3131a;
    --norm-dim: rgba(8, 112, 64, 0.14);
    --cmd-dim: rgba(150, 23, 124, 0.14);
    --adv-dim: rgba(12, 100, 127, 0.14);
    --caut-dim: rgba(122, 80, 0, 0.14);
    --warn-dim: rgba(179, 19, 26, 0.14);
    --norm-bd: rgba(8, 112, 64, 0.5);
    --cmd-bd: rgba(150, 23, 124, 0.5);
    --adv-bd: rgba(12, 100, 127, 0.45);
    --caut-bd: rgba(122, 80, 0, 0.5);
    --warn-bd: rgba(179, 19, 26, 0.5);
    /* daylight kills phosphor — zero glow in day */
    --glow-norm: none;
    --glow-norm-s: none;
    --glow-adv-s: none;
    --glow-caut-s: none;
    --grid: rgba(16, 24, 32, 0.02);
    --halo: rgba(12, 100, 127, 0.05);
    --shadow: 0 40px 90px rgba(16, 24, 32, 0.14);
    color-scheme: light;
  }
}

/* ── base ── */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--void);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}

/* the engraved substrate: faint 100px grid + a cool halo off the top */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1100px 540px at 50% -8%, var(--halo), transparent 62%),
    repeating-linear-gradient(0deg, transparent 0 99px, var(--grid) 99px 100px),
    repeating-linear-gradient(90deg, transparent 0 99px, var(--grid) 99px 100px);
}

.sheet {
  position: relative;
  z-index: 1;
  max-width: 1104px;
  margin: 0 auto;
  padding: 0 28px 64px;
}

a {
  color: var(--adv);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:focus-visible {
  /* W19 (audit §14): a visible, unmistakable keyboard focus — 2px, offset, both illuminations */
  outline: 2px solid var(--adv);
  outline-offset: 3px;
}

/* ── masthead ── */
.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 0 22px;
  border-bottom: 1px solid var(--line);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.46em;
  color: var(--ink);
}
.wordmark .mark {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.wordmark .mark path,
.wordmark .mark polygon,
.wordmark .mark circle {
  fill: var(--mark);
}
.mastnav {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  row-gap: 6px;
  justify-content: flex-end;
}
.mastnav a {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  font-weight: 700;
  color: var(--grey);
  text-transform: uppercase;
  /* a real ≥44px tap target on the links every mobile visitor uses (W07 B10 → W19 §14) */
  padding: 14px 6px;
  margin: -14px -6px;
}
.mastnav a:hover {
  color: var(--ink);
  text-decoration: none;
}
.mastnav a[aria-current="page"] {
  color: var(--norm);
}

/* ── shared idioms ── */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--norm);
  font-weight: 700;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--norm-bd);
  flex-shrink: 0;
}

.placard {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 700;
}
.placard.g {
  color: var(--norm);
}
.placard.r {
  color: var(--warn);
}
.placard.c {
  color: var(--adv);
}

.lamp {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border: 1px solid var(--line2);
}
.lamp.g {
  border-color: var(--norm-bd);
  background: var(--norm);
  box-shadow: var(--glow-norm-s);
}
.lamp.c {
  border-color: var(--adv-bd);
  background: var(--adv);
  box-shadow: var(--glow-adv-s);
}
.lamp.m {
  border-color: var(--cmd-bd);
  background: var(--cmd);
}

.readlink {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--norm);
  text-decoration: none;
  border: 1px solid var(--norm-bd);
  background: transparent;
  padding: 12px 18px;
}
.readlink:hover {
  background: var(--norm-dim);
  text-decoration: none;
}

/* section head: eyebrow + a big sans statement */
.sectionhead {
  margin: 128px 0 36px;
  max-width: 720px;
}
.sectionhead h2 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(27px, 3.6vw, 40px);
  line-height: 1.14;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin-top: 18px;
}
.sectionhead .sub {
  margin-top: 14px;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--grey);
  max-width: 58ch;
}
.sectionhead .sub b {
  color: var(--ink);
}

/* ── hero ── */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: 64px;
  align-items: center;
  padding: 92px 0 40px;
}
.hero h1 {
  font-family: var(--sans);
  font-weight: 700;
  /* W19: the Option-A headline is ~2× the old one — a step down keeps the hero airborne */
  font-size: clamp(33px, 4.4vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin-top: 22px;
}
.hero h1 em {
  font-style: normal;
  color: var(--norm);
  text-shadow: var(--glow-norm);
}
.hero .lede {
  font-size: 17.5px;
  line-height: 1.75;
  color: var(--grey);
  margin-top: 26px;
  max-width: 52ch;
}
.hero .lede b {
  color: var(--ink);
}

/* CTAs — bordered instrument panels, not pill buttons */
.ctarow {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: stretch;
  margin-top: 38px;
}
/* a bare text link beside a stretched CTA panel centers, never pins to the top edge */
.ctarow > a {
  align-self: center;
}
.cta {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--line2);
  background: var(--panel);
  padding: 13px 20px;
}
.cta svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.cta svg polygon,
.cta svg circle {
  fill: var(--ink);
}
.cta .k {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.24em;
  color: var(--faint);
  font-weight: 700;
  text-transform: uppercase;
}
.cta .v {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 3px;
  letter-spacing: 0.07em;
}
.cta.web {
  border-color: var(--norm-bd);
}
.cta.web .v {
  color: var(--norm);
}
.gatenote {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--faint);
  font-weight: 700;
  text-transform: uppercase;
}

/* ── W09: the product, for real — framed store captures ──
   The screenshots stay FIXED NIGHT in both illuminations: the C08
   LA/widget dark-instrument-cluster law, applied to marketing. */
.seelink {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--adv);
  /* a real tap target (W07 B10) */
  padding: 10px 2px;
  margin: -10px -2px;
}
.heroshot {
  min-width: 0;
  max-width: 100%;
  margin: 0;
}
.heroshot .devframe {
  width: min(324px, 100%);
}
.devframe {
  width: min(292px, 100%);
  margin: 0 auto;
  border-radius: 46px;
  border: 1px solid var(--line2);
  background: var(--inlay);
  padding: 9px;
  box-shadow: var(--shadow);
}
.devframe img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 37px; /* concentric: outer 46 − 9 padding (W07 B5) */
  border: 1px solid var(--line);
  background: #040507; /* the capture's own night ground, both illuminations */
}
.heroshot figcaption,
.shot figcaption {
  margin-top: 14px;
  text-align: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  line-height: 1.9;
  color: var(--faint);
  font-weight: 700;
  text-transform: uppercase;
}
.shot figcaption b {
  color: var(--grey);
}
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px 24px;
}
.shot {
  min-width: 0;
  margin: 0;
}

/* ── W09: the five pains — caution-lettered panels, a full 2+3 plate ── */
.pains {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.pain {
  grid-column: span 2;
  border: 1px solid var(--line);
  background: var(--substrate);
  padding: 24px 24px 26px;
}
.pain:nth-child(-n + 2) {
  grid-column: span 3;
}
/* W19: the condensed three-pain plate — one even row */
.pains.three .pain,
.pains.three .pain:nth-child(-n + 2) {
  grid-column: span 2;
}
.pain h3 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--caut);
  margin-bottom: 10px;
}
.pain p {
  /* C15: 15px — sibling panels (.step p / .pillar p) are 15px; the pains are not subordinate */
  font-size: 15px;
  line-height: 1.7;
  color: var(--grey);
}

/* (W16's .floodstats card row retired at W19 — the audit keeps ONE stat inline in the
   problem sub; the remaining primary-verified figures moved to /verification/'s
   measurement appendix. The written-citation law continues via .cite.) */

/* ── W09: the loop — steps, one instrument strip (5 → 3 customer-visible at W19) ── */
.steps {
  border: 1px solid var(--line);
  background: var(--panel);
}
.step {
  display: flex;
  gap: 20px;
  padding: 20px 24px;
  border-top: 1px solid var(--line);
}
.step:first-child {
  border-top: none;
}
.step .n {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--norm);
  flex-shrink: 0;
  padding-top: 3px;
}
.step h3 {
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.step p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--grey);
  max-width: 62ch;
}
.step p b {
  color: var(--ink);
}
/* the included engine, demoted to the loop strip's footer line (W09) */
.stepnote {
  border-top: 1px solid var(--line);
  background: var(--substrate);
  padding: 13px 24px 15px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.7;
  color: var(--faint);
}

/* ── the three pillars — one instrument panel ── */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.pillar {
  background: var(--substrate);
  padding: 32px 28px 36px;
}
.pillar .lamp {
  margin-bottom: 20px;
}
.pillar h3 {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 13px;
}
.pillar p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--grey);
}
.pillar p b {
  color: var(--ink);
}

/* ── W12: who it's for — three persona cards under one frame ── */
.personas .grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.persona {
  background: var(--substrate);
  padding: 30px 26px 34px;
}
.persona .who {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--norm);
  margin-bottom: 14px;
}
.persona h3 {
  font-family: var(--sans);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 12px;
}
.persona p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--grey);
}
.persona p b {
  color: var(--ink);
}
/* the any-agent universality, kept as the section's footer strip */
.personafoot {
  border: 1px solid var(--line);
  border-top: none;
  background: var(--panel);
  padding: 14px 24px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
}
.personafoot .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.personafoot .chips span {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--grey);
  border: 1px solid var(--line2);
  padding: 6px 10px;
  white-space: nowrap;
}
.personafoot p {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.7;
  color: var(--faint);
}
.personafoot p b {
  color: var(--grey);
}

/* ── the receipts — the one green moment ── */
.receipts {
  margin-top: 128px;
  border: 1px solid var(--norm-bd);
  background: var(--norm-dim);
  padding: 44px 40px;
}
.receipts h2 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.14;
  letter-spacing: -0.012em;
  margin-top: 18px;
  text-wrap: balance;
}
.receipts p {
  margin-top: 16px;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--grey);
  max-width: 62ch;
}
.receipts p b {
  color: var(--ink);
}
.receipts .readlink {
  margin-top: 26px;
}

.receipts .rlist {
  margin: 22px 0 6px;
  padding: 0;
  display: grid;
  gap: 9px;
}
.receipts .rlist li {
  list-style: none;
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--grey);
  max-width: 68ch;
}
.receipts .rlist li::before {
  content: "▸";
  position: absolute;
  left: 0;
  top: 3px;
  color: var(--norm);
  font-family: var(--mono);
  font-size: 9px;
}
.receipts .rlist li b {
  color: var(--ink);
}

/* ── C15: the tier gauge — attention as an instrument (§5b redesign) ──
   The concept drawn: three settings of one gauge. Visual weight ascends
   with the attention each tier asks for — glance lightest (hairline,
   air, the product's green chip), read middle (default border, neutral
   chip), full heaviest (caution rule + wash, the C14 tier-banner's own
   grammar). Chips echo the product bytes (GLANCE / READ ×N / FULL REVIEW). */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
.tier {
  border: 1px solid var(--line);
  background: var(--substrate);
  padding: 22px 22px 24px;
}
.tier.read {
  border-color: var(--line2);
  background: var(--panel);
}
.tier.full {
  border: 1px solid var(--caut-bd);
  border-left: 3px solid var(--caut);
  background: var(--caut-dim);
}
.tierhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.tchip {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid var(--line2);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--grey);
  background: var(--panel2);
  white-space: nowrap;
}
.tchip.g {
  border-color: var(--norm-bd);
  color: var(--norm);
  background: var(--norm-dim);
}
.tchip.c {
  border-color: var(--caut-bd);
  color: var(--caut);
  background: var(--caut-dim);
}
/* the attention gauge — a five-tick strip; same instrument, three readings */
.gauge {
  display: inline-flex;
  gap: 3px;
  flex-shrink: 0;
}
.gauge i {
  width: 5px;
  height: 13px;
  border: 1px solid var(--line2);
  background: transparent;
}
.gauge i.on {
  background: var(--grey);
  border-color: var(--grey);
}
.gauge.g i.on {
  background: var(--norm);
  border-color: var(--norm-bd);
  box-shadow: var(--glow-norm-s);
}
.gauge.c i.on {
  background: var(--caut);
  border-color: var(--caut-bd);
  box-shadow: var(--glow-caut-s);
}
.tier .def {
  font-size: 15px;
  line-height: 1.7;
  color: var(--grey);
}
.tier .act {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--faint);
}
.tier.full .def,
.tier.full .act {
  color: var(--grey);
}

/* the computed-from signals — a compact instrument row (the /verification pipeline idiom) */
.signalrow {
  margin-top: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 14px 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.signalrow .sk {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.24em;
  color: var(--faint);
  text-transform: uppercase;
  font-weight: 700;
  margin-right: 6px;
}
.signalrow .sig {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--grey);
  border: 1px solid var(--line2);
  background: var(--substrate);
  padding: 7px 10px;
  white-space: nowrap;
}

/* the citation law — a law line with ceremony, not a bold paragraph */
.tierlaw {
  margin-top: 44px;
  text-align: center;
}
.tierlaw .law {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
  max-width: 34ch;
  margin: 0 auto;
}
.tierlaw .pl {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.3em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--norm);
}
.tierlaw .pl span {
  white-space: nowrap;
}
.tierlaw .pl::before,
.tierlaw .pl::after {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--norm-bd);
  flex-shrink: 0;
}
@media (max-width: 560px) {
  /* the law placard stays one line on the narrowest phones */
  .tierlaw .pl {
    letter-spacing: 0.18em;
    gap: 10px;
  }
  .tierlaw .pl::before,
  .tierlaw .pl::after {
    width: 16px;
  }
}

/* ── closing CTA ── */
.close {
  margin: 128px 0 24px; /* the strict 128/104 rhythm (W07 B4) */
  text-align: center;
}
.close h2 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.close p {
  margin: 18px auto 0;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--grey);
  max-width: 52ch;
}
.close p b {
  color: var(--ink);
}
.close .ctarow {
  justify-content: center;
}
.close .gatenote {
  margin-top: 18px;
}

/* ── footer ── */
.foot {
  margin-top: 96px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.foot .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.foot .brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.42em;
  font-weight: 700;
  color: var(--faint);
}
.foot .brand svg {
  width: 14px;
  height: 14px;
}
.foot .brand svg polygon,
.foot .brand svg circle {
  fill: var(--mark);
}
.foot nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  row-gap: 8px;
}
.foot nav a {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--grey);
  text-transform: uppercase;
  /* a real ≥44px tap target (W07 B10 → W19 §14) */
  padding: 15px 6px;
  margin: -15px -6px;
}
.foot .legal {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  line-height: 2;
  color: var(--faint);
}

/* ── document pages (/verification, /privacy, /support) ── */
.doc {
  max-width: 760px;
}
.doc-head {
  margin: 72px 0 12px;
}
.doc-head h1 {
  font-family: var(--sans);
  font-size: clamp(30px, 4.6vw, 44px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.1;
  text-wrap: balance;
  margin-top: 20px;
}
.doc-head .meta {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--grey);
  max-width: 60ch;
}
.doc-head .meta b {
  color: var(--ink);
}
.doc section {
  padding: 28px 0 8px;
  border-top: 1px solid var(--line);
  margin-top: 30px;
}
.doc section:first-of-type {
  border-top: none;
  margin-top: 16px;
}
.doc h2 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--norm);
  font-weight: 700;
  margin-bottom: 16px;
}
/* a second h2 inside one section breathes like a section break, never flush (W07 B2) */
.doc h2:not(:first-child) {
  margin-top: 40px;
}
.doc h3 {
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 20px 0 6px;
}
.doc p,
.doc li {
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--grey);
}
.doc p + p {
  margin-top: 13px;
}
.doc p b,
.doc li b {
  color: var(--ink);
}
.doc ul {
  margin: 10px 0 4px;
  padding-left: 0;
}
.doc li {
  list-style: none;
  padding-left: 18px;
  position: relative;
  margin-bottom: 9px;
}
.doc li::before {
  content: "▸";
  position: absolute;
  left: 0;
  top: 4px;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 9px;
}
.doc ol {
  margin: 10px 0 4px;
  padding-left: 0;
  counter-reset: step;
}
.doc ol li {
  counter-increment: step;
  padding-left: 32px;
}
.doc ol li::before {
  content: "0" counter(step);
  color: var(--faint);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  top: 3px;
}
.doc code,
.doc a code {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--adv);
}

/* ── W09: /verification — the first 60 seconds ── */
.govline {
  margin: 26px 0 10px;
  border: 1px solid var(--line2);
  border-left: 3px solid var(--norm);
  background: var(--panel);
  padding: 20px 24px;
  font-family: var(--sans);
  font-size: clamp(17px, 2.2vw, 20px);
  line-height: 1.55;
  font-weight: 700;
  color: var(--grey);
  text-wrap: balance;
}
.govline em {
  font-style: normal;
  color: var(--ink);
}
.foldstat {
  margin-top: 12px;
  border: 1px solid var(--line2);
  background: var(--panel);
  padding: 22px 24px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px 32px;
  align-items: center;
}
.foldstat .k {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.24em;
  color: var(--faint);
  text-transform: uppercase;
  font-weight: 700;
}
.foldstat .v {
  /* the numeral law (C13B T-1): display numerals are B612 sans bold, tracking 0 */
  font-family: var(--sans);
  font-size: clamp(40px, 6vw, 54px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
  color: var(--ink);
  margin-top: 6px;
}
.foldstat .ci {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--grey);
  margin-top: 7px;
}
.foldstat .why {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--grey);
  margin: 0;
  max-width: 52ch;
}
.foldstat .why b {
  color: var(--ink);
}

/* ── W09: the pipeline strip — what every approved change went through ── */
.pipeline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 16px 18px;
  margin: 16px 0 6px;
}
.pipeline .stage {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--grey);
  border: 1px solid var(--line2);
  background: var(--substrate);
  padding: 8px 10px;
  white-space: nowrap;
}
.pipeline .stage.grade {
  color: var(--norm);
  border-color: var(--norm-bd);
  background: var(--norm-dim);
}
.pipeline .stage.you {
  color: var(--cmd);
  border-color: var(--cmd-bd);
  background: var(--cmd-dim);
}
.pipeline .arr {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--faint);
}
.doc .pipenote {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--grey);
}
.doc .pipenote b {
  color: var(--ink);
}

.ladder {
  border: 1px solid var(--line);
  background: var(--panel);
  margin-top: 16px;
}
.rung {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  gap: 18px;
  padding: 16px 20px;
  border-top: 1px solid var(--line);
}
.rung:first-child {
  border-top: none;
}
.rung .name {
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.rung code {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--grey);
}
.rung.g code {
  color: var(--norm);
}
.rung.m code {
  color: var(--cmd);
}
.rung .d {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.65;
  color: var(--grey);
}
.rung .d b {
  color: var(--ink);
}

/* ── /verification — measurement notes (C13B): fine print, methodology voice ── */
.mnotes {
  margin-top: 64px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.doc .mnotes h2 {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 700;
  margin: 0 0 10px;
}
.doc .mnotes ul {
  margin: 8px 0;
  padding-left: 18px;
}
.doc .mnotes li {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.7;
  color: var(--faint);
}
.doc .mnotes p {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.7;
  color: var(--faint);
  margin: 0;
}
.doc .mnotes code {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--grey);
}

/* ── error / fallback pages ── */
.void-page {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 0;
}
.void-page .code {
  font-family: var(--mono);
  font-size: clamp(48px, 9vw, 88px);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
}
.void-page .placard {
  margin-bottom: 20px;
}
.void-page p {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--grey);
  max-width: 52ch;
  margin-top: 20px;
}
.void-page p b {
  color: var(--ink);
}
.void-page .ctarow {
  margin-top: 28px;
}

/* ── responsive ── */
@media (max-width: 960px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
    padding: 64px 0 24px;
  }
  .sectionhead {
    margin: 104px 0 28px;
  }
  .receipts {
    margin-top: 104px;
  }
  .personas .grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .pains {
    grid-template-columns: minmax(0, 1fr);
  }
  .pain,
  .pain:nth-child(-n + 2) {
    grid-column: auto;
  }
  .floodstats {
    grid-template-columns: minmax(0, 1fr);
  }
  .close {
    margin-top: 112px;
  }
  .pillars {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 860px) {
  /* the tier instruments stack; ascending weight stays legible top-to-bottom */
  .tiers {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 560px) {
  .sheet {
    padding: 0 20px 56px;
  }
  .rung {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .foldstat {
    grid-template-columns: minmax(0, 1fr);
  }
  .receipts {
    padding: 32px 24px;
  }
  .persona {
    padding: 24px 20px 28px;
  }
  .personafoot {
    padding: 14px 20px 16px;
  }
  .step {
    padding: 18px 18px;
    gap: 14px;
  }
  .stepnote {
    padding: 13px 18px 15px;
  }
}

/* ── W15: /pricing — honest pricing in the doc shell ── */
.plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}
.plan {
  border: 1px solid var(--line2);
  /* W19 (audit §10 visual note): square instrument grammar, not rounded SaaS cards */
  border-radius: 2px;
  background: var(--panel);
  padding: 26px 24px 20px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.plan.pro {
  border-color: var(--norm-bd);
}
.plan .plan-tier {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--grey);
}
.plan.pro .plan-tier {
  color: var(--norm);
}
.plan .price {
  /* the numeral law (C13B T-1): display numerals are B612 sans bold, tracking 0 */
  font-family: var(--sans);
  font-size: clamp(34px, 5vw, 44px);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
  color: var(--ink);
  margin-top: 12px;
}
.plan .price .per {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--faint);
  margin-left: 6px;
}
.plan .alt {
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--grey);
}
.plan .lead {
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.doc .plan ul {
  margin-top: 10px;
}
.doc .plan li {
  font-size: 14.5px;
  line-height: 1.65;
  margin-bottom: 8px;
}
.packs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 16px 0 14px;
}
.pack {
  border: 1px solid var(--line);
  /* W19 (audit §10 visual note): square instrument grammar */
  border-radius: 2px;
  background: var(--panel);
  padding: 18px 10px 14px;
  text-align: center;
  min-width: 0;
}
.pack .v {
  /* the numeral law (C13B T-1) */
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
  color: var(--ink);
}
.pack .k {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--faint);
}
.doc .ctarow {
  margin-top: 18px;
}
@media (max-width: 560px) {
  .plans {
    grid-template-columns: minmax(0, 1fr);
  }
  .pack .v {
    font-size: 21px;
  }
  .pack .k {
    letter-spacing: 0.16em;
  }
}

/* ═══════════════════════════════════════════════════════════════
   W19 · COMMERCIAL COMPLETION (D128) — the audit executed.
   Conversion, proof, discovery, a11y — the EFIS grammar untouched:
   same tokens, same two illuminations, still zero JS.
   ═══════════════════════════════════════════════════════════════ */

/* ── the skip link (§14): first tab stop, visible only on focus ── */
.skip {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 100;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--norm-bd);
  padding: 13px 18px;
}
.skip:focus {
  left: 16px;
  text-decoration: none;
}

/* ── the masthead conversion action (P0-2): compact, bordered, ≥44px ── */
.mastnav .mastcta {
  color: var(--norm);
  border: 1px solid var(--norm-bd);
  background: var(--norm-dim);
  padding: 13px 14px;
  margin: -10px 0;
}
.mastnav .mastcta:hover {
  color: var(--void);
  background: var(--norm);
}

/* ── command CTAs (P0-2): instrument panels with a real pressed state ── */
.btncta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 4px 24px;
  border: 1px solid var(--norm-bd);
  background: var(--norm-dim);
  color: var(--norm);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
}
.btncta:hover {
  background: var(--norm);
  color: var(--void);
  text-decoration: none;
}
.btncta:active {
  transform: translateY(1px);
}
.btncta.ghost {
  border-color: var(--line2);
  background: transparent;
  color: var(--ink);
}
.btncta.ghost:hover {
  border-color: var(--ink);
  background: var(--panel);
  color: var(--ink);
}

/* ── the retained brand promise, prominent under the Option-A lede ── */
.hero .promise {
  margin-top: 16px;
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
}

/* the quiet App-Store availability line (P0-2: never button-shaped) */
.storenote {
  margin-top: 20px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.7;
  color: var(--faint);
}

/* ── §8.2 works-with strip — the personafoot idiom, standalone ── */
.agentsrow {
  margin-top: 56px;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 15px 24px 17px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
}
.agentsrow .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.agentsrow .chips span {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--grey);
  border: 1px solid var(--line2);
  padding: 6px 10px;
  white-space: nowrap;
}
.agentsrow p {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.7;
  color: var(--faint);
}
.agentsrow p b {
  color: var(--grey);
}

/* a written citation, inline (the W16 stats law, prose form) */
.cite {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--faint);
}

/* ── §8.4 the sample decision — enlarged annotated evidence crops (P0-3).
   The crop panels are FIXED NIGHT in both illuminations (the C08
   dark-instrument law for product pixels), so their caption colors are
   night literals, never day-flipping tokens. ── */
.sampleproof {
  display: grid;
  gap: 12px;
}
.evcrop {
  margin: 0;
  min-width: 0;
  border: 1px solid var(--line2);
  background: #040507;
  padding: 16px 16px 12px;
}
.evcrop figcaption {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.65;
  color: #97a2ac;
  margin-bottom: 12px;
}
.evcrop figcaption b {
  color: #f2f6f8;
}
.evcrop .tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #17e383;
  border: 1px solid rgba(23, 227, 131, 0.45);
  padding: 4px 8px;
  margin-right: 8px;
}
.evcrop img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(220, 235, 245, 0.08);
}
.evgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.sampleproof .ctarow {
  margin-top: 24px;
}

/* ── W22 round 2 (founder): the specimen strip retired for ONE framed card — the four
   crops are sequential sections of a single decision card and stack into one object.
   FIXED NIGHT in both illuminations (the C08 dark-instrument law); tags = quiet corner
   chips satisfying the annotated-proof pin; the caption is one honest mono line. ── */
.cardstack {
  margin: 56px auto 0;
  max-width: 620px;
  border: 1px solid var(--line2);
  background: #040507;
  padding: 14px;
  border-radius: 6px;
}
.cardstack .seg {
  position: relative;
}
.cardstack .seg + .seg {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(220, 235, 245, 0.07);
}
.cardstack .tag {
  position: absolute;
  top: 16px;
  right: 8px;
  z-index: 1;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(23, 227, 131, 0.75);
  background: rgba(4, 5, 7, 0.82);
  border: 1px solid rgba(23, 227, 131, 0.3);
  padding: 3px 7px;
}
.cardstack .seg + .seg .tag {
  top: 26px;
}
.cardstack img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(220, 235, 245, 0.06);
}
.cardstack .striphead {
  margin: 12px 2px 0;
  text-align: center;
}
.striphead {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ── §14 day-mode contrast: chip/stage foregrounds on their dim washes
   read ≥5:1 (measured — the light-scheme AA failures the audit named) ── */
@media (prefers-color-scheme: light) {
  .tchip.g {
    color: #065a34;
  }
  .tchip.c {
    color: #5c3c00;
  }
  .pipeline .stage.grade {
    color: #065a34;
  }
  .pipeline .stage.you {
    color: #7c1266;
  }
}

/* ── §14 body links: distinguishable without relying on color ── */
.doc p a:not(.btncta):not(.readlink),
.doc li a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── §11 long-form docs: table of contents ── */
.toc {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 18px 22px 14px;
  margin: 20px 0 6px;
}
.toc .placard {
  margin-bottom: 10px;
}
.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 28px;
}
.toc ol li {
  counter-increment: none;
  padding-left: 0;
  margin-bottom: 8px;
  break-inside: avoid;
}
.toc ol li::before {
  content: none;
}
.toc a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--grey);
}
.toc a:hover {
  color: var(--ink);
}
@media (max-width: 560px) {
  .toc ol {
    columns: 1;
  }
}

/* ── §10 pricing: per-plan actions + the compare table ── */
.plan ul {
  flex: 1 0 auto;
}
.plan .btncta {
  margin-top: 16px;
  width: 100%;
}
.compare {
  overflow-x: auto;
  border: 1px solid var(--line);
  background: var(--panel);
  margin-top: 16px;
}
.compare table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
}
.compare th {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--faint);
  text-align: left;
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--line2);
}
.compare td {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--grey);
  padding: 11px 18px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.compare tr:last-child td {
  border-bottom: none;
}
.compare td:first-child {
  color: var(--ink);
  white-space: nowrap;
}
.compare td b {
  color: var(--ink);
}

/* ── /sample/ — the annotated decision card, in the product's own anatomy ── */
.samplenote {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--adv-bd);
  background: var(--adv-dim);
  color: var(--adv);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 8px 12px;
  margin: 18px 0 6px;
}
.dcard {
  border: 1px solid var(--line2);
  background: var(--panel);
  margin-top: 18px;
}
.dcard .dhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
}
.dcard .dbody {
  padding: 22px 22px 24px;
}
.doc .dcard .intent {
  /* the intent is the card's sentence, not a doc heading — undo the doc-h2 placard voice */
  font-family: var(--sans);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
  margin: 0 0 8px;
}
.dcard .dsum {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--grey);
  margin: 0 0 16px;
}
.dtier {
  display: flex;
  align-items: baseline;
  gap: 12px;
  border: 1px solid var(--line2);
  border-left: 3px solid var(--grey);
  background: var(--panel2);
  padding: 10px 14px;
  margin-bottom: 16px;
}
.dtier .t {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink);
  white-space: nowrap;
}
.dtier .r {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--grey);
}
.dmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 16px;
}
.dmeta .chip {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
  border: 1px solid var(--line2);
  padding: 5px 9px;
  white-space: nowrap;
}
.dmeta .chip.agent {
  color: var(--adv);
  border-color: var(--adv-bd);
}
.dmeta .plain {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.dverdict {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--norm);
  margin: 2px 0 4px;
}
.dverdict + p {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.65;
  color: var(--grey);
  margin: 0 0 18px;
}
.dtiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}
.dtiles .tile {
  border: 1px solid var(--line2);
  background: var(--substrate);
  text-align: center;
  padding: 14px 6px 11px;
}
.dtiles .tile.pass {
  border-color: var(--norm-bd);
}
.dtiles .tile .v {
  /* the numeral law (C13B T-1) */
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
  color: var(--ink);
}
.dtiles .tile.pass .v {
  color: var(--norm);
}
.dtiles .tile .k {
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--faint);
}
.drec {
  border-top: 1px solid var(--line);
}
.drec .rrow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.drec .claim {
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
}
.drec .ref {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--grey);
}
.drec .oracle {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--adv);
  white-space: nowrap;
}
.ddock {
  border-top: 1px solid var(--line);
  background: var(--substrate);
  padding: 16px 22px 18px;
}
.ddock .hold {
  /* the hazard-striped guard frame (C08), drawn: a striped plate with a solid inner panel */
  padding: 5px;
  background: repeating-linear-gradient(45deg, var(--caut) 0 12px, var(--panel2) 12px 24px);
}
.ddock .hold .in {
  display: block;
  background: var(--panel);
  text-align: center;
  padding: 15px 12px;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--cmd);
}
.ddock .verbs {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.ddock .verbs span {
  flex: 1;
  text-align: center;
  border: 1px solid var(--caut-bd);
  color: var(--caut);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  padding: 11px 8px;
}
.ddock .verbs span.rej {
  border-color: var(--warn-bd);
  color: var(--warn);
}
.doutcome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  border: 1px solid var(--norm-bd);
  background: var(--norm-dim);
  padding: 13px 16px;
  margin-top: 14px;
}
.doutcome .lamp {
  flex-shrink: 0;
}
.doutcome .what {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--norm);
}
.doutcome .who {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--grey);
}
/* the annotation voice — what each element means, beside the card's parts */
.doc .annot {
  border-left: 2px solid var(--adv-bd);
  background: var(--adv-dim);
  padding: 10px 14px;
  margin: 14px 0;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--grey);
}
.doc .annot b {
  color: var(--ink);
}
.doc .annot .placard {
  display: block;
  margin-bottom: 4px;
}

/* ── verification FAQ (§9/P0-1) rides the doc h3 voice; anchors get room ── */
.doc section[id] {
  scroll-margin-top: 24px;
}

/* ── responsive additions ── */
@media (max-width: 960px) {
  .evgrid {
    grid-template-columns: minmax(0, 1fr);
  }
  .pains.three {
    grid-template-columns: minmax(0, 1fr);
  }
  .pains.three .pain,
  .pains.three .pain:nth-child(-n + 2) {
    grid-column: auto;
  }
}
@media (max-width: 560px) {
  .dtiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ddock .verbs {
    flex-direction: column;
  }
  .drec .oracle {
    margin-left: 0;
  }
  .btncta {
    width: 100%;
  }
}

/* ── §11 print styles for the legal documents ── */
@media print {
  body {
    background: #fff;
    color: #000;
  }
  body::before {
    display: none;
  }
  .skip,
  .masthead,
  .foot,
  .toc,
  .btncta,
  .readlink {
    display: none;
  }
  .doc-head h1,
  .doc h2,
  .doc h3,
  .doc p,
  .doc li,
  .doc-head .meta {
    color: #000;
  }
  .doc section {
    border-top-color: #bbb;
  }
  a {
    color: #000;
    text-decoration: underline;
  }
}

/* /sample/ refinements: the tier instruments stack in the doc column (ascending
   weight reads top-to-bottom), and the card's block placards get breathing room */
.doc .tiers {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 16px;
}
.doc .signalrow {
  margin-top: 12px;
}
.dbody > .placard {
  display: block;
  margin: 20px 0 8px;
}
.dbody > .placard:first-child {
  margin-top: 0;
}
.dbody .dsum code {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--grey);
}

/* pipeline stages travel with their arrows — no orphaned arrow on a wrap (§13.9) */
.pipeline .pgroup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}