/* =============================================================================
   KubeNeuron — design system
   -----------------------------------------------------------------------------
   The product's argument is that it refuses: it fails closed, it asks a human at
   the rungs that deserve it, and it says in public what it has not validated.
   The page is art-directed around that, on three surfaces and nothing else:

     PAPER  carries the argument — prose, headings, navigation.
     INK    carries the evidence — full-bleed, once per page at most, and only
            where a measured fact or a real hardware run is on the record.
     RUST   carries the refusal — what the system declines to do and what has
            not been proven. Never decorative, never a highlight.

   The rules the sheet holds itself to:

   - ONE typeface. Space Grotesk sets everything; JetBrains Mono appears only
     where the content is literally machine text — a command, an XID, a metric,
     a log line. Never for labels, never uppercased into a fake technical chip.
   - Hierarchy comes from size, weight, measure and space. Hairlines exist for
     tabular data and for the refusal marker, and almost nowhere else. Nothing
     is boxed merely to look contained.
   - Numbers are a voice. Measured facts get their own display size and tabular
     figures, because on this site the numbers are the product.
   - Motion is for state, not for arrival.
   ========================================================================== */

@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/space-grotesk-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2192, U+2212;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2192, U+2193;
}

:root {
  /* Paper, warm rather than clinical. */
  --paper: #fbfaf7;
  --paper-sunk: #f2efe8;
  --ink: #14151a;
  --ink-2: #3d414d;
  --ink-3: #6c7080;
  --rule: #e4e0d6;
  --rule-strong: #c9c4b6;
  /* A control's outline has to be visible, not merely tasteful: --rule-strong
     is 1.7:1 on paper, which is below the 3:1 that WCAG 1.4.11 asks of a
     non-text boundary. Buttons, the copy control, the menu control and the
     lowest rung of the ladder use this instead. */
  --rule-ui: #8f8674;

  /* The evidence surface. Deliberately the same family as the console
     screenshots, so a dark product shot sits ON the band rather than fighting
     the page around it. */
  --band: #15171d;
  --band-2: #1e212a;
  --band-rule: #33373f;
  --band-ink: #e7e5df;
  --band-ink-2: #a2a7b2;
  --band-ink-3: #7b808c;

  /* One accent: links, the primary action, the section tick. Nothing else. */
  --accent: #0d6d7c;
  --accent-ink: #08505c;
  --accent-lit: #6ec3d3;

  /* Refusal. Used at most twice per page, always about a limit. */
  --signal: #a33a22;
  --signal-lit: #dd9270;

  --sans: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale. Five steps that are actually apart, plus a numeral voice —
     the previous sheet had two big sizes and a mush of 15-17px between them. */
  --t-sm: 0.9375rem;
  --t-body: 1.0625rem;
  --t-lead: clamp(1.125rem, 0.95rem + 0.6vw, 1.3125rem);
  --t-say: clamp(1.3125rem, 1rem + 1.2vw, 1.75rem);
  --t-h2: clamp(1.875rem, 1.15rem + 2.6vw, 2.875rem);
  --t-h1: clamp(2.625rem, 1.35rem + 4.6vw, 4.375rem);
  --t-num: clamp(2.25rem, 1.4rem + 3.1vw, 3.5rem);

  --measure: 64ch;
  --gutter: clamp(20px, 5vw, 64px);
  --max: 1240px;

  /* Two radii, both small. */
  --r: 3px;
  --r-lg: 6px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

::selection { background: #d8ecef; color: var(--ink); }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 12px 18px;
}
.skip-link:focus { left: 0; }

.icon-sprite { display: none; }

/* ---------- Layout ---------------------------------------------------------
   One rail. Sections change their internal composition, and twice a page they
   change surface — which is what stops a scroll reading as one template block
   repeated eight times. */

.shell {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* Grid and flex children default to min-width:auto, so one unbreakable string
   — an install command, a long identifier — pushes the whole page wider than
   the viewport. Cheaper to prevent globally than to chase per component. */
.shell > *,
.hero > *,
.flow > *,
.evidence > *,
.split > *,
.footer-inner > *,
.offer-grid > *,
.bento > * { min-width: 0; }

section.shell { padding-block: clamp(72px, 9vw, 128px); }

/* The evidence band. Full-bleed ink, the rail preserved inside it. Reserved
   for a measured result or a real hardware run — never used to decorate a
   section that is only making an argument. */
.band { background: var(--band); color: var(--band-ink); }
.band-inner {
  width: 100%; max-width: var(--max); margin: 0 auto;
  padding-inline: var(--gutter);
  padding-block: clamp(72px, 9vw, 128px);
}
.band-inner > * { min-width: 0; }
.band h1, .band h2, .band h3, .band strong { color: var(--band-ink); }
.band p { color: var(--band-ink-2); }
.band a { color: var(--accent-lit); }
.band a:hover { color: #a5ddea; }
.band .eyebrow { color: var(--band-ink); }
.band .eyebrow::before { background: var(--accent-lit); }
.band :focus-visible { outline-color: var(--accent-lit); }

/* ---------- Type -----------------------------------------------------------
   Display weight is 500, not 700: at these sizes bold reads shouty, and shouty
   is what makes a landing page look like a billboard. */

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.021em;
  line-height: 1.08;
  text-wrap: balance;
}

h1 {
  font-size: var(--t-h1);
  letter-spacing: -0.033em;
  line-height: 1.0;
}

h2 {
  font-size: var(--t-h2);
  letter-spacing: -0.026em;
  max-width: 20ch;
}
/* A promoted section heading is still a section heading: it must not jump to
   hero scale just because the builder changed its tag. */
main .section-head h1,
.install-copy h1 {
  font-size: var(--t-h2);
  letter-spacing: -0.026em;
  line-height: 1.08;
  max-width: 20ch;
}

/* Tags carry semantics; components carry size. The builder promotes the first
   section of an inner page by one level so the document has an h1 and no level
   skip, which means the same heading can arrive as an h2 or an h3 — so every
   component that contains one sizes it by :is(h2, h3) rather than by tag. */
h3 {
  font-size: 1.1875rem;
  line-height: 1.28;
  letter-spacing: -0.012em;
}

p { margin: 0 0 1.15em; max-width: var(--measure); overflow-wrap: break-word; }
h1 + p, h2 + p, h3 + p { margin-top: 18px; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: var(--t-lead);
  line-height: 1.58;
  color: var(--ink-2);
  max-width: 52ch;
}

/* The section label. Sentence case, in the page's own typeface, marked by a
   short accent tick — NOT by a hairline running the width of the page. That
   rule appeared on all sixteen sections of the old site and had become the
   single most template-like thing on it. */
.eyebrow {
  max-width: none;
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 clamp(18px, 2vw, 26px);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 22px; height: 2px;
  background: var(--accent);
  transform: translateY(-0.34em);
}
/* An inline qualifier, not a badge: it modifies the sentence it sits in. */
.chip-inline { color: var(--ink-3); font-weight: 400; }
.band .chip-inline { color: var(--band-ink-3); }

.section-head { margin-bottom: clamp(34px, 4vw, 56px); }
.section-lede { color: var(--ink-2); font-size: var(--t-lead); line-height: 1.58; max-width: 46ch; margin-top: 18px; }
.band .section-lede { color: var(--band-ink-2); }

/* Heading left, standfirst right. The page's standard opening — consistency
   lives here so the section BODIES can each be composed for what they are. */
@media (min-width: 900px) {
  .section-head:has(.section-lede) {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 0 clamp(40px, 6vw, 96px);
    align-items: end;
  }
  .section-head:has(.section-lede) .eyebrow { grid-column: 1 / -1; }
  .section-head:has(.section-lede) h1,
  .section-head:has(.section-lede) h2 { grid-column: 1; }
  .section-head:has(.section-lede) .section-lede { grid-column: 2; grid-row: 2; margin-top: 0; }
}

/* Machine text, and only machine text. */
code, kbd, samp, pre { font-family: var(--mono); font-size: 0.875em; }
:not(pre) > code {
  background: var(--paper-sunk);
  padding: 0.12em 0.36em;
  border-radius: var(--r);
}
.band :not(pre) > code { background: var(--band-2); color: var(--band-ink); }
/* On an ink surface the chip background is wrong — the code is already
   distinguished by sitting on ink. */
.receipt code,
.tab-panel code,
.cell-code code,
.compare code,
.hero-snippet code { background: none; padding: 0; border-radius: 0; }

/* The numeral voice. Measured facts only — a figure that came out of the
   product, never a number invented to fill a stat row. */
.figure-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: clamp(26px, 3vw, 44px);
}
.figure { display: block; }
.figure b {
  display: block;
  font-size: var(--t-num);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.038em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--band-ink);
}
.figure span {
  display: block;
  margin-top: 12px;
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--band-ink-2);
  max-width: 22ch;
}
.figure em { font-style: normal; color: var(--band-ink-3); }
/* A connective word inside a figure is not part of the figure. */
.figure b em {
  font-size: 0.42em; font-weight: 400; letter-spacing: -0.01em;
  color: var(--band-ink-3); padding-inline: 0.14em;
}

/* The refusal marker. A rust rule and a rust lead-in, used where the copy is
   about a limit. It is the only place on the site that gets its own colour,
   because the limits are the reason to believe the rest. */
.refusal {
  margin-top: clamp(30px, 3.6vw, 46px);
  padding-top: 18px;
  border-top: 2px solid var(--signal);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 74ch;
}
.refusal strong { color: var(--signal); font-weight: 500; }
.band .refusal { border-top-color: var(--signal-lit); color: var(--band-ink-2); }
.band .refusal strong { color: var(--signal-lit); }

/* ---------- Buttons --------------------------------------------------------
   Two, and they look like buttons rather than glowing capsules. */

.button {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font: inherit; font-size: 1rem; font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.button-primary { background: var(--ink); color: var(--paper); }
.button-primary:hover { background: #000; color: var(--paper); }
.button-ghost,
.button-outline {
  background: transparent; color: var(--ink); border-color: var(--rule-ui);
}
.button-ghost:hover,
.button-outline:hover { border-color: var(--ink); color: var(--ink); }
.button-sm { padding: 8px 15px; font-size: var(--t-sm); }
.band .button-primary { background: var(--band-ink); color: var(--band); }
.band .button-primary:hover { background: #fff; color: var(--band); }
.band .button-ghost { color: var(--band-ink); border-color: var(--band-rule); }
.band .button-ghost:hover { border-color: var(--band-ink); color: var(--band-ink); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.text-link { color: var(--accent); font-weight: 500; }
.band .text-link { color: var(--accent-lit); }
/* An unsized inline SVG falls back to its viewBox and blows the button open. */
.btn-icon { width: 17px; height: 17px; flex: none; fill: currentColor; }

/* ---------- Header ----------------------------------------------------------
   No border until you have scrolled: at the top of a page the header should be
   part of the paper, not a bar laid on top of it. */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease;
}
.site-header.is-stuck { border-bottom-color: var(--rule); }
.header-inner {
  width: 100%; max-width: var(--max); margin: 0 auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; height: 64px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none;
}
.brand img { width: 22px; height: 22px; }
.brand span span { color: var(--ink-3); font-weight: 500; }

.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav a {
  color: var(--ink-2); text-decoration: none; font-size: var(--t-sm);
}
.site-nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
/* Where you are, without a pill or a highlight block. */
.site-nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
  text-decoration-color: var(--accent);
}
.site-nav .button-primary { color: var(--paper); }
.site-nav .button-primary:hover { text-decoration: none; }
.nav-divider { width: 1px; height: 18px; background: var(--rule); }
.icon-link { display: inline-flex; color: var(--ink-2); }
.icon-link svg { width: 19px; height: 19px; fill: currentColor; }
.icon-link:hover { color: var(--ink); }
.menu-button { display: none; }

/* ---------- Hero -----------------------------------------------------------
   Asymmetric, and the console runs off the right edge of the sheet. The rail
   holds the argument; the product is not asked to fit inside it. */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(36px, 4.5vw, 64px);
  align-items: start;
  max-width: none;
  padding-block: clamp(56px, 7vw, 100px) clamp(56px, 7vw, 96px);
  /* The console used to bleed off the right edge while the copy stayed on the
     centred rail, so a wide viewport put 200px of nothing on the left and cut
     the screenshot at the right. Read as a mistake rather than as a decision.
     Both edges now come off the same margin — a wide one, so the hero still
     sits further out than the sections below it and keeps its own air. */
  padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2)) ;
}
.hero-copy {
  max-width: 34rem; padding-bottom: 4px;
  /* The display line is sized by the column it lives in, not by the window.
     Tied to the viewport it went to four ragged lines everywhere between the
     two-column breakpoint and 1300px, because the column narrows there while
     the viewport does not. */
  container-type: inline-size;
}
.hero h1 { margin-bottom: 26px; font-size: clamp(2.625rem, 12.4cqi, 4.375rem); }
.hero h1 em { font-style: normal; }
.hero .lede { max-width: 46ch; }

/* The install line and its caveat, on one rail under the hero. */
.hero-strip {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  padding-bottom: clamp(8px, 2vw, 24px);
}
.hero-snippet {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 14px 14px 18px;
  background: var(--paper-sunk);
  border-radius: var(--r);
}
.hero-snippet code {
  flex: 1; min-width: 0;
  font-size: 0.8125rem; line-height: 1.7; color: var(--ink-2);
  /* The old sheet clipped this mid-word behind an invisible overflow. A shell
     command wrapping is what a terminal does; a truncated one is a bug. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.hero-note { margin: 0; font-size: var(--t-sm); color: var(--ink-3); max-width: 48ch; }
@media (max-width: 860px) {
  .hero-strip { grid-template-columns: 1fr; align-items: start; }
}

.copy-button {
  flex: none;
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; padding: 0;
  background: transparent; border: 1px solid var(--rule-ui);
  border-radius: var(--r); color: var(--ink-2); cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
.copy-button:hover { border-color: var(--ink); color: var(--ink); }
.copy-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ic-check { display: none; }
.copy-button.copied .ic-copy { display: none; }
.copy-button.copied .ic-check { display: block; }
.copy-button.copied { border-color: var(--accent); color: var(--accent); }
.copy-float { position: absolute; right: 10px; top: 10px; }
.tab-panel .copy-button,
.receipt .copy-button { border-color: var(--band-rule); color: var(--band-ink-2); }
.tab-panel .copy-button:hover,
.receipt .copy-button:hover { border-color: var(--band-ink-2); color: var(--band-ink); }

/* The real console shot, running to the edge. The shadow is the only one on
   the page and it exists because the image genuinely sits above the sheet. */
.hero-shot {
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(20, 21, 26, 0.09), 0 22px 50px -20px rgba(20, 21, 26, 0.4);
}
.hero-shot img { width: 100%; }
.hero-caption {
  margin-top: 14px; padding-right: var(--gutter);
  font-size: var(--t-sm); color: var(--ink-3); max-width: 54ch;
}

/* ---------- Problem --------------------------------------------------------
   Three consequences of the same gap, so they are set as three columns of
   prose under one statement — not as three numbered rows, which is how four
   other sections on the old site already read. */

.problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: clamp(28px, 3.4vw, 52px);
  margin-top: clamp(28px, 3.4vw, 44px);
}
.problem-grid :is(h2, h3) { font-size: 1.1875rem; line-height: 1.28; letter-spacing: -0.012em; margin-bottom: 8px; }
.problem-grid :is(h2, h3) span {
  display: block; margin-bottom: 10px;
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--signal);
}
.problem-grid p { color: var(--ink-2); font-size: 1rem; max-width: 40ch; }

/* ---------- How it works ---------------------------------------------------- */

/* Two paths that converge. The composition IS the explanation, so it is built
   as two columns meeting a full-width band rather than as a list of equal
   items. */
.flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 clamp(32px, 5vw, 80px);
}
.flow > .flow-col:first-of-type { grid-column: 1; grid-row: 1; }
.flow > .flow-col:last-of-type { grid-column: 2; grid-row: 1; }
.flow > .flow-center { grid-column: 1 / -1; grid-row: 2; }
.flow-tag {
  display: block;
  font-size: var(--t-sm); font-weight: 500; color: var(--ink);
  padding-bottom: 12px; border-bottom: 1px solid var(--ink);
}
.flow-node { padding: 20px 0 18px; }
.flow-node strong { display: block; font-weight: 500; margin-bottom: 5px; }
.flow-node p { color: var(--ink-2); font-size: var(--t-sm); margin: 0; max-width: 38ch; }

/* The convergence: full width, on sunk paper, so the eye reads "both of the
   above arrive here" without an arrow being drawn. */
.flow-center { margin-top: clamp(24px, 3vw, 38px); }
.flow-core {
  padding: clamp(24px, 3vw, 36px);
  background: var(--paper-sunk);
  border-radius: var(--r-lg);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px clamp(32px, 5vw, 72px);
  align-items: start;
}
.core-label {
  grid-column: 1; font-family: var(--mono); font-size: var(--t-sm); color: var(--ink);
}
.flow-core p { grid-column: 1; color: var(--ink-2); font-size: var(--t-sm); margin: 0; }
.flow-core ul {
  grid-column: 2; grid-row: 1 / span 2;
  margin: 0; padding: 0; list-style: none;
  color: var(--ink-2); font-size: var(--t-sm);
}
.flow-core li { padding: 5px 0 5px 18px; position: relative; }
.flow-core li::before {
  content: ""; position: absolute; left: 0; top: 0.95em;
  width: 8px; height: 1px; background: var(--rule-strong);
}

@media (max-width: 760px) {
  .flow, .flow-core { grid-template-columns: 1fr; }
  .flow > .flow-col:first-of-type,
  .flow > .flow-col:last-of-type,
  .flow > .flow-center { grid-column: 1; grid-row: auto; }
  .flow-col + .flow-col { margin-top: 34px; }
  .flow-core ul { grid-column: 1; grid-row: auto; margin-top: 14px; }
}

/* The three sequential steps — the one place a numbered run is still used on
   this page, because these genuinely are steps one, two and three. */
.steps { display: grid; gap: 0; margin-top: clamp(38px, 4.5vw, 60px); }
.steps > * {
  display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 0 8px;
  padding: 24px 0;
}
.steps > * + * { border-top: 1px solid var(--rule); }
.steps > * > *:not(.step-index) { grid-column: 2; }
.step-index { grid-column: 1; font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-3); padding-top: 0.35em; }
.steps :is(h2, h3) { font-size: 1.1875rem; line-height: 1.28; letter-spacing: -0.012em; margin-bottom: 6px; }
.steps p { color: var(--ink-2); max-width: 62ch; }

/* ---------- The ladder -----------------------------------------------------
   A seven-rung escalation ladder was being drawn as seven identical rows, so
   nothing about it said ladder: not that it escalates, not that rung five is
   where a human is asked, not that most signals never leave rung one.

   It is drawn as a staircase now. The tread darkens and then turns rust as the
   rungs get destructive, and the approval gate is a real line across the
   climb. Every word of it is already the site's copy; the drawing only stops
   throwing that information away. */

.ladder { list-style: none; margin: clamp(30px, 3.6vw, 46px) 0 0; padding: 0; }
.ladder > li {
  --i: 0;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0 14px;
  padding: 15px 0 15px calc(var(--i) * var(--tread, 26px));
  align-items: baseline;
}
/* The gate is the fifth child but not the fifth rung, so the ramp is written
   out rather than computed — seven values, once. */
.ladder > li:nth-child(2) { --i: 1; }
.ladder > li:nth-child(3) { --i: 2; }
.ladder > li:nth-child(4) { --i: 3; }
.ladder > li:nth-child(5) { --i: 4; }
.ladder > li:nth-child(6) { --i: 4; }
.ladder > li:nth-child(7) { --i: 5; }
.ladder > li:nth-child(8) { --i: 6; }
.ladder .n {
  grid-column: 1; position: relative;
  font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-3);
}
/* The tread. Its weight is the escalation. */
.ladder .n::before {
  content: ""; position: absolute; left: 0; top: -13px;
  width: 26px; height: 2px; background: var(--rule-ui);
}
.ladder > li:nth-child(3) .n::before,
.ladder > li:nth-child(4) .n::before { background: var(--ink-3); }
.ladder > li:nth-child(6) .n::before,
.ladder > li:nth-child(7) .n::before,
.ladder > li:nth-child(8) .n::before { background: var(--signal); }
.ladder strong { grid-column: 2; font-weight: 500; font-size: 1.125rem; letter-spacing: -0.012em; }
.ladder p { grid-column: 2; margin: 3px 0 0; color: var(--ink-2); font-size: var(--t-sm); max-width: 46ch; }

/* The two annotations that matter, hung off the climb. */
.ladder .rung-note {
  grid-column: 2; margin-top: 6px;
  font-size: 0.8125rem; color: var(--ink-3);
}
/* Sits at rung five's indent, because that is the rung it guards. */
.ladder > li.ladder-gate { padding-block: 16px 6px; }
.ladder-gate span {
  grid-column: 2;
  display: flex; align-items: center; gap: 14px;
  font-size: 0.8125rem; font-weight: 500; color: var(--signal);
}
.ladder-gate span::after {
  content: ""; flex: 1 1 auto; height: 1px; max-width: 220px;
  background: var(--signal); opacity: 0.45;
}

@media (max-width: 860px) { :root { --tread: 14px; } }
@media (max-width: 620px) {
  /* Below this the staircase costs more measure than it buys meaning; the
     tread colour still carries the escalation. */
  :root { --tread: 0px; }
  .ladder > li { grid-template-columns: 2.25rem minmax(0, 1fr); }
}

/* ---------- Evidence: the measured result ----------------------------------
   The strongest thing this product can say is a number that came out of it.
   The old sheet set those numbers at thirteen pixels inside a terminal box and
   gave the argument around them forty. Reversed: the figures lead, the raw
   report stays underneath as the receipt they came from. */

.evidence {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(34px, 4vw, 64px);
  align-items: start;
  margin-top: clamp(38px, 4.4vw, 60px);
}
.evidence-notes { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.evidence-notes li { color: var(--band-ink-2); font-size: 1rem; line-height: 1.6; max-width: 46ch; }
.evidence-notes strong { display: block; color: var(--band-ink); font-weight: 500; margin-bottom: 3px; }

/* The receipt: the actual command and its actual output. */
.receipt { background: var(--band-2); border-radius: var(--r-lg); overflow: hidden; }
.receipt .demo-chrome {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--band-rule);
}
.receipt .demo-chrome code { color: var(--band-ink-2); font-size: 0.8125rem; }
.receipt pre { margin: 0; padding: 20px 22px; overflow-x: auto; }
.receipt code { color: var(--band-ink); font-size: 0.8125rem; line-height: 1.85; white-space: pre; }

.receipt 
/* ---------- Evidence: the hardware run -------------------------------------- */

.run-claim { max-width: 24ch; }
.run-claim span { color: var(--band-ink-2); }
.run-body {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 64px); align-items: start;
  margin-top: clamp(32px, 4vw, 52px);
}
.run-body > p { color: var(--band-ink-2); max-width: 54ch; margin: 0; font-size: 1rem; line-height: 1.68; }
/* The chain, as the sequence it is. Rules here are the only ones on the band
   and they are doing what a table rule does: separating rows of one record. */
.run-chain { margin: 0; padding: 0; list-style: none; counter-reset: chain; }
.run-chain li {
  counter-increment: chain;
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0 10px;
  padding: 9px 0; border-top: 1px solid var(--band-rule);
  font-size: var(--t-sm); color: var(--band-ink);
}
.run-chain li:last-child { border-bottom: 1px solid var(--band-rule); }
.run-chain li::before {
  content: counter(chain, decimal-leading-zero);
  font-family: var(--mono); font-size: 0.75rem; color: var(--band-ink-3);
}
@media (max-width: 860px) { .run-body { grid-template-columns: 1fr; } }

/* ---------- Signals table --------------------------------------------------- */

.table-wrap { overflow-x: auto; }
.xid-table { width: 100%; border-collapse: collapse; font-size: 1rem; min-width: 640px; }
.xid-table th, .xid-table td { text-align: left; vertical-align: top; padding: 18px 20px 18px 0; }
.xid-table thead th {
  font-weight: 500; font-size: var(--t-sm); color: var(--ink-3);
  padding-bottom: 10px; border-bottom: 1px solid var(--rule-strong);
}
.xid-table tbody tr { border-bottom: 1px solid var(--rule); }
.xid-table tbody th { font-weight: 400; }
.xid-table .xid {
  font-family: var(--mono); font-size: 1.0625rem; font-weight: 500; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.xid-table td:last-child { color: var(--ink-2); font-size: var(--t-sm); max-width: 44ch; }
.tag { font-family: var(--mono); font-size: 0.8125rem; color: var(--ink); }
.tag-critical { color: var(--signal); }
.tag-contained { color: var(--accent-ink); }
.signals-more, .safety-more {
  margin-top: 26px; color: var(--ink-2); font-size: 1rem; max-width: 72ch;
}

/* ---------- Safety ---------------------------------------------------------
   The guarantees are an argument, not a feature grid. The first one is the
   load-bearing claim and is set as one; the other three run as a column set
   under it. */

.bento { display: grid; gap: clamp(28px, 3.4vw, 46px) clamp(32px, 4vw, 64px); }
@media (min-width: 860px) {
  .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cell-wide { grid-column: 1 / -1; }
}
.cell { padding: 0; }
.cell :is(h2, h3) { font-size: 1.1875rem; line-height: 1.28; letter-spacing: -0.012em; margin-bottom: 10px; }
.cell p { color: var(--ink-2); font-size: 1rem; max-width: 46ch; }
.cell-wide { display: grid; gap: clamp(20px, 3vw, 48px); align-items: start; }
.cell-wide :is(h2, h3) { font-size: var(--t-say); font-weight: 500; line-height: 1.24; letter-spacing: -0.018em; max-width: 22ch; }
.cell-wide p { max-width: 52ch; }
@media (min-width: 860px) {
  .cell-wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .cell-wide :is(h2, h3) { grid-column: 1; grid-row: 1; }
  .cell-wide p { grid-column: 1; grid-row: 2; margin-top: 14px; }
  .cell-wide .cell-code { grid-column: 2; grid-row: 1 / span 2; margin-top: 6px; }
}
.cell-code {
  margin-top: 16px; padding: 18px 20px;
  background: var(--band); border-radius: var(--r);
  font-family: var(--mono); font-size: 0.8125rem; line-height: 1.9; color: var(--band-ink);
}
.cell-code .k { color: #8ab4c8; }
.cell-code .v { color: var(--band-ink); }
.cell-code .c { color: var(--band-ink-3); }

/* ---------- Install --------------------------------------------------------- */

.install-copy { max-width: none; }
.install-copy h1, .install-copy h2 { max-width: 18ch; }
.install-copy > p { max-width: 54ch; font-size: var(--t-lead); line-height: 1.58; color: var(--ink-2); }
.req { margin: 24px 0 0; padding: 0; list-style: none; max-width: 54ch; }
.req li {
  position: relative; padding: 5px 0 5px 20px;
  color: var(--ink-2); font-size: var(--t-sm);
}
.req li::before {
  content: ""; position: absolute; left: 0; top: 0.95em;
  width: 10px; height: 1px; background: var(--rule-strong);
}
@media (min-width: 900px) {
  .install-copy {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 0 clamp(40px, 6vw, 96px); align-items: start;
  }
  /* Every cell placed explicitly. Leaving them to auto-placement put the label
     under its own heading. */
  .install-copy .eyebrow { grid-column: 1; grid-row: 1; }
  .install-copy h1,
  .install-copy h2 { grid-column: 1; grid-row: 2; }
  .install-copy > p { grid-column: 2; grid-row: 2; margin-top: 0; }
  .install-copy .req { grid-column: 2; grid-row: 3; margin-top: 24px; }
  .install-copy .tabs { grid-column: 1 / -1; grid-row: 4; }
}
.tabs { margin-top: clamp(34px, 4vw, 52px); }
.tab-list {
  display: flex; flex-wrap: wrap; gap: 24px;
  border-bottom: 1px solid var(--rule);
}
.tab-list button {
  appearance: none; background: none; border: 0; padding: 0 0 12px;
  font: inherit; font-size: var(--t-sm); color: var(--ink-3); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 120ms ease, border-color 120ms ease;
}
.tab-list button:hover { color: var(--ink); }
.tab-list button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.tab-panel { position: relative; margin-top: 22px; }
.tab-panel pre {
  margin: 0; padding: 24px 26px; overflow-x: auto;
  background: var(--band); border-radius: var(--r-lg);
}
.tab-panel pre code { color: var(--band-ink); font-size: 0.8125rem; line-height: 1.9; }
.tab-panel .c { color: var(--band-ink-3); }
.tab-panel .b { color: #8ab4c8; }
.tab-panel .req { color: var(--signal-lit); margin: 0; }

/* ---------- Screens ---------------------------------------------------------
   The product is the visual focus of its own page: the console leads at full
   rail width, the supporting views run in pairs, and every shot is captioned
   with what it is showing rather than left to be decorative. */

.shot { border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 1px 2px rgba(20,21,26,0.08), 0 20px 46px -22px rgba(20,21,26,0.34); }
.shot img, .shot video { width: 100%; }
figure.shot { display: block; }
figure.shot figcaption,
.shot + p, .shot-pair + p {
  margin-top: 14px; font-size: var(--t-sm); color: var(--ink-3); max-width: 66ch;
}
figure.shot { box-shadow: none; }
figure.shot > img, figure.shot > video {
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(20,21,26,0.08), 0 20px 46px -22px rgba(20,21,26,0.34);
}
.shot-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: clamp(26px, 3vw, 44px); }
.screens-run > * + * { margin-top: clamp(46px, 5.5vw, 84px); }
.screens-more { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; margin-top: clamp(40px, 5vw, 66px); }

/* ---------- Vision: the comparison ------------------------------------------
   Two readouts of the same eight GPUs. The point is that one of them is short,
   so they are sized to their content instead of being stretched to match. */

.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 3.4vw, 52px); align-items: start;
  margin-top: clamp(30px, 3.6vw, 46px);
}
.compare figcaption {
  font-size: var(--t-sm); font-weight: 500; color: var(--ink);
  padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--rule);
}
.compare pre {
  margin: 0; padding: 20px 22px; overflow-x: auto;
  background: var(--band); border-radius: var(--r-lg);
}
.compare code { color: var(--band-ink); font-size: 0.875rem; line-height: 1.9; white-space: pre; }
.compare .dim { color: var(--band-ink-3); }
.vision-close { margin-top: clamp(30px, 3.6vw, 46px); max-width: 62ch; font-size: var(--t-lead); line-height: 1.58; color: var(--ink-2); }
.vision-close strong { color: var(--ink); font-weight: 500; }

/* ---------- Offers ----------------------------------------------------------
   One of the two is an offer with a limit on it, so exactly one of them gets a
   surface. The other is prose. */
.offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: clamp(32px, 4vw, 64px); align-items: start; }
.offer-card { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 0; }
.offer-card.featured {
  padding: clamp(26px, 3vw, 38px);
  background: var(--paper-sunk); border-radius: var(--r-lg);
}
.offer-card :is(h2, h3) { font-size: 1.375rem; line-height: 1.24; letter-spacing: -0.014em; }
.offer-card p { color: var(--ink-2); font-size: 1rem; max-width: 46ch; }
.offer-note { font-size: var(--t-sm); color: var(--ink-2); }
.offer-card .button { margin-top: 6px; }
/* Not a badge: a line of standfirst that happens to name the offer. */
.chip {
  margin: 0; font-size: var(--t-sm); font-weight: 500; color: var(--accent-ink);
}

/* ---------- Wayfinding -----------------------------------------------------
   The product definition is one sentence with four verbs in it. The verbs are
   the index, so the verbs are what is set large — no rules, no cards, no
   numbers, because this page already spends its numbers elsewhere. */

.wayfinding-list { list-style: none; margin: clamp(30px, 3.6vw, 46px) 0 0; padding: 0; display: grid; gap: clamp(26px, 3vw, 40px); }
@media (min-width: 720px) { .wayfinding-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px) clamp(40px, 6vw, 96px); } }
.wayfinding-list a {
  display: block; color: inherit; text-decoration: none;
}
.way-verb {
  display: block;
  font-size: clamp(1.5rem, 1.05rem + 1.6vw, 2.125rem);
  font-weight: 500; letter-spacing: -0.026em; line-height: 1.05;
  color: var(--ink);
}
.wayfinding-list strong {
  display: block; margin-top: 10px;
  font-weight: 400; font-size: 1rem; color: var(--accent);
}
.wayfinding-list p { margin: 8px 0 0; color: var(--ink-2); font-size: 1rem; max-width: 42ch; }
.wayfinding-list a:hover .way-verb { color: var(--accent-ink); }
.wayfinding-list a:hover strong { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Docs ------------------------------------------------------------ */

.doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: clamp(24px, 3vw, 42px); }
.doc-card { display: block; text-decoration: none; color: inherit; }
.doc-card strong { display: block; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.doc-card span { display: block; color: var(--ink-2); font-size: var(--t-sm); max-width: 34ch; }
.doc-card:hover strong { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- FAQ ------------------------------------------------------------- */

.faq-list { max-width: 74ch; }
.faq-list details { border-top: 1px solid var(--rule); padding: 4px 0; }
.faq-list details:last-child { border-bottom: 1px solid var(--rule); }
.faq-list summary {
  display: flex; justify-content: space-between; gap: 20px; align-items: baseline;
  padding: 18px 0; cursor: pointer; list-style: none;
  font-size: 1.0625rem; font-weight: 500;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--accent-ink); }
.faq-list summary span { color: var(--ink-3); font-weight: 400; flex: none; transition: transform 140ms ease; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list p { color: var(--ink-2); font-size: 1rem; padding-bottom: 20px; max-width: 66ch; }

/* ---------- Closing ---------------------------------------------------------
   The last thing on the page is an ask, so it is given the size of one. */

.cta { padding-block: clamp(70px, 8.5vw, 120px); }
.cta-inner { max-width: 46ch; }
.cta h2 { font-size: var(--t-h1); letter-spacing: -0.033em; line-height: 1.0; max-width: 17ch; }
.cta-lede { color: var(--ink-2); font-size: var(--t-lead); margin-top: 20px; max-width: 46ch; }

/* ---------- Not found -------------------------------------------------------
   On the rail like everything else, not centred in the middle of the viewport
   with an ambient wash behind it. */
.notfound {
  min-height: 76vh;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding-block: clamp(64px, 10vh, 140px);
}
.notfound img { margin-bottom: 30px; border-radius: 9px; }
.notfound h1 { max-width: 14ch; margin-bottom: 20px; }

/* ---------- Footer ---------------------------------------------------------- */

.site-footer { border-top: 1px solid var(--rule); background: var(--paper-sunk); }
.footer-inner {
  width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr);
  gap: clamp(32px, 4vw, 64px); padding-block: clamp(44px, 5vw, 68px);
}
.footer-bottom { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.footer-brand p { color: var(--ink-2); font-size: var(--t-sm); max-width: 40ch; margin-top: 14px; }
.socials { display: flex; gap: 16px; margin-top: 20px; }
.socials a { color: var(--ink-3); }
.socials a:hover { color: var(--ink); }
.socials svg { width: 18px; height: 18px; fill: currentColor; }
.footer-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 28px; }
.footer-nav h2 {
  font-size: var(--t-sm); font-weight: 500; color: var(--ink);
  margin-bottom: 12px; max-width: none; letter-spacing: 0; line-height: 1.4;
}
.footer-nav a {
  display: block; color: var(--ink-2); text-decoration: none;
  font-size: var(--t-sm); padding: 4px 0;
}
.footer-nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  padding-block: 20px; border-top: 1px solid var(--rule);
  font-size: 0.875rem; color: var(--ink-3);
}
.footer-status { display: inline-flex; align-items: center; gap: 8px; }
.footer-status a { color: var(--ink-3); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

/* ---------- Motion ----------------------------------------------------------
   There is no scroll reveal. Content that fades in as you scroll is the single
   most template-like behaviour available, and it delays the reading of a page
   whose entire job is to be read. What is left transitions on interaction. */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Responsive ------------------------------------------------------ */

@media (max-width: 1080px) {
  .hero {
    grid-template-columns: 1fr;
    padding-inline: var(--gutter);
  }
  .hero-copy { max-width: 40rem; }
  .hero-shot { border-radius: var(--r-lg); }
  .hero-caption { padding-right: 0; }
  .evidence, .split { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
}

/* Six nav items plus a button stop fitting well before the type needs to
   change, so the two breakpoints are separate rather than shared. */
@media (max-width: 940px) {
  .site-nav {
    position: fixed; inset: 64px 0 auto; z-index: 39;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    padding: 8px var(--gutter) 20px;
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .site-nav .nav-divider { display: none; }
  .site-nav .icon-link { padding: 14px 0; border-bottom: 0; }
  .site-nav .button-primary { margin-top: 14px; justify-content: center; }
  .menu-button {
    display: inline-grid; place-items: center; gap: 5px;
    width: 38px; height: 38px; padding: 0;
    background: none; border: 1px solid var(--rule-ui); border-radius: var(--r);
    color: var(--ink); cursor: pointer;
  }
  /* The button draws its own rule pair — the markup is two <i>, not an icon. */
  .menu-button i { display: block; width: 17px; height: 1.5px; background: currentColor; transition: transform 140ms ease; }
  .menu-button[aria-expanded="true"] i:first-child { transform: translateY(3.25px) rotate(45deg); }
  .menu-button[aria-expanded="true"] i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
}

@media (max-width: 560px) {
  /* One figure per row: half a phone is not enough measure for the label that
     tells you what the number counts. */
  .figure-row { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 760px) {
  :root { --t-body: 1rem; }
  .steps > * { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .figure-row { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 28px; }
  .figure span { max-width: none; }
  .cell-code { font-size: 0.75rem; }
  .receipt pre { padding: 16px 18px; }
  .receipt code { font-size: 0.75rem; }
  .tab-panel pre { padding: 18px 18px; }
  .tab-panel pre code { font-size: 0.75rem; }
  .compare pre { padding: 16px 18px; }
  /* Wrapping the tabs put the selected tab's underline on one row and the
     list's own rule on the next. They scroll instead. */
  .tab-list {
    flex-wrap: nowrap; overflow-x: auto; gap: 20px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .tab-list::-webkit-scrollbar { display: none; }
  .tab-list button { white-space: nowrap; }
  .compare code { font-size: 0.8125rem; }
  .xid-table { font-size: var(--t-sm); }
  .xid-table th, .xid-table td { padding-right: 14px; }
  .table-wrap { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
}