/* The Living Substrate — FROM-SCRATCH layout = the design/11 §4.0 four-region application shell
   (top banner · left icon rail · generative canvas · agent conversation rail). Colour theme + the
   64-byte hex motif preserved from design/27; only the layout is new. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0a0a0a; color: #c9d2e6;
  font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ===== TYPOGRAPHY HIERARCHY (founder 2026-07-02, cold-visitor clarity bar) =====
   SANS = the story, MONO = the instrument reading. The body stays monospace by default so every
   number, metric tile, dataset name, hex dump and provenance line reads as an instrument. PROSE, the
   headings, page intros, narration and honest footers, switches to a proportional system sans so the
   so-what pops and the site stops reading engineers-only. No new colours; the single red accent + the
   band colours are untouched. One variable so the sans stack lives in one place. */
:root { --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.land-h1, .land-sub, .land-claim-d, .arch-h2, .arch-p,
.sub-card-h, .sub-note, .demo-msg, .demo-honest,
.ov-legend, .ov-legend-note, .sc-adv, .arch-fam-d,
.mx-did, .mx-ram-t, .mx-explain-h, .mx-explain-p,
.demo-intro-line, .demo-intro-vary, .proof-h-l, .proof-cap,
.login-disabled, .key-warn, .demo-killshot-us, .demo-killshot-them {
  font-family: var(--sans);
}
/* keep the numeric instrument readings monospace even inside a sans prose container */
.mx-explain-p b, .demo-intro-line b, .demo-honest b { font-family: inherit; }

.sub {
  display: grid;
  height: 100vh;
  grid-template-columns: 208px 1fr 340px;  /* grouped nav-rail · canvas · agent */
  grid-template-rows: 44px 1fr;            /* banner · body */
  grid-template-areas:
    "banner banner banner"
    "iconrail canvas agent";
  transition: grid-template-columns .18s cubic-bezier(.4,0,.2,1);
}

/* ── left-nav MINIMISE — Hooks.ShellChrome toggles these classes on #sub-shell (client-side, localStorage) ── */
.sub--navmin { grid-template-columns: 52px 1fr 340px; }   /* icon-only rail */
.sub--cinema { grid-template-columns: 0 1fr 340px; }      /* rail hidden, graph hero edge-to-edge */
.sub--navmin .sub-nav { padding: 10px 4px; overflow: hidden; }
.sub--navmin .sub-nav-t { display: none; }                /* hide item labels */
.sub--navmin .sub-nav-h { display: none; }                /* hide group headers */
.sub--navmin .sub-nav-i { justify-content: center; padding: 0; gap: 0; }
.sub--navmin .sub-nav .sub-presence span { display: none; }
.sub-navtoggle { height: 24px; width: 28px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid #202020; border-radius: 6px; color: #9a9a9a; cursor: pointer;
  font-size: 13px; padding: 0; line-height: 1; }
.sub-navtoggle:hover { border-color: #DE3122; color: #ECECEC; }

/* ── these two chrome affordances are mobile-only; hidden on desktop ── */
.sub-agenttoggle { display: none; }
.sub-scrim { display: none; }

/* ── MOBILE (<=640px): agent-first single-column reflow (design/11 §mobile). Nav becomes a left
   off-canvas drawer, the agent becomes a persistent bottom input dock, the canvas is the page. ── */
@media (max-width: 640px) {
  html, body { overflow-x: hidden; }
  .sub {
    height: 100dvh;                        /* dvh, not vh, so the URL bar does not clip it */
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;          /* banner (safe-area aware) · canvas; agent+nav are fixed overlays */
    grid-template-areas: "banner" "canvas";
    transition: none;
  }

  /* (1) banner: keep brand + hamburger + red Contact CTA; drop the rest */
  .sub-banner { gap: 10px; padding: 0 12px; min-height: 44px; padding-top: env(safe-area-inset-top); }
  .sub-vitals, .sub-cmdk, .sub-mesh, .sub-zk { display: none !important; }
  .sub-navtoggle { display: flex; }

  /* (2) nav: off-canvas left drawer, default closed */
  .sub-nav {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    width: 82vw; max-width: 320px;
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.4,0,.2,1);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: #0b0b0b; border-right: 1px solid #1a1a1a;
    padding: calc(12px + env(safe-area-inset-top)) 8px 20px;
  }
  .sub--navopen .sub-nav { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.6); }
  /* always show full labels/headers in the drawer, even if desktop left the rail minimised */
  .sub-nav-t, .sub-nav-h { display: block !important; }
  .sub-nav-i { min-height: 44px; padding: 0 10px !important; justify-content: flex-start !important; gap: 9px !important; }
  .sub-scrim {
    display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.55);
    opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  .sub--navopen .sub-scrim { opacity: 1; pointer-events: auto; }

  /* (3) canvas: the scrolling page column; leave room for the bottom dock */
  .sub-canvas-wrap { overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

  /* (4) agent: persistent bottom input dock; collapsed = the input only, tap the bar to open the log */
  .sub-agent {
    position: fixed; left: 0; right: 0; bottom: var(--kb, 0px); z-index: 50;
    border-left: none; border-top: 1px solid #1a1a1a;
    padding-bottom: env(safe-area-inset-bottom);
    background: #0d0d0d; max-height: 42dvh; overflow: hidden;
    display: flex; flex-direction: column;
  }
  .sub-agenttoggle {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    order: -1; flex: none; height: 30px;
    background: #0b0b0b; border: none; border-bottom: 1px solid #161616;
    color: #9a9a9a; font: inherit; font-size: 11px; letter-spacing: 2px; cursor: pointer;
  }
  /* collapsed: hide everything but the toggle bar + the input */
  .sub-agent > .sub-agent-h,
  .sub-agent > .sub-agent-log,
  .sub-agent > .sub-hint,
  .sub-agent > .sub-egs { display: none; }
  .sub--agentopen .sub-agent { max-height: 82dvh; }
  .sub--agentopen .sub-agent > .sub-agent-h,
  .sub--agentopen .sub-agent > .sub-hint,
  .sub--agentopen .sub-agent > .sub-egs { display: block; }
  .sub--agentopen .sub-agent > .sub-agent-log { display: block; flex: 1; overflow-y: auto; min-height: 0; }
  .sub-input { order: 10; }               /* input pinned to the bottom of the dock */
  .sub-input textarea { font-size: 16px !important; }/* >=16px prevents iOS zoom-on-focus (beats the later base rule) */
}

/* ── (1) top trust/status banner ── */
.sub-banner { grid-area: banner; display: flex; align-items: center; gap: 16px;
  padding: 0 16px; border-bottom: 1px solid #1a1a1a; background: #0d0d0d; }
.sub-brand { letter-spacing: 3px; color: #DE3122; font-weight: 700; }
.sub-zk { color: #DE3122; font-size: 12px; cursor: pointer; opacity: 0.85; }
.sub-vitals { color: #8b97b4; font-size: 12px; }
.sub-vitals b { color: #EDEDED; }
.sub-spacer { flex: 1; }
.sub-undo { height: 24px; padding: 0 10px; background: #0c1626; border: 1px solid #25324a;
  border-radius: 6px; color: #9fb4d8; cursor: pointer; font: inherit; font-size: 12px; }
.sub-undo:disabled { opacity: 0.4; cursor: default; }
.sub-cmdk { padding: 2px 8px; border: 1px solid #202020; border-radius: 5px; color: #9a9a9a; font-size: 11px; }
.sub-mesh { color: #9a9a9a; font-size: 12px; }

/* ── (2) left icon rail = the SPACE anchor ── */
.sub-iconrail { grid-area: iconrail; display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 12px 0; border-right: 1px solid #1a1a1a; background: #0b0b0b; }
.sub-ico { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border: 1px solid #181818; border-radius: 9px; color: #9a9a9a; font-size: 18px; cursor: pointer; }
.sub-ico:hover { border-color: #DE3122; color: #ECECEC; }
.sub-ico-on { border-color: #DE3122; color: #DE3122; background: #101010; }
.sub-iconrail-sp { flex: 1; }
.sub-presence { color: #10B981; font-size: 12px; }

/* ── (3) the generative canvas (the hero) ── */
.sub-canvas-wrap { grid-area: canvas; position: relative; overflow: hidden; background: #0a0a0a;
  display: flex; flex-direction: column; }
.sub-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }

/* live-graph hero band pinned at the top of the scrolling canvas column (the center pillar default) */
.sub-graphstage { position: relative; height: 340px; min-height: 340px; margin: 0 0 18px;
  border: 1px solid #161616; border-radius: 12px; overflow: hidden; background: #06080e; }
.sub-graphstage .sub-canvas { position: absolute; inset: 0; cursor: grab; }
.sub-graphstage-warm { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #6a6a80; letter-spacing: .5px; font-size: 13px; pointer-events: none; padding: 0 24px; text-align: center; }
.sub-graphstage-cap { position: absolute; left: 12px; bottom: 10px; right: 12px; color: #8a93b4;
  font-size: 11px; letter-spacing: .3px; pointer-events: none;
  text-shadow: 0 1px 6px rgba(0,0,0,.9); }
.sub-graphstage-cap b { color: #dfe6ff; font-weight: 600; }
.sub-live-dot { color: #10B981; animation: sub-pulse 1.8s ease-in-out infinite; }
@keyframes sub-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* live recent-transactions table under the graph (real mainnet txs feeding the value-flow graph) */
.eth-txtable { margin: 0 0 20px; border: 1px solid #161616; border-radius: 10px; overflow: hidden; background: #0a0a0a; }
.eth-txtable-h { padding: 8px 12px; border-bottom: 1px solid #161616; color: #8a93b4; font-size: 11px; letter-spacing: .3px; }
.eth-txt { width: 100%; border-collapse: collapse; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; }
.eth-txt td { padding: 5px 10px; border-bottom: 1px solid #121212; color: #b7bdcc; white-space: nowrap; }
.eth-txt tr:last-child td { border-bottom: none; }
.eth-txt-blk { color: #6a728a; }
.eth-txt-addr { color: #9b8cff; }
.eth-txt-arrow { color: #4a5068; padding: 5px 2px !important; }
.eth-txt-val { color: #7ad7ff; text-align: right; }
.eth-txt-gas { color: #6a728a; text-align: right; }
@media (max-width: 640px) { .eth-txt-gas, .eth-txt-blk { display: none; } .eth-txt { font-size: 10.5px; } }
.sub-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #6a6a6a; pointer-events: none; letter-spacing: 1px; }
/* lenses float over the canvas (top-left) */
.sub-lenses { position: absolute; top: 14px; left: 14px; display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; background: rgba(8,11,20,0.72); border: 1px solid #1a1a1a; border-radius: 9px;
  backdrop-filter: blur(6px); }
.sub-lens-h { color: #707070; letter-spacing: 2px; font-size: 10px; margin-right: 2px; }
.sub-lens { padding: 4px 9px; border: 1px solid #202020; border-radius: 6px; color: #98a4c4;
  cursor: pointer; font: inherit; font-size: 11px; background: transparent; }
.sub-lens:hover { border-color: #DE3122; }
.sub-lens-on { border-color: #DE3122; color: #ECECEC; background: #101010; }

/* ── (4) the agent conversation rail — "the input IS the agent" ── */
.sub-agent { grid-area: agent; display: flex; flex-direction: column; min-height: 0;
  border-left: 1px solid #1a1a1a; background: #0d0d0d; }
.sub-agent-h { padding: 12px 14px 10px; color: #707070; letter-spacing: 2px; font-size: 11px;
  border-bottom: 1px solid #161616; }
.sub-agent-h span { color: #9a9a9a; letter-spacing: 0; margin-left: 6px; }
.sub-agent-log { flex: 1; min-height: 0; overflow: auto; padding: 12px 14px; }
.sub-card { border: 1px solid #181818; border-radius: 9px; background: #0b0b0b; padding: 12px; margin-bottom: 10px; }
.sub-card-h { color: #ECECEC; font-weight: 600; margin-bottom: 8px; }
.sub-kv { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid #161616; }
.sub-kv span { color: #9a9a9a; }
.sub-kv b { color: #EDEDED; font-weight: 600; }
.sub-note { margin-top: 12px; color: #6a6a6a; font-size: 12px; }
.sub-hexh { margin: 14px 0 6px; color: #707070; letter-spacing: 2px; font-size: 11px; }
.sub-hex { margin: 0; padding: 8px; background: #080808; border: 1px solid #181818; border-radius: 6px;
  color: #9a9a9a; font-size: 11px; white-space: pre; overflow: auto; }
.sub-ribbon { color: #9a9a9a; font-size: 12px; padding: 8px 2px; border-top: 1px solid #161616; }
.sub-input { display: flex; gap: 8px; align-items: stretch; padding: 10px 12px; border-top: 1px solid #1a1a1a; }
.sub-input input, .sub-input textarea { flex: 1; min-height: 32px; padding: 8px 12px; background: #080808; border: 1px solid #202020;
  border-radius: 8px; color: #EDEDED; font: inherit; }
.sub-input textarea { min-height: 66px; line-height: 1.4; resize: vertical; }
.sub-input input::placeholder, .sub-input textarea::placeholder { color: #4f5a78; }
.sub-input button { width: 40px; min-height: 32px; align-self: stretch; background: #123047; border: 1px solid #DE3122;
  border-radius: 8px; color: #ECECEC; cursor: pointer; font: inherit; }

/* ── shared controls (tombstone / confirm) — reused across layouts ── */
.ls-del { margin-top: 12px; width: 100%; height: 28px; background: #2a1014; border: 1px solid #DE3122;
  border-radius: 6px; color: #ff6b5e; cursor: pointer; font: inherit; font-size: 12px; }
.ls-del:hover { background: #3a151b; }
.ls-confirm { display: flex; align-items: center; gap: 8px; padding: 10px 12px; flex-wrap: wrap;
  background: #1c0e12; border-top: 1px solid #5a1c28; color: #ffc2cb; font-size: 12px; }
.ls-intent { padding: 2px 8px; border-radius: 4px; font-weight: 700; font-size: 10px; letter-spacing: 0.5px; }
.ls-red { background: #DE3122; color: #fff; }
.ls-confirm-y { height: 24px; padding: 0 12px; background: #DE3122; border: 0; border-radius: 5px; color: #fff; cursor: pointer; }
.ls-confirm-n { height: 24px; padding: 0 12px; background: #202020; border: 1px solid #2b3650; border-radius: 5px; color: #b9c6e2; cursor: pointer; }

/* ── public surfaces (landing · playground · demos · login) — same shell, same theme ── */
.land { max-width: 980px; margin: 0 auto; padding: 56px 40px; overflow-y: auto; flex: 1 1 auto; min-height: 0; width: 100%; box-sizing: border-box; }
/* closing CTA band pinned under the scrolling .land (the whole band is one link to /contact) */
.sub-cta { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 14px;
  flex-wrap: wrap; padding: 13px 22px; text-decoration: none; border-top: 1px solid #ecdcda;
  background: linear-gradient(180deg, #fdf7f6, #fbeeec); color: #7a1f16; }
.sub-cta-t { font-size: 13.5px; font-weight: 500; }
.sub-cta-b { background: #DE3122; color: #fff; padding: 8px 16px; border-radius: 7px; font-weight: 600;
  font-size: 13px; white-space: nowrap; letter-spacing: .2px; }
.sub-cta:hover .sub-cta-b { background: #c41f12; }
.land-h1 { font-size: 30px; line-height: 1.25; color: #ECECEC; font-weight: 650; margin: 0 0 16px; letter-spacing: -0.3px; }
.land-sub { font-size: 14px; color: #c4c4c4; max-width: 720px; margin: 0 0 32px; line-height: 1.6; }
.land-claims { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.land-claim { display: block; padding: 18px; background: #0b0b0b; border: 1px solid #1a1a1a; border-radius: 10px;
  text-decoration: none; transition: border-color .15s, transform .15s; }
.land-claim:hover { border-color: #DE3122; transform: translateY(-2px); }
.land-claim-vs { font-size: 11px; color: #DE3122; letter-spacing: .5px; text-transform: uppercase; }
.land-claim-t { font-size: 16px; color: #ECECEC; margin: 6px 0; font-weight: 600; }
.land-claim-d { font-size: 12px; color: #adadad; line-height: 1.5; min-height: 52px; }
.land-claim-go { font-size: 12px; color: #10B981; margin-top: 10px; }

/* benchmark result metric block */
.demo-metric { background: #0b0b0b; border: 1px solid #1a1a1a; border-radius: 12px; padding: 24px; margin: 8px 0 24px; }
.demo-metric-big { font-size: 52px; font-weight: 700; color: #10B981; line-height: 1; letter-spacing: -1px; }
.demo-metric-big span { font-size: 16px; color: #adadad; font-weight: 500; margin-left: 10px; }
/* cold -> warm -> hot tier label under the headline number (always-show-tiers convention) */
.demo-tier { font-size: 12px; color: #7dd3c0; margin-top: 8px; letter-spacing: .3px; }
/* per-round latency ladder (multi-round demos: cold first round -> warm steady-state) */
.demo-ladder { display: flex; gap: 6px; margin: 10px 0 4px; flex-wrap: wrap; }
.demo-ladder-r { font-size: 11px; color: #adadad; background: #0a0d16; border: 1px solid #1a1a1a; border-radius: 6px; padding: 3px 7px; }
.demo-ladder-r em { color: #7dd3c0; font-style: normal; font-weight: 600; margin-right: 5px; }
.demo-metric-row { display: flex; gap: 32px; margin: 20px 0 12px; flex-wrap: wrap; }
.demo-metric-row div { display: flex; flex-direction: column; }
.demo-metric-row div span { font-size: 22px; color: #ECECEC; font-weight: 600; }
.demo-metric-row div { font-size: 11px; color: #909090; text-transform: uppercase; letter-spacing: .4px; }
.demo-prov { font-size: 12px; color: #DE3122; border-top: 1px solid #131a28; padding-top: 12px; }
.demo-honest { font-size: 12px; color: #adadad; background: #0a0d16; border: 1px solid #1a1a1a; border-left: 2px solid #c79a2f;
  border-radius: 8px; padding: 14px 16px; line-height: 1.6; }

/* SNN island panel: reverse-Island-NEAT accuracy / fitness curve with the 95% gate + chance floor */
.snn-curve { margin: 14px 0 10px; }
.snn-curve-h { font-size: 11px; color: #909090; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }
.snn-svg { width: 100%; height: 90px; background: #070707; border: 1px solid #1a1a1a; border-radius: 8px; }
.snn-poly { fill: none; stroke: #10B981; stroke-width: 2; vector-effect: non-scaling-stroke; }
.snn-poly-mean { fill: none; stroke: #3d6a55; stroke-width: 1.5; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.snn-gate-line { stroke: #DE3122; stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.snn-gate-lab { fill: #DE3122; font-size: 8px; }
.snn-chance-line { stroke: #555555; stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.snn-chance-lab { fill: #777777; font-size: 8px; }

/* agent conversation messages */
.demo-msg { padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.5; margin-bottom: 8px; }
.demo-msg-agent { background: #0b1320; color: #bcd4ef; border: 1px solid #15203200; }
.demo-msg-user { background: #1e1e1e; color: #ECECEC; margin-left: 28px; }

/* playground table */
.demo-table { display: flex; flex-direction: column; gap: 8px; }
.demo-row { display: grid; grid-template-columns: 96px 130px 1fr 150px 64px; align-items: center; gap: 12px;
  padding: 14px 16px; background: #0b0b0b; border: 1px solid #1a1a1a; border-radius: 9px; text-decoration: none; transition: border-color .15s; }
.demo-row:hover { border-color: #DE3122; }
.demo-row-soon { opacity: .5; }
/* coming rows are non-clickable: no pointer, no hover affordance (kept to the row's resting border) */
div.demo-row-soon { cursor: default; }
div.demo-row-soon:hover { border-color: #E5E5E3; }
.demo-row-dom { font-size: 10px; color: #DE3122; text-transform: uppercase; letter-spacing: .5px; }
.demo-row-name { font-size: 14px; color: #ECECEC; font-weight: 600; }
.demo-row-claim { font-size: 12px; color: #adadad; }
.demo-row-vs { font-size: 12px; color: #c4c4c4; }
.demo-row-go { font-size: 12px; color: #10B981; text-align: right; }
.demo-row-soon-go { color: #7a7a7a; font-style: italic; }
/* honest legend under the playground table */
.demo-legend { margin-top: 14px; font-size: 12px; color: #8a8a8a; line-height: 1.6; }
.demo-legend b { color: #adadad; font-weight: 600; }
.demo-legend-live { color: #10B981; font-weight: 600; }
.demo-legend-soon { color: #7a7a7a; font-style: italic; }

/* login */
.login-card { max-width: 360px; background: #0b0b0b; border: 1px solid #1a1a1a; border-radius: 12px; padding: 24px; }
.login-form { display: flex; flex-direction: column; gap: 10px; }
.login-form label { font-size: 11px; color: #909090; text-transform: uppercase; letter-spacing: .4px; }
.login-form input { height: 36px; background: #080808; border: 1px solid #202020; border-radius: 7px; color: #ECECEC; padding: 0 12px; font: inherit; }
.login-form button { height: 36px; background: #1e1e1e; border: 1px solid #DE3122; border-radius: 7px; color: #ECECEC; cursor: pointer; font: inherit; margin-top: 6px; }
.login-form button:hover { background: #1b2d49; }
.login-err { font-size: 12px; color: #ff6b5e; }
.login-disabled { font-size: 13px; color: #c4c4c4; line-height: 1.6; }

/* kill-shot: the disbelief comparison element (founder 2026-06-30, every page a panic trigger) */
.demo-killshot{display:flex;gap:22px;margin:20px 0;padding:16px 18px;border:1px solid #2a2a2a;border-radius:8px;background:#0e0e0e}
.demo-killshot-col{flex:1;min-width:0}
.demo-killshot-lab{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#707070;margin-bottom:6px}
.demo-killshot-them b{color:#DE3122;font-weight:700}
.demo-killshot-them s{color:#8a8a8a}
.demo-killshot-us{color:#ECECEC}
.demo-killshot-us b{color:#10B981;font-weight:700}
.demo-killshot-mag{margin-top:10px;font-weight:700;color:#DE3122;font-size:1.05rem}
.demo-killshot-repro{margin-top:6px;color:#6f6f6f;font-size:.82rem}

/* ===== LIGHT THEME (founder 2026-06-30): semurg-zero look, DARK left rail, LIGHT center + right ===== */
html, body { background:#f6f6f4; color:#2b2b2b; }
.sub-banner { background:#ffffff; border-bottom:1px solid #E5E5E3; }
.sub-mesh { color:#888888; }
.sub-canvas-wrap { background:#f6f6f4; }
.sub-empty { color:#9a9a9a; }
/* left rail STAYS dark (the dark vertical menu) */
.sub-iconrail { background:#191919; border-right:1px solid #2a2a2a; }
.sub-ico { color:#9a9a9a; }
.sub-ico-on { border-color:#DE3122; color:#DE3122; background:#272727; }
/* center: the generative UI panel, light */
.land-h1 { color:#1A1A1A; }
.land-sub { color:#555555; }
.land-claim { background:#ffffff; border:1px solid #E5E5E3; }
.land-claim:hover { border-color:#DE3122; }
.land-claim-t { color:#1A1A1A; }
.land-claim-d { color:#666666; }
.demo-metric { background:#ffffff; border:1px solid #E5E5E3; }
.demo-metric-big span { color:#666666; }
.demo-metric-row div span { color:#1A1A1A; }
.demo-metric-row div { color:#888888; }
.demo-prov { color:#DE3122; border-top:1px solid #ececec; }
.demo-honest { background:#f0f0ee; color:#555555; border:1px solid #E5E5E3; border-left:2px solid #DE3122; }
.demo-killshot { background:#ffffff; border:1px solid #E5E5E3; }
.demo-killshot-lab { color:#888888; }
.demo-killshot-them { color:#555555; }
.demo-killshot-us { color:#1A1A1A; }
.demo-killshot-repro { color:#888888; }
.demo-row { background:#ffffff; border:1px solid #E5E5E3; }
.demo-row-name { color:#1A1A1A; }
.demo-row-claim { color:#666666; }
.demo-row-vs { color:#555555; }
.demo-row-soon-go { color:#999999; }
.demo-legend { color:#888888; }
.demo-legend b { color:#555555; }
.demo-legend-soon { color:#999999; }
/* right: chat / interaction / terminal, light */
.sub-agent { background:#ffffff; border-left:1px solid #E5E5E3; }
.sub-agent-h { color:#888888; }
.sub-agent-h span { color:#555555; }
.sub-card { background:#fafafa; border:1px solid #E5E5E3; }
.sub-card-h { color:#1A1A1A; }
.sub-kv { border-bottom:1px solid #ececec; }
.sub-kv span { color:#666666; }
.sub-kv b { color:#1A1A1A; }
.sub-note { color:#666666; }
.sub-ribbon { color:#888888; border-top:1px solid #ececec; }
.demo-msg-agent { background:#f4f4f4; color:#333333; border:1px solid #E5E5E3; }
.demo-msg-user { background:#DE3122; color:#ffffff; }
.sub-input { border-top:1px solid #E5E5E3; }
.sub-input input, .sub-input textarea { background:#ffffff; border:1px solid #DADADA; color:#1A1A1A; }
.sub-input input::placeholder, .sub-input textarea::placeholder { color:#9a9a9a; }
.sub-input button { background:#DE3122; border:1px solid #DE3122; color:#ffffff; }

/* ── agent-rail affordance + copy-pasteable example prompts (Shell.agent_examples) ── */
.sub-hint { padding:9px 14px 2px; font-size:11.5px; color:#8a8a8a; }
.sub-hint b { color:#DE3122; font-weight:600; }
.sub-egs { display:flex; flex-wrap:wrap; align-items:center; gap:7px; padding:7px 14px 10px; }
.sub-egs-l { font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#9a9a9a; margin-right:2px; }
.sub-eg { font-size:12px; color:#1A1A1A; background:#f4f2f1; border:1px solid #e2e0de; border-radius:14px;
  padding:5px 11px; cursor:pointer; user-select:text; transition:background .12s,border-color .12s; }
.sub-eg:hover { background:#fbeeec; border-color:#DE3122; color:#c41f12; }
/* demo empty-state must flow inline (not absolute-overlap the content); canvas empty stays absolute */
.land .sub-empty { position:static; inset:auto; padding:28px 0; justify-content:flex-start; color:#9a9a9a; }
/* LIVE-LOADING SPINNER: every .sub-empty placeholder gets a spinning ring so a click-to-render wait
   reads as "running live on this box", never a dead/static page. Cache-first keeps the wait brief; the
   spinner covers the first-run/refresh window. One rule ⇒ all ~60 demos, no per-demo markup. */
@keyframes sub-spin { to { transform: rotate(360deg); } }
.sub-empty::before {
  content: ""; flex: 0 0 auto; width: 15px; height: 15px; margin-right: 11px; border-radius: 50%;
  border: 2px solid rgba(222,49,34,0.22); border-top-color: #DE3122;
  animation: sub-spin 0.7s linear infinite; align-self: center;
}
.land .sub-empty { animation: sub-empty-pulse 1.6s ease-in-out infinite; }
@keyframes sub-empty-pulse { 0%,100% { opacity: 0.72; } 50% { opacity: 1; } }
/* NAV TOP-BAR: thin red progress bar shown while a live navigation is in flight (body.nav-loading is
   toggled from app.js on phx:page-loading start/stop), so a demo click gives instant feedback. */
body::before { content: ""; position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 9999;
  background: #DE3122; opacity: 0; pointer-events: none; }
body.nav-loading::before { width: 92%; opacity: 1;
  transition: width 6s cubic-bezier(0.1, 0.85, 0.2, 1), opacity 0.15s; }
/* THINKING INDICATOR: three pulsing dots shown in the optimistic agent bubble the instant a query is
   submitted (app.js), so the prompt lands in history with a live "thinking" cue while the server runs. */
.demo-msg-thinking .think-dots { display: inline-flex; gap: 5px; align-items: center; padding: 2px 0; }
.demo-msg-thinking .think-dots i { width: 6px; height: 6px; border-radius: 50%; background: #DE3122;
  display: inline-block; animation: think-blink 1.2s infinite both; }
.demo-msg-thinking .think-dots i:nth-child(2) { animation-delay: 0.18s; }
.demo-msg-thinking .think-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes think-blink { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); } }
/* LIVE "RUNNING" CUE: while a query is in flight (body.querying, toggled from app.js off LiveView's
   in-flight loading classes), show a fixed spinner chip (visible even scrolled to the result), run the
   top progress bar, and dim the result number so it's obvious a fresh number is being measured. */
#run-indicator { position: fixed; bottom: 18px; right: 18px; z-index: 10000; display: none;
  align-items: center; gap: 9px; background: #DE3122; color: #fff; letter-spacing: .3px;
  font: 600 12px/1 ui-monospace, "SF Mono", Menlo, monospace; padding: 10px 14px; border-radius: 9px;
  box-shadow: 0 6px 20px rgba(0,0,0,.28); }
body.querying #run-indicator { display: inline-flex; }
#run-indicator .ri-spin { width: 13px; height: 13px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: sub-spin 0.7s linear infinite; }
body.querying::before { width: 92%; opacity: 1;
  transition: width 6s cubic-bezier(0.1, 0.85, 0.2, 1), opacity 0.15s; }
body.querying .demo-metric-big, body.querying .mx-big { opacity: .5; transition: opacity .15s; }
.sub-chips{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px 0}
.sub-chips button{font:inherit;font-size:12px;padding:4px 10px;border:1px solid #DADADA;border-radius:14px;background:#fafafa;color:#555;cursor:pointer}
.sub-chips button:hover{border-color:#DE3122;color:#DE3122}

/* sovereign-key accounts: path toggle, the show-once key panel, the saved-it gate (design/11 §2.2) */
.login-tabs{display:flex;gap:8px;margin-bottom:16px}
.login-tab{flex:1;font:inherit;font-size:13px;padding:8px 10px;border:1px solid #DADADA;border-radius:8px;background:#fafafa;color:#555;cursor:pointer}
.login-tab:hover{border-color:#DE3122;color:#DE3122}
.login-tab-on{background:#DE3122;border-color:#DE3122;color:#fff}
.login-tab-on:hover{color:#fff}
.key-panel{max-width:520px;background:#fff;border:1px solid #1a1a1a;border-radius:12px;padding:24px}
.key-warn{font-size:13px;color:#1A1A1A;line-height:1.6;margin:0 0 16px}
.key-warn b{color:#DE3122}
.key-field{margin-bottom:14px}
.key-field label{display:block;font-size:11px;color:#909090;text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
.key-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;background:#0b0b0b;color:#10B981;border:1px solid #202020;border-radius:7px;padding:12px;word-break:break-all;user-select:all}
.key-actions{display:flex;gap:8px;margin:8px 0 0}
.key-actions button,.key-actions a{font:inherit;font-size:12px;padding:6px 12px;border:1px solid #DADADA;border-radius:7px;background:#fafafa;color:#555;cursor:pointer;text-decoration:none}
.key-actions button:hover,.key-actions a:hover{border-color:#DE3122;color:#DE3122}
.key-gate{display:flex;align-items:flex-start;gap:8px;margin:18px 0 0;font-size:13px;color:#333;line-height:1.5}
.key-gate input{margin-top:3px}
.key-enter{height:38px;width:100%;margin-top:14px;background:#DE3122;border:1px solid #DE3122;border-radius:8px;color:#fff;cursor:pointer;font:inherit;font-size:14px}
.key-enter:disabled{background:#e8b9b4;border-color:#e8b9b4;cursor:not-allowed}

/* ===== grouped left nav-rail (founder 2026-06-30) — dark, labeled, grouped; active from URL ===== */
.sub-nav{grid-area:iconrail;display:flex;flex-direction:column;gap:2px;padding:10px 8px;overflow-y:auto;
  background:#191919;border-right:1px solid #2a2a2a}
.sub-nav-group{display:flex;flex-direction:column;gap:1px;margin-bottom:8px}
.sub-nav-h{display:flex;align-items:baseline;justify-content:space-between;padding:8px 8px 5px;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#6a6a6a}
.sub-nav-h em{font-style:normal;font-size:8.5px;letter-spacing:.1em;color:#DE3122;opacity:.8}
.sub-nav-i{display:flex;align-items:center;gap:9px;height:30px;padding:0 8px;border-radius:7px;
  color:#9a9a9a;border:1px solid transparent;transition:background .12s,color .12s,border-color .12s}
.sub-nav-i:hover{background:#222;color:#ECECEC}
.sub-nav-sym{width:16px;text-align:center;font-size:14px;opacity:.85;flex:none}
.sub-nav-t{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub-nav-i-on{background:#272727;border-color:#DE3122;color:#fff}
.sub-nav-i-on .sub-nav-sym{color:#DE3122;opacity:1}
.sub-nav-sp{flex:1;min-height:8px}
.sub-nav .sub-presence{display:flex;align-items:center;gap:7px;padding:8px;font-size:12px;color:#10B981}
.sub-nav .sub-presence span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#7a7a7a}

/* ===== overview / scorecard tables + escalating verdict badges (founder 2026-06-30) ===== */
.ov-table{display:flex;flex-direction:column;border:1px solid #E5E5E3;border-radius:10px;overflow:hidden;background:#fff;margin:8px 0 18px}
.ov-row{display:grid;grid-template-columns:1.3fr 1.6fr .9fr 1.2fr .9fr;align-items:center;gap:14px;
  padding:11px 16px;border-bottom:1px solid #efefed}
.ov-row:last-child{border-bottom:0}
.ov-row:not(.ov-head):hover{background:#faf7f6}
.ov-head{background:#f0f0ee;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#888;border-bottom:1px solid #E5E5E3}
.ov-cat{font-size:13px;color:#1A1A1A;font-weight:600}
.ov-ds{font-size:12px;color:#666}
.ov-demo a{font-size:12px;color:#DE3122;text-decoration:none}
.ov-demo a:hover{text-decoration:underline}
.ov-num{font-size:13px;color:#1A1A1A;font-weight:600}
/* numbered, colour-coded, escalating performance bands (the multiple prominent, the word beneath) */
.ov-band{display:inline-flex;flex-direction:column;align-items:center;line-height:1.05;
  padding:4px 10px;border-radius:6px;border:1px solid transparent;min-width:64px}
.ov-band b{font-size:13px;font-weight:800;letter-spacing:.02em}
.ov-band em{font-style:normal;font-size:8.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-top:1px}
.ov-b1{background:#f0eeeb;color:#6a6a66;border-color:#dcd9d4}       /* <10x Collapse — neutral slate */
.ov-b10{background:#e7f4fb;color:#0e6ea8;border-color:#bfe0f2}      /* 10x Leading — teal/blue */
.ov-b100{background:#e6f7ef;color:#067a52;border-color:#aee7cf}    /* 100x Commanding — emerald */
.ov-b1000{background:#fbf1da;color:#9a6b00;border-color:#ecd497}   /* 1000x Category-defining — amber */
.ov-b10000{background:#fbf3d0;color:#8a6d00;border-color:#e6cf7a;
  box-shadow:inset 0 0 0 1px #d9b84a,0 1px 3px rgba(180,140,20,.18)} /* 10000x Generational — gold */
.ov-legend{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:4px 0 8px;font-size:12px;color:#888}
.ov-legend em{font-style:normal;color:#888}
.ov-legend-note{flex:1 1 320px;min-width:240px}
/* scorecard is now public: category · dataset · semurg · advantage · band (5 columns, no names) */
.sc-row{grid-template-columns:1.1fr 1.3fr 1.1fr 1.7fr .95fr}
.sc-adv{font-size:12px;color:#444}
/* merged overview: category · dataset · demo · semurg · what-it-is (5 cols). Our own measured numbers are
   the star; no best-of-breed column, no bands — the numbers speak for themselves. */
.ov-merged-row{grid-template-columns:1.05fr 1.05fr .75fr 1.15fr 1.55fr}
.ov-num-star{font-size:15px;font-weight:700;color:#111;font-variant-numeric:tabular-nums}
@media (max-width:900px){.ov-merged-row{grid-template-columns:1fr 1fr .8fr;grid-auto-rows:auto;row-gap:4px}}

/* ── shared all-metrics + hit-rate block (MetricsBlock.panel) ───────────────── */
.mb{border:1px solid #E5E5E3;border-radius:10px;background:#fff;margin:12px 0 8px;overflow:hidden}
.mb-h{background:#f0f0ee;padding:8px 14px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#888;border-bottom:1px solid #E5E5E3}
.mb-h span{color:#10B981;margin-left:6px}
.mb-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:#efefed}
.mb-cell{background:#fff;padding:12px 14px}
.mb-lab{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#999;margin-bottom:3px}
.mb-val{font-size:17px;font-weight:700;color:#1A1A1A}
.mb-val em{font-style:normal;font-size:11px;font-weight:500;color:#999;margin-left:2px}
.mb-sub{display:grid;grid-template-columns:1fr 1.4fr;gap:1px;background:#efefed;border-top:1px solid #efefed}
.mb-hit,.mb-ram{background:#fff;padding:12px 14px}
.mb-pill{display:inline-block;padding:3px 9px;border-radius:5px;font-size:11px;font-weight:600;margin-right:6px}
.mb-cold{background:#eef1f4;color:#5b6470}
.mb-warm{background:#e7f4fb;color:#0e6ea8}
.mb-hot{background:#fdeae8;color:#c41f12}
.mb-measuring{font-size:12px;color:#b08900;font-style:italic}
.mb-bar{height:12px;border-radius:6px;background:#eef1f4;overflow:hidden;margin:6px 0 5px;border:1px solid #e2e2e0}
.mb-bar-fill{height:100%;background:linear-gradient(90deg,#10B981,#0e9e73)}
.mb-ram-t{font-size:11px;color:#888}

/* ── the striking result panel (MetricsBlock.panel) ────────────────────────── */
.mx{border:1px solid #E5E5E3;border-radius:12px;background:#fff;margin:14px 0 10px;overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.05)}
/* 1 · hero */
.mx-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:20px 22px;background:linear-gradient(180deg,#fbfbfa,#f4f4f2);border-bottom:1px solid #E5E5E3}
.mx-hero-main{min-width:0}
.mx-big{font-size:44px;line-height:1;font-weight:800;color:#1A1A1A;letter-spacing:-.02em}
.mx-unit{font-size:16px;font-weight:600;color:#DE3122;margin-left:8px;letter-spacing:0}
.mx-did{font-size:13px;color:#666;margin-top:6px}
.mx-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mx-band{display:inline-flex;flex-direction:column;align-items:center;line-height:1.05;
  padding:6px 13px;border-radius:8px;border:1px solid transparent;min-width:72px}
.mx-band b{font-size:15px;font-weight:800}
.mx-band em{font-style:normal;font-size:8.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-top:2px}
.mx-tel{display:inline-block;padding:6px 11px;border-radius:8px;font-size:11px;font-weight:700;letter-spacing:.02em}
.mx-tel-t{background:#e6f7ef;color:#067a52;border:1px solid #aee7cf}
.mx-tel-i{background:#e7f4fb;color:#0e6ea8;border:1px solid #bfe0f2}
/* 2 · grid */
.mx-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#ececea}
.mx-cell{background:#fff;padding:13px 16px}
.mx-cell-l{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:#9a9a9a;margin-bottom:4px}
.mx-cell-v{font-size:19px;font-weight:700;color:#1A1A1A}
.mx-cell-v em{font-style:normal;font-size:11px;font-weight:500;color:#9a9a9a;margin-left:2px}
/* 3 · hit-rate + RAM telemetry */
.mx-tele{display:grid;grid-template-columns:1fr 1.5fr;gap:1px;background:#ececea;border-top:1px solid #ececea}
.mx-tele-cell{background:#fff;padding:13px 16px}
.mx-tele-l{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:#9a9a9a;margin-bottom:7px}
.mx-hits{display:flex;flex-wrap:wrap;gap:6px}
.mx-ram-t{font-size:11px;color:#888;margin-top:2px}
/* 4 · cold/warm/hot significance explainer (founder 2026-07-02) — the story, tied to the RAM bar */
.mx-explain{padding:13px 18px 15px;background:#fbfbfa;border-top:1px solid #ececea}
.mx-explain-h{display:block;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:#9a9a9a;margin-bottom:9px}
.mx-explain-tiers{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:10px}
.mx-explain-t{font-size:12px;color:#555;display:flex;align-items:center;gap:7px}
.mx-explain-t .mb-pill{margin-right:0}
.mx-explain-p{font-size:12.5px;line-height:1.6;color:#555;margin:0;max-width:760px}
.mx-explain-p b{color:#1A1A1A;font-weight:600}
.mx-ram-t b{color:#067a52}
@media (max-width:900px){.mx-grid{grid-template-columns:repeat(2,1fr)}.mx-tele{grid-template-columns:1fr}.mx-big{font-size:34px}}

/* ── archipelago roadmap ───────────────────────────────────────────────────── */
.arch-fam{border:1px solid #E5E5E3;border-radius:10px;background:#fff;margin:14px 0;overflow:hidden}
.arch-fam-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:12px 16px;border-bottom:1px solid #efefed;background:#faf9f8}
.arch-fam-t{font-size:15px;font-weight:700;color:#1A1A1A}
.arch-fam-tag{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#9a6b00;
  background:#fbf1da;border:1px solid #ecd497;border-radius:5px;padding:3px 8px}
.arch-fam-d{font-size:13px;color:#555;padding:12px 16px 4px;margin:0}
.arch-list{padding:6px 16px 14px}
.arch-row{display:grid;grid-template-columns:1.4fr 1.2fr 1.4fr 1fr 1.1fr;gap:12px;align-items:center;
  padding:9px 0;border-bottom:1px solid #f2f2f0;font-size:12px}
.arch-row:last-child{border-bottom:0}
.arch-row-h{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#999;border-bottom:1px solid #E5E5E3}
.arch-name{font-weight:600;color:#1A1A1A}
.arch-type{color:#666}
.arch-teacher{color:#666}
.arch-status{display:flex;align-items:center;gap:6px;color:#0e6ea8;font-weight:600}
.arch-dot{width:7px;height:7px;border-radius:50%;background:#10B981;box-shadow:0 0 0 3px rgba(16,185,129,.18)}
.arch-gate{color:#9a6b00}

/* ── architecture / how-it-works page ──────────────────────────────────────── */
.arch{max-width:760px}
.arch-sec{margin:26px 0 8px}
.arch-sec-hero{background:#fbfbfa;border:1px solid #ecebe8;border-radius:12px;padding:18px 20px;margin:26px 0}
.arch-h2{font-size:17px;font-weight:700;color:#1A1A1A;margin:0 0 8px;display:flex;align-items:center;gap:10px}
.arch-core{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#c41f12;
  background:#fdeae8;border:1px solid #f5bdb6;border-radius:5px;padding:3px 8px}
.arch-p{font-size:14px;line-height:1.6;color:#444;margin:0 0 12px}
.arch-p b{color:#1A1A1A}
.arch-fig{margin:6px 0 6px;display:flex;justify-content:center}
.arch-svg{width:100%;max-width:560px;height:auto}
.arch-fig-4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.arch-cell{border-radius:9px;padding:14px 12px;min-height:96px;display:flex;flex-direction:column;gap:6px;
  border:1.5px solid #DE3122;background:#fff}
.arch-cell-node{border-color:#0e6ea8;background:#f2f9fd}
.arch-cell-edge{border-color:#067a52;background:#f0faf5}
.arch-cell-object{border-color:#9a6b00;background:#fdf7ea}
.arch-cell-tomb{border-color:#8a8a8a;background:#f5f5f4}
.arch-cell-t{font-size:12px;font-weight:800;letter-spacing:.04em;color:#1A1A1A}
.arch-cell-d{font-size:11px;color:#555;line-height:1.4}
.arch-fig-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.arch-svg-h{width:100%;height:auto}
@media (max-width:720px){.arch-fig-4{grid-template-columns:repeat(2,1fr)}.arch-fig-2{grid-template-columns:1fr}}

/* ── inbound contact-us form (/contact, PerimeterGateway.ContactLive) — light theme, same palette ── */
.land-contact{display:flex;flex-direction:column;gap:16px;margin-top:8px}
.land-lab{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;
  letter-spacing:.02em;color:#555}
.land-in{padding:11px 13px;background:#ffffff;border:1px solid #DADADA;border-radius:8px;
  color:#1A1A1A;font:inherit;font-size:14px;font-weight:400;width:100%;box-sizing:border-box;
  transition:border-color .15s}
.land-in:focus{outline:none;border-color:#DE3122}
.land-in::placeholder{color:#9a9a9a}
textarea.land-in{line-height:1.5;resize:vertical;min-height:120px}
.land-send{align-self:flex-start;padding:12px 22px;background:#DE3122;border:1px solid #DE3122;
  border-radius:8px;color:#ffffff;font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  transition:background .15s,transform .15s}
.land-send:hover{background:#c41f12;transform:translateY(-1px)}

/* ── shared cold-visitor onboarding line (PerimeterGateway.DemoIntro.outcome) ──
   The "you are looking at X, ask it to Y, runs live on downloadable data" outcome line under the
   demo h1. Prose is sans (see the typography block); the dataset name + size chip render mono. */
.demo-intro{margin:0 0 20px;max-width:760px}
.demo-intro-line{font-size:14px;line-height:1.6;color:#444;margin:0 0 6px}
.demo-intro-line b{color:#1A1A1A;font-weight:600}
.demo-intro-ds{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:#1A1A1A;font-weight:600;background:#f0f0ee;border:1px solid #e2e0de;border-radius:5px;padding:1px 7px}
.demo-intro-size{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:#888;font-size:12px;margin-left:8px}
.demo-intro-dl{color:#DE3122;text-decoration:none;font-weight:600}
.demo-intro-dl:hover{text-decoration:underline}
.demo-intro-vary{font-size:12.5px;line-height:1.6;color:#777;margin:0}
.demo-intro-vary b{color:#555;font-weight:600}

/* ── shared proof-first result display (PerimeterGateway.ProofBlock) ──
   The ACTUAL query answer, prominent and SEPARATE from the throughput number. The question is sans
   prose; the answer values (labels, counts, ids) render mono, the instrument reading. */
.proof{border:1px solid #E5E5E3;border-radius:12px;background:#fff;margin:14px 0 10px;overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.05)}
.proof-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:13px 18px;
  background:linear-gradient(180deg,#fbfbfa,#f4f4f2);border-bottom:1px solid #E5E5E3}
.proof-h-l{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#9a9a9a;font-weight:600}
.proof-q{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;color:#1A1A1A;font-weight:600}
.proof-rows{display:flex;flex-direction:column}
.proof-row{display:grid;grid-template-columns:1.6fr .8fr;align-items:center;gap:14px;
  padding:9px 18px;border-bottom:1px solid #efefed}
.proof-row:last-child{border-bottom:0}
.proof-row-h{background:#f0f0ee;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#999}
.proof-row-k{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;color:#1A1A1A}
.proof-row-v{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;font-weight:700;color:#1A1A1A;text-align:right}
.proof-body{padding:14px 18px}
.proof-cap{padding:10px 18px 13px;font-size:12px;color:#777;border-top:1px solid #efefed}

/* ===== FUND-TRACE (comet) demo: beam / hops sliders + direction toggle + honest-scope caveat ===== */
.ft-panel{margin:0 0 22px;padding:14px 16px;background:#ffffff;border:1px solid #E5E5E3;border-radius:10px;
  display:flex;flex-direction:column;gap:12px}
.ft-ctl{display:flex;gap:26px;flex-wrap:wrap;margin:0}
.ft-slider{display:flex;flex-direction:column;gap:7px;flex:1;min-width:190px}
.ft-slider-l{font-size:12px;color:#555555;letter-spacing:.02em}
.ft-slider-l b{color:#DE3122;font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.ft-slider-l em{color:#9a9a9a;font-style:normal;font-size:11px;margin-left:6px}
.ft-slider input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:3px;
  background:#e4e4e0;outline:none;cursor:pointer}
.ft-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;
  border-radius:50%;background:#DE3122;border:2px solid #ffffff;box-shadow:0 0 0 1px #DE3122;cursor:pointer}
.ft-slider input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#DE3122;
  border:2px solid #ffffff;cursor:pointer}
.ft-dirs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0}
.ft-dirs-l{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#9a9a9a;margin-right:2px}
.ft-dir{font-size:12px;padding:5px 11px;border:1px solid #DADADA;border-radius:6px;background:#ffffff;
  color:#555555;cursor:pointer;font-family:inherit}
.ft-dir:hover{border-color:#DE3122;color:#DE3122}
.ft-dir.on{border-color:#DE3122;background:#DE3122;color:#ffffff;font-weight:600}
.ft-caveat{font-size:12px;line-height:1.55;color:#7a621d;background:#fbf6e8;border:1px solid #ecdca6;
  border-left:2px solid #c79a2f;border-radius:6px;padding:10px 13px;margin:16px 0}
.ft-caveat b{color:#5f4c13;font-weight:700}

/* ============================================================================
   design/34 tests-as-UI round (2026-07-14): ONE custom-property token layer +
   CanonicalMetric, Benchmark Theater, dual-pricing, /proof. Light theme, black /
   white / red (#DE3122) + live-green (#10B981), mono numbers, flat-top hexagon.
   ========================================================================== */
:root{
  --red:#DE3122; --red-ink:#c41f12; --green:#10B981; --amber:#c79a2f; --amber-ink:#8a6d14;
  --ink:#1A1A1A; --ink-2:#555555; --ink-3:#8a8a8a;
  --card:#ffffff; --card-2:#fafafa; --line:#E5E5E3; --wash:#f6f6f4;
  --cold:#5b6470; --cold-bg:#eef1f4; --warm:#0e6ea8; --warm-bg:#e7f4fb; --hot:#c41f12; --hot-bg:#fdeae8;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.thr-link{color:var(--red);font-weight:600;text-decoration:none;white-space:nowrap}
.thr-link:hover{color:var(--red-ink);text-decoration:underline}

/* ---- CanonicalMetric: ONE shared chip + figure, identical on every surface ---- */
.cm{display:inline-block;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 16px;min-width:220px}
.cm-cap{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:5px}
.cm-line{display:flex;align-items:baseline;gap:8px}
.cm-val{font-family:var(--mono);font-size:30px;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1}
.cm-unit{font-family:var(--mono);font-size:13px;color:var(--ink-3);font-weight:600}
.cm-meta{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.cm-method{font-family:var(--mono);font-size:11px;color:var(--ink-2)}
.cm-tier{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:4px}
.cm-tier-cold{background:var(--cold-bg);color:var(--cold)} .cm-tier-warm{background:var(--warm-bg);color:var(--warm)}
.cm-tier-hot{background:var(--hot-bg);color:var(--hot)} .cm-tier-write{background:#eafaf2;color:#0b7a52}
.cm-tier-compute{background:#f1eefb;color:#5b3fb0}
.cm-band{font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px}
.cm-band-measured{background:#eafaf2;color:#0b7a52} .cm-band-model{background:#fbf6e8;color:var(--amber-ink)} .cm-band-forecast{background:#f0f0ee;color:var(--ink-2)}
.cm-live{color:var(--green);font-size:9px;font-weight:700;letter-spacing:.06em}
.cm-fig{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--red);border-radius:12px;padding:22px 26px}
.cm-fig-h{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--red);font-weight:600}
.cm-fig-num{font-family:var(--mono);font-size:52px;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.02;margin:8px 0 6px}
.cm-fig-unit{font-size:18px;color:var(--ink-3);font-weight:600;margin-left:10px}
.cm-fig-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.cm-fig-note{font-size:12.5px;color:var(--ink-2);line-height:1.5;max-width:640px}

/* ---- Benchmark Theater (/theater) ---- */
.thr-canon{margin:8px 0 20px}
.thr-canon-note,.ov-canon-note{font-size:12px;color:var(--ink-2);line-height:1.55;margin-top:10px;max-width:680px}
.ov-canon{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:6px 0 20px}
.thr-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:18px 0 12px;flex-wrap:wrap}
.thr-bar-l{font-size:12px;color:var(--ink-2)}
.thr-run{background:var(--red);color:#fff;border:0;border-radius:7px;padding:8px 15px;font-weight:600;font-size:12.5px;cursor:pointer}
.thr-run:hover{background:var(--red-ink)}
.thr-ladder{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:12px;margin:6px 0 26px}
.thr-tile{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:14px 15px;border-left:3px solid var(--line);transition:box-shadow .2s,border-color .2s}
.thr-tile-on{box-shadow:0 1px 0 rgba(0,0,0,.03)}
.thr-tile-wait{border-style:dashed;background:var(--card-2)}
.thr-tile-cold{border-left-color:var(--cold)} .thr-tile-warm{border-left-color:var(--warm)} .thr-tile-hot{border-left-color:var(--hot)}
.thr-tile-write{border-left-color:#0b7a52} .thr-tile-compute{border-left-color:#5b3fb0}
.thr-tile-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.thr-tile-t{font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--ink-2);text-transform:uppercase}
.thr-tier{font-size:9.5px;font-weight:700;text-transform:uppercase;padding:2px 6px;border-radius:4px}
.thr-tier-cold{background:var(--cold-bg);color:var(--cold)} .thr-tier-warm{background:var(--warm-bg);color:var(--warm)}
.thr-tier-hot{background:var(--hot-bg);color:var(--hot)} .thr-tier-write{background:#eafaf2;color:#0b7a52} .thr-tier-compute{background:#f1eefb;color:#5b3fb0}
.thr-tile-v{font-family:var(--mono);font-size:30px;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.02em;margin:11px 0 4px}
.thr-tile-v.thr-wait{color:var(--ink-3);font-size:20px;font-weight:600}
.thr-tile-u{font-size:12px;color:var(--ink-3);font-weight:600;margin-left:6px}
.thr-tile-method{font-family:var(--mono);font-size:10.5px;color:var(--ink-2);line-height:1.4}
.thr-tile-foot{display:flex;align-items:center;gap:8px;margin:8px 0 6px}
.thr-band{font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:4px;text-transform:uppercase}
.thr-band-measured{background:#eafaf2;color:#0b7a52} .thr-band-model{background:#fbf6e8;color:var(--amber-ink)} .thr-band-forecast{background:#f0f0ee;color:var(--ink-2)}
.thr-lat{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.thr-tile-inc{font-size:11px;color:var(--ink-3);line-height:1.4}.thr-tile-inc b{color:var(--ink-2);font-weight:600}
.thr-core{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin:8px 0 24px}
.thr-core-h{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);font-weight:700;margin-bottom:14px}
.thr-core-h::before{content:"";display:inline-block;width:9px;height:9px;background:var(--red);
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);margin-right:8px;vertical-align:middle}
.thr-core-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.thr-eff{background:var(--card-2);border:1px solid var(--line);border-radius:10px;padding:13px 15px}
.thr-eff-h{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:10px}
.thr-eff-n{font-size:11px;color:var(--ink-2);line-height:1.45;margin-top:8px}
.thr-eff-wait{font-size:12px;color:var(--ink-3);font-style:italic;padding:10px 0}
.thr-hit{display:flex;height:16px;border-radius:5px;overflow:hidden;border:1px solid var(--line)}
.thr-hit-seg{height:100%;transition:width .5s ease}
.thr-hit-cold{background:var(--cold)} .thr-hit-warm{background:var(--warm)} .thr-hit-hot{background:var(--green)}
.thr-hit-legend{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.thr-comp-n,.thr-pref-n{font-family:var(--mono);font-size:30px;font-weight:800;color:var(--ink);line-height:1}
.thr-comp-n span,.thr-pref-n span{display:block;font-size:11px;color:var(--ink-3);font-weight:500;font-family:var(--sans);margin-top:4px}
.thr-comp-d{font-size:11px;color:var(--ink-2);line-height:1.45;margin-top:9px}.thr-comp-d b{color:var(--ink);font-weight:700}

/* ---- persistent dual-pricing block ---- */
.sub-close{flex:0 0 auto}
.pr{max-width:980px;margin:8px auto 0;padding:0 40px}
.pr-h{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin:0 0 12px}
.pr-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pr-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.pr-card-sov{border-left:3px solid var(--red)}
.pr-card-k{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);font-weight:700}
.pr-card-p{font-family:var(--mono);font-size:34px;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin:6px 0 8px;line-height:1}
.pr-cur{color:var(--red);font-size:22px;vertical-align:6px;margin-right:2px}
.pr-per{font-size:13px;color:var(--ink-3);font-weight:500;font-family:var(--sans);margin-left:8px}
.pr-card-d{font-size:12.5px;color:var(--ink-2);line-height:1.5;margin-bottom:12px}
.pr-card-cta{font-size:12.5px;color:var(--red);font-weight:600;text-decoration:none}.pr-card-cta:hover{text-decoration:underline}
.pr-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border:1px solid var(--line);border-radius:6px;background:var(--card-2);text-decoration:none;font-family:var(--mono);font-size:12px;font-weight:700}
.pr-chip-a{color:var(--ink)} .pr-chip-b{color:var(--red)} .pr-chip-sep{color:var(--ink-3)}
.pr-chip em{font-style:normal;font-size:9.5px;color:var(--ink-3);font-weight:500;margin-left:1px}
.pr-chip:hover{border-color:var(--red)}

/* ---- /proof reconciliation grid ---- */
.pf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:20px 0}
.pf-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.pf-card-h{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);font-weight:700}
.pf-card-d{font-size:12px;color:var(--ink-2);line-height:1.5}
@media (max-width:720px){.pr-cards{grid-template-columns:1fr}.pr{padding:0 20px}}

/* ==========================================================================
   SLICE 2 — the collapse wall, the journey, the Simargl climb hero, one-bit glyph.
   Reuses the slice-1 token layer (--red/--green/--warm/--cold/--mono …) + the flat-top
   hexagon glyph. black/white/red + live-green + mono numbers.
   ========================================================================== */

/* ---- the collapse wall (/demo/collapse) ---- */
.cw-count{display:flex;align-items:center;gap:18px;margin:18px 0 20px;flex-wrap:wrap}
.cw-count-n{font-family:var(--mono);font-size:54px;font-weight:800;color:var(--red);line-height:1;letter-spacing:-.03em}
.cw-count-n span{font-size:22px;color:var(--ink-3);font-weight:600;margin-left:4px}
.cw-count-l{flex:1;min-width:220px;font-size:13px;color:var(--ink-2);line-height:1.5;font-weight:600}
.cw-count-s{font-size:11px;color:var(--ink-3);font-weight:400;font-family:var(--mono);margin-top:4px}
.cw-count-s b{color:var(--ink-2)}
.cw-warm{color:var(--amber-ink)}
.cw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:13px;margin:6px 0 26px}
.cw-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:15px 16px;border-left:3px solid var(--line);transition:box-shadow .2s,border-color .2s;display:flex;flex-direction:column;gap:6px}
.cw-card-on{box-shadow:0 1px 0 rgba(0,0,0,.03)}
.cw-card-wait{border-style:dashed;background:var(--card-2)}
.cw-card-cold{border-left-color:var(--cold)} .cw-card-warm{border-left-color:var(--warm)} .cw-card-hot{border-left-color:var(--hot)}
.cw-card-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cw-card-t{font-size:12px;font-weight:800;letter-spacing:.02em;color:var(--ink);text-transform:uppercase}
.cw-card-idiom{font-family:var(--mono);font-size:10.5px;color:var(--ink-2);line-height:1.4}
.cw-card-v{font-family:var(--mono);font-size:28px;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.02em;margin:5px 0 3px}
.cw-card-v.cw-wait{color:var(--ink-3);font-size:19px;font-weight:600}
.cw-card-u{font-size:12px;color:var(--ink-3);font-weight:600;margin-left:6px}
.cw-card .cm{min-width:0;width:100%;padding:9px 11px}
.cw-card .cm-val{font-size:20px}
.cw-card-foot{display:flex;align-items:center;gap:8px}
.cw-card-inc{font-size:11px;color:var(--ink-3);line-height:1.4}.cw-card-inc b{color:var(--ink-2);font-weight:600}
.cw-fused{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--red);border-radius:12px;padding:18px 20px;margin:8px 0 24px}
.cw-fused-h{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:14px}
.cw-fused-grid{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cw-fused-cell{flex:1;min-width:150px}
.cw-fused-arrow{font-size:26px;color:var(--ink-3);font-weight:700}
.cw-fused-n{font-family:var(--mono);font-size:30px;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.02em}
.cw-fused-us .cw-fused-n{color:var(--warm)}
.cw-fused-delta .cw-fused-n{color:var(--green)}
.cw-fused-lab{font-size:11px;color:var(--ink-2);line-height:1.45;margin-top:6px}
.cw-fused-note{font-size:12px;color:var(--ink-2);line-height:1.55;margin-top:14px;max-width:720px}

/* ---- the journey (/journey) ---- */
.jr-acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin:18px 0 24px}
.jr-act{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;gap:12px;position:relative}
.jr-act-1{border-top:3px solid var(--cold)} .jr-act-2{border-top:3px solid #0b7a52} .jr-act-3{border-top:3px solid var(--warm)}
.jr-act-h{display:flex;align-items:baseline;gap:9px}
.jr-act-num{font-family:var(--mono);font-size:12px;font-weight:800;color:var(--red)}
.jr-act-t{font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.jr-act-sub{font-size:11.5px;color:var(--ink-2);line-height:1.5}
.jr-tape{background:var(--card-2);border:1px solid var(--line);border-radius:9px;padding:10px 12px;max-height:170px;overflow:hidden}
.jr-tape-h{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:8px}
.jr-tape-row{font-family:var(--mono);font-size:11px;color:var(--ink-2);line-height:1.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jr-tape-row b{color:var(--ink)}
.jr-tape-row .jr-src-btc{color:var(--warm)} .jr-tape-row .jr-src-bnc{color:#0b7a52}
.jr-badge{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.jr-badge-n{font-family:var(--mono);font-size:26px;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.02em}
.jr-badge-u{font-size:12px;color:var(--ink-3);font-weight:600}
.jr-counters{display:flex;gap:14px;flex-wrap:wrap}
.jr-counter span{display:block;font-family:var(--mono);font-size:18px;font-weight:800;color:var(--ink)}
.jr-counter em{font-style:normal;font-size:10px;color:var(--ink-3);letter-spacing:.03em}
.jr-faces{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.jr-face{background:var(--card-2);border:1px solid var(--line);border-radius:8px;padding:9px 11px}
.jr-face-t{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-2)}
.jr-face-v{font-family:var(--mono);font-size:17px;font-weight:800;color:var(--ink);margin-top:3px}
.jr-face-v span{font-size:10px;color:var(--ink-3);font-weight:600;margin-left:4px}
.jr-flow{display:flex;align-items:center;justify-content:center;gap:10px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin:2px 0 6px}
.jr-flow b{color:var(--red)}

/* ---- Simargl climb hero (/demo/simargl) ---- */
.sg-hero{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--red);border-radius:14px;padding:22px 24px;margin:8px 0 18px}
.sg-hero-k{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--red);font-weight:700}
.sg-state{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:5px;margin-left:8px;vertical-align:2px}
.sg-state-live{background:#eafaf2;color:#0b7a52} .sg-state-recorded{background:#eef3fb;color:var(--warm)} .sg-state-none{background:var(--wash);color:var(--ink-3)}
.sg-hero-num{font-family:var(--mono);font-size:52px;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.02;margin:10px 0 4px}
.sg-hero-num span{font-size:17px;color:var(--ink-3);font-weight:600;margin-left:10px}
.sg-hero-base{font-size:12.5px;color:var(--ink-2);line-height:1.5}
.sg-provenance{background:var(--wash);border:1px solid var(--line);border-radius:9px;padding:11px 14px;margin:12px 0;font-size:12px;color:var(--ink-2);line-height:1.55}
.sg-provenance b{color:var(--red)}
.sg-curve{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:8px 0 16px}
.sg-curve-h{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);font-weight:700;margin-bottom:12px}
.sg-svg{width:100%;height:120px;display:block}
.sg-gen-line{stroke:var(--red);stroke-width:2;fill:none}
.sg-base-line{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:4 4}
.sg-gate-line{stroke:var(--green);stroke-width:1;stroke-dasharray:3 3;opacity:.6}
.sg-dot{fill:var(--red)}
.sg-lab{font-family:var(--mono);font-size:8px;fill:var(--ink-3)}
.sg-instr{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px;margin:12px 0}
.sg-instr-cell{background:var(--card-2);border:1px solid var(--line);border-radius:9px;padding:11px 13px}
.sg-instr-v{font-family:var(--mono);font-size:19px;font-weight:800;color:var(--ink)}
.sg-instr-l{font-size:10px;color:var(--ink-3);letter-spacing:.02em;margin-top:3px}
.sg-secondary-h{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin:14px 0 8px}

/* ---- one-bit-per-neuron live glyph ---- */
.bit-glyph{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin:12px 0 18px}
.bit-glyph-h{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);font-weight:700;margin-bottom:6px}
.bit-glyph-h::before{content:"";display:inline-block;width:9px;height:9px;background:var(--red);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);margin-right:8px;vertical-align:middle}
.bit-glyph-sub{font-size:11.5px;color:var(--ink-2);line-height:1.5;margin-bottom:14px;max-width:720px}
.bit-mods{display:flex;flex-direction:column;gap:12px}
.bit-mod-h{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:6px;display:flex;justify-content:space-between}
.bit-mod-h em{font-style:normal;font-family:var(--mono);color:var(--ink-2);text-transform:none;letter-spacing:0}
.bit-frame{display:flex;flex-wrap:wrap;gap:2px;line-height:0}
.bit-cell{width:8px;height:8px;border-radius:1px;background:var(--wash);border:1px solid var(--line)}
.bit-cell-on{background:var(--red);border-color:var(--red-ink)}
.bit-argmax{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-2);line-height:1.5}
.bit-argmax b{font-family:var(--mono);color:var(--ink);font-weight:800}
.bit-collapse{font-size:11.5px;color:var(--ink-2);line-height:1.55;margin-top:10px;background:var(--wash);border-radius:8px;padding:10px 13px}
.bit-collapse b{color:var(--red)}
@media (max-width:720px){.jr-faces{grid-template-columns:1fr}.cw-fused-grid{flex-direction:column;align-items:flex-start}}

/* ── benchmark theater · ROW layout (founder 2026-07-21 "this needs rows") ── */
/* One row per operation (Writes / Reads / Traversals / Scans / Kernel / tier-efficiency); within each row a
   cold·warm·hot column progression. Replaces the old flat .thr-ladder auto-fill grid. */
.thr-rows{display:flex;flex-direction:column;gap:14px;margin:6px 0 26px}
.thr-row{display:grid;grid-template-columns:132px 1fr;gap:16px;align-items:start}
.thr-row-h{font-size:12px;font-weight:800;letter-spacing:.02em;color:var(--ink);text-transform:uppercase;padding-top:14px;line-height:1.35}
.thr-row-sub{display:block;font-size:10px;font-weight:500;letter-spacing:.03em;color:var(--ink-3);text-transform:none;margin-top:5px}
.thr-row-cells{display:grid;grid-template-columns:repeat(4,minmax(170px,1fr));gap:12px}
.thr-row-eff .thr-row-h{padding-top:0}
/* the efficiency headline number sitting atop each conveyor/prefetch/janitor tile */
.thr-eff-big{font-family:var(--mono);font-size:26px;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.02em;margin:2px 0 12px}
.thr-eff-big span{display:block;font-size:10.5px;color:var(--ink-3);font-weight:500;font-family:var(--sans);margin-top:5px;letter-spacing:0;line-height:1.4}
@media (max-width:760px){
  .thr-row{grid-template-columns:1fr;gap:8px}
  .thr-row-h{padding-top:0}
  .thr-row-cells{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
}
/* OVERALL tile: the blended rate at the measured tier mix. Visually separated from the three tier tiles
   because it is the only figure on the row that cannot be cherry-picked. */
.thr-tile-overall{border-left:3px solid #111;background:#fafafa}
.thr-tier-overall{background:#111;color:#fff}
.thr-tile-overall .thr-hit{margin-top:8px}
@media (prefers-color-scheme:dark){.thr-tile-overall{background:#111;border-left-color:#eee}.thr-tier-overall{background:#eee;color:#111}}