/* Layout: sticky chapter index on the left, one reading column on the right;
   a faint drafting grid behind the title block, since this is a blueprint. */
:root {
  --pad-lg: clamp(22px, 2.6vw, 32px);
  --r-sm: 12px;
  --bg: #f3f6f5;
  --surface: #ffffff;
  --fg: #15201e;
  --muted: #566664;
  --rule: #d5dddb;
  --accent: #0a6b5b;
  --accent-soft: #dcefea;
  --chip: #e7edeb;
  --grid: rgba(10, 107, 91, 0.09);
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --nav-w: 18.5rem;
  --top: env(safe-area-inset-top, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c1413; --surface: #121b1a; --fg: #e1e9e7; --muted: #92a3a0;
    --rule: #25322f; --accent: #52d1b2; --accent-soft: #123029; --chip: #1a2624;
    --grid: rgba(82, 209, 178, 0.09);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0c1413; --surface: #121b1a; --fg: #e1e9e7; --muted: #92a3a0;
  --rule: #25322f; --accent: #52d1b2; --accent-soft: #123029; --chip: #1a2624;
  --grid: rgba(82, 209, 178, 0.09);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--top) + 4.5rem); }
body {
  background: var(--bg); color: var(--fg);
  font: 400 1rem/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 0;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: var(--top);
  background: var(--bg); z-index: 30;
}
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* ---------- top bar (mobile) ---------- */
.topbar {
  display: none; position: sticky; top: var(--top); z-index: 20;
  align-items: center; justify-content: space-between; gap: 12px;
  background: var(--bg); border-bottom: 1px solid var(--rule);
  padding: 10px 0;
}
.topbar .brand { font: 500 0.8rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.btn {
  font: 500 0.8rem/1 var(--font-body); color: var(--fg); background: var(--surface);
  border: 1px solid var(--rule); border-radius: 6px; padding: 9px 12px; cursor: pointer;
}
.btn:hover { border-color: var(--accent); }
.btn-icon { display: inline-grid; place-items: center; padding: 7px; line-height: 0; }
.btn-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.btn-icon circle { transition: fill .2s; }
.btn-icon[aria-pressed="true"] circle { fill: currentColor; }
.btn-icon[aria-pressed="false"] .rays { opacity: 0; }
.btn-icon .rays { transition: opacity .2s; }

/* ---------- shell ---------- */
.shell {
  display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px); max-width: 78rem; margin: 0 auto;
}
.sidebar {
  position: sticky; top: var(--top); align-self: start;
  height: calc(100vh - var(--top)); overflow-y: auto; overscroll-behavior: contain;
  padding: 28px 8px 32px 0; border-right: 1px solid var(--rule); padding-right: 20px;
}
.side-brand { font: 500 0.78rem/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.side-title { font: 500 1.05rem/1.3 var(--font-display); margin: 6px 0 16px; }
.search {
  width: 100%; font: 400 0.9rem/1 var(--font-body); color: var(--fg); background: var(--surface);
  border: 1px solid var(--rule); border-radius: 6px; padding: 10px 12px;
}
.search::placeholder { color: var(--muted); }
.nav-group {
  font: 500 0.68rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin: 22px 0 8px;
}
.nav-chap ul { list-style: none; margin: 2px 0 8px; padding: 0 0 0 1.9rem; display: none; }
.nav-chap.open ul { display: block; }
.nav-chap a { text-decoration: none; color: var(--muted); display: flex; gap: 10px; padding: 4px 0; font-size: 0.86rem; line-height: 1.35; }
.nav-chap a:hover { color: var(--fg); }
.nav-chap .n { font: 400 0.75rem/1.6 var(--font-mono); min-width: 1.9rem; flex: none; color: var(--muted); }
.nav-chap ul .n { min-width: 2.2rem; margin-left: -2.2rem; opacity: 0; width: 0; overflow: hidden; }
.nav-chap ul a { padding-left: 0; }
.nav-chap ul .n { opacity: 1; width: auto; margin-left: 0; min-width: 2.4rem; }
.nav-chap .nav-top { color: var(--fg); font-weight: 500; }
.nav-chap.open > .nav-top .n, .nav-chap.open > .nav-top { color: var(--accent); }
.nav-chap ul a.on { color: var(--accent); }
.results { display: none; margin-top: 14px; }
.results.show { display: block; }
.results a { display: block; text-decoration: none; color: var(--fg); padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 0.86rem; line-height: 1.4; }
.results a b { font-weight: 600; }
.results a small { display: block; color: var(--muted); margin-top: 2px; font-size: 0.8rem; }
.results mark { background: var(--accent-soft); color: var(--fg); border-radius: 2px; padding: 0 1px; }
.side-foot { margin-top: 28px; display: flex; gap: 8px; align-items: center; }
.nomatch { color: var(--muted); font-size: 0.86rem; padding: 10px 0; }
.indexing .nav { display: none; }

/* ---------- title block ---------- */
main { min-width: 0; padding-bottom: 96px; }
.hero {
  position: relative; margin: 28px 0 0; padding: clamp(28px, 5vw, 56px) 0 36px;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px; background-position: -1px -1px;
  border-bottom: 1px solid var(--rule);
}
.hero-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 500 0.74rem/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.hero h1 { font: 500 clamp(2.2rem, 5.2vw, 3.6rem)/1.05 var(--font-display); letter-spacing: -0.015em; margin: 16px 0 22px; text-wrap: balance; max-width: 18ch; }
.lede { max-width: 42rem; font-size: 1.12rem; line-height: 1.6; }
.lede p { margin: 0; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 24px; font: 400 0.85rem/1.4 var(--font-mono); color: var(--muted); }
.facts b { color: var(--fg); font-weight: 500; }

.legend { margin: 28px 0 0; padding: 20px 0 8px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px 28px; }
.legend h2 { grid-column: 1 / -1; font: 500 0.7rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0; }
.legend div { font-size: 0.9rem; line-height: 1.5; color: var(--muted); }
.legend strong { display: block; color: var(--fg); font-weight: 600; margin-bottom: 2px; }
.legend strong::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 8px; background: var(--accent); }
.legend .s-prop strong::before { background: transparent; border: 2px solid var(--accent); }
.legend .s-hyp strong::before { background: repeating-linear-gradient(45deg, var(--accent) 0 2px, transparent 2px 4px); }
.legend .s-fact strong::before { background: var(--muted); }
.legend a { font-size: 0.8rem; }

/* ---------- content ---------- */
.chap { padding-top: 56px; }
.chap + .chap { border-top: 1px solid var(--rule); margin-top: 64px; }
.chap-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.chap-num { font: 500 0.8rem/1 var(--font-mono); letter-spacing: 0.1em; color: var(--accent); text-transform: uppercase; }
.chap h2 { font: 500 clamp(1.8rem, 3.4vw, 2.5rem)/1.12 var(--font-display); letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
.chap h3 { display: flex; gap: 12px; align-items: baseline; font: 500 1.4rem/1.25 var(--font-display); margin: 44px 0 10px; text-wrap: balance; }
.chap h3 .num { font: 500 0.78rem/1 var(--font-mono); color: var(--accent); flex: none; letter-spacing: 0.04em; }
.chap h4 { display: flex; gap: 12px; align-items: baseline; font: 600 1rem/1.35 var(--font-body); margin: 30px 0 6px; }
.chap h4 .code { font: 500 0.74rem/1 var(--font-mono); background: var(--chip); border-radius: 4px; padding: 4px 6px; flex: none; color: var(--muted); }
.chap p, .chap ul, .chap ol { max-width: 44rem; margin: 0 0 1em; }
.chap li { margin: 0 0 0.4em; }
.chap li::marker { color: var(--accent); }
.cite {
  display: inline-block; font: 400 0.72rem/1.5 var(--font-mono); color: var(--muted);
  background: var(--chip); border-radius: 4px; padding: 0 6px; margin-left: 2px; vertical-align: 0.08em; white-space: normal;
}
.tablewrap { overflow-x: auto; margin: 6px 0 22px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); max-width: 100%; }
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; line-height: 1.45; }
th, td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--rule); min-width: 8rem; }
th { font: 500 0.7rem/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background: var(--chip); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td:first-child { font-weight: 500; }
td { font-variant-numeric: tabular-nums; }
.hit { animation: hit 1.6s ease-out; }
@keyframes hit { from { background: var(--accent-soft); } to { background: transparent; } }

.foot { margin-top: 72px; padding-top: 20px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.85rem; max-width: 44rem; }
.foot code { font: 400 0.8rem var(--font-mono); background: var(--chip); border-radius: 4px; padding: 1px 6px; }

/* ---------- small screens ---------- */
@media (max-width: 980px) {
  .shell { display: block; }
  .topbar { display: flex; }
  .sidebar {
    position: fixed; z-index: 25; inset: calc(var(--top) + 53px) 0 0 0; height: auto;
    background: var(--bg); border-right: 0; padding: 12px max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px));
    display: none;
  }
  body.nav-open .sidebar { display: block; }
  body.nav-open { overflow: hidden; }
  .side-brand, .side-title { display: none; }
  .hero { margin-top: 0; }
  .chap { padding-top: 40px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hit { animation: none; } }

/* ===================== public site ===================== */
.wrap { max-width: 72rem; margin: 0 auto; }
.site-head { position: sticky; top: var(--top); z-index: 20; background: var(--bg); border-bottom: 1px solid var(--rule); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; flex-wrap: wrap; }
.wordmark { font: 500 1rem/1 var(--font-mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg); text-decoration: none; }
.site-nav { display: flex; gap: 22px; align-items: center; font-size: 0.9rem; }
.site-nav a { color: var(--muted); text-decoration: none; white-space: nowrap; }
.site-nav a:hover { color: var(--fg); }
.site-nav .pill { color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 6px 14px; }
.site-nav .pill:hover { color: var(--bg); background: var(--accent); }
.site-actions { display: flex; align-items: center; gap: 12px; }
.site-head .links { overflow-x: auto; max-width: 100%; }

.s-hero { padding-block: clamp(40px, 7vw, 88px) clamp(40px, 6vw, 72px);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px; background-position: -1px -1px; border-bottom: 1px solid var(--rule); }
.s-hero .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.kicker { font: 500 0.74rem/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.s-hero h1 { font: 500 clamp(2.4rem, 5.6vw, 4rem)/1.04 var(--font-display); letter-spacing: -0.02em; margin: 0 0 22px; text-wrap: balance; }
.s-hero .sub { font-size: 1.15rem; line-height: 1.6; max-width: 34rem; margin: 0 0 28px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-primary { font: 500 0.95rem/1 var(--font-body); background: var(--accent); color: var(--bg); border: 1px solid var(--accent); border-radius: 6px; padding: 14px 20px; text-decoration: none; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { font: 500 0.95rem/1 var(--font-body); color: var(--fg); border: 1px solid var(--rule); border-radius: 6px; padding: 14px 20px; text-decoration: none; background: var(--surface); }
.btn-ghost:hover { border-color: var(--accent); }

.ledger { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.ledger header { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--rule); font: 500 0.7rem/1.3 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: var(--chip); }
.ledger .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 14px 16px; border-bottom: 1px solid var(--rule); align-items: baseline; }
.ledger .row small { grid-column: 1 / -1; color: var(--muted); font-size: 0.82rem; }
.ledger .lbl { font-weight: 500; }
.ledger .amt { font: 500 1.05rem/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.ledger .ok { color: var(--muted); }
.ledger .stop { border-bottom: 0; background: var(--accent-soft); }
.ledger .stop .lbl { color: var(--accent); }
.ledger .stop .amt { color: var(--accent); }

.band { padding-block: clamp(48px, 7vw, 88px); border-bottom: 1px solid var(--rule); }
.band .head { max-width: 44rem; margin-bottom: 34px; }
.band h2 { font: 500 clamp(1.8rem, 3.6vw, 2.6rem)/1.1 var(--font-display); letter-spacing: -0.01em; margin: 0 0 14px; text-wrap: balance; }
.band .intro { font-size: 1.08rem; color: var(--muted); margin: 0; }
.cols { display: grid; gap: 28px 40px; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.cols h3 { font: 600 1.05rem/1.3 var(--font-body); margin: 0 0 8px; }
.cols p { margin: 0; color: var(--muted); }
.cols > div { border-top: 2px solid var(--accent); padding-top: 14px; min-width: 0; }
.cols.plain > div { border-top: 1px solid var(--rule); }
.pillars { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.pillar { border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); padding: 26px; min-width: 0; }
.pillar h3 { font: 500 1.5rem/1.2 var(--font-display); margin: 0 0 10px; }
.pillar p { margin: 0 0 12px; }
.pillar p:last-child { margin: 0; color: var(--muted); }

.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); overflow: hidden; }
.flow li { padding: 20px 18px 22px; border-left: 1px solid var(--rule); min-width: 0; }
.flow li:first-child { border-left: 0; }
.flow .cp { font: 500 0.7rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.flow .opt { font: 400 0.68rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-left: 8px; }
.flow h3 { font: 600 1rem/1.3 var(--font-body); margin: 12px 0 6px; }
.flow p { margin: 0; font-size: 0.9rem; color: var(--muted); line-height: 1.5; }
.note { margin: 16px 0 0; color: var(--muted); font-size: 0.9rem; max-width: 46rem; }

.split { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; }
.split p { margin: 0 0 1em; }
.split .tablewrap { margin: 0; }
.honest { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: clamp(22px, 3vw, 36px); display: grid; gap: 24px 48px; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.honest h3 { font: 500 0.72rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; }
.honest ul { margin: 0; padding-left: 1.1rem; }
.honest li { margin: 0 0 0.5em; }
.honest li::marker { color: var(--accent); }
.s-foot { padding-block: 40px 64px; color: var(--muted); font-size: 0.9rem; }
.s-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; }
.s-foot a { color: var(--muted); }
.contact { font: 500 1rem var(--font-mono); user-select: all; }
.lock { font: 500 0.7rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

.back { display: inline-block; margin-bottom: 8px; font-size: 0.85rem; color: var(--muted); text-decoration: none; }
.back:hover { color: var(--accent); }
.foot { overflow-wrap: anywhere; }
.nocite .cite { display: none; }

@media (max-width: 900px) {
  .s-hero .wrap, .split { grid-template-columns: minmax(0, 1fr); }
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow li { border-left: 0; border-top: 1px solid var(--rule); }
  .flow li:first-child { border-top: 0; }
  .site-head .wrap { gap: 8px 16px; }
  .site-nav.links { order: 3; width: 100%; gap: 18px; padding-bottom: 2px; }
}

/* ===================== visual public site (experiment) ===================== */
.ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ic.big { width: 34px; height: 34px; stroke-width: 1.4; color: var(--accent); margin-bottom: 14px; }
.cap { margin: 18px 0 0; color: var(--muted); font-size: 0.88rem; max-width: 46rem; }
.band .head h2 { margin-bottom: 0; }
.band .head .intro { margin-top: 12px; }

.strip { padding-block: 32px; border-bottom: 1px solid var(--rule); }
.strip-h { font: 500 1.35rem/1.3 var(--font-display); margin: 0; max-width: 40rem; text-wrap: balance; }
.strip-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: 12px 24px; }
.strip-list li { display: flex; gap: 10px; align-items: center; font-size: 0.95rem; }
.strip-list .ic { color: var(--accent); }

.chip { display: flex; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 12px 14px; min-width: 0; }
.chip .ic { color: var(--accent); }
.chip b { display: block; font-weight: 600; font-size: 0.95rem; line-height: 1.3; }
.chip small { display: block; color: var(--muted); font-size: 0.8rem; line-height: 1.35; }
.chip.later { border-style: dashed; background: transparent; }
.chip.later .ic { color: var(--muted); }

.eco-h { font: 500 0.7rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.back { stroke: var(--muted); stroke-dasharray: 3 4; }

.pipe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.pipe li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 0 6px; min-width: 0; }
.pipe li + li::before { content: ""; position: absolute; top: 22px; left: -50%; width: 100%; height: 2px; background: var(--accent); z-index: 0; }
.pipe .num, .pipe .ico { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 8px; }
.pipe .num { background: var(--accent); color: var(--bg); font: 500 1rem/1 var(--font-mono); }
.pipe .ico { background: var(--surface); border: 1px solid var(--rule); color: var(--accent); }
.pipe .opt .num { background: var(--bg); color: var(--accent); border: 2px dashed var(--accent); }
.pipe li.opt::before { background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 10px); }
.pipe b { font-weight: 600; font-size: 0.9rem; line-height: 1.3; }
.pipe small { color: var(--muted); font-size: 0.78rem; line-height: 1.35; }

.build { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 46rem; }
.build-t { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; margin-bottom: 7px; }
.build-t b { font-weight: 600; }
.build-t span { color: var(--muted); font-size: 0.9rem; }
.bar { height: 8px; border-radius: 4px; background: var(--chip); overflow: hidden; }
.bar i { display: block; height: 100%; width: calc(var(--n) * 20%); background: var(--accent); border-radius: 4px; }

.lanes { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.lane { border: 1px solid var(--rule); background: var(--surface); border-radius: 10px; padding: 22px; min-width: 0; }
.lane h3 { font: 600 1.05rem/1.3 var(--font-body); margin: 0 0 6px; }
.lane p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.lane .tag { display: inline-block; font: 500 0.66rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 5px 9px; margin-bottom: 18px; }
.lane .ic.big { display: block; }
.lane.later { border-style: dashed; background: transparent; }
.lane.later .tag { color: var(--muted); border-color: var(--muted); }
.lane.later .ic.big { color: var(--muted); }

.honest.two { background: none; border: 0; padding: 0; gap: 8px 48px; }
.marks { list-style: none; margin: 0; padding: 0; }
.marks li { display: flex; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.marks.yes .ic { color: var(--accent); }
.marks.no { color: var(--muted); }
.marks.no .ic { color: var(--muted); }

@media (max-width: 900px) {
  .pipe { grid-template-columns: minmax(0, 1fr); max-width: 26rem; }
  .pipe li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; text-align: left; align-items: center; padding: 0 0 22px; }
  .pipe li:last-child { padding-bottom: 0; }
  .pipe .num, .pipe .ico { grid-row: 1 / span 2; margin: 0; }
  .pipe li + li::before { top: -22px; left: 21px; width: 2px; height: 22px; }
  .pipe li.opt::before { background: repeating-linear-gradient(180deg, var(--accent) 0 6px, transparent 6px 10px); }
}

/* ===================== motion (enabled by the `js` class) ===================== */
.t-off { color: transparent; }
.caret { display: inline-block; width: 2px; height: 1em; background: var(--accent); vertical-align: -0.14em; margin-left: 1px; animation: blink 1s steps(2) infinite; }
.caret[hidden] { display: none; }
@keyframes blink { 50% { opacity: 0; } }
.ledger-foot { display: none; justify-content: flex-end; padding: 8px 12px; border-top: 1px solid var(--rule); }
.replay { font: 500 0.68rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: none; border: 0; cursor: pointer; padding: 6px 8px; border-radius: 4px; }
.replay:hover { color: var(--accent); }
html.js .ledger-foot { display: flex; }

html.js .s-hero h1 .w { display: inline-block; opacity: 0; transform: translateY(0.45em); transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--d); }
html.js .s-hero.go h1 .w { opacity: 1; transform: none; }
html.js .s-hero .kicker, html.js .s-hero .sub, html.js .s-hero .cta, html.js .s-hero .ledger { opacity: 0; transform: translateY(12px); transition: opacity 0.4s ease, transform 0.4s ease; }
html.js .s-hero.go .kicker { opacity: 1; transform: none; }
html.js .s-hero.go .sub { opacity: 1; transform: none; transition-delay: 0.3s; }
html.js .s-hero.go .cta { opacity: 1; transform: none; transition-delay: 0.4s; }
html.js .s-hero.go .ledger { opacity: 1; transform: none; transition-delay: 0.15s; }
html.js .ledger .stop { background: transparent; transition: background 0.5s ease; }
html.js .ledger .stop.on { background: var(--accent-soft); }

html.js .rv { opacity: 0; transform: translateY(16px); transition: opacity 0.4s ease, transform 0.4s ease; }
html.js .rv.in { opacity: 1; transform: none; }
html.js .rk > *, html.js .honest.rk .marks li { opacity: 0; transform: translateY(14px); transition: opacity 0.35s ease, transform 0.35s ease; transition-delay: calc(var(--i, 0) * 40ms); }
html.js .rk.in > *, html.js .honest.rk.in .marks li { opacity: 1; transform: none; }
html.js .honest.rk > * { opacity: 1; transform: none; }
html.js .build .bar i { width: 0; transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 70ms + 150ms); }
html.js .build.in .bar i { width: calc(var(--n) * 20%); }

/* ===================== clean public look (homepage only, body.site) ===================== */
body.site {
  --bg: #ffffff; --surface: #f4f7f6; --fg: #141c1b; --muted: #5d6b69; --rule: #e6ebe9;
  --chip: #edf2f0; --card: #ffffff;
  --shadow: 0 1px 2px rgba(16, 40, 36, 0.05), 0 16px 40px rgba(16, 40, 36, 0.08);
  --r-lg: 24px; --r-md: 16px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.site { --bg: #0c1413; --surface: #141d1c; --fg: #e1e9e7; --muted: #92a3a0; --rule: #223029; --accent: #52d1b2; --accent-soft: #123029; --chip: #1a2624; --card: #18221f; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 16px 40px rgba(0,0,0,.35); } }
:root[data-theme="dark"] body.site { --bg: #0c1413; --surface: #141d1c; --fg: #e1e9e7; --muted: #92a3a0; --rule: #223029; --accent: #52d1b2; --accent-soft: #123029; --chip: #1a2624; --card: #18221f; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 16px 40px rgba(0,0,0,.35); }

/* header: borderless, frosted */
.site .site-head { border-bottom: 0; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
.site .site-head .wrap { padding: 16px 0; }
.site .site-nav .pill { border-radius: 999px; background: var(--bg); color: var(--fg); border-color: var(--rule); padding: 9px 18px; }
.site .site-nav .pill:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.site .btn { border-radius: 999px; border-color: var(--rule); background: var(--bg); }
.site .btn-icon { padding: 8px; }

/* hero: no grid, more air, product card on a soft stage */
.site .s-hero { background: none; border-bottom: 0; padding-block: clamp(56px, 9vw, 120px) clamp(48px, 7vw, 96px); }
.site .s-hero h1 { letter-spacing: -0.025em; }
.site .s-hero .sub { color: var(--muted); }
.site .btn-primary, .site .btn-ghost { border-radius: 999px; padding: 14px 24px; }
.site .btn-ghost { background: var(--bg); border-color: var(--rule); }
.site .btn-ghost:hover { border-color: var(--fg); }

/* app-style card */
.site .ledger { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-md); box-shadow: var(--shadow); }
.site .ledger header { background: none; border-bottom-color: var(--rule); padding: 16px 20px; }
.site .ledger .row { padding: 15px 20px; border-bottom-color: var(--rule); }
.site .ledger .stop { margin: 10px; border-radius: 12px; }
.site .ledger-foot { border-top: 0; }

/* sections: spacing instead of lines */
.site .band { border-bottom: 0; padding-block: clamp(64px, 9vw, 120px); }
.site .band .head { margin-bottom: 36px; }
.site .strip { border-bottom: 0; padding-block: 8px 24px; }
.site .strip .wrap { background: var(--surface); border-radius: var(--r-lg); padding: 28px clamp(20px, 3vw, 36px); }

/* soft cards: filled, rounded, borderless */
.site .lane { background: var(--surface); border: 0; border-radius: var(--r-lg); padding: 28px; }
.site .lane.later { background: none; border: 1px dashed var(--rule); }
.site .lane .ic.big { width: 44px; height: 44px; padding: 10px; background: var(--card); border-radius: 12px; box-shadow: var(--shadow); stroke-width: 1.6; margin-bottom: 18px; }
.site .lane .tag { border-radius: 999px; }
.site .chip { background: var(--surface); border: 0; border-radius: var(--r-md); }
.site .chip.later { background: none; border: 1px dashed var(--rule); }
.site .bar { height: 10px; border-radius: 999px; }
.site .bar i { border-radius: 999px; }
.site .marks li { border-bottom-color: var(--rule); }
.site .honest.two { background: var(--surface); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 36px); }
.site .cap { font-size: 0.85rem; }

.site .s-foot { border-top: 1px solid var(--rule); }

/* contact form (partner section) */
.contact-grid { display: grid; gap: 48px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
.fields { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fields label { display: grid; gap: 6px; font-size: 0.88rem; font-weight: 500; }
.fields .full { grid-column: 1 / -1; }
.optl { color: var(--muted); font-weight: 400; }
.fields input, .fields textarea { font: 400 0.95rem/1.4 var(--font-body); color: var(--fg); background: var(--card, var(--bg)); border: 1px solid var(--rule); border-radius: 12px; padding: 11px 14px; width: 100%; }
.fields input:focus, .fields textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.form-note { margin: -8px 0 0; color: var(--muted); font-size: 0.82rem; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
@media (max-width: 560px) { .fields { grid-template-columns: minmax(0, 1fr); } }

/* story canvas */
body.site { --bad: #b4432f; --bad-soft: #f8e7e2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.site { --bad: #f08a72; --bad-soft: #3a201b; } }
:root[data-theme="dark"] body.site { --bad: #f08a72; --bad-soft: #3a201b; }
.story-band { padding-block: 0 clamp(24px, 4vw, 48px); }
.canvas { background: var(--surface); border-radius: var(--r-lg); padding: var(--pad-lg); }
.canvas .head { margin-bottom: 22px; }
.who { display: inline-block; font: 500 0.7rem/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin: 10px 0 8px; }

.mini { background: var(--card); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; font-size: 0.92rem; }
.mini header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--rule); font: 500 0.68rem/1.3 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.m-badge { background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 4px 9px; }
.m-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 18px; border-bottom: 1px solid var(--rule); }
.m-row:last-child { border-bottom: 0; }
.m-row span { color: var(--muted); }
.m-row b { font-weight: 500; display: inline-flex; align-items: center; gap: 6px; text-align: right; }
.m-ic { width: 16px; height: 16px; stroke-width: 2.2; flex: none; margin-top: 3px; }
.m-row b { align-items: flex-start; }
.m-row.good b { color: var(--accent); }
.m-row.bad b { color: var(--bad); }
.m-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; margin: 12px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 12px; }
.m-opt + .m-opt { margin-top: 0; }
.m-opt small { display: block; color: var(--muted); font-size: 0.8rem; }
.m-opt > b { font: 500 1rem/1 var(--font-mono); }
.m-opt em { grid-column: 1 / -1; font: 500 0.66rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); font-style: normal; margin-top: 6px; }
.m-opt.sel { border-color: var(--accent); background: var(--accent-soft); }
.m-card { margin: 12px; padding: 16px; border-radius: 12px; background: var(--accent); color: var(--bg); display: grid; grid-template-columns: 1fr auto; gap: 18px 12px; font-size: 0.85rem; }
.m-card span:nth-child(2) { justify-self: end; opacity: 0.85; }
.m-num { grid-column: 1 / -1; font: 500 1rem/1 var(--font-mono); letter-spacing: 0.12em; }
.m-status { margin: 12px; padding: 12px 14px; border-radius: 12px; font-weight: 500; }
.m-status.good { background: var(--accent-soft); color: var(--accent); }
.m-status.bad { background: var(--bad-soft); color: var(--bad); }
.m-log { list-style: none; margin: 0; padding: 8px 18px 12px; }
.m-log li { position: relative; display: flex; justify-content: space-between; gap: 12px; padding: 8px 0 8px 20px; }
.m-log li i { position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--muted); }
.m-log li.good i { background: var(--accent); }
.m-log li.bad { color: var(--bad); }
.m-log li.bad i { background: var(--bad); }
.m-log b { font: 500 0.9rem/1.4 var(--font-mono); white-space: nowrap; }

@media (max-width: 900px) {
  .canvas { border-radius: 24px; }
}

/* header: menu + two buttons */
.site .site-nav.links { gap: 28px; }
.lock-ic .ic { width: 13px; height: 13px; vertical-align: -1px; margin-left: 2px; stroke-width: 2; }
.hbtn { font: 500 0.88rem/1 var(--font-body); border-radius: 999px; padding: 10px 18px; text-decoration: none; white-space: nowrap; border: 1px solid transparent; }
.hbtn.ghost { color: var(--fg); border-color: var(--rule); background: var(--bg); }
.hbtn.ghost:hover { border-color: var(--fg); }
.hbtn.solid { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.hbtn.solid:hover { filter: brightness(1.08); }
.site .site-actions { gap: 10px; }
@media (max-width: 900px) {
  .site .site-head .links { justify-content: flex-start; }
}
@media (max-width: 480px) {
  .hbtn.ghost { display: none; }
}

/* hero headline: light sans, like the concept */
.site .s-hero-c h1 { font-family: var(--font-body); font-weight: 300; letter-spacing: -0.045em; line-height: 1.03; max-width: 16ch; font-size: clamp(2.4rem, 5vw, 4rem); margin-bottom: 24px; }

/* all homepage headings in sans (investor area keeps the serif) */
body.site { --font-display: var(--font-body); }
.site .band h2 { font-weight: 300; font-size: clamp(2rem, 4.4vw, 3.2rem); letter-spacing: -0.035em; line-height: 1.06; }
.site .pillar h3 { font-weight: 500; letter-spacing: -0.015em; }

/* ===== rebuilt homepage sections ===== */
.site .s-hero-c { padding-block: clamp(32px, 6vw, 72px) clamp(40px, 6vw, 72px); }
.site .s-hero-c .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; text-align: left; }
.site .s-hero-c .sub { max-width: 34rem; }

.fin-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); align-items: start; }
.tscroll { overflow-x: auto; }
.fin-table table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 34rem; }
.fin-table th { text-align: left; font: 500 0.66rem/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background: none; padding: 12px 18px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.fin-table td { padding: 13px 18px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.fin-table tr:last-child td { border-bottom: 0; }
.fin-table td b { display: block; font-weight: 500; }
.fin-table td small { display: block; color: var(--muted); font-size: 0.8rem; }
.fin-table .num { font-family: var(--font-mono); white-space: nowrap; }
.st { display: inline-block; border-radius: 999px; padding: 4px 10px; font-size: 0.8rem; font-weight: 500; white-space: nowrap; }
.st.ok { background: var(--accent-soft); color: var(--accent); }
.st.bad { background: var(--bad-soft); color: var(--bad); }
.st.wait { background: var(--chip); color: var(--muted); }
.cov { font-size: 0.85rem; }
.cov.on { color: var(--accent); }
.cov.adv { color: var(--muted); }
.cov-note { margin: 0; padding: 12px 18px 16px; color: var(--muted); font-size: 0.82rem; border-top: 1px solid var(--rule); }

.sub-h { font: 500 0.72rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; }
.faq { margin-top: 48px; max-width: 46rem; }
.faq details { border-bottom: 1px solid var(--rule); padding: 14px 0; }
.faq details:first-of-type { border-top: 1px solid var(--rule); }
.faq summary { cursor: pointer; font-weight: 500; }
.faq summary:hover { color: var(--accent); }
.faq details p { margin: 8px 0 0; color: var(--muted); }

@media (max-width: 900px) {
  .fin-grid { grid-template-columns: minmax(0, 1fr); }
}
.site .band { padding-block: clamp(48px, 6vw, 72px); }
.site .story-band { padding-block: 0 clamp(24px, 3vw, 40px); }
.fin-table td:first-child { min-width: 10.5rem; }
@media (max-width: 560px) { .canvas.fin { padding: 12px; border-radius: 20px; } }

/* ===================== website rework: how it works, use cases, loop, forms ===================== */
.band .head .kicker { margin-bottom: 12px; }
.site .s-hero-c .sub { font-size: 1.2rem; }

/* how it works: four jobs, one card each */
.jobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.job { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: var(--pad-lg); min-width: 0; }
.job-h { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.job-h h3 { font: 500 1.35rem/1.2 var(--font-body); letter-spacing: -0.02em; margin: 0; }
.job-ic { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(var(--card), var(--surface)); border: 1px solid var(--rule); box-shadow: var(--shadow); color: var(--accent); }
.job-ic .ic { width: 24px; height: 24px; stroke-width: 1.5; }
.job-d { margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.6; max-width: 34rem; }
.job-ill { margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: 0; }
.job-pill { display: flex; align-items: center; gap: 10px; width: min(100%, 22rem); background: linear-gradient(var(--card), var(--surface)); border: 1px solid var(--rule); border-radius: 999px; padding: 12px 18px; box-shadow: var(--shadow); font: 400 0.85rem/1.2 var(--font-mono); color: var(--fg); }
.job-pill .ic { width: 18px; height: 18px; color: var(--accent); flex: none; }
.job-pill em { margin-left: auto; font-style: normal; color: var(--muted); font-family: var(--font-body); font-size: 0.85rem; }
.ill-k { display: block; font: 500 var(--fs-label)/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }

/* detection */
.cmp { width: min(100%, 22rem); background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow); }
.cmp-row { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr) 18px; gap: 10px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--rule); font-size: 0.9rem; }
.cmp-row:first-child { border-top: 0; }
.cmp-k { color: var(--muted); }
.cmp-v { font-weight: 500; }
.cmp-row .ic { width: 16px; height: 16px; color: var(--accent); stroke-width: 2.2; }
.cmp-row.drift { background: var(--bad-soft); }
.cmp-row.drift .cmp-v, .cmp-row.drift .ic { color: var(--bad); }

/* orchestration */
.tcard { position: relative; width: min(100%, 19rem); aspect-ratio: 1.6; border-radius: var(--r-md); padding: 18px 20px; color: #eef6f3; background: radial-gradient(circle at 82% 52%, transparent 0 22%, rgba(255,255,255,0.0) 22%), repeating-radial-gradient(circle at 82% 52%, rgba(255,255,255,0.16) 0 1px, transparent 1px 7px), linear-gradient(135deg, #0f4a40, #0a2a25); box-shadow: 0 18px 36px rgba(10, 40, 34, 0.28); transform: rotate(-4deg); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.tc-brand { font: 500 1.1rem/1 var(--font-mono); letter-spacing: 0.28em; }
.tc-kind { font-size: 0.9rem; opacity: 0.85; }
.tc-num { font: 500 0.95rem/1 var(--font-mono); letter-spacing: 0.12em; align-self: flex-end; }
.crumbs { list-style: none; margin: 4px 0 0; padding: 0; display: flex; align-items: center; width: min(100%, 22rem); }
.crumbs li { position: relative; flex: 1; text-align: center; padding-top: 18px; font: 400 var(--fs-label)/1 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.crumbs li::before { content: ""; position: absolute; top: 3px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--accent); z-index: 1; }
.crumbs li + li::after { content: ""; position: absolute; top: 7px; left: -50%; width: 100%; height: 1px; background: var(--accent); opacity: 0.45; }
.meths { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.meths li { background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 4px 11px; font-size: 0.82rem; font-weight: 500; }

/* reconciliation */
.rec3 { width: min(100%, 22rem); display: flex; justify-content: space-between; position: relative; padding-top: 4px; }
.rec3::before { content: ""; position: absolute; top: 14px; left: 16%; right: 16%; border-top: 1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent); }
.rec-node { position: relative; flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rec-node i { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); z-index: 1; }
.rec-node span { margin-top: 8px; color: var(--muted); font-size: 0.82rem; }
.rec-node b { font: 500 1rem/1 var(--font-mono); }
.learn { width: min(100%, 22rem); background: var(--card); border: 1px dashed var(--rule); border-radius: 16px; padding: 12px 16px; }
.learn p { margin: 0; font-size: 0.9rem; }

/* enforcement */
.enf { width: min(100%, 22rem); display: grid; gap: 8px; }
.enf-row { display: flex; align-items: center; gap: 12px; border-radius: 16px; padding: 12px 16px; background: var(--card); border: 1px solid var(--rule); }
.enf-row .ic { width: 20px; height: 20px; flex: none; color: var(--accent); }
.enf-row b { display: block; font-weight: 600; font-size: 0.9rem; }
.enf-row small { display: block; font-size: 0.82rem; color: var(--muted); }
.enf-row em { margin-left: auto; font: 500 var(--fs-label)/1 var(--font-mono); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 5px 9px; }
.enf-row.decision { border-color: var(--accent); box-shadow: var(--shadow); }
.enf-row.agent { opacity: 0.62; border-style: dashed; margin-inline: 14px; }
.enf-row.agent .ic { color: var(--muted); }

@media (max-width: 900px) { .jobs { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .cmp-row { grid-template-columns: 5.6rem minmax(0, 1fr) 18px; padding-inline: 12px; } }

/* use cases */
.ucs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.uc { background: var(--surface); border-radius: var(--r-lg); padding: var(--pad-lg); min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.uc .ic.big { width: 44px; height: 44px; padding: 10px; background: var(--card); border-radius: 12px; box-shadow: var(--shadow); stroke-width: 1.6; margin-bottom: 18px; }
.uc .tag { display: inline-block; font: 500 0.68rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 6px 10px; margin-bottom: 14px; }
.uc .tag.later { background: none; color: var(--muted); border: 1px dashed var(--muted); }
.uc h3 { font: 500 1.3rem/1.25 var(--font-body); letter-spacing: -0.015em; margin: 0 0 10px; }
.uc p { margin: 0 0 10px; color: var(--muted); }
.uc p:last-child { margin-bottom: 0; }
.uc .uc-note { font-size: 0.88rem; border-left: 2px solid var(--rule); padding-left: 12px; margin-top: auto; padding-top: 2px; }
.uc .uc-note b { color: var(--fg); font-weight: 500; }
.uc .uc-link { margin-top: auto; font-weight: 500; }
.uc-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.uc-text { display: flex; flex-direction: column; align-items: flex-start; }
.uc-viz { display: grid; gap: 16px; min-width: 0; }
.chain { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.chain li { position: relative; display: flex; flex-direction: column; gap: 8px; background: var(--card); border-radius: var(--r-md); padding: 14px; min-width: 0; }
.chain li:not(:last-child)::after { content: ""; position: absolute; right: -15px; top: 50%; width: 9px; height: 9px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); transform: translateY(-50%) rotate(45deg); }
.chain .ic { color: var(--accent); }
.chain li.me { background: var(--accent); color: var(--bg); }
.chain li.me .ic { color: var(--bg); }
.chain b { display: block; font-weight: 600; font-size: 0.92rem; line-height: 1.25; }
.chain small { display: block; font-size: 0.8rem; line-height: 1.35; opacity: 0.8; }
.uc .recv { margin: 4px 0 -6px; }
.uc .m-card { margin: 0; max-width: 22rem; }
.inplace { border-top: 1px solid var(--rule); padding-top: 16px; }
.inplace .sub-h { margin-bottom: 10px; }
.inplace ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.inplace li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.93rem; color: var(--muted); }
.inplace li b { color: var(--fg); font-weight: 600; }
.inplace .ic { color: var(--accent); width: 18px; height: 18px; margin-top: 3px; stroke-width: 2.2; }
@media (max-width: 900px) {
  .site .s-hero-c .wrap { grid-template-columns: minmax(0, 1fr); }
  .ucs { grid-template-columns: minmax(0, 1fr); }
  .uc-wide { grid-template-columns: minmax(0, 1fr); }
  .chain { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .chain li:not(:last-child)::after { right: auto; left: 50%; top: auto; bottom: -15px; transform: translateX(-50%) rotate(135deg); }
}/* the control loop */

/* forms */
.form-card { background: var(--surface); border-radius: var(--r-lg); padding: var(--pad-lg); min-width: 0; }
.lead-form { display: grid; gap: 18px; position: relative; }
.lead-form .fields { gap: 16px; }
.lead-form .field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.lead-form label { display: block; font-size: 0.88rem; font-weight: 500; }
.lead-form input:not([type=hidden]), .lead-form textarea, .lead-form select { font: 400 0.95rem/1.4 var(--font-body); color: var(--fg); background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 11px 14px; width: 100%; }
.lead-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.lead-form textarea { resize: vertical; min-height: 5.5rem; }
.lead-form input:focus, .lead-form textarea:focus, .lead-form select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.lead-form [aria-invalid="true"] { border-color: var(--bad); }
.lead-form ::placeholder { color: var(--muted); opacity: 0.8; }
.err { margin: 0; color: var(--bad); font-size: 0.85rem; }
.err[hidden], .form-error[hidden], .form-done[hidden], .lead-form[hidden] { display: none; }
.form-error { margin: 0; background: var(--bad-soft); color: var(--bad); border-radius: 12px; padding: 12px 14px; font-size: 0.93rem; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.lead-form button.btn-primary { cursor: pointer; }
.lead-form button.btn-primary[aria-disabled="true"] { opacity: 0.65; cursor: progress; filter: none; }
.status { margin: 0; color: var(--muted); font-size: 0.9rem; }
.form-note { margin: -4px 0 0; color: var(--muted); font-size: 0.82rem; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-done { text-align: left; padding: 8px 0; }
.form-done .ic.big { display: block; width: 44px; height: 44px; padding: 10px; background: var(--accent-soft); border-radius: 12px; stroke-width: 2; margin-bottom: 18px; }
.form-done h3 { font: 400 clamp(1.5rem, 2.6vw, 1.9rem)/1.15 var(--font-body); letter-spacing: -0.025em; margin: 0 0 10px; }
.form-done h3:focus { outline: none; }
.form-done p { margin: 0; color: var(--muted); }
@media (min-width: 901px) { #partner .form-card { order: -1; } #partner .contact-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }

@media (max-width: 480px) {
  .site .site-nav.links { gap: 14px; font-size: 0.85rem; }
}

/* ===================== design review pass ===================== */

/* Type floor: the smallest text on the page is 12px. */
:root { --fs-label: 0.75rem; --tap: 44px; }
.kicker, .eco-h, .arr span, .mini header, .who, .sub-h, .uc .tag, .replay, .fin-table th, .m-opt em, .lock, .ledger header, .lane .tag, .m-badge { font-size: var(--fs-label); }
.lock { letter-spacing: 0.06em; }

/* Header: 44px targets; one row on small screens with a menu button */
.site .site-nav a { display: inline-flex; align-items: center; min-height: var(--tap); }
.hbtn { display: inline-flex; align-items: center; min-height: var(--tap); padding-block: 0; }
.site .btn-icon { width: var(--tap); height: var(--tap); padding: 0; }
.wordmark { display: inline-flex; align-items: center; min-height: var(--tap); }
.site .site-head .wrap { padding: 10px 0; }
.menu-btn .m-close { display: none; }
.site-head.menu-open .menu-btn .m-open { display: none; }
.site-head.menu-open .menu-btn .m-close { display: inline; }
.menu-btn { display: none; }
@media (max-width: 900px) {
  .has-menu .menu-btn:not([hidden]) { display: inline-grid; }
  .has-menu .site-head .site-nav.links { display: none; }
  .has-menu .site-head.menu-open .site-nav.links { display: flex; flex-direction: column; align-items: stretch; gap: 0; order: 3; width: 100%; padding: 4px 0 12px; border-top: 1px solid var(--rule); overflow: visible; }
  .has-menu .site-head.menu-open .site-nav.links a { min-height: 48px; font-size: 1rem; border-bottom: 1px solid var(--rule); }
  .site .site-head .wrap { flex-wrap: wrap; }
  .site-actions { margin-left: auto; }
}
@media (max-width: 400px) {
  .site .site-actions { gap: 6px; }
  .hbtn { padding-inline: 14px; }
}

/* Touch targets */
.faq summary { padding-block: 14px; list-style-position: inside; }
.faq details { padding: 0; }
.uc .uc-link a { display: inline-flex; align-items: center; min-height: var(--tap); }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 20px; }
.foot-links a { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); }
.s-foot .wrap { align-items: center; }

/* Hero proof card */
.
/* Sam walkthrough: the declined step is the key moment */

.key-tag { display: inline-block; margin-left: 8px; font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--bad); background: var(--bad-soft); border-radius: 999px; padding: 5px 9px; vertical-align: 1px; }/* "Go deeper" disclosure for the limits chart */
/* Trust: use the full width instead of a narrow left column */

.faq { max-width: none; }
.faq-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 56px; align-items: start; }
.faq details { border-top: 0; border-bottom: 1px solid var(--rule); }
.faq details:first-of-type { border-top: 1px solid var(--rule); }
@media (min-width: 901px) {
  .faq-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

/* Form sections: fill the empty column with what happens next */
.next { margin-top: 28px; max-width: 28rem; }
.next ol { list-style: none; margin: 0; padding: 0; counter-reset: nx; display: grid; gap: 14px; }
.next li { counter-increment: nx; position: relative; padding-left: 40px; color: var(--muted); font-size: 0.95rem; }
.next li::before { content: counter(nx); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font: 500 0.8rem/1 var(--font-mono); }
.next li b { color: var(--fg); font-weight: 600; }
.hero-proof-cap a { display: inline-block; padding-block: 11px; margin-block: -11px; }/* copy pass: quieter early-access note, caveats as a disclosure, hero outcome rows */

.inplace > summary { display: flex; align-items: center; min-height: var(--tap); cursor: pointer; color: var(--accent); font-weight: 500; width: fit-content; border-radius: 6px; }
.inplace[open] > summary { margin-bottom: 8px; }
.inplace > summary::after { content: ""; width: 7px; height: 7px; margin-left: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.inplace[open] > summary::after { transform: rotate(225deg); }
.inplace > summary::-webkit-details-marker { display: none; }

/* activity view: selected row and record detail */
.fin-table tr.sel td { background: var(--accent-soft); }
.rec-detail .m-row b.mono { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 500; }
.fin-table tr.sel .st.ok { background: var(--card); }

/* ===================== narrative: problem, solution, toolkit, governance ===================== */
.site .s-hero-c h1 { max-width: 20ch; font-size: clamp(2.2rem, 4.2vw, 3.4rem); line-height: 1.06; letter-spacing: -0.04em; }
.site .site-nav.links { gap: 22px; }

/* problem: one integration per provider */
.prob { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.6fr); align-items: center; background: var(--surface); border-radius: var(--r-lg); padding: var(--pad-lg); }
.prob-agent { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 22px 16px; text-align: center; box-shadow: var(--shadow); }
.prob-agent .ic { display: block; margin: 0 auto 8px; color: var(--accent); width: 26px; height: 26px; }
.prob-agent b { display: block; font-weight: 600; }
.prob-agent small, .prob-box small { display: block; color: var(--muted); font-size: 0.82rem; line-height: 1.4; }
.prob-rows { position: relative; display: grid; gap: 12px; margin-left: 44px; padding-left: 56px; }
.prob-rows::before { content: ""; position: absolute; left: 0; top: 30px; bottom: 30px; border-left: 1.5px dashed var(--muted); }
.prob-rows::after { content: ""; position: absolute; left: -44px; width: 44px; top: 50%; border-top: 1.5px dashed var(--muted); }
.prob-row { position: relative; display: flex; align-items: center; }
.prob-row .wire { position: absolute; left: -56px; width: 56px; top: 50%; border-top: 1.5px dashed var(--muted); }
.prob-box { display: flex; gap: 12px; align-items: center; width: 100%; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 14px 16px; }
.prob-box .ic { color: var(--muted); }
.prob-box b { display: block; font-weight: 600; font-size: 0.95rem; }
.prob-tags { margin-top: 18px; justify-content: flex-start; }
.prob-tags li { background: var(--chip); color: var(--muted); }

/* solution: one integration */
.arch { background: var(--surface); border-radius: var(--r-lg); padding: var(--pad-lg); display: grid; gap: 12px; }
.arch b { display: block; font-weight: 600; font-size: 0.95rem; line-height: 1.3; }
.arch small { display: block; color: var(--muted); font-size: 0.82rem; line-height: 1.4; }
.arch .ic { display: block; margin: 0 auto 6px; color: var(--accent); width: 22px; height: 22px; }
.arch-agent { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 16px; text-align: center; }
.arch-arrow { justify-self: center; position: relative; width: 1.5px; height: 22px; background: color-mix(in srgb, var(--accent) 60%, transparent); }
.arch-arrow::after { content: ""; position: absolute; bottom: -1px; left: -3.5px; width: 8px; height: 8px; border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(45deg); }
.arch-dore { background: var(--accent); color: var(--bg); border-radius: var(--r-lg); padding: 22px 18px 18px; text-align: center; }
.arch-name { font: 500 1.9rem/1 var(--font-mono); letter-spacing: 0.28em; margin: 0 0 16px 0.28em; }
.arch-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.arch-two > div { background: var(--card); color: var(--fg); border-radius: var(--r-md); padding: 14px 10px; }
.arch-dore p { margin: 14px 0 0; font-size: 0.9rem; opacity: 0.92; }
.arch-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.arch-three > div { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 14px 8px; text-align: center; }
.arch-cap { margin: 4px 0 0; text-align: center; color: var(--muted); font-size: 0.82rem; }
.sol-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 22px; }
.sol-steps li { counter-increment: s; position: relative; padding-left: 48px; }
.sol-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--bg); display: grid; place-items: center; font: 500 0.9rem/1 var(--font-mono); }
.sol-steps b { display: block; font-weight: 600; margin-bottom: 3px; }
.sol-steps span { color: var(--muted); font-size: 0.95rem; line-height: 1.5; }

/* toolkit + governance cards */
.jobs.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.jobs.three .job-h h3 { font-size: 1.2rem; }
.jobs.three .job-d { font-size: 0.98rem; }
.job + .cap, .jobs + .cap { margin-top: 18px; }
@media (max-width: 1000px) { .jobs.three { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
    .prob { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .prob-rows { margin-left: 0; padding-left: 28px; }
  .prob-rows::after { display: none; }
  .prob-row .wire { left: -28px; width: 28px; }
  .prob-rows::before { top: 24px; bottom: 24px; }
}
@media (max-width: 480px) { .arch-three, .arch-two { grid-template-columns: minmax(0, 1fr); } }

/* payment toolkit: a board across the life of a payment */
.tk-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.05fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.tk-sh { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.tk-n { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--bg); font: 500 0.95rem/1 var(--font-mono); }
.tk-sh h3 { font: 600 1.1rem/1.25 var(--font-body); margin: 0; letter-spacing: -0.01em; }
.tk-sh p { margin: 2px 0 0; color: var(--muted); font-size: 0.9rem; }
.tk-list { display: grid; gap: 12px; }
.tk-list.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tk { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tk.wide { grid-column: 1 / -1; }
.tk header { display: flex; align-items: center; gap: 10px; }
.tk-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--card); box-shadow: var(--shadow); color: var(--accent); }
.tk-ic .ic { width: 18px; height: 18px; stroke-width: 1.6; }
.tk h4 { font: 600 1rem/1.25 var(--font-body); margin: 0; letter-spacing: -0.01em; }
.tk-tag { margin-left: auto; flex: none; font: 500 var(--fs-label)/1 var(--font-mono); letter-spacing: 0.04em; font-style: normal; color: var(--muted); border: 1px dashed var(--muted); border-radius: 999px; padding: 4px 8px; white-space: nowrap; }
.tk p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.tk-ex { margin-top: auto; background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 8px 12px; font: 400 0.78rem/1.4 var(--font-mono); color: var(--fg); overflow-wrap: anywhere; }
.std { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.std li { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 10px 12px; }
.std b { display: block; font: 500 0.95rem/1.2 var(--font-mono); color: var(--accent); margin-bottom: 3px; }
.std span { display: block; font-size: 0.8rem; line-height: 1.35; color: var(--muted); }
@media (max-width: 1100px) {
  .tk-board { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .tk-stage:not(:last-child) .tk-sh::after,   .tk-list.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .std { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) { .tk-list.two { grid-template-columns: minmax(0, 1fr); } }

/* solution diagram: stablecoins and open standards */
.arch-three.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.arch-three.four > div { padding: 12px 6px; }
.arch-three .planned { border-style: dashed; }
.arch-std { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; background: var(--card); border: 1px dashed var(--rule); border-radius: var(--r-md); padding: 10px 14px; }
.arch-std-k { font: 500 var(--fs-label)/1.3 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.arch-std-k em { font-style: normal; text-transform: none; letter-spacing: 0; margin-left: 6px; border: 1px dashed var(--muted); border-radius: 999px; padding: 2px 7px; }
.arch-std ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.arch-std li { background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 3px 10px; font: 500 0.8rem/1.3 var(--font-mono); }
@media (max-width: 480px) { .arch-three.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* faq as its own section; use-case demo line */
.faq { margin-top: 0; }
.uc-note + 
/* use-case diagrams */
.uc-ill { margin-top: auto; padding-top: 20px; width: 100%; }
.uc .uc-note + .uc-ill { padding-top: 14px; }
.mflow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mflow li { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 8px 12px; font-size: 0.82rem; font-weight: 500; line-height: 1.3; }
.mflow li.me { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.mflow li.ar { background: none; border: 0; padding: 0 1px; color: var(--accent); font-size: 1rem; }
.uc-fine { margin: 10px 0 0; font-size: 0.82rem; color: var(--muted); }
.cmp-row.two { grid-template-columns: 8.5rem minmax(0, 1fr); }
.cmp-row.two .cmp-v { display: inline-flex; align-items: center; gap: 6px; }
.cmp-row .cmp-v.bad, .cmp-row .cmp-v.bad .ic { color: var(--bad); }
.cmp-row.two .cmp-v .ic { width: 16px; height: 16px; stroke-width: 2.2; }
.uc .cmp { width: 100%; max-width: 26rem; box-shadow: none; }
@media (max-width: 560px) {
    }

/* ===================== design review round 3 ===================== */

/* hero: centred, no illustration */
.site .s-hero-c { padding-block: clamp(56px, 9vw, 112px) clamp(48px, 7vw, 88px); }
.site .s-hero-c .wrap { display: block; text-align: center; }
.site .s-hero-c h1 { margin-inline: auto; max-width: 22ch; font-size: clamp(2.3rem, 5vw, 4rem); letter-spacing: -0.04em; }
.site .s-hero-c .sub { margin-inline: auto; max-width: 40rem; }
.site .s-hero-c .cta { justify-content: center; }

/* nav: partnership link only inside the small-screen menu */
.nav-extra { display: none !important; }
@media (max-width: 480px) { .nav-extra { display: inline-flex !important; } }

/* one pill: same shape, size and type everywhere; variants for soft, outline and status */
.uc .tag, .tk-tag, .m-badge, .enf-row em, .arch-std-k em, .st, .meths li, .arch-std li, .pill {
  display: inline-flex; align-items: center; font: 500 12px/1 var(--font-body); letter-spacing: 0; text-transform: none; font-style: normal;
  padding: 5px 10px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; margin-bottom: 0;
}
.uc .tag, .m-badge, .enf-row em, .meths li, .arch-std li, .pill { background: var(--accent-soft); color: var(--accent); }
.tk-tag, .arch-std-k em, .pill.outline, .uc .tag.later { background: none; color: var(--muted); border: 1px dashed var(--muted); }
.arch-std li { font-family: var(--font-mono); }
.uc .tag { margin-bottom: 14px; }
.arch-std-k em { margin-left: 6px; padding: 3px 8px; }

/* before / after */
.ba { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.ba-card { background: var(--surface); border-radius: var(--r-lg); padding: var(--pad-lg); display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ba-card > .pill { align-self: flex-start; }
.ba-card.before { justify-content: space-between; }
.ba .prob { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; background: none; padding: 0; margin: auto 0; }
.ba .prob-agent { box-shadow: none; }
.ba .prob-tags { margin-top: 0; }
.ba-card.after .arch { background: none; padding: 0; }
.sol-steps { margin-top: 36px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 900px) { .ba { grid-template-columns: minmax(0, 1fr); } .sol-steps { grid-template-columns: minmax(0, 1fr); margin-top: 28px; } }

/* governance */
.gov-label { margin: 40px 0 14px; font: 500 var(--fs-label)/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* one-line example snippets */
.tk-ex { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* use cases */
.uc-agents { margin-top: 12px; justify-content: flex-start; }
.cmp-row.two.cmp-head { background: var(--chip); }
.cmp-row.two.cmp-head .cmp-k { font-weight: 500; color: var(--fg); }
.cmp-row.two .cmp-v .st, .cmp-row.two .cmp-v .pill { margin: 0; }

/* faq: two ordered columns */
.faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; align-items: start; }
.faq-col { display: block; min-width: 0; }
.faq-col details { border-top: 0; border-bottom: 1px solid var(--rule); }
.faq-col details:first-child { border-top: 1px solid var(--rule); }
@media (max-width: 900px) { .faq-list { grid-template-columns: minmax(0, 1fr); } .faq-col + .faq-col details:first-child { border-top: 0; } }

/* activity table: stacked cards on small screens */
@media (max-width: 640px) {
  .canvas.fin { padding: 12px; }
  .fin-table .tscroll { overflow: visible; }
  .fin-table table { min-width: 0; display: block; }
  .fin-table thead { display: none; }
  .fin-table tbody { display: grid; gap: 10px; padding: 12px; }
  .fin-table tr { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; background: var(--card); }
  .fin-table td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--rule); min-width: 0; }
  .fin-table td:first-child { display: block; background: var(--chip); font-weight: 500; }
  .fin-table td[data-label]::before { content: attr(data-label); flex: none; color: var(--muted); font-size: 0.8rem; }
  .fin-table td:last-child { border-bottom: 0; }
  .fin-table td.num { text-align: right; }
  .fin-table tr.sel { border-color: var(--accent); }
  .fin-table tr.sel td:first-child { background: var(--accent-soft); }
  .fin-table td:first-child { min-width: 0; }
}
.ba .prob-tags li { background: var(--chip); color: var(--muted); }
@media (max-width: 640px) { .fin-table td[data-label] { text-align: right; } }

/* without DORE: one line from the agent to every provider */
.ba .prob-rows { margin-left: 0; padding-left: 42px; gap: 14px; }
.ba .prob-rows::before { left: 14px; top: -18px; bottom: 36px; }
.ba .prob-rows::after { display: none; }
.ba .prob-row .wire { left: -28px; width: 28px; }