/* ───────────────────────────────────────────────────────────────────────────
   Tako — landing design system, 7 October 2026

   The idea the page is built on: every other agent-finance site asks to be
   trusted. We can be checked. Four public BNB RPCs answer with
   `access-control-allow-origin: *`, so a static page can read the chain
   live, in front of the reader, with no backend and no key.

   So the page is an instrument, not a brochure, and the design follows:

     · Ground is deep water — a desaturated blue-black, not neutral #070707.
       The mascot is a warm orange creature; cold water makes it glow.
       It is also simply ours: an octopus, an island, a reef.
     · Archivo for voice, IBM Plex Mono for anything read off a chain.
       Every on-chain value is mono. That is a promise, not a style: if it
       is monospaced, it came from a node and you can re-read it yourself.
     · Weight 500 at display sizes with tight negative tracking. Heavy type
       at this scale reads as shouting (measured off usehotbot.com,
       docs/LANDING_DESIGN_SPEC_20261007.md).

   Day and night both ship on the island's finalised contract: a `light`
   class on <body>, `takoMode` in localStorage.
   ─────────────────────────────────────────────────────────────────────── */

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* night — deep water */
  --bg:        #04080b;
  --bg-1:      #070d12;
  --bg-2:      #0b141b;
  --bg-3:      #101c25;
  --line:      #16232e;
  --line-2:    #223440;
  --ink:       #eaf2f6;
  --ink-2:     #b6c7d2;
  --muted:     #7d94a3;
  --faint:     #52687a;

  --coral:     #ff7a2f;
  --coral-2:   #ffa066;
  --coral-dim: rgba(255, 122, 47, .13);
  --on-coral:  #1a0d04;

  --glass:     #3ddc97;   /* verified, read, good */
  --glass-dim: rgba(61, 220, 151, .12);
  --amber:     #ffc044;
  --amber-dim: rgba(255, 192, 68, .12);
  --red:       #ff6b6b;
  --red-dim:   rgba(255, 107, 107, .12);

  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.6);
  color-scheme: dark;

  --sans: Archivo, ui-sans-serif, -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --rail: min(1200px, calc(100% - 56px));
}

body.light {
  /* day — the island's own palette, lifted from services/familiars/web/island.css
     so the landing page and the island are visibly one product.

     The island's usage discipline comes with it: ORANGE carries display type,
     fills and big numbers; GREEN carries small accents, links and hovers.
     That split is not decorative — #f8783d on #f3f6ee is about 2.4:1, which
     is fine for a 68px headline and unreadable as 13px body text. */
  --bg:        #f3f6ee;   /* island --bg    */
  --bg-1:      #fcfdf8;   /* island --paper */
  --bg-2:      #ffffff;
  --bg-3:      #e7eee3;   /* wells, a shade under the ground */
  --line:      #d5e0d4;   /* island --line  */
  --line-2:    #bccfba;
  --ink:       #143e35;   /* island --ink   */
  --ink-2:     #2f5a4e;
  --muted:     #648077;   /* island --muted */
  --faint:     #8da79c;

  /* display + fills */
  --coral:     #f8783d;   /* island --orange */
  --coral-2:   #e0601f;
  --coral-dim: rgba(248, 120, 61, .12);
  --on-coral:  #ffffff;

  /* small accents, verified states, links */
  --glass:     #057558;   /* island --green */
  --glass-dim: rgba(5, 117, 88, .1);
  --amber:     #9a7320;   /* island --gold, darkened to read at 12px */
  --amber-dim: rgba(236, 182, 76, .18);
  --red:       #ba473d;   /* island --bad   */
  --red-dim:   rgba(186, 71, 61, .1);

  --shadow: 0 1px 2px rgba(20,62,53,.05), 0 12px 30px -14px rgba(20,62,53,.2);
  color-scheme: light;
}

/* Orange is a display colour here. Anything small that leans on --coral for
   meaning switches to the island's green, which clears contrast at body size. */
body.light .eyebrow::before,
body.light .rules li:first-child b,
body.light .j-meta em,
body.light .lg-rule { color: var(--glass); }
body.light .link,
body.light .feature-link,
body.light .card .go,
body.light .j-links a:hover { color: var(--glass); }

/* ── base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, svg, video { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 3px; }

.rail { width: var(--rail); margin-inline: auto; }
.mono { font-family: var(--mono); font-variant-ligatures: none; }
.tnum { font-variant-numeric: tabular-nums; }

.skip {
  position: absolute; left: -9999px; z-index: 50;
  background: var(--coral); color: var(--on-coral);
  padding: 12px 18px; border-radius: 8px; font-weight: 600;
}
.skip:focus { left: 16px; top: 16px; }

/* visually gone, still announced — `hidden` would drop it from the
   accessibility tree and leave the input unlabelled */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* a label that sits above a block and names it */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
  margin: 0 0 18px;
}
.eyebrow::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--coral); flex: none;
}
.eyebrow.ok::before { background: var(--glass); }

/* ── header ─────────────────────────────────────────────────────────────── */
.head {
  position: sticky; top: 0; z-index: 30;
  padding: 14px 0;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.head.stuck { border-bottom-color: var(--line); }
.head .rail { display: flex; align-items: center; gap: 18px; }

.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 21px; font-weight: 600; letter-spacing: -.045em; line-height: 1;
}
.brand img { width: 28px; height: 28px; border-radius: 7px; }
/* the wordmark must be ONE flex item — a bare text node beside <i> makes
   two, and the container's gap then opens a hole before the full stop */
.brand .wordmark { display: inline-block; }
.brand i { font-style: normal; color: var(--coral); }

.head nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.head nav a {
  font-size: 14px; color: var(--muted); padding: 8px 12px; border-radius: 7px;
  transition: color .15s ease, background .15s ease;
}
.head nav a:hover { color: var(--ink); background: var(--bg-2); }

.beta {
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em;
  color: var(--muted); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 6px 11px; white-space: nowrap;
}
.mode {
  background: transparent; border: 1px solid var(--line-2); color: var(--muted);
  width: 33px; height: 33px; border-radius: 999px; cursor: pointer;
  font-size: 13px; line-height: 1; flex: none;
  transition: color .15s ease, border-color .15s ease;
}
.mode:hover { color: var(--coral); border-color: var(--coral); }

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero { position: relative; padding: 92px 0 0; text-align: center; }

/* The glow stays only on the dark ground, where it reads as atmosphere.
   On the island's pale green it rendered as a pink-tan smear — a dirty
   patch behind the headline rather than light. */
.hero::before {
  content: ""; position: absolute; inset: -140px 0 auto; height: 520px;
  background: radial-gradient(60% 70% at 50% 28%, var(--coral-dim), transparent 72%);
  pointer-events: none; z-index: -1;
}
body.light .hero::before { display: none; }

.hero-eyebrow {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
  margin: 0 0 22px;
}

.hero h1 {
  /* the measured HOTBOT proportions from docs/LANDING_DESIGN_SPEC_20261007.md:
     92px at weight 500 with tight negative tracking. Shrinking this to make
     room for the console below made the hero commit to neither. */
  font-size: clamp(38px, 8vw, 92px);
  font-weight: 500; line-height: 1.04; letter-spacing: -.05em;
  margin: 0; text-wrap: balance;
}
.hero h1 em {
  font-style: normal; color: var(--coral);
  display: inline-block;
  transition: opacity .16s ease, transform .16s ease;
}
/* never fades to nothing: a screenshot or an OG grab that lands mid-swap
   would otherwise capture a headline with its verb missing */
.hero h1 em.out { opacity: .3; transform: translateY(-.1em); }
/* the full stop belongs to the sentence, not the word, so it must not
   slide away with it */
.hero h1 em .dot { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .hero h1 em { transition: none; }
}
.hero-sub {
  font-size: clamp(16px, 1.8vw, 21px); color: var(--muted);
  margin: 26px auto 0; max-width: 46ch; text-wrap: balance;
}

/* one button, with room around it */
.hero-cta {
  margin-top: 34px; display: flex; flex-direction: column;
  align-items: center; gap: 14px;
}
/* HOTBOT's gate is a muted pill, not a slab — the restraint is the point.
   A solid orange block at this size shouts over a headline that was tuned
   not to. */
.btn.quiet {
  background: var(--coral-dim); color: var(--coral);
  border: 1px solid color-mix(in srgb, var(--coral) 42%, transparent);
  border-radius: 999px; padding: 13px 26px; font-weight: 600;
}
.btn.quiet:hover {
  background: var(--coral); color: var(--on-coral); border-color: var(--coral);
}
.hero-gate {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em;
  color: var(--faint);
}

/* ── the console ────────────────────────────────────────────────────────────
   The lesson from autoneco.xyz: do not put a brochure in front of a live
   product. Land the reader inside it. Left rail is what exists, the middle
   is what is happening, the right rail is what the middle just produced. */
.console {
  width: 100vw; margin: 92px 0 0 calc(50% - 50vw);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--bg-1); text-align: left;
}

.con-banner {
  padding: 13px clamp(18px, 3vw, 40px);
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  font-size: 13.5px; color: var(--muted);
}
.con-banner b { color: var(--ink); font-weight: 600; }

/* ── the find ───────────────────────────────────────────────────────────────
   Reports the result, not the refusal. The bar fills with what PASSED, so a
   good window reads as a fuller bar instead of a redder one — the previous
   version rendered an ordinary half hour as a solid wall of red and made the
   product look inert rather than the chain look dangerous. */
.find {
  display: flex; align-items: center; gap: clamp(20px, 4vw, 54px);
  flex-wrap: wrap;
  padding: 20px clamp(18px, 3vw, 40px);
  border-bottom: 1px solid var(--line); background: var(--bg-1);
  --find-c: var(--glass);
}
.find.none { --find-c: var(--muted); }

.find-lead { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.find-n {
  font-size: clamp(38px, 5vw, 58px); font-weight: 500; letter-spacing: -.05em;
  line-height: .9; color: var(--find-c); font-variant-numeric: tabular-nums;
}
.find-of { font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.find-of b { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }

.find-right { flex: 1 1 320px; min-width: 0; }
.find-bar {
  height: 10px; border-radius: 5px; background: var(--bg-3);
  border: 1px solid var(--line); overflow: hidden;
}
.find-fill {
  display: block; height: 100%; width: 0; background: var(--find-c);
  transition: width .8s cubic-bezier(.2,.8,.25,1);
}
.find-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); max-width: 72ch; }

@media (max-width: 640px) { .find { gap: 16px; } .find-right { flex-basis: 100%; } }

.con-grid {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr) 268px;
  gap: 1px; background: var(--line);
}
.con-left, .con-main, .con-right { background: var(--bg-1); min-width: 0; }
.con-left, .con-right { padding: 20px; }

.rail-lab {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
  margin: 0 0 12px; display: flex; align-items: center; gap: 8px;
}
.rail-lab .ver { color: var(--coral); letter-spacing: .04em; }
.rail-note { font-size: 12px; color: var(--faint); margin: 18px 0 0; line-height: 1.5; }

/* The chains, named with what is actually done on each. auton is Solana
   only and CLAUS is Ethereum only, so this is a real difference — but it is
   only worth stating as work, not as a row of logos. */
.chains { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.chains li { min-width: 0; }
.chains b {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--ink);
  letter-spacing: -.01em;
}
.chains span { display: block; font-size: 11.5px; color: var(--faint); line-height: 1.45; margin-top: 2px; }

.counters { margin: 0 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; }
.counters div { min-width: 0; }
.counters dt { font-size: 11px; color: var(--faint); margin-bottom: 3px; }
.counters dd {
  margin: 0; font-family: var(--mono); font-size: 21px; font-weight: 500;
  letter-spacing: -.035em; color: var(--ink);
}

.crew { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.crew li { display: flex; align-items: center; gap: 9px; padding: 5px 0; min-width: 0; }
.cd { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.crew .cn {
  font-size: 13px; color: var(--ink-2); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.crew .cr {
  margin-left: auto; font-family: var(--mono); font-size: 11px;
  color: var(--faint); white-space: nowrap;
}

/* ── tabs + panes ─────────────────────────────────────────────────────── */
.con-tabs {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.tab {
  background: transparent; border: 1px solid transparent; cursor: pointer;
  border-radius: 8px; padding: 7px 13px; font-size: 13.5px; color: var(--muted);
  display: inline-flex; align-items: center; gap: 7px;
}
.tab:hover { color: var(--ink); }
.tab.is-on { color: var(--ink); background: var(--bg-3); border-color: var(--line-2); }
.dotlive {
  width: 6px; height: 6px; border-radius: 50%; background: var(--glass);
  animation: bead 2.4s ease-out infinite;
}
.con-live {
  margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--faint);
  white-space: nowrap;
}
.con-live.done { color: var(--glass); }

.pane { min-height: 440px; }
.pane[hidden] { display: none; }
.pane-foot {
  margin: 0; padding: 13px 18px; border-top: 1px solid var(--line);
  background: var(--bg-2); font-size: 12px; color: var(--faint);
}

/* ── the island feed ──────────────────────────────────────────────────── */
.island-feed {
  list-style: none; margin: 0; padding: 0;
  max-height: 560px; overflow-y: auto;
}
.island-feed li {
  display: flex; gap: 11px; padding: 13px 18px;
  border-bottom: 1px solid var(--line); min-width: 0;
}
.island-feed .cd { margin-top: 6px; }
.island-feed .if-b { min-width: 0; }
.island-feed .if-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.island-feed .if-h b { font-size: 13.5px; font-weight: 600; }
.island-feed .if-to { font-size: 12px; color: var(--muted); }
.island-feed .if-k {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 7px;
}
.island-feed li.k-say .if-k { border-color: transparent; color: var(--muted); }
.island-feed .if-t { font-family: var(--mono); font-size: 11px; color: var(--faint); margin-left: auto; }
.island-feed p { margin: 0; font-size: 14px; color: var(--ink-2); max-width: none; }
.island-feed em { font-style: normal; font-family: var(--mono); font-size: 12.5px; }
.island-feed em.up { color: var(--glass); }
.island-feed em.dn { color: var(--red); }

/* ── right rail lists ─────────────────────────────────────────────────── */
.moving { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 8px; }
.moving a { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.moving .mv-s {
  font-family: var(--mono); font-size: 13px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.moving .mv-v {
  margin-left: auto; font-family: var(--mono); font-size: 12.5px;
  color: var(--glass); white-space: nowrap;
}
.moving .mv-v small { color: var(--faint); font-size: .8em; }
.moving a:hover .mv-s { color: var(--coral); }
.moving .mv-warn { display: block; font-size: 11.5px; color: var(--amber); margin-top: 3px; }
.moving .mv-none { font-size: 12.5px; color: var(--faint); line-height: 1.5; }

.rulehits { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 7px; }
.rulehits li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rulehits b {
  font-size: 12.5px; font-weight: 400; color: var(--ink-2); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rulehits .r-hit { margin-left: auto; }

@media (max-width: 1180px) {
  .con-grid { grid-template-columns: 206px minmax(0,1fr); }
  .con-right { grid-column: 1 / -1; }
  .con-right .moving, .con-right .rulehits { grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); }
}
@media (max-width: 760px) {
  .con-grid { grid-template-columns: 1fr; }
  .con-left { order: 3; }
  .counters { grid-template-columns: repeat(4, 1fr); }
  .pane { min-height: 320px; }
}

/* ── the instrument ─────────────────────────────────────────────────────── */
.rig {
  margin: 46px auto 0; text-align: left;
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow); overflow: hidden;
}

.rig-top {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 18px; border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.rig-title {
  font-family: var(--mono); font-size: 12px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}
.rig-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11.5px; color: var(--glass);
}
.rig-live .bead {
  width: 7px; height: 7px; border-radius: 50%; background: var(--glass);
  box-shadow: 0 0 0 0 var(--glass-dim); animation: bead 2.4s ease-out infinite;
}
@keyframes bead {
  0%   { box-shadow: 0 0 0 0 var(--glass-dim); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.rig-in { display: flex; gap: 10px; padding: 18px; flex-wrap: wrap; }
.rig-in input {
  flex: 1 1 320px; min-width: 0;
  background: var(--bg-3); border: 1px solid var(--line-2); color: var(--ink);
  border-radius: 10px; padding: 13px 15px;
  font-family: var(--mono); font-size: 13.5px; letter-spacing: -.01em;
}
.rig-in input::placeholder { color: var(--faint); }
.rig-in input:focus { outline: none; border-color: var(--coral); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--coral); color: var(--on-coral);
  font-weight: 600; font-size: 14.5px; letter-spacing: -.01em;
  border: 1px solid transparent; border-radius: 10px;
  padding: 13px 22px; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, transform .1s ease;
}
.btn:hover { background: var(--coral-2); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: progress; }
.btn.ghost {
  background: transparent; color: var(--ink-2); border-color: var(--line-2);
}
.btn.ghost:hover { border-color: var(--coral); color: var(--coral); background: transparent; }
.btn.sm { padding: 7px 14px; font-size: 13px; border-radius: 8px; }

/* example chips — one tap and the instrument runs */
.chips { display: flex; gap: 7px; flex-wrap: wrap; padding: 0 18px 16px; align-items: center; }
.chips .lab { font-size: 12.5px; color: var(--faint); margin-right: 2px; }
.chip {
  font-family: var(--mono); font-size: 12px;
  background: var(--bg-3); border: 1px solid var(--line);
  color: var(--ink-2); border-radius: 999px; padding: 6px 12px; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.chip:hover { border-color: var(--coral); color: var(--coral); }
.chip[aria-pressed="true"] { border-color: var(--coral); color: var(--coral); background: var(--coral-dim); }

/* the readout */
.rig-out { border-top: 1px solid var(--line); background: var(--bg-2); }
.rig-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 18px 18px 0;
}
.rig-sym { font-size: 26px; font-weight: 600; letter-spacing: -.035em; }
.rig-addr { font-family: var(--mono); font-size: 12.5px; color: var(--faint); }

.verdict {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  border-radius: 999px; padding: 5px 11px; border: 1px solid;
}
.verdict.good { color: var(--glass); border-color: var(--glass); background: var(--glass-dim); }
.verdict.warn { color: var(--amber); border-color: var(--amber); background: var(--amber-dim); }
.verdict.bad  { color: var(--red);   border-color: var(--red);   background: var(--red-dim); }

.grid4 {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--line); margin: 18px 0 0;
  border-top: 1px solid var(--line);
}
.cell { background: var(--bg-2); padding: 16px 18px; min-width: 0; }
.cell .k {
  display: block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--faint);
  margin-bottom: 7px;
}
.cell .v {
  display: block; font-family: var(--mono); font-size: 22px; font-weight: 500;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.cell .v.sm { font-size: 13px; line-height: 1.45; }
.cell .v small { font-size: .5em; color: var(--muted); font-weight: 400; }
.rig-why {
  margin: 0; padding: 10px 18px 16px; font-size: 14.5px; color: var(--ink-2);
}
.cell .v.hi { color: var(--coral); }
.cell .v.ok { color: var(--glass); }
.cell .v.no { color: var(--red); }

/* where the number came from — the part that makes it checkable */
.prov {
  display: flex; gap: 8px 20px; flex-wrap: wrap; align-items: center;
  padding: 12px 18px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11.5px; color: var(--faint);
  background: var(--bg-1);
}
.prov b { font-weight: 500; color: var(--muted); }
.prov a { color: var(--muted); border-bottom: 1px solid var(--line-2); }
.prov a:hover { color: var(--coral); border-color: var(--coral); }

.rig-note {
  padding: 14px 18px; font-size: 13.5px; color: var(--muted);
  border-top: 1px solid var(--line);
}
.rig-note.bad { color: var(--red); }

/* ── the watch ──────────────────────────────────────────────────────────────
   The centrepiece: an entire launchpad's last ten minutes, read and judged
   in the visitor's browser. Everything in here is produced by tako.js from
   a live read, so nothing in this block can be styled into saying something
   the chain did not say. */
.watch { margin: 46px auto 0; text-align: left; }

.watch-status {
  font-family: var(--mono); font-size: 13px; color: var(--muted);
  padding: 16px 20px; margin: 0; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px; min-height: 48px;
}
.watch-status:empty { display: none; }
.watch-status::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--coral); animation: bead 1.3s ease-out infinite;
}
.watch-status.bad { color: var(--red); }
.watch-status.bad::before { background: var(--red); animation: none; }

.score {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1px; background: var(--line); border-bottom: 1px solid var(--line);
}
.score .sn { background: var(--bg-2); padding: 22px 20px; display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.score .n {
  font-size: clamp(28px, 3.6vw, 46px); font-weight: 500; letter-spacing: -.055em;
  line-height: .9; color: var(--ink); font-variant-numeric: tabular-nums;
}
.score .sn.bad .n { color: var(--red); }
.score .sn.ok .n { color: var(--glass); }
.score .sn.wal .n { color: var(--coral); }
.score .l { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
@media (max-width: 860px) { .score { grid-template-columns: 1fr 1fr; } }

/* the rules, printed, so the verdicts can be argued with */
.rules { margin: 0; padding: 18px 20px; border-bottom: 1px solid var(--line); background: var(--bg-1); }
.rules ol { margin: 0; padding-left: 22px; display: grid; gap: 7px; }
.rules li { font-size: 14px; color: var(--ink-2); }
.rules li b { font-weight: 600; color: var(--ink); }

/* the rulebook: each rule carries when it was written, what wrote it, and
   what it caught in the round above — so a rule that never fires is
   visible as dead weight rather than quietly padding the list */
.rulebook { gap: 14px !important; }
.rulebook li {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "title hit" "why hit" "meta hit";
  gap: 3px 16px; align-items: start;
  padding-bottom: 13px; border-bottom: 1px solid var(--line);
}
.rulebook li:last-child { border-bottom: 0; padding-bottom: 0; }
.rulebook b { grid-area: title; font-size: 14.5px; }
.rulebook .r-why { grid-area: why; color: var(--muted); font-size: 13.5px; }
.rulebook .r-meta { grid-area: meta; color: var(--faint); font-size: 12.5px; margin-top: 3px; }
.rulebook .r-meta em {
  font-style: normal; font-family: var(--mono); font-size: 11px;
  letter-spacing: .04em; color: var(--coral); margin-right: 5px;
}
.rulebook .r-hit {
  grid-area: hit; align-self: center; white-space: nowrap;
  font-family: var(--mono); font-size: 11.5px;
  color: var(--glass); border: 1px solid var(--glass);
  background: var(--glass-dim); border-radius: 999px; padding: 5px 11px;
}
.rulebook .r-hit.zero { color: var(--faint); border-color: var(--line-2); background: transparent; }

@media (max-width: 620px) {
  .rulebook li { grid-template-columns: 1fr; grid-template-areas: "title" "why" "meta" "hit"; }
  .rulebook .r-hit { justify-self: start; margin-top: 8px; }
}
.rules-lab {
  margin: 0 0 11px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
.rules .caveat { margin: 13px 0 0; font-size: 13px; color: var(--muted); }
.rules li:first-child b { color: var(--coral); }

.watch-list {
  list-style: none; margin: 0; padding: 0;
  max-height: 430px; overflow-y: auto;
}
.watch-lede {
  margin: 0; padding: 14px 20px; border-bottom: 1px solid var(--line);
  font-size: 14px; color: var(--ink-2); background: var(--bg-2);
}

.watch-list li {
  display: grid; grid-template-columns: 2.6em minmax(0,1fr) 10.5em 24px;
  gap: 14px; align-items: center;
  padding: 11px 20px; border-bottom: 1px solid var(--line);
  border-left: 3px solid var(--red); min-width: 0;
}
.watch-list li.mid { border-left-color: var(--amber); }
.watch-list li.ok { border-left-color: var(--glass); background: var(--glass-dim); }

/* rows that arrived since the last round announce themselves once */
.watch-list li.fresh { position: relative; animation: arrive .7s ease-out; }
@keyframes arrive { from { background: var(--coral-dim); transform: translateX(-4px); } }
.newpip { position: absolute; left: -3px; top: 0; bottom: 0; width: 3px; background: var(--coral); }
.counters dd.tick { animation: tick .5s ease-out; }
@keyframes tick { from { color: var(--coral); transform: translateY(-2px); } }

.watch-list .cq {
  font-family: var(--mono); font-size: 14px; font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--red); text-align: right;
}
.watch-list li.mid .cq { color: var(--amber); }
.watch-list li.ok .cq { color: var(--glass); }

.cmain { min-width: 0; display: grid; gap: 3px; }
.chead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.chead .cs {
  font-family: var(--mono); font-size: 13.5px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 15ch;
}
.cage, .ctax {
  font-family: var(--mono); font-size: 11px; color: var(--faint); white-space: nowrap;
}
.ctax { color: var(--muted); }

/* where the tax actually goes — the parts the single percentage hides */
.csplit { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.csplit .sp {
  font-style: normal; font-family: var(--mono); font-size: 10px;
  letter-spacing: .02em; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 6px;
  white-space: nowrap;
}
.csplit .sp.cre { color: var(--glass); border-color: color-mix(in srgb, var(--glass) 40%, transparent); }
.csplit .sp.warn { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }

.cflags { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.cflags .fg {
  font-style: normal; font-size: 11.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cflags .fg::before { content: "· "; color: var(--line-2); }
.cflags .fg:first-child::before { content: ""; }
.cflags .fg.f-factory, .cflags .fg.f-copycat { color: var(--red); }
.cflags .fg.ok { color: var(--glass); }

.cright { display: grid; gap: 2px; justify-items: end; min-width: 0; }
.watch-list .ce {
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-2);
  font-variant-numeric: tabular-nums; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.watch-list .ce small { font-size: .8em; color: var(--faint); }
.watch-list .ce.none { color: var(--faint); font-size: 11.5px; }
.watch-list li.ok .ce { color: var(--glass); }
.cwal { font-size: 10.5px; color: var(--faint); white-space: nowrap; }

.watch-list .cl { color: var(--faint); font-size: 13px; text-align: center; }
.watch-list .cl:hover { color: var(--coral); }

.watch-foot {
  display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: center;
  padding: 13px 20px; border-top: 1px solid var(--line);
  background: var(--bg-1);
  font-family: var(--mono); font-size: 11.5px; color: var(--faint);
}
.watch-foot b { font-weight: 500; color: var(--muted); }
.watch-foot:empty { display: none; }

/* the agent whose job this is, saying it in their own voice. Borrowed
   structure from claus.si, which is right that a mechanic lands harder
   when a character owns it than when a feature grid lists it. */
.byline {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px; border-top: 1px solid var(--line);
  background: var(--bg-1);
}
.byline img { width: 44px; height: 44px; flex: none; }
.byline .say { min-width: 0; }
.byline .who {
  font-family: var(--mono); font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 5px;
}
.byline .who b { color: var(--glass); font-weight: 500; }
.byline p { margin: 0; font-size: 14.5px; color: var(--ink-2); max-width: 64ch; }

/* ── the island scene ───────────────────────────────────────────────────────
   Full-bleed art, not a screenshot of a UI. The chrome that sits on top is
   real markup, so it scales, reflows and reads at any width — a captured
   interface does none of those things and always looks like a captured
   interface. */
.scene {
  position: relative;
  width: 100vw; margin-left: calc(50% - 50vw);
  isolation: isolate;
}

/* The art gets its own box at the artwork's own aspect ratio, so the
   octopuses in the shallows are never sliced by whatever sits under them.
   The tape is a sibling, not an overlay, for the same reason. */
/* `max-height` alongside `aspect-ratio` shrinks the WIDTH to keep the ratio —
   it capped this at 1144px and left a bare strip down the right. Width is
   fixed at 100% and only the very wide case switches to a cropped height. */
.scene-art {
  position: relative;
  width: 100%;
  aspect-ratio: 2000 / 1119;
  background: var(--bg-3) center / cover no-repeat;
  background-image: url("./assets/product/island-night.jpg");
}
body.light .scene-art { background-image: url("./assets/product/island-day.jpg"); }

@media (min-width: 1700px) {
  .scene-art { aspect-ratio: auto; height: 660px; background-position: center 64%; }
}

/* the art melts into the page instead of ending at a hard edge */
.scene-art::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
    var(--bg) 0%, transparent 20%, transparent 78%,
    color-mix(in srgb, var(--bg) 55%, transparent) 100%);
}

/* ── the islanders ──────────────────────────────────────────────────────────
   The crew stand on the painting as markup, not as pixels baked into a
   screenshot: their records come from the same snapshot the feed uses, so
   they cannot say something the engine did not. Positions are percentages
   of the artwork, chosen to sit on the sand and in the shallows and to keep
   clear of the lighthouse. */
.islanders { position: absolute; inset: 0; z-index: 3; }
.islander {
  position: absolute; transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: max-content;
}
.islander img {
  width: clamp(20px, 2.4vw, 38px); height: auto;
  filter: drop-shadow(0 4px 7px rgba(0,0,0,.5));
  animation: bob 5s ease-in-out infinite;
}
/* a plate, not bare text — the painting runs from white sand to dark rock
   and a text shadow alone loses the name over half of it */
.islander .ip {
  font-family: var(--mono); font-size: clamp(7px, .68vw, 9.5px);
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  color: #f2f7fa; line-height: 1.35; text-align: center;
  background: rgba(6, 14, 22, .62);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 5px; padding: 2px 6px;
  backdrop-filter: blur(3px) saturate(130%);
}
.islander .ir { display: block; opacity: .72; font-size: .9em; }
body.light .islander .ip {
  color: #0f1e27;
  background: rgba(255, 255, 255, .74);
  border-color: rgba(16, 33, 43, .14);
}
@media (max-width: 760px) { .islanders { display: none; } }

/* six across is too tight on a phone — three and three reads better */
@media (max-width: 560px) {
  .lineup.named { flex-wrap: wrap; gap: 18px 14px; }
  .lineup.named li { flex: 0 0 calc(33.333% - 10px); }
  .lineup.named img { width: 56px; }
}

/* the tape — the agents' own words, as recorded */
.tape {
  position: relative; z-index: 3;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
  overflow: hidden;
}
.tape { display: flex; align-items: stretch; }
.tape-lab {
  flex: none; display: flex; align-items: center;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
  padding: 0 18px; margin: 0; white-space: nowrap;
  border-right: 1px solid var(--line); background: var(--bg-2);
}
.tape-win { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.tape-run {
  display: flex; gap: 0; width: max-content;
  animation: drift 64s linear infinite;
  padding: 13px 0;
}
.tape:hover .tape-run, .tape:focus-within .tape-run { animation-play-state: paused; }
@keyframes drift { from { transform: translateX(0) } to { transform: translateX(-50%) } }

.tape-run q {
  display: inline-flex; align-items: baseline; gap: 9px;
  padding: 0 26px; white-space: nowrap; quotes: none;
  font-size: 14px; color: var(--ink-2);
  border-right: 1px solid var(--line);
}
.tape-run q b { font-weight: 600; color: var(--ink); }
.tape-run q em {
  font-style: normal; font-family: var(--mono); font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.tape-run q em.up { color: var(--glass); }
.tape-run q em.dn { color: var(--red); }

@media (prefers-reduced-motion: reduce) {
  .tape-run { animation: none; width: auto; flex-wrap: wrap; }
  .tape-run q { border-right: 0; }
}

/* ── the loop ───────────────────────────────────────────────────────────────
   Numbered because it genuinely is a sequence that feeds back into itself,
   not because numbers look tidy. Each step says whether it runs today. */
.loop {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px;
  counter-reset: none;
}
.loop li {
  position: relative; min-width: 0;
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 13px; padding: 22px 22px 20px;
  display: flex; flex-direction: column;
}
/* the arrow that makes it a loop rather than a list */
.loop li:not(:last-child)::after {
  content: "→"; position: absolute; top: 50%; right: -13px;
  transform: translateY(-50%); color: var(--line-2); font-size: 15px;
  line-height: 1; z-index: 2;
}
.lp-n {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  color: var(--coral); display: block; margin-bottom: 12px;
}
.loop b { display: block; font-size: 16.5px; font-weight: 600; letter-spacing: -.025em; margin-bottom: 7px; }
.loop p { font-size: 14px; color: var(--muted); margin: 0 0 16px; max-width: none; }
.lp-s {
  margin-top: auto; align-self: flex-start;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em;
  border-radius: 999px; padding: 5px 10px;
  color: var(--faint); border: 1px solid var(--line-2);
}
.lp-s.on { color: var(--glass); border-color: var(--glass); background: var(--glass-dim); }

@media (max-width: 980px) {
  .loop { grid-template-columns: 1fr 1fr; }
  .loop li:nth-child(2)::after { display: none; }
}
@media (max-width: 560px) {
  .loop { grid-template-columns: 1fr; }
  .loop li::after { display: none !important; }
}

/* ── the briefs ─────────────────────────────────────────────────────────────
   Versions down a spine, each stamped with the book at the moment it
   changed. The stamp is the mechanism, not decoration: it is what stops an
   edit from quietly erasing the losses that prompted it. */
.briefs { list-style: none; margin: 0; padding: 0 0 0 26px; display: grid; gap: 18px; position: relative; }
.briefs::before {
  content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px;
  width: 1px; background: var(--line-2);
}
.briefs li { position: relative; }
.briefs li::before {
  content: ""; position: absolute; left: -26px; top: 7px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--line-2);
}
.briefs li.bf-now::before { border-color: var(--coral); background: var(--coral); }
.bf-v {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}
.briefs li.bf-now .bf-v { color: var(--coral); }
.bf-t { margin: 5px 0 5px; font-size: 16.5px; color: var(--ink); max-width: 60ch; }
.bf-s { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

/* ── the ledger ─────────────────────────────────────────────────────────────
   One card per agent: the number, the record, and the agent reading out its
   own book. The monologue is composed from engine state, so a losing agent
   says it is losing — the point of publishing a ledger is lost the moment
   it only contains good news. */
.ledger { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ledger > li {
  display: grid; grid-template-columns: 190px minmax(0, 1fr);
  gap: 0; background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 13px; overflow: hidden;
}
.lg-side {
  padding: 20px; background: var(--bg-2); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.lg-who { display: flex; align-items: center; gap: 9px; }
.lg-who img { width: 30px; height: 30px; flex: none; }
.lg-name { font-size: 15.5px; font-weight: 600; letter-spacing: -.02em; }
.lg-tag { font-size: 12px; color: var(--faint); margin-bottom: 9px; }
.lg-eq {
  font-family: var(--mono); font-size: 25px; font-weight: 500;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.lg-pnl { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.lg-pnl.up { color: var(--glass); }
.lg-pnl.dn { color: var(--red); }
.lg-rec {
  margin-top: auto; padding-top: 12px;
  font-family: var(--mono); font-size: 11.5px; color: var(--faint);
  display: flex; gap: 8px 12px; flex-wrap: wrap;
}
.lg-say { padding: 20px 24px; min-width: 0; display: flex; flex-direction: column; }
.lg-say p { margin: 0; font-size: 15px; color: var(--ink-2); max-width: 70ch; }
.lg-rule {
  margin-top: auto !important; padding-top: 14px;
  font-size: 12.5px !important; color: var(--faint) !important;
  border-top: 1px solid var(--line); font-family: var(--mono);
}
@media (max-width: 760px) {
  .ledger > li { grid-template-columns: 1fr; }
  .lg-side { border-right: 0; border-bottom: 1px solid var(--line); }
  .lg-rec { margin-top: 10px; }
}

/* ── the journal ────────────────────────────────────────────────────────────
   Borrowed from claus.si, which is right that an agent with a running,
   dated record reads as alive where a feature list reads as a brochure.
   The difference is what goes in it: these are findings with addresses
   attached, not musings. */
.journal { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.journal li {
  background: var(--bg-1); border: 1px solid var(--line);
  border-left: 3px solid var(--coral);
  border-radius: 13px; padding: 24px 28px;
}
.j-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.j-date {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--faint);
}
.j-tag {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  color: var(--coral); background: var(--coral-dim);
  border-radius: 999px; padding: 4px 11px;
}
.journal h3 {
  margin: 0 0 12px; font-size: clamp(19px, 2.2vw, 25px); font-weight: 500;
  letter-spacing: -.032em; line-height: 1.2;
}
.journal p { font-size: 15.5px; color: var(--ink-2); margin: 0 0 12px; max-width: 72ch; }
.j-kick {
  color: var(--ink) !important; border-top: 1px solid var(--line);
  padding-top: 13px; margin-bottom: 0 !important;
}
.j-kick b { color: var(--coral); font-weight: 500; }
.j-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.j-links a {
  font-size: 12.5px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px;
  transition: border-color .15s ease, color .15s ease;
}
.j-links a:hover { border-color: var(--coral); color: var(--coral); }

/* ── the reef ───────────────────────────────────────────────────────────── */
.reef { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.reef li {
  display: grid; grid-template-columns: auto 1fr auto; gap: 16px;
  align-items: center; background: var(--bg-1);
  border: 1px solid var(--line); border-left: 3px solid var(--red);
  border-radius: 10px; padding: 14px 18px;
}
.reef .sym { font-family: var(--mono); font-size: 14.5px; font-weight: 500; }
.reef .took { font-size: 13px; color: var(--muted); min-width: 0; }
.reef .deep {
  font-family: var(--mono); font-size: 16px; color: var(--red);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rule {
  margin-top: 20px; background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: 12px; padding: 20px 24px;
}
.rule b { display: block; font-size: 16px; margin-bottom: 6px; }
.rule span { font-size: 14.5px; color: var(--muted); }

/* ── the gate ───────────────────────────────────────────────────────────────
   One refusal from the recorded run, rebuilt as markup. A screenshot of the
   whole console says "here is a product"; this says what the product did. */
.gate {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; box-shadow: var(--shadow);
}
.gate-top {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--bg-2);
}
.gate-req {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}
.gate-tool { font-size: 15px; font-weight: 500; }
.gate-agent { margin-left: auto; font-size: 12.5px; color: var(--faint); }

.gate-verdict {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 20px; background: var(--red-dim);
  border-bottom: 1px solid var(--line);
}
.gate-x {
  width: 28px; height: 28px; flex: none; border-radius: 8px;
  display: grid; place-items: center; font-size: 14px;
  background: var(--red); color: var(--bg);
}
.gate-verdict b { display: block; font-size: 15.5px; color: var(--red); margin-bottom: 3px; }
.gate-verdict span { font-size: 14px; color: var(--ink-2); }

.gate-ev { margin: 0; padding: 4px 20px 16px; }
.gate-ev > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--line);
}
.gate-ev > div:last-child { border-bottom: 0; }
.gate-ev dt { font-size: 14px; color: var(--muted); }
.gate-ev dd { margin: 0; font-size: 14px; color: var(--ink); text-align: right; }

.gate-foot {
  margin: 0; padding: 12px 20px; border-top: 1px solid var(--line);
  background: var(--bg-2);
  font-family: var(--mono); font-size: 11px; color: var(--faint);
}

/* ── contracts ──────────────────────────────────────────────────────────── */
.contracts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.contracts a { background: var(--bg-1); padding: 16px 20px; min-width: 0; display: block; transition: background .15s ease; }
.contracts a:hover { background: var(--bg-2); }
.contracts .k { display: block; font-size: 13.5px; color: var(--ink-2); margin-bottom: 6px; }
.contracts .a { display: block; font-family: var(--mono); font-size: 12px; color: var(--faint); overflow-wrap: anywhere; }
.contracts a:hover .a { color: var(--coral); }

/* ── section frame ──────────────────────────────────────────────────────── */
.sec { padding: 110px 0; border-top: 1px solid var(--line); }
.sec.tight { padding: 84px 0; }
.sec h2 {
  font-size: clamp(27px, 3.7vw, 46px); font-weight: 500;
  line-height: 1.08; letter-spacing: -.042em; margin: 0 0 20px;
  text-wrap: balance;
}
.sec h2 em { font-style: normal; color: var(--muted); }
.sec h2 b { font-weight: 500; color: var(--coral); }
.sec p { color: var(--ink-2); font-size: 16.5px; margin: 0 0 15px; max-width: 54ch; }
.sec p.sm { color: var(--muted); font-size: 14.5px; }

.split { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: 60px; align-items: center; }
.split.flip > *:first-child { order: 2; }
.stack { display: grid; gap: 34px; }
.stack .copy { max-width: 62ch; }

.link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: var(--coral); margin-top: 6px;
}
.link .arr { transition: transform .18s ease; }
.link:hover .arr { transform: translateX(4px); }
.link.quiet { color: var(--muted); font-weight: 500; }

figure { margin: 0; }
figure img {
  width: 100%; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow);
}
figcaption { font-size: 13px; color: var(--muted); margin-top: 13px; }

/* ── facts ──────────────────────────────────────────────────────────────────
   Findings go in a list of single facts, not paragraphs. Prose makes the
   reader hunt for the number; a list puts the number first and stops. */
.facts { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; }
.facts li {
  display: flex; gap: 11px; align-items: baseline;
  font-size: 15.5px; color: var(--ink-2); line-height: 1.45;
}
.facts li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; flex: none;
  background: var(--line-2); transform: translateY(-3px);
}
.facts b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.sec p.lead { font-size: 15.5px; color: var(--muted); margin: 0 0 16px; }

/* ── the finding (bar chart) ────────────────────────────────────────────── */
.finding {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 14px; padding: 26px 28px;
}
.bars { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.bars li { display: grid; grid-template-columns: 112px 1fr auto; gap: 14px; align-items: center; }
.bars .lbl { font-family: var(--mono); font-size: 12px; color: var(--muted); text-align: right; }
.bars .track { background: var(--bg-3); border-radius: 5px; height: 26px; overflow: hidden; }
.bars .fill {
  height: 100%; border-radius: 5px;
  /* a mix with the ink goes almost invisible on the island's pale green
     ground — the muted token holds its weight in both themes */
  background: var(--muted);
  min-width: 3px;
  width: 0; transition: width .9s cubic-bezier(.2,.8,.25,1);
}
.bars li.flag .fill { background: var(--coral); }
.bars li.flag .lbl { color: var(--coral); }
.bars .n {
  font-family: var(--mono); font-size: 13px; color: var(--ink-2);
  font-variant-numeric: tabular-nums; min-width: 2.5em; text-align: right;
}
.finding-foot {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11.5px; color: var(--faint);
  display: flex; gap: 8px 18px; flex-wrap: wrap;
}

.bignum { display: flex; align-items: baseline; gap: 14px; margin: 0 0 6px; }
.bignum .n {
  font-size: clamp(50px, 8vw, 92px); font-weight: 500; letter-spacing: -.055em;
  line-height: .92; color: var(--coral); font-variant-numeric: tabular-nums;
}
.bignum .n i { font-style: normal; font-size: .46em; margin-left: .04em; }
.bignum .of { font-size: 17px; color: var(--muted); max-width: 15ch; line-height: 1.35; }

/* ── product cards ──────────────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.card {
  display: flex; flex-direction: column;
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 13px; padding: 22px 24px 20px; min-width: 0;
  transition: border-color .18s ease, transform .18s ease;
}
a.card:hover { border-color: var(--coral); transform: translateY(-3px); }
.card h3 { font-size: 17.5px; font-weight: 600; letter-spacing: -.025em; margin: 0 0 7px; }
.card p { font-size: 14.5px; color: var(--muted); margin: 0; max-width: none; }
.card .tag {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: 13px; color: var(--faint);
}
.card .tag.on { color: var(--glass); }
.card .go { margin-top: auto; padding-top: 16px; font-size: 14px; font-weight: 600; color: var(--coral); }
.card .go .arr { display: inline-block; transition: transform .18s ease; }
a.card:hover .go .arr { transform: translateX(4px); }

/* ── the arms, drawn ────────────────────────────────────────────────────────
   Eight capabilities as eight limbs of one animal. A grid of boxes can list
   them; only a drawing can say they belong to the same body, which is the
   whole reason the company is called an octopus.

   Everything lives in one viewBox so arms, body and labels scale as a unit —
   no absolutely-positioned HTML chasing SVG coordinates on resize. The SVG
   reads the page's own custom properties, so it themes with everything else. */
.tako-arms { margin: 0; }
.tako-arms svg { width: 100%; height: auto; overflow: visible; }

.tako-arms .arm path {
  fill: none;
  stroke: var(--line-2);
  stroke-width: 3.5;
  stroke-linecap: round;
}
/* the three that work today are drawn as living limbs, not hairlines */
.tako-arms .arm.live path {
  stroke: var(--coral);
  stroke-width: 6;
}
/* the body sits above the arms so they read as emerging from under it */
.tako-arms image { overflow: visible; }

.tako-arms .lbl text {
  font-family: var(--sans);
  font-size: 21px; font-weight: 600; letter-spacing: -.02em;
  fill: var(--muted);
}
.tako-arms .lbl.live text { fill: var(--ink); }
.tako-arms .lbl text.sub {
  font-size: 13px; font-weight: 400; letter-spacing: 0;
  fill: var(--faint);
}

.tako-arms figcaption {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-top: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  color: var(--faint);
}
.tako-arms .key {
  width: 16px; height: 3px; border-radius: 2px;
  background: var(--line-2); display: inline-block;
}
.tako-arms .key.live { background: var(--coral); height: 5px; }
.tako-arms figcaption .key:not(:first-child) { margin-left: 16px; }

/* On a phone the eight labels collide, so the arms shorten and the type
   drops rather than the diagram overflowing its rail. */
@media (max-width: 760px) {
  .tako-arms .lbl text { font-size: 30px; }
  .tako-arms .lbl text.sub { font-size: 19px; }
  .tako-arms .arm path { stroke-width: 4; }
  .tako-arms .arm.live path { stroke-width: 8; }
}

/* ── the coin ───────────────────────────────────────────────────────────── */
.splits { display: grid; gap: 11px; }
.splits > div {
  display: flex; align-items: baseline; gap: 18px;
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 12px; padding: 20px 24px;
}
.splits .pc {
  font-family: var(--mono); font-size: 34px; font-weight: 500;
  letter-spacing: -.045em; color: var(--coral); min-width: 2.6em;
  font-variant-numeric: tabular-nums;
}
.splits .pc i { font-style: normal; font-size: .5em; margin-left: .06em; }
.splits .tx { font-size: 15.5px; color: var(--ink-2); }
.splits .tx small { display: block; color: var(--faint); font-size: 13px; margin-top: 3px; }

/* ── numbers strip ──────────────────────────────────────────────────────── */
.strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 26px; }
.strip .v {
  display: block; font-size: clamp(27px, 3.3vw, 42px); font-weight: 500;
  letter-spacing: -.045em; font-variant-numeric: tabular-nums; line-height: 1;
}
.strip .k { display: block; font-size: 13.5px; color: var(--muted); margin-top: 10px; line-height: 1.4; }
.strip .s { display: block; font-family: var(--mono); font-size: 11px; color: var(--faint); margin-top: 5px; }

/* ── closing ────────────────────────────────────────────────────────────── */
/* A full stop: one statement at the largest size on the page, one line
   under it, one button, and the crew lined up with room to breathe.
   Nothing else competes for attention here. */
.close { padding: 136px 0 110px; border-top: 1px solid var(--line); text-align: center; }
.close h2 {
  font-size: clamp(42px, 7.4vw, 94px); font-weight: 500;
  letter-spacing: -.055em; line-height: 1.02; margin: 0; text-wrap: balance;
}
.close h2 em { font-style: normal; color: var(--coral); }
.close p { color: var(--muted); margin: 26px auto 36px; max-width: 46ch; font-size: 17px; }
.close .row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.lineup {
  list-style: none; margin: 86px 0 0; padding: 0;
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(8px, 2.6vw, 40px); flex-wrap: wrap;
}
.lineup li { line-height: 0; }

/* the hero copy of the lineup carries names, so the cast is learned once */
.lineup.named { margin: 72px 0 0; align-items: flex-start; gap: clamp(10px, 2.6vw, 38px); }
.lineup.named li { line-height: 1.4; text-align: center; min-width: 0; }
.lineup.named img { width: clamp(58px, 7.4vw, 108px); }
.lineup.named strong {
  display: block; margin-top: 8px; font-size: 14px; font-weight: 600;
  letter-spacing: -.02em;
}
.lineup.named span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }

.hero-hand {
  margin: 30px auto 0; font-size: 14.5px; color: var(--muted);
}
.lineup img {
  width: clamp(62px, 9.2vw, 132px); height: auto;
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.34));
}
body.light .lineup img { filter: drop-shadow(0 16px 20px rgba(30,40,50,.16)); }
/* the hero row stays still — the cast is read, not watched */
@keyframes bob { 50% { transform: translateY(-11px); } }

/* ── footer ─────────────────────────────────────────────────────────────── */
.foot { padding: 32px 0 56px; border-top: 1px solid var(--line); }
.foot .rail { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.foot p { color: var(--faint); font-size: 13.5px; margin: 0; }
.foot nav { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; }
.foot nav a { font-size: 13.5px; color: var(--muted); }
.foot nav a:hover { color: var(--coral); }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  :root { --rail: calc(100% - 36px); }
  .split { grid-template-columns: 1fr; gap: 34px; }
  .split.flip > *:first-child { order: 0; }
  .cards { grid-template-columns: 1fr 1fr; }
  .arms { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid4 { grid-template-columns: 1fr 1fr; }
  .sec { padding: 76px 0; }
  .hero { padding-top: 52px; }
}
@media (max-width: 620px) {
  .cards { grid-template-columns: 1fr; }
  .arms { grid-template-columns: 1fr; }
  .strip { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .grid4 { grid-template-columns: 1fr; }
  .head nav a:not(.keep) { display: none; }
  .bars li { grid-template-columns: 88px 1fr auto; gap: 10px; }
  .bars .lbl { font-size: 11px; }
  .watch-list li { grid-template-columns: 2.2em minmax(0,1fr) 22px; gap: 10px; row-gap: 6px; }
  .cright { grid-column: 2 / 3; justify-items: start; }
  .csplit { display: none; }
  .foot nav { margin-left: 0; width: 100%; }
  .bignum { flex-direction: column; gap: 6px; }
  .bignum .of { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── mechanics shipped ──────────────────────────────────────────────────────
   CLAUS's "Number of Hooks 3" with a dotted next slot is the hype engine:
   a count of shipped things that climbs, each one named. Ours lists seven
   because seven are running — the eighth is drawn as pending, not claimed. */
.mech-head { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 30px; }
.mech-n {
  font-size: clamp(54px, 7vw, 86px); font-weight: 500; letter-spacing: -.055em;
  line-height: .86; color: var(--coral); font-variant-numeric: tabular-nums;
}
.mech-head h2 { margin: 0 0 8px; }
.mech-head p { margin: 0; color: var(--muted); max-width: 44ch; }

.mechs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.mechs li {
  display: grid; grid-template-columns: 2.4em minmax(0,1fr) auto;
  gap: 16px; align-items: baseline;
  background: var(--bg-1); padding: 16px 20px;
}
.mechs li.m-next { background: var(--bg-3); }
.m-n { font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: .08em; }
.mechs li.m-next .m-n { color: var(--coral); }
.mechs b { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 3px; }
.mechs span { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.m-live {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em;
  color: var(--glass); border: 1px solid color-mix(in srgb, var(--glass) 40%, transparent);
  background: var(--glass-dim); border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
.mechs li.m-next .m-live {
  color: var(--faint); border-style: dashed;
  border-color: var(--line-2); background: transparent;
}
@media (max-width: 700px) {
  .mechs li { grid-template-columns: 2em minmax(0,1fr); }
  .m-live { grid-column: 2; justify-self: start; margin-top: 6px; }
  .mech-head { flex-direction: column; gap: 10px; }
}

/* ── the live band ──────────────────────────────────────────────────────────
   The product sits inside the website rather than replacing it. A visitor who
   has never heard of this gets told what it is first; the console starts
   immediately under the fold, which is the whole argument, but it is not the
   greeting. The frame is ours — the console keeps its own two rails instead
   of the page borrowing somebody else's sidebar. */
.livewrap {
  width: 100vw; margin-left: calc(50% - 50vw);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--bg-1);
}
.live-intro { padding: 44px 0 26px; }
.live-intro h2 {
  font-size: clamp(24px, 3.1vw, 38px); font-weight: 500;
  letter-spacing: -.04em; line-height: 1.12; margin: 0; max-width: 24ch;
}
.live-intro h2 em { font-style: normal; color: var(--muted); }
.livewrap .console { width: auto; margin: 0; border: 0; border-radius: 0; }

.rl-in { padding: 0; margin-bottom: 10px; }
.rl-in input { flex: 1 1 100%; font-size: 12.5px; padding: 10px 12px; }
.con-right .chips { padding: 0 0 12px; }
.rl-foot { font-size: 11px; color: var(--faint); line-height: 1.5; margin: 14px 0 0; }
.con-right .rig-out:empty { display: none; }
.con-right .grid4 { grid-template-columns: 1fr; }

/* sections that came out of the old view wrappers keep a readable measure */
.vblock { width: var(--rail); margin-inline: auto; padding: 72px 0; border-bottom: 1px solid var(--line); }
.vblock > h2 { margin-top: 0; }
.vclose { text-align: center; padding: 86px 0 96px; border-bottom: 0; }
.vclose h2 { font-size: clamp(30px, 4.2vw, 56px); font-weight: 500; letter-spacing: -.05em; margin: 0 0 16px; }
.vclose h2 em { font-style: normal; color: var(--coral); }
.vclose p { color: var(--muted); margin: 0 auto 28px; max-width: 46ch; }

/* a live tape says so, and a frozen one says that instead */
.live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--glass); margin-right: 8px;
  animation: bead 2.4s ease-out infinite;
}