/* PrivAccess Certify — marketing site
 * Built over tokens.css. Modern enterprise, hairline-driven,
 * editorial serif display + Inter UI, electric cyan accent on dark.
 */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.dark :focus-visible { outline-color: var(--focus-ring-dark); }

/* ── Layout primitives ─────────────────────────────────────────── */
.wrap { max-width: 1240px; margin-inline: auto; padding-inline: var(--space-7); }
@media (max-width: 720px) { .wrap { padding-inline: var(--space-5); } }

.section { padding-block: var(--section-pad); position: relative; }
.density-compact .demo-form-section { padding-block: var(--section-pad-tight); }
.density-comfy .demo-form-section { padding-block: var(--section-pad-comfy); }
.section--tight { padding-block: var(--section-pad-tight); }
.section--comfy { padding-block: var(--section-pad-comfy); }
.section--dark { background: var(--brand-950); color: var(--ink-on-dark); }
.section--surface { background: var(--surface); }
.section--ink {
  background:
    radial-gradient(900px 540px at 88% -20%, var(--accent-a10), transparent 70%),
    radial-gradient(700px 540px at 8% 110%, rgba(58, 95, 191, 0.12), transparent 65%),
    var(--brand-950);
  color: var(--ink-on-dark);
  position: relative;
}
.section--ink::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: var(--space-12) var(--space-12);
  background-position: center;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent 85%);
  pointer-events: none;
}
.section--ink > .wrap { position: relative; z-index: 1; }
@media (max-width: 880px) { .section { padding-block: var(--section-pad-tight); } }
@media (max-width: 640px) { .section { padding-block: var(--space-14); } }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--space-4);
}
.section--dark .eyebrow, .section--ink .eyebrow { color: var(--accent); }
.eyebrow .eyebrow__dot {
  inline-size: 6px; block-size: 6px; border-radius: var(--radius-circle);
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-a18);
}

.display {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.section-title {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: clamp(28px, 3.6vw, 44px); /* fluid title — no single ramp step */
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  max-width: 28ch;
  text-wrap: balance;
}
.section-lede {
  font-size: var(--text-xl);
  color: var(--ink-muted);
  line-height: var(--leading-body);
  max-width: var(--measure-lede);
  margin: var(--space-4) 0 0;
  text-wrap: pretty;
}
.section--dark .section-lede, .section--ink .section-lede { color: var(--ink-on-dark-muted); }

/* Section header — stacked editorial lockup:
 *   eyebrow → full-width serif title (balanced wrap) → lede at reading
 *   measure, all on one shared left edge.
 * Replaces the two-column title|lede split: title and lede heights never
 * match (titles run 2–5 lines, ledes 3–5), so ANY column alignment left
 * dead space on one side or ragged bottoms. The stack reads top-down as
 * one unit — kicker, statement, elaboration — and gives titles room to
 * break on natural phrases instead of a 20ch column. This is the same
 * register as the hero and the demo section, so the page has one
 * consistent header voice. */
.sec-header {
  margin-block-end: var(--section-gap-header);
}
.sec-header .section-title {
  max-width: none;
  margin-block-start: var(--space-4);
  /* NOT text-wrap:balance — balance shrinks every line toward equal
     width, so a 2-line title on a wide container occupied ~53% of the
     row and left the right half empty (glaring on the dark sections).
     Natural wrapping lets line 1 fill the measure; `pretty` only guards
     against a bad short last line. */
  text-wrap: pretty;
}
/* Keep the italic pivot phrase on one line at desktop widths — a pivot
   split across the line turn reads as two separate emphases. Mobile
   keeps normal wrapping (nowrap could overflow at 390px). */
@media (min-width: 881px) {
  .sec-header .section-title em {
    white-space: nowrap;
  }
}
.sec-header .section-lede {
  margin: var(--space-5) 0 0;
  max-width: 66ch;
}
@media (max-width: 880px) {
  .sec-header {
    margin-block-end: var(--space-10);
  }
  .sec-header .section-title { margin-block-start: var(--space-3); }
  .sec-header .section-lede { margin-block-start: var(--space-4); }
}

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

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-base); font-weight: var(--weight-semibold);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  transition: background var(--motion), color var(--motion), border-color var(--motion), transform var(--motion-fast);
  white-space: nowrap;
  cursor: pointer;
}
.btn--primary { background: var(--brand); color: white; }
.btn--primary:hover { background: var(--brand-hover); }
.btn--accent { background: var(--accent); color: var(--brand-950); }
.btn--accent:hover { background: var(--accent-bright); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--surface); }
.section--dark .btn--ghost, .section--ink .btn--ghost,
.footer .btn--ghost, .demo-shell .btn--ghost {
  color: var(--ink-on-dark); border-color: rgba(255,255,255,0.22);
  background: transparent;
}
.section--dark .btn--ghost:hover, .section--ink .btn--ghost:hover,
.footer .btn--ghost:hover, .demo-shell .btn--ghost:hover {
  background: var(--accent-a10);
  border-color: var(--accent-a55);
  color: var(--accent-bright);
}
.btn--link {
  padding: 0; border: 0; background: transparent;
  color: var(--brand); font-weight: var(--weight-semibold); font-size: var(--text-base);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.btn--link::after {
  content: "→"; transition: transform var(--motion);
}
.btn--link:hover::after { transform: translateX(3px); }
.section--dark .btn--link, .section--ink .btn--link { color: var(--accent); }

/* ── Top nav ──────────────────────────────────────────────────── */
.nav {
  position: sticky; inset-block-start: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-block-end: 1px solid var(--border);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  block-size: var(--nav-h); gap: var(--space-6);
}
.nav__brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); text-decoration: none;
  font-weight: var(--weight-semibold);
}
.nav__mark { inline-size: 28px; block-size: 28px; }
.nav__wordmark {
  font-family: var(--font-serif);
  font-size: 19px; font-weight: var(--weight-semibold); /* brand wordmark — deliberate 19px (cf. --role-card-title) */
  letter-spacing: -0.01em;
}
.nav__wordmark em {
  font-style: normal; font-weight: var(--weight-medium); color: var(--ink-muted);
  font-family: var(--font-sans); font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  margin-inline-start: var(--space-2);
}
.nav__links {
  display: flex; gap: var(--space-1);
}
.nav__links a {
  color: var(--ink-muted); text-decoration: none;
  font-size: var(--text-base); font-weight: var(--weight-medium);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius);
  transition: color var(--motion), background var(--motion);
}
.nav__links a:hover { color: var(--ink); background: var(--surface); }
/* AUDIT #8 — explicit tokenized focus ring on nav links (own --radius
   corner) and the nav CTA. Nav background is light → --focus-ring. */
.nav__links a:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius);
}
.nav__cta { display: flex; gap: var(--space-2); align-items: center; }

/* ── Mobile nav disclosure (AUDIT #10) ─────────────────────────────
 * ≤880px the desktop links are hidden; a hamburger discloses an
 * accessible menu (aria-expanded/aria-controls, Esc-closes, focus
 * managed in Nav.jsx). Brand register: hairline + backdrop matching
 * .nav. Token motion only, ≤ --dur-slow, reduced-motion honored. */
.nav__toggle {
  display: none; /* desktop: hidden */
  align-items: center; justify-content: center;
  inline-size: 40px; block-size: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  transition: background var(--motion), border-color var(--motion);
}
.nav__toggle:hover { background: var(--surface); }
.nav__toggle:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius);
}
.nav__mobile {
  display: none; /* desktop: never rendered open */
}

@media (max-width: 880px) {
  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav { position: sticky; }
  .nav__mobile {
    display: block;
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    background: var(--bg); /* opaque panel — full menu readability over content */
    border-block-end: 1px solid var(--border);
    box-shadow: var(--shadow-modal); /* semantic overlay-dropdown shadow token */
    /* closed: collapsed + faded + removed from a11y tree / tab order.
       visibility is delayed by --dur-slow on close so it stays reachable
       during the collapse, then flips (visibility is not interpolated, so
       the --ease/--dur are immaterial — they exist only to keep the rule
       "all motion is token-driven, one curve" literally satisfied). */
    overflow: hidden;
    max-block-size: 0;
    opacity: 0;
    visibility: hidden;
    transition:
      max-block-size var(--motion-slow),
      opacity var(--motion-slow),
      visibility var(--dur-instant) var(--ease) var(--dur-slow);
  }
  .nav__mobile.is-open {
    max-block-size: 80vh; /* viewport-relative scroll cap — no token unit for vh */
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
    transition:
      max-block-size var(--motion-slow),
      opacity var(--motion-slow),
      visibility var(--dur-instant) var(--ease);
  }
  .nav__mobile-inner {
    display: flex; flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-5) var(--space-6);
  }
  .nav__mobile-inner a:not(.btn) {
    color: var(--ink);
    text-decoration: none;
    font-size: var(--text-lg); font-weight: var(--weight-medium);
    padding: var(--space-3) var(--space-3);
    border-radius: var(--radius);
    transition: color var(--motion), background var(--motion);
  }
  .nav__mobile-inner a:not(.btn):hover { background: var(--surface); }
  .nav__mobile-inner a:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius);
  }
  .nav__mobile-cta {
    margin-block-start: var(--space-3);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--border);
  }
  .nav__mobile-cta .btn { inline-size: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .nav__mobile { transition: none; }
  .nav__mobile.is-open { transition: none; }
}

/* ── HERO ─────────────────────────────────────────────────────── */
.hero {
  padding-block: var(--hero-pad-top) var(--hero-pad-bottom);
  position: relative; overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--space-16);
  align-items: center;
}
@media (max-width: 1040px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-14); }
}
.hero__title {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: var(--text-display);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: white;
  margin: 0 0 var(--space-6);
}
.hero__title .accent {
  color: var(--accent);
  font-style: italic;
  font-weight: var(--weight-medium);
}
/* Signature stroke — a one-time hand-drawn underline beneath "In
   evidence.": the sign-off the product exists to produce. Draws after
   the headline lands; reduced motion shows the finished stroke. */
.hero__sig { position: relative; display: inline-block; }
.hero__sig-stroke {
  position: absolute;
  inset-inline: -0.06em;
  block-size: 0.16em;
  inset-block-end: -0.08em;
  inline-size: calc(100% + 0.12em);
  overflow: visible;
}
.hero__sig-stroke path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  opacity: 0.9;
  animation: sig-draw 950ms var(--ease) 900ms forwards;
}
@keyframes sig-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero__sig-stroke path { animation: none; stroke-dasharray: 0; stroke-dashoffset: 0; }
}
.hero__title .strike {
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,0.32); /* decorative strike — unique */
  text-decoration-thickness: 2px;
  color: var(--ink-on-dark-muted);
}
.hero__sub {
  font-size: 19px; line-height: var(--leading-body); /* deliberate 19px sub-lede */
  color: var(--ink-on-dark-muted);
  max-width: 56ch;
  margin: 0 0 var(--space-8);
}
.hero__ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.hero__meta {
  margin-block-start: var(--space-10);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-block-start: 1px solid var(--border-on-dark);
  padding-block-start: var(--space-6);
}
.hero__meta-item { padding-inline-end: var(--space-4); }
.hero__meta-item + .hero__meta-item {
  padding-inline-start: var(--space-6);
  border-inline-start: 1px solid var(--border-on-dark);
}
.hero__meta-k {
  font-family: var(--font-serif);
  font-size: var(--text-4xl); font-weight: var(--weight-semibold);
  color: white;
  line-height: var(--leading-none);
  margin: 0 0 6px;
}
.hero__meta-v {
  font-size: var(--text-xs);
  color: var(--ink-on-dark-faint);
  line-height: var(--leading-flat);
}

/* hero compliance chips */
.hero__chips {
  display: flex; gap: var(--space-2); flex-wrap: wrap;
  margin-block-start: var(--space-7);
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-on-dark-strong);
  color: var(--ink-on-dark-muted);
  background: rgba(255,255,255,0.03);
}
.chip__dot {
  inline-size: 5px; block-size: 5px; border-radius: var(--radius-circle);
  background: var(--accent);
}

/* ── Hero dashboard mock ──────────────────────────────────────── */
.mock {
  background: #fbfcfd; /* mock paper — unique near-white */
  border-radius: var(--radius-mock);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,0.55),
    0 8px 28px -8px rgba(0,0,0,0.4);
  color: var(--ink);
  font-family: var(--font-sans);
  overflow: hidden;
  position: relative;
}
.mock__chrome {
  background: var(--bg);
  border-block-end: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
}
.mock__chrome-dots { display: flex; gap: 6px; }
.mock__chrome-dots span {
  inline-size: 10px; block-size: 10px; border-radius: var(--radius-circle);
  background: var(--surface-2);
}
.mock__chrome-url {
  flex: 1;
  background: var(--surface);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
}
.mock__body { padding: 18px 20px 20px; } /* mock-internal optical padding */
.mock__appbar {
  display: flex; align-items: center; justify-content: space-between;
  padding-block-end: var(--space-3);
  border-block-end: 1px solid var(--border);
  margin-block-end: var(--space-3);
}
.mock__brand {
  display: flex; align-items: center; gap: var(--space-2);
  font-weight: var(--weight-semibold); font-size: var(--text-base);
}
.mock__brand svg { inline-size: 18px; block-size: 18px; }
.mock__tabs { display: flex; gap: var(--space-1); font-size: var(--text-xs); color: var(--ink-muted); }
.mock__tab { padding: 4px 8px; border-radius: var(--radius); }
.mock__tab.is-active { color: var(--ink); font-weight: var(--weight-semibold); background: var(--surface); }

.mock__h1 {
  font-family: var(--font-serif);
  font-size: var(--text-xl); font-weight: var(--weight-semibold);
  margin: 0 0 2px;
}
.mock__sub { font-size: var(--text-xs); color: var(--ink-muted); }

.mock__kpis {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2); margin-block: var(--space-3);
}
.mock__kpi {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
}
.mock__kpi-k {
  font-family: var(--font-serif);
  font-size: 20px; font-weight: var(--weight-semibold);
  line-height: var(--leading-none);
  font-variant-numeric: tabular-nums;
}
.mock__kpi-v {
  font-size: var(--text-2xs); color: var(--ink-muted);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-block-start: 6px;
  font-weight: var(--weight-semibold);
}
.mock__kpi--bad .mock__kpi-k { color: var(--critical); }

.mock__inbox {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.mock__inbox-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: var(--surface);
  border-block-end: 1px solid var(--border);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--ink-muted);
}
.mock__inbox-head .right { display: flex; gap: 6px; }
.mock__row {
  display: grid;
  grid-template-columns: 64px 1fr 80px;
  gap: var(--space-3);
  padding: 11px 14px;
  border-block-end: 1px solid var(--border);
  font-size: var(--text-xs);
  align-items: center;
  transition: background var(--motion);
}
.mock__row:last-child { border-block-end: 0; }
.mock__row.is-highlighted { background: var(--brand-50); }
/* Live campaign mock — the reviewer walks the inbox: the row under
   review lifts to the highlight tint; decided rows settle back with
   their decision button filled (approve=green, revoke=red) and a
   slightly dimmed, "processed" register. */
.mock__row.is-active { background: var(--brand-50); }
.mock__row.is-decided { background: transparent; }
.mock__row.is-decided .pill { opacity: 0.55; transition: opacity var(--motion-slow); }
.mock__row.is-decided .mock__mini-btn { opacity: 0.45; transition: opacity var(--motion-slow); }
.mock__row.is-decided .mock__mini-btn.is-on { opacity: 1; }
/* Seal beat — the Evidence tab lights and the status line confirms. */
.mock__tab.is-sealed {
  color: var(--accent-deep);
  font-weight: var(--weight-semibold);
}
.mock__inbox-head.is-sealing .mock__inbox-status {
  color: var(--low-strong);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mock__row-user { font-weight: var(--weight-semibold); }
.mock__row-ent {
  font-family: var(--font-mono);
  font-size: var(--text-2xs); color: var(--ink-muted);
  margin-block-start: 2px;
}
.mock__row-act {
  display: flex; gap: var(--space-1); justify-content: flex-end;
}
.mock__mini-btn {
  inline-size: 24px; block-size: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--ink-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-xs);
  cursor: pointer;
}
.mock__mini-btn--ok { color: var(--low); border-color: var(--low); }
.mock__mini-btn--bad { color: var(--critical); border-color: var(--critical); }
.mock__mini-btn--ok.is-on { background: var(--low); color: white; }
.mock__mini-btn--bad.is-on { background: var(--critical); color: white; }

/* severity pill */
.pill {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px; font-weight: var(--weight-bold);
  text-transform: uppercase; letter-spacing: 0.06em;
  border-radius: var(--radius); color: white;
  white-space: nowrap;
}
.pill--critical { background: var(--critical); }
.pill--high     { background: var(--high); }
.pill--medium   { background: var(--medium); }
.pill--low      { background: var(--low); }

/* fade-in animation utility */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* Entrance: 600ms → --dur-reveal (550ms) — PLAN-sanctioned tightening. */
.fade-up { animation: fadeUp var(--dur-reveal) var(--ease) both; }
.fade-in { animation: fadeIn var(--dur-reveal) var(--ease) both; }
.delay-1 { animation-delay: var(--stagger-1); }
.delay-2 { animation-delay: var(--stagger-2); }
.delay-3 { animation-delay: var(--stagger-3); }
.delay-4 { animation-delay: var(--stagger-4); }
.delay-5 { animation-delay: var(--stagger-5); }

@media (prefers-reduced-motion: reduce) {
  .fade-up, .fade-in { animation: none !important; }
}

/* ── Problem belt (stats) ─────────────────────────────────────── */
.stat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-block-start: 0;
}

/* ── Framework proof row (Problem section) ─────────────────── */
.framework-row {
  margin-block-start: var(--space-8);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding: var(--space-5) var(--space-6);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  position: relative;
}
.framework-row::before {
  content: "";
  position: absolute;
  inset-block: 0; inset-inline-start: 0;
  inline-size: 3px;
  background: linear-gradient(180deg, var(--accent-deep), var(--accent));
  border-start-start-radius: var(--radius-lg);
  border-end-start-radius: var(--radius-lg);
}
.framework-row__l {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-deep);
  white-space: nowrap;
}
.framework-row__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-2);
  flex: 1;
}
.framework-row__list li {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  /* 5px 10px — NOT 6px 12px: the seven chips must hold one line inside
     the fixed 1240px wrap. At the old metrics the row needed 1027px of
     the 1031px available (4px headroom), so any engine's wider font
     metrics wrapped the last chip. New metrics: ~975px → ~56px spare. */
  padding: 5px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  line-height: var(--leading-none);
  transition: border-color var(--motion), background var(--motion);
}
.framework-row__list li:hover {
  border-color: var(--brand-300);
  background: var(--brand-50);
}
.framework-row__list li strong {
  font-weight: var(--weight-semibold);
  color: var(--ink);
  font-size: var(--text-xs); /* was 12.5px — half-px snapped to 12 */
  letter-spacing: -0.005em;
}
.framework-row__list li span {
  font-family: var(--font-mono);
  font-size: var(--text-2xs); /* was 10.5px — half-px snapped to 11 */
  color: var(--ink-muted);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
}

@media (max-width: 640px) {
  .framework-row {
    padding: var(--space-4) var(--space-5);
    gap: var(--space-3);
    flex-direction: column;
    align-items: flex-start;
  }
  .framework-row__l { padding-inline-start: var(--space-1); }
  .framework-row__list { gap: 6px 8px; width: 100%; }
  .framework-row__list li { padding: 5px 10px; font-size: var(--text-2xs); } /* was 11.5 → 11 */
  .framework-row__list li strong { font-size: var(--text-2xs); } /* was 11.5 → 11 */
  .framework-row__list li span { font-size: 10px; } /* micro mono label */
}
@media (max-width: 880px) { .stat-grid { grid-template-columns: 1fr; } }
.stat {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl); /* D3: design-system-sanctioned stat tile */
  padding: var(--space-8) var(--space-7);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color var(--motion), transform var(--motion), box-shadow var(--motion);
}
.stat::before {
  content: "";
  position: absolute;
  inset-block-start: 0; inset-inline-start: 0; inset-inline-end: 0;
  block-size: 2px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  opacity: 0;
  transition: opacity var(--motion-slow);
}
.stat:hover {
  border-color: var(--brand-300);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -14px rgba(10, 14, 26, 0.14);
}
.stat:hover::before { opacity: 1; }
.stat__k {
  font-family: var(--font-serif);
  font-size: var(--text-stat); font-weight: var(--weight-semibold);
  letter-spacing: -0.025em;
  line-height: var(--leading-none);
  color: var(--ink);
  margin: 0 0 var(--space-3);
  font-variant-numeric: tabular-nums;
}
.stat__k sup {
  font-size: 0.45em; font-weight: var(--weight-medium);
  color: var(--ink-muted);
  vertical-align: super;
  margin-inline-start: var(--space-1);
}
.stat__t {
  font-size: var(--text-md);
  color: var(--ink-muted);
  line-height: var(--leading-body);
  flex: 1;
}
.stat__src {
  margin-block-start: var(--space-5); /* was 18px → 20 (≤2px) */
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--border);
  font-size: 10px; /* micro mono label — below ramp min on purpose */
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-deep);
  font-weight: var(--weight-semibold);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.stat__src::before {
  content: "";
  display: inline-block;
  inline-size: 14px; block-size: 1px;
  background: var(--accent-deep);
}

/* ── Manual vs PAC comparison ─────────────────────────────────── */
.compare {
  margin-block-start: var(--space-16);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.compare__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-block-end: 1px solid var(--border);
  background: var(--surface);
}
.compare__title {
  font-family: var(--font-serif);
  font-size: 20px; font-weight: var(--weight-semibold); /* deliberate 20px sub-head */
}
.compare__toggle {
  display: inline-flex;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: 3px;
  font-size: var(--text-sm);
}
.compare__toggle button {
  border: 0; background: transparent;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  color: var(--ink-muted);
  font-weight: var(--weight-semibold);
  transition: background var(--motion), color var(--motion);
}
.compare__toggle button.is-on {
  background: var(--ink);
  color: white;
}
.compare__toggle button.is-on.is-on--good {
  background: var(--brand);
}
/* AUDIT #8 — explicit tokenized focus ring on the Compare tabs. The toggle
   is pill-shaped (--radius-pill); the global :focus-visible recipe sets
   --radius-sm, so an explicit rule matching the control shape is correct.
   Light section → --focus-ring (brand-600). */
.compare__toggle button:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-pill);
}
.compare__body {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  min-block-size: 380px; /* pane min-height — content-driven, not on the scale */
}
.compare__pane { padding: var(--space-7); }
.compare__step {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-block-end: 1px solid var(--border);
  align-items: start;
}
.compare__step:last-child { border-block-end: 0; }
.compare__step-n {
  inline-size: 26px; block-size: 26px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ink-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}
.compare__pane--good .compare__step-n {
  background: var(--brand-tint); color: var(--brand-hover);
}
.compare__step-title {
  font-weight: var(--weight-semibold); font-size: var(--text-base);
  margin: 0 0 3px;
}
.compare__step-sub { font-size: var(--text-sm); color: var(--ink-muted); }
.compare__step-time {
  font-family: var(--font-mono);
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  padding: 3px 8px; border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-muted);
  white-space: nowrap;
}
.compare__pane--bad .compare__step-time {
  background: var(--critical-tint); color: var(--critical-strong);
}
.compare__pane--good .compare__step-time {
  background: var(--low-tint); color: var(--low-strong);
}
.compare__total {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5) var(--space-7);
  background: var(--surface);
  border-block-start: 1px solid var(--border);
  font-size: var(--text-base);
}
.compare__total strong {
  font-family: var(--font-serif);
  font-size: 20px; /* deliberate 20px payoff numeral */
}
.compare__pane-fade-in { animation: fadeIn var(--dur-slow) var(--ease) both; }

/* ── How it works flow — asymmetric: dominant lead step + 2×2 secondary ───
   Tier 1: the lead step (01 · Collect) — tall left column, spans both rows.
   Tier 2: steps 02–05 in a 2×2 secondary block to its right.
   Tier 3: the detail-list bullets within each card.
   Asymmetric column (1.05fr lead vs 1.7fr for the four) + rhythmic
   --space-5 gutter (was a cramped uniform --space-3). */
.flow {
  margin-block-start: 0;
  display: grid;
  grid-template-columns: 1.05fr 1.7fr;
  grid-auto-rows: 1fr;
  gap: var(--space-5);
  position: relative;
}
.flow__step--lead { grid-row: 1 / span 2; }
.flow__secondary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--space-5);
  grid-column: 2;
  grid-row: 1 / span 2;
}
@media (max-width: 1040px) {
  .flow { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .flow__step--lead { grid-row: auto; }
  .flow__secondary { grid-column: 1; grid-row: auto; }
  /* single column: cards size to their content — no row equalization,
     and no centering (nothing to center within) */
  .flow__step--lead { justify-content: flex-start; }
}
@media (max-width: 640px)  { .flow__secondary { grid-template-columns: 1fr; } }
.flow__step {
  position: relative;
  padding: var(--space-6) var(--space-6) var(--space-6); /* was 26/22/24 → 24 uniform (≤2px) */
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius); /* D3: off-spec --radius-xl corrected to --radius */
  cursor: pointer;
  overflow: hidden;
  transition: background var(--motion), border-color var(--motion), transform var(--motion), box-shadow var(--motion), color var(--motion);
  display: flex; flex-direction: column;
  will-change: transform;
}
/* Lead step — dominant tier: larger serif title, bigger icon, more air.
   The card spans both grid rows and runs taller than its content, so
   the content group is vertically CENTERED — the spare height splits
   evenly above and below, reading as composed air rather than a hollow
   band under the text. */
.flow__step--lead {
  padding: var(--space-8) var(--space-7) var(--space-7);
  justify-content: center;
}
.flow__step--lead .flow__title { font-size: var(--text-3xl); }
.flow__step--lead .flow__icon { inline-size: 46px; block-size: 46px; } /* icon-box one-off, cf. .feature__icon 46px (off the spacing scale, like .flow__icon 40 / .commitment-card__icon 42) */
.flow__step--lead .flow__sub { font-size: var(--text-base); }
/* AUDIT #8 — the focus ring was explicitly removed here (outline:none),
   which fails WCAG 2.4.7. Restored to A's tokenized recipe (PROGRESS-A §5)
   so keyboard focus is visible on every flow step incl. .flow__step--lead.
   .flow__step is a <div role="button">, so the element-scoped
   button:focus-visible rule (styles.css:21) does NOT reach it — this
   explicit rule is required. Light section → --focus-ring (brand-600). */
.flow__step:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}
.flow__accent-bar {
  position: absolute;
  inset-block-start: 0; inset-inline-start: 0; inset-inline-end: 0;
  block-size: 3px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  transform: scaleX(0);
  transform-origin: start;
  transition: transform var(--motion-slow);
}
/* Active/hover paints a DARK navy panel — the cyan glow is therefore on
   a dark surface (allowed). Gradient now from brand tokens (exact dupes
   of #0a1430 / #050a1a). */
.flow__step:hover, .flow__step.is-active {
  border-color: var(--brand-700);
  background: linear-gradient(180deg, var(--brand-900) 0%, var(--brand-950) 100%);
  color: white;
  transform: translateY(-4px);
  box-shadow:
    0 18px 36px -14px rgba(10, 14, 26, 0.45),
    0 0 0 1px var(--accent-a32),
    0 0 32px -8px var(--accent-a32);
}
.flow__step:hover .flow__accent-bar,
.flow__step.is-active .flow__accent-bar { transform: scaleX(1); }
.flow__head {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-block-end: 18px;
}
.flow__icon {
  inline-size: 40px; block-size: 40px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--brand);
  transition: background var(--motion), border-color var(--motion), color var(--motion), box-shadow var(--motion);
}
.flow__step:hover .flow__icon, .flow__step.is-active .flow__icon {
  background: var(--accent-a10);
  border-color: var(--accent-a32);
  color: var(--accent);
  box-shadow: 0 0 18px -4px var(--accent-a32);
}
.flow__n {
  font-family: var(--font-mono);
  font-size: 10px; /* micro mono step-number — below ramp min on purpose */
  color: var(--ink-faint);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
}
.flow__step:hover .flow__n, .flow__step.is-active .flow__n { color: var(--accent); }
.flow__title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl); font-weight: var(--weight-semibold); /* was 22px → 21 (−1px, ≤2px) */
  margin: 0 0 var(--space-2);
  color: var(--ink);
  letter-spacing: -0.015em;
}
.flow__step:hover .flow__title, .flow__step.is-active .flow__title { color: white; }
.flow__sub {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  line-height: var(--leading-body);
}
.flow__step:hover .flow__sub, .flow__step.is-active .flow__sub { color: var(--ink-on-dark); }

/* Detail list — always visible; styles for both light (default) and dark (active) */
.flow__detail {
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--border);
  transition: border-color var(--motion);
}
.flow__step:hover .flow__detail,
.flow__step.is-active .flow__detail {
  border-block-start-color: rgba(255, 255, 255, 0.14);
}
.flow__detail-list { margin: 0; padding: 0; list-style: none; }
.flow__detail-list li {
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--ink-muted);
  padding-block: var(--space-1);
  display: flex; gap: 9px; align-items: flex-start;
  transition: color var(--motion);
}
.flow__step:hover .flow__detail-list li,
.flow__step.is-active .flow__detail-list li {
  color: var(--ink-on-dark);
}
.flow__detail-list li::before {
  content: "";
  flex-shrink: 0;
  inline-size: 5px; block-size: 5px;
  border-radius: var(--radius-circle);
  background: var(--accent-deep);
  margin-block-start: 7px;
  transition: background var(--motion), box-shadow var(--motion);
}
.flow__step:hover .flow__detail-list li::before,
.flow__step.is-active .flow__detail-list li::before {
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent-a55);
}

/* ── Features — dominant lead capability + secondary 5-card grid ───
   Tier 1: the lead feature (01 · reviewer inbox) — full-width banner
   card, 2-column internal split (claim left, proof rail right).
   Tier 2: the remaining five capabilities in a hairline grid.
   Tier 3: the proof row inside each card.
   Replaces the six identical equal-weight cells. */
.features {
  display: grid;
  gap: var(--space-5);
  margin-block-start: 0;
}
.features__rest {
  display: grid; gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg); /* D3: off-spec --radius-xl corrected to --radius-lg */
  overflow: hidden;
  grid-template-columns: repeat(3, 1fr);
}
/* Five secondary cards in a 3-column grid leaves a permanent hole at the
   last cell — the closing card spans the remaining two columns instead,
   so the hairline grid reads complete (3 + 2-wide). */
@media (min-width: 881px) {
  .features__rest > .feature:last-child {
    grid-column: 2 / -1;
  }
}
@media (max-width: 880px) { .features__rest { grid-template-columns: 1fr; } }
.feature {
  background: var(--bg);
  /* 36px kept (snapping to --space-8 32px = -4px, >2px → keep the look
     per the governing ≤2px rule); 32 inline = --space-8. */
  padding: 36px var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-4);
  transition: background var(--motion);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Lead feature — dominant tier: bordered card, 2-col claim/proof split,
   larger serif title, generous asymmetric padding. */
.feature--lead {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-10) var(--space-8);
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-10);
  align-items: start;
}
.feature--lead .feature__t { font-size: var(--text-3xl); }
.feature--lead .feature__d { font-size: var(--text-md); }
.feature--lead .feature__body { display: flex; flex-direction: column; gap: var(--space-4); }
/* Proof panel (lead card) — compact, vertically centered in the card's
   right column. A full-height rail read as an empty box; a top-hung box
   read as detached. Content-sized and centered is the balanced form:
   the claim anchors the left, the proof card sits at its middle. */
.feature--lead .feature__proof {
  margin-block-start: 0;
  align-self: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
}
@media (max-width: 880px) {
  .feature--lead {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding: var(--space-8) var(--space-6);
  }
}
.feature::before {
  content: "";
  position: absolute;
  inset-block-start: 0; inset-inline-start: 0; inset-inline-end: 0;
  block-size: 3px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  transform: scaleX(0);
  transform-origin: start;
  transition: transform var(--motion-slow);
  z-index: 1;
}
.feature::after {
  content: "";
  position: absolute;
  inset-block-start: -120px; inset-inline-end: -120px;
  inline-size: 280px; block-size: 280px;
  background: radial-gradient(circle at center, rgba(42, 72, 148, 0.06), transparent 70%);
  opacity: 0;
  transition: opacity var(--motion-slow);
  pointer-events: none;
}
.feature:hover::before { transform: scaleX(1); }
.feature:hover::after { opacity: 1; }
.feature__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
}
.feature__num {
  font-family: var(--font-mono);
  font-size: var(--text-2xs); font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  display: inline-flex; align-items: center; gap: var(--space-2);
  transition: color var(--motion);
}
.feature__num::before {
  content: "";
  inline-size: 16px; block-size: 1px;
  background: var(--border-strong);
  display: inline-block;
  transition: background var(--motion), inline-size var(--motion-slow);
}
.feature:hover .feature__num { color: var(--accent-deep); }
.feature:hover .feature__num::before {
  background: var(--accent-deep);
  inline-size: 26px;
}
.feature__icon {
  inline-size: 46px; block-size: 46px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--brand-50), white);
  border: 1px solid var(--brand-100);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--brand);
  transition: box-shadow var(--motion), border-color var(--motion);
  position: relative;
}
.feature__icon::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 11px; /* icon glow ring — 1px outside the 10px radius */
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  opacity: 0;
  transition: opacity var(--motion-slow);
  z-index: -1;
}
/* Forbidden decorative motion removed: icon rotate(-4deg) scale(1.05)
   on hover (AUDIT #6 / PLAN §2). Color + lift retained on the card. */
.feature:hover .feature__icon {
  border-color: transparent;
  color: var(--brand-hover);
  box-shadow: 0 10px 24px -8px rgba(42, 72, 148, 0.25);
}
.feature:hover .feature__icon::before { opacity: 0.2; }
.feature__t {
  font-family: var(--font-serif);
  font-size: var(--text-2xl); font-weight: var(--weight-semibold);
  margin: 0;
  letter-spacing: -0.015em;
  line-height: var(--leading-snug);
  text-wrap: balance;
}
.feature__d {
  font-size: var(--text-base); color: var(--ink-muted); line-height: var(--leading-body); /* was 14.5px → 14 */
  margin: 0;
  flex: 1;
  text-wrap: pretty;
}
.feature__proof {
  margin-block-start: auto;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--accent-deep);
  display: flex; flex-direction: column; gap: var(--space-1);
  transition: background var(--motion), border-color var(--motion), transform var(--motion);
}
.feature:hover .feature__proof {
  background: white;
  border-color: var(--brand-100);
  border-inline-start-color: var(--accent);
}
.feature__proof-l {
  font-family: var(--font-mono);
  font-size: 10px; /* micro mono proof-key — below ramp min on purpose */
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
/* Severity pill demo (lead card rail) — the proof IS product UI: the
   four severity pills the claim describes, at their real sizes. */
.feature__proof-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.feature__proof-v {
  font-size: var(--text-sm);
  color: var(--ink);
  font-weight: var(--weight-medium);
  line-height: var(--leading-flat);
}

/* ── Connector matrix ─────────────────────────────────────────── */
.connector-tools {
  display: flex; align-items: center; justify-content: space-between;
  margin-block: 0 var(--space-6);
  gap: var(--space-4); flex-wrap: wrap;
}
.connector-filter {
  display: inline-flex; gap: var(--space-1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: var(--space-1);
}
.connector-filter button {
  border: 0; background: transparent;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--ink-muted);
  cursor: pointer;
}
.connector-filter button.is-on {
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(10, 14, 26, 0.06);
}
/* AUDIT #8 — explicit tokenized focus ring on the Coverage filter tabs
   (pill-shaped; matches the control radius). Light section → --focus-ring. */
.connector-filter button:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-pill);
}
.connector-grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}
@media (max-width: 1040px) { .connector-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .connector-grid { grid-template-columns: 1fr; } }
.connector {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: grid;
  grid-template-columns: 44px 1fr 24px;
  gap: var(--space-4); align-items: start;
  transition: border-color var(--motion), background var(--motion), transform var(--motion), box-shadow var(--motion);
  position: relative;
  overflow: hidden;
}
.connector::before {
  content: "";
  position: absolute;
  inset-block-start: 0; inset-inline-start: 0; inset-inline-end: 0;
  block-size: 2px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  transform: scaleX(0);
  transform-origin: start;
  transition: transform var(--motion-slow);
}
.connector:hover {
  border-color: var(--brand-300);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -14px rgba(10, 14, 26, 0.18);
}
.connector:hover::before { transform: scaleX(1); }
.connector__icon {
  inline-size: 44px; block-size: 44px;
  border-radius: var(--radius-lg);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--brand);
  transition: background var(--motion), border-color var(--motion), color var(--motion);
}
.connector:hover .connector__icon {
  background: white;
  border-color: var(--brand-300);
  color: var(--brand-hover);
}
.connector__body { min-width: 0; }
.connector__cat {
  font-family: var(--font-mono);
  font-size: 10px; /* micro mono category label — below ramp min on purpose */
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-block-end: 6px;
}
.connector__name {
  font-weight: var(--weight-semibold); font-size: var(--text-lg);
  margin: 0 0 6px;
  font-family: var(--font-serif);
  letter-spacing: -0.01em;
  line-height: var(--leading-list);
}
.connector__tagline {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  line-height: 1.45;
}
.connector__check {
  inline-size: 24px; block-size: 24px;
  border-radius: var(--radius-circle);
  background: var(--low-tint);
  color: var(--low-strong);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background var(--motion), color var(--motion);
  position: relative;
}
/* Sync pulse — each connector's check chip emits a soft ring on a
   staggered cadence: the read-only sync arriving, always on. Decorative
   loop; hidden under reduced motion. */
.connector__check::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-circle);
  border: 1px solid var(--low);
  opacity: 0;
  animation: sync-ping 4.8s var(--ease) infinite;
}
.connector:nth-child(3n+1) .connector__check::after { animation-delay: 0s; }
.connector:nth-child(3n+2) .connector__check::after { animation-delay: 1.6s; }
.connector:nth-child(3n) .connector__check::after { animation-delay: 3.2s; }
@keyframes sync-ping {
  0% { transform: scale(1); opacity: 0.55; }
  60%, 100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .connector__check::after { animation: none; opacity: 0; }
}
.connector:hover .connector__check {
  background: var(--low);
  color: white;
}

/* "What's next" card — visually distinct, confidence-building.
   CYAN-ON-LIGHT FIX (AUDIT #7): this card sits in a LIGHT (--surface)
   section, so the cyan tint/glow is replaced with the light-surface
   accent (--accent-deep) at low alpha — no electric cyan on light. */
.connector--more {
  background:
    linear-gradient(135deg, rgba(8, 145, 178, 0.05), transparent 60%),
    var(--bg);
  border-style: dashed;
  border-color: var(--brand-300);
  grid-template-columns: 44px 1fr;
}
.connector--more::before {
  transform: scaleX(1);
  background: linear-gradient(90deg, var(--accent-deep), var(--accent-deep));
  opacity: 0.6;
}
.connector__icon--more {
  background: rgba(8, 145, 178, 0.10);
  border-color: rgba(8, 145, 178, 0.28);
  color: var(--accent-deep);
}
.connector--more:hover {
  border-color: var(--accent-deep);
  background:
    linear-gradient(135deg, rgba(8, 145, 178, 0.09), transparent 60%),
    var(--bg);
}

/* ── Security architecture ────────────────────────────────────── */
.sec-grid {
  margin-block-start: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.08); /* hairline grid gap — unique alpha */
  border-radius: var(--radius-xl);
  overflow: hidden;
}
@media (max-width: 1040px) { .sec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .sec-grid { grid-template-columns: 1fr; } }
/* ── Security architecture cards ───────────────────────────────── */
.sec-card {
  background: var(--brand-950);
  padding: var(--space-8) var(--space-7);
  display: flex; flex-direction: column;
  gap: var(--space-3);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  transition: background var(--motion), transform var(--motion);
  isolation: isolate;
}
.sec-card::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(420px 280px at 100% 0%, var(--accent-a10), transparent 70%);
  opacity: 0;
  transition: opacity var(--motion-slow);
  z-index: -1;
}
.sec-card::after {
  content: "";
  position: absolute;
  inset-block-end: 0; inset-inline-start: 0; inset-inline-end: 0;
  block-size: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-deep));
  transform: scaleX(0);
  transform-origin: start;
  transition: transform var(--motion-slow);
}
.sec-card:hover {
  background: linear-gradient(180deg, var(--brand-900) 0%, var(--brand-950) 100%);
  transform: translateY(-2px);
}
.sec-card:hover::before { opacity: 1; }
.sec-card:hover::after { transform: scaleX(1); }
.sec-card__icon {
  inline-size: 44px; block-size: 44px;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(34, 211, 238, 0.14), var(--accent-a04));
  border: 1px solid var(--accent-a32);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent);
  margin-block-end: 6px;
  transition: box-shadow var(--motion), border-color var(--motion);
  position: relative;
}
.sec-card__icon::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: 11px; /* glow ring — 1px outside the 10px icon */
  border: 1px solid var(--accent-a18);
  opacity: 0;
  transform: scale(1.15);
  transition: opacity var(--motion-slow), transform var(--motion-slow);
  pointer-events: none;
}
/* Forbidden decorative motion removed: icon rotate(-4deg) scale(1.04)
   on hover (AUDIT #6 / PLAN §2). Color + glow ring retained. */
.sec-card:hover .sec-card__icon {
  border-color: var(--accent-a55);
  box-shadow: 0 0 22px -4px rgba(34, 211, 238, 0.45);
}
.sec-card:hover .sec-card__icon::after {
  opacity: 1;
  transform: scale(1.25);
}
.sec-card__t {
  font-family: var(--font-serif);
  font-size: var(--text-2xl); font-weight: var(--weight-semibold); /* was 22px → 21 (−1px) */
  margin: 0;
  color: white;
  line-height: var(--leading-list);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.sec-card__d {
  font-size: var(--text-sm); line-height: 1.6; /* was 13.5px → 13 */
  color: var(--ink-on-dark-muted); margin: 0;
  text-wrap: pretty;
}
.sec-card__tag {
  margin-block-start: auto;
  font-family: var(--font-mono);
  font-size: 10px; color: var(--accent); /* micro mono tag — was 10.5 */
  letter-spacing: 0.1em;
  padding-block-start: var(--space-3);
  border-block-start: 1px solid rgba(255, 255, 255, 0.08); /* hairline — unique alpha */
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: var(--weight-semibold);
  transition: border-color var(--motion);
}
.sec-card__tag::before {
  content: "";
  inline-size: 14px; block-size: 1px;
  background: var(--accent);
  display: inline-block;
  transition: inline-size var(--motion-slow);
}
.sec-card:hover .sec-card__tag { border-color: rgba(34, 211, 238, 0.22); } /* on dark; unique alpha */
.sec-card:hover .sec-card__tag::before { inline-size: 24px; }

/* ── Security data sheet ─────────────────────────────────────── */
.sec-sheet {
  margin-block-start: var(--space-8);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(180deg, var(--accent-a04), transparent 40%),
    rgba(255,255,255,0.02);
  overflow: hidden;
}
.sec-sheet__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5) var(--space-7);
  border-block-end: 1px solid var(--border-on-dark);
  gap: var(--space-4); flex-wrap: wrap;
  background: var(--accent-a04);
}
.sec-sheet__title {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-serif);
  font-size: 20px; font-weight: var(--weight-semibold); /* deliberate 20px sheet title */
  color: white;
  letter-spacing: -0.015em;
}
.sec-sheet__title svg {
  color: var(--accent);
  background: var(--accent-a10);
  padding: 6px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--accent-a32);
  box-sizing: content-box;
}
.sec-sheet__sub {
  font-size: var(--text-2xs); color: var(--accent);
  letter-spacing: 0.1em; font-weight: var(--weight-semibold);
}
.sec-sheet__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
@media (max-width: 720px) { .sec-sheet__grid { grid-template-columns: 1fr; } }
.sec-sheet__row {
  display: grid;
  grid-template-columns: 40% 1fr;
  padding: var(--space-3) var(--space-7);
  border-block-end: 1px solid var(--well-on-dark-2);
  align-items: baseline;
  gap: var(--space-4);
}
.sec-sheet__row:nth-last-child(-n+2) { border-block-end: 0; }
.sec-sheet__grid > :nth-child(odd) { border-inline-end: 1px solid var(--well-on-dark-2); }
@media (max-width: 720px) { .sec-sheet__grid > :nth-child(odd) { border-inline-end: 0; } }
.sec-sheet__l {
  font-family: var(--font-mono);
  font-size: 10px; /* micro mono spec key — was 10.5 */
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.sec-sheet__l::before {
  content: "";
  inline-size: 4px; block-size: 4px;
  border-radius: var(--radius-circle);
  background: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--accent-a18);
}
.sec-sheet__v {
  font-size: var(--text-base);
  color: var(--ink-on-dark);
  line-height: 1.45;
}

/* ── Evidence chain (live strip under the security data sheet) ─────
 * Append-only SHA-256 chain: blocks seal in one-by-one (reveal facade
 * cascade) with a verification pulse traveling the links, ending at the
 * dashed "next" block awaiting the campaign's decisions. Decorative
 * (aria-hidden in markup). */
.chain {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  border-block-start: 1px solid var(--border-on-dark);
  padding-block: var(--space-5);
  padding-inline: var(--space-7);
}
.chain__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.chain__trackwrap {
  position: relative;
  flex: 1;
  min-inline-size: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 2px;
}
.chain__trackwrap::-webkit-scrollbar { display: none; }
/* Shrink-wraps the chain so the traveling pulse spans only the blocks,
   never the empty track beyond them. */
.chain__sizer {
  position: relative;
  display: inline-block;
}
.chain__track {
  display: flex;
  align-items: center;
  min-inline-size: max-content;
}
.chain__block {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 11px;
  border: 1px solid var(--border-on-dark-strong);
  border-radius: var(--radius);
  background: var(--well-on-dark);
  flex-shrink: 0;
}
.chain__seq {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  color: var(--accent);
  letter-spacing: 0.06em;
}
.chain__hash {
  font-size: 10px;
  color: var(--ink-on-dark-faint);
  letter-spacing: 0.04em;
}
.chain__link {
  inline-size: 18px;
  block-size: 1px;
  background: var(--accent-a55);
  flex-shrink: 0;
}
.chain__block--next {
  border-style: dashed;
  border-color: var(--accent-a55);
  background: transparent;
}
.chain__next-dots i {
  display: inline-block;
  inline-size: 4px;
  block-size: 4px;
  border-radius: var(--radius-circle);
  background: var(--accent);
  margin-inline-end: 4px;
  animation: chain-blink 1.2s var(--ease) infinite;
}
.chain__next-dots i:nth-child(2) { animation-delay: 0.2s; }
.chain__next-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes chain-blink {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}
/* Verification pulse traveling the chain. A looped position indicator —
   same documented exception class as .scroll-progress: linear 1:1
   travel, not eased pointer feedback. */
.chain__pulse {
  position: absolute;
  inset-block-start: 50%;
  inline-size: 6px;
  block-size: 6px;
  border-radius: var(--radius-circle);
  background: var(--accent-bright);
  box-shadow: 0 0 10px var(--accent-a55);
  transform: translateY(-50%);
  animation: chain-travel 5.6s linear infinite;
  pointer-events: none;
}
@keyframes chain-travel {
  0% { inset-inline-start: 0; opacity: 0; }
  6% { opacity: 1; }
  94% { opacity: 1; }
  100% { inset-inline-start: calc(100% - 6px); opacity: 0; }
}
@media (max-width: 640px) {
  .chain { padding-inline: var(--space-5); gap: var(--space-4); }
  .chain__label { flex-shrink: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .chain__pulse, .chain__next-dots i { animation: none; }
  .chain__pulse { display: none; }
  .chain__next-dots i { opacity: 1; }
}

/* ── Commitment — closing statement: one anchor + a stacked list ───
   Not a 4-up grid. Tier 1: the anchor commitment (04 · "Evidence that
   ages well" — the page's closing thesis) as a dominant left panel.
   Tier 2: the other three commitments as a compact stacked rail.
   Tier 3: the mono commitment tag on each.
   Reads as a deliberate closing statement, not a filler band. */
.commitment-grid {
  margin-block-start: 0;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--space-7);
  align-items: stretch;
}
.commitment-rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
@media (max-width: 1040px) { .commitment-grid { grid-template-columns: 1fr; gap: var(--space-5); } }
.commitment-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl); /* D3: design-system-sanctioned commitment tile */
  padding: var(--space-7) var(--space-6) var(--space-6);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--space-3);
  position: relative;
  overflow: hidden;
  transition: border-color var(--motion), background var(--motion), transform var(--motion);
}
/* Anchor commitment — dominant tier: fills the rail height, larger
   serif title and body, more air. The closing argument. Content block
   is vertically centered (flex, no growing children) so the spare
   height splits evenly above/below instead of pooling as one hollow
   gap between the paragraph and the tag. */
.commitment-card--anchor {
  padding: var(--space-10) var(--space-8) var(--space-8);
  block-size: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.commitment-card--anchor .commitment-card__d {
  flex: 0 0 auto;
}
.commitment-card--anchor .commitment-card__tag {
  margin-block-start: var(--space-4);
}
.commitment-card--anchor .commitment-card__icon {
  inline-size: 48px; block-size: 48px; /* icon-box one-off (base .commitment-card__icon is 42px raw; off the spacing scale) */
}
.commitment-card--anchor .commitment-card__t { font-size: var(--text-3xl); }
.commitment-card--anchor .commitment-card__d { font-size: var(--text-md); }
/* Rail items — compact secondary tier: horizontal, denser. */
.commitment-card--rail {
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
  flex: 1;
}
.commitment-card--rail .commitment-card__icon {
  grid-row: 1 / span 2;
  inline-size: 38px; block-size: 38px; /* icon-box one-off (base 42px raw; off the spacing scale) */
}
.commitment-card--rail .commitment-card__t {
  font-size: var(--text-lg);
  align-self: center;
}
.commitment-card--rail .commitment-card__d {
  grid-column: 2;
  font-size: var(--text-sm);
}
.commitment-card--rail .commitment-card__tag { display: none; }
@media (max-width: 640px) {
  .commitment-card--rail { grid-template-columns: 1fr; }
  .commitment-card--rail .commitment-card__icon { grid-row: auto; }
  .commitment-card--rail .commitment-card__d { grid-column: 1; }
}
.commitment-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0; inset-inline-start: 0; inset-inline-end: 0;
  block-size: 3px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  transform: scaleX(0);
  transform-origin: start;
  transition: transform var(--motion-slow);
}
.commitment-card:hover {
  border-color: var(--brand-300);
  background: var(--brand-50);
}
.commitment-card:hover::before { transform: scaleX(1); }
.commitment-card__icon {
  inline-size: 42px; block-size: 42px;
  border-radius: var(--radius-lg);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--brand);
  transition: background var(--motion), border-color var(--motion);
}
.commitment-card:hover .commitment-card__icon {
  background: white;
  border-color: var(--brand-300);
}
.commitment-card__t {
  font-family: var(--font-serif);
  font-size: 19px; font-weight: var(--weight-semibold); /* deliberate 19px (cf. --role-card-title) */
  margin: 0;
  line-height: var(--leading-snug);
  letter-spacing: -0.015em;
}
.commitment-card__d {
  font-size: var(--text-sm); /* was 13.5px → 13 */
  color: var(--ink-muted);
  line-height: var(--leading-body);
  margin: 0;
  flex: 1;
}
.commitment-card__tag {
  font-size: 10px; /* micro mono tag — was 10.5 */
  letter-spacing: 0.1em;
  color: var(--accent-deep);
  font-weight: var(--weight-semibold);
  padding-block-start: var(--space-3);
  margin-block-start: var(--space-1);
  border-block-start: 1px solid var(--border);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.commitment-card__tag::before {
  content: "";
  inline-size: 14px; block-size: 1px;
  background: var(--accent-deep);
  display: inline-block;
}

/* ── Decision demo ───────────────────────────────────────────── */
.decision-demo {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: var(--space-14); align-items: start;
  margin-block-start: 0;
}
@media (max-width: 1040px) { .decision-demo { grid-template-columns: 1fr; gap: 36px; } } /* 36 kept: snapping = -4px (>2px) */
.decision-mock {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl); /* flagship 4.6 surface — kept at current 10px (no +2px change) */
  overflow: hidden;
  box-shadow: 0 12px 32px -10px rgba(10,14,26,0.12);
}
.decision-mock__head {
  padding: var(--space-5) var(--space-6);
  border-block-end: 1px solid var(--border);
  background: var(--surface);
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--text-xs); color: var(--ink-muted);
}
.decision-mock__body { padding: var(--space-6); }
.decision-mock__who {
  font-weight: var(--weight-semibold); font-size: var(--text-lg); margin: 0 0 2px;
}
.decision-mock__sys { font-size: var(--text-sm); color: var(--ink-muted); margin-block-end: var(--space-4); }
.decision-mock__ent {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  margin-block-end: var(--space-4);
}
.decision-mock__ent-l {
  font-size: var(--text-2xs); font-family: var(--font-sans); font-weight: var(--weight-semibold);
  color: var(--ink-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-block-end: 6px;
}
.decision-mock__bar {
  display: flex; gap: var(--space-2); flex-wrap: wrap;
  border-block-start: 1px solid var(--border);
  padding-block-start: var(--space-4);
  box-shadow: 0 -4px 8px rgba(10,14,26,0.04);
}
.decision-btn {
  flex: 1; min-inline-size: 110px;
  padding: var(--space-3) var(--space-3); /* was 12 14 → 12 (≤2px) */
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--ink);
  font-weight: var(--weight-semibold); font-size: var(--text-sm);
  text-align: start;
  transition: background var(--motion), color var(--motion), border-color var(--motion);
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
}
.decision-btn:hover { background: var(--surface); }
/* AUDIT #8 — explicit tokenized focus ring on all five decision buttons
   (incl. B's new --not-mine / --clarify). 4px control → --radius-sm ring
   corner. Light section → --focus-ring (brand-600). */
.decision-btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}
.decision-btn--approve.is-active { background: var(--low); color: white; border-color: var(--low); }
.decision-btn--revoke.is-active  { background: var(--critical); color: white; border-color: var(--critical); }
.decision-btn--exception.is-active { background: var(--high); color: white; border-color: var(--high); }
.decision-btn--not-mine.is-active { background: var(--decision-not-mine); color: white; border-color: var(--decision-not-mine); }
.decision-btn--clarify.is-active { background: var(--decision-clarify); color: white; border-color: var(--decision-clarify); }
.decision-btn__k {
  inline-size: 20px; block-size: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); font-size: var(--text-2xs);
  border: 1px solid currentColor;
  opacity: 0.55;
  font-family: var(--font-mono);
}
.decision-outcome {
  margin-block-start: 18px;
  padding: var(--space-3) var(--space-5); /* was 14 18 → 12 20 (≤2px) */
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: var(--text-sm);
  min-block-size: 80px;
}
.decision-outcome--approve { background: var(--low-tint); border-color: var(--low); color: var(--low-strong); }
.decision-outcome--revoke  { background: var(--critical-tint); border-color: var(--critical); color: var(--critical-strong); }
.decision-outcome--exception { background: var(--high-tint); border-color: var(--high); color: var(--high-strong); }
/* Neutral decisions — same tint / border / strong-text recipe as the
   three above, mapped onto neutral + brand tint tokens (no new raw
   values; --decision-not-mine/--decision-clarify already exist). */
.decision-outcome--not-mine { background: var(--surface-2); border-color: var(--decision-not-mine); color: var(--decision-not-mine); }
.decision-outcome--clarify  { background: var(--brand-tint); border-color: var(--decision-clarify); color: var(--brand-hover); }
/* Decision replay — the outcome panel slides in when a decision is
   taken (the panel remounts via key on the decision). Confirms the
   action registered; reduced motion zeroes it below. */
.decision-outcome.is-decided { animation: outcome-in var(--dur-slow) var(--ease); }
@keyframes outcome-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}
.decision-outcome__t { font-weight: var(--weight-bold); font-size: var(--text-base); margin-block-end: var(--space-1); }
.decision-outcome code {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  padding: 1px 4px; border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.06);
}
.decision-aside h3 {
  font-family: var(--font-serif);
  font-size: var(--text-3xl); font-weight: var(--weight-semibold);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.015em;
  line-height: var(--leading-list);
}
.decision-aside p {
  color: var(--ink-muted);
  line-height: 1.6;
  margin-block-end: 18px;
  font-size: var(--text-md);
}
.decision-aside ul {
  list-style: none; margin: 0; padding: 0;
  border-block-start: 1px solid var(--border);
  padding-block-start: var(--space-1);
}
.decision-aside li {
  /* block + absolutely-positioned bullet, NOT grid: this list contains
     mixed text and <code> runs ("…— Approved, not Approved!."), and a
     grid/flex container splits those into separate auto-placed items,
     garbling the sentence. Block flow keeps the line intact. */
  position: relative;
  padding-inline-start: 26px; /* 14px bullet column + 12px gap, as before */
  font-size: var(--text-base);
  padding-block: var(--space-2) ;
  line-height: 1.5;
  border-block-end: 1px solid var(--border);
}
.decision-aside li:last-child { border-block-end: 0; }
.decision-aside li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.85em;
  inline-size: 6px; block-size: 6px; border-radius: var(--radius-circle);
  background: var(--accent-deep);
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.12);
}

/* ── Demo form ────────────────────────────────────────────────── */
.demo-form-section { padding-block: var(--section-pad); }
.demo-shell {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: var(--space-14); align-items: start;
  background:
    radial-gradient(900px 600px at 0% 0%, var(--accent-a04), transparent 60%),
    var(--brand-950);
  color: var(--ink-on-dark);
  border-radius: var(--radius-xl);
  padding: var(--space-14);
  border: 1px solid rgba(255,255,255,0.06); /* one-off panel hairline — unique alpha */
}
@media (max-width: 1040px) { .demo-shell { grid-template-columns: 1fr; padding: 36px; gap: 36px; } } /* 36 kept: snapping = -4px */
.demo-info h2 {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.6vw, 40px); /* fluid demo headline — no single ramp step */
  font-weight: var(--weight-semibold);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
  color: white;
}
.demo-info p { color: var(--ink-on-dark-muted); margin: 0 0 var(--space-6); font-size: var(--text-lg); line-height: 1.6; max-width: 48ch; }
.demo-info ul { list-style: none; margin: 0; padding: 0; }
.demo-info li {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding-block: var(--space-2) ;
  font-size: var(--text-base);
  color: var(--ink-on-dark);
}
.demo-info li svg { flex-shrink: 0; color: var(--accent); margin-block-start: 2px; }

.form-card {
  background: white;
  border-radius: var(--radius-xl);
  /* 36px kept (snapping to --space-8 32px = -4px, >2px → keep look). */
  padding: 36px var(--space-8);
  color: var(--ink);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.4);
}
.form-card__steps {
  display: flex; align-items: center; gap: var(--space-2);
  margin-block-end: var(--space-6);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  font-weight: var(--weight-semibold);
}
.form-card__step-dot {
  inline-size: 22px; block-size: 22px;
  border-radius: var(--radius-circle);
  border: 1px solid var(--border-strong);
  background: var(--bg);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-2xs); font-weight: var(--weight-bold);
  color: var(--ink-muted);
  /* transition:all banned (AUDIT/PLAN §2) — enumerate the real props. */
  transition: border-color var(--motion), background var(--motion), color var(--motion);
}
.form-card__step-dot.is-active {
  border-color: var(--brand); background: var(--brand); color: white;
}
.form-card__step-dot.is-done {
  border-color: var(--low); background: var(--low); color: white;
}
.form-card__step-line {
  flex: 1; block-size: 1px; background: var(--border);
}
.form-card__step-line.is-done { background: var(--low); }
.form-card__t {
  font-family: var(--font-serif);
  font-size: var(--text-2xl); font-weight: var(--weight-semibold); /* was 22px → 21 (−1px) */
  margin: 0 0 var(--space-1);
}
.form-card__d {
  /* 22→--space-5 (−2px, ≤2px) — removes raw px, sets the intro→fields gap. */
  font-size: var(--text-sm); color: var(--ink-muted); margin-block-end: var(--space-5);
}
/* Field rhythm is intentionally asymmetric, not one uniform gap:
   label→control = --space-2 (tight pairing), control→field-end = --space-4,
   and a paired .field--row group gets --space-6 below (groups breathe more
   than fields within a group). Three distinct steps, all tokenized. */
.field { display: block; margin-block-end: var(--space-4); }
.field__l {
  display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--ink); margin-block-end: var(--space-2); /* 6→8 (+2px, ≤2px) */
}
.field__l .req { color: var(--critical); }
.field__inp, .field__sel, .field__txt {
  inline-size: 100%;
  padding: 11px 14px; /* input box metric — kept (≤2px would resize every field) */
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: white;
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--ink);
  transition: border-color var(--motion), box-shadow var(--motion);
}
/* Focus cue is fully tokenized: the active-field border uses --focus-ring,
   and the keyboard ring is the global tokenized :focus-visible recipe
   (styles.css:21 — outline width/offset/color all tokens). The raw-rgba
   inner glow A documented here is removed: no color-mix, no new token,
   no raw value, and keyboard focus is now visible (was suppressed by
   outline:0 — AUDIT #8). */
.field__inp:focus, .field__sel:focus, .field__txt:focus {
  border-color: var(--focus-ring);
}
.field__txt { min-block-size: 90px; resize: vertical; }
.field--err .field__inp, .field--err .field__sel, .field--err .field__txt {
  border-color: var(--critical);
}
.field__err {
  font-size: var(--text-xs); color: var(--critical);
  margin-block-start: var(--space-1);
  display: flex; gap: var(--space-1); align-items: center;
}
.field--row {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
  /* group-level rhythm: a paired row breathes more (24) than the 16
     between fields within — asymmetric, intentional, tokenized. The
     trailing group's margin collapses with .form-card__actions'
     --space-6 top margin (block context), so no double gap before the
     buttons — same collapsing the original layout already relied on. */
  margin-block-end: var(--space-6);
}
@media (max-width: 600px) {
  /* stacked on mobile, the pair's two fields keep their own --space-4;
     drop the doubled horizontal gutter (now vertical) so rhythm stays even. */
  .field--row { grid-template-columns: 1fr; gap: 0; }
}
.form-card__actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}

.form-success {
  text-align: center;
  padding-block: var(--space-10);
}
.form-success__icon {
  inline-size: 56px; block-size: 56px;
  border-radius: var(--radius-circle);
  background: var(--low-tint);
  color: var(--low);
  display: inline-flex; align-items: center; justify-content: center;
  margin-block-end: var(--space-4);
}
.form-success__t {
  font-family: var(--font-serif);
  font-size: var(--text-3xl); font-weight: var(--weight-semibold);
  margin: 0 0 var(--space-2);
}
.form-success__d {
  color: var(--ink-muted); font-size: var(--text-base);
  margin: 0 auto; max-width: 36ch;
}

/* radio cards */
.radio-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2);
}
@media (max-width: 600px) { .radio-cards { grid-template-columns: 1fr; } }
.radio-card {
  display: block;
  padding: var(--space-3) var(--space-3); /* was 12 14 → 12 (≤2px) */
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color var(--motion), background var(--motion);
}
.radio-card input { position: absolute; opacity: 0; }
.radio-card.is-on {
  border-color: var(--brand);
  background: var(--brand-50);
  box-shadow: 0 0 0 1px var(--brand);
}
.radio-card__t { font-weight: var(--weight-semibold); }
.radio-card__d { color: var(--ink-muted); font-size: var(--text-xs); margin-block-start: 2px; }

/* ── Demo form: states (submitting / error / retry) ───────────────
 * The form sits on the dark navy .demo-shell. The global tokenized
 * :focus-visible (styles.css:21) rings with --focus-ring (brand-600),
 * which is near-invisible on navy. .demo-shell is NOT .dark-classed,
 * so .dark :focus-visible (styles.css:25) does not reach the ghost
 * Back button / error-state buttons that sit directly on the navy.
 * Scope the dark focus token to controls on the shell itself; the
 * white .form-card keeps brand-600 (correct contrast there). All
 * tokenized — width/offset/color are A's focus tokens. */
.demo-shell :focus-visible {
  outline-color: var(--focus-ring-dark);
}
.form-card :focus-visible {
  outline-color: var(--focus-ring); /* white card → brand-600 ring */
}

/* Disabled affordance for the in-flight submit / locked Back. */
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* In-flight spinner. Purpose: indicate work in progress while the
 * async submit resolves (the only continuous motion in the form).
 * `linear` is correct for a constant-angular-velocity rotor — same
 * documented exception class as .scroll-progress (a 1:1 indicator,
 * not eased pointer feedback). The "Sending request…" label carries
 * the status in text, so reduced-motion can drop the spin entirely
 * with zero loss of feedback. */
.btn__spinner {
  inline-size: 1em; block-size: 1em;
  border-radius: var(--radius-circle);
  border: 2px solid var(--accent-a32);
  border-block-start-color: var(--accent-bright);
  display: inline-block;
  animation: form-spin var(--dur-reveal) linear infinite;
}
@keyframes form-spin {
  to { transform: rotate(360deg); }
}

/* Error / retry card — reuses .form-success centering. Calm, not
 * alarming: the icon chip recolors to critical tones; copy stays
 * dry. Data survives in component state; the buttons re-send it. */
.form-error__icon {
  background: var(--critical-tint);
  color: var(--critical);
}
.form-error__actions {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
  flex-wrap: wrap;
}

/* Confirm-step corrective nudge when no source system is selected
 * (AUDIT missing-state #5). Critical-toned, points back to step 2. */
.form-card__recap-fix {
  font-size: var(--text-xs); color: var(--critical);
  margin-block: var(--space-2) 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1);
}
.form-card__recap-link {
  border: 0; background: transparent; padding: 0;
  font: inherit; color: var(--critical);
  font-weight: var(--weight-semibold);
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.form-card__recap-link:hover { color: var(--critical-strong); }

/* ── Human check (arithmetic captcha, final step) ──────────────── */
.captcha-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.captcha-q {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--ink);
  min-inline-size: 96px;
  white-space: nowrap;
}
.captcha-inp { max-inline-size: 130px; }
.captcha-refresh {
  inline-size: 40px; block-size: 40px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink-muted);
  transition: background var(--motion), color var(--motion), border-color var(--motion);
}
.captcha-refresh:hover { color: var(--ink); background: var(--surface); }
.captcha-refresh:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius);
}
.form-card__privacy {
  margin-block-start: var(--space-4);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  line-height: var(--leading-flat);
}

/* Confirm transition: success / error card fades in once the async
 * resolves. Purpose: confirm the submit completed (reveal causality).
 * --dur-slow (250ms) — at the brief's cap; honors reduced-motion. */
.form-success {
  animation: fadeIn var(--dur-slow) var(--ease) both;
}
@media (prefers-reduced-motion: reduce) {
  .form-success { animation: none !important; }
  .btn__spinner { animation: none !important; }
  .decision-outcome.is-decided { animation: none !important; }
}

/* ── Demo form states (submitting / error / retry) ─────────────── */
/* Ghost buttons INSIDE the white form card must stay light-surface.
   `.demo-shell .btn--ghost` (styles.css:152) intentionally restyles
   ghosts on the navy shell, but the shell contains the white .form-card,
   so without this restore the Back / Back-to-form buttons render as
   near-white text with a near-invisible border on white. */
.form-card .btn--ghost {
  color: var(--ink);
  border-color: var(--border-strong);
  background: transparent;
}
.form-card .btn--ghost:hover {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border-strong);
}

/* Headings and terminal cards take programmatic focus (focus moved on
   step change / status swap for screen-reader context). They are not
   interactive, so no visible ring. */
.form-card [tabindex="-1"]:focus {
  outline: none;
}

/* Honeypot — present in the DOM for bots, gone for humans and AT. */
.hp-field {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Extra note under the success card (mailto handoff fallback path). */
.form-success__note {
  color: var(--ink-muted);
  font-size: var(--text-sm);
  margin: var(--space-3) auto 0;
  max-width: 42ch;
}

/* Radio / checkbox cards — keyboard focus. The native inputs are
   visually hidden (.radio-card input), so without :focus-within a
   keyboard user tabs into the grid with zero visible position (a
   WCAG 2.4.7 failure). The ring mirrors .is-on but stays outline-
   based so it never reads as a selection. */
.radio-card:focus-within {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius);
}
.radio-card:focus-within:not(.is-on) {
  background: var(--brand-50);
}

/* Fieldset/legend groups (multi-control fields). */
.field--group {
  border: 0;
  padding: 0;
  margin-block: 0 var(--space-4);
  margin-inline: 0;
  min-inline-size: 0;
}
.field--group legend {
  padding: 0;
  margin-block-end: var(--space-2);
}
.field--group .field__err {
  margin-block-start: var(--space-2);
}

/* Three-across checkbox grid (source systems). A modifier class, not an
   inline style — the inline style used to defeat the ≤600px mobile
   collapse and squeezed nine tap targets onto phone widths. */
.radio-cards--thirds { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) {
  .radio-cards--thirds { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .radio-cards--thirds { grid-template-columns: 1fr; }
}

/* Anchored sections: the sticky nav is 68px tall — keep deep links and
   nav clicks from sliding a section title underneath it. */
.section, .demo-form-section, .hero {
  scroll-margin-top: calc(var(--nav-h) + 8px);
}

/* ── Footer ───────────────────────────────────────────────────── */
.footer {
  background: var(--brand-950);
  color: var(--ink-on-dark-muted);
  border-block-start: 1px solid rgba(255,255,255,0.06);
}
.footer__cta {
  background:
    radial-gradient(800px 320px at 95% 0%, var(--accent-a10), transparent 60%),
    radial-gradient(700px 320px at 0% 100%, rgba(58, 95, 191, 0.10), transparent 65%),
    var(--brand-950);
  border-block-end: 1px solid rgba(255,255,255,0.08);
}
.footer__cta-inner {
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: var(--space-8);
  align-items: center;
  padding-block: var(--space-14);
}
.footer__cta-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-3);
}
.footer__cta-h {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.4vw, 38px); /* fluid CTA headline — no single ramp step */
  font-weight: var(--weight-semibold);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: white;
  margin: 0;
}
.footer__cta-actions {
  display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap;
}
@media (max-width: 880px) {
  .footer__cta-inner { grid-template-columns: 1fr; gap: var(--space-6); padding-block: 44px; } /* 44 kept: snapping = -4px */
}

.footer .wrap { padding-block: var(--space-14) var(--space-8); }
.footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: var(--space-10);
}
@media (max-width: 1040px) { .footer__top { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 720px)  { .footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }
@media (max-width: 480px)  { .footer__top { grid-template-columns: 1fr; } }

.footer__brand-block { max-width: 38ch; }
.footer__brand-line {
  display: inline-flex; align-items: center; gap: 10px;
  color: white; text-decoration: none;
  margin-block-end: var(--space-4);
  font-family: var(--font-serif); font-size: 20px; font-weight: var(--weight-semibold); /* deliberate 20px brand line */
  letter-spacing: -0.01em;
}
.footer__brand-desc {
  margin: 0 0 18px;
  font-size: var(--text-sm); /* was 13.5px → 13 */
  line-height: 1.6;
  color: var(--ink-on-dark-muted);
}
.footer__chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.footer__chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: var(--weight-semibold); /* micro chip label — was 10.5 */
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--ink-on-dark);
  background: rgba(255,255,255,0.03);
}
.footer__chip svg { color: var(--accent); }

.footer__col-t {
  font-size: var(--text-2xs); font-weight: var(--weight-bold);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-on-dark-faint);
  margin: 0 0 var(--space-4);
}
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li { margin-block: var(--space-2); }
.footer__col a {
  color: var(--ink-on-dark); text-decoration: none; font-size: var(--text-sm); /* was 13.5px → 13 */
  transition: color var(--motion);
}
.footer__col a:hover { color: var(--accent); }

.footer__bottom {
  margin-block-start: var(--space-10);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-4);
  font-size: var(--text-xs);
  color: var(--ink-on-dark-faint);
}
.footer__legal { line-height: 1.6; }
.footer__legal-sub { color: var(--ink-on-dark-faint); font-size: var(--text-2xs); margin-block-start: 2px; } /* #6f7d96 → faint; 11.5 → 11 */
.footer__legal-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer__legal-links a {
  color: var(--ink-on-dark); text-decoration: none;
  transition: color var(--motion);
}
.footer__legal-links a:hover { color: var(--accent); }
@media (max-width: 640px) {
  .footer__bottom { flex-direction: column; }
}

/* utilities */
.text-accent { color: var(--accent); }
.text-deep { color: var(--accent-deep); }
.spacer-sm { block-size: var(--space-6); }
.spacer-md { block-size: var(--space-10); }

/* ──────────────────────────────────────────────────────────────
 * MOBILE — comprehensive responsive pass
 * Target: phones (≤ 640px) and small tablets (≤ 880px).
 * Goals: legible type, no horizontal scroll, comfortable tap targets,
 *        nav remains useful, forms remain usable, cards stack cleanly.
 * ────────────────────────────────────────────────────────────── */

@media (max-width: 880px) {
  .section { padding-block: var(--space-16); }
  .wrap { padding-inline: var(--space-5); }
  .section-title { font-size: clamp(26px, 6vw, 36px); } /* fluid */
  .section-lede { font-size: var(--text-lg); }

  /* Nav — keep brand + CTA, slightly tighter */
  .nav__inner { block-size: 60px; gap: var(--space-3); } /* 60px structural nav height */
  .nav__wordmark { font-size: 17px; } /* mobile wordmark — no ramp step */
  .nav__wordmark em { display: none; }
  .nav__cta .btn { padding: 9px 14px; font-size: var(--text-sm); } /* btn box metric kept */
}

@media (max-width: 640px) {
  .section { padding-block: var(--space-14); }
  .wrap { padding-inline: var(--space-4); }
  .section-title { font-size: clamp(24px, 7vw, 30px); line-height: 1.15; } /* fluid */
  .section-lede { font-size: var(--text-md); line-height: var(--leading-body); margin-block-start: var(--space-3); } /* 14→12 (≤2px); logical prop */
  .eyebrow { font-size: 10px; } /* micro eyebrow on phones */

  /* Nav */
  .nav__inner { block-size: 56px; } /* structural nav height */
  .nav__mark { inline-size: 24px; block-size: 24px; }
  .nav__wordmark { font-size: 15px; }
  .nav__cta .btn { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
  .nav__cta .btn svg { display: none; }

  /* Hero */
  .hero { padding-block: var(--space-14) var(--space-12); } /* 56→56 exact, 48 exact */
  .hero__grid { gap: var(--space-10); }
  .hero__title { font-size: clamp(32px, 8vw, 42px); line-height: 1.08; margin-block-end: 18px; } /* fluid; 18px kept (logical) */
  .hero__sub { font-size: var(--text-lg); line-height: var(--leading-body); margin-block-end: var(--space-6); }
  .hero__ctas { gap: 10px; }
  .hero__ctas .btn { padding: var(--space-3) var(--space-4); font-size: var(--text-base); flex: 1; justify-content: center; min-width: 0; }
  .hero__chips { gap: 6px; margin-block-start: var(--space-6); }
  .chip { font-size: 10px; padding: 4px 8px; } /* micro pill */
  .hero__meta { grid-template-columns: 1fr; gap: var(--space-3); padding-block-start: 18px; margin-block-start: var(--space-8); } /* 14→12 (≤2px); 18px kept */
  .hero__meta-item { padding: 0; }
  .hero__meta-item + .hero__meta-item {
    padding-inline-start: 0;
    border-inline-start: 0;
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--border-on-dark);
  }
  .hero__meta-k { font-size: var(--text-3xl); }
  .hero__meta-v { font-size: var(--text-2xs); }

  /* Hero dashboard mock — keep visible but compact (mock-internal metrics) */
  .mock__chrome { padding: 10px 12px; }
  .mock__chrome-url { font-size: 10px; padding: 3px 10px; }
  .mock__body { padding: 14px 14px 16px; }
  .mock__kpis { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .mock__kpi { padding: 8px 6px; }
  .mock__kpi-k { font-size: var(--text-lg); }
  .mock__kpi-v { font-size: 8px; letter-spacing: 0.05em; }
  .mock__row { grid-template-columns: auto 1fr 64px; gap: var(--space-2); padding: 9px 12px; }
  /* the severity pill is wider than a fixed 56px track at phone widths —
     let the track size to the pill so it never covers the row text */
  .mock__row-user { font-size: var(--text-2xs); }
  .mock__row-ent { font-size: 10px; }
  .mock__mini-btn { inline-size: 22px; block-size: 22px; }
  .mock__h1 { font-size: var(--text-md); }
  .mock__sub { font-size: var(--text-2xs); }

  /* Problem stats */
  .stat-grid { gap: var(--space-3); margin-block-start: 36px; } /* 14→12 (≤2px); 36 kept */
  .stat { padding: var(--space-6) var(--space-6); } /* 24 exact; 22→24 (≤2px) */
  .stat__k { font-size: 42px; margin-block-end: 10px; } /* responsive numeral — no ramp step */
  .stat__t { font-size: var(--text-base); }
  .stat__src { margin-block-start: var(--space-3); font-size: 10px; }

  /* Compare */
  .compare { margin-block-start: 36px; } /* 36 kept (>2px to snap) */
  .compare__head {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
  }
  .compare__title { font-size: 17px; } /* mobile sub-head — no ramp step */
  .compare__toggle { width: 100%; justify-content: stretch; }
  .compare__toggle button { flex: 1; padding: 9px 10px; font-size: var(--text-xs); }
  .compare__pane { padding: var(--space-5) var(--space-5); } /* 18→20 (≤2px) */
  .compare__step {
    grid-template-columns: 28px 1fr;
    gap: var(--space-3);
    padding: var(--space-3) 0;
  }
  .compare__step-time {
    grid-column: 2;
    justify-self: start;
    margin-block-start: 6px;
  }
  .compare__step-title { font-size: var(--text-base); }
  .compare__step-sub { font-size: var(--text-sm); }
  .compare__total {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-5);
  }
  .compare__total strong { font-size: 18px; } /* mobile payoff numeral */

  /* Flow */
  .flow { margin-block-start: 36px; }
  .flow__step { padding: var(--space-6) var(--space-5); } /* 22→24, 20 exact (≤2px) */
  .flow__title { font-size: 19px; } /* mobile serif title — no ramp step */
  .flow__detail { margin-block-start: var(--space-3); padding-block-start: var(--space-3); }

  /* Features */
  .features { margin-block-start: 36px; }
  .feature { padding: var(--space-6) var(--space-6); } /* 26→24, 22→24 (≤2px) */
  .feature__t { font-size: var(--text-xl); }
  .feature__d { font-size: var(--text-sm); } /* was 13.5px → 13 */
  .feature__icon { inline-size: 36px; block-size: 36px; }

  /* Connectors */
  .connector-tools {
    margin-block: var(--space-8) 18px;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  .connector-filter {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .connector-filter::-webkit-scrollbar { display: none; }
  .connector-filter button { white-space: nowrap; padding: var(--space-2) var(--space-3); font-size: var(--text-xs); } /* 14→12 (≤2px) */
  .connector { padding: var(--space-5); grid-template-columns: 40px 1fr 22px; gap: var(--space-3); } /* 18→20 (≤2px); 14→12 */
  .connector__icon { inline-size: 40px; block-size: 40px; }
  .connector__name { font-size: var(--text-md); }
  .connector__tagline { font-size: var(--text-xs); } /* was 12.5px → 12 */
  .connector--more { grid-template-columns: 40px 1fr; }

  /* Security */
  .sec-card { padding: var(--space-6) var(--space-6); } /* 24 exact; 22→24 (≤2px) */
  .sec-card__t { font-size: 19px; } /* mobile serif title — no ramp step */
  .sec-card__d { font-size: var(--text-sm); }

  .sec-sheet { margin-block-start: var(--space-6); }
  .sec-sheet__head { padding: var(--space-4) var(--space-5); flex-direction: column; align-items: flex-start; gap: 6px; }
  .sec-sheet__title { font-size: var(--text-lg); }
  .sec-sheet__sub { font-size: 10px; }
  .sec-sheet__row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-5);
  }
  .sec-sheet__l { font-size: 10px; }
  .sec-sheet__v { font-size: var(--text-sm); }

  /* Decision demo */
  .decision-demo { margin-block-start: 36px; gap: var(--space-8); }
  .decision-mock__body { padding: 18px; } /* 18 kept (snapping >2px to nearest) */
  .decision-mock__who { font-size: var(--text-md); }
  .decision-mock__sys { font-size: var(--text-xs); }
  .decision-mock__ent { padding: var(--space-3); font-size: var(--text-2xs); }
  .decision-mock__bar { flex-direction: column; gap: var(--space-2); padding-block-start: var(--space-3); }
  .decision-btn { width: 100%; min-inline-size: 0; padding: var(--space-3) var(--space-3); } /* was 12 14 → 12 (≤2px) */
  .decision-outcome { font-size: var(--text-sm); padding: var(--space-3) var(--space-3); } /* 12.5→13; 12 14→12 */
  .decision-aside h3 { font-size: 19px; } /* mobile serif title — no ramp step */
  .decision-aside li { font-size: var(--text-sm); padding: 5px 0; }

  /* Commitment */
  .commitment-grid { margin-block-start: 36px; gap: var(--space-3); }
  .commitment-card { padding: var(--space-6) var(--space-5); } /* 24 exact; 20 exact */
  .commitment-card__t { font-size: 17px; } /* mobile serif title — no ramp step */
  .commitment-card__d { font-size: var(--text-sm); }

  /* Demo form */
  .demo-form-section { padding-block: var(--space-14); }
  .demo-shell { padding: var(--space-7) var(--space-5); gap: var(--space-7); border-radius: var(--radius-lg); }
  .demo-info h2 { font-size: clamp(24px, 6.5vw, 30px); } /* fluid */
  .demo-info p { font-size: var(--text-md); }
  .demo-info li { font-size: var(--text-sm); padding: var(--space-2) 0; }
  .form-card { padding: var(--space-6) var(--space-5); } /* 26→24, 20 exact (≤2px) */
  .form-card__t { font-size: 19px; } /* mobile serif title — no ramp step */
  .form-card__d { font-size: var(--text-xs); }
  .form-card__steps { font-size: var(--text-2xs); gap: 6px; margin-block-end: var(--space-5); }
  .form-card__step-dot { inline-size: 20px; block-size: 20px; font-size: 10px; }
  .field__inp, .field__sel, .field__txt { padding: 11px 12px; font-size: var(--text-base); } /* input box metric kept */
  .field__l { font-size: var(--text-xs); } /* was 12.5px → 12 */
  .form-card__actions { flex-direction: column-reverse; gap: var(--space-2); }
  .form-card__actions .btn { width: 100%; justify-content: center; padding: var(--space-3) var(--space-4); }

  /* Footer */
  .footer { padding-block: 44px 28px; } /* 44/28 kept (snapping >2px) */
  .footer__top { gap: var(--space-7); }
  .footer__brand-line { font-size: 17px; } /* mobile serif line — no ramp step */
  .footer__col-t { font-size: 10px; }
  .footer__col a { font-size: var(--text-sm); }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-2); font-size: var(--text-2xs); }
  .footer__bottom a { margin-inline-start: 0; margin-inline-end: var(--space-4); }
}

/* Tiny phones (≤ 380px) — extra-tight final pass */
@media (max-width: 380px) {
  .hero__title { font-size: 30px; }
  .hero__sub { font-size: 15px; }
  .hero__ctas { flex-direction: column; }
  .hero__ctas .btn { width: 100%; }
  .mock__row { grid-template-columns: 50px 1fr 56px; gap: 6px; padding: 8px 10px; }
  .mock__kpi-k { font-size: 14px; }
}