/* brindle site: shared styles. See STYLE.md.
   Grid: full-width bands around one centred column (.wrap, 84rem). Inside it, one
   column system: side (13rem) | gap (48px) | content (44rem) | gap | toc (12rem). The nav
   uses the same columns, so the logo sits on the sidebar line and the nav links
   start on the content line. Every long-form page (docs, guides, compare, changelog,
   getting started, privacy) is a .wrap.docs on these columns; the marketing pages
   (home, pricing, enterprise) use the full .wrap. Spacing is on an 8px scale (--s-*).
   Loading: nothing here depends on JS for layout. Fonts have metric-matched
   fallbacks, so the Geist swap doesn't move text. */

/* ---------- Fonts: Geist and Geist Mono (variable, OFL) served from assets/fonts and preloaded by every page.
   font-display: optional, so a font that isn't ready at first paint is skipped for this load instead of
   swapped in later: the page never reflows for a font. With the preload it is ready on practically every load. */
@font-face { font-family: "Geist"; src: url("fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: optional; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: optional; }

/* ---------- Font fallbacks with Geist's metrics (used only on a load where Geist wasn't ready) ---------- */
/* Values measured in Chrome: Geist advance / fallback advance = size-adjust; Geist ascent 1.01em, descent 0.29em. */
@font-face { font-family: "Geist Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo"); font-weight: 100 449; size-adjust: 101.43%; ascent-override: 99.58%; descent-override: 28.59%; line-gap-override: 0%; }
@font-face { font-family: "Geist Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo"); font-weight: 450 549; size-adjust: 103.95%; ascent-override: 97.16%; descent-override: 27.9%; line-gap-override: 0%; }
@font-face { font-family: "Geist Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"); font-weight: 550 649; size-adjust: 99.15%; ascent-override: 101.86%; descent-override: 29.25%; line-gap-override: 0%; }
@font-face { font-family: "Geist Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"); font-weight: 650 900; size-adjust: 101.5%; ascent-override: 99.51%; descent-override: 28.57%; line-gap-override: 0%; }
/* Geist Mono advance is 0.6em. Each fallback family is tried in turn; the first one installed wins. */
@font-face { font-family: "Geist Mono Fallback"; src: local("Menlo Regular"), local("Menlo-Regular"), local("DejaVu Sans Mono"), local("DejaVuSansMono"); size-adjust: 99.65%; ascent-override: 101.35%; descent-override: 29.1%; line-gap-override: 0%; }
@font-face { font-family: "Geist Mono Fallback Consolas"; src: local("Consolas"); size-adjust: 109.13%; ascent-override: 92.55%; descent-override: 26.57%; line-gap-override: 0%; }
@font-face { font-family: "Geist Mono Fallback Courier"; src: local("Courier New"), local("CourierNewPSMT"), local("Liberation Mono"), local("LiberationMono"), local("Cousine"); size-adjust: 99.98%; ascent-override: 101.02%; descent-override: 29.01%; line-gap-override: 0%; }

/* ---------- Tokens (dark first; light under prefers-color-scheme and data-theme) ---------- */
:root {
  --canvas: #09090b; --canvas-2: #121214; --surface: #16161a; --surface-2: #1c1b1f;
  --line: rgba(63, 63, 70, 0.42); --line-strong: rgba(82, 82, 91, 0.6);
  --ink: #eee6dc; --ink-2: #b9ab9b; --ink-3: #8b7d6f;
  --fawn: #d7af87; --fawn-soft: rgba(215, 175, 135, 0.1);
  --sap: #e8875a; --sap-soft: rgba(232, 135, 90, 0.12);
  --pass: #34d399; --pass-soft: rgba(52, 211, 153, 0.12);
  --branch: #a99be0; --branch-soft: rgba(169, 155, 224, 0.12);
  --on-fawn: #1a130c;
  --nav-bg: rgba(9, 9, 11, 0.86);
  /* Shell blocks stay dark in both themes */
  --shell-bg: #0c0c0e; --shell-ink: #eee6dc; --shell-dim: #8b7d6f; --shell-acc: #d7af87; --shell-line: rgba(63, 63, 70, 0.5);
  --sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", "Geist Mono Fallback", "Geist Mono Fallback Consolas", "Geist Mono Fallback Courier", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* 8px scale */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 40px; --s-6: 48px; --s-8: 64px; --s-10: 80px; --s-12: 96px;
  --r-sm: 4px; --r: 8px; --r-lg: 12px;
  /* Column system shared by the nav, docs layout and article layouts */
  --col-side: 13rem; --col-toc: 12rem; --col-gap: var(--s-6); --measure: 44rem;
  --nav-h: 64px;
  --gutter-l: max(clamp(16px, 4vw, 48px), env(safe-area-inset-left, 0px));
  --gutter-r: max(clamp(16px, 4vw, 48px), env(safe-area-inset-right, 0px));
  --band-y: var(--s-12);
  color-scheme: dark;
}
@media (max-width: 1180px) { :root { --col-gap: var(--s-5); --band-y: var(--s-10); } }
@media (max-width: 920px) { :root { --nav-h: 56px; --band-y: var(--s-8); } }
@media (max-width: 560px) { :root { --band-y: var(--s-6); } }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --canvas: #f6f3ef; --canvas-2: #efeae4; --surface: #ffffff; --surface-2: #f8f5f1;
    --line: rgba(120, 104, 88, 0.2); --line-strong: rgba(120, 104, 88, 0.34);
    --ink: #211a14; --ink-2: #5a4d41; --ink-3: #7c6e61;
    --fawn: #8a5a2b; --fawn-soft: rgba(138, 90, 43, 0.09);
    --sap: #b4532a; --sap-soft: rgba(180, 83, 42, 0.1);
    --pass: #047857; --pass-soft: rgba(4, 120, 87, 0.1);
    --branch: #6d5bb8; --branch-soft: rgba(109, 91, 184, 0.1);
    --on-fawn: #fffaf4;
    --nav-bg: rgba(246, 243, 239, 0.86);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --canvas: #f6f3ef; --canvas-2: #efeae4; --surface: #ffffff; --surface-2: #f8f5f1;
  --line: rgba(120, 104, 88, 0.2); --line-strong: rgba(120, 104, 88, 0.34);
  --ink: #211a14; --ink-2: #5a4d41; --ink-3: #7c6e61;
  --fawn: #8a5a2b; --fawn-soft: rgba(138, 90, 43, 0.09);
  --sap: #b4532a; --sap-soft: rgba(180, 83, 42, 0.1);
  --pass: #047857; --pass-soft: rgba(4, 120, 87, 0.1);
  --branch: #6d5bb8; --branch-soft: rgba(109, 91, 184, 0.1);
  --on-fawn: #fffaf4;
  --nav-bg: rgba(246, 243, 239, 0.86);
  color-scheme: light;
}

/* ---------- Base ---------- */
/* Measures use em, never ch: ch follows the width of "0", which differs between the fallback and Geist, so a
   ch max-width re-wraps every paragraph when the font arrives. In Geist 1ch = 0.68em (60ch = 40.8em). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-size: clamp(16px, calc(9px + 0.45vw), 21px); scroll-padding-top: calc(var(--nav-h) + var(--s-3)); }
/* Solid ground; the gradient is fixed to the viewport so its stops never move as the page grows during load */
body {
  margin: 0; min-height: 100vh; background-color: var(--canvas); color: var(--ink);
  font-family: var(--sans); font-size: 1rem; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip;
}
img, svg, video { max-width: 100%; }
[hidden] { display: none !important; }
code, kbd, pre, .mono { font-family: var(--mono); font-size: 0.875em; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--fawn); outline-offset: 2px; border-radius: 4px; }

.band { border-top: 1px solid var(--line); padding-left: var(--gutter-l); padding-right: var(--gutter-r); padding-block: var(--band-y); }
.band.raised { background-color: var(--canvas-2); }
/* First band under the nav on inner pages: no rule, less air on top */
.band.top { border-top: 0; padding-block: var(--s-6) var(--band-y); }
@media (max-width: 560px) { .band.top { padding-top: var(--s-4); } }
.wrap { max-width: 84rem; margin: 0 auto; }
.dev { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3); margin-bottom: var(--s-2); }
.dev::before { content: ""; width: 8px; height: 8px; border: 1px solid var(--line-strong); border-radius: 2px; }

h1, h2, h3, h4 { margin: 0; text-wrap: balance; color: var(--ink); }
/* h1 follows the smaller of width and height, so a short laptop or a landscape phone doesn't get a headline taller than the screen */
h1 { font-size: clamp(2.25rem, min(5.4vw, 8.5vh), 5rem); line-height: 1; letter-spacing: -0.035em; font-weight: 600; }
h2 { font-size: clamp(1.75rem, 2.8vw, 2.5rem); line-height: 1.1; letter-spacing: -0.02em; font-weight: 600; }
h3 { font-size: 1.125rem; line-height: 1.35; letter-spacing: -0.01em; font-weight: 600; }
p { margin: 0; }
.lede { font-size: 1.125rem; line-height: 1.6; color: var(--ink-2); max-width: 40.8em; text-wrap: pretty; }
.sub { color: var(--ink-2); max-width: 40.8em; }
.head { display: grid; gap: var(--s-2); margin-bottom: var(--s-6); max-width: 45rem; }
@media (max-width: 560px) { .head { margin-bottom: var(--s-4); } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.pill { display: inline-block; font-family: var(--mono); font-size: 0.75rem; color: var(--fawn); background: var(--fawn-soft); border-radius: 4px; padding: 0 8px; line-height: 24px; white-space: nowrap; }
.tier { display: inline-block; font-size: 0.75rem; line-height: 22px; padding: 0 8px; border-radius: 4px; border: 1px solid var(--line-strong); color: var(--ink-3); white-space: nowrap; }
.meta { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---------- Nav ---------- */
/* Opaque enough to read over any content without the blur, so the bar never flashes see-through while the
   backdrop filter spins up. Fixed height, so nothing below it moves. */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; height: var(--nav-h); background: var(--canvas); border-bottom: 1px solid var(--line); padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: var(--nav-bg); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); }
}
.nav .wrap { display: flex; align-items: center; gap: var(--s-3); height: 100%; }
/* From 1181px the bar uses the docs columns: logo on the sidebar line, links on the content line */
@media (min-width: 1181px) {
  .nav .wrap { display: grid; grid-template-columns: var(--col-side) minmax(0, 1fr) auto; column-gap: var(--col-gap); }
  .nav .nav-links { margin-left: -8px; }
}
/* On a landscape phone a sticky bar would take an eighth of the screen; let it scroll away */
@media (max-height: 500px) { .nav { position: relative; top: 0; } }
/* The lockup: the braid mark (assets/icons/brindle-mark.svg, inlined) beside the lowercase wordmark. Sized in em,
   so it is the same lockup wherever it sits; the threads take the theme's colours, bright on dark, deeper on light. */
.logo { display: flex; align-items: center; gap: 0.5em; text-decoration: none; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; line-height: 24px; }
.logo-mark { flex: none; display: block; width: 1.98em; height: 1.375em; }
.logo-word { letter-spacing: -0.02em; }
.logo .lm-in { stroke: var(--fawn); } .logo .lm-top { stroke: var(--sap); } .logo .lm-mid { stroke: var(--branch); } .logo .lm-bot { stroke: var(--pass); }
.nav-links { display: flex; flex: 1; align-self: stretch; gap: 0; margin-left: 0; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
/* Links fill the bar's height, so the current-page rule sits on the bar's bottom edge */
.nav-links a { display: flex; align-items: center; text-decoration: none; color: var(--ink-2); font-size: 0.875rem; padding: 0 8px; white-space: nowrap; transition: color 120ms var(--ease); }
.nav-links a + a { margin-left: 8px; }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--ink); }
.nav-links a[aria-current] { box-shadow: inset 0 -2px 0 var(--fawn); }
.nav-links .nav-signin { margin-left: auto; }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
.ver { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3); border: 1px solid var(--line-strong); padding: 0 8px; border-radius: 4px; line-height: 22px; text-decoration: none; font-variant-numeric: tabular-nums; }
.ver:hover { color: var(--ink-2); }
.nav-toggle { display: none; width: 40px; height: 40px; flex: none; place-items: center; border: 1px solid var(--line-strong); border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; padding: 0; }
.nav-toggle svg { display: block; }
.nav-toggle .ic-close, .nav.open .nav-toggle .ic-open { display: none; }
.nav.open .nav-toggle .ic-close { display: block; }
@media (max-width: 920px) {
  .nav-toggle { display: grid; }
  .nav-links { display: none; }
  .nav.open .nav-links { display: grid; align-content: start; position: absolute; top: 100%; left: 0; right: 0; margin: 0; gap: 0; overflow: visible; background: var(--canvas); border-bottom: 1px solid var(--line-strong); padding: 8px var(--gutter-r) 16px var(--gutter-l); box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.5); max-height: calc(100vh - var(--nav-h)); overflow-y: auto; }
  .nav.open .nav-links a { font-size: 1rem; padding: 12px 0; margin: 0; border-bottom: 1px solid var(--line); box-shadow: none; }
  .nav.open .nav-links a:last-child { border-bottom: 0; }
  .nav.open .nav-links a[aria-current] { color: var(--fawn); }
  .nav.open .nav-links .nav-signin { margin-left: 0; }
}
/* The version pill goes first when the bar gets tight (it's in the changelog anyway) */
@media (max-width: 1100px) { .ver { display: none; } }
@media (max-width: 420px) { .nav-end { gap: 8px; } }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 var(--s-3); border-radius: 8px; font: 500 0.9375rem/1 var(--sans); text-decoration: none; cursor: pointer; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); transition: background-color 120ms var(--ease), border-color 120ms var(--ease); }
.btn:hover { border-color: var(--ink-3); }
.btn.primary { background: var(--fawn); border-color: var(--fawn); color: var(--on-fawn); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.sm { height: 40px; padding: 0 var(--s-2); font-size: 0.875rem; }
.ctas { display: flex; flex-wrap: wrap; gap: var(--s-2); }
@media (max-width: 640px) { .ctas .btn { flex: 1 1 100%; } }
@media (max-width: 640px) and (max-height: 500px) { .ctas .btn { flex: 0 1 auto; } }

/* ---------- Terminal mock (dark in both themes) ---------- */
/* The mock's type follows its own width, so it fills the panel instead of leaving the right half empty */
.term { container-type: inline-size; min-width: 0; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--shell-bg); color: #e6ddd2; overflow: hidden; box-shadow: 0 24px 64px -32px rgba(0, 0, 0, 0.6); }
.term-bar { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--shell-line); font-family: var(--mono); font-size: 0.75rem; color: var(--shell-dim); }
.term-bar i { width: 8px; height: 8px; border-radius: 50%; background: #3f3f46; }
.term-bar span { margin-left: 8px; overflow-wrap: anywhere; }
.term pre { margin: 0; padding: var(--s-3); font-size: clamp(0.75rem, 2.9cqi, 1rem); line-height: 1.7; white-space: pre; overflow-x: auto; }
.t-dim { color: #8b7d6f; } .t-b { color: #a99be0; } .t-work { color: #e8875a; } .t-ok { color: #34d399; } .t-acc { color: #d7af87; } .t-sel { background: rgba(215, 175, 135, 0.14); color: #eee6dc; }

/* ---------- Shell block with copy button (dark in both themes) ---------- */
.shell { border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--shell-bg); overflow: hidden; min-width: 0; }
.shell-line { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3); min-height: 72px; }
.shell-line code { flex: 1; min-width: 0; font-size: 0.875rem; color: var(--shell-ink); overflow-wrap: anywhere; line-height: 1.6; }
/* A one-line command stays on one line and scrolls sideways if it must; a wrapped "| sh" reads as two commands */
.shell-line code:not(.cmd) { white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.shell-line code:not(.cmd)::-webkit-scrollbar { display: none; }
.shell-line code .p { color: var(--shell-acc); user-select: none; -webkit-user-select: none; margin-right: 8px; }
.copy { flex: none; height: 40px; padding: 0 16px; border-radius: 8px; border: 1px solid rgba(113, 113, 122, 0.5); background: transparent; color: var(--shell-ink); font: 500 0.8125rem/1 var(--sans); cursor: pointer; transition: border-color 120ms var(--ease), color 120ms var(--ease); min-width: 88px; }
.copy:hover { border-color: var(--shell-acc); }
.copy.done { color: #34d399; border-color: #34d399; }
.shell-out { border-top: 1px solid var(--shell-line); padding: 16px 24px; font-family: var(--mono); font-size: 0.75rem; line-height: 1.8; color: var(--shell-ink); white-space: pre; overflow-x: auto; }
.shell-out .d { color: var(--shell-dim); }
@media (max-width: 480px) { .shell-line { flex-wrap: wrap; padding: 16px; } .copy { width: 100%; } }

/* ---------- Cards ---------- */
.card { min-width: 0; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--surface); padding: var(--s-3); display: grid; gap: var(--s-3); align-content: start; }
@media (min-width: 1181px) { .card { padding: var(--s-4); } }
.card .txt { display: grid; gap: 8px; }
.card p { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.55; }
.viz { border: 1px solid var(--line); border-radius: 8px; background: var(--canvas); padding: 16px; font-family: var(--mono); font-size: 0.75rem; line-height: 1.8; color: var(--ink-2); overflow-x: auto; white-space: pre; }
.viz .b { color: var(--branch); } .viz .ok { color: var(--pass); } .viz .w { color: var(--sap); } .viz .d { color: var(--ink-3); } .viz .a { color: var(--fawn); }

/* Card index (guides, compare, changelog, getting-started choice pages).
   Fixed 3 / 2 / 1 columns, so every card in a list has one width and a short last row never stretches.
   Set --cols on the list to change the wide count. */
.index-list { --cols: 3; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--s-2); }
@media (max-width: 1023px) { .index-list { grid-template-columns: repeat(min(var(--cols), 2), minmax(0, 1fr)); } }
@media (max-width: 639px) { .index-list { grid-template-columns: minmax(0, 1fr); } }
/* In the docs grid the content column is too narrow for three cards between the phone and the full grid */
@media (min-width: 640px) and (max-width: 1180px) { .docs .index-list { grid-template-columns: repeat(min(var(--cols), 2), minmax(0, 1fr)); } }
.index-list > li { display: grid; min-width: 0; }
.index-card { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3); text-decoration: none; transition: border-color 120ms var(--ease); }
.index-card:hover { border-color: var(--ink-3); }
.index-card h3 { font-size: 1.0625rem; line-height: 1.35; text-wrap: pretty; }
.index-card p { line-height: 1.55; }
/* A date or link at the end of the card sits on the card's bottom edge, so dates line up across a row */
.index-card > .meta:last-child, .index-card > time:last-child, .index-card > .go:last-child { margin-top: auto; padding-top: var(--s-2); }
.index-card > .meta:first-child { margin-bottom: 0; }
.index-card .go { font-size: 0.875rem; color: var(--fawn); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--surface); }
/* Comparison matrix: row label, then one column per option; collapses to stacked rows on phones */
table.matrix { width: 100%; border-collapse: collapse; min-width: 640px; }
.matrix th, .matrix td { text-align: left; vertical-align: top; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); font-size: 0.9375rem; line-height: 1.55; }
.matrix tr:last-child > * { border-bottom: 0; }
.matrix thead th { font-size: 0.8125rem; font-weight: 500; color: var(--ink-3); padding-block: 12px; border-bottom-color: var(--line-strong); background: var(--surface-2); }
.matrix thead th.us { color: var(--fawn); font-weight: 600; }
.matrix tbody th { font-weight: 600; width: 18%; color: var(--ink); }
.matrix td { color: var(--ink-2); width: 41%; }
.matrix td.us { color: var(--ink); background: var(--fawn-soft); }
.matrix td.us b { color: var(--pass); font-weight: 500; }
.matrix-note { margin-top: var(--s-2); font-size: 0.8125rem; color: var(--ink-3); max-width: 49em; }
@media (max-width: 680px) {
  table.matrix { min-width: 0; }
  .matrix thead { display: none; }
  .matrix tr { display: grid; border-bottom: 1px solid var(--line); }
  .matrix tr:last-child { border-bottom: 0; }
  .matrix th, .matrix td, .matrix tbody th { display: block; width: auto; border: 0; padding: 4px 20px; }
  .matrix tbody th { padding-top: 20px; padding-bottom: 8px; }
  .matrix tbody td:last-child { padding-bottom: 20px; }
  .matrix td + td { padding-top: 12px; }
  .matrix td::before { content: attr(data-col); display: block; font-size: 0.75rem; color: var(--ink-3); margin-bottom: 4px; }
  /* The brindle answer keeps the same left edge as the others; its rule sits in the cell's padding */
  .matrix td.us { background: linear-gradient(var(--fawn), var(--fawn)) 10px 4px / 2px calc(100% - 8px) no-repeat; }
  .matrix td.us:last-child { background-size: 2px calc(100% - 24px); }
  .matrix td.us::before { color: var(--fawn); }
}
/* Plain data table (docs: keys, flags, limits). Scrolls inside .table-wrap when narrow */
table.data { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.data th, .data td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--line); line-height: 1.55; }
.data thead th { font-size: 0.75rem; font-weight: 500; line-height: 16px; color: var(--ink-3); letter-spacing: 0.01em; background: var(--surface-2); border-bottom-color: var(--line-strong); white-space: nowrap; }
.data tbody th { font-weight: 500; color: var(--ink); }
.data td { color: var(--ink-2); }
.data td:first-child { color: var(--ink); white-space: nowrap; }
.data tr:last-child > * { border-bottom: 0; }
.data .num, .data th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data code { white-space: nowrap; }
/* Long first column (commands, keys with values): it wraps instead of pushing the table wide */
table.data.cmd td:first-child { white-space: normal; width: 36%; min-width: 10rem; }
table.data.cmd td:first-child code { white-space: normal; overflow-wrap: anywhere; }
table.data.cmd td code { white-space: normal; }
.nw, table.data.cmd .nw { white-space: nowrap; }

/* ---------- Page header, breadcrumb, tabs ---------- */
.page-head { display: grid; gap: var(--s-2); margin-bottom: var(--s-6); max-width: 48rem; }
.page-head > .crumbs { margin-bottom: var(--s-1); }
.page-head h1 { font-size: clamp(2rem, 1.25rem + 1.6vw, 2.75rem); line-height: 1.1; letter-spacing: -0.03em; }
.page-head > .tabs, .page-head > .ctas { margin-top: var(--s-1); }
.page-head > .meta, .article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-2); }
@media (max-width: 560px) { .page-head { margin-bottom: var(--s-4); } }
.crumbs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 0.8125rem; line-height: 20px; color: var(--ink-3); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--ink-3); opacity: 0.6; }
.crumbs a { text-decoration: none; color: var(--ink-2); }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink-3); }
/* Article header (guides, compare, release notes): page-head closed by a rule, with a meta line */
.article-head { max-width: var(--measure); margin-bottom: var(--s-6); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.article-head .lede { max-width: none; }
.article-meta { margin: 0; font-family: var(--mono); font-size: 0.75rem; line-height: 20px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.article-meta > * + *::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.6; vertical-align: middle; margin: -2px 6.5px 0 -9.5px; }
.article-meta .tier, .article-meta .pill { font-family: var(--sans); }
/* Tabs are links to sibling pages (plan pickers). The current one carries aria-current="page" */
.tabs { display: flex; gap: 4px; max-width: 100%; width: max-content; padding: 4px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--surface); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: none; text-decoration: none; font-size: 0.875rem; font-weight: 500; color: var(--ink-2); padding: 0 var(--s-2); line-height: 32px; border-radius: 8px; transition: color 120ms var(--ease), background-color 120ms var(--ease); }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current] { background: var(--fawn-soft); color: var(--fawn); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fawn) 30%, transparent); }

/* ---------- Docs layout: sidebar | content | on this page ----------
   The content column is the reading measure (44rem) and the toc sits right after it, so the
   three columns form one 1200px block on the left of the wrap at every width from 1181px up.
   .docs.wide lets the content column take the rest of the wrap (card indexes).
   A child with .docs-span (a Related band under an article) spans content + toc. */
.docs { display: grid; grid-template-columns: var(--col-side) minmax(0, var(--measure)) var(--col-toc); column-gap: var(--col-gap); row-gap: var(--s-3); align-items: start; }
.docs:not(:has(> .docs-toc)) { grid-template-columns: var(--col-side) minmax(0, var(--measure)); }
.docs.wide, .docs.wide:not(:has(> .docs-toc)) { grid-template-columns: var(--col-side) minmax(0, 1fr); }
.docs-main { min-width: 0; }
.docs > .docs-span { grid-column: 2 / -1; min-width: 0; }
.docs-main > .page-head { max-width: none; }
.docs-side, .docs-toc { position: sticky; top: calc(var(--nav-h) + var(--s-3)); max-height: calc(100vh - var(--nav-h) - var(--s-6)); overflow-y: auto; min-width: 0; font-size: 0.875rem; scrollbar-width: thin; }
/* The sidebar box starts 12px left of its column, so link text sits on the column line (the logo's line)
   and the current-page highlight bleeds into the gutter instead of indenting the text */
.docs-side { margin-left: -12px; }
.docs .disclosure > summary { display: none; }
.side-h { font-size: 0.75rem; font-weight: 500; line-height: 16px; color: var(--ink-3); letter-spacing: 0.01em; margin: 0 0 8px; padding-left: 12px; }
.docs-toc .side-h { padding-left: 0; }
.side-nav { display: grid; gap: 0; }
.side-nav + .side-h { margin-top: var(--s-3); }
.side-nav a { display: block; text-decoration: none; color: var(--ink-2); padding: 6px 12px; line-height: 20px; border-radius: 8px; }
.side-nav a:hover { color: var(--ink); }
.side-nav a[aria-current] { color: var(--ink); background: var(--fawn-soft); }
.side-nav a.sub { padding-left: 28px; font-size: 0.8125rem; }
/* Numbered "On this page" (getting started steps): the number keeps its own column, so a wrapped title hangs under itself */
.toc-list a:has(> .n) { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); column-gap: 4px; }
.toc-list a .n { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.toc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-left: 1px solid var(--line); }
.toc-list a { text-decoration: none; color: var(--ink-3); font-size: 0.8125rem; line-height: 20px; display: block; padding: 4px 0 4px 12px; margin-left: -1px; border-left: 1px solid transparent; }
.toc-list a:hover { color: var(--ink); }
.toc-list a[aria-current] { color: var(--ink); border-left-color: var(--fawn); }
.toc-list .lvl3 a { padding-left: 24px; }
/* No headings to list: hide the box with CSS, so it never shows and then vanishes */
.docs:not(:has(.prose h2[id], .prose h3[id])) > .docs-toc:has(.toc-list[data-auto]:empty) { display: none; }
/* Disclosure used by the sidebar and the toc on narrow screens */
.disclosure summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0 16px; height: 48px; font-weight: 500; font-size: 0.875rem; }
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::after { content: "+"; font-family: var(--mono); color: var(--ink-3); }
.disclosure[open] summary::after { content: "\2212"; }

/* details[data-open-above="N"]: always open above N px, a closed disclosure below.
   CSS does the work, so the first paint already has the final state:
   - above N, the content shows whether or not the details is open (::details-content);
   - below N, it shows closed until site.js has synced the open state (data-ready), even if the markup says open.
   site.js still sets .open, for browsers without ::details-content. Markup may drop the open attribute. */
@media (min-width: 861px) { details[data-open-above="860"]::details-content { content-visibility: visible; display: block; } }
@media (min-width: 1181px) { details[data-open-above="1180"]::details-content { content-visibility: visible; display: block; } }
@media (max-width: 860px) {
  details[data-open-above="860"]:not([data-ready])::details-content, details[data-open-above="1180"]:not([data-ready])::details-content { content-visibility: hidden; display: block; block-size: 0; overflow: hidden; }
  details[data-open-above="860"]:not([data-ready]) summary::after, details[data-open-above="1180"]:not([data-ready]) summary::after { content: "+"; }
}
@media (min-width: 861px) and (max-width: 1180px) {
  details[data-open-above="1180"]:not([data-ready])::details-content { content-visibility: hidden; display: block; block-size: 0; overflow: hidden; }
  details[data-open-above="1180"]:not([data-ready]) summary::after { content: "+"; }
}

@media (max-width: 1180px) {
  .docs, .docs:not(:has(> .docs-toc)), .docs.wide, .docs.wide:not(:has(> .docs-toc)) { grid-template-columns: var(--col-side) minmax(0, 1fr); }
  .docs > .docs-span { grid-column: 2; }
  .docs-toc { grid-column: 2; grid-row: 1; position: static; max-height: none; overflow: visible; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--surface); }
  .docs-main { grid-column: 2; grid-row: 2; }
  .docs-side { grid-row: 1 / span 2; }
  .docs:not(:has(> .docs-toc)) > .docs-side, .docs:has(> .docs-toc[hidden]) > .docs-side { grid-row: 1; }
  .docs:not(:has(> .docs-toc)) > .docs-main, .docs:has(> .docs-toc[hidden]) > .docs-main { grid-row: 1; }
  .docs-toc .disclosure > summary { display: flex; }
  .docs-toc .toc-list { margin: 0 16px 16px; }
  .docs-toc .side-h { display: none; }
}
@media (max-width: 860px) {
  .docs, .docs:not(:has(> .docs-toc)), .docs.wide, .docs.wide:not(:has(> .docs-toc)) { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-2); }
  .docs-side, .docs-toc, .docs-main, .docs > .docs-span { grid-column: 1; grid-row: auto; position: static; max-height: none; overflow: visible; }
  .docs > .docs-side, .docs > .docs-main, .docs:not(:has(> .docs-toc)) > .docs-main, .docs:has(> .docs-toc[hidden]) > .docs-main { grid-row: auto; }
  .docs-side { order: 0; margin-left: 0; } .docs-toc { order: 1; } .docs-main { order: 2; }
  .docs-side { border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--surface); }
  .docs-side .disclosure > summary { display: flex; }
  .docs-side .side-h, .docs-side .side-nav { margin-inline: 4px; }
  .docs-side .side-nav:last-child { margin-bottom: 8px; }
  .docs-main { margin-top: var(--s-2); }
}

/* Previous / next */
.pager { max-width: var(--measure); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-8); }
.pager a { display: grid; gap: 4px; align-content: start; text-decoration: none; padding: var(--s-2) var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-lg); min-width: 0; transition: border-color 120ms var(--ease); }
.pager a:hover { border-color: var(--ink-3); }
.pager a span { font-size: 0.75rem; line-height: 16px; color: var(--ink-3); }
.pager a b { font-weight: 500; line-height: 24px; color: var(--ink); }
.pager .prev span::before { content: "\2190\00a0"; }
.pager .next span::after { content: "\00a0\2192"; }
.pager .next { grid-column: 2; text-align: right; }
@media (max-width: 480px) { .pager { grid-template-columns: minmax(0, 1fr); } .pager .next { grid-column: 1; } }

/* ---------- Prose: long-form docs and articles ---------- */
/* Rhythm: 16px between blocks, 24px around blocks with a box (code, tables, callouts), 48px above h2, 32px above h3 */
.prose { max-width: var(--measure); color: var(--ink-2); font-size: 1rem; line-height: 1.75; }
.prose > * + * { margin-top: var(--s-2); }
.prose h2 { font-size: clamp(1.375rem, 1rem + 0.8vw, 1.625rem); line-height: 1.25; letter-spacing: -0.02em; margin-top: var(--s-6); }
.prose h3 { font-size: 1.125rem; line-height: 1.4; margin-top: var(--s-4); }
.prose h2 + *, .prose h3 + * { margin-top: var(--s-1); }
.prose > :is(pre, .table-wrap, .callout, .shell, figure) { margin-block: var(--s-3); }
.prose > :is(pre, .table-wrap, .callout, .shell, figure) + * { margin-top: var(--s-3); }
.prose > h2 + :is(pre, .table-wrap, .callout, .shell, figure), .prose > h3 + :is(pre, .table-wrap, .callout, .shell, figure) { margin-top: var(--s-2); }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose h2, .prose h3 { scroll-margin-top: calc(var(--nav-h) + var(--s-3)); }
.prose strong, .prose b { color: var(--ink); font-weight: 600; }
.prose a { color: var(--ink); text-decoration-color: var(--fawn); text-underline-offset: 3px; }
.prose a:hover { color: var(--fawn); }
/* Zero-width, so adding the anchor after load can never re-wrap a heading */
.h-anchor { display: inline-block; width: 0; white-space: nowrap; text-indent: 8px; color: var(--ink-3); text-decoration: none; font-weight: 400; opacity: 0; transition: opacity 120ms var(--ease); }
.prose h2:hover .h-anchor, .prose h3:hover .h-anchor, .h-anchor:focus-visible { opacity: 1; }
@media (hover: none), (max-width: 560px) { .h-anchor { display: none; } }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: var(--s-1); }
.prose li > ul, .prose li > ol { margin-top: var(--s-1); }
.prose li::marker { color: var(--ink-3); }
/* Code chips break only at spaces, never after a hyphen ("--" / "all"); wrap a token that must stay whole in .nw.
   In tables the chip stays whole and the table scrolls inside .table-wrap if it must. */
.prose :not(pre) > code { font-size: 0.85em; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 0.1em 0.35em; overflow-wrap: break-word; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.prose table.data code { overflow-wrap: normal; }
.prose table.data td:first-child { white-space: normal; }
.prose table.data td:first-child code { display: inline-block; margin-block: 2px; line-height: 1.4; }
/* Two-column key / command tables share one first-column width, so descriptions line up table to table;
   on phones each row stacks into a block */
.prose table.kv td:first-child, .prose table.kv th:first-child { width: 15rem; }
@media (max-width: 640px) {
  .prose table.kv, .prose table.kv tbody, .prose table.kv tr, .prose table.kv td { display: block; width: auto; }
  .prose table.kv thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .prose table.kv td:first-child, .prose table.kv th:first-child { width: auto; }
  .prose table.kv tr { border-bottom: 1px solid var(--line); padding: 12px 16px; }
  .prose table.kv tr:last-child { border-bottom: 0; }
  .prose table.kv td { border: 0; padding: 0; }
  .prose table.kv td + td { margin-top: 4px; }
}
.prose kbd { font-size: 0.8em; color: var(--ink); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; padding: 0.05em 0.4em; }
.prose pre, pre.code { margin-inline: 0; background: var(--shell-bg); color: var(--shell-ink); border: 1px solid var(--line-strong); border-radius: var(--r-lg); padding: var(--s-2) var(--s-3); font-size: 0.8125rem; line-height: 1.7; overflow-x: auto; }
.prose pre code { font-size: inherit; }
.prose pre .d, pre.code .d { color: var(--shell-dim); }
.prose .table-wrap { border-radius: var(--r-lg); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: var(--s-6); }
.callout { display: grid; gap: 4px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--surface); padding: var(--s-2) var(--s-3); font-size: 0.9375rem; line-height: 1.6; color: var(--ink-2); }
.callout > b:first-child { font-size: 0.8125rem; line-height: 20px; font-weight: 600; letter-spacing: 0; color: var(--fawn); }
.callout p + p { margin-top: var(--s-1); }
.callout.warn { background: var(--sap-soft); border-color: color-mix(in srgb, var(--sap) 24%, transparent); }
.callout.warn > b:first-child { color: var(--sap); }
.callout.ok { background: var(--pass-soft); border-color: color-mix(in srgb, var(--pass) 24%, transparent); }
.callout.ok > b:first-child { color: var(--pass); }
@media (max-width: 560px) { .callout, .prose pre, pre.code { padding-inline: var(--s-2); } }

/* ---------- Steps (getting started): number badge and title share a line; the body hangs under the title ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: step; }
.step { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--s-2); row-gap: 12px; padding-block: var(--s-4); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + var(--s-2)); }
.step:first-child { border-top: 0; padding-top: 0; }
.step:last-child { padding-bottom: 0; }
.step > .num, .steps .num { grid-column: 1; grid-row: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 0.8125rem; line-height: 1; color: var(--fawn); background: var(--fawn-soft); font-variant-numeric: tabular-nums; }
.step > h3 { grid-column: 2; grid-row: 1; font-size: 1.125rem; line-height: 28px; }
.step-body { grid-column: 2; display: grid; gap: var(--s-2); min-width: 0; }
.step-body > p { color: var(--ink-2); max-width: 42.2em; }
.step-body :not(pre) > code:not(.cmd) { font-size: 0.85em; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 0.1em 0.35em; }
/* Compact shell inside a step: the Copy button stays on the command's row at every width */
.step .shell-line { min-height: 56px; padding: 8px 8px 8px 20px; gap: var(--s-2); flex-wrap: nowrap; }
.step .shell-line code, .shell-line code.cmd { white-space: pre-wrap; overflow-wrap: break-word; font-size: 0.8125rem; }
.step .copy { width: auto; min-width: 0; height: 32px; padding: 0 12px; font-size: 0.75rem; }
@media (max-width: 560px) {
  .step { column-gap: 12px; padding-block: var(--s-3); }
  .step-body { grid-column: 1 / -1; }
  .step .shell-line { padding: 8px 8px 8px 16px; gap: 12px; }
}
/* In the docs grid the number badge hangs in the column gap, so titles and bodies sit on the content line */
@media (min-width: 861px) { .docs-main > .steps { margin-left: -44px; } .docs-main > .steps > .step { column-gap: 16px; } }

/* ---------- Related band: a short card row after an article ---------- */
.related .head { margin-bottom: var(--s-3); }
.related .head h2, .related > .wrap > h2 { font-size: clamp(1.375rem, 1rem + 0.8vw, 1.625rem); line-height: 1.25; }

/* ---------- Plan comparison table (pricing) ----------
   <div class="plan-table-wrap"><table class="plan-table">
     <colgroup><col class="feat"><col><col class="us"><col><col></colgroup>
     <thead><tr><th scope="col">Feature</th><th scope="col"><b>Free</b><span>$0</span></th>…</tr></thead>
     <tbody><tr class="grp"><th scope="rowgroup" colspan="5">Agents</th></tr>
       <tr><th scope="row">Multi-repo sessions</th><td class="n" data-col="Free"><span class="sr">No</span></td><td class="y" data-col="Pro"><span class="sr">Yes</span></td>…</tr></tbody>
   </table></div>
   .y draws a check, .n a dash; any other cell holds text. th.us / td.us / col.us mark the highlighted plan.
   Under 760px each row becomes the feature name over a 2 x 2 grid of "Plan: value" cells (needs data-col). */
.plan-table-wrap { border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--surface); overflow: clip; }
table.plan-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 0.875rem; line-height: 1.5; }
.plan-table col.feat { width: 32%; }
.plan-table col.us { background: var(--fawn-soft); }
.plan-table th, .plan-table td { text-align: left; vertical-align: top; padding: 12px var(--s-2); border-bottom: 1px solid var(--line); }
.plan-table thead th { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--nav-h)); z-index: 2; background: var(--surface); border-bottom: 1px solid var(--line-strong); padding-block: var(--s-2); vertical-align: bottom; font-weight: 500; }
.plan-table thead th b { display: block; font-size: 1rem; line-height: 24px; font-weight: 600; color: var(--ink); }
.plan-table thead th span { display: block; font-weight: 400; font-size: 0.8125rem; line-height: 20px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.plan-table thead th:first-child { font-size: 0.8125rem; font-weight: 400; color: var(--ink-3); }
.plan-table thead th.us { background: color-mix(in srgb, var(--fawn) 10%, var(--surface)); box-shadow: inset 0 2px 0 var(--fawn); }
.plan-table thead th.us b { color: var(--fawn); }
.plan-table tbody th { font-weight: 400; color: var(--ink); }
/* A feature's one-line description under its name, and a group's description under the group label */
.plan-table th .d { display: block; margin-top: 2px; font-size: 0.8125rem; font-weight: 400; color: var(--ink-3); line-height: 1.45; }
.plan-table tr.grp th .d { max-width: 46em; margin-top: 4px; }
.plan-table td { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.plan-table td.us { background: var(--fawn-soft); }
.plan-table td.num { text-align: right; }
.plan-table tbody tr:not(.grp):hover > * { background-color: color-mix(in srgb, var(--ink) 3%, transparent); }
.plan-table tr.grp th { padding: var(--s-4) var(--s-2) var(--s-1); font-size: 0.8125rem; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line-strong); background: var(--surface); }
.plan-table tbody:first-of-type tr.grp th { padding-top: var(--s-3); }
.plan-table tbody:last-child tr:last-child > * { border-bottom: 0; }
.plan-table .y, .plan-table .n { line-height: 21px; }
.plan-table .y::before, .plan-table .n::before { content: ""; display: inline-block; vertical-align: middle; }
.plan-table .y { color: var(--pass); }
.plan-table .y::before { width: 6px; height: 11px; margin: -4px 0 0 3px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.plan-table .n { color: var(--ink-3); }
.plan-table .n::before { width: 12px; height: 2px; border-radius: 1px; background: currentColor; opacity: 0.55; }
@media (max-width: 760px) {
  table.plan-table, .plan-table tbody, .plan-table tr, .plan-table th, .plan-table td { display: block; }
  .plan-table colgroup, .plan-table thead { display: none; }
  .plan-table tbody tr:not(.grp) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px var(--s-2); padding: var(--s-2); border-bottom: 1px solid var(--line); }
  .plan-table tbody:last-child tr:last-child { border-bottom: 0; }
  .plan-table tbody tr:not(.grp) > * { padding: 0; border: 0; background: none; }
  .plan-table tbody th[scope="row"] { grid-column: 1 / -1; font-weight: 500; }
  /* Each cell shows its plan name above the value; check and dash glyphs move to ::after */
  .plan-table td::before, .plan-table .y::before, .plan-table .n::before { content: attr(data-col); display: block; width: auto; height: auto; margin: 0 0 4px; border: 0; border-radius: 0; transform: none; background: none; opacity: 1; font-size: 0.75rem; line-height: 16px; color: var(--ink-3); }
  .plan-table td.us::before { color: var(--fawn); }
  .plan-table .y::after { content: ""; display: inline-block; width: 6px; height: 11px; margin-left: 3px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
  .plan-table .n::after { content: ""; display: inline-block; width: 12px; height: 2px; border-radius: 1px; background: currentColor; opacity: 0.55; vertical-align: middle; }
  .plan-table tr.grp th { padding: var(--s-3) var(--s-2) var(--s-1); }
}

/* ---------- Limits list (pricing): name | figures | note on one row; figures right-aligned on one line ----------
   <ul class="limits"><li class="limit">
     <h4>Notices <span class="tier">Team</span></h4>
     <ul class="figs"><li><b>500</b>characters each</li><li><b>20</b>a day per org</li></ul>
     <p>Optional note.</p>
   </li></ul>
   Group several lists under .limits-group > h3 (with an optional span for the plan). */
.limits-group + .limits-group { margin-top: var(--s-6); }
.limits-group > h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 1.125rem; padding-bottom: var(--s-2); border-bottom: 1px solid var(--line-strong); }
.limits-group > h3 span { font-size: 0.875rem; font-weight: 400; letter-spacing: 0; color: var(--ink-3); }
.limits { list-style: none; margin: 0; padding: 0; }
.limit { display: grid; grid-template-columns: 12rem 18rem minmax(0, 1fr); gap: var(--s-1) var(--s-5); padding-block: var(--s-3); border-bottom: 1px solid var(--line); align-items: start; }
.limit:last-child { border-bottom: 0; }
.limit > h4 { margin: 0; font-size: 0.9375rem; line-height: 24px; font-weight: 600; color: var(--ink); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.limits .figs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.limits .figs li { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 12px; align-items: baseline; font-size: 0.875rem; line-height: 24px; color: var(--ink-2); }
.limits .figs b { text-align: right; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.limit > p { color: var(--ink-2); font-size: 0.875rem; line-height: 24px; max-width: 42.2em; }
@media (max-width: 1100px) { .limit { grid-template-columns: 12rem minmax(0, 1fr); } .limit > p { grid-column: 2; } }
@media (max-width: 640px) { .limit { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-block: var(--s-2); } .limit > p { grid-column: auto; } .limits .figs li { grid-template-columns: 4.5rem minmax(0, 1fr); } }

/* ---------- Version rail (changelog sidebar): one group per release line, one row per release ----------
   Lives in the docs sidebar (aside.docs-side > details.disclosure), so it collapses like the docs menu.
   <div class="rail-group"><p class="rail-h">0.3.x</p><ol class="rail-list">
     <li><a href="0.3.11.html" aria-current="page"><span class="v">0.3.11</span><time datetime="2026-10-13">Oct 13</time></a></li>
   </ol></div> */
.rail-top { display: block; font-size: 0.8125rem; color: var(--ink-2); text-decoration: none; padding: 0 12px var(--s-2); line-height: 24px; }
.rail-top:hover { color: var(--ink); }
.rail-group + .rail-group { margin-top: var(--s-3); }
.rail-h { font-family: var(--mono); font-size: 0.75rem; line-height: 16px; color: var(--ink-3); margin: 0 0 8px; padding-left: 12px; }
.rail-list { list-style: none; margin: 0; padding: 0; }
.rail-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 12px; border-radius: 8px; text-decoration: none; color: var(--ink-3); font-size: 0.8125rem; line-height: 20px; }
.rail-list .v { font-family: var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rail-list time { font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.rail-list a:hover .v { color: var(--ink); }
.rail-list a[aria-current] { background: var(--fawn-soft); }
.rail-list a[aria-current] .v { color: var(--ink); font-weight: 500; }
.rail-list a[aria-current] time { color: var(--ink-2); }
@media (max-width: 860px) { .docs-side .rail-group, .docs-side .rail-top { margin-inline: 4px; } .docs-side .rail-group:last-child { margin-bottom: 8px; } }

/* ---------- Footer ---------- */
footer.band { padding-block: var(--s-8) var(--s-4); }
.foot { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.foot p { font-size: 0.875rem; line-height: 20px; color: var(--ink-3); max-width: 27.2em; margin-top: var(--s-2); }
.foot h4 { margin: 0 0 var(--s-2); font-size: 0.8125rem; line-height: 20px; font-weight: 500; color: var(--ink-3); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.foot li { line-height: 20px; }
.foot a { text-decoration: none; font-size: 0.875rem; color: var(--ink-2); }
.foot a:hover { color: var(--ink); }
.foot .logo { font-size: 1rem; color: var(--ink); }
.foot .email { font-size: 0.875rem; color: var(--ink-2); user-select: all; -webkit-user-select: all; overflow-wrap: anywhere; }
.foot-base { margin-top: var(--s-6); padding-top: var(--s-3); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px var(--s-3); font-size: 0.8125rem; line-height: 20px; color: var(--ink-3); }
@media (max-width: 760px) { .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-5); } .foot > :first-child { grid-column: 1 / -1; } }

/* ---------- Step grid (home, enterprise): numbered facts in a row, --cols wide, one column on phones ----------
   <ol class="step-grid" style="--cols: 3"><li><h3>Title</h3><p>Text</p></li>…</ol>  (or <b>Title</b> for a plain label) */
.step-grid { --cols: 3; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3) var(--s-4); counter-reset: step; }
@media (min-width: 720px) { .step-grid { grid-template-columns: repeat(min(var(--cols), 2), minmax(0, 1fr)); } }
@media (min-width: 1024px) { .step-grid { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); } }
.step-grid > li { counter-increment: step; display: grid; gap: 8px; align-content: start; border-top: 1px solid var(--line-strong); padding-top: var(--s-2); min-width: 0; }
.step-grid > li::before { content: counter(step, decimal-leading-zero); font-family: var(--mono); font-size: 0.75rem; line-height: 16px; color: var(--fawn); font-variant-numeric: tabular-nums; }
.step-grid h3, .step-grid > li > b { font-size: 1rem; line-height: 1.4; font-weight: 600; color: var(--ink); }
.step-grid p { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.6; }
.step-grid code { color: var(--ink); font-size: 0.85em; }

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