:root {
  color-scheme: light;
  --paper: #eef0ec; --card: #f7f8f5; --raised: #e3e6e0;
  --ink: #15181a; --ink-2: #4a5250; --ink-3: #5f6764; --line: rgba(21, 24, 26, 0.1);
  --lake: #1f5f5b; --lake-hover: #174a47;
  --dusk: #0f1416; --dusk-card: #151b1e; --dusk-raised: #1d2427;
  --d-1: #e9ece8; --d-2: #a6aeab; --d-3: #858d8a; --d-line: rgba(233, 236, 232, 0.1);
  --d-lake: #7cc4b8; --glow: #d9824a; --deny: #e0675a;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* press: quick and direct; release: a spring (stiffness 500, damping 32, mass 1; 4% overshoot) sampled over 500 ms */
  --press: cubic-bezier(0.2, 0, 0, 1);
  --spring: linear(0.0, 0.086, 0.273, 0.482, 0.67, 0.817, 0.922, 0.987, 1.023, 1.038, 1.04, 1.034, 1.026, 1.018, 1.011, 1.006, 1.002, 1.0, 0.999, 0.998, 0.998, 0.999, 0.999, 0.999, 1.0);
  --serif: Newsreader, Georgia, serif;
  --sans: Geist, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --hdr: 60px;
  --gutter: clamp(16px, 4vw, 40px);
  /* type scale: 12 14 16 18 20 24, plus fluid display sizes */
  --t-12: 12px; --t-14: 14px; --t-16: 16px; --t-18: 18px; --t-20: 20px; --t-24: 24px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: var(--t-16); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; font-variant-numeric: tabular-nums; }
h1, h2, h3, p, dl, dd, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--lake); text-underline-offset: 3px; }
a:hover { color: var(--lake-hover); }
s { text-decoration-thickness: 1.5px; text-decoration-color: var(--deny); }
strong { font-weight: 500; color: var(--ink); }
/* Focus: dark ink-green on the light page (7.2:1 on paper), light lake on dark surfaces (9.9:1 on dusk). */
:focus-visible { outline: 2px solid var(--lake); outline-offset: 3px; border-radius: 4px; }
.hero :focus-visible, .section-dark :focus-visible, .site-footer :focus-visible, .site-header:not(.on-light) :focus-visible, .cmd :focus-visible, .stage :focus-visible { outline-color: var(--d-lake); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: var(--paper); padding: 8px 16px; border-radius: 8px; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type ---------- */
.display { font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 5.6vw, 72px); line-height: 1.02; letter-spacing: -0.03em; }
.title { font-family: var(--serif); font-weight: 300; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.08; letter-spacing: -0.02em; max-width: 22ch; text-wrap: balance; }
h3 { font-family: var(--serif); font-weight: 400; font-size: var(--t-24); line-height: 1.2; letter-spacing: -0.01em; }
.h3-lg { font-size: clamp(28px, 3vw, 36px); font-weight: 300; }
.kicker { font: 400 var(--t-12) var(--mono); color: var(--ink-3); margin-bottom: 16px; }
.kicker-dark { color: var(--d-3); }
.lede { font-size: clamp(18px, 1.6vw, 20px); line-height: 1.6; color: var(--d-2); max-width: 38rem; margin-top: 24px; }
.lede-sm { font-size: var(--t-18); line-height: 1.6; color: var(--ink-2); max-width: 38rem; margin-top: 20px; }
.lede-dark { font-size: var(--t-18); line-height: 1.6; color: var(--d-2); max-width: 40rem; margin-top: 20px; }
.fine { font-size: var(--t-14); line-height: 1.55; color: var(--ink-3); max-width: 40rem; margin-top: 16px; }
.fine-dark { font-size: var(--t-14); color: var(--d-3); margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.title-dark { color: var(--d-1); }
.answer { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 28px); line-height: 1.3; max-width: 34ch; margin-top: 48px; }

/* ---------- buttons ---------- */
.btn, .copy, .menu-btn { transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease), transform 500ms var(--spring); }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 20px; border-radius: 8px; font: 500 var(--t-16) var(--sans); text-decoration: none; border: 1px solid transparent; cursor: pointer; }
/* The weight of a click: the press lands in 100 ms, the release springs back. */
.btn:active, .copy:active, .menu-btn:active { transform: scale(0.97); transition: transform 100ms var(--press), background-color 100ms var(--press); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease); }
  .btn:active { transform: translateY(0) scale(0.97); }
}
.btn[aria-busy="true"] { cursor: progress; }
.btn-magnet span { display: inline-block; transform: translate(var(--mx, 0px), var(--my, 0px)); transition: transform 500ms var(--spring); }
.btn.done { border-color: var(--d-lake); }
.btn-sm { height: 36px; padding: 0 16px; font-size: var(--t-14); }
.btn-light { background: var(--d-1); color: var(--dusk); }
.btn-light:hover { background: #fff; color: var(--dusk); }
.btn-ghost-dark { background: transparent; color: var(--d-1); border-color: rgba(233, 236, 232, 0.24); }
.btn-ghost-dark:hover { border-color: rgba(233, 236, 232, 0.5); color: #fff; }
.btn:disabled { opacity: 0.5; cursor: default; }

/* ---------- header ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; height: var(--hdr); z-index: 50; display: flex; align-items: center; gap: 24px; padding: 0 var(--gutter); color: var(--d-1); background: rgba(15, 20, 22, 0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--d-line); transition: background-color 300ms var(--ease), color 300ms var(--ease), border-color 300ms var(--ease); }
.site-header.on-light { background: rgba(238, 240, 236, 0.88); color: var(--ink); border-bottom-color: var(--line); }
/* Over the hero the hero's own button is the primary action, so the header one stays quiet. */
.site-header .btn-head { background: transparent; color: inherit; border-color: rgba(233, 236, 232, 0.24); }
.site-header.on-light .btn-head { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.brand { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; font: 500 var(--t-16) var(--sans); min-height: 32px; }
.brand:hover { color: inherit; }
.brand-exit { fill: var(--glow); }
.nav { display: flex; gap: 4px; margin-left: auto; font-size: var(--t-14); }
.nav a { color: inherit; opacity: 0.72; text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; padding: 0 8px; border-radius: 6px; }
.nav a:hover { opacity: 1; color: inherit; background: rgba(127, 127, 127, 0.12); }
.menu-btn { display: none; margin-left: auto; height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid currentColor; background: transparent; color: inherit; font: 400 var(--t-14) var(--sans); cursor: pointer; opacity: 0.85; }
@media (max-width: 900px) {
  .menu-btn { display: inline-flex; align-items: center; }
  .nav { display: none; position: absolute; top: var(--hdr); left: 0; right: 0; flex-direction: column; gap: 0; padding: 8px var(--gutter) 16px; background: var(--dusk); border-bottom: 1px solid var(--d-line); margin: 0; }
  .site-header.on-light .nav { background: var(--paper); border-bottom-color: var(--line); }
  .nav.open { display: flex; animation: menu-in 240ms var(--ease); }
  .nav.closing { display: flex; animation: menu-out 140ms var(--ease) forwards; }
  .nav a { min-height: 44px; font-size: var(--t-16); opacity: 0.9; }
  .site-header .btn-head { display: none; }
}

@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } }
@keyframes menu-out { to { opacity: 0; } }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; background: var(--dusk); color: var(--d-1); display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
/* the rendered network (Blender, Cycles) is always there; the live 3D fades in over it where it can run */
.hero-img { position: absolute; inset: -20px 0; width: 100%; height: calc(100% + 40px); object-fit: cover; object-position: 50% 50%; z-index: -1; transform: translateY(var(--px, 0px)); will-change: transform; }
@media (max-width: 760px) { .hero-img { object-position: 82% 50%; opacity: 0.45; } }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(15, 20, 22, 0.92) 0%, rgba(15, 20, 22, 0.6) 44%, rgba(15, 20, 22, 0) 76%), linear-gradient(0deg, rgba(15, 20, 22, 0.9) 0%, rgba(15, 20, 22, 0) 28%); }
.hero-inner { width: 100%; max-width: 1240px; margin: 0 auto; padding: calc(var(--hdr) + 48px) var(--gutter) 96px; }
.eyebrow { font: 400 var(--t-14) var(--mono); color: var(--d-lake); margin-bottom: 24px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.chain-chip { display: inline-flex; align-items: center; gap: 8px; font: 400 var(--t-12) var(--mono); color: var(--d-2); border: 1px solid var(--d-line); border-radius: 999px; padding: 4px 12px; }
.chain-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--d-3); }
.chain-chip.ok .dot { background: var(--d-lake); }
.chain-chip.ok { white-space: nowrap; }
.chain-chip { font-variant-numeric: tabular-nums; }
/* the hero copy is visible at first paint; only the live chip and the scroll cue arrive a moment later */
.hero .fine-dark, .scroll-cue { opacity: 0; animation: rise 400ms var(--ease) 200ms forwards; }
@keyframes rise { to { opacity: 1; } }

/* ---------- sections ---------- */
.section { padding: clamp(80px, 11vw, 144px) 0; }
.section-alt { background: var(--card); border-block: 1px solid var(--line); }
.section-dark { background: var(--dusk); color: var(--d-1); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.grid-2, .grid-3, .grid-4, .grid-5 { display: grid; gap: 20px; margin-top: 48px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1080px) { .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { .grid-2, .grid-3, .grid-5 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .grid-4 { grid-template-columns: minmax(0, 1fr); } }
/* Card radius 16, inner stage radius 16 - 8 padding = 8. */
.card, .mini { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 8px 8px 24px; display: flex; flex-direction: column; gap: 12px; }
.card > .stage, .mini > .stage { border-radius: 8px; }
.section-alt .card, .section-alt .mini { background: var(--paper); }
.card h3, .card p, .mini h3, .mini p, .card .cmd, .card .fine, .card .recent { margin-inline: 16px; }
.card > h3:first-child, .mini > h3:first-child { margin-top: 16px; }
.card h3 + p, .mini h3 + p { margin-top: -4px; }
.card p, .mini p { font-size: var(--t-14); line-height: 1.6; color: var(--ink-2); }
.card p { font-size: var(--t-16); }
.mini h3 { font-size: var(--t-20); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.split-console { margin-top: 80px; }
.split-console p { color: var(--ink-2); margin-top: 16px; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* ---------- proof ---------- */
.proof-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 36px; font: 400 var(--t-12) var(--mono); font-variant-numeric: tabular-nums; color: var(--d-2); }
.proof-legend span { display: inline-flex; align-items: center; gap: 8px; }
.proof-legend i { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.proof-skip { display: inline-block; margin-top: 16px; font: 400 var(--t-12) var(--mono); color: var(--d-2); }
.proof-skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.proof-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(24px, 1fr)); gap: 4px; margin-top: 20px; }
.proof-grid a { aspect-ratio: 1; border-radius: 2px; display: block; opacity: 0; transform: scale(0.4); transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
.proof-grid.in a { opacity: 1; transform: none; }
.proof-grid a:hover, .proof-grid a:focus-visible { outline: 2px solid var(--d-1); outline-offset: 1px; }
.k-deposit { background: #4b7f9c; } .k-hatch { background: #6f8f7c; } .k-settled { background: var(--d-lake); }
.k-exit { background: var(--glow); } .k-rejected { background: var(--deny); } .k-other { background: #4a5559; }
.proof-tip { position: fixed; z-index: 60; pointer-events: none; background: var(--d-1); color: var(--dusk); font: 400 var(--t-12)/1.4 var(--mono); padding: 8px 12px; border-radius: 8px; max-width: 320px; opacity: 0; transition: opacity 120ms; }
.proof-tip.on { opacity: 1; }
.checks-row { margin-top: 64px; }
.panel { background: var(--dusk-card); border: 1px solid var(--d-line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.panel h3 { color: var(--d-1); font-size: var(--t-24); }
.panel-sub { color: var(--d-2); font-size: var(--t-14); }
.panel-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.lp-list { display: flex; flex-direction: column; margin-top: 4px; }
.lp-list li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--d-line); font-size: var(--t-14); color: var(--d-1); }
.lp-detail { display: block; font: 400 var(--t-12) var(--mono); color: var(--d-3); margin-top: 4px; word-break: break-all; }
.lp-state { font: 400 var(--t-12) var(--mono); color: var(--d-lake); }
.lp-state.fail { color: var(--deny); }
.pip { width: 8px; height: 8px; border-radius: 50%; background: var(--dusk-raised); margin-top: 8px; }
.pip.on { background: var(--d-lake); } .pip.fail { background: var(--deny); }
.panel-note { font-size: var(--t-14); color: var(--d-3); line-height: 1.55; }
#live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- try it ---------- */
.cmd { display: flex; align-items: flex-start; gap: 8px; background: var(--dusk); color: var(--d-1); border-radius: 8px; padding: 12px 12px 12px 16px; font: 400 var(--t-12) var(--mono); margin-top: auto; }
.cmd code { flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; }
.copy { background: var(--dusk-raised); color: var(--d-1); border: 0; border-radius: 6px; font: 400 var(--t-12) var(--mono); min-height: 28px; padding: 4px 12px; cursor: pointer; }
.copy:hover { background: #2a3337; }
.card .fine a { display: inline-flex; align-items: center; min-height: 24px; }
.recent { display: flex; flex-direction: column; font: 400 var(--t-12) var(--mono); }
.recent li { padding: 8px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.recent { font-variant-numeric: tabular-nums; }
.recent li a { display: block; line-height: 24px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent li span { color: var(--ink-3); text-align: right; white-space: nowrap; }

/* ---------- footer ---------- */
.site-footer { background: var(--dusk); color: var(--d-3); padding: 40px 0; font-size: var(--t-14); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; }
.site-footer a { color: var(--d-2); }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 320ms var(--ease), transform 320ms var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .btn, .copy, .menu-btn, .btn:hover, .btn:active { transform: none !important; }
  .reveal-words .w > span, .callout { animation: none !important; transform: none !important; opacity: 1 !important; transition: none !important; }
  .wire path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; transition: none !important; }
  .kind-ind { transition: none !important; }
  .hero-img { transform: none !important; } .btn-magnet span { transform: none !important; }
  .nav.open, .nav.closing { animation: none !important; }
  .hero .fine-dark, .scroll-cue, .reveal, .status-table tbody tr, .proof-grid a { animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media (max-width: 760px) {
  .hero::after { background: linear-gradient(0deg, rgba(15, 20, 22, 0.92) 0%, rgba(15, 20, 22, 0.72) 60%, rgba(15, 20, 22, 0.56) 100%); }
  .display br { display: none; }
  .display br + .soft { display: block; } /* the second line keeps its own line when the break is hidden */
}

/* ---------- headline reveal: words rise in, 30 ms apart ---------- */
.reveal-words .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.reveal-words .w > span { display: inline-block; transform: translateY(108%); }
.reveal-words.in .w > span { animation: word-up 280ms var(--ease) forwards; animation-delay: var(--d, 0ms); }
.title.reveal-words.reveal { opacity: 1; transform: none; }
@keyframes word-up { to { transform: none; } }

/* ---------- section jumps: a 220 ms crossfade (View Transitions where supported) ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }

/* ---------- 3D labels (three.js stages) ---------- */
.webgl { z-index: -1; opacity: 0; transition: opacity 600ms var(--ease); }
.webgl.ready { opacity: 1; }
.stage .webgl { z-index: 0; }
.labels3d { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.hero .labels3d { z-index: -1; }
.label3d { position: absolute; left: 0; top: 0; white-space: nowrap; font: 400 var(--t-12) var(--mono); color: var(--d-2); transition: opacity 300ms var(--ease); will-change: transform; }
.label3d.dim { color: var(--d-3); }
.label3d.lake { color: var(--d-lake); }
.label3d.glow { color: var(--glow); }
.label3d.blue { color: #9cc1d9; }
.label3d.ink { color: var(--d-1); }
.label3d.deny { color: var(--deny); }
.label3d.state { transform: translate(16px, 16px) !important; color: var(--d-lake); opacity: 1 !important; }
.label3d.state[data-v="1"], .label3d.state[data-v="2"] { color: var(--deny); }
.label3d.msg { top: auto; bottom: 16px; left: 16px; right: 16px; transform: none !important; white-space: normal; color: var(--d-1); opacity: 1 !important; }
.label3d.msg[data-bad="true"] { color: var(--deny); }
@media (max-width: 760px) { .hero .labels3d .label3d.dim { display: none; } .stage .label3d { font-size: 10px; } }

/* ---------- proof: the dots are static HTML (visible without JavaScript); the lens names what is public and what stayed private ---------- */
.proof-field { margin-top: 20px; border: 1px solid var(--d-line); border-radius: 16px; padding: 20px; background: var(--dusk-card); }
.proof-field .proof-grid { margin-top: 0; }
.proof-grid > span { display: block; min-width: 0; } /* the list item; the link inside fills it */
.proof-grid > span > a { width: 100%; }
.proof-grid.looking a { opacity: 0.35; }
.proof-grid.looking a.hot { opacity: 1; }
.lens { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lens > div { border: 1px solid var(--d-line); border-radius: 12px; padding: 12px 16px; background: rgba(233, 236, 232, 0.04); min-width: 0; }
.lens p { font-variant-numeric: tabular-nums; margin: 0; font-size: var(--t-14); color: var(--d-1); overflow-wrap: anywhere; }
.lens .lens-h { font: 400 var(--t-12) var(--mono); color: var(--d-3); margin-bottom: 4px; }
.lens .lens-priv p:not(.lens-h) { color: var(--d-lake); }
@media (max-width: 600px) { .lens { grid-template-columns: 1fr; } }

/* ---------- FAQ and footer: a dark band; a field of the recorded transactions behind an FAQ card and a footer card ---------- */
.site-end { position: relative; overflow: hidden; background: var(--dusk); color: var(--d-1); padding: 0; }
.end-field { position: absolute; inset: 0; width: 100%; height: 100%; }
.end-inner { position: relative; padding-block: clamp(80px, 9vw, 112px) 24px; display: grid; gap: 48px; }
.faq { max-width: 720px; width: 100%; margin: 0 auto; display: grid; gap: 16px; }
.faq-title { font-family: var(--serif); font-weight: 300; font-size: clamp(32px, 4.4vw, 44px); line-height: 1.08; letter-spacing: -0.02em; text-align: center; margin: 0; }
.faq-card { background: rgba(15, 20, 22, 0.86); border: 1px solid var(--d-line); border-radius: 16px; padding: 4px 20px; }
.faq-card details { border-bottom: 1px solid var(--d-line); }
.faq-card details:last-child { border-bottom: 0; }
.faq-card summary { cursor: pointer; list-style: none; padding: 16px 0; display: flex; justify-content: space-between; gap: 16px; font-size: var(--t-16); color: var(--d-1); }
.faq-card summary::-webkit-details-marker { display: none; }
.faq-card summary::after { content: "+"; font-family: var(--mono); color: var(--d-3); }
.faq-card details[open] summary::after { content: "\2212"; }
.faq-card summary:focus-visible { outline: 2px solid var(--d-lake); outline-offset: 2px; border-radius: 8px; }
.faq-card details p { margin: 0 0 16px; color: var(--d-2); font-size: var(--t-14); line-height: 1.6; max-width: 62ch; }
.foot { background: rgba(21, 27, 30, 0.9); border: 1px solid var(--d-line); border-radius: 16px; padding: 28px; display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: 32px; }
.foot-brand { display: grid; gap: 12px; align-content: start; }
.foot-brand p { margin: 0; color: var(--d-2); font-size: var(--t-14); line-height: 1.6; max-width: 40ch; }
.foot-brand .foot-mark { font-family: var(--serif); font-size: var(--t-24); color: var(--d-1); }
.foot-brand .foot-live { font-family: var(--mono); font-size: var(--t-12); color: var(--d-3); overflow-wrap: anywhere; }
.foot-live b { color: var(--d-lake); font-weight: 400; }
.foot-live { font-variant-numeric: tabular-nums; }
.foot-h { margin: 0 0 12px; font-size: var(--t-14); font-weight: 500; color: var(--d-1); }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-col a { color: var(--d-2); text-decoration: none; font-size: var(--t-14); display: inline-block; padding-block: 2px; }
.foot-col a:hover, .foot-col a:focus-visible { color: var(--d-1); text-decoration: underline; }
.site-end .legal { margin: 0; font-family: var(--mono); font-size: var(--t-12); color: var(--d-2); background: rgba(15, 20, 22, 0.88); border-radius: 8px; padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; }
@media (max-width: 900px) { .foot { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .foot { grid-template-columns: 1fr; } }

/* ======================================================================================================================
   Bento sections (plan 2026-11-10-site-bento-direction): HiFi's section patterns in Midge's system. Dark ground, rounded
   cards (28 panels, 20 cards, 16 tiles, 12 inner panels), a 6-column grid that becomes 2 under 1100 px and 1 under 720 px.
   ====================================================================================================================== */
.bs { background: var(--dusk); color: var(--d-1); padding: clamp(64px, 8vw, 112px) 0; }
.bs-tight { padding-top: 0; margin-top: calc(-1 * clamp(52px, 7vw, 100px)); }
.bs .kicker { color: var(--d-3); }
.bs .title { color: var(--d-1); max-width: 20ch; }
.bs .soft { color: var(--d-3); }
.bs .center { text-align: center; margin-inline: auto; }
.bs-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; align-items: end; margin-bottom: 48px; }
.bs-lede { margin: 0; font-size: var(--t-18); line-height: 1.6; color: var(--d-2); max-width: 34rem; }
.bs .fine { color: var(--d-3); margin-top: 16px; }
.limit-note { max-width: 62ch; }

.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.s1 { grid-column: span 1; } .s2 { grid-column: span 2; } .s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s6 { grid-column: span 6; }
.r2 { grid-row: span 2; }
.bc { background: var(--dusk-card); border: 1px solid var(--d-line); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bc-raised { background: var(--dusk-raised); }
.bc-ink { background: #0b0f10; }
.bc-lake { background: rgba(124, 196, 184, 0.08); border-color: rgba(124, 196, 184, 0.3); }
.bc-panel { border-radius: 28px; padding: 32px; }
.bc.flush { padding: 0; gap: 0; overflow: clip; }
.bc-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; }
.bc-label { margin: 0; font: 400 var(--t-12) var(--mono); color: var(--d-3); }
.bc-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--t-24); line-height: 1.2; color: var(--d-1); text-wrap: balance; }
.bc-title-lg { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; }
.title-card { font-size: clamp(32px, 3.6vw, 44px); line-height: 1.05; margin: 0; }
.bc-text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--d-2); }
.bc-end { margin-top: auto; }
.bc-cta { margin-top: auto; align-self: flex-start; }
.mono { font-family: var(--mono); font-size: var(--t-12); }
.bs .dim, .bc .dim { color: var(--d-3); }
.t-lake { color: var(--d-lake); } .t-deny { color: var(--deny); } .t-glow { color: var(--glow); } .t-mute { color: var(--d-2); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-right: 8px; vertical-align: 1px; }

/* inner panels, tiles and chips */
.panel-ink { background: #0b0f10; border: 1px solid rgba(233, 236, 232, 0.08); border-radius: 12px; overflow: clip; }
.panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 12px 16px; border-bottom: 1px solid var(--d-line); font: 400 var(--t-12) var(--mono); color: var(--d-3); }
.panel-foot { margin: 0; padding: 12px 16px; font-size: var(--t-14); color: var(--d-2); border-top: 1px solid var(--d-line); }
.book-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(233, 236, 232, 0.06); font: 400 13px var(--mono); }
.book-row .num { text-align: right; font-variant-numeric: tabular-nums; } .book-row .dim { text-align: right; }
.book-row.is-watcher { color: #f2897d; background: rgba(224, 103, 90, 0.08); } /* lighter red: 4.5:1 on the tinted row */
.book-row.is-watcher .dim { color: inherit; }
.tiles-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: auto; }
.tile { background: var(--dusk-raised); border-radius: 12px; padding: 16px; }
.fig { margin: 0; font-family: var(--serif); font-weight: 300; font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }
.cap { margin: 8px 0 0; font: 400 var(--t-12) var(--mono); color: var(--d-2); }
.stat-card .fig { font-size: 56px; }
/* links on the dark ground: the lake accent for dark, and a 24 px target for links that stand alone */
.bs a:not(.btn) { color: var(--d-lake); }
.bs a:not(.btn):hover { color: var(--d-1); }
.refusal-bar a, .bc-end a { display: inline-flex; align-items: center; min-height: 24px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.chip { background: var(--dusk-raised); border-radius: 999px; padding: 4px 12px; font: 400 var(--t-12) var(--mono); color: var(--d-2); }
.chip b { font-weight: 400; }
.keeps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 15px; }
.code-chip { font: 400 12px var(--mono); color: var(--d-lake); background: rgba(124, 196, 184, 0.1); border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.refused { font-size: var(--t-14); color: var(--d-2); margin: 0; }

/* diagrams (inline SVG): strokes and fills from the tokens; wide and phone variants */
.dg { display: block; width: 100%; height: auto; overflow: visible; fill: none; }
.dg-center { width: 100%; max-width: 280px; margin: 8px auto; flex-grow: 1; }
.dg-small { width: auto; max-width: 140px; }
.dg-narrow { display: none; }
.dg text { stroke: none; font-size: 11px; }
.dg-narrow text { font-size: 12px; }
.dg-mono { font-family: var(--mono); fill: var(--d-1); } .dg-sans { font-family: var(--sans); fill: var(--d-1); font-size: 12px; }
.dg .dim { fill: var(--d-2); } .dg .t-deny { fill: var(--deny); }
.dg-box { fill: var(--dusk-raised); stroke: rgba(233, 236, 232, 0.14); }
.dg-box-glow { stroke: var(--glow); }
.dg-box-deny { fill: rgba(224, 103, 90, 0.12); stroke: rgba(224, 103, 90, 0.5); }
.dg-chip { fill: #0b0f10; stroke: rgba(233, 236, 232, 0.3); }
.dg-pin { fill: var(--d-1); opacity: 0.35; }
.dg-line { stroke: rgba(233, 236, 232, 0.4); fill: none; } .dg-line-faint { stroke: rgba(233, 236, 232, 0.15); fill: none; }
.dg-line-glow { stroke: rgba(217, 130, 74, 0.6); fill: none; } .dg-line-deny { stroke: var(--deny); fill: none; }
.dg .dashed { stroke-dasharray: 4 4; }
.dg-node { fill: var(--dusk-card); stroke: var(--d-1); } .dg-node-lake { stroke: var(--d-lake); }
.dg-stroke { stroke: var(--d-1); fill: none; } .dg-tick, .dg-tick-static { stroke: var(--d-lake); stroke-width: 2; fill: none; }
.dg-dot { fill: var(--d-1); } .dg-dot-lake { fill: var(--d-lake); } .dg-dot-glow { fill: var(--glow); } .dg-dot-deny { fill: var(--deny); }
.dg-fill { fill: var(--d-1); } .dg-fill-lake { fill: var(--d-lake); } .dg-fill-glow { fill: var(--glow); } .dg-fill-deny { fill: var(--deny); }
.dg-tile { fill: var(--d-lake); } .dg-tile-ink { fill: var(--dusk); } .dg-tile-stroke { stroke: var(--dusk); stroke-width: 2.4; fill: none; }
.dg-icon { fill: none; stroke: var(--d-1); stroke-width: 1.4; }

/* tables scroll inside their card, never the page */
.tbl-wrap { overflow-x: auto; }
.tbl { display: grid; font-size: var(--t-14); }
.tbl-4 { grid-template-columns: minmax(160px, 1.3fr) repeat(3, minmax(140px, 1fr)); }
.tbl-3 { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
.tbl-wide { min-width: 760px; }
.th { padding: 12px 16px; font: 400 12px var(--mono); color: var(--d-3); border-bottom: 1px solid rgba(233, 236, 232, 0.08); }
.td { padding: 12px 16px; border-bottom: 1px solid rgba(233, 236, 232, 0.06); color: var(--d-1); overflow-wrap: anywhere; }
.td.k { color: var(--d-2); }
.td.t-lake, .th.t-lake { color: var(--d-lake); } .td.t-deny { color: var(--deny); } .td.t-glow { color: var(--glow); } .td.t-mute { color: var(--d-2); }
.hosts-head { padding: 24px 24px 8px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px 40px; align-items: end; }

/* who uses it: the lake-at-night light band behind frosted tiles */
.band-panel { position: relative; border-radius: 28px; overflow: clip; border: 1px solid var(--d-line); isolation: isolate; }
.band { position: absolute; inset: -40px; z-index: -2; filter: blur(16px); background: linear-gradient(180deg, var(--dusk) 0%, rgba(15, 20, 22, 0) 18%, rgba(15, 20, 22, 0) 82%, var(--dusk) 100%), linear-gradient(180deg, transparent 14%, rgba(31, 95, 91, 0.6) 24%, rgba(12, 40, 38, 0.5) 30%, rgba(217, 130, 74, 0.45) 37%, rgba(160, 80, 44, 0.3) 41%, rgba(10, 28, 28, 0.65) 47%, rgba(124, 196, 184, 0.32) 54%, rgba(20, 72, 66, 0.6) 60%, rgba(217, 150, 100, 0.3) 66%, transparent 76%); }
.band-lines { position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(180deg, rgba(233, 236, 232, 0.035) 0 1px, transparent 1px 5px); }
.band-inner { padding: clamp(64px, 8vw, 96px) 32px 32px; }
.band-inner .title { margin-bottom: 56px; text-align: center; }
.frost { background: rgba(15, 20, 22, 0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(233, 236, 232, 0.14); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 12px; min-height: 148px; }
.frost-t { margin: auto 0 0; font-size: 17px; font-weight: 500; } .frost-s { margin: 0; font: 400 var(--t-12) var(--mono); color: var(--d-2); }

/* rules code panel, numbered list */
.code { margin: 0; padding: 20px; font: 400 13px/1.8 var(--mono); color: var(--d-1); white-space: pre-wrap; overflow-wrap: anywhere; min-height: 164px; }
.code .k { color: var(--d-3); } .code .v { color: var(--d-lake); }
.steps { list-style: none; position: relative; margin: 0; padding: 0 0 0 24px; display: grid; gap: 4px; }
.steps-line { position: absolute; left: 4px; top: 0; bottom: 0; width: 1px; background: rgba(233, 236, 232, 0.2); }
.steps li { display: flex; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(233, 236, 232, 0.06); }
.steps li i { width: 9px; height: 9px; border-radius: 50%; background: var(--d-1); margin-left: -24px; flex-shrink: 0; position: relative; }

/* proof */
.statement { position: relative; padding: clamp(72px, 9vw, 120px) 32px; border-radius: 28px; overflow: hidden; display: block; }
.statement .kicker, .statement .display { position: relative; }
.statement .display { margin: 0 auto; max-width: 24ch; }
.pixels { opacity: 0.55; }
.bs .lp-detail { word-break: normal; overflow-wrap: anywhere; }
.pixels { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--d-1); -webkit-mask-image: radial-gradient(ellipse at center, transparent 22%, #000 78%); mask-image: radial-gradient(ellipse at center, transparent 22%, #000 78%); }
.dots-card .proof-legend { margin-top: 0; }
.bs .proof-grid { margin-top: 0; grid-template-columns: repeat(auto-fill, minmax(24px, 1fr)); }
.bs .proof-grid a { opacity: 1; transform: none; border-radius: 4px; }
.bs .proof-grid.looking a { opacity: 0.35; } .bs .proof-grid.looking a.hot { opacity: 1; }
.bs .lens { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; margin-top: 0; }
.lens .bc { gap: 8px; } .lens p:not(.bc-label) { margin: 0; font-size: 17px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.live-card .lp-list li { border-bottom-color: var(--d-line); }
.panel-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.strike { position: relative; display: inline-block; }
.strike i { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--deny); }
.refusal-bar { margin: 12px; padding: 12px 16px; border-radius: 12px; background: rgba(224, 103, 90, 0.1); border: 1px solid rgba(224, 103, 90, 0.35); font: 400 var(--t-12) var(--mono); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.runs > .bento { margin-top: 8px; }
.partner { padding: 20px; gap: 12px; border-radius: 16px; min-height: 148px; }
.partner-name { margin: 0; font-weight: 500; }
.status { font: 400 12px var(--mono); white-space: nowrap; display: inline-flex; align-items: center; }
.status .dot { width: 6px; height: 6px; margin-right: 8px; }
#net-count { font-weight: 400; color: var(--d-lake); }

/* trust */
.side { flex-direction: row; align-items: center; gap: 24px; }
.side svg { flex-shrink: 0; fill: none; }
.side > div { display: grid; gap: 8px; }

/* try it, on dark */
.bs .cmd { background: #0b0f10; margin-top: auto; }
.bs .recent li { border-bottom-color: var(--d-line); }
.bs .recent li span { color: var(--d-3); }

/* FAQ topics (all visible without JavaScript; main.js turns them into tabs) */
.faq { max-width: 860px; }
.faq-groups { display: grid; gap: 16px; }
.faq-h { margin: 0 0 8px; font: 500 var(--t-14) var(--sans); color: var(--d-2); }
.faq-tabs { position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: #0b0f10; border: 1px solid var(--d-line); }
.faq-tab { position: relative; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--d-2); font: 500 var(--t-14) var(--sans); cursor: pointer; transition: background-color 240ms var(--ease), color 240ms var(--ease); }
.faq-tab[aria-selected="true"] { background: var(--d-1); color: var(--dusk); }
.faq-tab:focus-visible { outline: 2px solid var(--d-lake); outline-offset: 2px; }
.faq-tabbed .faq-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.faq-group[hidden] { display: none; }
@media (max-width: 719px) { .faq-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .faq-tab { transition: none; } }

@media (max-width: 1199px) {
  .bs-head { grid-template-columns: 1fr; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s1, .s2 { grid-column: span 1; } .s3, .s4, .s6 { grid-column: span 2; }
  .r2 { grid-row: auto; }
}
@media (max-width: 719px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .s1, .s2, .s3, .s4, .s6 { grid-column: span 1; }
  .bc { padding: 24px; } .bc-panel { padding: 24px; }
  .dg-wide { display: none; } .dg-narrow { display: block; }
  .tiles-2 { grid-template-columns: 1fr 1fr; }
  .side { flex-direction: column; align-items: flex-start; }
  .band-inner { padding-inline: 16px; }
}

/* ---------- Bento motion (plan 2026-11-10-site-bento-direction §Motion). One curve; the site's 7 s loop; only transform, opacity,
   strokes, motion paths and clips move. Entrances play once, when they come into view: main.js adds .in and
   the animation runs from there; nothing is tied to scroll position. Loops pause while their section is off screen (.paused). ---------- */
@keyframes mo-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes mo-row { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes mo-flash { 0%, 60% { background-color: rgba(224, 103, 90, 0); } 80% { background-color: rgba(224, 103, 90, 0.28); } 100% { background-color: rgba(224, 103, 90, 0.08); } }
@keyframes mo-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mo-pop { 0% { opacity: 0; transform: scale(0.4); } 70% { opacity: 1; transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes mo-line { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes mo-bullet { from { opacity: 0.2; transform: scale(0.5); } to { opacity: 1; transform: none; } }
@keyframes mo-type { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mo-slide { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes mo-strike { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mo-spin { from { transform: rotate(-90deg); } to { transform: none; } }
@keyframes mo-dot { from { opacity: 0.12; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes mo-tr { 0% { offset-distance: 0%; opacity: 0; } 6% { opacity: 1; } 38% { offset-distance: 100%; opacity: 1; } 44%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes mo-tr2 { 0%, 46% { offset-distance: 0%; opacity: 0; } 50% { opacity: 1; } 78% { offset-distance: 100%; opacity: 1; } 84%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes mo-pulse { 0%, 36%, 100% { transform: scale(1); } 42% { transform: scale(1.12); } 50% { transform: scale(1); } }
@keyframes mo-tick { 0%, 30% { stroke-dashoffset: 1; } 40%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes mo-blink { 0%, 40%, 100% { opacity: 0.35; } 44%, 50% { opacity: 1; } }
@keyframes mo-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes mo-drift { from { transform: translateX(-3%); } to { transform: translateX(3%); } }
@keyframes mo-flickA { 0%, 100% { opacity: 1; } 33% { opacity: 0.55; } 66% { opacity: 0.85; } }
@keyframes mo-flickB { 0%, 100% { opacity: 0.2; } 33% { opacity: 0.9; } 66% { opacity: 0.4; } }

/* loops */
.mo-tr, .mo-tr2 { offset-rotate: 0deg; }
.mo-tr { animation: mo-tr 7s var(--ease) infinite; }
.mo-tr2 { animation: mo-tr2 7s var(--ease) infinite; }
.mo-pulse { transform-box: fill-box; transform-origin: center; animation: mo-pulse 7s var(--ease) infinite; }
.mo-tick { stroke-dasharray: 1; animation: mo-tick 7s linear infinite; }
.mo-blink { animation: mo-blink 7s linear infinite; }
.mo-breathe { animation: mo-breathe 3s ease-in-out infinite; }
.mo-drift { animation: mo-drift 40s ease-in-out infinite alternate; }
.mo-flickA { animation: mo-flickA 2.4s steps(1) infinite; }
.mo-flickB { animation: mo-flickB 3.1s steps(1) infinite; }
.paused .mo-tr, .paused .mo-tr2, .paused .mo-pulse, .paused .mo-tick, .paused .mo-blink, .paused .mo-breathe, .paused .mo-drift, .paused .mo-flickA, .paused .mo-flickB { animation-play-state: paused; }
.mo-draw { stroke-dasharray: 1; }
.mo-pop, .mo-spin { transform-box: fill-box; transform-origin: center; }
.mo-line { transform-origin: top; } .mo-strike { transform-origin: left; }

/* entrances: each plays once when it comes into view (main.js adds .in); hidden first only when JavaScript runs and motion is allowed */
@media (prefers-reduced-motion: no-preference) {
  .js .mo-rise:not(.in), .js .mo-row:not(.in), .js .mo-flash:not(.in), .js .mo-slide:not(.in) { opacity: 0; }
  .js .mo-draw:not(.in) { stroke-dashoffset: 1; } .js .mo-line:not(.in) { transform: scaleY(0); } .js .mo-strike:not(.in) { transform: scaleX(0); }
  .js .mo-pop:not(.in), .js .mo-type:not(.in) { opacity: 0; } .js .mo-bullet:not(.in) { opacity: 0.2; } .js .mo-spin:not(.in) { transform: rotate(-90deg); }
  .js .proof-grid:not(.in) .mo-dot { opacity: 0.12; }
}
.mo-rise.in { animation: mo-rise 320ms var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.mo-row.in { animation: mo-row 320ms var(--ease) both; animation-delay: calc(var(--i, 0) * 120ms); }
.mo-flash.in { animation: mo-row 320ms var(--ease) 900ms both, mo-flash 900ms linear 900ms both; }
.mo-draw.in { animation: mo-draw 1200ms var(--ease) both; }
.mo-pop.in { animation: mo-pop 500ms var(--spring) 900ms both; }
.mo-line.in { animation: mo-line 800ms var(--ease) both; }
.mo-bullet.in { animation: mo-bullet 240ms var(--ease) both; animation-delay: calc(160ms + var(--i, 0) * 120ms); }
.mo-type.in { animation: mo-type 420ms steps(7) both; }
.mo-slide.in { animation: mo-slide 320ms var(--ease) 400ms both; }
.mo-strike.in { animation: mo-strike 400ms var(--ease) 600ms both; }
.mo-spin.in { animation: mo-spin 800ms var(--ease) both; }
.proof-grid.in .mo-dot { animation: mo-dot 300ms var(--ease) both; animation-delay: calc(var(--i, 0) * 4ms); }
@media (prefers-reduced-motion: reduce) {
  .bs *, .bs *::before, .bs *::after { animation: none !important; transition: none !important; }
  .mo-tr, .mo-tr2 { display: none; }
}

/* Proof section, five boxes (2026-11-14): the lens under the grid, one card with two live checks, one refusal card, one list of what runs where. */
.lens-line { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 16px; font-size: var(--t-14); color: var(--d-2); }
.lens-line p { margin: 0; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.lens-line .bc-label { margin-right: 8px; }
#lens-priv { color: var(--d-lake); }
.bs .dots-card .proof-grid { grid-template-columns: repeat(auto-fill, minmax(20px, 1fr)); }
.halves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.halves > div { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.halves > div + div { border-left: 1px solid var(--d-line); padding-left: 32px; }
.refusal-head { padding: 24px 24px 20px; display: flex; flex-direction: column; gap: 8px; }
.runs-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; }
.runs-list li { display: grid; grid-template-columns: minmax(150px, 200px) minmax(150px, 220px) minmax(0, 1fr); gap: 4px 24px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--d-line); }
.runs-list p { margin: 0; min-width: 0; }
.runs-d { color: var(--d-2); font-size: var(--t-14); line-height: 1.5; }
.runs-role { display: block; font: 400 var(--t-12) var(--mono); color: var(--d-3); margin-bottom: 2px; }
@media (max-width: 760px) {
  .halves { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .halves > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--d-line); padding-top: 24px; }
  .runs-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .runs-list li > .runs-d { grid-column: 1 / -1; }
}

/* Narrow screens: a comparison table becomes one block per row, each value labelled with its column (2026-11-14), so no column is
   cut off at the card's edge. The column name comes from data-h on each cell. */
@media (max-width: 600px) {
  .tbl-4, .tbl-3 { grid-template-columns: minmax(0, 1fr); }
  .tbl .th { display: none; }
  .tbl .td { border-bottom: 0; padding: 4px 16px; }
  .tbl .td.k { padding-top: 16px; border-top: 1px solid rgba(233, 236, 232, 0.08); color: var(--d-1); }
  .tbl .td.k:first-of-type { border-top: 0; }
  .tbl .td[data-h] { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: baseline; }
  .tbl .td[data-h]::before { content: attr(data-h); font: 400 12px var(--mono); color: var(--d-3); }
  .tbl .td[data-h]:last-child { padding-bottom: 16px; }
}

/* Phones: closer to the desktop layout (2026-11-14). The bento keeps 6 columns, so small cards sit two or three to a row as on
   desktop; the three problem scenarios become one row that swipes, each card snapping into place with the next one peeking in; cards
   and sections are a little tighter. Above 719 px the scenario wrapper does not exist for layout (display: contents). */
.scen { display: contents; }
@media (max-width: 719px) {
  .bs { padding: 48px 0; }
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .s1, .s2, .s3, .s4, .s6 { grid-column: span 6; }
  .bc { padding: 20px; gap: 12px; } .bc-panel { padding: 20px; }
  .bs-head { margin-bottom: 0; }
  .scen { display: flex; grid-column: 1 / -1; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .scen::-webkit-scrollbar { display: none; }
  .scen > .bc { flex: 0 0 86%; scroll-snap-align: center; }
  .scen:focus-visible { outline: 2px solid var(--d-lake); outline-offset: 2px; }
  #how .bento > .s2, #how .bento > .s1 { grid-column: span 3; }
  #agents .bento > .bc-raised.s2 { grid-column: span 2; padding: 16px; }
  #who .bento > .frost { grid-column: span 3; min-height: 0; padding: 16px; }
  #who .band-inner { padding-top: 48px; }
  #who .band-inner .title { margin-bottom: 32px; }
  .end-inner { gap: 32px; padding-top: 56px; }
}
@media (max-width: 520px) {
  .foot { grid-template-columns: 1fr 1fr; padding: 20px; gap: 24px; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 719px) {
  /* "Read the contract yourself" and "Check the AI's secure hardware": two halves that swipe, side by side as on desktop */
  .live-card .halves { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -20px; padding-inline: 20px; }
  .live-card .halves::-webkit-scrollbar { display: none; }
  .live-card .halves > div { flex: 0 0 88%; scroll-snap-align: center; }
  .live-card .halves > div + div { border-top: 0; padding-top: 0; border-left: 1px solid var(--d-line); padding-left: 16px; }
  /* the limits: icon beside the text, as on desktop */
  #limits .side { flex-direction: row; align-items: flex-start; gap: 16px; }
  #limits .side > svg { flex: none; width: 64px; height: 64px; }
}
@media (max-width: 719px) {
  .scen .tile .fig { font-size: 32px; white-space: nowrap; }
  #who .bento > .frost:last-child:nth-child(odd) { grid-column: span 6; }
}