/* ProofPost site system — tokens, shell, type, motion, marketing pages.
   App/workspace components live in app.css. Base app rules in styles.css and wallet.css. */

:root {
  --ink: #111312;
  --ink-2: #4a4f4b;
  --ink-3: #8a8f8a;
  --ink-soft: var(--ink-2);
  --muted: var(--ink-2);
  --muted-light: var(--ink-3);
  --paper: #f7f7f3;
  --paper-2: #ffffff;
  --paper-3: #eeefea;
  --panel: var(--paper-2);
  --panel-soft: var(--paper-3);
  --line: #dcddd6;
  --line-2: #c4c6be;
  --line-strong: var(--line-2);
  --cobalt: #405eea;
  --cobalt-2: #2f48c7;
  --cobalt-tint: #e9edff;
  --cobalt-wash: var(--cobalt-tint);
  --cobalt-dark: #141a3d;
  --cobalt-mid: #1e2656;
  --navy: #141a3d;
  --navy-2: #1e2656;
  --navy-3: #2a3370;
  --supported: #1e7a5a;
  --refuted: #b4423a;
  --inconclusive: #9a7420;
  --sealed: #9a9db5;
  --green: var(--supported);
  --green-wash: #e7f3ee;
  --amber: var(--inconclusive);
  --amber-wash: #f8f1df;
  --red: var(--refuted);
  --red-wash: #f8e8e6;
  --lime: var(--cobalt);
  --slate: #5d6270;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Raleway", "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --shadow-soft: 0 0 0 1px rgba(17, 19, 18, .05), 0 24px 48px -28px rgba(17, 19, 18, .22);
  --shadow-lift: 0 0 0 1px rgba(17, 19, 18, .06), 0 32px 64px -28px rgba(17, 19, 18, .30);
  --shadow-navy: 0 0 0 1px rgba(20, 26, 61, .08), 0 30px 60px -30px rgba(20, 26, 61, .45);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 160ms;
  --dur-medium: 300ms;
  --dur-slow: 650ms;
  --wrap: 1180px;
  --gutter: 24px;
  --r-card: 16px;
  --r-btn: 8px;
  --r-scene: 20px;
  --header-h: 72px;
}

/* ---------- Base ---------- */

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

html {
  scroll-behavior: smooth;
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

::selection { color: #fff; background: var(--cobalt); }

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--cobalt) 70%, white);
  outline-offset: 3px;
}

.pp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

[hidden] { display: none !important; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: var(--r-btn);
  color: #fff;
  background: var(--cobalt);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform var(--dur-fast) var(--ease-out);
}

.skip-link:focus { transform: translateY(0); }

/* ---------- The mark ---------- */

.mark {
  --mark-ink: var(--ink);
  --mark-cobalt: var(--cobalt);
  --mark-paper: var(--paper);
  display: block;
  inline-size: var(--mark, 28px);
  block-size: var(--mark, 28px);
  flex: none;
  overflow: hidden;
}

.on-dark .mark,
.mark.on-dark { --mark-ink: #f4f4f0; }

/* ---------- Typography ---------- */

h1, h2, h3, h4, p { margin-top: 0; }

h1, h2, .display {
  color: var(--ink);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.015em;
  text-wrap: balance;
}

h1 { font-size: clamp(38px, 5.2vw, 56px); margin-bottom: 20px; }
h2 { font-size: clamp(30px, 3.4vw, 44px); margin-bottom: 16px; }

h3 {
  color: var(--ink);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.12;
  letter-spacing: -.01em;
  margin-bottom: 12px;
  text-wrap: balance;
}

h4 { font: 600 15px/1.4 var(--sans); margin-bottom: 8px; }

p { margin-bottom: 14px; }

.lead {
  color: var(--ink-2);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.4;
  max-width: 34em;
}

.eyebrow {
  display: block;
  margin-bottom: 16px;
  color: var(--cobalt);
  font: 600 12.5px/1.2 var(--sans);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.meta, .mono {
  color: var(--ink-3);
  font: 400 12px/1.5 var(--mono);
}

.mono { color: inherit; }

code { font-family: var(--mono); font-size: .92em; }

code, .hash, .address-row code { overflow-wrap: anywhere; }

small { font-size: 13px; }

a { color: var(--cobalt); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Text links with growing underline */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}

.link::after {
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;
  height: 1px;
  background: var(--cobalt);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-medium) var(--ease);
}

.link:hover::after, .link:focus-visible::after { transform: scaleX(1); }

.link .button-arrow { transition: transform var(--dur-medium) var(--ease); }
.link:hover .button-arrow { transform: translateX(4px); }

/* Word-mask headline reveal */
.wm {
  display: inline-block;
  overflow: hidden;
  padding-block: .14em;
  margin-block: -.14em;
  vertical-align: bottom;
}

.wm-w {
  display: inline-block;
  transform: translateY(112%);
  transition: transform .68s var(--ease);
  transition-delay: calc(var(--i, 0) * 38ms);
}

.is-in .wm-w, .no-motion .wm-w { transform: none; }

/* ---------- Buttons ---------- */

.button, button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 20px;
  border: 1px solid var(--ink);
  border-radius: var(--r-btn);
  color: #fff;
  background: var(--ink);
  font: 600 15px/1.2 var(--sans);
  letter-spacing: .005em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-medium) var(--ease-out);
}

.button:hover, button:hover { background: #000; border-color: #000; }
.button:active, button:active { transform: translateY(1px); }

.button.secondary, button.secondary {
  color: var(--ink);
  background: var(--paper-2);
  border-color: var(--line-2);
}

.button.secondary:hover, button.secondary:hover { border-color: var(--ink); background: var(--paper-2); }

.button.primary-cobalt { background: var(--cobalt); border-color: var(--cobalt); }
.button.primary-cobalt:hover { background: var(--cobalt-2); border-color: var(--cobalt-2); }

.button.ghost, button.ghost {
  color: var(--ink);
  background: transparent;
  border-color: transparent;
}

button.warning, .warning-button { color: var(--ink); background: var(--amber-wash); border-color: var(--amber); }
button.warning:hover, .warning-button:hover { background: #f1e6c6; border-color: var(--amber); }
button.danger { background: var(--refuted); border-color: var(--refuted); }
button.danger:hover { background: #963228; border-color: #963228; }

button:disabled, .button[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }

.button-arrow {
  display: inline-block;
  font-family: var(--sans);
  transition: transform var(--dur-medium) var(--ease);
}

.button:hover .button-arrow, button:hover .button-arrow { transform: translateX(4px); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* ---------- Shell: header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  height: var(--header-h);
  padding: 0 max(var(--gutter), calc((100vw - var(--wrap)) / 2));
  border-bottom: 1px solid transparent;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(16px) saturate(120%);
  transition: color var(--dur-medium) var(--ease-standard), background var(--dur-medium) var(--ease-standard), border-color var(--dur-medium) var(--ease-standard);
}

body.scrolled .site-header { border-bottom-color: var(--line); }

.home-route:not(.scrolled) .site-header {
  color: #f4f4f0;
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

.home-route:not(.scrolled) .site-header .mark { --mark-ink: #f4f4f0; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.brand .mark { --mark: 28px; }

.brand-name {
  font: 700 19px/1 var(--sans);
  letter-spacing: -.01em;
}

.version { color: var(--ink-3); font: 500 11px/1 var(--mono); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.site-header nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 26px;
  margin-right: 10px;
}

.site-header nav a {
  position: relative;
  padding: 26px 0 24px;
  color: inherit;
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  opacity: .82;
  transition: opacity var(--dur-fast);
}

.site-header nav a:hover,
.site-header nav a[aria-current="page"] { opacity: 1; }

.nav-indicator {
  position: absolute;
  bottom: 17px;
  left: 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--cobalt);
  opacity: 0;
  transition: transform var(--dur-medium) var(--ease), width var(--dur-medium) var(--ease), opacity var(--dur-fast);
}

.nav-indicator.is-on { opacity: 1; }

.home-route:not(.scrolled) .nav-indicator { background: #f4f4f0; }

.header-submit { white-space: nowrap; min-height: 40px; padding: 9px 16px; font-size: 14px; }

.home-route:not(.scrolled) .header-submit { color: var(--ink); background: #f4f4f0; border-color: #f4f4f0; }
.home-route:not(.scrolled) .header-submit:hover { background: #fff; border-color: #fff; }

.wallet-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 3px 3px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper-2) 80%, transparent);
}

.wallet-pill .wallet-account { min-width: 0; order: -1; color: var(--ink-3); font: 500 11px/1 var(--mono); }
.wallet-pill .wallet-connect,
.wallet-pill .wallet-disconnect { min-height: 32px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; white-space: nowrap; }

.home-route:not(.scrolled) .wallet-pill { border-color: rgba(244, 244, 240, .3); background: rgba(244, 244, 240, .08); }
.home-route:not(.scrolled) .wallet-pill .wallet-account { color: rgba(244, 244, 240, .7); }
.home-route:not(.scrolled) .wallet-pill .wallet-connect,
.home-route:not(.scrolled) .wallet-pill .wallet-disconnect { color: #f4f4f0; background: transparent; border-color: rgba(244, 244, 240, .5); }

.nav-toggle { display: none; }

/* Environment banner */
.environment-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 36px;
  padding: 7px 20px;
  border-bottom: 1px solid var(--line);
  font: 500 11.5px/1.4 var(--mono);
  text-align: center;
}

.environment-banner strong { white-space: nowrap; letter-spacing: .04em; text-transform: uppercase; }
.environment-banner.sandbox { color: #6f5310; background: #f6efd9; border-color: #e6d7a5; }
.environment-banner.live { color: var(--supported); background: var(--green-wash); border-color: #b8dccd; }
.environment-banner.unavailable { color: var(--ink-3); background: var(--paper-3); }

/* ---------- Shell: main and containers ---------- */

main {
  width: min(var(--wrap), calc(100% - var(--gutter) * 2));
  min-height: calc(100vh - var(--header-h));
  margin: 0 auto;
  padding: 56px 0 120px;
}

.home-route main,
.marketing-route main { width: 100%; padding: 0; }

.wrap { width: min(var(--wrap), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.wrap-narrow { width: min(820px, calc(100% - var(--gutter) * 2)); margin-inline: auto; }

#app > * { animation: route-enter 320ms var(--ease-out) both; }
#app[data-rerender] > * { animation: none; }

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

/* ---------- Shell: footer ---------- */

.site-footer {
  color: #f4f4f0;
  background: var(--navy);
  padding: 72px 0 28px;
}

.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 48px 64px;
  width: min(var(--wrap), calc(100% - var(--gutter) * 2));
  margin: 0 auto;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #f4f4f0;
  font: 700 19px/1 var(--sans);
  text-decoration: none;
}

.footer-brand .mark { --mark: 36px; --mark-ink: #f4f4f0; }

.footer-lead p {
  max-width: 34ch;
  margin: 22px 0 0;
  color: rgba(244, 244, 240, .62);
  font-family: var(--serif);
  font-weight: 300;
  font-size: 19px;
  line-height: 1.4;
}

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

.footer-links > div { display: grid; gap: 10px; align-content: start; }
.footer-links strong { margin-bottom: 6px; color: rgba(244, 244, 240, .5); font: 600 11.5px/1.2 var(--sans); letter-spacing: .09em; text-transform: uppercase; }
.footer-links a { color: #f4f4f0; font-size: 14.5px; text-decoration: none; opacity: .86; transition: opacity var(--dur-fast); }
.footer-links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

.footer-feedback-group > span {
  color: rgba(244, 244, 240, .62);
  font-size: 13px;
  line-height: 1.45;
}

.footer-links .footer-feedback-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin-top: 4px;
  padding: 11px 12px;
  border: 1px solid rgba(244, 244, 240, .28);
  border-radius: 2px;
  opacity: 1;
  transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
}

.footer-links .footer-feedback-button:hover,
.footer-links .footer-feedback-button:focus-visible {
  color: var(--navy);
  background: #f4f4f0;
  border-color: #f4f4f0;
  text-decoration: none;
}

.footer-feedback-button span { font-size: 16px; }

.footer-system {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(244, 244, 240, .14);
  color: rgba(244, 244, 240, .5);
  font: 400 11.5px/1.5 var(--mono);
}

.footer-system .version { color: inherit; }

/* ---------- Boot loader ---------- */

.booting .site-header, .booting #environment-banner, .booting footer { visibility: hidden; opacity: 0; }
.site-header, #environment-banner, footer { transition: opacity .2s ease; }

.boot-loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  color: #f4f4f0;
  background: var(--navy);
  transition: transform .5s var(--ease), opacity .4s var(--ease);
}

.boot-inner { display: grid; justify-items: center; gap: 18px; text-align: center; }

.boot-lock { position: relative; width: 72px; height: 72px; }
.boot-lock-svg { width: 72px; height: 72px; overflow: visible; }
.boot-piece { fill: #f4f4f0; animation: boot-lock .7s var(--ease) both; }
.boot-tl { --dx: -10px; --dy: -10px; }
.boot-tr { --dx: 10px; --dy: -10px; animation-delay: 40ms; }
.boot-bl { --dx: -10px; --dy: 10px; animation-delay: 80ms; }
.boot-br { --dx: 10px; --dy: 10px; animation-delay: 120ms; }
.boot-media { fill: var(--cobalt); animation: boot-fade .4s var(--ease) both; }
.boot-detail { fill: #f4f4f0; animation: boot-fade .4s var(--ease) .2s both; }

@keyframes boot-lock {
  from { opacity: 0; transform: translate(var(--dx), var(--dy)); }
  to { opacity: 1; transform: none; }
}

@keyframes boot-fade { from { opacity: 0; } to { opacity: 1; } }

.boot-ring {
  position: absolute;
  inset: -6px;
  border: 1px solid rgba(64, 94, 234, .9);
  border-radius: 8px;
  opacity: 0;
  animation: boot-ring 1s var(--ease) .55s both;
}

@keyframes boot-ring {
  0% { opacity: 0; transform: scale(.92); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.35); }
}

.boot-word {
  margin: 0;
  font: 700 22px/1 var(--sans);
  letter-spacing: -.01em;
  animation: boot-fade .5s var(--ease) .6s both;
}

.boot-status {
  margin: 0;
  color: rgba(244, 244, 240, .6);
  font: 400 12px/1.4 var(--mono);
  animation: boot-fade .5s var(--ease) .8s both;
}

#loader-enter { margin-top: 6px; color: #f4f4f0; background: transparent; border-color: rgba(244, 244, 240, .4); }

.boot-loader.is-exit { transform: translateY(-100%); opacity: 0; pointer-events: none; }

.verification-loader-inline {
  position: static;
  display: block;
  min-height: 0;
  margin: 0 0 28px;
  padding: 24px;
  border-radius: var(--r-card);
  color: #f4f4f0;
  background: var(--navy);
}

/* Skeleton */
.loading-shell { display: grid; gap: 16px; padding-top: 24px; }
.skeleton, .skeleton-card { border-radius: 8px; background: linear-gradient(100deg, #e6e7e1 30%, #f1f2ec 50%, #e6e7e1 70%); background-size: 240% 100%; animation: skeleton-scan 1.4s ease-in-out infinite; }
.skeleton-eyebrow { width: 130px; height: 12px; }
.skeleton-title { width: min(720px, 90%); height: 58px; }
.skeleton-copy { width: min(520px, 75%); height: 18px; }
.skeleton-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; }
.skeleton-card { height: 180px; border: 1px solid var(--line); }
.route-loading { width: min(var(--wrap), calc(100% - var(--gutter) * 2)); margin: 0 auto; padding: 56px 0 10px; }
.route-loading h1 { margin-bottom: 14px; }
.route-loading .loader-pulses { justify-content: start; margin: 30px 0 12px; }
.loader-pulses { display: grid; grid-template-columns: repeat(4, 42px); justify-content: center; gap: 7px; margin: 0 auto 11px; }
.loader-pulses span { position: relative; height: 6px; overflow: hidden; border-radius: 3px; background: var(--line); }
.loader-pulses span[data-state="complete"] { background: var(--cobalt); }
.loader-pulses span[data-state="active"]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--cobalt), #9db0ff, var(--cobalt)); background-size: 200% 100%; animation: verification-scan 1s linear infinite; }
.deferred-section { min-height: 72px; padding-top: 8px; }
@keyframes skeleton-scan { to { background-position: -200% 0; } }
@keyframes verification-scan { to { background-position: -200% 0; } }

/* ---------- Motion utilities ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--d, 0ms);
}

[data-reveal="left"] { transform: translateX(-28px); }
[data-reveal="right"] { transform: translateX(28px); }
[data-reveal="scale"] { transform: scale(.96); }
[data-reveal="none"] { transform: none; }

[data-reveal].is-in, .no-motion [data-reveal] { opacity: 1; transform: none; }

[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}

[data-reveal-stagger].is-in > *, .no-motion [data-reveal-stagger] > * { opacity: 1; transform: none; }

[data-count] { font-variant-numeric: tabular-nums; }

/* Corner brackets (bracket focus) */
.frame {
  position: relative;
  --frame-gap: 8px;
  --frame-size: 14px;
  --frame-thick: 2px;
  --frame-color: var(--ink);
}

.frame .corner {
  position: absolute;
  width: var(--frame-size);
  height: var(--frame-size);
  pointer-events: none;
  transition: transform var(--dur-medium) var(--ease), inset var(--dur-medium) var(--ease);
  z-index: 2;
}

.frame .corner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--frame-color);
  clip-path: polygon(0 0, 100% 0, 100% var(--frame-thick), var(--frame-thick) var(--frame-thick), var(--frame-thick) 100%, 0 100%);
}

.frame .corner.tl { top: calc(-1 * var(--frame-gap)); left: calc(-1 * var(--frame-gap)); }
.frame .corner.tr { top: calc(-1 * var(--frame-gap)); right: calc(-1 * var(--frame-gap)); transform: rotate(90deg); }
.frame .corner.br { right: calc(-1 * var(--frame-gap)); bottom: calc(-1 * var(--frame-gap)); transform: rotate(180deg); }
.frame .corner.bl { bottom: calc(-1 * var(--frame-gap)); left: calc(-1 * var(--frame-gap)); transform: rotate(270deg); }

.frame:hover, .frame.is-locked { --frame-gap: 0px; }
.frame.on-dark { --frame-color: #f4f4f0; }
.frame.cobalt { --frame-color: var(--cobalt); }

/* ---------- Marketing layout ---------- */

/* Marketing sections get tall vertical rhythm. App routes (cases, markets,
   activity) reuse the .section class only as a spacing hook, and their cards,
   banners, notices, and timelines keep their own padding. */
.marketing-route .section {
  padding: 120px 0;
}

.marketing-route .section.tight { padding: 80px 0; }
.marketing-route .section.flush-top { padding-top: 0; }

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .7fr);
  align-items: end;
  gap: 48px;
  margin-bottom: 56px;
}

.section-heading h2 { margin-bottom: 0; max-width: 20ch; }
.section-heading p { margin: 0; color: var(--ink-2); font-size: 16.5px; max-width: 48ch; }
.section-heading .actions { margin-top: 18px; }

.page-hero {
  padding: 96px 0 72px;
  border-bottom: 1px solid var(--line);
}

.page-hero h1 { max-width: 24ch; font-size: clamp(38px, 5.4vw, 60px); margin-bottom: 22px; }
.page-hero .lead { margin: 0; }
.page-hero .actions { margin-top: 30px; }

.page-hero.on-dark {
  color: #f4f4f0;
  background: var(--navy);
  border-bottom: 0;
}

.page-hero.on-dark h1 { color: #f4f4f0; }
.page-hero.on-dark .lead { color: rgba(244, 244, 240, .72); }
.page-hero.on-dark .eyebrow { color: #9db0ff; }

.band {
  color: #f4f4f0;
  background: var(--navy);
}

.band h2, .band h3, .band h1 { color: #f4f4f0; }
.band p { color: rgba(244, 244, 240, .72); }
.band .eyebrow { color: #9db0ff; }
.band .button.secondary { color: #f4f4f0; background: transparent; border-color: rgba(244, 244, 240, .45); }
.band .button.secondary:hover { border-color: #f4f4f0; }
.band .button:not(.secondary) { color: var(--ink); background: #f4f4f0; border-color: #f4f4f0; }
.band .button:not(.secondary):hover { background: #fff; border-color: #fff; }
.band .link { color: #f4f4f0; }

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

/* ---------- Home hero ---------- */

.home-hero {
  position: relative;
  min-height: 600px;
  padding: 64px 0 72px;
  color: #f4f4f0;
  background: var(--navy);
  overflow: hidden;
}

.home-route:not(.scrolled) .site-header { background: var(--navy); }
.home-route .environment-banner { color: #f4f4f0; background: var(--navy-2); border-color: rgba(244, 244, 240, .12); }
.home-route .environment-banner strong { color: #f0c987; }

.home-hero .wrap { position: relative; }

.home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .92fr);
  align-items: center;
  gap: 48px;
}

.home-hero .eyebrow { color: #9db0ff; }

.home-hero h1 {
  max-width: 13ch;
  margin-bottom: 22px;
  color: #f4f4f0;
  font-size: clamp(42px, 5.6vw, 66px);
}

.home-hero .lead { max-width: 30em; color: rgba(244, 244, 240, .74); }

.home-hero .button { color: var(--ink); background: #f4f4f0; border-color: #f4f4f0; }
.home-hero .button:hover { background: #fff; border-color: #fff; }
.home-hero .button.secondary { color: #f4f4f0; background: transparent; border-color: rgba(244, 244, 240, .45); }
.home-hero .button.secondary:hover { border-color: #f4f4f0; }

/* ---------- Hero frame-lock scene ----------
   One fixed stack: claim / framed card / status line / outcome bar. States change in place. */

.hero-scene {
  --dur: 8s;
  position: relative;
  height: 460px;
  border-radius: var(--r-scene);
  background: transparent;
  overflow: hidden;
}

.hs-stack {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 28px 200px 22px 54px;
  align-content: center;
  justify-items: center;
  gap: 18px;
  animation: hs-stack var(--dur) var(--ease) infinite;
}

.hs-claim {
  color: #f4f4f0;
  font: 300 19px/28px var(--serif);
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  animation: hs-claim var(--dur) steps(28) infinite;
}

.hs-frame { position: relative; width: 240px; height: 200px; }

.hs-card {
  position: absolute;
  inset: 10px;
  border-radius: 10px;
  background: var(--navy-3);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
  overflow: hidden;
  animation: hs-card var(--dur) var(--ease) infinite;
}

.hs-img {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 74% 26%, #f4f4f0 0 9px, transparent 10px),
    linear-gradient(160deg, #3a4790 0%, #2a3370 40%, #1e2656 100%);
}

.hs-img::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 62%;
  background: #4d5aa8;
  clip-path: polygon(0 100%, 0 62%, 30% 34%, 48% 52%, 62% 40%, 100% 78%, 100% 100%);
}

.hs-scan {
  position: absolute;
  right: 0;
  left: 0;
  top: -3px;
  height: 1px;
  background: var(--cobalt);
  opacity: 0;
  animation: hs-scan var(--dur) linear infinite;
}

.hs-stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 8px 16px;
  border: 2px solid #ff8a7d;
  border-radius: 6px;
  color: #ff8a7d;
  background: rgba(20, 26, 61, .55);
  font: 700 13px/1 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-8deg) scale(1.5);
  animation: hs-stamp var(--dur) var(--ease) infinite;
}

.hs-bk {
  position: absolute;
  width: 26px;
  height: 26px;
  --frame-thick: 4px;
  opacity: 0;
  animation: hs-bk var(--dur) var(--ease) infinite;
}

.hs-bk::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #f4f4f0;
  clip-path: polygon(24% 0, 100% 0, 100% var(--frame-thick), var(--frame-thick) var(--frame-thick), var(--frame-thick) 100%, 0 100%, 0 24%);
}

.hs-bk.tl { top: 0; left: 0; --dx: -36px; --dy: -36px; }
.hs-bk.tr { top: 0; right: 0; --dx: 36px; --dy: -36px; transform: rotate(90deg); }
.hs-bk.br { bottom: 0; right: 0; --dx: 36px; --dy: 36px; transform: rotate(180deg); }
.hs-bk.bl { bottom: 0; left: 0; --dx: -36px; --dy: 36px; transform: rotate(270deg); }

.hs-ring {
  position: absolute;
  inset: -8px;
  border: 1px solid var(--cobalt);
  border-radius: 12px;
  opacity: 0;
  animation: hs-ring var(--dur) var(--ease) infinite;
}

.hs-status { position: relative; width: 300px; height: 22px; text-align: center; }

.hs-status span {
  position: absolute;
  inset: 0;
  color: rgba(244, 244, 240, .6);
  font: 400 12px/22px var(--mono);
  white-space: nowrap;
  opacity: 0;
}

.hs-status b { color: #f4f4f0; font-weight: 500; }
.hs-status .hs-s1 { overflow: hidden; width: 0; left: 50%; right: auto; transform: translateX(-50%); animation: hs-s1 var(--dur) steps(30) infinite; }
.hs-status .hs-s2 { animation: hs-s2 var(--dur) var(--ease) infinite; }
.hs-status .hs-s3 { animation: hs-s3 var(--dur) var(--ease) infinite; }
.hs-status .hs-s4 { animation: hs-s4 var(--dur) var(--ease) infinite; color: #ff8a7d; }

.hs-bar {
  display: flex;
  gap: 6px;
  width: 300px;
  height: 54px;
  opacity: 0;
  animation: hs-bar var(--dur) var(--ease) infinite;
}

.hs-seg {
  position: relative;
  container-type: inline-size;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
  border-radius: 8px;
  background: rgba(244, 244, 240, .06);
  border: 1px solid rgba(244, 244, 240, .12);
  overflow: hidden;
  animation: hs-seg var(--dur) var(--ease) infinite;
}

.hs-seg::before {
  content: "SEALED";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(244, 244, 240, .5);
  background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(244, 244, 240, .05) 6px 7px);
  font: 600 9.5px/1 var(--mono);
  letter-spacing: .14em;
  animation: hs-seal var(--dur) var(--ease) infinite;
}

.hs-seg b, .hs-seg small {
  position: absolute;
  left: 10px;
  color: #f4f4f0;
  font: 600 10.5px/1 var(--sans);
  white-space: nowrap;
  opacity: 0;
  animation: hs-val var(--dur) var(--ease) infinite;
}

.hs-seg b { top: 10px; }
.hs-seg small { bottom: 10px; color: var(--seg, #f4f4f0); font: 500 11px/1 var(--mono); }
.hs-seg::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--seg, #f4f4f0);
  transform: scaleX(0);
  transform-origin: left;
  animation: hs-segbar var(--dur) var(--ease) infinite;
}

@container (max-width: 58px) { .hs-seg b { display: none; } .hs-seg small { top: 50%; bottom: auto; transform: translateY(-50%); } }

.hs-seg[data-o="supported"] { --seg: #4cc39a; }
.hs-seg[data-o="refuted"] { --seg: #ff8a7d; }
.hs-seg[data-o="inconclusive"] { --seg: #e9c46a; }

@keyframes hs-stack { 0% { opacity: 0; } 4%, 93% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hs-card { 0% { opacity: 0; transform: scale(.96); } 8%, 100% { opacity: 1; transform: none; } }
@keyframes hs-bk {
  0%, 6% { opacity: 0; translate: var(--dx) var(--dy); }
  12% { opacity: 1; translate: calc(var(--dx) * -.08) calc(var(--dy) * -.08); }
  14%, 100% { opacity: 1; translate: 0 0; }
}
@keyframes hs-ring { 0%, 13% { opacity: 0; transform: scale(.98); } 15% { opacity: .9; } 24%, 100% { opacity: 0; transform: scale(1.06); } }
@keyframes hs-scan { 0%, 15% { opacity: 0; top: -3px; } 16% { opacity: 1; } 27% { opacity: 1; top: 100%; } 28%, 100% { opacity: 0; top: 100%; } }
@keyframes hs-s1 { 0%, 16% { width: 0; opacity: 1; } 28%, 38% { width: 300px; opacity: 1; } 40%, 100% { width: 300px; opacity: 0; } }
@keyframes hs-claim { 0%, 30% { width: 0; } 38%, 100% { width: 240px; } }
@keyframes hs-bar { 0%, 40% { opacity: 0; transform: translateY(10px); } 45%, 100% { opacity: 1; transform: none; } }
@keyframes hs-s2 { 0%, 41% { opacity: 0; } 44%, 59% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes hs-seal { 0%, 62% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes hs-seg { 0%, 62% { flex-grow: 1; } 72%, 100% { flex-grow: var(--v); } }
@keyframes hs-segbar { 0%, 66% { transform: scaleX(0); } 76%, 100% { transform: scaleX(1); } }
@keyframes hs-val { 0%, 68% { opacity: 0; } 74%, 100% { opacity: 1; } }
@keyframes hs-s3 { 0%, 63% { opacity: 0; } 66%, 77% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes hs-stamp {
  0%, 78% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(1.5); }
  81% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(.96); }
  83%, 100% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
}
@keyframes hs-s4 { 0%, 80% { opacity: 0; } 83%, 100% { opacity: 1; } }

.scene-media-card { animation-name: hs-card; }

/* ---------- Proof strip ---------- */


.proof-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.proof-cell {
  padding: 40px 28px 40px 0;
  border-right: 1px solid var(--line);
}

.proof-cell + .proof-cell { padding-left: 28px; }
.proof-cell:last-child { border-right: 0; }

.proof-cell strong {
  display: block;
  margin-bottom: 10px;
  color: var(--ink);
  font: 400 48px/1 var(--serif);
  letter-spacing: -.02em;
}

.proof-cell span { display: block; color: var(--ink-2); font-size: 14px; line-height: 1.5; max-width: 26ch; }

.proof-cell .label {
  display: block;
  margin-bottom: 14px;
  color: var(--ink-3);
  font: 600 11.5px/1 var(--sans);
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* ---------- Chapters (how it works) ---------- */

.chapters {
  position: relative;
  padding-left: 56px;
}

.rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 8px;
  width: 1px;
  background: var(--line);
}

.rail-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--p, 0) * 100%);
  background: var(--cobalt);
}

.rail-dot { display: none; }

.chapter {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 64px;
  padding: 72px 0;
}

.chapter:nth-of-type(even) .chapter-copy { order: 2; }
.chapter:nth-of-type(even) > div:last-child { order: 1; }

.chapter-copy { position: relative; padding-top: 40px; }

.chapter-num {
  position: absolute;
  top: -34px;
  left: -12px;
  color: #e3e6f4;
  font: 200 150px/1 var(--serif);
  letter-spacing: -.04em;
  opacity: .35;
  transition: opacity .6s var(--ease), color .6s var(--ease);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.chapter.is-current .chapter-num { opacity: 1; color: #dfe3f5; }

.chapter-copy > * { position: relative; z-index: 1; }
.chapter-copy h3 { max-width: 18ch; font-size: clamp(26px, 2.6vw, 34px); }
.chapter-copy p { max-width: 42ch; color: var(--ink-2); }

/* ---------- Scene panels ----------
   Every scene is one panel: title row, a body that fills the stage and changes state in place,
   and a foot strip whose labels light on the same timeline (--at). */

.scene {
  position: relative;
  min-height: 400px;
  border-radius: var(--r-scene);
  color: #f4f4f0;
  background: var(--navy);
  box-shadow: var(--shadow-navy);
  overflow: hidden;
}

.scene .sc-stage {
  position: absolute;
  inset: 0 0 46px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
  padding: 24px 26px 20px;
}

.sc-body { display: grid; align-content: start; align-content: safe center; gap: 12px; min-height: 0; }

.scene .sc-foot {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: 46px;
  border-top: 1px solid rgba(244, 244, 240, .1);
  color: rgba(244, 244, 240, .4);
  font: 500 10.5px/46px var(--sans);
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
}

.scene .sc-foot span { position: relative; }
.scene .sc-foot span + span::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: rgba(244, 244, 240, .12); }
.scene.is-run .sc-foot span { animation: sc-foot .3s var(--ease) both; animation-delay: var(--at, 0s); }
.scene .sc-foot span::after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--cobalt); opacity: 0; }
.scene.is-run .sc-foot span::after { animation: sc-fade .3s var(--ease) both; animation-delay: var(--at, 0s); }
@keyframes sc-foot { to { color: #f4f4f0; } }

.sc-title {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 24px;
  color: rgba(244, 244, 240, .6);
  font: 600 11px/1 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sc-title b { color: #f4f4f0; font-weight: 600; }

.sc-pill {
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(244, 244, 240, .2);
  color: rgba(244, 244, 240, .75);
  font: 500 9.5px/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Two-state label that flips in place */
.sc-flip { position: relative; display: block; width: 70px; height: 12px; line-height: 12px; overflow: hidden; text-align: right; font: 500 10px/12px var(--mono); }
.sc-flip span { position: absolute; inset: 0; display: block; }
.sc-flip span + span { transform: translateY(100%); color: #4cc39a; }

.sc-card {
  position: relative;
  padding: 16px;
  border-radius: 10px;
  background: rgba(244, 244, 240, .05);
  border: 1px solid rgba(244, 244, 240, .1);
}

.sc-line { height: 8px; border-radius: 4px; background: rgba(244, 244, 240, .16); margin-bottom: 9px; }
.sc-line.w60 { width: 60%; }
.sc-line.w80 { width: 80%; }
.sc-line.w40 { width: 40%; }

.sc-mono { font: 400 11.5px/1.5 var(--mono); color: rgba(244, 244, 240, .7); }
.sc-mono b { color: #f4f4f0; font-weight: 500; }

/* Scene animations exist only while .is-run is set by motion.js; removing the class resets them. */
.scene:not(.is-run) [data-a],
.scene:not(.is-run) [data-a]::before,
.scene:not(.is-run) [data-a]::after { animation: none !important; }

/* Scene 01: freeze — one document card fills the body; rows land one by one; the card locks. */
.sc-freeze .sc-doc { padding: 18px 18px 16px; transition: none; animation: sc-freeze-lock .6s var(--ease) 4s both; }
.sc-freeze .sc-line { opacity: 0; animation: sc-rise .5s var(--ease) both; animation-delay: calc(.2s + var(--k) * .15s); }
.sc-freeze .sc-kv { display: grid; grid-template-columns: 74px 1fr; gap: 10px; align-items: baseline; padding: 9px 0; border-top: 1px solid rgba(244, 244, 240, .1); font: 400 11.5px/1.4 var(--mono); opacity: 0; animation: sc-rise .5s var(--ease) both; animation-delay: calc(1.2s + var(--k) * 1s); }
.sc-freeze .sc-kv:first-of-type { margin-top: 6px; }
.sc-freeze .sc-kv span { color: rgba(244, 244, 240, .5); }
.sc-freeze .sc-kv b { color: #f4f4f0; font-weight: 500; overflow-wrap: anywhere; }
.sc-freeze .sc-lock { position: absolute; right: 16px; top: 14px; width: 22px; height: 22px; fill: none; stroke: #9db0ff; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 80; stroke-dashoffset: 80; animation: sc-draw .7s var(--ease) 4s both; }
.sc-freeze .sc-flip span { animation: sc-flip-out .4s var(--ease) 4.1s both; }
.sc-freeze .sc-flip span + span { animation: sc-flip-in .4s var(--ease) 4.1s both; }
@keyframes sc-freeze-lock { to { border-color: rgba(157, 176, 255, .7); box-shadow: 0 0 0 4px rgba(64, 94, 234, .18); } }

/* Scene 02: activate — pick a tile, bond slides into its slot, status flips. */
.sc-activate .sc-tiles { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sc-activate .sc-tile { padding: 18px 12px; border-radius: 8px; border: 1px solid rgba(244, 244, 240, .14); background: rgba(244, 244, 240, .05); font: 600 12px/1 var(--sans); text-align: center; }
.sc-activate .sc-tile.pick { animation: sc-press .5s var(--ease) 1.6s both; }
.sc-activate .sc-tile.off { color: rgba(244, 244, 240, .38); border-style: dashed; background: transparent; text-decoration: line-through; }
.sc-activate .sc-tile.off small { display: block; margin-top: 6px; font: 500 9px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.sc-activate .sc-cursor { position: absolute; top: 130%; left: 8%; width: 12px; height: 12px; border-radius: 50%; background: var(--cobalt); box-shadow: 0 0 0 4px rgba(64, 94, 234, .3); animation: sc-cursor 2s var(--ease) .3s both; z-index: 3; }
.sc-activate .sc-slot { display: flex; justify-content: space-between; align-items: center; height: 46px; padding: 0 14px; border: 1px dashed rgba(244, 244, 240, .25); border-radius: 8px; font: 500 11px/1 var(--mono); color: rgba(244, 244, 240, .6); overflow: hidden; }
.sc-activate .sc-bond { padding: 6px 10px; border-radius: 6px; background: var(--cobalt); color: #fff; font: 600 11px/1 var(--sans); transform: translateX(180%); animation: sc-slide .6s var(--ease) 2.4s both; }
.sc-activate .sc-flip span { animation: sc-flip-out .4s var(--ease) 3.2s both; }
.sc-activate .sc-flip span + span { animation: sc-flip-in .4s var(--ease) 3.2s both; }
.sc-activate .sc-note { color: rgba(244, 244, 240, .5); font: 400 11px/1.5 var(--sans); text-align: center; opacity: 0; animation: sc-fade .4s var(--ease) 3.4s both; }

/* Scene 03: sealed — participant rows land, totals climb, outcomes stay sealed. */
.sc-sealed .sc-count { display: flex; gap: 28px; }
.sc-sealed .sc-count b { display: block; font: 300 30px/1 var(--serif); color: #f4f4f0; }
.sc-sealed .sc-count span { display: block; margin-top: 6px; color: rgba(244, 244, 240, .5); font: 500 10px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.sc-sealed .sc-rows { display: grid; gap: 6px; }
.sc-sealed .sc-prow { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 7px 12px; border-radius: 6px; background: rgba(244, 244, 240, .05); font: 400 11px/1.3 var(--mono); color: rgba(244, 244, 240, .75); opacity: 0; animation: sc-rise .45s var(--ease) both; animation-delay: calc(.4s + var(--k) * .55s); }
.sc-sealed .sc-prow i { padding: 3px 7px; border-radius: 999px; background: repeating-linear-gradient(135deg, rgba(244,244,240,.14) 0 3px, transparent 3px 6px); color: rgba(244, 244, 240, .8); font: 500 8.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.sc-sealed .sc-pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sc-sealed .sc-pill2 { position: relative; height: 34px; display: grid; place-items: center; border-radius: 6px; background: rgba(244, 244, 240, .06); color: rgba(244, 244, 240, .5); font: 600 9px/1 var(--mono); letter-spacing: .14em; overflow: hidden; }
.sc-pill2::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(244,244,240,.12) 50%, transparent 70%); transform: translateX(-100%); animation: sc-shimmer 2.2s var(--ease) infinite; animation-delay: calc(var(--k) * .3s); }

/* Scene 04: reveal — bars unblur, the challenge is pressed, both sides fund to target, then UMA. */
.sc-reveal .sc-bars { display: grid; gap: 10px; }
.sc-reveal .sc-bar { display: grid; grid-template-columns: 90px 1fr 40px; gap: 12px; align-items: center; font: 600 11px/1 var(--sans); }
.sc-reveal .sc-bar i { height: 6px; border-radius: 3px; background: rgba(244, 244, 240, .12); overflow: hidden; position: relative; }
.sc-reveal .sc-bar i::after { content: ""; position: absolute; inset: 0; width: var(--v); background: var(--c); transform: scaleX(0); transform-origin: left; animation: sc-bar .8s var(--ease) both; animation-delay: calc(.6s + var(--k) * .15s); }
.sc-reveal .sc-bar small { font: 500 11px/1 var(--mono); text-align: right; opacity: 0; animation: sc-fade .4s var(--ease) both; animation-delay: calc(1.2s + var(--k) * .15s); }
.sc-reveal .sc-bar span { opacity: 0; filter: blur(5px); animation: sc-unblur .7s var(--ease) both; animation-delay: calc(.2s + var(--k) * .15s); }
.sc-reveal .sc-challenge { justify-self: start; padding: 9px 12px; border-radius: 6px; border: 1px solid rgba(244, 244, 240, .4); font: 600 11px/1 var(--sans); animation: sc-btn 1s var(--ease) 2.2s both; }
.sc-reveal .sc-fund { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: center; }
.sc-reveal .sc-gauge { --target: 82%; position: relative; height: 34px; border-radius: 6px; background: rgba(244, 244, 240, .08); overflow: hidden; font: 500 10px/34px var(--mono); padding-left: 10px; color: rgba(244, 244, 240, .8); }
.sc-reveal .sc-gauge::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: var(--target); background: rgba(64, 94, 234, .55); transform: scaleX(0); transform-origin: left; animation: sc-bar 1.3s var(--ease) 3.4s both; }
.sc-reveal .sc-gauge::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--target); border-left: 1px dashed rgba(244, 244, 240, .5); animation: sc-target .4s var(--ease) 4.7s both; }
.sc-reveal .sc-gauge span { position: relative; }
.sc-reveal .sc-uma { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 6px; border: 1px solid rgba(157, 176, 255, .5); color: #9db0ff; font: 700 9.5px/1 var(--sans); letter-spacing: .06em; opacity: 0; animation: sc-rise .4s var(--ease) 4.9s both, sc-ping 1.2s var(--ease) 5.3s 2; }
.sc-reveal .sc-uma i { width: 6px; height: 6px; border-radius: 50%; background: #9db0ff; }
@keyframes sc-target { to { border-left-color: #9db0ff; box-shadow: 0 0 8px rgba(157, 176, 255, .8); } }

/* Scene 05: verdict — ledger rows land, the stamp replaces the status pill, payout highlights, claim fills. */
.sc-verdict .sc-ledger { display: grid; gap: 8px; }
.sc-verdict .sc-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 9px 12px; border-radius: 6px; background: rgba(244, 244, 240, .05); font: 400 11px/1.3 var(--mono); color: rgba(244, 244, 240, .75); opacity: 0; animation: sc-rise .45s var(--ease) both; animation-delay: calc(.3s + var(--k) * .3s); }
.sc-verdict .sc-row.pay { animation: sc-rise .45s var(--ease) 1.2s both, sc-highlight 1.2s var(--ease) 3.4s both; }
.sc-verdict .sc-pill { animation: sc-fade-out .3s var(--ease) 2.1s both; }
.sc-verdict .sc-stamp2 { position: absolute; right: -6px; top: 50%; padding: 7px 12px; border: 2px solid #ff8a7d; border-radius: 6px; color: #ff8a7d; font: 700 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; opacity: 0; transform: translateY(-50%) rotate(-6deg) scale(1.4); animation: sc-stamp .5s var(--ease) 2.2s both; }
.sc-verdict .sc-claim { height: 38px; display: grid; place-items: center; border-radius: 8px; border: 1px solid rgba(244, 244, 240, .3); font: 600 11px/1 var(--sans); position: relative; overflow: hidden; }
.sc-verdict .sc-claim::before { content: ""; position: absolute; inset: 0; background: var(--cobalt); transform: scaleX(0); transform-origin: left; animation: sc-bar .8s var(--ease) 4.2s both; }
.sc-verdict .sc-claim span { position: relative; }
@keyframes sc-fade-out { to { opacity: 0; } }

@keyframes sc-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sc-stamp { 0% { opacity: 0; transform: translateY(-50%) rotate(4deg) scale(1.3); } 60% { opacity: 1; transform: translateY(-50%) rotate(-5deg) scale(.96); } 100% { opacity: 1; transform: translateY(-50%) rotate(-6deg) scale(1); } }
@keyframes sc-draw { to { stroke-dashoffset: 0; } }
@keyframes sc-press { 0% { transform: none; } 40% { transform: scale(.95); background: rgba(64, 94, 234, .5); border-color: var(--cobalt); } 100% { transform: none; background: rgba(64, 94, 234, .35); border-color: var(--cobalt); } }
@keyframes sc-cursor { 0% { left: 8%; top: 130%; opacity: 0; } 20% { opacity: 1; } 60% { left: 50%; top: 50%; } 100% { left: 50%; top: 50%; opacity: 0; } }
@keyframes sc-slide { to { transform: none; } }
@keyframes sc-flip-out { to { transform: translateY(-100%); opacity: 0; } }
@keyframes sc-flip-in { to { transform: none; } }
@keyframes sc-shimmer { to { transform: translateX(100%); } }
@keyframes sc-bar { to { transform: scaleX(1); } }
@keyframes sc-unblur { to { opacity: 1; filter: blur(0); } }
@keyframes sc-btn { 0% { transform: none; } 40% { box-shadow: 0 0 0 6px rgba(244, 244, 240, .12); } 70% { transform: scale(.95); background: rgba(244, 244, 240, .9); color: var(--navy); } 100% { transform: none; background: rgba(244, 244, 240, .9); color: var(--navy); } }
@keyframes sc-ping { 0% { box-shadow: 0 0 0 0 rgba(157, 176, 255, .6); } 100% { box-shadow: 0 0 0 14px rgba(157, 176, 255, 0); } }
@keyframes sc-highlight { 0% { background: rgba(244, 244, 240, .05); } 30% { background: rgba(76, 195, 154, .35); } 100% { background: rgba(76, 195, 154, .18); } }

/* ---------- Ticker ---------- */


.ticker {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ticker-track {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: marquee var(--ticker-dur, 60s) linear infinite;
}

.ticker:hover .ticker-track { animation-play-state: paused; }

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-2);
  font: 400 12.5px/1 var(--mono);
  text-decoration: none;
  white-space: nowrap;
}

.ticker-item .badge { min-height: 20px; }
.ticker-item:hover { color: var(--ink); }

@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Featured cases ---------- */

.featured-cases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.featured-case {
  display: grid;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  color: inherit;
  background: var(--paper-2);
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-medium) var(--ease), box-shadow var(--dur-medium) var(--ease), border-color var(--dur-medium);
}

.featured-case:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--line-2); }

.featured-case-top, .featured-case-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.featured-case-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  background: var(--navy-2);
  margin: 6px 10px;
  overflow: visible;
}

.featured-case-visual .queue-thumb {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
}

.featured-case-visual .queue-thumb img, .featured-case-visual .queue-thumb video { width: 100%; height: 100%; object-fit: cover; }
.featured-case-visual .queue-thumb.placeholder { display: grid; place-items: center; color: rgba(244, 244, 240, .5); font-size: 24px; }

.featured-case h3 {
  margin: 0;
  font: 400 21px/1.25 var(--serif);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.featured-case-bottom span:last-child { transition: transform var(--dur-medium) var(--ease); color: var(--cobalt); font-weight: 600; }
.featured-case:hover .featured-case-bottom span:last-child { transform: translate(3px, -3px); }

/* ---------- Trust band ---------- */

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid rgba(244, 244, 240, .14);
  border-radius: var(--r-card);
  overflow: hidden;
}

.trust-cell {
  padding: 34px 28px;
  border-right: 1px solid rgba(244, 244, 240, .14);
}

.trust-cell:last-child { border-right: 0; }

.trust-cell svg {
  width: 44px;
  height: 44px;
  margin-bottom: 22px;
  fill: none;
  stroke: #9db0ff;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 1.4s var(--ease);
  transition-delay: calc(var(--i, 0) * 120ms);
}

.is-in .trust-cell svg, .no-motion .trust-cell svg { stroke-dashoffset: 0; }

.trust-cell strong { display: block; margin-bottom: 8px; color: #f4f4f0; font: 400 21px/1.2 var(--serif); }
.trust-cell p { margin: 0; color: rgba(244, 244, 240, .62); font-size: 14px; }

.band .section-heading h2 { max-width: 24ch; font-size: clamp(32px, 3.8vw, 50px); line-height: 1.12; }

/* ---------- Final CTA ---------- */

.final-cta { padding: 120px 0; text-align: left; }
.final-cta h2 { max-width: 20ch; font-size: clamp(36px, 4.6vw, 58px); margin-bottom: 8px; }
.final-cta .actions { margin-top: 32px; }

/* ---------- Editorial lists ---------- */

.chapter-list { display: grid; }

.chapter-row {
  display: grid;
  grid-template-columns: 72px minmax(220px, .6fr) minmax(300px, 1fr);
  gap: 36px;
  padding: 40px 0;
  border-bottom: 1px solid var(--line);
}

.chapter-row:first-child { border-top: 1px solid var(--line); }
.chapter-row > b { color: var(--cobalt); font: 500 12px/1.8 var(--mono); }
.chapter-row h2, .chapter-row h3 { margin: 0; font-size: clamp(24px, 2.4vw, 32px); }
.chapter-row p { max-width: 62ch; margin: 0; color: var(--ink-2); }

.card-grid, .outcome-definition-grid, .protocol-card-grid, .publisher-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.card-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.info-card, .outcome-definition, .protocol-card, .publisher-card {
  position: relative;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--paper-2);
  box-shadow: var(--shadow-soft);
}

.info-card h3, .outcome-definition h3, .protocol-card h3, .publisher-card h3 { margin: 16px 0 10px; font-size: 24px; }
.info-card p, .outcome-definition p, .protocol-card p, .publisher-card p { margin: 0; color: var(--ink-2); font-size: 15px; }
.info-card .link { margin-top: 18px; }

.outcome-swatch { width: 14px; height: 14px; border-radius: 3px; background: var(--sealed); }
.outcome-definition[data-outcome="supported"] .outcome-swatch { background: var(--supported); }
.outcome-definition[data-outcome="refuted"] .outcome-swatch { background: var(--refuted); }
.outcome-definition[data-outcome="inconclusive"] .outcome-swatch { background: var(--inconclusive); }

.callout, .methodology-callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .55fr);
  gap: 56px;
  padding: 56px;
  border-radius: var(--r-scene);
  color: #f4f4f0;
  background: var(--navy);
}

.callout h2, .methodology-callout h2 { color: #f4f4f0; max-width: 16ch; }
.callout p, .methodology-callout p { color: rgba(244, 244, 240, .7); }
.callout .eyebrow, .methodology-callout .eyebrow { color: #9db0ff; }

.principle-list { display: grid; }
.principle { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(244, 244, 240, .16); }
.principle:last-child { border-bottom: 0; }
.principle b { color: #9db0ff; font: 500 11px/1.8 var(--mono); }
.principle p { margin: 0; color: #f4f4f0 !important; font-size: 15px; }

.definition {
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--cobalt);
  margin-bottom: 28px;
}

.definition h3 { font-size: 24px; margin-bottom: 8px; }
.definition p { margin: 0; color: var(--ink-2); }

.toc-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.toc {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  display: grid;
  gap: 2px;
}

.toc a {
  padding: 8px 12px;
  border-left: 2px solid var(--line);
  color: var(--ink-3);
  font-size: 13.5px;
  text-decoration: none;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}

.toc a:hover, .toc a.is-current { border-color: var(--cobalt); color: var(--ink); }

.prose section { padding-bottom: 56px; scroll-margin-top: calc(var(--header-h) + 24px); }
.prose section:last-child { padding-bottom: 0; }
.prose h2 { font-size: clamp(28px, 3vw, 36px); }
.prose p { max-width: 64ch; color: var(--ink-2); }
.prose ul, .prose ol { max-width: 64ch; color: var(--ink-2); padding-left: 22px; }
.prose li { margin-bottom: 8px; }

/* Public / hidden table */
.split-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 20px;
}

.split-table > div { padding: 16px 18px; background: var(--paper-2); }
.split-table strong { display: block; margin-bottom: 8px; font: 600 11.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.split-table ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--ink-2); }
.split-table li { margin-bottom: 4px; }


/* ---------- Protocol diagram ---------- */

.arch {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  padding: 48px;
  border: 1px solid var(--line);
  border-radius: var(--r-scene);
  background: var(--paper-2);
  box-shadow: var(--shadow-soft);
}

.arch-node {
  position: relative;
  z-index: 1;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  transition: border-color var(--dur-medium), box-shadow var(--dur-medium), transform var(--dur-medium) var(--ease);
}

.arch-node:hover { border-color: var(--cobalt); box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.arch:hover .arch-node:not(:hover) strong, .arch:hover .arch-node:not(:hover) span { color: var(--ink-3); }

.arch-node b { display: block; margin-bottom: 14px; color: var(--cobalt); font: 500 11px/1 var(--mono); }
.arch-node strong { display: block; margin-bottom: 6px; font: 400 21px/1.2 var(--serif); transition: color var(--dur-medium); }
.arch-node span { display: block; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; transition: color var(--dur-medium); }

/* Connectors and the travelling light sit behind the boxes, so the light only shows in the gaps. */
.arch-line {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 48px;
  right: 48px;
  height: 1px;
  background: var(--line-2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s var(--ease) .3s;
}

.is-in .arch-line, .no-motion .arch-line { transform: scaleX(1); }

.arch-pulse {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 48px;
  width: 44px;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--cobalt));
  box-shadow: 0 0 10px 1px rgba(64, 94, 234, .45);
  opacity: 0;
}

.is-in .arch-pulse { animation: arch-pulse 3.6s linear 1.6s infinite; }

@keyframes arch-pulse {
  0% { opacity: 0; left: 48px; }
  6% { opacity: 1; }
  94% { opacity: 1; left: calc(100% - 92px); }
  100% { opacity: 0; left: calc(100% - 92px); }
}

/* ---------- Economics ---------- */

.economics-table { display: grid; border-top: 1px solid var(--line); }

.economics-row {
  display: grid;
  grid-template-columns: minmax(180px, .5fr) minmax(0, 1fr) 100px;
  gap: 24px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.economics-row b { font: 600 15px/1.3 var(--sans); }
.economics-row span { color: var(--ink-2); font-size: 14.5px; }
.economics-row strong { color: var(--ink); font: 400 40px/1 var(--serif); text-align: right; }
.economics-row .bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--paper-3); overflow: hidden; margin-top: -8px; }
.economics-row .bar i { display: block; height: 100%; width: var(--v); background: var(--cobalt); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease); transition-delay: calc(var(--i, 0) * 150ms); }
.is-in .economics-row .bar i, .no-motion .economics-row .bar i { transform: scaleX(1); }

/* ---------- Developers ---------- */

.start-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.start-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--paper-2);
  box-shadow: var(--shadow-soft);
}

.start-card h3 { font-size: 22px; margin: 10px 0 6px; }
.start-card p { color: var(--ink-2); font-size: 14.5px; }
.start-card .code { margin: 12px 0 16px; }

.code {
  position: relative;
  border-radius: 10px;
  color: #dce2ff;
  background: #10152e;
  overflow: hidden;
}

.code pre {
  margin: 0;
  padding: 18px 20px;
  overflow-x: auto;
  font: 400 12.5px/1.7 var(--mono);
  white-space: pre;
  tab-size: 2;
}

.code .code-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(220, 226, 255, .1);
  color: rgba(220, 226, 255, .55);
  font: 500 10.5px/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.code .copy {
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid rgba(220, 226, 255, .2);
  border-radius: 5px;
  color: #dce2ff;
  background: transparent;
  font: 500 10.5px/1 var(--mono);
}

.code .copy:hover { background: rgba(220, 226, 255, .1); border-color: rgba(220, 226, 255, .35); }
.code .k { color: #9db0ff; }
.code .s { color: #a7e3c4; }
.code .c { color: rgba(220, 226, 255, .45); }
.code .n { color: #f0c987; }

.dev-section { padding: 64px 0; border-top: 1px solid var(--line); }
.dev-section > h2 { max-width: 20ch; }
.dev-section > .lead { margin-bottom: 36px; font-size: 18px; }

.fn-list { display: grid; }

.fn-row {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 40px;
  align-items: start;
  padding: 32px 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.fn-row:last-child { border-bottom: 1px solid var(--line); }
.fn-row h3 { margin-bottom: 8px; font: 500 17px/1.3 var(--mono); }
.fn-row h3 b { color: var(--cobalt); font-weight: 500; }
.fn-row p { color: var(--ink-2); font-size: 14.5px; margin: 0; }
.fn-row .phase-tag { display: inline-block; margin-bottom: 12px; padding: 4px 8px; border-radius: 999px; background: var(--cobalt-tint); color: var(--cobalt-2); font: 600 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }

.events-table, .api-table, .addr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.events-table th, .api-table th, .addr-table th { padding: 10px 12px 12px 0; border-bottom: 1px solid var(--ink); text-align: left; color: var(--ink-3); font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.events-table td, .api-table td, .addr-table td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.events-table td:first-child, .api-table td:first-child, .addr-table td:first-child { color: var(--ink); font: 500 13px/1.5 var(--mono); white-space: nowrap; }
.addr-table td code { font-size: 12.5px; }
.addr-table .copy-inline { margin-left: 10px; min-height: 24px; padding: 3px 8px; border-radius: 4px; font-size: 11px; }

.table-scroll { overflow-x: auto; }

.tabs { display: flex; gap: 4px; margin-bottom: 14px; }
.tabs button { min-height: 34px; padding: 6px 12px; border-radius: 999px; color: var(--ink-2); background: transparent; border-color: var(--line); font-size: 12.5px; }
.tabs button[aria-selected="true"] { color: #fff; background: var(--ink); border-color: var(--ink); }

/* ---------- Publishers ---------- */

.embed-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.badge-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }

.pp-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink);
  font: 600 13px/1 var(--sans);
  text-decoration: none;
}

.pp-badge .mark { --mark: 22px; }
.pp-badge.dark { background: var(--navy); color: #f4f4f0; border-color: var(--navy); }
.pp-badge.dark .mark { --mark-ink: #f4f4f0; }
.pp-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--sealed); }
.pp-badge[data-state="supported"] i { background: var(--supported); }
.pp-badge[data-state="refuted"] i { background: var(--refuted); }
.pp-badge[data-state="inconclusive"] i { background: var(--inconclusive); }

.lookup-form { display: flex; gap: 10px; max-width: 640px; }
.lookup-form input { flex: 1; }

/* ---------- Activity ---------- */

.activity-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.activity-summary .card { min-height: 150px; }
.activity-summary strong { display: block; margin-bottom: 10px; color: var(--ink); font: 400 30px/1.1 var(--serif); overflow-wrap: anywhere; }

/* ---------- Empty / errors ---------- */

.empty {
  padding: 48px 32px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-card);
  color: var(--ink-2);
  background: var(--paper-2);
  text-align: center;
}

.empty strong { display: block; margin-bottom: 8px; color: var(--ink); font: 400 24px/1.2 var(--serif); }
.empty .button { margin-top: 14px; }

.not-found { padding: 120px 0; text-align: center; }
.not-found .mark { --mark: 64px; margin: 0 auto 28px; }

/* ---------- Toast ---------- */

#toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 70;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: min(480px, calc(100vw - 40px));
  padding: 13px 15px;
  border: 1px solid rgba(244, 244, 240, .16);
  border-radius: 10px;
  color: #f4f4f0;
  background: var(--navy);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .5);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-medium) var(--ease), transform var(--dur-medium) var(--ease);
  pointer-events: none;
}

#toast.show { opacity: 1; transform: none; pointer-events: auto; }
#toast.sticky { background: var(--refuted); }
#toast.show > span { flex: 1; overflow-wrap: anywhere; font-size: 14px; }
.toast-dismiss { min-width: 32px; min-height: 32px; padding: 0; margin: -4px -6px -4px 0; border-color: rgba(244, 244, 240, .3); color: #f4f4f0; background: transparent; font-size: 22px; }
.toast-dismiss:hover { background: rgba(244, 244, 240, .12); border-color: rgba(244, 244, 240, .5); }

/* ---------- Responsive ---------- */

@media (max-width: 1120px) {
  .site-header nav { gap: 18px; }
  .wallet-pill .wallet-account { display: none; }
  .home-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(380px, .9fr); gap: 32px; }
  .chapter { gap: 40px; }
  .arch { gap: 28px; padding: 32px; }
  .arch-node:not(:last-child)::after { right: -28px; width: 28px; }
  .toc-layout { grid-template-columns: 180px minmax(0, 1fr); gap: 40px; }
}

@media (max-width: 920px) {
  :root { --header-h: 64px; }
  .site-header { padding: 0 20px; }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    margin-left: auto;
    padding: 6px 12px;
    color: inherit;
    background: transparent;
    border-color: currentColor;
    font-size: 13px;
  }
  .nav-toggle i, .nav-toggle i::before { display: block; width: 15px; height: 1px; background: currentColor; content: ""; transition: transform var(--dur-fast); }
  .nav-toggle i::before { transform: translateY(5px); }
  .nav-toggle[aria-expanded="true"] i { transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] i::before { transform: rotate(90deg); }
  .header-actions {
    display: none;
    position: absolute;
    top: var(--header-h);
    right: 0;
    left: 0;
    align-items: stretch;
    justify-content: stretch;
    justify-items: stretch;
    padding: 12px 20px 22px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    background: var(--paper);
    box-shadow: var(--shadow-lift);
  }
  .site-header[data-menu-open="true"] .header-actions { display: grid; }
  .site-header nav { display: grid; gap: 0; margin: 0; }
  .site-header nav a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; opacity: 1; }
  .nav-indicator { display: none; }
  .header-submit { width: 100%; margin-top: 12px; }
  .wallet-pill { justify-content: space-between; margin-top: 8px; border-radius: 12px; padding: 6px; }
  .home-route:not(.scrolled) .site-header[data-menu-open="true"] { color: var(--ink); background: var(--paper); }
  .home-route:not(.scrolled) .site-header[data-menu-open="true"] .mark { --mark-ink: var(--ink); }
  .home-route:not(.scrolled) .header-actions .header-submit { color: #fff; background: var(--ink); border-color: var(--ink); }
  .home-route:not(.scrolled) .header-actions .wallet-pill { border-color: var(--line); background: var(--paper-2); }
  .home-route:not(.scrolled) .header-actions .wallet-connect,
  .home-route:not(.scrolled) .header-actions .wallet-disconnect { color: var(--ink); border-color: var(--line-2); }
  .home-hero { min-height: 0; padding-top: 48px; }
  .home-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-scene { max-width: 560px; }
  .proof-strip { grid-template-columns: 1fr 1fr; }
  .proof-cell:nth-child(2) { border-right: 0; }
  .proof-cell:nth-child(n+3) { border-top: 1px solid var(--line); }
  .proof-cell:nth-child(3) { padding-left: 0; }
  .section-heading, .callout, .embed-preview { grid-template-columns: 1fr; gap: 24px; }
  .featured-cases { grid-template-columns: 1fr 1fr; }
  .chapters { padding-left: 32px; }
  .chapter, .phase { grid-template-columns: 1fr; gap: 28px; padding: 56px 0; }
  .chapter:nth-of-type(even) .chapter-copy { order: 1; }
  .chapter:nth-of-type(even) > div:last-child { order: 2; }
  .chapter-num { font-size: 110px; top: -22px; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .trust-cell:nth-child(2) { border-right: 0; }
  .trust-cell:nth-child(n+3) { border-top: 1px solid rgba(244, 244, 240, .14); }
  .arch { grid-template-columns: 1fr 1fr; }
  .arch-line, .arch-pulse { display: none; }
  .card-grid, .outcome-definition-grid, .protocol-card-grid, .publisher-grid, .start-grid { grid-template-columns: 1fr 1fr; }
  .toc-layout { grid-template-columns: 1fr; gap: 32px; }
  .toc { position: static; grid-template-columns: 1fr 1fr; }
  .fn-row { grid-template-columns: 1fr; gap: 16px; }
  .footer-inner { grid-template-columns: 1fr; gap: 40px; }
  .chapter-row { grid-template-columns: 56px minmax(0, 1fr); }
  .chapter-row p { grid-column: 2; }
}

@media (max-width: 700px) {
  :root { --gutter: 18px; }
  main { padding: 36px 0 72px; }
  .marketing-route .section { padding: 72px 0; }
  .page-hero { padding: 56px 0 44px; }
  h1 { font-size: clamp(34px, 11vw, 44px); }
  .home-hero h1 { font-size: clamp(38px, 11.5vw, 48px); max-width: 12ch; }
  .page-hero h1 { font-size: clamp(34px, 10vw, 44px); }
  .hero-scene { height: 400px; }
  .proof-strip { grid-template-columns: 1fr; }
  .proof-cell { padding: 26px 0; border-right: 0; border-top: 1px solid var(--line); }
  .proof-cell:first-child { border-top: 0; }
  .proof-cell + .proof-cell { padding-left: 0; }
  .proof-cell strong { font-size: 40px; }
  .featured-cases, .card-grid, .outcome-definition-grid, .protocol-card-grid, .publisher-grid, .start-grid, .activity-summary, .trust-grid, .arch { grid-template-columns: 1fr; }
  .trust-cell { border-right: 0; border-top: 1px solid rgba(244, 244, 240, .14); }
  .trust-cell:first-child { border-top: 0; }
  .chapters { padding-left: 24px; }
  .chapter-copy { padding-top: 24px; }
  .chapter-num { font-size: 84px; top: -14px; left: -6px; }
  .scene { min-height: 400px; }
  .callout { padding: 32px 22px; }
  .economics-row { grid-template-columns: 1fr auto; gap: 8px 18px; }
  .economics-row span { grid-column: 1 / -1; }
  .economics-row strong { font-size: 32px; }
  .split-table { grid-template-columns: 1fr; }
  .final-cta { padding: 80px 0; }
  .toc { grid-template-columns: 1fr; }
  .lookup-form { flex-direction: column; }
  .footer-links { grid-template-columns: 1fr 1fr; }
  .footer-system { flex-direction: column; gap: 8px; }
  .chapter-row { grid-template-columns: 1fr; gap: 8px; padding: 28px 0; }
  .chapter-row p { grid-column: 1; }
  .ticker { padding: 10px 0; }
}

@media (max-width: 430px) {
  .footer-links { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
    animation-delay: 0ms !important;
  }
  .wm-w, [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
  .ticker-track { animation: none !important; }
}