/* docs.css: the customer docs, in the clean-slate system (tokens.css). One family, two inks, two liquids.
   Layout: a floating nav pill (the landing's), a sidebar, one reading column and a rail. Every explainer sits in a
   figure that reads correctly before any script runs; scripts only add motion and controls. */

.docs { background: var(--bg); }
/* plain figures: Mona Sans slashes the zero in its tabular figures; only the receipt and number tables keep columns */
.docs .num { font-variant-numeric: normal; font-feature-settings: normal; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: var(--z-toast); padding: 10px 14px; background: var(--ink); color: var(--bg); border-radius: var(--r-1); }
.skip:focus { left: 12px; }
html { scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ── nav: the landing's pill, with search ───────────────────────────────────────────────────── */
.dnav { position: fixed; z-index: var(--z-sticky); top: 12px; left: 50%; transform: translateX(-50%); width: min(1360px, calc(100% - 24px));
  display: flex; align-items: center; gap: 6px; height: 56px; padding: 0 8px 0 20px; border-radius: var(--r-pill); overflow: hidden;
  background: var(--glass); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px);
  box-shadow: inset 0 0 0 1px var(--rule), var(--shadow-soft); }
.wordmark { display: inline-flex; align-items: center; gap: 9px; font-size: 22px; font-weight: 760; font-variation-settings: 'wdth' 122;
  letter-spacing: -0.045em; text-decoration: none; color: var(--ink); }
@property --wm-b { syntax: '<number>'; inherits: false; initial-value: 0.66; }
@property --wm-c { syntax: '<number>'; inherits: false; initial-value: 0.34; }
/* The Arlo mark is a tiny card (redesign/logo-card/mark.css): the Backer's indigo at the bottom, the Trader's coral on top, inside a black
   edge that is fixed in both themes (a printed card does not change colour). --wm-b and --wm-c are the two layers' shares of the card's
   inner height, so wm-pour (fills on arrival) and wm-slosh (pointer) below keep working, now filling a card. */
.wordmark::before { content: ''; --wm-h: 13px; flex: none; box-sizing: content-box;
  width: 22px; height: var(--wm-h); border: 2px solid oklch(0.205 0.03 268); border-radius: 4.5px;
  background: linear-gradient(var(--coral), var(--coral)) 0 calc(var(--wm-h) * (1 - var(--wm-b) - var(--wm-c))) / 100% calc(var(--wm-h) * var(--wm-c)) no-repeat,
    linear-gradient(var(--indigo), var(--indigo)) 0 100% / 100% calc(var(--wm-h) * var(--wm-b)) no-repeat,
    oklch(0.205 0.03 268); }
/* dark pages: a hairline so the black edge holds its shape against a near-black bar */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wordmark::before, :root:not([data-theme="light"]) .sb-group a[aria-current="page"]::after { box-shadow: 0 0 0 1px oklch(0.33 0.01 268); } }
:root[data-theme="dark"] .wordmark::before, :root[data-theme="dark"] .sb-group a[aria-current="page"]::after { box-shadow: 0 0 0 1px oklch(0.33 0.01 268); }
.wm-pour .dnav .wordmark::before { animation: wm-pour 1050ms var(--ease-out) 200ms both; }
.wm-ready .dnav a.wordmark:hover::before, .wm-ready .dnav a.wordmark:focus-visible::before { animation: wm-slosh 860ms var(--ease-in-out); }
@keyframes wm-pour { 0% { --wm-b: 0; --wm-c: 0; } 58% { --wm-b: 0.66; --wm-c: 0; } 100% { --wm-b: 0.66; --wm-c: 0.34; } }
@keyframes wm-slosh { 0%, 100% { --wm-b: 0.66; --wm-c: 0.34; } 26% { --wm-b: 0.56; --wm-c: 0.44; } 56% { --wm-b: 0.72; --wm-c: 0.28; } 80% { --wm-b: 0.64; --wm-c: 0.36; } }
.dnav-docs { margin-left: 2px; padding: 6px 10px; border-radius: var(--r-pill); font-size: 15px; font-weight: 560; color: var(--ink-2); text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--rule); transition: background-color var(--t-ui) ease; }
@media (hover: hover) and (pointer: fine) { .dnav-docs:hover { background: var(--surface-2); color: var(--ink); } }
.search-btn { display: inline-flex; align-items: center; gap: 10px; height: 38px; margin-left: 18px; padding: 0 8px 0 14px; width: min(340px, 30vw);
  border: 0; border-radius: var(--r-pill); background: var(--surface); color: var(--muted); font-size: 14.5px; box-shadow: inset 0 0 0 1px var(--rule);
  transition: box-shadow var(--t-ui) ease, background-color var(--t-ui) ease, transform var(--t-press) var(--ease-out); }
.search-btn:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .search-btn:hover { box-shadow: inset 0 0 0 1px var(--rule-strong); color: var(--ink-2); } }
.search-btn svg, .search-field svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; flex: none; }
.search-btn span { flex: 1; text-align: left; }
kbd { font: 600 11.5px/1 var(--font); padding: 5px 7px; border-radius: 6px; background: var(--bg); color: var(--muted); box-shadow: inset 0 0 0 1px var(--rule); }
.dnav-sp { flex: 1; }
.theme, .menu-btn { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2);
  transition: background-color var(--t-ui) ease, transform var(--t-press) var(--ease-out); }
.theme:active, .menu-btn:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .theme:hover { background: var(--surface-2); color: var(--ink); } }
.theme svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.btn-nav { height: 40px; padding: 0 18px; font-size: 14.5px; margin-left: 4px; }
.menu-btn { display: none; position: relative; }
.menu-btn i { position: absolute; left: 12px; top: 19px; width: 16px; height: 1.6px; border-radius: 1px; background: var(--ink); transition: transform 320ms var(--ease-out); }
.menu-btn i:first-child { transform: translateY(-3.5px); }
.menu-btn i:last-child { transform: translateY(3.5px); }
.menu-btn[aria-expanded="true"] i:first-child { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] i:last-child { transform: rotate(-45deg); }
/* reading progress: a hairline along the bottom of the pill */
.dnav-progress { position: absolute; left: 22px; right: 22px; bottom: 0; height: 2px; border-radius: 2px; background: var(--coral);
  transform-origin: 0 50%; transform: scaleX(var(--read, 0)); opacity: 0.85; }
@supports (animation-timeline: scroll()) {
  .dnav-progress { animation: read-progress linear both; animation-timeline: scroll(root block); }
  @keyframes read-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ── the grid ─────────────────────────────────────────────────────────────────────────────── */
.docs-grid { display: grid; grid-template-columns: 248px minmax(0, 1fr) 232px; gap: 56px; max-width: 1360px; margin: 0 auto; padding: 104px 28px 0; }
.sidebar { position: sticky; top: 96px; align-self: start; max-height: calc(100dvh - 112px); overflow: auto; padding: 4px 4px 24px; overscroll-behavior: contain; scrollbar-width: thin; }
.sb-group { display: flex; flex-direction: column; gap: 0; margin-bottom: 16px; }
.sb-label { margin: 0 0 6px 12px; font-size: 12.5px; font-weight: 640; color: var(--muted); letter-spacing: 0.01em; }
.sb-group a { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 10px; font-size: 14.5px; color: var(--ink-2); text-decoration: none;
  transition: background-color var(--t-ui) ease, color var(--t-ui) ease; }
@media (hover: hover) and (pointer: fine) { .sb-group a:hover { background: var(--surface); color: var(--ink); } }
.sb-group a[aria-current="page"] { background: var(--surface-2); color: var(--ink); font-weight: 600; }
/* the current page wears the logo's card, and fills it on arrival */
.sb-group a[aria-current="page"]::after { content: ''; margin-left: auto; flex: none; box-sizing: content-box; --wm-h: 7px; width: 13px; height: var(--wm-h);
  border: 1.5px solid oklch(0.205 0.03 268); border-radius: 3px;
  background: linear-gradient(var(--coral), var(--coral)) 0 calc(var(--wm-h) * (1 - var(--wm-b) - var(--wm-c))) / 100% calc(var(--wm-h) * var(--wm-c)) no-repeat,
    linear-gradient(var(--indigo), var(--indigo)) 0 100% / 100% calc(var(--wm-h) * var(--wm-b)) no-repeat, oklch(0.205 0.03 268); }
.wm-pour .sb-group a[aria-current="page"]::after { animation: wm-pour 1050ms var(--ease-out) 420ms both; }
.sb-foot { display: grid; gap: 8px; padding: 14px 8px 0; border-top: 1px solid var(--rule); }
.sb-foot .btn { width: 100%; }
.scrim { display: none; }

/* ── the reading column ───────────────────────────────────────────────────────────────────── */
.doc { min-width: 0; padding-bottom: 72px; }
.doc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.crumb { margin: 0; font-size: 14px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.crumb a { color: var(--ink-2); text-decoration: none; }
.crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.doc-body { max-width: 760px; font-size: 17px; line-height: 1.68; color: var(--ink); }
.doc-body p { margin: 0 0 16px; max-width: 68ch; text-wrap: pretty; }
.doc-body a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.doc-head { margin-bottom: 30px; }
.doc-head h1 { margin: 0 0 18px; font-size: clamp(40px, 4.6vw, 62px); line-height: 1.02; font-weight: 680; font-variation-settings: 'wdth' 112;
  letter-spacing: -0.035em; text-wrap: balance; }
.lede { font-size: 20px; line-height: 1.55; color: var(--ink-2); max-width: 58ch !important; }
.who { font-weight: 640; }
.who.t { color: var(--trader-text); }
.who.b { color: var(--backer-text); }
.doc-body h2 { position: relative; margin: 76px 0 18px; font-size: 30px; line-height: 1.15; font-weight: 660; font-variation-settings: 'wdth' 110; letter-spacing: -0.026em; text-wrap: balance; }
.doc-body section:first-of-type > h2 { margin-top: 56px; }
.doc-body h3 { margin: 30px 0 8px; font-size: 19px; line-height: 1.3; font-weight: 640; letter-spacing: -0.012em; }
.doc-body section { scroll-margin-top: 96px; }
.h-anchor { position: absolute; left: -30px; top: 50%; transform: translate(4px, -50%); width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 6px;
  background: transparent; color: var(--muted); opacity: 0; transition: opacity var(--t-ui) ease, transform var(--t-ui) var(--ease-out); }
.h-anchor svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
@media (hover: hover) and (pointer: fine) { .doc-body h2:hover .h-anchor, .h-anchor:focus-visible { opacity: 1; transform: translate(0, -50%); } .h-anchor:hover { color: var(--ink); background: var(--surface-2); } }
code { font: 500 0.88em/1 ui-monospace, 'SF Mono', Menlo, monospace; padding: 2px 6px; border-radius: 6px; background: var(--surface-2); }
q { quotes: '“' '”'; font-weight: 560; }
.note { font-size: 15px; line-height: 1.6; color: var(--muted); }

/* links that leave the docs are departures: accent, an arrow, a new tab (BRAND 7) */
.doc-body a.out { color: var(--trader-text); font-weight: 560; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.doc-body a.xref { font-weight: 560; color: var(--ink); text-decoration: none; background: linear-gradient(var(--rule-strong), var(--rule-strong)) 0 100% / 100% 1.5px no-repeat,
  linear-gradient(var(--coral), var(--coral)) 0 100% / 0 1.5px no-repeat; transition: background-size 380ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .doc-body a.xref:hover { background-size: 100% 1.5px, 100% 1.5px; } }
.doc-body a.term { color: inherit; text-decoration: underline dotted var(--muted); text-decoration-thickness: 1.5px; text-underline-offset: 4px; cursor: help; }
.doc-body a.term:hover { text-decoration-color: var(--ink-2); }

/* in short */
.in-short { margin: 0 0 8px; padding: 20px 24px 18px; border-radius: var(--r-3); background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); }
.in-short::before { content: 'In short'; display: block; margin-bottom: 10px; font-size: 13px; font-weight: 680; color: var(--muted); }
.in-short ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.in-short li { position: relative; padding-left: 22px; font-size: 16.5px; line-height: 1.55; }
.in-short li::before { content: ''; position: absolute; left: 3px; top: 0.62em; width: 7px; height: 7px; border-radius: 2px; background: var(--ink-2); }
.in-short li:nth-child(1)::before { background: var(--coral); }
.in-short li:nth-child(2)::before { background: var(--indigo); }

/* lists */
.ticks { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 26px; max-width: 68ch; }
.ticks li::before { content: ''; position: absolute; left: 4px; top: 0.58em; width: 9px; height: 5px; border: solid var(--ink-2); border-width: 0 0 1.8px 1.8px; transform: rotate(-45deg); }
.facts { margin: 8px 0 20px; padding: 0; list-style: none; counter-reset: f; border-top: 1px solid var(--rule); }
.facts > li { counter-increment: f; position: relative; padding: 14px 0 14px 44px; border-bottom: 1px solid var(--rule); max-width: 70ch; }
.facts > li::before { content: counter(f); position: absolute; left: 0; top: 16px; font-size: 15px; font-weight: 700; font-variation-settings: 'wdth' 110; color: var(--muted); }
.facts b { font-weight: 640; }
.layers { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 8px; }
.layers li { position: relative; padding-left: 24px; }
.layers li::before { content: ''; position: absolute; left: 0; top: 0.42em; width: 12px; height: 12px; border-radius: 3px; background: var(--rule-strong); }
.layers li:has(.lt)::before { background: var(--coral); }
.layers li:has(.la)::before { background: var(--arlo-fill); }
.layers li:has(.lb)::before { background: var(--indigo); }
.layers li:nth-child(4)::before { background: var(--indigo-soft); }
.layers b { font-weight: 640; }

/* cards */
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.role { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 22px; border-radius: var(--r-4); text-decoration: none; color: var(--ink);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); transition: transform var(--t-state) var(--ease-out), box-shadow var(--t-state) ease; }
.role.t { background: oklch(from var(--coral) l c h / 0.06); box-shadow: inset 0 0 0 1px oklch(from var(--coral) l c h / 0.22); }
.role.b { background: oklch(from var(--indigo) l c h / 0.06); box-shadow: inset 0 0 0 1px oklch(from var(--indigo) l c h / 0.24); }
.role .who { font-size: 14px; }
.role.t .who { color: var(--trader-text); }
.role.b .who { color: var(--backer-text); }
.role-pitch { font-size: 24px; line-height: 1.2; font-weight: 660; font-variation-settings: 'wdth' 108; letter-spacing: -0.02em; }
.role ul { margin: 0; padding: 0 0 0 18px; display: grid; gap: 6px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.role-go { margin-top: auto; padding-top: 8px; font-size: 15px; font-weight: 620; display: inline-flex; gap: 8px; align-items: center; }
.role-go::after { content: '→'; transition: transform var(--t-state) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .role:hover { transform: translateY(-2px); }
  .role.t:hover { box-shadow: inset 0 0 0 1px oklch(from var(--coral) l c h / 0.5), var(--shadow-soft); }
  .role.b:hover { box-shadow: inset 0 0 0 1px oklch(from var(--indigo) l c h / 0.5), var(--shadow-soft); }
  .role:hover .role-go::after { transform: translateX(4px); }
}
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tri, .card-plain { padding: 20px 20px 18px; border-radius: var(--r-3); background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); }
.tri b, .card-plain b { display: block; margin-bottom: 6px; font-size: 16.5px; font-weight: 650; }
.tri p, .card-plain p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.next-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.next-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px; border-radius: var(--r-3); text-decoration: none; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--rule); transition: box-shadow var(--t-ui) ease, transform var(--t-state) var(--ease-out), background-color var(--t-ui) ease; }
.next-card b { font-size: 16px; font-weight: 650; display: flex; justify-content: space-between; gap: 8px; }
.next-card b::after { content: '→'; color: var(--muted); transition: transform var(--t-state) var(--ease-out), color var(--t-ui) ease; }
.next-card span { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .next-card:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule-strong); transform: translateY(-2px); } .next-card:hover b::after { transform: translateX(3px); color: var(--ink); } }

/* the deal sheet */
.deal-sheet { margin: 0 0 18px; padding: 6px 0; border-radius: var(--r-3); background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.deal-sheet > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 22px; border-bottom: 1px solid var(--rule); }
.deal-sheet > div:last-child { border-bottom: 0; }
.deal-sheet dt { color: var(--ink-2); font-size: 15.5px; }
.deal-sheet dd { margin: 0; font-size: 18px; font-weight: 680; white-space: nowrap; }
.deal-sheet.t > div:first-child dd { color: var(--trader-text); }
.deal-sheet.b > div:first-child dd { color: var(--backer-text); }
.defs { margin: 18px 0; display: grid; gap: 12px; }
.defs > div { display: grid; grid-template-columns: 220px 1fr; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.defs dt { font-weight: 640; }
.defs dd { margin: 0; color: var(--ink-2); }

/* can, cannot */
.cando { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cando > div { padding: 20px 22px; border-radius: var(--r-3); box-shadow: inset 0 0 0 1px var(--rule); }
.cando b { display: block; margin-bottom: 10px; font-weight: 660; }
.cando ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; font-size: 15.5px; line-height: 1.5; }
.cando li { position: relative; padding-left: 26px; }
.can li::before { content: ''; position: absolute; left: 3px; top: 0.5em; width: 9px; height: 5px; border: solid var(--gain); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.cannot li::before, .cannot li::after { content: ''; position: absolute; left: 4px; top: 0.72em; width: 11px; height: 2px; border-radius: 1px; background: var(--muted); transform: rotate(45deg); }
.cannot li::after { transform: rotate(-45deg); }

/* what is not promised */
.promise { margin: 56px 0 0; padding: 22px 24px; border-radius: var(--r-3); box-shadow: inset 0 0 0 1.5px var(--ink); }
.promise b { display: block; margin-bottom: 6px; font-size: 18px; font-weight: 680; }
.promise p { margin: 0; }

/* tables */
.table-wrap { overflow-x: auto; margin: 18px 0; border-radius: var(--r-3); box-shadow: inset 0 0 0 1px var(--rule); }
table.grid { width: 100%; border-collapse: collapse; font-size: 15px; }
table.grid th, table.grid td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.grid tr:last-child th, table.grid tr:last-child td { border-bottom: 0; }
table.grid thead th { font-size: 13px; font-weight: 650; color: var(--muted); background: var(--surface); }
table.grid tbody th { font-weight: 620; }
table.num td { text-align: right; }
table.num thead th:not(:first-child) { text-align: right; }

/* the line, drawn as layers (loss room page) */
.ruler { margin: 22px 0 8px; border-radius: var(--r-3); overflow: hidden; box-shadow: inset 0 0 0 1px var(--rule); max-width: 520px; }
.ruler-row { display: flex; justify-content: space-between; padding: 10px 18px; font-size: 15px; border-bottom: 1px solid oklch(from var(--bg) l c h / 0.6); color: var(--on-fill); }
.ruler-row b { font-weight: 650; }
.ruler-row.t { padding: 26px 18px; color: var(--ink);
  background: repeating-linear-gradient(135deg, oklch(from var(--coral) l c h / 0.22) 0 2px, transparent 2px 8px), oklch(from var(--coral) l c h / 0.08); }
.ruler-row.line { padding: 7px 18px; background: var(--bg); color: var(--trader-text); font-weight: 650; box-shadow: inset 0 2px 0 var(--coral); }
.ruler-row.c { background: var(--coral); }
.ruler-row.a { background: var(--arlo-fill); color: var(--ink); }
.ruler-row.bb { background: var(--indigo-soft); }
.ruler-row.b { padding: 34px 18px; background: var(--indigo); border-bottom: 0; }

/* get started: the steps, on a rail that fills as you read */
.steps { position: relative; margin: 8px 0 0; padding: 0; list-style: none; counter-reset: s; }
.steps::before { content: ''; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; border-radius: 2px; background: var(--rule); }
.steps::after { content: ''; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; border-radius: 2px; background: var(--coral);
  transform-origin: 50% 0; transform: scaleY(var(--fill, 0)); transition: transform 500ms var(--ease-out); }
.step { position: relative; counter-increment: s; padding: 0 0 30px 60px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: start; }
.step > * { grid-column: 1; }
.step::before { content: counter(s); position: absolute; left: 0; top: 0; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  font-size: 15px; font-weight: 700; background: var(--bg); color: var(--muted); box-shadow: inset 0 0 0 2px var(--rule-strong);
  transition: background-color var(--t-state) ease, color var(--t-state) ease, box-shadow var(--t-state) ease, transform var(--t-state) var(--ease-out); }
.step.on::before { background: var(--coral); color: var(--on-fill); box-shadow: none; transform: scale(1.06); }
.step.done::before { background: var(--ink); color: var(--bg); box-shadow: none; }
.step h3 { margin: 4px 0 6px !important; }
.step-ui { grid-column: 2; grid-row: 1 / span 4; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-top: 2px; }
.chip { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; background: var(--surface-2); color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--rule); }
.chip.t { background: var(--coral); color: var(--on-fill); box-shadow: none; }
.chip.b { background: var(--indigo); color: var(--on-fill); box-shadow: none; }
.chip.ok { background: oklch(from var(--gain) l c h / 0.14); color: var(--gain); box-shadow: none; }
.step.on .step-ui .chip { animation: chip-in 520ms var(--ease-expo) both; }
.step.on .step-ui .chip:nth-child(2) { animation-delay: 380ms; }
@keyframes chip-in { from { opacity: 0; transform: translateY(6px) scale(0.96); } }

/* the stage bar (the life of an Arlo) */
.stagebar { position: sticky; top: 84px; z-index: 2; display: grid; grid-template-columns: repeat(5, 1fr); margin: 26px 0 8px; padding: 4px; border-radius: var(--r-pill);
  background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--rule), var(--shadow-soft); }
.stagebar a { position: relative; z-index: 1; padding: 9px 4px; text-align: center; font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; border-radius: var(--r-pill);
  transition: color var(--t-state) ease; }
.stagebar a.on { color: var(--on-fill); }
.stagebar .pill { position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: var(--r-pill); background: var(--ink); transition: transform 440ms var(--ease-out), width 440ms var(--ease-out); }

/* details: risks, questions, the method */
.risks, .faqs { display: grid; gap: 10px; }
details.risk, details.qa, details.method { border-radius: var(--r-3); box-shadow: inset 0 0 0 1px var(--rule); background: var(--bg); overflow: hidden;
  transition: box-shadow var(--t-ui) ease, background-color var(--t-ui) ease; }
details[open].risk, details[open].qa, details[open].method { box-shadow: inset 0 0 0 1px var(--rule-strong); background: var(--surface); }
details summary { position: relative; display: block; padding: 16px 52px 16px 20px; cursor: pointer; list-style: none; font-size: 16.5px; font-weight: 620; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: ''; position: absolute; right: 24px; top: 50%; width: 9px; height: 9px; margin-top: -6px; border: solid var(--muted); border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg); transition: transform var(--t-state) var(--ease-out); }
details[open] summary::after { transform: translateY(4px) rotate(-135deg); }
details .det-body { padding: 0 20px 18px; }
details dl { margin: 0; padding: 0 20px 18px; display: grid; gap: 10px; }
details dl > div { display: grid; grid-template-columns: 150px 1fr; gap: 14px; }
details dt { font-size: 14px; font-weight: 640; color: var(--muted); }
details dd { margin: 0; font-size: 15.5px; line-height: 1.55; }
details.qa p { margin: 0; padding: 0 20px 18px; font-size: 16px; color: var(--ink-2); }
details.method ul { margin: 0; padding: 0 20px 18px 40px; display: grid; gap: 8px; font-size: 15.5px; }
details.risk:target, details.qa:target { box-shadow: inset 0 0 0 1.5px var(--coral); }
.faq-filter { position: relative; margin: 0 0 8px; }
.faq-filter input { width: 100%; height: 50px; padding: 0 18px; border: 0; border-radius: var(--r-pill); background: var(--surface); font-size: 16px; box-shadow: inset 0 0 0 1px var(--rule);
  transition: box-shadow var(--t-ui) ease; }
.faq-filter input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.faq-count { margin: 10px 4px 0; font-size: 14px; color: var(--muted); min-height: 1.4em; }
.qa.miss { display: none; }
section.empty { display: none; }

/* glossary */
.g-jump { position: sticky; top: 84px; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 12px; padding: 6px; border-radius: var(--r-3);
  background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--rule); }
.g-jump a { min-width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; font-weight: 640; font-size: 14.5px; text-decoration: none; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .g-jump a:hover { background: var(--surface-2); color: var(--ink); } }
.g-letter { font-size: 22px !important; margin: 36px 0 8px !important; color: var(--muted); }
.g-list { margin: 0; display: grid; }
.g-entry { display: grid; grid-template-columns: 190px 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 150px; }
.g-entry dt { font-weight: 660; }
.g-entry dd { margin: 0; color: var(--ink-2); }
.g-entry:target { animation: g-flash 1600ms var(--ease-out); }
@keyframes g-flash { 0%, 30% { background: oklch(from var(--coral) l c h / 0.12); } 100% { background: transparent; } }

/* the worst day's big numbers */
.stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 8px 0 18px; }
.stat-big { padding: 22px 24px; border-radius: var(--r-3); background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); }
.stat-big > b { display: block; font-size: clamp(44px, 6vw, 64px); line-height: 1; font-weight: 700; font-variation-settings: 'wdth' 112; letter-spacing: -0.035em; color: var(--backer-text); }
.stat-big > span { display: block; margin-top: 8px; font-size: 15.5px; color: var(--ink-2); }

/* the contracts table (filled from the deployment record) */
.contracts:empty { display: none; }

/* ── explainer frames ─────────────────────────────────────────────────────────────────────── */
.ex { margin: 26px 0 26px; }
.ex > figcaption { margin-top: 12px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.ex-frame { position: relative; border-radius: var(--r-4); background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); padding: 24px; overflow: hidden; }
.ex-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.ex-status { min-height: 1.5em; margin: 12px 0 0; font-size: 14.5px; color: var(--ink-2); }
.ex-status b { color: var(--ink); }
.seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: var(--r-pill); background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--rule); }
.seg button { position: relative; z-index: 1; height: 34px; padding: 0 16px; border: 0; background: transparent; border-radius: var(--r-pill); font-size: 14px; font-weight: 600; color: var(--muted);
  transition: color var(--t-state) ease; }
.seg button[aria-pressed="true"] { color: var(--ink); }
.seg .pill { position: absolute; top: 3px; bottom: 3px; left: 3px; border-radius: var(--r-pill); background: var(--bg); box-shadow: 0 1px 2px oklch(0 0 0 / 0.1), inset 0 0 0 1px var(--rule);
  transition: transform 380ms var(--ease-out), width 380ms var(--ease-out); }
.range { display: grid; gap: 8px; }
.range label { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; color: var(--ink-2); }
.range label b { color: var(--ink); font-variant-numeric: tabular-nums; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(var(--ink-2), var(--ink-2)) 0 0 / var(--p, 50%) 100% no-repeat, var(--rule-strong); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--rule-strong); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--ink-2); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: var(--bg);
  box-shadow: 0 1px 3px oklch(0 0 0 / 0.25), inset 0 0 0 2px var(--ink); transition: transform var(--t-press) var(--ease-out); }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--bg); box-shadow: 0 1px 3px oklch(0 0 0 / 0.25), inset 0 0 0 2px var(--ink); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
input[type="range"].t::-webkit-slider-runnable-track { background: linear-gradient(var(--coral), var(--coral)) 0 0 / var(--p, 50%) 100% no-repeat, var(--rule-strong); }
input[type="range"].t::-webkit-slider-thumb { box-shadow: 0 1px 3px oklch(0 0 0 / 0.25), inset 0 0 0 2px var(--coral); }
input[type="range"].b::-webkit-slider-runnable-track { background: linear-gradient(var(--indigo), var(--indigo)) 0 0 / var(--p, 50%) 100% no-repeat, var(--rule-strong); }
input[type="range"].b::-webkit-slider-thumb { box-shadow: 0 1px 3px oklch(0 0 0 / 0.25), inset 0 0 0 2px var(--indigo); }
.shake { animation: shake 420ms var(--ease-out); }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.hatch { background: repeating-linear-gradient(135deg, oklch(from var(--coral) l c h / 0.28) 0 2px, transparent 2px 7px); }

/* ── the scroll story (overview) ──────────────────────────────────────────────────────────── */
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; margin: 22px 0 8px; }
.story-stage { grid-column: 2; grid-row: 1; }
.story-sticky { position: sticky; top: 104px; height: min(560px, calc(100dvh - 140px)); border-radius: var(--r-4); background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.story-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.story-tags { position: absolute; inset: 0; pointer-events: none; }
.vtag { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: 13px; line-height: 1.2; white-space: nowrap;
  transition: opacity 320ms ease; will-change: transform; }
.vtag .n { color: var(--muted); font-weight: 560; }
.vtag .v { font-size: 15.5px; font-weight: 700; }
.vtag.trader .v { color: var(--trader-text); }
.vtag.backer .v { color: var(--backer-text); }
.vtag.room .v, .vtag.line .v { color: var(--trader-text); }
/* the Arlo card's labels: tags on leader lines beside it, or a legend under it. Sizes as the landing's card (proto-d.css). */
.vtag.r { align-items: flex-start; text-align: left; }
.vtag.sm .v, .legend .li.sm .v { font-size: 13px; font-weight: 560; letter-spacing: 0.01em; }
.vtag.recv, .legend .li.recv { flex-direction: column-reverse; }      /* the payout's receipt reads "$2,120, to the Backer" */
.leads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.leads path { fill: none; stroke: var(--rule-strong); stroke-width: 1; }
.leads path.br { stroke: var(--ink-2); stroke-width: 1.2; }
.legend { position: absolute; display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 10px 16px; }
.legend .li { position: relative; display: flex; flex-direction: column; gap: 1px; min-width: 0; min-height: 36px; padding-left: 18px; transition: opacity var(--t-state) ease; }
.legend .li::before { content: ''; position: absolute; left: 0; top: 3px; width: 10px; height: 10px; border-radius: 3px; background: var(--sw, transparent); }
.legend .li .n { font-size: 13px; font-weight: 560; line-height: 1.2; color: var(--muted); }
.legend .li .v { font-size: 15.5px; font-weight: 700; line-height: 1.2; color: var(--ink); }
.legend .li.trader .v { color: var(--trader-text); }
.legend .li.backer .v { color: var(--backer-text); }
.legend .li[data-sw="coral"] { --sw: var(--coral); } .legend .li[data-sw="indigo"] { --sw: var(--indigo); }
.legend .li[data-sw="soft"] { --sw: var(--indigo-soft); } .legend .li[data-sw="arlo"] { --sw: var(--arlo-fill); }
.legend .li[data-sw="hatch"]::before { background: repeating-linear-gradient(135deg, var(--coral) 0 2px, oklch(from var(--coral) l c h / 0.22) 2px 4px); }
.legend .li[data-sw="stop"]::before { top: 8px; height: 0; border-radius: 0; background: none; border-top: 2px dashed var(--ink); }
/* the card's print is white and its body a fixed finish, the same in both themes (a printed card does not change colour with the page) */
:root { --card-print: oklch(1 0 0); }
.cprint { position: absolute; inset: 0; pointer-events: none; }
.cprint svg { position: absolute; display: block; overflow: visible; text-rendering: geometricPrecision; }
.cprint .print { fill: var(--card-print); }
.cprint .pl { fill: none; stroke: var(--card-print); stroke-width: 3; }
.cprint .wm { font: 760 40px var(--font); font-variation-settings: 'wdth' 122; letter-spacing: -0.045em; }
.cprint .prod { font: 600 28px var(--font); font-variation-settings: 'wdth' 106; letter-spacing: 0.04em; }
.cprint .pan { font: 600 44px var(--font); font-variation-settings: 'wdth' 108; letter-spacing: 0.03em; }
.cprint .exp-k { font: 640 14px var(--font); letter-spacing: 0.18em; }
.cprint .exp { font: 640 26px var(--font); letter-spacing: 0.1em; }
.cprint .holder { font: 640 19px var(--font); letter-spacing: 0.16em; }
.cprint .cur { font: 640 26px var(--font); letter-spacing: 0.14em; }
.cprint .net { font: 800 46px var(--font); font-variation-settings: 'wdth' 118; letter-spacing: -0.01em; }
.cprint .net-k { font: 560 17px var(--font); letter-spacing: 0.04em; }
.story-badge { position: absolute; left: 50%; bottom: 18px; transform: translate(-50%, 8px); margin: 0; padding: 7px 14px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 640;
  background: var(--ink); color: var(--bg); opacity: 0; transition: opacity 280ms ease, transform 420ms var(--ease-out); white-space: nowrap; }
.story-badge.on { opacity: 1; transform: translate(-50%, 0); }
.story-badge.stop { background: var(--loss); color: var(--on-fill); }
.story-steps { grid-column: 1; grid-row: 1; margin: 0; padding: 0; list-style: none; }
.story-steps li { min-height: 62vh; padding: 18vh 0 0; opacity: 0.32; transition: opacity 420ms ease; }
.story-steps li:first-child { padding-top: 6vh; }
.story-steps li:last-child { min-height: 52vh; }
.story-steps li.on { opacity: 1; }
.story-steps h3 { margin-top: 0 !important; font-size: 24px !important; font-variation-settings: 'wdth' 108; }
.story-steps li::before { content: attr(data-n); display: block; margin-bottom: 10px; font-size: 13px; font-weight: 700; color: var(--muted); }
.lock-ring { position: absolute; pointer-events: none; border-radius: 40px; box-shadow: 0 0 0 2px var(--ink-2); opacity: 0; transition: opacity 420ms ease, transform 620ms var(--ease-expo); transform: scale(1.06); }
.lock-ring.on { opacity: 0.55; transform: scale(1); }
.lock-ring i { position: absolute; padding: 4px 10px; border-radius: var(--r-pill); background: var(--bg); color: var(--ink-2); font-size: 12px; font-style: normal; font-weight: 640;
  box-shadow: inset 0 0 0 1px var(--rule-strong); white-space: nowrap; }

/* ── the queue ────────────────────────────────────────────────────────────────────────────── */
.q-wrap { display: grid; grid-template-columns: 1fr 200px; gap: 20px; align-items: stretch; }
.q-lanes { display: grid; gap: 14px; }
.q-lane { position: relative; height: 64px; border-radius: 18px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--rule); }
.q-lane > span { position: absolute; left: 14px; top: 8px; font-size: 12.5px; font-weight: 640; color: var(--muted); }
.q-tok { position: absolute; top: 26px; left: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: var(--on-fill);
  will-change: transform; }
.q-tok.t { background: var(--coral); }
.q-tok.b { background: var(--indigo); }
.q-tok.you { box-shadow: 0 0 0 2.5px var(--bg), 0 0 0 4.5px var(--ink); }
.q-started { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 18px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--rule); min-height: 142px; }
.q-started > span { font-size: 12.5px; font-weight: 640; color: var(--muted); }
.q-arlo { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; }
.q-arlo i { flex: none; width: 16px; height: 22px; border-radius: 4px 4px 5px 5px; background: linear-gradient(var(--coral), var(--coral)) 0 0 / 100% 34% no-repeat, var(--indigo); }
.q-arlo .you { color: var(--ink); font-weight: 700; }
.q-meter { display: flex; gap: 6px; align-items: center; font-size: 13.5px; color: var(--ink-2); }
.q-meter i { width: 22px; height: 8px; border-radius: 4px; background: var(--rule-strong); transition: background-color 280ms ease; }
.q-meter i.w { background: var(--ink-2); }
.q-meter i.r { background: var(--ink); }

/* ── three endings ────────────────────────────────────────────────────────────────────────── */
.en-svg { display: block; width: 100%; height: auto; overflow: visible; }
.en-svg .path { fill: none; stroke: var(--rule-strong); stroke-width: 2; transition: stroke var(--t-state) ease, opacity var(--t-state) ease; }
.en-svg .path.on { stroke: var(--ink); stroke-width: 2.5; }
.en-svg .node rect { fill: var(--bg); stroke: var(--rule-strong); stroke-width: 1; transition: stroke var(--t-state) ease, fill var(--t-state) ease; }
.en-svg .node text { font: 600 13.5px var(--font); fill: var(--ink); }
.en-svg .node.on rect { stroke: var(--ink); }
.en-svg .node.end rect { fill: var(--ink); stroke: var(--ink); }
.en-svg .node.end text { fill: var(--bg); }
.en-svg .node.stop.on rect { stroke: var(--loss); }
.en-svg .dot { fill: var(--coral); }

/* ── the loss room builder ────────────────────────────────────────────────────────────────── */
.rm-bar { position: relative; height: 56px; border-radius: 14px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.rm-bar .free { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, oklch(from var(--coral) l c h / 0.14) 0 2px, transparent 2px 8px); }
.rm-seg { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; transform-origin: 0 50%; will-change: transform; transition: transform 520ms var(--ease-out), background-color 280ms ease; }
.rm-seg.k0 { background: var(--coral); }
.rm-seg.k1 { background: oklch(from var(--coral) calc(l + 0.08) c h); }
.rm-seg.k2 { background: oklch(from var(--coral) calc(l - 0.07) c h); }
.rm-seg.k3 { background: oklch(from var(--coral) calc(l + 0.15) calc(c * 0.8) h); }
.rm-seg.over { background: var(--loss); }
.rm-seg + .rm-seg { box-shadow: inset 2px 0 0 var(--surface); }
.rm-scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; color: var(--muted); }
.rm-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.rm-head b { font-size: 15px; }
.rm-head .left { font-size: 22px; font-weight: 700; }
.rm-trades { display: grid; gap: 8px; margin-top: 16px; }
.rm-trade { display: grid; grid-template-columns: 12px 1fr minmax(120px, 190px) 84px 32px; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--rule); font-size: 14px; }
.rm-trade .sw { width: 12px; height: 12px; border-radius: 3px; }
.rm-trade .sw.k0 { background: var(--coral); }
.rm-trade .sw.k1 { background: oklch(from var(--coral) calc(l + 0.08) c h); }
.rm-trade .sw.k2 { background: oklch(from var(--coral) calc(l - 0.07) c h); }
.rm-trade .sw.k3 { background: oklch(from var(--coral) calc(l + 0.15) calc(c * 0.8) h); }
.rm-trade .what b { display: block; font-size: 14.5px; }
.rm-trade .what span { color: var(--muted); font-size: 13px; }
.rm-trade .chg { text-align: right; font-weight: 700; }
.rm-trade .x { width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 16px; }
.rm-trade .x:hover { background: var(--surface-2); color: var(--ink); }
.rm-trade input[type="range"] { height: 22px; }
.rm-trade .nostop { font-size: 13px; color: var(--muted); }
.rm-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.rm-add button { height: 36px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: var(--bg); box-shadow: inset 0 0 0 1px var(--rule-strong); font-size: 13.5px; font-weight: 600;
  transition: transform var(--t-press) var(--ease-out), box-shadow var(--t-ui) ease; }
.rm-add button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .rm-add button:hover { box-shadow: inset 0 0 0 1px var(--ink-2); } }

/* ── drift ────────────────────────────────────────────────────────────────────────────────── */
.dr-wrap { display: grid; grid-template-columns: 1fr 200px; gap: 22px; align-items: stretch; }
.dr-chart { display: block; width: 100%; height: 240px; }
.dr-chart .price { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.dr-chart .stopl { stroke: var(--loss); stroke-width: 1.5; stroke-dasharray: 5 5; }
.dr-chart .entry { stroke: var(--rule-strong); stroke-width: 1; }
.dr-chart text { font: 600 12px var(--font); fill: var(--muted); }
.dr-chart .stoplab { fill: var(--loss); }
.dr-chart .head { fill: var(--ink); }
.dr-col { position: relative; min-height: 240px; border-radius: 16px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.dr-col .blk { position: absolute; left: 0; right: 0; will-change: transform; }
.dr-col .counted { background: oklch(from var(--coral) l c h / 0.42); }
.dr-col .left { background: repeating-linear-gradient(135deg, oklch(from var(--coral) l c h / 0.3) 0 2px, transparent 2px 7px); }
.dr-col .owed { background: var(--indigo); }
.dr-col .tick { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--coral); }
.dr-col .tick.wall { border-top-color: var(--ink); }
.dr-col label { position: absolute; right: 8px; z-index: 1; font-size: 11.5px; font-weight: 650; color: var(--ink); background: var(--bg); padding: 1px 6px; border-radius: 6px; transform: translateY(-50%); white-space: nowrap; }
.dr-col .l1 { left: 8px; right: auto; }
.dr-col .in { background: transparent; color: var(--on-fill); font-weight: 600; right: auto; left: 50%; transform: translate(-50%, -50%); }
.dr-col .in.room { color: var(--trader-text); }
.dr-read { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.dr-read div { padding: 10px 12px; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--rule); }
.dr-read span { display: block; font-size: 12.5px; color: var(--muted); }
.dr-read b { font-size: 18px; }
.dr-read .keep b { color: var(--trader-text); }

/* ── the payout, poured in order ──────────────────────────────────────────────────────────── */
/* the Arlo card holds the wallet at the end; each person's amount sits under it, with the colour of their layer on the card */
.wf-card { position: relative; width: min(100%, 400px); aspect-ratio: 856 / 540; margin: 6px auto 30px; }
.wf-cv { position: absolute; left: -24px; top: -24px; width: calc(100% + 48px); height: calc(100% + 24px + 48px); }
.wf-cv canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.wf-cups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }
.wf-cup { position: relative; display: grid; gap: 6px; padding-top: 12px; text-align: center; }
.wf-cup::before { content: ''; position: absolute; left: 50%; top: 0; width: 26px; height: 4px; margin-left: -13px; border-radius: 2px; background: var(--sw, transparent); }
.wf-cup.cap { --sw: var(--indigo); } .wf-cup.bonus { --sw: var(--indigo-soft); } .wf-cup.arlo { --sw: var(--arlo-fill); } .wf-cup.trader { --sw: var(--coral); }
.wf-cup .full { min-height: 1.2em; font-weight: 650; opacity: 0; transition: opacity 280ms ease; }
.wf-cup.done .full { opacity: 1; }
.wf-cup b { font-size: 18px; }
.wf-cup span { font-size: 13px; color: var(--muted); }
.wf-cup.short b { color: var(--loss); }
.wf-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: end; margin-bottom: 18px; }
.wf-row .range label b { font-size: 20px; }
.wf-marks { position: relative; height: 22px; margin: -8px 12px 18px; }
.wf-marks i { position: absolute; top: 0; transform: translateX(-50%); font-size: 11px; font-style: normal; color: var(--muted); white-space: nowrap; }
.wf-marks i::before { content: ''; display: block; width: 1px; height: 6px; margin: 0 auto 2px; background: var(--rule-strong); }
.wf-slip { margin-top: 14px; padding: 12px 14px; border-radius: 14px; font-size: 14.5px; background: oklch(from var(--coral) l c h / 0.1); color: var(--ink); }
.wf-trader-note { margin-top: 14px; font-size: 15px; }

.pour { position: absolute; width: 6px; border-radius: 3px; background: var(--indigo); pointer-events: none; transform-origin: 50% 0; }

/* ── the receipt ──────────────────────────────────────────────────────────────────────────── */
.rc-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 22px; }
.rc { padding: 18px 20px; border-radius: 18px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--rule); font-size: 14.5px; }
.rc-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 8px; margin: 0 -8px; border-radius: 8px; transition: background-color 200ms ease, opacity 200ms ease; }
.rc-row b { font-weight: 640; white-space: nowrap; }
.rc-row.sub { padding-left: 22px; color: var(--muted); font-size: 13.5px; }
.rc-row.rule { margin-top: 6px; border-top: 1px solid var(--rule); border-radius: 0; padding-top: 10px; }
.rc-row.total b { font-size: 16px; }
.rc-row.pos b { color: var(--gain); }
.rc-row.neg b { color: var(--loss); }
.rc.hl .rc-row { opacity: 0.38; }
.rc.hl .rc-row.lit { opacity: 1; background: oklch(from var(--coral) l c h / 0.1); }
.rc-why { padding: 16px; border-radius: 18px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--rule); font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.rc-why b { display: block; margin-bottom: 6px; color: var(--ink); font-size: 14.5px; }
.rc-why .eq { display: block; margin-top: 10px; font-weight: 600; color: var(--ink); }

/* ── the leverage wall ────────────────────────────────────────────────────────────────────── */
.wl-track { position: relative; height: 54px; margin-top: 14px; border-radius: 14px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.wl-used { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: 0 50%; background: oklch(from var(--coral) l c h / 0.26); transition: transform 460ms var(--ease-out); }
.wl-wall { position: absolute; top: 0; bottom: 0; left: 0; right: 0; transform-origin: 100% 50%; background: repeating-linear-gradient(135deg, oklch(from var(--ink) l c h / 0.2) 0 2px, transparent 2px 7px);
  box-shadow: inset 2px 0 0 var(--ink); transition: transform 460ms var(--ease-out); }
.wl-thumb { position: absolute; top: 50%; left: 0; width: 4px; height: 34px; margin: -17px 0 0 -2px; border-radius: 2px; background: var(--coral); transition: transform 460ms var(--ease-out); }
.wl-ticks { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--muted); }
.wl-out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.wl-out div { padding: 10px 12px; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--rule); }
.wl-out span { display: block; font-size: 12.5px; color: var(--muted); }
.wl-out b { font-size: 18px; }
.wl-size { position: relative; height: 10px; margin-top: 8px; border-radius: 5px; background: var(--rule); overflow: hidden; }
.wl-size i { position: absolute; inset: 0; transform-origin: 0 50%; background: var(--ink); transition: transform 460ms var(--ease-out); }

/* ── what stands in front of the Backer ───────────────────────────────────────────────────── */
.st-wrap { display: grid; grid-template-columns: 220px 1fr; gap: 26px; align-items: center; }
.st-col { position: relative; height: 380px; border-radius: 16px 16px 24px 24px; overflow: hidden; box-shadow: inset 0 0 0 1.5px var(--rule-strong); }
.st-l { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 650; color: var(--on-fill); }
.st-l.room { background: repeating-linear-gradient(135deg, oklch(from var(--coral) l c h / 0.5) 0 2px, oklch(from var(--coral) l c h / 0.18) 2px 8px); color: var(--ink); }
.st-l.cush { background: var(--coral); }
.st-l.arlo { background: var(--arlo-fill); color: var(--ink); }
.st-l.bonus { background: var(--indigo-soft); }
.st-l.cap { background: var(--indigo); }
.st-gone { position: absolute; left: 0; right: 0; top: 0; height: 100%; transform-origin: 50% 0; transform: scaleY(0); background: oklch(from var(--bg) l c h / 0.8); will-change: transform; transition: transform 160ms var(--ease-out); }
.st-gone::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--loss); }
.st-linemark { position: absolute; left: -6px; right: -6px; height: 0; border-top: 2px dashed var(--ink); }
.st-read > b { display: block; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.st-read p { margin: 6px 0 0; color: var(--ink-2); }
.st-read .who-pays { margin-top: 14px; font-size: 15.5px; }

/* ── four ways money moves ────────────────────────────────────────────────────────────────── */
.do-svg { display: block; width: 100%; height: auto; overflow: visible; }
.do-svg .route { fill: none; stroke: var(--rule-strong); stroke-width: 2; }
.do-svg .route.out { stroke-dasharray: 0; }
.do-svg .node rect { fill: var(--bg); stroke: var(--rule-strong); }
.do-svg .node text { font: 600 13px var(--font); fill: var(--ink); }
.do-svg .node .sub { font-weight: 500; font-size: 11.5px; fill: var(--muted); }
.do-svg .node.wallet rect { fill: var(--ink); stroke: var(--ink); }
.do-svg .node.wallet text { fill: var(--bg); }
.do-svg .node.wallet .sub { fill: oklch(from var(--bg) l c h / 0.7); }
.do-svg .node.nope rect { stroke-dasharray: 4 4; }
.do-svg .node.nope text { fill: var(--muted); }
.do-svg .guard { fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 3 5; transition: stroke 200ms ease; }
.do-svg .guard.hit { stroke: var(--loss); stroke-width: 3; stroke-dasharray: 0; }
.do-svg .coin { fill: var(--coral); }
.do-svg .coin.b { fill: var(--indigo); }
.do-svg .coin.a { fill: var(--arlo-fill); }
.do-svg .coin.bad { fill: var(--loss); }

/* ── who can do what ──────────────────────────────────────────────────────────────────────── */
.mx { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; }
.mx th, .mx td { padding: 11px 10px; border-bottom: 1px solid var(--rule); text-align: center; }
.mx tbody th { text-align: left; font-weight: 560; color: var(--ink); }
.mx thead th { padding: 0 4px 10px; border-bottom: 1px solid var(--rule-strong); }
.mx thead button { height: 32px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: transparent; font-size: 13.5px; font-weight: 650; color: var(--ink-2);
  transition: background-color var(--t-ui) ease, color var(--t-ui) ease; }
.mx thead button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
:is(.mx, .mx-list) .y, :is(.mx, .mx-list) .n { display: inline-grid; flex: none; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
:is(.mx, .mx-list) .y { background: oklch(from var(--gain) l c h / 0.16); color: var(--gain); }
:is(.mx, .mx-list) .n { background: var(--surface-2); color: var(--muted); }
:is(.mx, .mx-list) .y::before { content: ''; width: 9px; height: 5px; border: solid currentColor; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
:is(.mx, .mx-list) .n::before { content: ''; width: 9px; height: 2px; border-radius: 1px; background: currentColor; }
.mx td, .mx th { transition: opacity 260ms ease; }
.mx.focus td:not(.lit), .mx.focus thead th:not(.lit):not(:first-child) { opacity: 0.28; }
.mx-note { margin-top: 12px; font-size: 14px; color: var(--muted); }

/* ── the worst day: the price, and the population ─────────────────────────────────────────── */
.pp-svg { display: block; width: 100%; height: 300px; touch-action: pan-y; }
.pp-svg .area { fill: oklch(from var(--indigo) l c h / 0.10); }
.pp-svg .line { fill: none; stroke: var(--indigo); stroke-width: 2; stroke-linejoin: round; }
.pp-svg .wick { fill: none; stroke: oklch(from var(--indigo) l c h / 0.35); stroke-width: 1; }
.pp-svg .grid { stroke: var(--rule); stroke-width: 1; }
.pp-svg text { font: 500 11.5px var(--font); fill: var(--muted); }
.pp-svg .drop { fill: oklch(from var(--loss) l c h / 0.14); }
.pp-svg .droplab { fill: var(--loss); font-weight: 650; }
.pp-svg .cross { stroke: var(--ink-2); stroke-width: 1; }
.pp-svg .pt { fill: var(--bg); stroke: var(--indigo); stroke-width: 2.5; }
.pp-tip { position: absolute; padding: 6px 10px; border-radius: 10px; background: var(--ink); color: var(--bg); font-size: 12.5px; font-weight: 600; pointer-events: none;
  transform: translate(-50%, -130%); white-space: nowrap; }
.po-canvas { display: block; width: 100%; }
.po-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; font-size: 13.5px; color: var(--ink-2); }
.po-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
.po-legend b { font-weight: 650; }
.po-tip { position: absolute; padding: 8px 12px; border-radius: 12px; background: var(--ink); color: var(--bg); font-size: 12.5px; line-height: 1.45; pointer-events: none; white-space: nowrap;
  transform: translate(-50%, -110%); }

/* ── the fee, split; money in and out ─────────────────────────────────────────────────────── */
.sp-bar { display: flex; height: 64px; border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--rule); }
.sp-bar > div { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 0 16px; color: var(--on-fill); font-size: 13px; transform-origin: 0 50%; }
.sp-bar b { font-size: 18px; }
.sp-bar .bonus { background: var(--indigo); }
.sp-bar .cut { background: var(--arlo-fill); color: var(--ink); min-width: 120px; }
.fl-svg { display: block; width: 100%; height: auto; overflow: visible; }
.fl-svg .band { opacity: 0.85; transition: d 600ms var(--ease-out); }
.fl-svg text { font: 600 12.5px var(--font); fill: var(--ink); }
.fl-svg .sub { font-weight: 500; fill: var(--muted); }
.fl-svg .bar { rx: 4; }
.fl-svg .spark { fill: oklch(1 0 0 / 0.75); }

/* ── rail: the tier chip and the page outline ─────────────────────────────────────────────── */
.rail { position: sticky; top: 96px; align-self: start; max-height: calc(100dvh - 112px); overflow: auto; padding-bottom: 24px; scrollbar-width: none; }
.tierchip { display: inline-flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule);
  font-size: 13.5px; color: var(--ink-2); }
.tierchip b, .tierchip span[data-fig] { color: var(--ink); font-weight: 640; }
.tierchip button { height: 30px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: var(--bg); box-shadow: inset 0 0 0 1px var(--rule-strong); font-size: 13px; font-weight: 640;
  transition: transform var(--t-press) var(--ease-out); }
.tierchip button:active { transform: scale(0.96); }
.tierchip.soon { background: oklch(from var(--coral) l c h / 0.08); }
.toc { position: relative; padding-left: 14px; }
.toc::before { content: ''; position: absolute; left: 0; top: 30px; bottom: 0; width: 1.5px; background: var(--rule); }
.toc-label { margin: 0 0 10px; font-size: 12.5px; font-weight: 680; color: var(--muted); }
.toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.toc a { display: block; padding: 5px 0; font-size: 13.5px; line-height: 1.4; color: var(--muted); text-decoration: none; transition: color var(--t-ui) ease; }
.toc a:hover { color: var(--ink); }
.toc a.on { color: var(--ink); font-weight: 600; }
.toc-mark { position: absolute; left: 0; top: 0; width: 1.5px; height: 20px; background: var(--ink); transform: translateY(var(--y, 0px)); opacity: 0;
  transition: transform 420ms var(--ease-out), height 420ms var(--ease-out), opacity 200ms ease; }
.toc-mark.on { opacity: 1; }

/* the pager */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 760px; margin-top: 64px; }
.pg { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: var(--r-3); text-decoration: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule);
  transition: box-shadow var(--t-ui) ease, background-color var(--t-ui) ease; }
.pg span { font-size: 13px; color: var(--muted); }
.pg b { font-size: 16px; font-weight: 640; }
.pg.next { text-align: right; grid-column: 2; }
.pg.prev b::before { content: '← '; color: var(--muted); }
.pg.next b::after { content: ' →'; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .pg:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule-strong); } }

/* try it, and the foot */
.tryit { margin: 24px auto 0; max-width: 1360px; padding: 0 28px; }
.tryit-in { padding: 64px 32px; border-radius: 36px; text-align: center; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); }
.tryit h2 { margin: 0 0 10px; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.05; font-weight: 680; font-variation-settings: 'wdth' 112; letter-spacing: -0.03em; text-wrap: balance; }
.tryit p { margin: 0 0 24px; color: var(--ink-2); font-size: 17px; }
.tryit-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.tryit-cta .btn { height: 52px; padding: 0 24px; font-size: 16px; }
.foot { max-width: 1360px; margin: 0 auto; padding: 32px 28px 48px; display: grid; grid-template-columns: 1fr 1fr auto; gap: 32px; align-items: end; font-size: 14px; line-height: 1.6; color: var(--muted); }
.foot p { margin: 0; max-width: 56ch; }
.foot b { color: var(--ink); font-weight: 600; }
.foot-mark { font-size: 28px; color: var(--ink-2); }

/* ── overlays: search, the tier picker, a term's meaning, a toast ─────────────────────────── */
.search { position: fixed; inset: 0; z-index: var(--z-dialog); display: grid; justify-items: center; align-items: start; padding: 12vh 16px 16px;
  background: oklch(from var(--ink) l c h / 0.32); }   /* a scrim, not a full-screen blur: the blur cost frames (DESIGN.md) */
.search-box { width: min(640px, 100%); border-radius: 24px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--rule-strong), 0 30px 80px -20px oklch(0 0 0 / 0.45); overflow: hidden; }
.search-field { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 60px; border-bottom: 1px solid var(--rule); color: var(--muted); }
.search-field input { flex: 1; height: 100%; border: 0; background: transparent; font-size: 17px; outline: none; color: var(--ink); }
.search-list { list-style: none; margin: 0; padding: 8px; max-height: min(56vh, 480px); overflow: auto; }
.search-list li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; cursor: pointer; }
.search-list li[aria-selected="true"] { background: var(--surface-2); }
.search-list .r-kind { font-size: 11.5px; font-weight: 680; color: var(--muted); }
.search-list .r-title { font-size: 15.5px; font-weight: 620; color: var(--ink); }
.search-list .r-sub { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.search-list mark { background: oklch(from var(--coral) l c h / 0.22); color: inherit; border-radius: 3px; padding: 0 1px; }
.search-list .r-none { cursor: default; color: var(--muted); }
.search-foot { display: flex; gap: 18px; margin: 0; padding: 10px 18px; border-top: 1px solid var(--rule); font-size: 12.5px; color: var(--muted); }
.search-foot kbd { margin-right: 3px; }
.tierpop { position: fixed; z-index: var(--z-popover); width: 300px; padding: 8px; border-radius: 20px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--rule-strong), var(--shadow-soft); }
.tierpop p { margin: 6px 10px 8px; font-size: 12.5px; font-weight: 680; color: var(--muted); }
.tierpop button { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: transparent; text-align: left; }
.tierpop button:hover { background: var(--surface); }
.tierpop button[aria-pressed="true"] { background: var(--surface-2); }
.tierpop button b { font-size: 14.5px; font-weight: 650; }
.tierpop button small { grid-column: 1; font-size: 12.5px; color: var(--muted); }
.tierpop button em { grid-row: 1 / 3; grid-column: 2; align-self: center; font-style: normal; font-size: 12px; font-weight: 650; color: var(--muted); }
.tierpop button.soon b { color: var(--muted); }
.hovercard { position: fixed; z-index: var(--z-popover); width: min(320px, calc(100vw - 32px)); padding: 14px 16px; border-radius: 16px; background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--rule-strong), 0 18px 48px -16px oklch(0 0 0 / 0.35); font-size: 14.5px; line-height: 1.55; pointer-events: auto; }
.hovercard b { display: block; margin-bottom: 4px; font-size: 15px; }
.hovercard p { margin: 0; color: var(--ink-2); }
.hovercard a { display: inline-block; margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.toast { position: fixed; z-index: var(--z-toast); left: 50%; bottom: 24px; transform: translateX(-50%); padding: 10px 16px; border-radius: var(--r-pill); background: var(--ink); color: var(--bg);
  font-size: 14px; font-weight: 600; }
.pop-in { animation: pop-in 200ms var(--ease-out) both; }
.pop-out { animation: pop-out 140ms ease-in both; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(0.97); } }
@keyframes pop-out { to { opacity: 0; transform: translateY(-4px) scale(0.98); } }
.search.pop-in, .search.pop-out { animation-name: fade-in; }
.search.pop-out { animation-name: fade-out; }
.search.pop-in .search-box { animation: pop-in 220ms var(--ease-out) both; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

/* arrival: the title rises out of a mask, the rest settles (content is visible without it) */
.doc-head h1, .doc-head .lede, .in-short { animation: rise 900ms var(--ease-expo) both; }
.doc-head .lede { animation-delay: 90ms; }
.in-short { animation-delay: 170ms; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); filter: blur(3px); } }

/* ── widths ───────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1240px) {
  .docs-grid { grid-template-columns: 232px minmax(0, 1fr); gap: 44px; }
  .rail { display: none; }
}
@media (min-width: 1241px) { .doc-top .tierchip { display: none; } }
@media (max-width: 1240px) and (min-width: 961px) { .rail { display: none; } }
@media (min-width: 1241px) { .rail .tierchip { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 26px; padding: 12px 14px; border-radius: 18px; } .rail .tierchip > span { line-height: 1.45; } }
@media (max-width: 960px) {
  .docs-grid { grid-template-columns: minmax(0, 1fr); padding: 92px 20px 0; }
  .menu-btn { display: grid; }
  .btn-nav { display: none; }
  .search-btn { width: auto; margin-left: auto; }
  .dnav-sp { display: none; }
  .sidebar { position: fixed; z-index: calc(var(--z-overlay) + 1); top: 0; left: 0; bottom: 0; width: min(330px, 86vw); max-height: none; padding: 84px 16px 24px; background: var(--bg);
    box-shadow: inset -1px 0 0 var(--rule), 20px 0 60px -30px oklch(0 0 0 / 0.5); transform: translateX(-104%); transition: transform 360ms var(--ease-drawer); }
  .sidebar.open { transform: none; }
  .scrim { display: block; position: fixed; inset: 0; z-index: var(--z-overlay); background: oklch(0 0 0 / 0.36); opacity: 0; transition: opacity 300ms ease; }
  .scrim.on { opacity: 1; }
  .scrim[hidden] { display: none; }
  .story { grid-template-columns: 1fr; gap: 0; }
  .story-stage { grid-column: 1; grid-row: 1; position: sticky; top: 76px; z-index: 1; height: 44dvh; }
  .story-sticky { position: relative; top: 0; height: 100%; }
  .story-steps { grid-row: 2; }
  .story-steps li { min-height: 46vh; padding-top: 6vh; }
  .story-steps li { background: linear-gradient(var(--bg) 70%, transparent); }
}
@media (max-width: 760px) {
  .dnav { height: 52px; top: 10px; padding-left: 16px; }
  .dnav-docs { display: none; }
  .search-btn span, .search-btn kbd { display: none; }
  .search-btn { width: 40px; height: 40px; padding: 0; justify-content: center; margin-left: auto; background: transparent; box-shadow: none; }
  .doc-body { font-size: 16.5px; }
  .doc-head h1 { font-size: clamp(36px, 10.4vw, 46px); }
  .lede { font-size: 18px; }
  .doc-body h2 { font-size: 25px; margin-top: 56px; }
  .h-anchor { display: none; }
  .roles, .trio, .cards2, .cando, .next-grid, .stats-row { grid-template-columns: 1fr; }
  .defs > div, details dl > div, .g-entry { grid-template-columns: 1fr; gap: 4px; }
  .step { grid-template-columns: minmax(0, 1fr); }
  .step-ui { grid-column: 1; grid-row: auto; flex-direction: row; align-items: center; margin: 0 0 10px; order: -1; }
  .q-wrap, .dr-wrap, .rc-wrap, .st-wrap { grid-template-columns: 1fr; }
  .st-col { height: 300px; }
  .wf-cups { gap: 8px; }
  .wf-cup span:not(.full) { min-height: calc(2 * 1.68em); }                 /* a long name wraps to two lines: the badges under the names stay level */
  .wf-cup b { font-size: 15px; }
  .rm-trade { grid-template-columns: 12px 1fr 74px 30px; }
  .rm-trade .ctl { grid-column: 2 / 5; grid-row: 2; }
  .ex-frame { padding: 18px; border-radius: 22px; }
  .tryit { padding: 0 12px; }
  .tryit-in { padding: 44px 20px; border-radius: 28px; }
  .foot { grid-template-columns: 1fr; padding: 28px 20px 40px; }
  .pager { grid-template-columns: 1fr; }
  .pg.next { grid-column: 1; }
  .stagebar { top: 70px; }
  .stagebar a { font-size: 12.5px; padding: 8px 2px; }
  .dr-read, .wl-out { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .dr-read b, .wl-out b { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .wm-pour .dnav .wordmark::before, .wm-ready .dnav a.wordmark:hover::before, .wm-pour .sb-group a[aria-current="page"]::after { animation: none; }
  .doc-head h1, .doc-head .lede, .in-short { animation: none; }
  .story-steps li { opacity: 1; }
}

/* who can do what, on a phone: pick a person, read the list */
.mx-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 0; }
.mx-list li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 2px; border-bottom: 1px solid var(--rule); font-size: 15px; }
.mx-list li .y, .mx-list li .n { flex: none; }
.mx-list li.yes { color: var(--ink); font-weight: 560; }
.mx-list li.no { color: var(--muted); }