/* ==========================================================================
   zapXD — Sovereign Data Exchange
   Landing page stylesheet.

   Design direction: "Sovereign Ledger".
   Dark sections carry EVIDENCE (the ledger, the proof, the guarantees).
   Light sections carry CLAIMS (the narrative, the explanation).
   The alternation is deliberate — it tells the reader where to look for proof.

   Tokens are single-sourced here. Unlike the HTML POC, which shipped two
   overlapping :root sets (style.css + register.css), every token is defined
   exactly once, in this file.

   No external dependencies. No web fonts, no CDN, no framework.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Ink ramp — dark surfaces, from deepest to lightest */
  --ink-900: #060a13;
  --ink-800: #0b1220;
  --ink-700: #0f172a;   /* carried from the POC's --nav */
  --ink-600: #16213a;
  --ink-500: #1e2b48;
  --ink-400: #2a3a5c;

  /* Light surfaces */
  --canvas: #f6f8fb;    /* carried from the POC's --bg */
  --surface: #ffffff;
  --surface-2: #eef2f9;

  /* Text on light */
  --text: #142033;      /* carried from the POC's --text */
  --text-2: #3d4a61;
  --muted: #667085;     /* carried from the POC's --muted */

  /* Text on dark */
  --on-dark: #eef2f9;
  --on-dark-2: #a8b6ce;
  --on-dark-3: #7183a0;

  /* Borders */
  --border: #e2e7f0;
  --border-2: #cfd8e6;
  --border-dark: #24334f;

  /* Brand — carried from the POC */
  --primary: #2563eb;
  --primary-600: #1d4ed8;
  --primary-300: #60a5fa;   /* the POC's brand-logo gradient start */
  --soft: #eef4ff;

  /* Accent — the sovereign gold. Warm, used sparingly, nods at the flag
     without becoming kitsch. Reserved for consent emphasis. */
  --accent: #e8a33d;
  --accent-soft: #fdf3e3;

  /* Semantics — these mean something. Never decorative. */
  --granted: #16a34a;
  --granted-soft: #e8f7ee;
  --denied: #dc2626;
  --denied-soft: #fdeaea;
  --pending: #d97706;
  --pending-soft: #fdf1e3;
  --ledger: #0ea5e9;

  /* Geometry */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --radius-pill: 999px;

  --shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
  --shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.12);
  --shadow-dark: 0 24px 60px rgba(0, 0, 0, 0.45);

  /* Type — a system stack. No web fonts: a government property should not
     make third-party requests on page load. */
  --font: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
          Arial, sans-serif;
  --font-mono: "SFMono-Regular", "JetBrains Mono", "Cascadia Mono", Consolas,
               "Liberation Mono", Menlo, monospace;

  --shell: 1180px;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: var(--primary); }

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.022em;
  font-weight: 700;
}

p { margin: 0; }

/* Visible focus for keyboard users — never removed. */
:focus-visible {
  outline: 3px solid var(--primary-300);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* Screen-reader-only, but focusable when it needs to be. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 96px 0; }
.section--tight { padding: 64px 0; }

/* Anchor targets must clear the sticky header, or every in-page link lands
   with its section heading hidden behind the bar. */
[id] { scroll-margin-top: 84px; }

.section--dark {
  background: var(--ink-800);
  color: var(--on-dark);
}

.section--dark h2,
.section--dark h3 { color: #fff; }

/* Eyebrow label above section headings */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 18px;
}

.section--dark .eyebrow { color: var(--primary-300); }

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: currentColor;
  flex: none;
}

.section-title {
  font-size: clamp(28px, 4vw, 42px);
  max-width: 22ch;
}

.section-lede {
  margin-top: 20px;
  max-width: 62ch;
  font-size: 18px;
  color: var(--text-2);
}

.section--dark .section-lede { color: var(--on-dark-2); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease,
              color 0.18s ease, transform 0.18s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28);
}
.btn--primary:hover { background: var(--primary-600); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-2);
}
.btn--ghost:hover { border-color: var(--primary); color: var(--primary); }

.section--dark .btn--ghost,
.hero .btn--ghost {
  color: var(--on-dark);
  border-color: #33456b;
}
.section--dark .btn--ghost:hover,
.hero .btn--ghost:hover {
  border-color: var(--primary-300);
  color: #fff;
}

.btn--sm { padding: 9px 16px; font-size: 14px; }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 18, 32, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.header.is-stuck {
  border-bottom-color: var(--border-dark);
  background: rgba(8, 13, 23, 0.94);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: #fff;
  flex: none;
}

/* The lockup is one raster source, cropped to its content and downscaled to 3x
   the size it renders at (403x90 for a 134x30 box), so it stays sharp on any
   display without carrying the master file's 535 KB.

   It is a dark-background asset — its "zap" is white. On a light surface only
   the tile and the blue "XD" survive, which reads as a broken lockup. Do not
   put it on light without a reversed variant. */
.brand__lockup {
  display: block;
  width: 134px;
  height: 30px;
  flex: none;
}

.brand__text { display: flex; flex-direction: column; line-height: 1.15; }

.brand__sub {
  font-size: 10px;
  color: var(--on-dark-3);
  letter-spacing: 0.055em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.nav__link {
  padding: 8px 12px;
  border-radius: var(--radius-xs);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--on-dark-2);
  text-decoration: none;
  transition: color 0.16s ease, background-color 0.16s ease;
}
.nav__link:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }

.header__cta { flex: none; margin-left: 12px; }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 40px; height: 40px;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-xs);
  background: transparent;
  cursor: pointer;
  color: #fff;
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--ink-800);
  color: var(--on-dark);
  padding: 110px 0 88px;
  overflow: hidden;
}

/* Faint ledger grid — texture, not decoration. Suggests a structured record. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(96, 165, 250, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 165, 250, 0.055) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 78%);
  pointer-events: none;
}

/* Warm bloom behind the headline. */
.hero::after {
  content: "";
  position: absolute;
  top: -280px; left: 50%;
  width: 900px; height: 620px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(37, 99, 235, 0.22), transparent 66%);
  pointer-events: none;
}

.hero__inner { position: relative; z-index: 1; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 11px;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.04);
  font-size: 13px;
  font-weight: 500;
  color: var(--on-dark-2);
  margin-bottom: 30px;
}

.hero__badge .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--granted);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
  flex: none;
}

.hero__title {
  font-size: clamp(38px, 6.4vw, 68px);
  letter-spacing: -0.035em;
  line-height: 1.04;
  max-width: 17ch;
  color: #fff;
}

.hero__title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--primary-300), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--primary-300); /* fallback */
}

.hero__lede {
  margin-top: 26px;
  max-width: 60ch;
  font-size: clamp(17px, 1.6vw, 19.5px);
  color: var(--on-dark-2);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

/* Audience strip — "purpose-built for" */
.audience {
  margin-top: 66px;
  padding-top: 30px;
  border-top: 1px solid var(--border-dark);
}

.audience__label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-3);
  margin-bottom: 18px;
}

.audience__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.audience__item {
  padding: 9px 17px;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.035);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--on-dark-2);
}

/* --------------------------------------------------------------------------
   7. Guarantees band — architectural invariants, not usage metrics.
   -------------------------------------------------------------------------- */

.band {
  background: var(--ink-900);
  border-top: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-dark);
  padding: 40px 0;
}

.band__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.band__item { display: flex; gap: 13px; align-items: flex-start; }

.band__icon {
  flex: none;
  width: 34px; height: 34px;
  border-radius: var(--radius-xs);
  background: rgba(37, 99, 235, 0.16);
  border: 1px solid rgba(96, 165, 250, 0.26);
  display: grid;
  place-items: center;
  color: var(--primary-300);
}

.band__claim {
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
}

.band__note {
  font-size: 13px;
  color: var(--on-dark-3);
  line-height: 1.5;
  margin-top: 3px;
}

/* --------------------------------------------------------------------------
   8. Problem section
   -------------------------------------------------------------------------- */

.problem__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

/* Four cards, 2x2 rather than 4-across: at 1180px a four-up row leaves each
   card too narrow to hold a sentence without wrapping to five lines. */
.problem__grid--quad { grid-template-columns: repeat(2, 1fr); }

/* Use-case numbering is neutral. The red badge marks a refusal, so reusing it
   here would say "denied" about a sector. */
.problem__grid--quad .problem__num {
  color: var(--primary-600);
  background: var(--soft);
}

.problem__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 26px;
  box-shadow: var(--shadow);
}

.problem__num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--denied);
  background: var(--denied-soft);
  border-radius: var(--radius-xs);
  padding: 3px 9px;
  display: inline-block;
  margin-bottom: 16px;
}

.problem__card h3 { font-size: 18px; margin-bottom: 10px; }
.problem__card p { color: var(--text-2); font-size: 15.5px; }

/* --------------------------------------------------------------------------
   9. The consent proof — the centrepiece.

   Two columns: the request envelope on the left, the lifecycle and the
   visitor's decision on the right. Below both, the ledger fills up.
   -------------------------------------------------------------------------- */

.proof { position: relative; }

.proof__grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 26px;
  margin-top: 46px;
  align-items: start;
}

.panel {
  background: var(--ink-700);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  overflow: hidden;
}

.panel__head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-dark);
  background: rgba(255, 255, 255, 0.025);
}

.panel__title {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--on-dark-2);
}

.panel__body { padding: 20px; }

/* --- The request envelope --- */

.envelope__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--border-dark);
  font-size: 13.5px;
}
.envelope__row:last-of-type { border-bottom: 0; }

.envelope__key {
  font-family: var(--font-mono);
  color: var(--on-dark-3);
  flex: none;
}

.envelope__val {
  font-family: var(--font-mono);
  color: #fff;
  text-align: right;
  word-break: break-all;
}

.envelope__val--hash { color: var(--ledger); letter-spacing: -0.01em; }

/* Field-level minimisation list */
.fields { margin-top: 22px; }

.fields__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--on-dark-3);
  margin-bottom: 11px;
}

.fields__list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid transparent;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--on-dark-2);
  transition: background-color 0.3s ease, border-color 0.3s ease,
              color 0.3s ease, opacity 0.3s ease;
}

.field__mark {
  width: 16px; height: 16px;
  flex: none;
  display: grid;
  place-items: center;
}

/* States applied by JS */
.field.is-released {
  background: var(--granted-soft);
  border-color: rgba(22, 163, 74, 0.4);
  color: #0d6b33;
  font-weight: 600;
}

.field.is-excluded {
  opacity: 0.5;
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.45);
}

.field__note {
  margin-left: auto;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.85;
}

/* --- Lifecycle stepper --- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.step {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  padding: 11px 0;
  opacity: 0.42;
  transition: opacity 0.35s ease;
}

.step.is-active,
.step.is-done,
.step.is-denied { opacity: 1; }

.step__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.step__dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--border-dark);
  background: var(--ink-600);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--on-dark-3);
  flex: none;
  transition: all 0.3s ease;
}

.step__line {
  width: 1.5px;
  flex: 1;
  min-height: 8px;
  background: var(--border-dark);
  transition: background-color 0.3s ease;
}
.step:last-child .step__line { display: none; }

.step.is-active .step__dot {
  border-color: var(--primary-300);
  background: rgba(37, 99, 235, 0.2);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
  animation: pulse 1.5s ease-in-out infinite;
}

.step.is-done .step__dot {
  border-color: var(--granted);
  background: var(--granted);
  color: #fff;
}
.step.is-done .step__line { background: var(--granted); }

.step.is-denied .step__dot {
  border-color: var(--denied);
  background: var(--denied);
  color: #fff;
}
.step.is-denied .step__line { background: var(--denied); }

.step__title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  line-height: 1.35;
}

.step__detail {
  font-size: 13px;
  color: var(--on-dark-3);
  font-family: var(--font-mono);
  margin-top: 2px;
  line-height: 1.5;
  min-height: 0;
}

/* --- The decision block --- */

.decision {
  margin-top: 22px;
  padding: 20px;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-sm);
  background: rgba(37, 99, 235, 0.07);
}

.decision__prompt {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}

.decision__sub {
  font-size: 13px;
  color: var(--on-dark-3);
  margin-bottom: 16px;
}

.decision__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.btn--grant {
  background: var(--granted);
  color: #fff;
  box-shadow: 0 8px 20px rgba(22, 163, 74, 0.26);
}
.btn--grant:hover { background: #12833c; }

.btn--deny {
  background: transparent;
  color: #fff;
  border-color: rgba(220, 38, 38, 0.55);
}
.btn--deny:hover { background: var(--denied); border-color: var(--denied); }

.btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
}

/* Verdict banner, revealed after the decision */
.verdict {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  display: none;
  align-items: flex-start;
  gap: 10px;
}
.verdict.is-shown { display: flex; }
.verdict--granted {
  background: var(--granted-soft);
  color: #0d6b33;
  border: 1px solid rgba(22, 163, 74, 0.4);
}
.verdict--denied {
  background: var(--denied-soft);
  color: #8f1d1d;
  border: 1px solid rgba(220, 38, 38, 0.35);
}

.verdict__sub {
  display: block;
  font-weight: 500;
  font-size: 13px;
  margin-top: 3px;
  opacity: 0.9;
}

/* --- The ledger --- */

.ledger {
  margin-top: 26px;
  background: var(--ink-900);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  overflow: hidden;
}

.ledger__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-dark);
}

.ledger__head .panel__title { flex: 1; }

.ledger__count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--on-dark-3);
}

.ledger__body { padding: 16px 20px 20px; }

.ledger__empty {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--on-dark-3);
  padding: 14px 0;
}

.blocks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.block {
  border: 1px solid var(--border-dark);
  border-left: 3px solid var(--ledger);
  border-radius: var(--radius-xs);
  background: var(--ink-700);
  padding: 13px 16px;
  animation: blockIn 0.45s ease both;
}

.block--denied { border-left-color: var(--denied); }

.block__top {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}

.block__height {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--on-dark-3);
}

.tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
}

.tag--granted { background: rgba(22, 163, 74, 0.18); color: #4ade80; }
.tag--denied  { background: rgba(220, 38, 38, 0.18); color: #fca5a5; }
.tag--tx      { background: rgba(14, 165, 233, 0.16); color: #7dd3fc; }

.block__time {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--on-dark-3);
}

.block__hashes {
  display: grid;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
}

.hash-row { display: flex; gap: 10px; }
.hash-row__key { color: var(--on-dark-3); flex: none; width: 74px; }
.hash-row__val { color: var(--on-dark-2); word-break: break-all; }
.hash-row__val--cur { color: var(--ledger); }

.block__chain {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px dashed var(--border-dark);
  font-size: 11.5px;
  color: var(--on-dark-3);
  display: flex;
  align-items: center;
  gap: 7px;
}

.block__chain svg { flex: none; color: var(--granted); }

/* Demo controls */
.proof__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.proof__disclaimer {
  font-size: 13px;
  color: var(--on-dark-3);
  max-width: 66ch;
  margin-top: 18px;
  padding-left: 14px;
  border-left: 2px solid var(--border-dark);
}

/* --------------------------------------------------------------------------
   10. Three planes
   -------------------------------------------------------------------------- */

.planes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.plane {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.plane__icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: var(--soft);
  color: var(--primary);
  display: grid;
  place-items: center;
  margin-bottom: 20px;
}

.plane__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.plane h3 { font-size: 20px; margin-bottom: 12px; }
.plane p { color: var(--text-2); font-size: 15.5px; }

.plane__aside {
  margin-top: auto;
  padding-top: 20px;
}

.plane__aside blockquote {
  margin: 0;
  padding: 13px 16px;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-xs);
  font-size: 15px;
  font-weight: 600;
  color: #7c4a05;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   11. Guarantees / trust grid
   -------------------------------------------------------------------------- */

.trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 48px;
}

.trust__item {
  padding: 26px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.trust__item h3 {
  font-size: 16.5px;
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.trust__item h3 svg { color: var(--granted); flex: none; }
.trust__item p { color: var(--text-2); font-size: 15px; }

.trust__code {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 4px 9px;
}

/* --------------------------------------------------------------------------
   12. Federation
   -------------------------------------------------------------------------- */

.fed__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-top: 10px;
}

.mapping {
  background: var(--ink-800);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.mapping__head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-dark);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--on-dark-2);
}

.mapping__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-dark);
  font-family: var(--font-mono);
  font-size: 13.5px;
}
.mapping__row:last-child { border-bottom: 0; }

.mapping__from { color: #fff; }
.mapping__arrow { color: var(--on-dark-3); }
.mapping__to { color: var(--ledger); text-align: right; }

.mapping__note {
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.025);
  font-size: 13px;
  color: var(--on-dark-3);
  border-top: 1px solid var(--border-dark);
}

.fed__points {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.fed__points li { display: flex; gap: 13px; align-items: flex-start; }
.fed__points svg { color: var(--primary); flex: none; margin-top: 3px; }
.fed__points strong { display: block; font-size: 16px; margin-bottom: 3px; }
.fed__points span { color: var(--text-2); font-size: 15px; }

/* --------------------------------------------------------------------------
   13. Sovereignty — replaces a pricing table.
   -------------------------------------------------------------------------- */

.models {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 48px;
}

.model {
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  background: var(--ink-700);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
}

.model--featured {
  border-color: rgba(96, 165, 250, 0.45);
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.14), var(--ink-700));
  box-shadow: var(--shadow-dark);
}

.model__name {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 7px;
}

.model__desc {
  font-size: 14.5px;
  color: var(--on-dark-2);
  margin-bottom: 22px;
  min-height: 44px;
}

.model__list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 14.5px;
  color: var(--on-dark-2);
}

.model__list li { display: flex; gap: 10px; align-items: flex-start; }
.model__list svg { color: var(--primary-300); flex: none; margin-top: 4px; }

.model__foot { margin-top: auto; }

.model__foot .btn { width: 100%; }

/* --------------------------------------------------------------------------
   14. FAQ
   -------------------------------------------------------------------------- */

.faq {
  margin-top: 44px;
  max-width: 860px;
  border-top: 1px solid var(--border);
}

.faq__item { border-bottom: 1px solid var(--border); }

.faq__q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
  transition: color 0.16s ease;
}

.faq__q:hover { color: var(--primary); }

.faq__mark {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: transform 0.25s ease, border-color 0.2s ease,
              background-color 0.2s ease, color 0.2s ease;
  margin-top: 2px;
}

.faq__q[aria-expanded="true"] .faq__mark {
  transform: rotate(45deg);
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.faq__a.is-open { grid-template-rows: 1fr; }

/* overflow:hidden alone collapses the panel visually but leaves its text in
   the accessibility tree, so a screen reader reads all six answers as page
   content no matter what aria-expanded says. visibility:hidden takes it out
   of that tree and out of the tab order; the delay lets the collapse
   animation finish before the text vanishes, and opening shows it at once. */
.faq__a > div {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear 0.3s;
}

.faq__a.is-open > div { visibility: visible; transition-delay: 0s; }

.faq__a p {
  padding: 0 46px 24px 0;
  color: var(--text-2);
  font-size: 16px;
}

.faq__a code {
  font-family: var(--font-mono);
  font-size: 13.5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 1px 6px;
}

/* --------------------------------------------------------------------------
   15. Closing CTA
   -------------------------------------------------------------------------- */

.closing {
  background: var(--ink-800);
  color: var(--on-dark);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.closing::before {
  content: "";
  position: absolute;
  bottom: -300px; left: 50%;
  width: 900px; height: 600px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(37, 99, 235, 0.2), transparent 66%);
  pointer-events: none;
}

.closing__inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }

.closing h2 {
  font-size: clamp(28px, 4.4vw, 44px);
  color: #fff;
  letter-spacing: -0.03em;
}

.closing p {
  margin-top: 20px;
  color: var(--on-dark-2);
  font-size: 18px;
}

.closing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 36px;
}

.closing__note {
  margin-top: 24px;
  font-size: 13.5px;
  color: var(--on-dark-3);
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--ink-900);
  border-top: 1px solid var(--border-dark);
  padding: 56px 0 34px;
  color: var(--on-dark-3);
  font-size: 14px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
}

.footer__brand { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }

.footer__tagline { max-width: 34ch; line-height: 1.6; }

/* Parent-company credit. Kept explicit — "powered by" is a credibility signal
   for an investor or a procurement officer reading this. */
.powered-by {
  margin-top: 18px;
  font-size: 13px;
  color: var(--on-dark-3);
}

.powered-by a {
  color: var(--on-dark-2);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--border-dark);
  transition: color 0.16s ease, border-color 0.16s ease;
}

.powered-by a:hover { color: #fff; border-bottom-color: var(--primary-300); }

.footer__col h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-2);
  margin-bottom: 14px;
}

.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }

.footer__col a {
  color: var(--on-dark-3);
  text-decoration: none;
  transition: color 0.16s ease;
}
.footer__col a:hover { color: #fff; }

.footer__bottom {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--border-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  font-size: 13px;
}

.footer__bottom a {
  color: var(--on-dark-2);
  text-decoration: none;
  border-bottom: 1px solid var(--border-dark);
}
.footer__bottom a:hover { color: #fff; border-bottom-color: var(--primary-300); }

/* --------------------------------------------------------------------------
   17. Scroll reveal
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   18. Animations
   -------------------------------------------------------------------------- */

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14); }
  50%      { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0.06); }
}

@keyframes blockIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   18b. The network — the control plane and the data lane

   Two routes, drawn as two different things. Members connect to the middle
   with dashed lines that carry nothing but coordination; the record travels on
   a separate lane beneath the columns, so the middle is visibly not on it.
   -------------------------------------------------------------------------- */

.eco__figure { margin: 0; }

/* The connectors read as structure rather than as a border, so they get their
   own tone: --border-dark is right for a 1px box edge and too quiet for a line
   that has to carry meaning across 200px of dark. */
.eco {
  --wire: rgba(113, 131, 160, 0.4);
  --wire-live: var(--primary-300);
}

/* Five columns: the two member columns either side of the platform, with a
   gutter each for the connectors. The gutters are fixed, so the columns keep
   their proportions whatever the connector is doing. */
.eco__network {
  display: grid;
  grid-template-columns: 1fr 66px 1.4fr 66px 1fr;
  align-items: center;
  margin-top: 34px;
}

.eco__col { display: flex; flex-direction: column; gap: 8px; }
.eco__col--centre { gap: 9px; }

.eco__collabel {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-3);
}
.eco__collabel--brand { color: var(--primary-300); }

.eco__node {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 13px;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-sm);
  background: var(--ink-800);
  transition: border-color 0.35s ease, background-color 0.35s ease,
              box-shadow 0.35s ease;
}

.eco__node-name {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--on-dark);
}

.eco__node-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--on-dark-3);
}

/* The platform's own machinery, tinted so it reads as a different kind of thing
   from the organisations either side of it — because it is. */
.eco__node--hub {
  border-color: rgba(96, 165, 250, 0.34);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.16), rgba(37, 99, 235, 0.04));
}
.eco__node--consent {
  border-color: rgba(232, 163, 61, 0.3);
  background: rgba(232, 163, 61, 0.05);
}
.eco__node--citizen {
  border-color: rgba(96, 165, 250, 0.2);
  background: rgba(37, 99, 235, 0.07);
}

/* Written as the `background` shorthand on purpose: it clears the hub node's
   gradient, which a background-color alone would sit underneath and never show. */
.eco__node.is-live {
  border-color: var(--primary-300);
  background: rgba(37, 99, 235, 0.18);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
.eco__node.is-live .eco__node-name { color: #fff; }

/* ---- the control connections -------------------------------------------
   A member connects once and reaches everyone, so the connection is drawn as a
   bus down the side of the column rather than a line per pair. Dashed because
   nothing on this side is a record. */

.eco__links {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 11px;
}

.eco__links::before {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 28px;
  border-left: 1px dashed var(--wire);
  transition: border-color 0.35s ease;
}
.eco__links--left::before { left: 11px; }
.eco__links--right::before { right: 10px; }

.eco__link {
  position: relative;
  width: 100%;
  height: 0;
  border-top: 1px dashed var(--wire);
  transition: border-color 0.35s ease;
}

.eco__link::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: border-color 0.35s ease;
}
.eco__links--left .eco__link::after { right: 0; border-left: 6px solid var(--wire); }
.eco__links--right .eco__link::after { left: 0; border-right: 6px solid var(--wire); }

.eco__links.is-live::before,
.eco__links.is-live .eco__link { border-color: var(--wire-live); }
.eco__links--left.is-live .eco__link::after { border-left-color: var(--wire-live); }
.eco__links--right.is-live .eco__link::after { border-right-color: var(--wire-live); }

/* ---- the data lane ------------------------------------------------------
   A separate row beneath the columns. Green, because the only reason anything
   moves on it is that consent was granted. */

.eco__data {
  margin-top: 30px;
  padding: 16px 20px 18px;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  background: var(--ink-800);
  transition: border-color 0.4s ease, background-color 0.4s ease;
}
.eco__data.is-live {
  border-color: rgba(22, 163, 74, 0.5);
  background-color: rgba(22, 163, 74, 0.05);
}

.eco__datahead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 16px;
  margin-bottom: 16px;
}

.eco__datalabel {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--granted);
}

.eco__datanote {
  margin: 0;
  flex: 1 1 340px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--on-dark-2);
}

.eco__datarow {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
}

.eco__dataend {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--on-dark-2);
  transition: color 0.35s ease;
}
.eco__dataend--right { text-align: right; }

.eco__dataend em {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-style: normal;
  color: var(--on-dark-3);
  transition: color 0.35s ease;
}
.eco__dataend.is-live { color: #fff; }
.eco__dataend.is-live em { color: var(--granted); }

.eco__track {
  position: relative;
  display: flex;
  align-items: center;
  height: 20px;
}

.eco__trackline {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: var(--wire);
  transition: background-color 0.4s ease;
}
.eco__data.is-live .eco__trackline { background: var(--granted); }

.eco__trackhead {
  flex: none;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transition: border-color 0.4s ease;
}
.eco__trackhead--left { border-right: 7px solid var(--wire); }
.eco__trackhead--right { border-left: 7px solid var(--wire); }
.eco__data.is-live .eco__trackhead--left { border-right-color: var(--granted); }
.eco__data.is-live .eco__trackhead--right { border-left-color: var(--granted); }

/* Where the record is on the lane at this moment. */
.eco__pulse {
  position: absolute;
  top: 50%;
  left: 6px;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: var(--granted);
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.2);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.eco__data.is-live .eco__pulse { opacity: 1; }

/* Direction is the whole point: the request travels one way, the record the
   other. The provider sits at the left end of the lane, the consumer at the
   right, so the request moves left and the record moves right. */
.eco__pulse.is-to-left { animation: ecoToLeft 1.4s ease-in-out both; }
.eco__pulse.is-to-right { animation: ecoToRight 1.4s ease-in-out both; }

@keyframes ecoToLeft {
  from { left: calc(100% - 15px); }
  to   { left: 6px; }
}
@keyframes ecoToRight {
  from { left: 6px; }
  to   { left: calc(100% - 15px); }
}

/* ---- controls and the step rail ---------------------------------------- */

.eco__controls { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.eco__controls .btn svg { flex: none; }

.eco__progress { margin-top: 24px; }

/* Held to a readable width: seven steps spread across the full 1180px shell
   are mostly empty line, and the gaps stop reading as one sequence. */
.eco__rail { display: flex; align-items: center; max-width: 820px; }

.eco__raildot {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--border-dark);
  border-radius: 50%;
  background: var(--ink-600);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--on-dark-3);
  transition: border-color 0.3s ease, background-color 0.3s ease,
              color 0.3s ease, box-shadow 0.3s ease;
}
.eco__raildot.is-active {
  border-color: var(--primary-300);
  background-color: rgba(37, 99, 235, 0.22);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
}
.eco__raildot.is-done {
  border-color: var(--granted);
  background: var(--granted);
  color: #fff;
}

.eco__railseg {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: var(--wire);
  transition: background-color 0.3s ease;
}
.eco__railseg.is-done { background: var(--granted); }

/* The live region is the payoff of the whole diagram, so it gets a rule down
   its side rather than sitting as another line of body copy. */
.eco__status {
  margin: 18px 0 0;
  padding-left: 15px;
  border-left: 2px solid var(--border-dark);
  min-height: 2.6em;
  max-width: 900px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--on-dark-2);
}
.eco__status strong { color: #fff; font-weight: 600; }

.eco__disclaimer {
  margin: 22px 0 0;
  max-width: 780px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--on-dark-3);
}
.eco__disclaimer strong { color: var(--on-dark-2); }

/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1050px) {
  .band__grid { grid-template-columns: repeat(2, 1fr); }
  .problem__grid,
  .planes,
  .trust,
  .models { grid-template-columns: 1fr; }
  .proof__grid { grid-template-columns: 1fr; }
  .eco__network { grid-template-columns: 1fr 40px 1.3fr 40px 1fr; }
  .fed__grid { grid-template-columns: 1fr; gap: 36px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }

  .nav {
    position: absolute;
    top: 68px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 24px 20px;
    background: var(--ink-800);
    border-bottom: 1px solid var(--border-dark);
    display: none;
  }

  .nav.is-open { display: flex; }

  .nav__link { padding: 13px 4px; border-bottom: 1px solid var(--border-dark); }

  .header__cta { display: none; }
  .nav-toggle { display: grid; place-items: center; }
}

/* The five-column network stops working once a column is narrower than its
   longest member name. Below this the columns stack and the connectors go —
   the column labels and the lane beneath them still carry the two-route
   reading on their own. */
@media (max-width: 900px) {
  .eco__network { grid-template-columns: 1fr; gap: 14px; }
  .eco__links { display: none; }
  .eco__col--centre {
    padding: 14px 0;
    border-top: 1px dashed var(--wire);
    border-bottom: 1px dashed var(--wire);
  }
  .eco__data { margin-top: 24px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .section { padding: 68px 0; }
  .hero { padding: 78px 0 62px; }
  .band__grid { grid-template-columns: 1fr; gap: 22px; }
  .footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .mapping__row { grid-template-columns: 1fr; gap: 5px; }
  .mapping__arrow { display: none; }
  .mapping__to { text-align: left; }
  .envelope__row { flex-direction: column; gap: 3px; }
  .envelope__val { text-align: left; }
  .hero__actions .btn { width: 100%; }
  .eco__datarow { grid-template-columns: 1fr; gap: 10px; }
  .eco__dataend--right { text-align: left; }
}

/* --------------------------------------------------------------------------
   19b. Narrow screens — the parent-company credit drops before the header
   runs out of room.
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
  .brand__sub { display: none; }
}

/* --------------------------------------------------------------------------
   20. Motion preference — honoured globally, not per-component.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal { opacity: 1; transform: none; }

  /* The reduce-motion block zeroes durations but not delays, so without this
     a closed answer would stay visible for the collapse delay. */
  .faq__a > div { transition-delay: 0s; }
}

/* --------------------------------------------------------------------------
   21. Print — a leave-behind a ministry can actually print.
   -------------------------------------------------------------------------- */

@media print {
  .header, .nav-toggle, .proof__controls, .eco__controls, .closing__actions { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding: 24px 0; break-inside: avoid; }
  .section--dark, .hero, .band, .closing, .footer,
  .panel, .ledger, .mapping, .model, .eco__node, .eco__data {
    background: #fff !important;
    color: #000 !important;
    border-color: #ccc !important;
  }
  .section--dark h2, .section--dark h3, .hero__title, .step__title,
  .band__claim, .model__name, .panel__title, .envelope__val,
  .eco__node-name, .eco__dataend, .eco__status strong { color: #000 !important; }
  .reveal { opacity: 1; transform: none; }
}