/* ==========================================================================
   Nodeau — design system
   --------------------------------------------------------------------------
   Dark, green-accented, technical. The refinement over the previous site is
   mostly subtraction: fewer colours, fewer borders, fewer cards, more space.

   The green is a SIGNAL, not a surface. It marks actions, availability and
   status, and it never sets body copy — bright lime paragraphs read as a
   gaming overlay rather than as infrastructure software. Everything that is
   merely information is white or grey.

   Three accents, and they carry meaning rather than decoration:
     --accent   green   this is in the product, or this is the thing to click
     --warn     amber   this is qualified on hardware and lands in the next
                        published build
     --future   slate   this is roadmap
   That trio does real work on the roadmap page, which is where the site keeps
   its ledger. The marketing pages themselves no longer label every sentence:
   a product page that annotates its own features reads as a changelog.
   ========================================================================== */

:root {
  /* Surfaces. Near-black, slightly cool, with very little separation between
     steps — big contrast jumps between panels are what made the old page feel
     busy. */
  --bg: #08090b;
  --bg-raised: #0c0e11;
  --panel: #101317;
  --panel-2: #14181d;

  /* Hairlines. Deliberately faint: most separation here is done with space,
     not with boxes. */
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.13);

  --text: #f2f4f3;
  --text-2: #9aa39f;
  --text-3: #6d7873;

  --accent: #b8ff5a;
  --accent-ink: #0a0d06;          /* type on an accent fill */
  --accent-quiet: rgba(184, 255, 90, 0.10);
  --accent-line: rgba(184, 255, 90, 0.28);
  /* Dimmed for use as text: full lime on near-black is technically legible but
     visually shouts. */
  --accent-text: #c9f58a;

  --future: #8fb3d9;
  --future-quiet: rgba(143, 179, 217, 0.10);
  --future-line: rgba(143, 179, 217, 0.26);

  --warn: #f0c674;
  --warn-quiet: rgba(240, 198, 116, 0.10);

  --radius: 12px;
  --radius-lg: 16px;
  --max: 1120px;
  --max-prose: 68ch;

  --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.875rem);
  --step-0: clamp(0.98rem, 0.95rem + 0.15vw, 1.05rem);
  --step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --step-2: clamp(1.45rem, 1.3rem + 0.75vw, 1.95rem);
  --step-3: clamp(1.9rem, 1.6rem + 1.5vw, 2.8rem);
  --step-4: clamp(2.4rem, 1.9rem + 2.6vw, 4rem);

  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  /* Anchored sections must not land under the sticky header. */
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1 { font-size: var(--step-4); letter-spacing: -0.032em; }
h2 { font-size: var(--step-3); letter-spacing: -0.026em; }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-text); text-decoration-color: rgba(201, 245, 138, 0.35); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

ul, ol { margin: 0 0 1rem; padding-left: 1.15rem; }
li { margin: 0.3rem 0; }
li::marker { color: var(--text-3); }

img, svg { max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

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

::selection { background: rgba(184, 255, 90, 0.22); color: #fff; }

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -4rem;
  z-index: 200;
  padding: 0.6rem 1rem;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 8px;
  font-weight: 600;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0.75rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2rem);
}

/* Vertical rhythm carries most of the structure, which is why there are so few
   boxes. */
section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
section.tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.divider { border-top: 1px solid var(--line); }

.prose { max-width: var(--max-prose); }
.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-2);
  max-width: 56ch;
  text-wrap: pretty;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.9rem;
}
.eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: var(--line-strong);
}

.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 2rem; }

.grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
/* A grid item's automatic minimum size is its content, so an item holding a
   long, scrollable <pre> refuses to shrink and pushes the whole page sideways
   on a phone. The block that scrolls should be the code block, not the page. */
.grid > *,
.steps > *,
.hero-grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(8, 9, 11, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.site-header[data-scrolled="true"] {
  border-bottom-color: var(--line);
  background: rgba(8, 9, 11, 0.9);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
  font-size: 1.05rem;
}
.brand-mark {
  width: 1.4rem;
  height: 1.4rem;
  flex: none;
}

.nav { margin-left: auto; }
.nav ul {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav a {
  display: block;
  padding: 0.45rem 0.7rem;
  border-radius: 8px;
  color: var(--text-2);
  text-decoration: none;
  font-size: 0.925rem;
  transition: color 0.15s ease, background 0.15s ease;
}
.nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.045); }
.nav a[aria-current="page"] { color: var(--text); }

.header-actions { display: flex; align-items: center; gap: 0.6rem; }

/* The account link duplicated inside the menu. Hidden here, shown in the
   narrow-screen block below — declared before it so the media query wins. */
.nav-signin { display: none; }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 2.5rem; height: 2.5rem;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  color: var(--text);
  cursor: pointer;
}
.nav-toggle svg { width: 1.1rem; height: 1.1rem; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed;
    inset: 4rem 0 auto 0;
    margin: 0;
    background: var(--bg-raised);
    border-bottom: 1px solid var(--line);
    padding: 0.75rem clamp(1.15rem, 4vw, 2rem) 1.5rem;
    display: none;
  }
  .nav[data-open="true"] { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav a { padding: 0.8rem 0.25rem; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .nav li:last-child a { border-bottom: 0; }
  .header-actions .btn-ghost { display: none; }
  /* Sign in is a ghost button in the header, so it disappears with the rest of
     them here. The menu carries its own copy: a sign-in link nobody can reach
     on a phone is not a sign-in link. */
  .nav-signin { display: list-item; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.15rem;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease,
    color 0.15s ease, transform 0.1s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: #c6ff77; }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.btn-ghost:hover { border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.04); }

.btn-sm { padding: 0.5rem 0.85rem; font-size: 0.875rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 550;
  text-decoration: none;
  color: var(--accent-text);
}
.link-arrow::after { content: "→"; transition: transform 0.15s ease; }
.link-arrow:hover::after { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Status pills — the current-versus-roadmap vocabulary
   -------------------------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}
.pill::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.pill-available { color: var(--accent-text); border-color: var(--accent-line); background: var(--accent-quiet); }
/* Amber is "next release": qualified on real hardware, arriving in the next
   published build. pill-alpha is kept as an alias so a page can mark the
   published channel itself without inventing a second colour. */
.pill-alpha,
.pill-inalpha { color: var(--warn); border-color: rgba(240, 198, 116, 0.3); background: var(--warn-quiet); }
.pill-next,
.pill-planned,
.pill-exploring { color: var(--future); border-color: var(--future-line); background: var(--future-quiet); }
.pill-exploring { opacity: 0.82; }

/* The vocabulary legend. Used once per page that labels anything, so a reader
   meeting "In Alpha" for the first time does not have to infer it. */
.key { display: grid; gap: 1rem 1.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.key-item { display: flex; gap: 0.75rem; align-items: flex-start; }
.key-item .pill { flex: none; margin-top: 0.15rem; }
.key-item p { margin: 0; color: var(--text-2); font-size: 0.88rem; }

/* --------------------------------------------------------------------------
   Panels — used sparingly
   -------------------------------------------------------------------------- */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}
.panel-quiet { background: var(--bg-raised); }

/* A row of status panels compared side by side must share a bottom edge, and
   the closing note must sit on it. Otherwise a list one item longer makes its
   panel look more important than the others. */
.panels-even > .panel { display: flex; flex-direction: column; }
.panels-even > .panel > :last-child { margin-top: auto; padding-top: 1rem; }
/* A flex column stretches its children across the cross axis, which turns a
   status chip into a full-width bar. Lists and paragraphs do want the width;
   the pill does not. */
.panels-even > .panel > .pill { align-self: flex-start; }

/* Feature lists replace the old wall of cards: same information, a third of
   the visual weight. */
.feature { padding-block: 0.15rem; }
.feature h3 { font-size: 1.02rem; margin-bottom: 0.3rem; font-weight: 600; }
.feature p { color: var(--text-2); font-size: 0.95rem; margin: 0; }

.checks { list-style: none; padding: 0; margin: 0; }
.checks li {
  position: relative;
  padding-left: 1.6rem;
  margin: 0.55rem 0;
  color: var(--text-2);
  font-size: 0.95rem;
}
.checks li::before {
  content: "";
  position: absolute;
  left: 0.15rem; top: 0.62em;
  width: 0.5rem; height: 0.28rem;
  border-left: 1.8px solid var(--accent);
  border-bottom: 1.8px solid var(--accent);
  transform: rotate(-45deg);
}
.checks.checks-future li::before { border-color: var(--future); }
.checks strong { color: var(--text); font-weight: 600; }

/* --------------------------------------------------------------------------
   Code and terminal
   -------------------------------------------------------------------------- */

code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: rgba(255, 255, 255, 0.055);
  padding: 0.12em 0.4em;
  border-radius: 5px;
  color: #e6ebe4;
}

.code {
  position: relative;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.6rem 0.5rem 0.9rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  /* --text-3 measures 4.22:1 here, under AA for 12px text. --text-2 is 7.7:1
     and is visually the same weight of grey against this surface. */
  color: var(--text-2);
}
.code pre {
  margin: 0;
  padding: 0.95rem 1rem;
  /* Long curl commands must scroll rather than widen the page. This is the
     single most common way a technical site breaks on a phone. */
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.855rem;
  line-height: 1.7;
  color: #dfe6da;
  tab-size: 2;
}
.code pre code { background: none; padding: 0; font-size: inherit; color: inherit; }

.code .prompt { color: var(--text-3); user-select: none; }
.code .cmd { color: #eaf2e4; }
.code .ok { color: var(--accent-text); }
.code .dim { color: var(--text-3); }
.code .str { color: #cfe6a8; }
.code .flag { color: var(--future); }

.copy-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.6rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  color: var(--text-2);
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.copy-btn:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.28); }
.copy-btn[data-copied="true"] { color: var(--accent-text); border-color: var(--accent-line); background: var(--accent-quiet); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero { padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 7vw, 5rem); position: relative; overflow: hidden; }
/* One soft wash, low opacity, behind the type. The previous site had several
   gradients competing; this is the only one on the page. */
.hero::before {
  content: "";
  position: absolute;
  inset: -30% 20% auto -10%;
  height: 40rem;
  background: radial-gradient(50% 50% at 30% 40%, rgba(184, 255, 90, 0.07), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

.release-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0.75rem 0.3rem 0.55rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--text-2);
  text-decoration: none;
  margin-bottom: 1.5rem;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.release-tag:hover { border-color: var(--accent-line); color: var(--text); }
.release-tag .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-quiet);
}

/* --------------------------------------------------------------------------
   Proof bar
   -------------------------------------------------------------------------- */

.proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1.5rem 2rem;
  padding-block: clamp(1.5rem, 4vw, 2.25rem);
  border-block: 1px solid var(--line);
}
.proof-item { display: flex; gap: 0.7rem; align-items: flex-start; }
.proof-item svg { width: 1.05rem; height: 1.05rem; color: var(--accent); flex: none; margin-top: 0.28rem; }
.proof-item strong { display: block; font-weight: 600; font-size: 0.95rem; }
.proof-item span { color: var(--text-3); font-size: 0.85rem; line-height: 1.5; }

/* --------------------------------------------------------------------------
   Steps
   -------------------------------------------------------------------------- */

.steps { counter-reset: step; display: grid; gap: 1.75rem; }
.step { position: relative; padding-left: 3rem; counter-increment: step; }
.step::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--text-2);
}
.step h3 { margin-bottom: 0.35rem; }
.step > p { color: var(--text-2); margin-bottom: 0.75rem; }
@media (max-width: 560px) { .step { padding-left: 2.5rem; } }

/* --------------------------------------------------------------------------
   Split — Home versus Business
   -------------------------------------------------------------------------- */

.split { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.split .panel { display: flex; flex-direction: column; }
.split .panel h3 { margin-bottom: 0.4rem; }
.split .panel > .kicker { color: var(--text-3); font-size: 0.85rem; margin-bottom: 1.1rem; }
.split .panel .btn { margin-top: auto; align-self: flex-start; }
.split .checks { margin-bottom: 1.5rem; }
.split .panel-home { border-color: var(--accent-line); }

/* --------------------------------------------------------------------------
   Admission diagram — small, flat, no spaghetti
   -------------------------------------------------------------------------- */

.admit { display: grid; gap: 0.6rem; font-family: var(--mono); font-size: 0.83rem; }
.admit-row {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-raised);
  color: var(--text-2);
}
.admit-row .tag { color: var(--text-3); min-width: 8.5rem; }
.admit-row .val { color: var(--text); margin-left: auto; }

/* On a narrow phone the label's min-width plus a long value overflows the row.
   Stacking is better than shrinking the label to an abbreviation nobody can
   read. */
@media (max-width: 560px) {
  .admit-row { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
  .admit-row .tag { min-width: 0; }
  .admit-row .val { margin-left: 0; }
}
.admit-arrow { text-align: center; color: var(--text-3); line-height: 1; }
.admit-out {
  display: grid; gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.admit-out div {
  padding: 0.7rem 0.9rem; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg-raised);
}
.admit-out .yes { border-color: var(--accent-line); color: var(--accent-text); background: var(--accent-quiet); }
.admit-out .no { color: var(--text-2); }

/* --------------------------------------------------------------------------
   Reality strip — what is actually working, with its status attached
   --------------------------------------------------------------------------
   Deliberately not cards. Each column is a rule, a status pill and two short
   lines, because the whole point of the section is that the claims are small
   and checkable. A boxed panel would make them read as marketing.
   -------------------------------------------------------------------------- */

.reality {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
}
.reality-item { border-top: 1px solid var(--line-strong); padding-top: 1.15rem; }
.reality-item .pill { margin-bottom: 0.85rem; }
.reality-item h3 { font-size: 1.02rem; font-weight: 600; margin-bottom: 0.4rem; }
.reality-item p { color: var(--text-2); font-size: 0.93rem; margin: 0; }
.reality-item .ev {
  display: block;
  margin-top: 0.7rem;
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Fleet diagram — unlike GPUs, one control plane
   --------------------------------------------------------------------------
   Two machine blocks joined into one decision. No gauges, no utilisation bars,
   no invented numbers: every figure shown here is a property of the card or of
   the decision, not a live reading the page cannot actually have.

   The connector is drawn with borders on pseudo-elements rather than an SVG so
   it reflows with the grid instead of being a fixed drawing that stops lining
   up the moment the text wraps.
   -------------------------------------------------------------------------- */

.fleet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0;
}

.fleet-nodes { display: grid; gap: 0.75rem; }

.fleet-node,
.fleet-brain {
  position: relative;
  padding: 0.9rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
}
.fleet-brain { border-color: var(--accent-line); background: var(--accent-quiet); }

.fleet-kind {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.3rem;
}
.fleet-node strong,
.fleet-brain strong { display: block; font-size: 1rem; font-weight: 600; }
.fleet-fact {
  display: block;
  color: var(--text-2);
  font-size: 0.83rem;
  line-height: 1.55;
  margin-top: 0.2rem;
}
.fleet-brain .fleet-fact { color: var(--text-2); }

/* The stub out of each machine, reaching exactly half the connector column. */
.fleet-node::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: 1.25rem;
  border-top: 1px solid var(--line-strong);
}

.fleet-join { position: relative; align-self: stretch; }
/* The spine: joins the two stubs. 25%–75% puts its ends on the machine centres
   when there are two equal blocks. */
.fleet-join::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 25%;
  bottom: 25%;
  border-left: 1px solid var(--line-strong);
}
/* The single line out of the spine into the control plane. */
.fleet-join::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 0;
  top: 50%;
  border-top: 1px solid var(--line-strong);
}
.fleet-arrow {
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.36rem;
  height: 0.36rem;
  border-top: 1px solid var(--line-strong);
  border-right: 1px solid var(--line-strong);
  transform: translate(1px, -50%) rotate(45deg);
}

.fleet-out {
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0;
}
.fleet-out li {
  position: relative;
  margin: 0.3rem 0;
  padding-left: 0.95rem;
  color: var(--text-2);
  font-size: 0.85rem;
  line-height: 1.5;
}
.fleet-out li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.4rem;
  border-top: 1px solid var(--accent-line);
}

/* Stacked: the bracket becomes a single vertical line pointing down. Rotating
   the existing arrow keeps one definition rather than two drawings. */
@media (max-width: 720px) {
  .fleet { grid-template-columns: 1fr; }
  .fleet-node::after { display: none; }
  .fleet-join { height: 2.25rem; align-self: auto; }
  .fleet-join::before { top: 0; bottom: 0; }
  .fleet-join::after { display: none; }
  .fleet-arrow {
    right: auto;
    left: 50%;
    top: auto;
    bottom: 0;
    transform: translate(-50%, 1px) rotate(135deg);
  }
}

/* --------------------------------------------------------------------------
   Roadmap
   -------------------------------------------------------------------------- */

.stage { border-top: 1px solid var(--line); padding-block: clamp(1.75rem, 4vw, 2.5rem); }
.stage:first-of-type { border-top: 0; }
.stage-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem 1rem; margin-bottom: 1.5rem; }
.stage-head h2 { font-size: var(--step-2); }
.stage-head p { color: var(--text-2); font-size: 0.95rem; margin: 0; flex-basis: 100%; max-width: 60ch; }

.rows { display: grid; gap: 0.5rem; }
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem 1.25rem;
  align-items: start;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
}
.row h3 { font-size: 0.98rem; font-weight: 600; }
.row p { grid-column: 1 / -1; margin: 0; color: var(--text-2); font-size: 0.9rem; }
@media (max-width: 560px) {
  .row { grid-template-columns: 1fr; }
  .row .pill { justify-self: start; }
}

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

.faq-group { margin-bottom: 2.5rem; }
.faq-group h2 { font-size: var(--step-1); margin-bottom: 0.9rem; }

details.qa {
  border-bottom: 1px solid var(--line);
}
details.qa summary {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1rem 0;
  cursor: pointer;
  font-weight: 550;
  list-style: none;
  color: var(--text);
}
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after {
  content: "+";
  margin-left: auto;
  flex: none;
  font-family: var(--mono);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text-3);
  transition: transform 0.18s ease;
}
details.qa[open] summary::after { content: "−"; }
details.qa summary:hover { color: var(--accent-text); }
details.qa .answer { padding: 0 0 1.15rem; color: var(--text-2); max-width: var(--max-prose); }
details.qa .answer > :first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.price { font-size: var(--step-2); font-weight: 600; letter-spacing: -0.02em; margin: 0.25rem 0 0.15rem; }
.price-note { color: var(--text-3); font-size: 0.85rem; margin-bottom: 1.35rem; }
/* The billing period sits with the number rather than under it, at the body
   weight and colour, so "$9.99" stays the thing the eye lands on. */
.price-unit { font-size: 0.9rem; font-weight: 400; color: var(--text-2); letter-spacing: 0; }

/* Three tiers, not two. Home Pro sits in the middle and is the one most people
   arrive wanting, so it gets the accent border — the same signal the primary
   button uses, rather than a "most popular" ribbon nobody believes. */
.tiers {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
  align-items: stretch;
}
.tiers .panel { display: flex; flex-direction: column; }
.tiers .panel h3 { margin-bottom: 0.4rem; }
.tiers .kicker { color: var(--text-3); font-size: 0.85rem; margin-bottom: 1.1rem; }
.tiers .checks { margin-bottom: 1.5rem; }
.tiers .panel .btn { margin-top: auto; align-self: flex-start; }
.tier-featured { border-color: var(--accent-line); background: var(--panel-2); }

/* The capability table.
   -----------------------------------------------------------------------
   A table, not a grid of divs, because it is genuinely tabular: a screen
   reader should be able to say "Batch inference, Home Pro, included". The
   wrapper scrolls on a narrow screen instead of the page doing it, and the
   first column stays put so a row is still identifiable while scrolling. */
.compare-wrap {
  overflow-x: auto;
  /* Measured, not decorative: without containment Chromium lets the table's
     overflow reach the document and the whole page scrolls sideways by ~40px
     on a 390px screen. The promise `contain: paint` makes — nothing paints
     outside this box — is exactly what a scrolling table means. */
  contain: paint;
  margin-top: 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.compare { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 34rem; }
.compare caption { text-align: left; padding: 1.1rem clamp(0.9rem, 2.5vw, 1.4rem) 0; color: var(--text-3); font-size: 0.85rem; }
.compare th,
.compare td { padding: 0.7rem clamp(0.6rem, 1.8vw, 1rem); text-align: center; border-bottom: 1px solid var(--line); }
.compare thead th { color: var(--text); font-weight: 600; font-size: 0.95rem; white-space: nowrap; }
.compare thead th:first-child,
.compare tbody th { text-align: left; font-weight: 500; color: var(--text-2); }
.compare tbody th {
  position: sticky;
  left: 0;
  background: var(--bg);
  z-index: 1;
  min-width: 13rem;
}
.compare tbody tr:hover th,
.compare tbody tr:hover td { background: rgba(255, 255, 255, 0.02); }
.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: 0; }
.compare .col-featured { background: rgba(184, 255, 90, 0.045); }

/* On a narrow screen the sticky first column is competing with the answers for
   the same 390px. Give it less, so two plans are visible before anyone has to
   scroll sideways. */
@media (max-width: 560px) {
  .compare { min-width: 28rem; font-size: 0.86rem; }
  .compare tbody th { min-width: 10rem; }
}
.compare-group th {
  padding-top: 1.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Cell values. The tick is drawn rather than typed so it cannot be read out as
   "check mark" fifty times; each cell carries its own screen-reader label. */
.c-yes { color: var(--accent-text); font-weight: 600; }
.c-no { color: var(--text-3); }
/* A third state, because two were not enough to be truthful: a capability that
   the tier will include and that does not exist yet. It reads in the "future"
   colour the roadmap already uses for planned work, so the page cannot imply
   that something shipping later is shipping now. */
.c-soon { color: var(--future); font-size: 0.72rem; font-weight: 650; letter-spacing: 0.055em; text-transform: uppercase; white-space: nowrap; }
.c-lim { color: var(--warn); font-size: 0.82rem; font-weight: 550; }
.c-note { color: var(--text-2); font-size: 0.85rem; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.field { display: grid; gap: 0.4rem; margin-bottom: 1.1rem; }
.field label { font-size: 0.9rem; font-weight: 550; }
.field .hint { font-size: 0.82rem; color: var(--text-3); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.65rem 0.8rem;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--accent-line); outline-offset: 1px; }
.field input::placeholder,
.field textarea::placeholder { color: var(--text-3); }
.req { color: var(--accent-text); }

/* The honeypot: hidden from people, reachable by bots. Not display:none, which
   some bots skip. */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   Callouts
   -------------------------------------------------------------------------- */

.note {
  border-left: 2px solid var(--line-strong);
  padding: 0.15rem 0 0.15rem 1.1rem;
  color: var(--text-2);
  font-size: 0.95rem;
}
.note-accent { border-left-color: var(--accent); }
.note-warn { border-left-color: var(--warn); }

.callout {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
  padding: 1.1rem 1.25rem;
}
.callout-warn { border-color: rgba(240, 198, 116, 0.28); background: var(--warn-quiet); }
.callout h3 { font-size: 1rem; margin-bottom: 0.4rem; }
.callout p { color: var(--text-2); font-size: 0.94rem; }

/* --------------------------------------------------------------------------
   Metrics
   -------------------------------------------------------------------------- */

.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 1.5rem; }
.metric .n { font-family: var(--mono); font-size: var(--step-2); color: var(--text); letter-spacing: -0.02em; }
.metric .l { color: var(--text-3); font-size: 0.85rem; }

/* --------------------------------------------------------------------------
   CTA
   -------------------------------------------------------------------------- */

.cta { text-align: center; }
.cta .btn-row { justify-content: center; }
.cta p { margin-inline: auto; }

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

.site-footer { border-top: 1px solid var(--line); padding-block: 3rem 2.5rem; color: var(--text-3); font-size: 0.9rem; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(8rem, 1fr)); }
/* On a phone, auto-fit still fits three 8rem link columns, which squeezes the
   brand column down to about one word per line. Two columns, with the brand
   across the top. */
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}
.footer-grid h4 { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 0.75rem; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin: 0.4rem 0; }
.footer-grid a { color: var(--text-2); text-decoration: none; }
.footer-grid a:hover { color: var(--text); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem;
  justify-content: space-between; align-items: center;
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   Reveal — subtle, and completely skipped when motion is reduced
   -------------------------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%; bottom: 1.5rem;
  transform: translate(-50%, 1.5rem);
  padding: 0.6rem 1rem;
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font-size: 0.875rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 200;
  max-width: min(90vw, 32rem);
}
.toast[data-show="true"] { opacity: 1; transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   Print — the Alpha guide is the page people print or PDF
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .copy-btn, .toast, .hero::before { display: none !important; }
  body { background: #fff; color: #000; }
  .code { border-color: #ccc; }
  .code pre { color: #000; }
  a { color: #000; }
}

/* ==========================================================================
   /docs — the documentation surface
   --------------------------------------------------------------------------
   Built by tools/build-docs.py from docs-src/*.md. Everything here reuses the
   tokens above: the same surfaces, the same hairlines, the same green as a
   SIGNAL rather than a surface. A docs page should look like the rest of the
   site, not like a template bolted onto it.

   Two structural decisions worth stating:

   - The sidebar is a real <nav> of <a> elements inside <details> groups, so it
     works with no JavaScript at all: the current page is highlighted by
     aria-current, the groups open and close natively, and search degrades to
     an input that does nothing rather than to a broken page.

   - Tab panels are VISIBLE by default and are converted to tabs by
     assets/docs.js. A deep link into a panel therefore always resolves, and a
     reader with no JavaScript sees both platforms' instructions rather than one
     silently hidden half.
   ========================================================================== */

/* `html` already sets scroll-padding-top for the sticky header (see Base).
   Setting it again here, or adding scroll-margin-top to the headings, ADDS to
   it — an anchor then landed 176px down a 900px viewport, which is a quarter of
   the screen spent on nothing. One offset, in one place. */
.docs-page { overflow-x: hidden; }

.doc-shell {
  display: grid;
  grid-template-columns: 17.5rem minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  max-width: 82rem;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem) 4rem;
}

/* ------------------------------------------------------------------ sidebar */

.doc-sidebar {
  position: sticky;
  top: 4.5rem;
  align-self: start;
  max-height: calc(100vh - 5.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.75rem 0.5rem 2rem 0;
  border-right: 1px solid var(--line);
  scrollbar-width: thin;
}

.doc-search { position: relative; margin-bottom: 1.1rem; padding-right: 0.5rem; }

.doc-search input {
  width: 100%;
  padding: 0.55rem 0.75rem;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
}
.doc-search input::placeholder { color: var(--text-3); }
.doc-search input:focus-visible {
  outline: 2px solid var(--accent-line);
  outline-offset: 1px;
  border-color: var(--accent-line);
}

.doc-results {
  margin: 0 0.5rem 1.25rem 0;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--bg-raised);
  max-height: 24rem;
  overflow-y: auto;
}
.doc-results a {
  display: block;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  font-size: 0.87rem;
  line-height: 1.4;
}
.doc-results a:last-child { border-bottom: 0; }
.doc-results a:hover,
.doc-results a:focus-visible { background: rgba(255, 255, 255, 0.045); }
.doc-results a span { display: block; color: var(--text-3); font-size: 0.78rem; }
.doc-results a mark { background: var(--accent-quiet); color: var(--accent-text); }
.doc-results p { margin: 0; padding: 0.75rem; color: var(--text-3); font-size: 0.85rem; }

.doc-nav { font-size: 0.9rem; }

.doc-group { border-bottom: 1px solid var(--line); }
.doc-group:last-child { border-bottom: 0; }

.doc-group-name {
  cursor: pointer;
  list-style: none;
  padding: 0.6rem 0.5rem 0.6rem 0;
  color: var(--text-2);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.doc-group-name::-webkit-details-marker { display: none; }
.doc-group-name::after {
  content: "";
  margin-left: auto;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
.doc-group[open] > .doc-group-name::after { transform: rotate(45deg); }
.doc-group-name:hover { color: var(--text); }
.doc-group-name:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }

.doc-links { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.1rem; }
.doc-links a {
  display: block;
  padding: 0.35rem 0.6rem;
  border-radius: 7px;
  color: var(--text-2);
  text-decoration: none;
  line-height: 1.4;
}
.doc-links a:hover { color: var(--text); background: rgba(255, 255, 255, 0.045); }
.doc-links a[aria-current="page"] {
  color: var(--accent-text);
  background: var(--accent-quiet);
  box-shadow: inset 2px 0 0 var(--accent);
}

/* The drawer button only exists below the sidebar breakpoint. */
.doc-menu-btn { display: none; }

/* --------------------------------------------------------------------- body */

.doc-main { min-width: 0; padding-top: 1.75rem; }

.doc-body { max-width: 50rem; }
.doc-body > * + * { margin-top: 1.05rem; }

.doc-title { font-size: var(--step-3); margin-top: 0.35rem; }
.doc-lede { margin-top: 1rem; font-size: var(--step-1); color: var(--text-2); max-width: 44ch; }

.doc-h { position: relative; }
h2.doc-h { margin-top: 2.75rem; font-size: var(--step-2); padding-top: 1.5rem; border-top: 1px solid var(--line); }
h3.doc-h { margin-top: 2rem; font-size: var(--step-1); }
h4.doc-h { margin-top: 1.5rem; font-size: 1rem; color: var(--text-2); }

.doc-anchor {
  margin-left: 0.4rem;
  color: var(--text-3);
  text-decoration: none;
  opacity: 0;
  font-weight: 400;
  transition: opacity 0.12s ease;
}
.doc-h:hover .doc-anchor,
.doc-anchor:focus-visible { opacity: 1; }

.doc-body p { color: var(--text-2); }
.doc-body p strong { color: var(--text); }
.doc-body a { color: var(--accent-text); text-underline-offset: 3px; }
.doc-body a:hover { color: var(--text); }

.doc-rule { border: 0; border-top: 1px solid var(--line); margin-block: 2.5rem; }

.doc-list { color: var(--text-2); padding-left: 1.25rem; display: grid; gap: 0.4rem; }
.doc-list .doc-list { margin-top: 0.4rem; }
.doc-list strong { color: var(--text); }
.doc-list code,
.doc-body p code,
.doc-table code,
.callout code {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.08em 0.34em;
  font-family: var(--mono);
  font-size: 0.87em;
  color: var(--text);
  overflow-wrap: anywhere;
}

.doc-quote {
  margin: 0;
  padding: 0.35rem 0 0.35rem 1.15rem;
  border-left: 2px solid var(--accent-line);
  color: var(--text-2);
}
.doc-quote > * + * { margin-top: 0.75rem; }

/* ---------------------------------------------------------------- on this page */

.doc-toc {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
  padding: 1rem 1.15rem;
}
.doc-toc-title {
  margin: 0 0 0.5rem;
  color: var(--text-3);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.doc-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 1.5rem;
  font-size: 0.88rem;
}
.doc-toc li { break-inside: avoid; margin-bottom: 0.25rem; }
.doc-toc a { color: var(--text-2); text-decoration: none; }
.doc-toc a:hover { color: var(--accent-text); text-decoration: underline; }
@media (max-width: 640px) { .doc-toc ul { columns: 1; } }

/* --------------------------------------------------------------------- code */

.doc-code { margin-block: 1.35rem; }
.doc-code pre { max-height: none; }

/* --------------------------------------------------------------------- tables */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
  -webkit-overflow-scrolling: touch;
}

.doc-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 30rem; }
.doc-table th,
.doc-table td {
  padding: 0.62rem 0.9rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.doc-table thead th { color: var(--text); font-weight: 600; background: rgba(255, 255, 255, 0.022); }

/* A reason code is one token and must not be hyphenated across two lines:
   `MODEL_NOT_INSTALLE` / `D` reads as a typo rather than as a wrap. The column
   widens to fit, and .table-wrap scrolls if the whole table then cannot. */
.doc-table code { white-space: nowrap; overflow-wrap: normal; }
.doc-table td { color: var(--text-2); }
.doc-table td strong { color: var(--text); }
.doc-table tbody tr:last-child th,
.doc-table tbody tr:last-child td { border-bottom: 0; }

/* Below this width a table reflows to stacked rows, each cell labelled with
   its own column name — a horizontally scrolling six-column table on a phone
   is technically readable and nobody reads it. */
@media (max-width: 620px) {
  .doc-table { min-width: 0; display: block; }
  .doc-table thead { display: none; }
  .doc-table tbody, .doc-table tr, .doc-table td { display: block; width: 100%; }
  .doc-table tr { border-bottom: 1px solid var(--line-strong); padding: 0.4rem 0; }
  .doc-table tr:last-child { border-bottom: 0; }
  .doc-table td { border-bottom: 0; padding: 0.3rem 0.9rem; }
  .doc-table td::before {
    content: attr(data-label);
    display: block;
    color: var(--text-3);
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.12rem;
  }
  .doc-table td:empty { display: none; }
}

/* ------------------------------------------------------------------ callouts */

.callout {
  border: 1px solid var(--line-strong);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: var(--bg-raised);
  padding: 1rem 1.15rem;
  margin-block: 1.35rem;
}
.callout > * + * { margin-top: 0.7rem; }
.callout p { color: var(--text-2); }

.callout-kind {
  margin: 0;
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.callout-note { border-left-color: var(--future); }
.callout-note .callout-kind { color: var(--future); }

.callout-important { border-left-color: var(--accent); }
.callout-important .callout-kind { color: var(--accent-text); }

.callout-warning { border-left-color: var(--warn); background: var(--warn-quiet); }
.callout-warning .callout-kind { color: var(--warn); }

.callout-danger { border-left-color: #ff7a6b; background: rgba(255, 122, 107, 0.08); }
.callout-danger .callout-kind { color: #ff9f94; }

.callout-security { border-left-color: var(--accent); background: var(--accent-quiet); }
.callout-security .callout-kind { color: var(--accent-text); }

.callout-linux,
.callout-macos { border-left-color: var(--text-3); }
.callout-linux .callout-kind,
.callout-macos .callout-kind { color: var(--text-2); }

/* --------------------------------------------------------------------- tabs */

.tabs { margin-block: 1.35rem; }

.tabpanel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  margin-bottom: 0.75rem;
}
.tabpanel > * + * { margin-top: 0.8rem; }

.tabpanel-label {
  margin: 0;
  color: var(--text-2);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Once assets/docs.js has taken over, the labels become a tablist above the
   panels and only the selected panel is shown. Nothing here is required for
   the content to be readable. */
.tabs[data-enhanced="true"] { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.tabs[data-enhanced="true"] .tablist { display: flex; gap: 0; border-bottom: 1px solid var(--line); background: var(--bg-raised); }
.tabs[data-enhanced="true"] .tablist button {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 550;
  padding: 0.65rem 1.05rem;
  cursor: pointer;
}
.tabs[data-enhanced="true"] .tablist button:hover { color: var(--text); }
.tabs[data-enhanced="true"] .tablist button[aria-selected="true"] { color: var(--accent-text); border-bottom-color: var(--accent); }
.tabs[data-enhanced="true"] .tablist button:focus-visible { outline: 2px solid var(--accent-line); outline-offset: -2px; }
.tabs[data-enhanced="true"] .tabpanel { border: 0; border-radius: 0; margin: 0; padding: 1.1rem 1.15rem; }
.tabs[data-enhanced="true"] .tabpanel-label { display: none; }
.tabs[data-enhanced="true"] .tabpanel[hidden] { display: none; }

/* --------------------------------------------------------------------- pager */

.doc-pager {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.doc-prev,
.doc-next {
  flex: 1 1 14rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.85rem 1.05rem;
  color: var(--text);
  text-decoration: none;
  font-weight: 550;
  font-size: 0.95rem;
}
.doc-next { text-align: right; }
.doc-prev:hover,
.doc-next:hover { border-color: var(--accent-line); background: var(--accent-quiet); }
.doc-prev span,
.doc-next span {
  display: block;
  color: var(--text-2);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}

.doc-foot {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  color: var(--text-3);
  font-size: 0.85rem;
}

/* ------------------------------------------------------------- narrow screens */

@media (max-width: 960px) {
  .doc-shell { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 1rem; }

  .doc-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0 0.25rem;
    padding: 0.55rem 0.9rem;
    background: var(--panel);
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 550;
    cursor: pointer;
  }
  .doc-menu-btn svg { width: 1.05rem; height: 1.05rem; }
  .doc-menu-btn:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }

  .doc-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 0.5rem 0 1.25rem;
    display: none;
  }
  .doc-sidebar[data-open="true"] { display: block; }

  .doc-main { padding-top: 1.25rem; }
  .doc-body { max-width: none; }
}

.doc-toc a[aria-current="true"] { color: var(--accent-text); font-weight: 550; }