/* Silo docs — Slate's inner-page recipe, the same one silo-pages.css runs for
   Analytics, Stake and Points: a normally-flowing page on the plain ground,
   outline-only panels (no filled cards, no shadows), groups drawn as ONE
   bordered band split by internal hairlines, 550-weight titles, quiet 12px
   labels, and pink used only where it carries meaning (the bin bars, the
   active bin, the reading rail). Dark theme rides the same localStorage key
   the app writes (silo-theme), so the two surfaces flip together.
   Design contract: no filled card on the ground, no box-shadow in the flow,
   no uppercase pink eyebrows — if it wouldn't ship inside the app, it
   doesn't ship here. */

:root {
  --ground: #f4f4f2;
  --card: #fcfcfb;                   /* drawer + sticky surfaces only */
  --chip: #ededec;
  --ink: #17181a;
  --muted: #6e737b;
  --faint: #9aa1a9;
  --line: rgba(0, 0, 0, 0.10);       /* panel outline (slate .anx) */
  --hairline: rgba(0, 0, 0, 0.055);  /* internal divider */
  --hover: #f5f5f3;
  --accent: #e0447c;
  --warn: #8a6420;
  --shadow: 0 10px 30px rgba(23, 24, 26, 0.08), 0 2px 6px rgba(23, 24, 26, 0.04);
}
html[data-silo-theme="dark"] {
  --ground: #101113;
  --card: #1a1c1f;
  --chip: #26282c;
  --ink: #f2f3f5;
  --muted: #9aa1ab;
  --faint: #70767f;
  --line: rgba(255, 255, 255, 0.12);
  --hairline: rgba(255, 255, 255, 0.07);
  --hover: #202226;
  --accent: #ff8fb3;
  --warn: #e0b060;
  --shadow: 0 12px 34px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; }

/* custom scrollbars, same as the app (silo-pages.css) */
* { scrollbar-width: thin; scrollbar-color: rgba(23, 24, 26, 0.22) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(23, 24, 26, 0.18);
  border: 3px solid transparent; border-radius: 999px;
  background-clip: padding-box; min-height: 40px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(23, 24, 26, 0.34); }
html[data-silo-theme="dark"] * { scrollbar-color: rgba(255, 255, 255, 0.22) transparent; }
html[data-silo-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); }
html[data-silo-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }

.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 100;
  padding: 8px 13px; border-radius: 10px; corner-shape: squircle;
  background: var(--ink); color: var(--ground);
  font-size: 12.5px; font-weight: 600; text-decoration: none;
  opacity: 0; pointer-events: none; transform: translateY(-12px);
}
.skip-link:focus { opacity: 1; pointer-events: auto; transform: none; }

.reading-progress { position: fixed; inset: 0 0 auto; z-index: 60; height: 1.5px; }
.reading-progress span { display: block; width: 0; height: 100%; background: var(--accent); }

/* ---------- topbar: the app's header proportions ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50; height: 56px;
  background: color-mix(in srgb, var(--ground) 84%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
}
.topbar-inner {
  display: flex; width: min(1400px, 100%); height: 100%;
  margin: auto; padding: 0 26px; align-items: center;
}
.brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15.5px; font-weight: 650; letter-spacing: -0.02em; text-decoration: none;
}
.brand img { width: 24px; height: 24px; }
.header-divider { width: 1px; height: 18px; margin: 0 13px; background: var(--line); }
.docs-label { color: var(--muted); font-size: 12.5px; font-weight: 500; text-decoration: none; }
.header-actions { display: flex; margin-left: auto; align-items: center; gap: 2px; }
.header-actions a, .sidebar-toggle, .theme-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted);
  font-size: 12.5px; font-weight: 500; text-decoration: none; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.header-actions a:hover, .theme-toggle:hover, .sidebar-toggle:hover { background: var(--chip); color: var(--ink); }
.theme-toggle { width: 30px; padding: 0; justify-content: center; }
.theme-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html:not([data-silo-theme="dark"]) .theme-toggle .moon,
html[data-silo-theme="dark"] .theme-toggle .sun { display: none; }
.sidebar-toggle { display: none; }
.sidebar-toggle svg { width: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.5; }
.brand:focus-visible, .docs-label:focus-visible, .header-actions a:focus-visible,
.sidebar-toggle:focus-visible, .theme-toggle:focus-visible, .sidebar a:focus-visible,
.page-toc a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px;
}

/* ---------- layout ---------- */
.docs-layout {
  display: grid; grid-template-columns: 214px minmax(0, 720px) 168px;
  gap: 52px; width: min(1240px, calc(100% - 52px)); margin: auto; align-items: start;
}
.sidebar, .page-toc { position: sticky; top: 82px; max-height: calc(100vh - 104px); overflow: auto; }

/* ---------- sidebar ---------- */
.sidebar { padding: 26px 0 32px; }
.sidebar nav { display: grid; gap: 1px; }
.sidebar nav > p {
  margin: 22px 0 5px; padding: 0 11px;
  font-size: 11.5px; font-weight: 600; color: var(--faint);
}
.sidebar nav > p:first-child { margin-top: 0; }
.sidebar a {
  padding: 6px 11px; border-radius: 9px; corner-shape: squircle;
  color: var(--muted); font-size: 13px; font-weight: 500; text-decoration: none;
  transition: background 0.13s ease, color 0.13s ease;
}
.sidebar a:hover { background: var(--hover); color: var(--ink); }
.sidebar a.is-active { background: var(--chip); color: var(--ink); font-weight: 600; }

/* ---------- article rhythm ---------- */
main { min-width: 0; padding: 38px 0 48px; }

/* ---------- section meta ---------- */
.section-meta { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.section-meta > span {
  font-size: 12px; font-weight: 500; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.tag {
  padding: 2px 9px; border-radius: 999px;
  background: var(--chip); color: var(--muted);
  font-size: 11px; font-weight: 550; letter-spacing: 0;
}
.tag.planned { color: var(--warn); }
.tag.risk { color: var(--accent); }
h3 .tag { margin-left: 7px; vertical-align: 1px; font-size: 10.5px; }

/* ---------- headings + copy ---------- */
h1, h2, h3, p { margin: 0; }
h1 {
  max-width: 620px; font-size: 32px; line-height: 1.18;
  font-weight: 550; letter-spacing: -0.035em;
}
h1 .tag { margin-left: 10px; vertical-align: 5px; font-size: 11px; }
h2 {
  margin: 32px 0 10px; font-size: 20px; line-height: 1.35;
  font-weight: 550; letter-spacing: -0.028em;
}
.section-meta + h2, .section-meta + h1 { margin-top: 0; }
h3 { margin-top: 26px; font-size: 14px; font-weight: 600; letter-spacing: -0.012em; }
h3 + p { margin-top: 6px; }
p { margin-top: 12px; color: var(--muted); }
p strong, li strong { color: var(--ink); font-weight: 600; }
.lede { max-width: 620px; margin-top: 14px; font-size: 15px; line-height: 1.62; color: var(--muted); }
/* inline links inside prose: underlined in the hairline, accent on hover */
main article p a, main article li a, main article dd a {
  color: var(--ink); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: var(--line);
  transition: text-decoration-color 0.13s ease;
}
main article p a:hover, main article li a:hover, main article dd a:hover {
  text-decoration-color: var(--accent);
}
main article p a:focus-visible, main article li a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}

code {
  padding: 1.5px 6px; border-radius: 6px;
  background: var(--chip); color: var(--ink);
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 500; letter-spacing: -0.01em;
}

/* ---------- the shared band: one outline, hairlines inside ---------- */
.example-card, .three-up, .two-up, .split-example, .code-compare,
.asset-cards, .rows, .roadmap, .glossary, .compact-list, .risk-list,
.price-ladder, .callout {
  margin-top: 18px;
  border: 1px solid var(--line); border-radius: 16px; corner-shape: squircle;
  background: transparent; overflow: hidden;
}

/* ---------- the principle line: rules, not a pink slab ---------- */
.principle {
  display: grid; gap: 4px; margin-top: 26px; padding: 16px 0 18px;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.principle span { font-size: 12px; font-weight: 500; color: var(--muted); }
.principle strong {
  max-width: 560px; font-size: 18px; line-height: 1.4;
  font-weight: 550; letter-spacing: -0.025em; color: var(--ink);
}

/* ---------- cell grids: hairline-split, never separate cards ---------- */
.three-up { display: grid; grid-template-columns: repeat(3, 1fr); }
.two-up, .split-example, .code-compare, .asset-cards, .glossary { display: grid; grid-template-columns: 1fr 1fr; }
.three-up > div, .two-up > div, .split-example > div, .code-compare > div,
.asset-cards > article, .glossary > div { padding: 15px 17px 16px; }
.three-up > div + div { border-left: 1px solid var(--hairline); }
.two-up > div, .split-example > div, .code-compare > div,
.asset-cards > article, .glossary > div { border-top: 1px solid var(--hairline); }
.two-up > div:nth-child(-n + 2), .split-example > div:nth-child(-n + 2),
.code-compare > div:nth-child(-n + 2), .asset-cards > article:nth-child(-n + 2),
.glossary > div:nth-child(-n + 2) { border-top: 0; }
.two-up > div:nth-child(even), .split-example > div:nth-child(even),
.code-compare > div:nth-child(even), .asset-cards > article:nth-child(even),
.glossary > div:nth-child(even) { border-left: 1px solid var(--hairline); }
/* an odd item last in a two-column band runs the full width, so the band
   never ends on an empty half-cell */
.two-up > div:last-child:nth-child(odd), .asset-cards > article:last-child:nth-child(odd),
.glossary > div:last-child:nth-child(odd), .compact-list li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.three-up > div > span, .asset-cards > article > span, .split-example span, .code-compare span {
  display: block; margin-bottom: 7px;
  font-size: 12px; font-weight: 500; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.three-up h3, .asset-cards h3 { margin-top: 0; font-size: 13.5px; }
.three-up p, .two-up p, .split-example p, .asset-cards p { margin-top: 6px; font-size: 12.5px; line-height: 1.58; }
.split-example strong, .two-up strong { display: block; font-size: 13px; font-weight: 600; }
.split-example code, .code-compare code { display: inline-block; margin-top: 7px; }
.asset-cards small { display: block; margin-top: 8px; font-size: 11.5px; color: var(--faint); }

/* ---------- callouts: a rule, not a wash ---------- */
.callout { padding: 14px 16px 15px; }
.callout > strong { font-size: 13px; font-weight: 600; }
.callout p { margin-top: 4px; font-size: 12.5px; line-height: 1.58; }
/* every callout is the same quiet outline — the label carries the weight,
   not a coloured edge */

/* ---------- worked example / key-value bands ---------- */
.example-card header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 13px 17px; border-bottom: 1px solid var(--hairline);
}
.example-card header span { font-size: 12px; font-weight: 500; color: var(--muted); }
.example-card header strong { font-size: 13px; font-weight: 600; }
.example-card dl { margin: 0; padding: 0 17px; }
.example-card dl div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 11px 0;
}
.example-card dl div + div { border-top: 1px solid var(--hairline); }
.example-card dt { font-size: 12.5px; color: var(--muted); }
.example-card dd {
  margin: 0; font-size: 12.5px; font-weight: 550; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.rows > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 12px 17px;
}
.rows > div + div { border-top: 1px solid var(--hairline); }
/* both orders appear in the markup (label-first and term-first): the first
   cell is always the label column, the second always the explanation */
.rows > div > *:first-child {
  flex: none; width: 176px;
  font-size: 12.5px; font-weight: 550; color: var(--ink);
}
.rows > div > *:last-child {
  flex: 1; font-size: 12.5px; font-weight: 500; line-height: 1.55;
  color: var(--muted); text-align: left;
}

/* ---------- price ladder ---------- */
.price-ladder > div {
  display: grid; grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center; gap: 14px; padding: 10px 17px;
}
.price-ladder > div + div { border-top: 1px solid var(--hairline); }
.price-ladder > div.active { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.price-ladder span, .price-ladder em {
  font-size: 12.5px; font-weight: 550; font-style: normal;
  font-variant-numeric: tabular-nums;
}
.price-ladder em { color: var(--muted); font-weight: 500; text-align: right; }
.price-ladder .active span { color: var(--ink); }
.price-ladder .active em { color: var(--accent); }
.price-ladder i {
  position: relative; display: block; height: 6px;
  border-radius: 999px; background: var(--chip); overflow: hidden;
}
.price-ladder i::after {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: var(--w, 40%); border-radius: inherit;
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}
.price-ladder .active i::after { background: var(--accent); }

/* ---------- strategy shapes: hairline list, tile per shape ---------- */
.strategy-list { display: grid; margin-top: 16px; }
.strategy-list article {
  display: grid; grid-template-columns: 112px minmax(0, 1fr);
  gap: 20px; align-items: center;
  padding: 15px 0; border-top: 1px solid var(--hairline);
}
.strategy-list article:first-child { border-top: 0; }
.strategy-list h3 { margin: 0; font-size: 13.5px; }
.strategy-list p { margin-top: 4px; font-size: 12.5px; line-height: 1.58; }
.strategy {
  display: flex; align-items: flex-end; gap: 4px;
  height: 50px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 12px; corner-shape: squircle;
}
.strategy i { flex: 1; border-radius: 3px 3px 1.5px 1.5px; background: var(--accent); opacity: 0.8; }
.strategy.spot i { height: 62%; }
.strategy.curve i:nth-child(1), .strategy.curve i:nth-child(5) { height: 22%; }
.strategy.curve i:nth-child(2), .strategy.curve i:nth-child(4) { height: 58%; }
.strategy.curve i:nth-child(3) { height: 92%; }
.strategy.bid i:nth-child(1) { height: 92%; }
.strategy.bid i:nth-child(2) { height: 68%; }
.strategy.bid i:nth-child(3) { height: 46%; }
.strategy.bid i:nth-child(4) { height: 28%; }
.strategy.bid i:nth-child(5) { height: 14%; }
.strategy.ask i:nth-child(1) { height: 14%; }
.strategy.ask i:nth-child(2) { height: 28%; }
.strategy.ask i:nth-child(3) { height: 46%; }
.strategy.ask i:nth-child(4) { height: 68%; }
.strategy.ask i:nth-child(5) { height: 92%; }
.strategy.custom i:nth-child(1) { height: 66%; }
.strategy.custom i:nth-child(2) { height: 28%; }
.strategy.custom i:nth-child(3) { height: 84%; }
.strategy.custom i:nth-child(4) { height: 20%; }
.strategy.custom i:nth-child(5) { height: 56%; }

/* ---------- steps ---------- */
.steps { margin: 16px 0 0; padding: 0; list-style: none; }
.steps li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr);
  gap: 14px; padding: 13px 0; border-top: 1px solid var(--hairline);
}
.steps li:first-child { border-top: 0; }
.steps li > span {
  display: grid; place-items: center; width: 24px; height: 24px;
  border: 1px solid var(--line); border-radius: 50%;
  color: var(--muted); font-size: 11.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.steps strong { font-size: 13px; font-weight: 600; }
.steps p { margin-top: 3px; font-size: 12.5px; line-height: 1.58; }

/* ---------- feature list ---------- */
.features { margin: 16px 0 0; padding: 0; list-style: none; }
.features li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding: 11px 0; border-top: 1px solid var(--hairline);
}
.features li:first-child { border-top: 0; }
.features strong { flex: none; width: 176px; font-size: 12.5px; font-weight: 550; }
.features span { flex: 1; font-size: 12.5px; line-height: 1.55; color: var(--muted); text-align: left; }

/* ---------- compact list ---------- */
.compact-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
.compact-list li {
  position: relative; padding: 10px 16px 10px 30px;
  font-size: 12.5px; color: var(--muted);
  border-top: 1px solid var(--hairline);
}
.compact-list li:nth-child(-n + 2) { border-top: 0; }
.compact-list li:nth-child(even) { border-left: 1px solid var(--hairline); }
.compact-list li::before {
  content: ""; position: absolute; left: 16px; top: 18px;
  width: 5px; height: 5px; border-radius: 2px; background: var(--faint);
}

/* ---------- risks ---------- */
.risk-list details + details { border-top: 1px solid var(--hairline); }
.risk-list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 17px; cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 550;
  transition: background 0.12s ease;
}
.risk-list summary:hover { background: var(--hover); }
.risk-list summary::-webkit-details-marker { display: none; }
.risk-list summary::after {
  content: "+"; font-size: 15px; font-weight: 500; color: var(--faint);
  transition: transform 0.16s ease;
}
.risk-list details[open] summary::after { transform: rotate(45deg); }
.risk-list details p { margin: 0; padding: 0 17px 14px; font-size: 12.5px; line-height: 1.58; }

/* ---------- roadmap ---------- */
.roadmap { display: grid; grid-template-columns: repeat(3, 1fr); }
.roadmap article { padding: 15px 17px 16px; }
.roadmap article + article { border-left: 1px solid var(--hairline); }
.roadmap article > div { display: grid; gap: 2px; margin-bottom: 10px; }
.roadmap article > div span { font-size: 12px; font-weight: 500; color: var(--faint); }
.roadmap article > div strong { font-size: 13.5px; font-weight: 600; letter-spacing: -0.012em; }
.roadmap ul { margin: 0; padding: 0; list-style: none; }
.roadmap li {
  padding: 8px 0; font-size: 12.5px; line-height: 1.5; color: var(--muted);
  border-top: 1px solid var(--hairline);
}
.roadmap li:first-child { border-top: 0; padding-top: 0; }
.roadmap li:last-child { padding-bottom: 0; }

/* ---------- glossary ---------- */
.glossary dt { font-size: 12.5px; font-weight: 600; }
.glossary dd { margin: 3px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }

/* ---------- prev / next pager ---------- */
.page-nav {
  display: flex; gap: 10px; margin-top: 44px;
}
.page-nav a {
  display: grid; gap: 2px; flex: 1; min-width: 0;
  padding: 13px 16px 14px;
  border: 1px solid var(--line); border-radius: 14px; corner-shape: squircle;
  text-decoration: none; transition: background 0.13s ease, border-color 0.13s ease;
}
.page-nav a:hover { background: var(--hover); }
.page-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.page-nav span { font-size: 12px; font-weight: 500; color: var(--faint); }
.page-nav strong {
  font-size: 13.5px; font-weight: 600; letter-spacing: -0.012em; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.page-next { text-align: right; }
.page-prev:only-child { margin-right: auto; max-width: 50%; }
.page-next:only-child { margin-left: auto; max-width: 50%; }

/* ---------- footer ---------- */
.docs-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 8px; padding: 22px 0 8px; border-top: 1px solid var(--hairline);
}
.docs-footer > div { display: flex; align-items: center; gap: 9px; }
.docs-footer strong { font-size: 12.5px; font-weight: 600; }
.docs-footer p { margin: 0; font-size: 12px; color: var(--faint); }

/* ---------- right rail ---------- */
.page-toc { padding: 30px 0; }
.page-toc nav { display: grid; gap: 1px; }
.page-toc p { margin: 0 0 9px; font-size: 11.5px; font-weight: 600; color: var(--faint); }
.page-toc a {
  padding: 4px 0 4px 12px; border-left: 1.5px solid var(--hairline);
  color: var(--faint); font-size: 12.5px; font-weight: 500; text-decoration: none;
  transition: color 0.13s ease, border-color 0.13s ease;
}
.page-toc a:hover { color: var(--muted); border-left-color: var(--line); }
.page-toc a.is-sub { padding-left: 24px; font-size: 12px; }
.page-toc a.is-active { color: var(--ink); border-left-color: var(--accent); }
.page-toc[hidden] { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1140px) {
  .docs-layout { grid-template-columns: 206px minmax(0, 1fr); gap: 44px; }
  .page-toc { display: none; }
}
@media (max-width: 800px) {
  html { scroll-padding-top: 74px; }
  .topbar-inner { padding: 0 18px; }
  .header-actions > a { display: none; }
  .sidebar-toggle { display: inline-flex; }
  .docs-layout { display: block; width: calc(100% - 36px); }
  .sidebar {
    position: fixed; inset: 56px 0 0 auto; z-index: 55; width: min(300px, 84vw);
    padding: 18px 18px 28px; background: var(--card);
    border-left: 1px solid var(--line); box-shadow: var(--shadow);
    transform: translateX(105%); transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
    max-height: none;
  }
  .sidebar.is-open { transform: none; }
  body.menu-open { overflow: hidden; }
  main { padding-top: 20px; }
  .page-nav { margin-top: 34px; }
}
@media (max-width: 620px) {
  h1 { font-size: 26px; }
  h2 { font-size: 18px; }
  .lede { font-size: 14px; }
  .principle strong { font-size: 16px; }
  /* the bands collapse to single-column stacks, hairlines only */
  .three-up, .two-up, .split-example, .code-compare, .asset-cards,
  .glossary, .compact-list, .roadmap { grid-template-columns: 1fr; }
  .three-up > div + div, .roadmap article + article { border-left: 0; border-top: 1px solid var(--hairline); }
  .two-up > div, .split-example > div, .code-compare > div,
  .asset-cards > article, .glossary > div, .compact-list li {
    border-left: 0 !important; border-top: 1px solid var(--hairline);
  }
  .two-up > div:first-child, .split-example > div:first-child,
  .code-compare > div:first-child, .asset-cards > article:first-child,
  .glossary > div:first-child, .compact-list li:first-child { border-top: 0; }
  .two-up > div:nth-child(2), .split-example > div:nth-child(2),
  .code-compare > div:nth-child(2), .asset-cards > article:nth-child(2),
  .glossary > div:nth-child(2), .compact-list li:nth-child(2) { border-top: 1px solid var(--hairline); }
  .rows > div, .features li { flex-direction: column; align-items: flex-start; gap: 3px; }
  .rows > div > *:first-child, .features strong { width: auto; }
  .strategy-list article { grid-template-columns: 1fr; gap: 12px; }
  .strategy { max-width: 200px; }
  .price-ladder > div { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; padding: 10px 14px; }
  .docs-footer { flex-direction: column; align-items: flex-start; gap: 8px; }
  .page-nav { flex-direction: column; }
  .page-next { text-align: left; }
  .page-prev:only-child, .page-next:only-child { max-width: none; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}