/* ═══ TYPEFACE ═════════════════════════════════════════════════════════════
   Self-hosted so the folder stays dependency-free and works offline. One
   variable font covering weight 100–900 in a single file, latin subset.

     Inter  — headings, wordmark, body copy, navigation, buttons, labels

   font-display: swap so text paints immediately in the fallback and reflows
   once the file lands, rather than blocking on it. */
@font-face {
  font-family: "Inter var";
  src: url("/assets/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOKEN LAYER — the three canonical colours, and the ROLES they are allowed
   to occupy. The roles are the design decision; the hex values are just data.

     #FFE314  yellow  1.29:1 on white  → NEVER text on white. Modular material,
                                          accents, markers. Earns voice only
                                          inside a green field (10.8:1).
     #003500  green  13.94:1 on white  → ink, structure, interaction, focus.
                                          Every semantic signal lives here.
     #FFFFFF  white                    → the field. Negative space is content.
   ═════════════════════════════════════════════════════════════════════════ */
:root {
  --rbx-yellow: #FFE314;
  --rbx-yellow-rgb: 255 227 20;
  --rbx-green: #003500;
  --rbx-green-rgb: 0 53 0;
  --rbx-white: #ffffff;

  /* semantic — all meaning is green */
  --ink:        rgb(var(--rbx-green-rgb));
  --ink-2:      rgb(var(--rbx-green-rgb) / .72);   /* 5.85:1 */
  --ink-3:      rgb(var(--rbx-green-rgb) / .55);   /* 3.9:1 — large text only */
  --line:       rgb(var(--rbx-green-rgb) / .14);
  --line-2:     rgb(var(--rbx-green-rgb) / .28);
  --field:      var(--rbx-white);
  --field-warm: #fbfbf7;

  /* yellow — material only */
  --mat:        var(--rbx-yellow);
  --mat-soft:   rgb(var(--rbx-yellow-rgb) / .34);
  --mat-faint:  rgb(var(--rbx-yellow-rgb) / .16);

  /* on the inverted green field, yellow becomes legible type */
  --on-green:      rgb(255 255 255 / .88);
  --on-green-loud: var(--rbx-yellow);
  --on-green-line: rgb(255 255 255 / .18);

  --cell: 4px;                       /* canonical modular corner radius */
  --gutter: clamp(22px, 6vw, 120px);
  --measure: 62ch;

  --ease: cubic-bezier(.22, .72, .2, 1);
  --dur: 640ms;

  /* body and display are the same family — the roles differ by weight/size */
  --sans: "Inter var", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display: var(--sans);
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--field);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  letter-spacing: -0.005em;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 560; letter-spacing: -0.028em; line-height: 1.08; }
p { margin: 0; }
a { color: inherit; }

/* ── shared primitives ──────────────────────────────────────────────────── */
.wrap { max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ""; width: 18px; height: 6px; border-radius: 1px;
  background: var(--mat); flex: none;
}
.band { padding-block: clamp(88px, 12vw, 168px); border-top: 1px solid var(--line); }
.band--green {
  background: var(--rbx-green); color: var(--on-green);
  border-top: none;
}
.band--warm { background: var(--field-warm); }
.lede { font-size: clamp(19px, 2.1vw, 25px); line-height: 1.45; color: var(--ink-2); max-width: var(--measure); letter-spacing: -0.014em; }
.band--green .lede { color: rgb(255 255 255 / .74); }

/* Visually hidden, still announced. Used by every external link to carry
   "(opens in a new tab)" without printing it on screen. */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ── buttons ── Kept HERE, with the shared primitives, deliberately: these
   used to live inside the header block and were lost when that block was
   replaced, silently flattening 31 buttons across the site into plain links. */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 520; text-decoration: none;
  padding: 10px 17px; border-radius: var(--cell);
  background: var(--rbx-green); color: #fff;
  border: 1px solid var(--rbx-green);
  transition: opacity 180ms var(--ease);
}
.btn:hover { opacity: .88; }
.btn::after { content: ""; width: 7px; height: 7px; background: var(--mat); border-radius: 1px; flex: none; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--on-green { background: var(--mat); color: var(--rbx-green); border-color: var(--mat); font-weight: 600; }
.btn--on-green::after { background: var(--rbx-green); }
:where(a, button):focus-visible { outline: 2px solid var(--rbx-green); outline-offset: 3px; border-radius: 2px; }
.band--green :where(a, button):focus-visible { outline-color: var(--mat); }

/* reveal — restrained. no bounce, no scale, no blur. */
.rv { opacity: 0; transform: translateY(14px); }
.rv-on { opacity: 1; transform: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }

/* path draw */
.draw { stroke-dasharray: var(--len, 300); stroke-dashoffset: var(--len, 300); }
.rv-on .draw, .draw.rv-on { stroke-dashoffset: 0; transition: stroke-dashoffset 1100ms var(--ease) 120ms; }

/* ═══ NAVIGATION — sliding-library capsule ═════════════════════════════════
   Sketch 002 variant B's mechanic (one track, four slides, slides sideways),
   densified against the AccessGrid reference: the pill HUGS its content, and
   the panel is a separate card below it whose width is sized to the open group
   and animates between them. That is what removes the dead space — a fixed-
   width shell forces every group to pad out to the widest one. */
.nav-scrim {
  position: fixed; inset: 0; z-index: 55;
  background: rgb(255 255 255 / .5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity 300ms var(--ease);
}
.nav-scrim.is-on { opacity: 1; pointer-events: auto; }

.nav-stage { position: fixed; inset: 14px 0 auto; z-index: 60; pointer-events: none; }

/* ── the pill ── */
.capsule {
  pointer-events: auto;
  width: fit-content; max-width: calc(100% - 32px); margin: 0 auto;
  border: 1px solid var(--line); border-radius: 999px;
  /* Genuine frosted glass: the backdrop must remain visible for the blur to
     read. 62% white over a 22px blur keeps the pill light enough for green
     type while whatever scrolls behind it stays legible-as-texture. */
  background: rgb(255 255 255 / .62);
  -webkit-backdrop-filter: saturate(1.8) blur(22px);
  backdrop-filter: saturate(1.8) blur(22px);
  box-shadow: 0 2px 14px -4px rgb(0 53 0 / .16), 0 1px 2px rgb(0 53 0 / .08);
  transition: box-shadow 300ms var(--ease);
}
.capsule.is-open { box-shadow: 0 10px 34px -18px rgb(0 53 0 / .3), 0 1px 2px rgb(0 53 0 / .08); }
.capsule-head { display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 18px; }
.capsule-groups { display: flex; align-items: center; gap: 2px; margin: 0 6px; }

.brand { display: inline-flex; align-items: center; gap: 9px; margin-right: 12px; text-decoration: none; color: var(--ink); font-size: 21px; font-weight: 760; letter-spacing: -.04em; }
.brand-mark { display: grid; grid-template-columns: repeat(3, 6px); gap: 2px; }
.brand-mark i { width: 6px; height: 6px; background: var(--mat); display: block; border-radius: 1px; }

.group-trigger {
  position: relative; min-height: 38px; padding: 0 13px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: background .2s ease, color .2s ease;
}
.group-trigger:hover { background: rgb(var(--rbx-green-rgb) / .055); }
.group-trigger.active { background: rgb(var(--rbx-yellow-rgb) / .28); }
.group-trigger::after {
  content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--ease);
  opacity: .55;
}
.capsule.is-open .group-trigger.active::after { transform: translateY(1px) rotate(225deg); opacity: 1; }

/* Yellow surface, green type — 10.8:1, the one place yellow leads on white. */
.build {
  min-height: 38px; padding: 0 17px; display: inline-flex; align-items: center;
  border-radius: 999px; background: var(--mat); color: var(--rbx-green);
  text-decoration: none; font-size: 14px; font-weight: 680; white-space: nowrap;
}
.mobile-menu { display: none; min-width: 40px; min-height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; }

/* ── the panel, a separate card ── */
.nav-panel {
  pointer-events: none;
  width: var(--pw, 660px); max-width: calc(100% - 32px); margin: 10px auto 0;
  display: grid; grid-template-rows: 0fr;
  border: 1px solid var(--line); border-radius: 20px;
  background: rgb(255 255 255 / .82);
  -webkit-backdrop-filter: saturate(1.8) blur(28px);
  backdrop-filter: saturate(1.8) blur(28px);
  box-shadow: 0 26px 64px -30px rgb(0 53 0 / .38), 0 2px 14px -6px rgb(0 53 0 / .12);
  overflow: hidden; opacity: 0; transform: translateY(-8px);
  transition: grid-template-rows 340ms var(--ease), width 400ms var(--ease),
              opacity 200ms ease, transform 280ms var(--ease), border-color 300ms;
  border-color: transparent;
}
.nav-panel.is-open { pointer-events: auto; grid-template-rows: 1fr; opacity: 1; transform: none; border-color: var(--line); }
.panel { min-height: 0; overflow: hidden; padding: 0 22px; }
.nav-panel.is-open .panel { padding-top: 20px; padding-bottom: 20px; }

.mobile-groups { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.mobile-group-trigger { min-height: 42px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--field); color: var(--ink); font: inherit; font-size: 14px; font-weight: 660; cursor: pointer; }
.mobile-group-trigger.active { border-color: var(--rbx-green); background: var(--rbx-green); color: #fff; }

.panel-head { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: end; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.panel-kicker { margin: 0; color: var(--ink-3); font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.panel-title { margin: 7px 0 0; font-size: 26px; line-height: 1.05; letter-spacing: -.04em; font-weight: 590; white-space: nowrap; }
.panel-note { max-width: 38ch; margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.45; text-align: right; text-wrap: balance; }

/* content-sized columns: a one-column group no longer pads out to four slots */
.panel-columns { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 0; }
.panel-column { min-width: 0; padding: 18px 18px 0 0; }
.panel-column + .panel-column { padding-left: 18px; border-left: 1px solid var(--line); }
.column-label { margin: 0; color: var(--ink); font-size: 13px; font-weight: 660; letter-spacing: -.01em; }
.column-desc { margin: 4px 0 10px; color: var(--ink-3); font-size: 12.5px; line-height: 1.42; }
.panel-link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 38px; padding: 6px 8px 6px 0; border-top: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-size: 13.5px; font-weight: 580;
  border-radius: 6px; transition: background .18s ease, padding-inline-start .22s var(--ease);
}
.panel-link:hover { background: rgb(var(--rbx-yellow-rgb) / .2); padding-inline-start: 8px; }
.panel-link::after { content: "↗"; color: var(--ink-3); font-size: 12px; }
.panel-link[data-internal]::after { content: "→"; }

/* footer row — the reference's "API Documentation / Read docs" band */
.panel-foot {
  display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 13px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--field-warm);
  text-decoration: none; color: var(--ink); transition: background .2s ease;
}
.panel-foot:hover { background: rgb(var(--rbx-yellow-rgb) / .16); }
.panel-foot__i { flex: none; width: 26px; height: 26px; border-radius: 6px; background: var(--mat); }
.panel-foot__x { flex: 1 1 auto; min-width: 0; }
.panel-foot__x b { display: block; font-size: 13.5px; font-weight: 640; }
.panel-foot__x em { display: block; font-style: normal; color: var(--ink-3); font-size: 12.5px; margin-top: 1px; }
.panel-foot__a { flex: none; font-size: 13px; font-weight: 620; white-space: nowrap; }
.panel-foot__a::after { content: " →"; }

/* the sliding library: one track, four slides, 25% each */
/* Height is driven per group too, not just width — otherwise every slide sits
   in a card sized to the tallest one, which is where Company's dead space came
   from. JS measures the active slide and sets --ph. */
.panel-viewport { overflow: hidden; height: var(--ph, auto); transition: height 260ms var(--ease); }
.panel-track { align-items: flex-start; }
.panel-track { display: flex; width: 400%; transition: transform 380ms cubic-bezier(.22, 1, .36, 1); }
.slide { width: 25%; flex: none; padding-right: 2px; }

@media (max-width: 900px) {
  .capsule { width: calc(100% - 24px); border-radius: 22px; }
  .capsule-head { justify-content: space-between; padding-right: 10px; }
  .capsule-groups, .build { display: none; }
  .mobile-menu { display: inline-flex; align-items: center; justify-content: center; }
  .nav-panel { width: calc(100% - 24px); }
  .nav-panel.is-open { max-height: calc(100svh - 92px); }
  .nav-panel.is-open .panel { overflow-y: auto; }
  .mobile-groups { display: grid; }
  .panel-head { grid-template-columns: 1fr; gap: 8px; }
  .panel-title { white-space: normal; font-size: 23px; }
  .panel-note { text-align: left; }
  .panel-columns { grid-template-columns: 1fr; }
  .panel-column, .panel-column + .panel-column { padding: 16px 0 0; border-left: 0; }
  .panel-column + .panel-column { border-top: 1px solid var(--line); }
}

/* ═══ HERO — opens on the relational field, no logo sequence ═══════════════ */
.hero { position: relative; }
.hero__stage {
  position: relative; min-height: 100svh; overflow: hidden;
  display: grid; place-items: center;
}
.hero__field { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.hero__copy {
  position: absolute; z-index: 8; inset: auto 0 0 0;
  padding: 0 var(--gutter) clamp(56px, 11vh, 112px);
}
/* The field must never cost the headline its 13.9:1. A scrim, not a compromise. */
.hero__copy::before {
  content: ""; position: absolute; z-index: -1; inset: -18vh -20% -40% -10%;
  background: linear-gradient(100deg, #fff 0 34%, rgb(255 255 255 / .82) 52%, rgb(255 255 255 / 0) 76%);
  pointer-events: none;
}
.hero__copy h1 {
  font-size: clamp(38px, 6.6vw, 88px); max-width: 15ch;
  letter-spacing: -0.042em; line-height: .98;
}
.hero__copy p { margin-top: 20px; max-width: 46ch; color: var(--ink-2); font-size: clamp(16px, 1.5vw, 19px); }
.hero__cue {
  position: absolute; z-index: 8; left: 50%; bottom: 26px; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.hero__cue span { display: block; width: 1px; height: 26px; background: var(--line-2); }

/* ═══ 01 — THE GRAPH ═══════════════════════════════════════════════════════ */
/* ═══ 04 — THE GRAPH'S BACKBONE ════════════════════════════════════════════
   Deliberately the quietest band on the page. It sits immediately before the
   green live-proof section, which is the homepage's one crescendo — so this
   one stays typographic: no canvas, no big numerals, nothing that competes
   with the figures landing one screen later. Three roles, stated once.
   ═════════════════════════════════════════════════════════════════════════ */
/* The figure IS the headline here — there is no h2. 51.4M is set larger than any
   heading on the page, with the paragraph beside it as the only other content.
   Green ink, never yellow: at 1.29:1 yellow is never type on a light field. */
.bbone { display: grid; gap: clamp(28px, 3.4vw, 56px); align-items: center;
         margin-top: clamp(36px, 4vw, 56px); }
@media (min-width: 900px) { .bbone { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.bbone__n { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* "51.4M" sets about 2.6em wide, so the ceiling has to stay under half the
   content width or the numeral runs into the paragraph beside it. */
.bbone__n b { font-family: var(--display); font-size: clamp(64px, 11vw, 150px); font-weight: 600;
              line-height: .86; letter-spacing: -.04em; color: var(--ink); white-space: nowrap;
              font-variant-numeric: tabular-nums; }
.bbone__n small { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
                  color: var(--ink-3); display: flex; align-items: center; gap: 10px; }
/* the modular cell as a marker, which is the one role yellow always holds */
.bbone__n small::before { content: ""; width: 14px; height: 14px; border-radius: 2px;
                          background: var(--mat); flex: none; }
.bbone__c { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.62; color: var(--ink-2);
            max-width: 46ch; margin: 0; }

/* ── the finite extent ────────────────────────────────────────────────────
   Finiteness drawn rather than asserted: one length of modular material,
   subdivided 1 → 3 → 9 → 27 → 81 across five equal spans. The material gets
   finer and finer and the extent NEVER grows — which is what a capped supply
   that splits into parts actually looks like. The subdivision is in threes
   because three is the grammar the whole system is built on (the 3×3 mark).
   A dimension rule above it, drawn in ink with end ticks, states the extent
   is measured and fixed. Yellow stays solid, unstroked, and never type. */
.supply { margin-top: clamp(40px, 4.6vw, 68px); }
.supply__rule { position: relative; height: 1px; background: var(--line-2); }
.supply__rule::before, .supply__rule::after { content: ""; position: absolute; top: -5px;
  width: 1px; height: 11px; background: var(--line-2); }
.supply__rule::before { left: 0; }
.supply__rule::after { right: 0; }
/* Tight between spans on purpose: the eye has to read ONE extent whose grain
   changes, not five separate blocks. Any wider and the metaphor inverts. */
.supply__bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
               gap: clamp(4px, .5vw, 7px); margin-top: 14px; }
.supply__g { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
             gap: var(--g, 3px); height: clamp(38px, 4.6vw, 64px); }
.supply__g i { display: block; background: var(--mat); border-radius: 2px;
               opacity: 0; transform: scaleY(.28); transform-origin: 50% 100%; }
.rv-on .supply__g i { opacity: 1; transform: none;
  transition: opacity 460ms var(--ease), transform 560ms var(--ease);
  transition-delay: calc(var(--i, 0) * 7ms + 120ms); }
@media (prefers-reduced-motion: reduce) { .supply__g i { opacity: 1; transform: none; } }
.supply__k { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px;
             font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
             text-transform: uppercase; color: var(--ink-3); }
/* The finest spans need real width to stay legible as material rather than a
   smear — 81 cells inside a 65px span would compute to sub-pixel bars. They
   drop out on narrow viewports; the extent and the story survive without them. */
@media (max-width: 760px) { .supply__g:nth-child(5) { display: none; } }
@media (max-width: 520px) { .supply__g:nth-child(4) { display: none; } }

/* Mirrored against section 02, and weighted the opposite way. Here the copy is
   narration — it carries the argument and has to be read in order — so it takes
   the reading edge and the larger share, and the figure is evidence for it. In
   02 the canvas IS the content and the list only indexes it. */
.forms { display: grid; gap: clamp(30px, 3.6vw, 56px); align-items: center; margin-top: clamp(44px, 5vw, 64px); }
@media (min-width: 1000px) { .forms { grid-template-columns: minmax(380px, 1.12fr) minmax(0, .88fr); } }

/* Unboxed, unlike 02's bordered .egraph — the scene sits on the open field. */
.fgraph { position: relative; margin: 0; aspect-ratio: 16 / 10; }
@media (min-width: 1000px) { .fgraph { aspect-ratio: auto; min-height: 420px; } }
.fgraph canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.fgraph__label { position: absolute; top: 0; left: 0; font-family: var(--mono); font-size: 10.5px;
                 letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

/* A filling four-segment rule where 02 puts its "01 / 04" counter: same corner,
   different signature, and it reads as progress through a sequence rather than
   a position in a set. */
.fgraph__prog { position: absolute; top: 4px; right: 0; display: flex; gap: 6px; }
.fgraph__prog i { display: block; width: 28px; height: 2px; background: var(--line-2); overflow: hidden; }
.fgraph__prog i::after { content: ""; display: block; height: 100%; background: var(--ink);
  transform: scaleX(var(--f, 0)); transform-origin: left center; transition: transform 220ms linear; }

/* Narration, not navigation: no buttons. You cannot legitimately jump to step
   three of a formation — step three has no meaning without one and two. */
.fpoints { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
           background: var(--line); border-block: 1px solid var(--line); }
.fpoint { background: var(--field-warm); display: grid; grid-template-columns: 34px minmax(0, 1fr);
          gap: 0 14px; padding: 20px clamp(18px, 2vw, 24px); border-left: 2px solid transparent;
          transition: background 320ms var(--ease), border-color 320ms var(--ease); }
.fpoint__n { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--ink-3); padding-top: 5px; }
.fpoint__t { font-size: 17.5px; font-weight: 570; letter-spacing: -.022em; color: var(--ink-3);
             transition: color 320ms var(--ease); }
.fpoint__c { grid-column: 2; font-size: 14.5px; line-height: 1.5; color: var(--ink-3); max-width: 42ch;
             transition: color 320ms var(--ease); }
.fpoint[aria-current="step"] { background: var(--field); border-left-color: var(--mat); }
.fpoint[aria-current="step"] .fpoint__t { color: var(--ink); }
.fpoint[aria-current="step"] .fpoint__c,
.fpoint[aria-current="step"] .fpoint__n { color: var(--ink-2); }

/* ═══ 02 — WHAT THE GRAPH ENABLES ══════════════════════════════════════════
   The canvas and the list sit side by side so the lit point is always visible
   at the same moment the graph is drawing it. */
/* Both columns stretch to the same row height, so the graph and the list share
   a top edge AND a bottom edge. The renderer fits its 760x620 design space into
   whatever box it is handed, so a taller canvas simply gives it more room. */
.enables { display: grid; gap: clamp(30px, 3.6vw, 56px); align-items: stretch; margin-top: clamp(44px, 5vw, 64px); }
@media (min-width: 1000px) { .enables { grid-template-columns: minmax(0, 1.35fr) minmax(320px, .8fr); } }

.egraph { position: relative; margin: 0; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: var(--cell); background: var(--field); overflow: hidden; }
/* side by side, height comes from the row — not from a fixed ratio */
@media (min-width: 1000px) { .egraph { aspect-ratio: auto; min-height: 360px; } }
.egraph canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.egraph__label, .egraph__tc {
  position: absolute; top: 18px; z-index: 2; pointer-events: none;
  font-family: var(--mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
}
.egraph__label { left: 20px; color: var(--ink-3); }
.egraph__tc { right: 20px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* 1fr rows: whichever column is taller, the four points divide the full height
   between them so the list ends exactly where the graph does. */
.epoints { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: minmax(min-content, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.epoint { display: grid; }
.epoint button {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; width: 100%; text-align: left;
  padding: 20px 18px 20px 0; background: var(--field-warm); border: 0; cursor: pointer;
  border-left: 2px solid transparent; padding-left: 18px;
  transition: background 260ms var(--ease), border-color 260ms var(--ease);
}
.epoint__n { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--ink-3); padding-top: 4px; }
.epoint__t { font-size: 17.5px; font-weight: 570; letter-spacing: -.022em; color: var(--ink-3); transition: color 260ms var(--ease); }
.epoint__c { grid-column: 2; font-size: 14.5px; line-height: 1.5; color: var(--ink-3); max-width: 42ch; transition: color 260ms var(--ease), max-height 320ms var(--ease), opacity 260ms var(--ease); }

/* THE LIT POINT — the one the graph is drawing right now. Yellow marks it
   structurally (the left rule); green does the legibility. */
.epoint button[aria-pressed="true"] { background: var(--field); border-left-color: var(--mat); }
.epoint button[aria-pressed="true"] .epoint__t { color: var(--ink); }
.epoint button[aria-pressed="true"] .epoint__c { color: var(--ink-2); }
.epoint button[aria-pressed="true"] .epoint__n { color: var(--ink-2); }
.epoint button:hover .epoint__t { color: var(--ink); }
.epoint button:focus-visible { outline: 2px solid var(--rbx-green); outline-offset: -2px; }

/* ═══ PROJECT GRID ═════════════════════════════════════════════════════════
   Inverted hierarchy: the PROJECT is the headline and carries the glyph; the
   DOMAIN drops to a chip. Vertical hairlines between columns, as in the
   reference — the 1px grid gap over a --line background does that for free. */
/* Two up, stacked within each cell. Four across made every project shrink to
   fit; full-width rows wasted the right half. Two columns gives each project a
   large cell it actually fills — and an odd fifth simply starts a new row. */
.projs { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--cell); overflow: hidden; margin-top: clamp(44px, 5vw, 64px); }
@media (min-width: 820px) { .projs { grid-template-columns: repeat(2, 1fr); } }
.proj {
  background: var(--field); display: flex; flex-direction: column;
  padding: clamp(28px, 3vw, 44px);
}

.proj__mark {
  display: flex; align-items: center; justify-content: center;
  min-height: clamp(150px, 17vw, 208px); padding: clamp(16px, 1.7vw, 24px); margin-bottom: clamp(26px, 3vw, 38px);
  /* PURE WHITE, not the warm surface: agentdna.png and phillipcapital.jpg
     ship with opaque white backgrounds, so any tinted plate renders a visible
     white rectangle behind those two and not the other two. */
  border: 1px solid var(--line); border-radius: var(--cell); background: var(--field);
}
/* The logo fills the plate: width-led, so every mark reaches both side edges,
   with a height ceiling so the squarer assets cannot overrun the plate. The
   previous per-logo max-heights capped everything between 40px and 98px inside
   a 150-208px plate, which is where the surrounding white space came from. */
/* The ceiling is the plate's own inner height (min-height less both paddings),
   so the squarer lockups are limited by the plate rather than by an arbitrary
   number well inside it. */
.proj__mark img { width: 100%; height: auto; max-height: clamp(106px, 13vw, 158px);
                  object-fit: contain; display: block; }
/* agentdna.png ships with generous internal padding baked into the file, so at
   an equal measured width it reads larger than the tight crops beside it. */
.proj__mark img[src$="agentdna.png"] { width: 92%; }

.proj__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 18px; }
.proj__n { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--ink-3); flex: none; }
.proj h3 { font-size: clamp(30px, 3.1vw, 44px); letter-spacing: -.036em; line-height: 1.03; margin-bottom: 16px; }
.proj__copy { color: var(--ink-2); font-size: 16.5px; line-height: 1.56; max-width: 46ch; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 11px; border: 1px solid var(--line-2); border-radius: 2px; color: var(--ink-2);
}
.chip::before { content: ""; width: 6px; height: 6px; background: var(--mat); border-radius: 1px; flex: none; }
/* margin-top:auto pins the actions to the bottom of every cell, so unequal
   copy lengths don't leave the links wandering at different heights. */
.proj__actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 30px; margin-top: auto; padding-top: 30px; }
.lnk { font-weight: 570; font-size: 15.5px; text-decoration: none; display: inline-flex; align-items: baseline; gap: 9px; letter-spacing: -.012em; }
.lnk::after { content: "→"; transition: transform 220ms var(--ease); }
.lnk:hover::after { transform: translateX(5px); }
.lnk--q { font-weight: 480; font-size: 14.5px; color: var(--ink-2); }

/* ═══ PRODUCT CARDS (/ecosystem) ═══════════════════════════════════════════
   Fuller treatment than the homepage grid: copy and headline metrics on the
   left, the project's own topology diagram as the visual on the right. */
/* STICKY STACK. No overflow/clip on the container — either would neutralise
   position:sticky on the children. Each card pins at the same offset, so the
   next one slides up and covers it; JS dims and shrinks whatever is underneath. */
.pcards { display: grid; gap: 0; margin-top: clamp(44px, 5vw, 64px); }
.pcard {
  position: sticky; top: clamp(84px, 9vh, 104px);
  background: var(--field); display: grid; align-items: center;
  gap: clamp(28px, 4vw, 64px); padding: clamp(30px, 3.4vw, 52px);
  border: 1px solid var(--line); border-radius: var(--cell);
  transform-origin: 50% 0;
  will-change: transform, opacity;
}
.pcard + .pcard { margin-top: clamp(22px, 3vw, 40px); }
@media (min-width: 940px) { .pcard { grid-template-columns: 1fr 380px; } }
.pcard__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 34px; margin-bottom: 22px; }
.pcard__top img { max-height: 22px; max-width: 130px; width: auto; height: auto; object-fit: contain; display: block; }
.pcard__top img[src$="phillipcapital.jpg"] { max-height: 36px; }
.pcard__top img[src$="finao.png"] { max-height: 16px; }
.pcard h3 { font-size: clamp(28px, 3vw, 40px); letter-spacing: -.034em; line-height: 1.04; margin-bottom: 14px; }
.pcard__copy { color: var(--ink-2); font-size: 16.5px; line-height: 1.56; max-width: 50ch; }
.pcard__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

/* Metrics: value large, label beneath — the reference's formatting. */
.pstat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.pstat__v { display: block; font-family: var(--mono); font-size: clamp(22px, 2.3vw, 30px); font-weight: 500; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
/* ODOMETER — each digit is a 0–9 reel that rolls to its target. Digits only;
   separators and suffixes (, . M k) render statically so they never move. */
.od { display: inline-flex; align-items: flex-start; }
.od__d { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; }
.od__r { display: block; transform: translateY(0); transition: transform 1500ms cubic-bezier(.16, .84, .26, 1); }
.od__r i { display: block; height: 1em; line-height: 1; font-style: normal; }
.pstat__k { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin-top: 8px; line-height: 1.4; }

.pcard__vis { background: var(--field-warm); border: 1px solid var(--line); border-radius: var(--cell); padding: clamp(20px, 2.4vw, 32px); }
.pcard__vis svg { width: 100%; height: auto; display: block; }
/* The detail-page figure is annotated; at card scale those 9px labels render
   near 6px and read as noise. Drop them here — the card wants the SHAPE, and
   the labelled version is one click away. Strokes thicken to compensate. */
.pcard__vis svg text { display: none; }
.pcard__vis svg path { stroke-width: 2.2; }
.pcard__vis svg rect[stroke] { stroke-width: 2.2; }

/* ── Domain group: the docx's three "Rubix for …" statements ─────────────── */
.domain { border-top: 2px solid var(--mat); padding-block: clamp(46px, 5.5vw, 74px) clamp(28px, 3.6vw, 44px); }
/* the first rule must not read as an underline of the section heading */
.domain:first-of-type { margin-top: clamp(40px, 5vw, 64px); }
.domain__k { font-family: var(--mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); }
.domain h3 { font-size: clamp(26px, 3.4vw, 42px); max-width: 18ch; margin-top: 15px; letter-spacing: -.032em; }
.domain__body { color: var(--ink-2); margin-top: 17px; max-width: 52ch; font-size: 16.5px; }

/* ── Project card: name + copy left, partner mark right, action below ───── */
.feats { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--cell); overflow: hidden; margin-top: 34px; }
.feat { background: var(--field); padding: clamp(24px, 2.8vw, 34px); display: grid; gap: clamp(22px, 3vw, 40px); align-items: center; }
@media (min-width: 720px) { .feat { grid-template-columns: 1fr 224px; } }
.feat h4 { font-size: 21px; letter-spacing: -.024em; margin-bottom: 10px; }
.feat p { color: var(--ink-2); font-size: 15.5px; line-height: 1.56; max-width: 48ch; }
.feat-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* The partner mark. Partner logos are full-colour and sit outside the
   yellow/green/white system by necessity — brands are not ours to restyle. So
   the plate quarantines them: a neutral white field with a bounded footprint,
   and every logo optically normalised to the same cap height. */
.plate {
  display: flex; align-items: center; justify-content: center;
  gap: 7px; min-height: 116px; padding: 22px 20px; text-align: center;
  border: 1px solid var(--line-2); border-radius: var(--cell); background: var(--field);
}
.plate--pending { border-style: dashed; flex-direction: column; }
.plate__img { max-width: 100%; max-height: 44px; width: auto; height: auto; object-fit: contain; display: block; }
/* Optical balancing. Each supplied asset has different internal padding and a
   different wordmark-to-box ratio, so a single max-height makes them read at
   wildly different weights. These caps equalise them by eye, not by pixel. */
.plate__img[src$="agentdna.png"]       { max-height: 42px; }
.plate__img[src$="trie.png"]           { max-height: 34px; }
.plate__img[src$="finao.png"]          { max-height: 30px; }
.plate__img[src$="phillipcapital.jpg"] { max-height: 76px; }
.plate__mark { display: grid; grid-template-columns: repeat(3, 5px); gap: 2px; margin-bottom: 5px; }
.plate__mark i { width: 5px; height: 5px; background: var(--mat); border-radius: 1px; display: block; }
.plate__name { font-weight: 580; font-size: 15px; letter-spacing: -.015em; line-height: 1.25; }
.plate__note { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

.feats-more { margin-top: clamp(44px, 5vw, 68px); padding-top: clamp(30px, 4vw, 44px); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; justify-content: space-between; }
.feats-more p { color: var(--ink-2); font-size: 16px; max-width: 44ch; }

/* ═══ ECOSYSTEM DETAIL PAGES ═══════════════════════════════════════════════ */
.page-top { padding: clamp(112px, 15vh, 178px) 0 clamp(46px, 6vw, 76px); }
.crumb { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 10px; }
.crumb a { text-decoration: none; color: var(--ink-3); }
.crumb a:hover { color: var(--ink); }
.crumb i { width: 12px; height: 5px; background: var(--mat); border-radius: 1px; flex: none; }
.eco-head { display: grid; gap: clamp(30px, 4vw, 60px); align-items: start; }
@media (min-width: 940px) { .eco-head { grid-template-columns: 1fr 264px; } }
@media (min-width: 940px) { .eco-head > .plate { margin-top: 6px; } }
.eco-title { font-size: clamp(40px, 6.6vw, 82px); letter-spacing: -.042em; line-height: .98; margin-top: 24px; max-width: 15ch; }
.eco-sub { font-size: clamp(19px, 2.1vw, 25px); line-height: 1.45; color: var(--ink-2); max-width: var(--measure); letter-spacing: -.014em; margin-top: 22px; }
.eco-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.eco-meta { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); margin-top: clamp(44px, 6vw, 72px); }
@media (min-width: 700px) { .eco-meta { grid-template-columns: repeat(3, 1fr); } }
.eco-meta div { background: var(--field); padding: 22px 0; }
@media (min-width: 700px) { .eco-meta div { padding: 22px 26px; } .eco-meta div:first-child { padding-inline-start: 0; } }
.eco-meta dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; }
.eco-meta dd { margin: 0; font-size: 16px; color: var(--ink); font-weight: 520; }

.notice {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px; margin-top: 34px;
  border: 1px solid var(--line-2); border-left: 3px solid var(--mat);
  border-radius: var(--cell); background: var(--field-warm);
}
.notice b { display: block; font-size: 14px; margin-bottom: 4px; }
.notice p { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }

.eco-prose { display: grid; gap: clamp(30px, 5vw, 68px); align-items: start; }
@media (min-width: 940px) { .eco-prose { grid-template-columns: 1.1fr .9fr; } }
.eco-prose p + p { margin-top: 18px; }
.eco-prose p { color: var(--ink-2); font-size: 17px; max-width: 60ch; }
.eco-fig { width: 100%; height: auto; aspect-ratio: 400 / 300; overflow: visible; }

.caps { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--cell); overflow: hidden; margin-top: 52px; }
@media (min-width: 760px) { .caps { grid-template-columns: repeat(2, 1fr); } }
.cap { background: var(--field); padding: clamp(26px, 3vw, 38px); }
.cap__n { font-family: var(--mono); font-size: 11px; letter-spacing: .15em; color: var(--ink-3); display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.cap__n::before { content: ""; width: 14px; height: 6px; background: var(--mat); border-radius: 1px; }
.cap h3 { font-size: 19px; margin-bottom: 9px; }
.cap p { color: var(--ink-2); font-size: 15.5px; line-height: 1.58; }

.related { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--cell); overflow: hidden; margin-top: 52px; }
@media (min-width: 760px) { .related { grid-template-columns: repeat(3, 1fr); } }
.related a { background: var(--field); padding: 26px; text-decoration: none; display: block; transition: background 200ms var(--ease); }
.related a:hover { background: var(--field-warm); }
.related span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 9px; }
.related b { font-size: 17px; font-weight: 560; display: block; margin-bottom: 6px; }
.related em { font-style: normal; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }

/* ═══ 04 — LIVE PROOF ══════════════════════════════════════════════════════ */
.stats { display: grid; gap: 1px; background: var(--on-green-line); border: 1px solid var(--on-green-line); border-radius: var(--cell); overflow: hidden; margin-top: 52px; }
@media (min-width: 620px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat { background: var(--rbx-green); padding: clamp(24px, 3vw, 36px); min-height: 152px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.stat__v { font-family: var(--mono); font-size: clamp(26px, 3.4vw, 40px); color: var(--on-green-loud); letter-spacing: -.03em; font-weight: 500; font-variant-numeric: tabular-nums; }
.stat__v[data-state="unavailable"] { color: rgb(255 255 255 / .34); font-size: clamp(20px, 2.4vw, 27px); }
.stat__k { font-family: var(--mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: rgb(255 255 255 / .55); }

/* ═══ 05 — BUILD OR LEARN ══════════════════════════════════════════════════ */
/* Xell is the "Use Rubix" primary path, so it gets a tile of its own above the
   Build/Learn split rather than a row inside one of the lists. Yellow does the
   emphasis structurally (the top rule) — green is still reserved for proof. */
.xell {
  display: grid; gap: clamp(26px, 4vw, 56px); align-items: center;
  margin-top: clamp(40px, 5vw, 62px); padding: clamp(30px, 3.4vw, 46px);
  border: 1px solid var(--line); border-top: 3px solid var(--mat);
  border-radius: var(--cell); background: var(--field-warm);
}
@media (min-width: 880px) { .xell { grid-template-columns: 1fr 300px; } }
.xell__k { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.xell h3 { font-size: clamp(28px, 3.2vw, 42px); letter-spacing: -.034em; margin-bottom: 14px; }
.xell__copy { color: var(--ink-2); font-size: 17.5px; line-height: 1.5; max-width: 46ch; }
.xell__fig { width: 100%; height: auto; aspect-ratio: 300 / 200; }
.split { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--cell); overflow: hidden; margin-top: 52px; }
@media (min-width: 880px) { .split { grid-template-columns: 1fr 1fr; } }
.half { background: var(--field); padding: clamp(30px, 3.4vw, 46px); }
.half h3 { font-size: 25px; margin-bottom: 8px; }
.half > p { color: var(--ink-2); font-size: 15.5px; margin-bottom: 26px; }
.links { list-style: none; margin: 0; padding: 0; display: grid; }
.links a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 2px; text-decoration: none; font-size: 15.5px;
  border-bottom: 1px solid var(--line); color: var(--ink);
  transition: padding-inline-start 220ms var(--ease), border-color 220ms;
}
.links a:hover { padding-inline-start: 10px; border-bottom-color: var(--line-2); }
.links a em { font-style: normal; width: 7px; height: 7px; background: var(--mat); border-radius: 1px; flex: none; opacity: 0; transition: opacity 220ms; }
.links a:hover em { opacity: 1; }

/* ═══ 06 — INSIGHTS ════════════════════════════════════════════════════════ */
.insights { list-style: none; margin: 52px 0 0; padding: 0; display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.insight { background: var(--field); }
.insight__k { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.insight__t { font-size: 18.5px; letter-spacing: -.02em; max-width: 46ch; }
.insight__d { font-family: var(--mono); font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ═══ 07 — ABOUT ═══════════════════════════════════════════════════════════ */

/* ═══ 08 — CONTACT ═════════════════════════════════════════════════════════ */
.contact { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--cell); overflow: hidden; margin-top: 52px; }
@media (min-width: 820px) { .contact { grid-template-columns: 1fr 1fr; } }
.contact__c { background: var(--field); padding: clamp(30px, 3.6vw, 48px); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.contact__c h3 { font-size: 25px; color: var(--ink); }
.contact__c p { color: var(--ink-2); font-size: 15.5px; max-width: 38ch; }
.contact__c .btn { margin-top: 6px; }

/* five columns once there is room; the taxonomy mirrors the nav exactly, so a
   visitor who learned the nav does not have to relearn the footer */




/* ═══ REDUCED MOTION — the story must still be readable at rest ════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__stage { min-height: 78svh; }
  /* JS already writes each node's settled opacity; only the motion is dropped */
  .hero__field * { transition: none !important; }
  .hero__cue { display: none; }
  .rv, .rv-on { opacity: 1 !important; transform: none !important; transition: none !important; }
  .draw { stroke-dashoffset: 0 !important; transition: none !important; }
  /* the card stack is motion: fall back to four plain cards in normal flow */
  .pcard { position: static; transform: none !important; opacity: 1 !important; }
  .od__r { transition: none !important; }
}
/* ═══ SECTION 03 ══════════════════════════════════════════════════════════ */

/* ── Section 03 layout: the headline is the grid's FIRST CELL, so the section
   opens on a logo rather than on ~490px of preamble. The sixth cell absorbs
   what used to be a trailing CTA band, closing the grid on one object. Cells
   share the hairline grid, so every cell matches its row's height. ── */
/* Surfaces swapped: the four project cards take the warm surface so they read
   as a set, and the headline cell drops to plain white so it sits back. The
   logo plate inside each card stays pure white — two of the four supplied
   assets have opaque white backgrounds, so a tinted plate would box them. */
.projs--a .proj { background: var(--field-warm); }
.projs--a .proj--head { justify-content: center; gap: 0; background: var(--field); }
.projs--a .proj--head h2 { font-size: clamp(28px, 2.9vw, 42px); letter-spacing: -.036em; line-height: 1.03; margin: 22px 0 0; max-width: 14ch; }
.projs--a .proj--head__p { margin-top: 16px; color: var(--ink-2); font-size: 16px; line-height: 1.5; max-width: 34ch; }

.proj--cta { text-decoration: none; background: var(--rbx-green) !important; color: var(--on-green); justify-content: center; }
.proj--cta__k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgb(255 255 255 / .55); }
.proj--cta b { display: block; margin-top: 18px; font-size: clamp(24px, 2.4vw, 34px); font-weight: 570; letter-spacing: -.032em; line-height: 1.05; color: var(--on-green-loud); }
.proj--cta em { display: block; margin-top: 14px; font-style: normal; font-size: 15.5px; line-height: 1.55; color: rgb(255 255 255 / .72); max-width: 38ch; }
.proj--cta__go { display: inline-flex; align-items: center; gap: 9px; margin-top: 26px; font-size: 15.5px; font-weight: 570; color: var(--on-green-loud); }
.proj--cta__go::after { content: "→"; transition: transform 220ms var(--ease); }
.proj--cta:hover .proj--cta__go::after { transform: translateX(5px); }

/* ── Option C: a logo wall opens the section. The cards below carry NO second
   logo — showing each mark twice on one screen is what cheapens it. ── */
.logowall { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--cell); overflow: hidden; }
@media (min-width: 720px) { .logowall { grid-template-columns: repeat(4, 1fr); } }
.logowall__i { background: var(--field); display: flex; align-items: center; justify-content: center; min-height: clamp(120px, 13vw, 168px); padding: 26px 22px; }
.logowall__i img { max-width: 100%; max-height: 52px; width: auto; height: auto; object-fit: contain; display: block; }
.logowall__i img[src$="agentdna.png"]       { max-height: 54px; }
.logowall__i img[src$="trie.png"]           { max-height: 44px; }
.logowall__i img[src$="finao.png"]          { max-height: 36px; }
.logowall__i img[src$="phillipcapital.jpg"] { max-height: 92px; }
.projs--c { margin-top: clamp(40px, 4.6vw, 60px); }

/* ═══ CAREERS ══════════════════════════════════════════════════════════════
   Role cards follow the product-card shape used on /ecosystem: the pitch and
   the action on the left, the detail lists on the right. Chips render only for
   fields the registry actually supplies — two of the three roles omit some, and
   a missing field must read as absent, never as a dash. */
.roles { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--cell); overflow: hidden; margin-top: clamp(44px, 5vw, 64px); }
.role { background: var(--field); display: grid; gap: clamp(28px, 4vw, 60px); padding: clamp(30px, 3.4vw, 52px); align-items: start; }
@media (min-width: 940px) { .role { grid-template-columns: 1fr 1fr; } }

.role__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.role h3 { font-size: clamp(26px, 2.8vw, 38px); letter-spacing: -.034em; line-height: 1.05; margin-bottom: 14px; }
.role__overview { color: var(--ink-2); font-size: 16.5px; line-height: 1.56; max-width: 46ch; }
.role__apply { margin-top: 26px; }
.role__note { margin-top: 22px; }
.role__note b { font-size: 13.5px; }
.role__note p { font-size: 14px; }

.role__block + .role__block { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line); }
.role__k { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.role__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.role__list li { position: relative; padding-left: 20px; color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }
.role__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; background: var(--mat); border-radius: 1px; }

/* ═══ SKIP GRAPHITY ════════════════════════════════════════════════════════
   Fixed, so it holds position across all ~7500px of the prologue rather than
   scrolling away with any one stage. Sits bottom-right, clear of Graphity's own
   centred scroll cue and clear of the nav capsule at the top. */
.skip-graphity {
  position: fixed; z-index: 50; right: clamp(16px, 3vw, 34px); bottom: clamp(16px, 3vw, 34px);
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 42px; padding: 0 18px; border-radius: 999px;
  background: rgb(255 255 255 / .68);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px);
  border: 1px solid var(--line-2); color: var(--ink);
  font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; text-decoration: none;
  box-shadow: 0 2px 14px -4px rgb(0 53 0 / .18), 0 1px 2px rgb(0 53 0 / .08);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 300ms var(--ease), transform 300ms var(--ease), background 200ms;
}
.skip-graphity.is-on { opacity: 1; transform: none; pointer-events: auto; }
.skip-graphity:hover { background: #fff; }
.skip-graphity::after {
  content: ""; width: 8px; height: 8px; background: var(--mat); border-radius: 1px;
  transition: transform 220ms var(--ease);
}
.skip-graphity:hover::after { transform: translateY(2px); }
@media (prefers-reduced-motion: reduce) { .skip-graphity { transition: none; } }

/* ═══ PUBLISHED PAPER ══════════════════════════════════════════════════════
   The whitepaper is the only real published asset, so it gets a card of its own
   above the list rather than a row inside it. */
.paper {
  display: grid; gap: clamp(28px, 4vw, 60px); align-items: center;
  margin-top: clamp(40px, 4.6vw, 60px); padding: clamp(30px, 3.4vw, 50px);
  border: 1px solid var(--line); border-radius: var(--cell); background: var(--field);
}
@media (min-width: 940px) { .paper { grid-template-columns: 1fr 300px; } }
.paper__k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); }
.paper h3 { font-size: clamp(27px, 3vw, 40px); letter-spacing: -.034em; line-height: 1.05; margin: 14px 0 16px; }
.paper__sum { color: var(--ink-2); font-size: 16.5px; line-height: 1.56; max-width: 58ch; }
.paper__meta { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); margin: 26px 0 0; }
@media (min-width: 600px) { .paper__meta { grid-template-columns: repeat(3, 1fr); } }
.paper__meta div { background: var(--field); padding: 16px 0; }
@media (min-width: 600px) { .paper__meta div { padding: 16px 20px; } .paper__meta div:first-child { padding-inline-start: 0; } }
.paper__meta dt { font-family: var(--mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.paper__meta dd { margin: 0; font-size: 15.5px; font-weight: 530; }
.paper__fig { width: 100%; height: auto; aspect-ratio: 300 / 240; }

/* ═══ INSIGHTS ACCORDION + ARTICLE PAGES ═══════════════════════════════════
   Native <details> so the rows are keyboard-accessible and work without JS;
   the panel height animates via grid-template-rows on [open]. */
.ins summary { list-style: none; cursor: pointer; }
.ins summary::-webkit-details-marker { display: none; }
.ins__row { display: grid; gap: 6px 28px; padding: 26px 2px; align-items: baseline; position: relative; padding-right: 40px; transition: padding-inline 220ms var(--ease); }
@media (min-width: 760px) { .ins__row { grid-template-columns: 168px 1fr auto; } }
.ins summary:hover .ins__row, .ins[open] .ins__row { padding-inline: 12px 52px; }
.ins__row::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px;
  border-right: 1.6px solid var(--ink-3); border-bottom: 1.6px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease);
}
.ins[open] .ins__row::after { transform: translateY(-20%) rotate(225deg); border-color: var(--ink); }
.ins summary:focus-visible { outline: 2px solid var(--rbx-green); outline-offset: -2px; }

.ins__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--ease); }
.ins[open] .ins__panel { grid-template-rows: 1fr; }
.ins__inner { min-height: 0; overflow: hidden; padding-inline: 12px; }
.ins[open] .ins__inner { padding-bottom: 30px; }
.ins__sum { color: var(--ink-2); font-size: 16.5px; line-height: 1.56; max-width: 62ch; }
.ins__meta { margin-top: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ins__inner .btn { margin-top: 22px; }

/* article page */
.wrap--art { max-width: 820px; }
.art__h1 { font-size: clamp(34px, 4.6vw, 60px); letter-spacing: -.038em; line-height: 1.04; margin-top: 24px; }
.art__stand { font-size: clamp(18px, 2vw, 23px); line-height: 1.48; color: var(--ink-2); margin-top: 22px; letter-spacing: -.012em; }
.art h2 { font-size: clamp(23px, 2.4vw, 30px); letter-spacing: -.028em; margin: clamp(38px, 4vw, 54px) 0 16px; }
.art h2:first-child { margin-top: 0; }
.art p { color: var(--ink-2); font-size: 17.5px; line-height: 1.68; margin-bottom: 20px; }
.art__q {
  margin: clamp(32px, 3.6vw, 44px) 0; padding: 22px 0 22px 26px;
  border-left: 3px solid var(--mat);
  font-size: clamp(19px, 2.1vw, 25px); line-height: 1.42; letter-spacing: -.018em;
  color: var(--ink); font-weight: 520;
}

/* The accordion panel reuses the whitepaper card treatment. Title and type are
   already in the summary row above, so they are not repeated inside. */
.paper--ins { margin-top: 0; border: 1px solid var(--line); background: var(--field); }
.ins[open] .ins__inner { padding-bottom: 30px; }
.paper--ins .paper__sum { font-size: 17px; max-width: 60ch; }
@media (min-width: 940px) { .paper--ins { grid-template-columns: 1fr 280px; } }

/* Display face on the two wordmarks and the one heading-scale element that is
   not an h1–h4 (the article standfirst reads as display, not body). */
.brand, .ftr__brand { font-family: var(--display); }
.art__stand, .eco-sub, .lede { font-family: var(--display); }

/* ═══ /protocol/ — THE RUBIX PROTOCOL ═══════════════════════════════════════
   Reference content, thirteen numbered items across three groups. The layout
   is a sticky index rail + content column: a documentation pattern used
   nowhere else on the site, so the page cannot read as a homepage clone.

   Every item is the same four-part unit — mono number, title, claim line,
   body — because the supplied copy already has that shape. The claim line is
   the moment: set in the display face at heading scale, it turns a spec list
   into something with rhythm.
   ═════════════════════════════════════════════════════════════════════════ */
.spec { display: grid; gap: clamp(36px, 4vw, 64px); align-items: start; }
@media (min-width: 1100px) { .spec { grid-template-columns: 232px minmax(0, 1fr); gap: clamp(48px, 5vw, 96px); } }

/* the rail: hidden below the breakpoint, where the page reads as one column */
.spec__rail { display: none; }
@media (min-width: 1100px) {
  .spec__rail { display: block; position: sticky; top: 108px; align-self: start; }
}
.rail__g + .rail__g { margin-top: 22px; }
.rail__k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
           color: var(--ink-3); margin: 0 0 10px; }
.rail__l { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rail__l a { display: grid; grid-template-columns: 22px 1fr; gap: 8px; padding: 5px 0;
             font-size: 14px; line-height: 1.35; color: var(--ink-3); text-decoration: none;
             border-left: 2px solid transparent; padding-left: 10px;
             transition: color 240ms var(--ease), border-color 240ms var(--ease); }
.rail__l a span:first-child { font-family: var(--mono); font-size: 10.5px; padding-top: 3px; }
.rail__l a:hover, .rail__l a:focus-visible { color: var(--ink); }
.rail__l a[aria-current="true"] { color: var(--ink); border-left-color: var(--mat); }

/* group headers: A / B / C */
.spec__h { border-top: 1px solid var(--line-2); padding-top: 18px; margin-top: clamp(52px, 6vw, 88px); }
.spec__h:first-child { margin-top: 0; }
.spec__h p { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
             color: var(--ink-3); margin: 0; }
.spec__h h2 { font-size: clamp(26px, 3.2vw, 40px); letter-spacing: -.03em; margin: 10px 0 0; }

/* the repeating item */
.item { border-top: 1px solid var(--line); padding-top: clamp(26px, 2.8vw, 38px);
        margin-top: clamp(34px, 3.6vw, 52px); scroll-margin-top: 120px; }
.item__n { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: var(--ink-3); }
.item__t { font-size: 20px; letter-spacing: -.024em; margin: 8px 0 0; }
.item__claim { font-family: var(--display); font-size: clamp(23px, 2.5vw, 33px); font-weight: 500;
               letter-spacing: -.03em; line-height: 1.18; color: var(--ink); margin: 16px 0 0;
               max-width: 22ch; }
.item__b { color: var(--ink-2); font-size: 16px; line-height: 1.62; max-width: 60ch; margin: 18px 0 0; }
.item__fig { width: 100%; height: auto; margin-top: clamp(22px, 2.4vw, 32px); overflow: visible;
             border: 1px solid var(--line); border-radius: var(--cell); background: var(--field);
             padding: clamp(14px, 1.6vw, 22px); box-sizing: border-box; }

/* C — Benefits: five one-liners, so the rhythm changes to signal the payoff */
.gains { display: grid; gap: 1px; margin-top: clamp(30px, 3.4vw, 44px);
         background: var(--line); border-block: 1px solid var(--line); }
@media (min-width: 760px) {
  .gains { grid-template-columns: repeat(2, 1fr); }
  /* five items into two columns leaves a dead cell; the last one takes the row */
  .gain:last-child { grid-column: 1 / -1; }
}
.gain { background: var(--field); padding: clamp(20px, 2.2vw, 28px);
        display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0 12px; align-content: start; }
.gain__n { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--ink-3); padding-top: 4px; }
.gain__t { font-size: 17.5px; font-weight: 570; letter-spacing: -.022em; margin: 0; }
.gain__c { grid-column: 2; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin: 8px 0 0; }

/* ═══ FOOTER ═══════════════════════════════════════════════════════════════
   A card on the warm field, in the same language as the nav capsule: rounded,
   hairline border, floating rather than filling. The previous footer carried
   twenty-two links across five columns plus three notices; this one carries
   twelve across three, and everything statutory sits on one line.
   ═════════════════════════════════════════════════════════════════════════ */
.ftr { border-top: 1px solid var(--line); background: var(--field-warm); position: relative; overflow: hidden; }
.ftr__card { position: relative; z-index: 1; max-width: 1160px; margin-inline: auto;
             margin-block: clamp(40px, 5vw, 76px); background: var(--field);
             border: 1px solid var(--line); border-radius: clamp(18px, 2vw, 28px);
             padding: clamp(30px, 3.4vw, 54px); }
@media (max-width: 860px) { .ftr__card { margin-inline: var(--gutter); padding: 28px 24px; } }

.ftr__grid { display: grid; gap: clamp(30px, 3.4vw, 44px); }
@media (min-width: 860px) {
  .ftr__grid { grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, .58fr));
               gap: clamp(28px, 3.2vw, 56px); }
}

.ftr__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink);
              font-size: 21px; font-weight: 760; letter-spacing: -.04em; }
.ftr__say { margin: 16px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-3); max-width: 34ch; }

/* bare marks, no plates: the icon is the target, the way the reference does it */
.ftr__social { display: flex; gap: 16px; margin: 22px 0 0; padding: 0; list-style: none; }
.ftr__social a { display: block; color: var(--ink-3); transition: color .18s ease; }
.ftr__social a:hover, .ftr__social a:focus-visible { color: var(--ink); }
.ftr__social svg { width: 17px; height: 17px; fill: currentColor; display: block; }

.ftr__k { margin: 0 0 14px; font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.ftr__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ftr__cols a { text-decoration: none; color: var(--ink-3); font-size: 14px; transition: color .18s ease; }
.ftr__cols a:hover { color: var(--ink); }

.ftr__rule { margin-top: clamp(30px, 3.4vw, 46px); padding-top: 20px; border-top: 1px solid var(--line);
             display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: baseline;
             justify-content: space-between; font-size: 13px; color: var(--ink-3); }
.ftr__rule nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.ftr__rule a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px;
               text-decoration-thickness: 1px; text-decoration-color: var(--line-2); }
.ftr__rule a:hover { color: var(--ink); text-decoration-color: currentColor; }
.ftr__fine { margin: 16px 0 0; font-size: 12px; line-height: 1.6; color: rgb(var(--rbx-green-rgb) / .42); }

/* the wordmark as a watermark, clipped by the band. Ink at 3.5%: present when
   you look for it, invisible when you are reading anything else. */
.ftr__mark { position: absolute; left: 50%; bottom: -.3em; transform: translateX(-50%);
             font-family: var(--display); font-weight: 780; letter-spacing: -.06em; line-height: .78;
             font-size: clamp(110px, 21vw, 300px); color: rgb(var(--rbx-green-rgb) / .028);
             pointer-events: none; user-select: none; white-space: nowrap; z-index: 0; }
@media (prefers-reduced-motion: no-preference) { .ftr__card { transition: none; } }
/* separates the registered-office line from the token notice on one line */
.ftr__sep { margin-inline: 8px; color: var(--line-2); }

/* ═══ 404 — THE UNRESOLVED PATH ════════════════════════════════════════════
   Built out of the one mark the system already reserves for a thing that is
   not there. Rule 3: a yellow cell is solid BECAUSE it is Rubix, and an
   outlined cell is what Rubix is not — the bypassed block queue, the
   unselected validator. An address with no page behind it is precisely that
   shape, so the page is one hollow cell held against a chain of solid ones.

   The hero takes the homepage's own opening move: the field IS the screen, at
   full bleed and full height, with the copy laid over its foot behind a scrim.
   Four lines and nothing else — a not-found page that opens on a paragraph is
   explaining itself, which is the one thing it has no standing to do. Every
   explanation lives below the fold, where a reader who wants it will go.

   Everything under the hero reuses shipped components: .split/.links for the
   destinations, .band--green for the close, the .eco-meta mono voice for the
   trace. Only the field and the trace rows are new.
   ═════════════════════════════════════════════════════════════════════════ */
.nf {
  position: relative; min-height: 100svh; overflow: hidden;
  display: grid; align-items: end;
  border-bottom: 1px solid var(--line);
}
/* the field fills the section and sits under everything */
.nf__stage { position: absolute; inset: 0; z-index: 1; }
.nf__stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* every solid cell is a real path, so over one the field is a link */
.nf__stage.is-over { cursor: pointer; }

.nf__copy {
  position: relative; z-index: 3; width: 100%;
  max-width: 1240px; margin-inline: auto;
  padding: 0 var(--gutter) clamp(64px, 13vh, 128px);
}
/* The field must never cost the headline its 13.9:1 — a scrim, not a
   compromise. The homepage rakes its scrim ACROSS the screen because its copy
   is a left-hand block over a centred field; this copy is a full-width band at
   the foot, so a raked scrim wiped the left third of the chain — genesis and
   the first three entries went with it. Vertical, and transparent until well
   below the spine. */
.nf__copy::before {
  content: ""; position: absolute; z-index: -1; inset: -30vh -50% -40% -50%;
  background: linear-gradient(to bottom,
    rgb(255 255 255 / 0) 0%, rgb(255 255 255 / .72) 38%, rgb(255 255 255 / .96) 62%, #fff 80%);
  pointer-events: none;
}

.nf__k {
  font-family: var(--mono); font-size: 11px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink-3); display: flex; align-items: center; gap: 10px;
}
/* hollow, not solid: the marker for this page is the one thing that is not
   there, and it has to be outlined everywhere it appears */
.nf__k::before {
  content: ""; width: 12px; height: 12px; border-radius: 1px; flex: none;
  box-shadow: inset 0 0 0 1.5px var(--line-2);
}
.nf__h1 {
  font-size: clamp(40px, 7vw, 92px); max-width: 14ch;
  letter-spacing: -.044em; line-height: .96; margin-top: 18px;
}
.nf__path {
  margin-top: clamp(20px, 2.6vw, 30px); font-family: var(--mono);
  font-size: clamp(13px, 1.5vw, 16px); color: var(--ink-2);
  overflow-wrap: anywhere; max-width: 54ch;
}
/* the only link in the hero, and only when the resolver actually found one */
.nf__hint { margin-top: 14px; font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
.nf__hint[hidden] { display: none; }
.nf__hint a {
  color: var(--ink); text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 1px; text-decoration-color: var(--line-2);
  overflow-wrap: anywhere;
}
.nf__hint a:hover { text-decoration-color: currentColor; }

.nf__cue {
  position: absolute; z-index: 3; left: 50%; bottom: 26px; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.nf__cue span { display: block; width: 1px; height: 26px; background: var(--line-2); }
@media (max-width: 900px) { .nf__cue { display: none; } }

/* ── where the path broke ─────────────────────────────────────────────────
   Diagnostic, so it sits with the walk rather than in the hero. Resolved
   segments carry the solid cell; the first one that resolves to nothing
   carries the hollow one. Written with textContent only — this is an
   attacker-controlled string, and the one thing a 404 must never do is render
   it as markup. */
.nf__segs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: clamp(26px, 3vw, 36px); }
.nf__seg { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono);
           font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
           padding: 6px 11px; border: 1px solid var(--line-2); border-radius: 2px; max-width: 100%; }
.nf__seg span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf__seg i { width: 7px; height: 7px; border-radius: 1px; background: var(--mat); flex: none; }
/* the whole conceit in three declarations: unresolved is outlined, never
   filled, and never yellow — yellow is only the material that is really there */
.nf__seg[data-state="unresolved"] { border-style: dashed; color: var(--ink-3); }
.nf__seg[data-state="unresolved"] i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); }

/* ── the trace ────────────────────────────────────────────────────────────
   A transfer is validated by walking a token's chain back to its genesis. The
   same walk, run against an address, is the honest explanation of a 404 — and
   it stops at step one. Rows arrive in sequence rather than all at once so the
   walk reads as something that happened, not a table that was always there. */
/* A numbered sequence of checks, so it is an <ol> — the counter is content,
   not styling, and it has to survive with CSS off. */
.trace { list-style: none; margin: clamp(30px, 3.4vw, 44px) 0 0; padding: 0;
         display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.trace__r { background: var(--field-warm); display: grid; gap: 4px 18px; align-items: baseline;
            padding: 20px clamp(16px, 2vw, 24px); border-left: 2px solid transparent;
            opacity: 0; transform: translateY(8px);
            transition: opacity 420ms var(--ease), transform 420ms var(--ease),
                        background 420ms var(--ease), border-color 420ms var(--ease); }
@media (min-width: 920px) { .trace__r { grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1.2fr) 92px; } }
.trace__r.is-on { opacity: 1; transform: none; }
.trace__n { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--ink-3); }
.trace__t { font-size: 16px; font-weight: 560; letter-spacing: -.018em; color: var(--ink); }
.trace__v { font-family: var(--mono); font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
/* Never colour alone: the verdict is a word first, and the rule beside it is
   the second channel. Yellow marks structure, green carries the meaning. */
.trace__s { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .14em;
            text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
.trace__s::before { content: ""; width: 8px; height: 8px; border-radius: 1px; flex: none;
                    box-shadow: inset 0 0 0 1.5px var(--line-2); }
.trace__r[data-state="fail"] { background: var(--field); border-left-color: var(--line-2); }
.trace__r[data-state="fail"] .trace__s { color: var(--ink); }
.trace__r[data-state="hit"] { background: var(--field); border-left-color: var(--mat); }
.trace__r[data-state="hit"] .trace__s { color: var(--ink); }
.trace__r[data-state="hit"] .trace__s::before { background: var(--mat); box-shadow: none; }

/* the verdict line — the trace's own footer, set as a statement not a row */
.trace__end { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 20px;
              margin-top: 22px; font-family: var(--mono); font-size: 11px; letter-spacing: .15em;
              text-transform: uppercase; color: var(--ink-3); }
.trace__end b { font-family: var(--display); font-size: clamp(26px, 3vw, 40px); font-weight: 600;
                letter-spacing: -.034em; text-transform: none; color: var(--ink); line-height: 1; }

/* ── nearest verified path ────────────────────────────────────────────────
   The only genuinely useful thing a 404 can do, so it is given a card and the
   yellow structural rule rather than a line of small print. Hidden entirely
   when the resolver finds nothing close — a suggestion that is not a
   suggestion is worse than silence. */
.nf__near { display: grid; gap: clamp(20px, 2.6vw, 34px); align-items: center;
            margin-top: clamp(34px, 4vw, 48px); padding: clamp(24px, 2.8vw, 36px);
            border: 1px solid var(--line); border-top: 3px solid var(--mat);
            border-radius: var(--cell); background: var(--field); }
@media (min-width: 820px) { .nf__near { grid-template-columns: 1fr auto; } }
.nf__near[hidden] { display: none; }
.nf__near-k { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .16em;
              text-transform: uppercase; color: var(--ink-3); }
.nf__near-t { font-size: clamp(21px, 2.3vw, 30px); letter-spacing: -.028em; margin-top: 12px; }
.nf__near-p { font-family: var(--mono); font-size: 13px; color: var(--ink-2); margin-top: 10px; overflow-wrap: anywhere; }

/* ── close ───────────────────────────────────────────────────────────────
   The page's one green field, and the only place it appears — the same budget
   the homepage spends on live proof. Here it spends it on the correction. */
/* Band headings on this page sit between .art h2 (too small) and the hero
   (too large), so they get one shared step of their own rather than an inline
   style at each call site. */
.nf__h2 { font-size: clamp(28px, 3.6vw, 48px); letter-spacing: -.036em; max-width: 20ch; margin-top: 20px; }
.nf__lede-b { margin-top: 20px; }

/* The second action on the green field. Yellow already carries the primary, so
   the secondary is an outline in white — never a second yellow, which would
   leave the band with two equal calls and no hierarchy. */
.btn--on-green-ghost { background: transparent; color: #fff; border-color: rgb(255 255 255 / .28); }
.btn--on-green-ghost::after { background: var(--mat); }

.nf__close { display: grid; gap: clamp(24px, 3.4vw, 52px); align-items: end; }
@media (min-width: 900px) { .nf__close { grid-template-columns: minmax(0, 1fr) auto; } }
.nf__close h2 { font-size: clamp(28px, 3.6vw, 48px); letter-spacing: -.036em; max-width: 17ch;
                margin-top: 18px; color: var(--on-green-loud); }
.nf__close p { margin-top: 18px; color: rgb(255 255 255 / .74); font-size: 17px; max-width: 46ch; }
.band--green .eyebrow { color: rgb(255 255 255 / .55); }
.nf__close-a { display: flex; flex-wrap: wrap; gap: 12px; }

@media (prefers-reduced-motion: reduce) {
  .trace__r { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ═══ /about/ ══════════════════════════════════════════════════════════════
   Eleven sections of prose, shaped into an arc rather than stacked: why, then
   mission, then four capability chapters, then the principles, then the people.
   The one moment of scale is the mission, because a mission stated at body size
   reads as a paragraph nobody wrote on purpose.
   ═════════════════════════════════════════════════════════════════════════ */

/* the mission, set as the page's single pull-quote */
.mission { display: grid; gap: clamp(24px, 3vw, 40px); margin-top: clamp(30px, 3.4vw, 44px); }
@media (min-width: 940px) { .mission { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); align-items: start; } }
.mission__q { font-family: var(--display); font-size: clamp(30px, 4.2vw, 54px); font-weight: 500;
              line-height: 1.1; letter-spacing: -.035em; color: var(--ink); margin: 0; max-width: 18ch; }
.mission__q i { display: block; width: 26px; height: 26px; border-radius: 3px; background: var(--mat);
                margin-bottom: 22px; }
.mission__b { font-size: clamp(16px, 1.5vw, 18px); line-height: 1.62; color: var(--ink-2); margin: 0;
              max-width: 46ch; }

/* the four capability chapters: a number, a claim, a body */
.chapter { border-top: 1px solid var(--line); padding-top: clamp(24px, 2.6vw, 34px);
           margin-top: clamp(32px, 3.6vw, 48px); display: grid; gap: 14px 40px; }
@media (min-width: 940px) { .chapter { grid-template-columns: 42px minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; } }
/* the middle column was carrying a title and then a column of dead space; the
   figure belongs there, arguing the chapter rather than decorating it */
.chapter__fig { width: 100%; max-width: 260px; height: auto; margin-top: 20px; display: block; overflow: visible; }
.chapter__n { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--ink-3); padding-top: 6px; }
.chapter__t { font-size: clamp(21px, 2.3vw, 28px); letter-spacing: -.028em; margin: 0; max-width: 16ch; }
.chapter__b { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.62; }
.chapter__b + .chapter__b { margin-top: 14px; }

/* five principles, each with a glyph built from the 3x3 module */
.tenets { display: grid; gap: 1px; margin-top: clamp(34px, 4vw, 52px);
          background: var(--line); border-block: 1px solid var(--line); }
@media (min-width: 720px)  { .tenets { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .tenets { grid-template-columns: repeat(5, 1fr); } }
.tenet { background: var(--field); padding: clamp(22px, 2.4vw, 30px) clamp(18px, 2vw, 24px);
         display: flex; flex-direction: column; gap: 14px; }
.tenet svg { width: 52px; height: 52px; display: block; overflow: visible; }
.tenet h3 { font-size: 17px; letter-spacing: -.022em; margin: 0; }
.tenet p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin: 0; }

/* the closing three: people, ecosystem, open */
.closers { display: grid; gap: clamp(26px, 3vw, 44px); margin-top: clamp(34px, 4vw, 52px); }
@media (min-width: 860px) { .closers { grid-template-columns: repeat(3, 1fr); } }
.closer { border-top: 2px solid var(--mat); padding-top: 20px; }
.closer h3 { font-size: 18px; letter-spacing: -.022em; margin: 0 0 10px; }
.closer p { color: var(--ink-2); font-size: 15.5px; line-height: 1.58; margin: 0; }

/* The mission sits on the module at scale: the nine-cell mark cropped by the
   band edge, at 4% ink. Present when you look for it, gone when you are reading. */
.band--mission { position: relative; overflow: hidden; }
.mission__mark { position: absolute; right: -6%; top: 50%; transform: translateY(-50%);
                 display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 26px);
                 width: clamp(320px, 42vw, 620px); pointer-events: none; z-index: 0; }
.mission__mark i { display: block; aspect-ratio: 1; border-radius: clamp(4px, .7vw, 10px);
                   background: rgb(var(--rbx-green-rgb) / .04); }
.band--mission .wrap { position: relative; z-index: 1; }
@media (max-width: 860px) { .mission__mark { display: none; } }
/* the contrast the section argues: a shared pipeline against parallel chains */
.why__fig { width: 100%; height: auto; display: block; margin-top: clamp(28px, 3vw, 40px);
            border: 1px solid var(--line); border-radius: var(--cell);
            padding: clamp(16px, 1.8vw, 26px); box-sizing: border-box; background: var(--field); }

/* ═══ /contact/ ════════════════════════════════════════════════════════════
   The 404 field, run in the affirmative. An earlier draft of this page was
   deliberately undiagrammed after a funnel figure routed four audiences
   "through" the nine-cell mark and emitted a team as a yellow cell — a
   category error; a cell is material, never an organisation. This field makes
   no such claim: the solid cells are the four routes in, the hollow one is
   you, and the drawn thing is the CONNECTION — which is exactly what the site
   says an interaction is. Where the 404's probes stop short and mark a miss,
   these land, and the minted cell that travels the link is your message.

   Hero classes mirror .nf deliberately (stage/copy/scrim/kicker/cue) so the
   two pages read as prints of the same negative. One inversion carries the
   meaning: the nf kicker's marker is hollow — the page is about an absence —
   and the ct kicker's is solid, because every path here is really there.
   ═════════════════════════════════════════════════════════════════════════ */
.ct {
  position: relative; min-height: 100svh; overflow: hidden;
  display: grid; align-items: end;
  border-bottom: 1px solid var(--line);
}
.ct__stage { position: absolute; inset: 0; z-index: 1; }
.ct__stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* every solid cell is a real route, so over one the field is a link */
.ct__stage.is-over { cursor: pointer; }

.ct__copy {
  position: relative; z-index: 3; width: 100%;
  max-width: 1240px; margin-inline: auto;
  padding: 0 var(--gutter) clamp(64px, 13vh, 128px);
}
/* same vertical scrim as the 404 hero, same reasoning: the copy is a
   full-width band at the foot, so a raked scrim would wipe the left routes. */
.ct__copy::before {
  content: ""; position: absolute; z-index: -1; inset: -30vh -50% -40% -50%;
  background: linear-gradient(to bottom,
    rgb(255 255 255 / 0) 0%, rgb(255 255 255 / .72) 38%, rgb(255 255 255 / .96) 62%, #fff 80%);
  pointer-events: none;
}

.ct__k {
  font-family: var(--mono); font-size: 11px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink-3); display: flex; align-items: center; gap: 10px;
}
/* solid, not hollow: the 404's marker is the thing that is not there; this
   page's marker is the four routes that are */
.ct__k::before {
  content: ""; width: 12px; height: 12px; border-radius: 1px; flex: none;
  background: var(--mat);
}
.ct__h1 {
  font-size: clamp(40px, 7vw, 92px); max-width: 14ch;
  letter-spacing: -.044em; line-height: .96; margin-top: 18px;
}
.ct__sub {
  margin-top: clamp(20px, 2.6vw, 30px); font-size: clamp(17px, 1.9vw, 22px);
  line-height: 1.45; color: var(--ink-2); max-width: 46ch; letter-spacing: -.012em;
}
.ct__hint { margin-top: 14px; font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
.ct__hint a {
  color: var(--ink); text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 1px; text-decoration-color: var(--line-2);
}
.ct__hint a:hover { text-decoration-color: currentColor; }

.ct__cue {
  position: absolute; z-index: 3; left: 50%; bottom: 26px; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.ct__cue span { display: block; width: 1px; height: 26px; background: var(--line-2); }
@media (max-width: 900px) { .ct__cue { display: none; } }

/* band headings, one shared step between .art h2 and the hero, as on the 404 */
.ct__h2 { font-size: clamp(28px, 3.6vw, 48px); letter-spacing: -.036em; max-width: 22ch; margin-top: 20px; }
.band--green .ct__h2 { color: var(--on-green-loud); }
.ct__glede { margin-top: 18px; color: rgb(255 255 255 / .74); font-size: 17px; max-width: 52ch; }

.routes { display: grid; gap: 1px; margin-top: clamp(26px, 3vw, 40px);
          background: var(--line); border-block: 1px solid var(--line); }
@media (min-width: 700px)  { .routes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .routes { grid-template-columns: repeat(4, 1fr); } }
.route { background: var(--field); padding: clamp(20px, 2.2vw, 26px); display: flex;
         flex-direction: column; gap: 10px; text-decoration: none; color: inherit;
         transition: background 260ms var(--ease); }
.route:hover { background: var(--field-warm); }
.route__k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
            text-transform: uppercase; color: var(--ink-3); }
.route h3 { font-size: 17.5px; letter-spacing: -.022em; margin: 0; }
.route__a { font-size: 14.5px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.route__a::after { content: "→"; color: var(--ink-3); transition: transform 260ms var(--ease); }
.route:hover .route__a::after { transform: translateX(3px); }

.route__d { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }

/* A content-light page does not need the full band rhythm: three bands at the
   standard padding wrapped ~70 words in roughly 1000px of empty space. */
.band--tight { padding-block: clamp(52px, 6vw, 86px); }

/* ── offices: one graph, four time zones ──────────────────────────────────
   The page's one green field, spent on the offices — because the live thing
   about this company is not a figure, it is that somewhere on the graph it is
   office hours. Each hub is a solid cell linked to the next; the connector
   after the last one fades out rather than stopping, because the graph does
   not end at the newest office. Times are authored as UTC offsets and become
   live local clocks by script; the open/closed state is a marker AND the
   words, never colour alone. */
.hubs { display: grid; margin-top: clamp(34px, 4vw, 52px); }
@media (min-width: 760px) { .hubs { grid-template-columns: repeat(4, 1fr); } }
.hub { position: relative; padding: 18px 28px 4px 0; }
.hub__link { display: flex; align-items: center; gap: 12px; }
.hub__link i { width: 14px; height: 14px; border-radius: 2px; background: var(--mat); flex: none; }
.hub__link::after { content: ""; flex: 1; height: 1px; background: var(--on-green-line); }
.hub:last-child .hub__link::after {
  background: linear-gradient(to right, var(--on-green-line), transparent);
}
.hub h3 { font-size: 17px; letter-spacing: -.02em; margin: 18px 0 0; color: #fff; }
.hub__addr { font-size: 13.5px; line-height: 1.5; color: rgb(255 255 255 / .55); margin-top: 6px; }
.hub__time { font-family: var(--mono); font-size: clamp(26px, 2.6vw, 34px); font-weight: 500;
             letter-spacing: .02em; color: var(--on-green-loud); margin-top: 16px;
             font-variant-numeric: tabular-nums; }
.hub__state { display: flex; align-items: center; gap: 8px; margin-top: 8px;
              font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
              text-transform: uppercase; color: rgb(255 255 255 / .62); }
.hub__state[hidden] { display: none; }
.hub__state::before { content: ""; width: 8px; height: 8px; border-radius: 1px; flex: none;
                      box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .35); }
.hub[data-open="true"] .hub__state { color: var(--on-green); }
.hub[data-open="true"] .hub__state::before { background: var(--mat); box-shadow: none; }

/* stacked below the 4-up breakpoint: the chain runs down the left instead */
@media (max-width: 759.9px) {
  .hub { padding: 14px 0 14px 30px; }
  .hub__link { position: absolute; left: 0; top: 18px; bottom: -4px; flex-direction: column; }
  .hub__link::after { width: 1px; height: auto; flex: 1; }
  .hub:last-child .hub__link::after {
    background: linear-gradient(to bottom, var(--on-green-line), transparent);
  }
  .hub h3 { margin-top: 0; }
}

.ct__close-a { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(38px, 4.4vw, 58px); }
.route__a { font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; color: var(--ink-3); margin-top: 2px; }