/* PayTP — paytp.org site styles.
   Restrained, document-like design: a technical report / academic paper, not a
   product landing page. No gradients, glows, drop-shadows, or hover-lifts; thin
   rules, muted colour used sparingly (mostly links), serif titles. Theme-aware
   (light/dark), responsive, accessible. The meed-figure data colours are shared
   with the demo suite so the site and the live demos read as one system. */

:root {
  --bg: #fdfdfc; --bg-2: #f5f5f3; --panel: #ffffff; --ink: #1a1c1e; --dim: #5c626a;
  --line: #e2e2dd; --line-2: #d3d3cc; --accent: #33518f; --accent-ink: #fff;
  /* figure/data colours (meed split legend) */
  --merchant: #8b93a1; --meed: #33518f; --il: #4a67b0; --wallet: #3f8f6b;
  --os: #b5842f; --fund: #7a5ba6; --ok: #2f7d47; --bad: #b23b3b; --warn: #8a5a1a;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --maxw: 960px; --readw: 42rem;
  --radius: 6px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16181c; --bg-2: #1b1e23; --panel: #1a1d22; --ink: #dfe1e4; --dim: #9a9fa8;
    --line: #2b2f36; --line-2: #363b43; --accent: #8fa8e0; --accent-ink: #16181c;
    --merchant: #7c8697; --il: #7f97d8; --wallet: #57a986; --os: #cc9c4a; --fund: #a487c9;
  }
}
:root[data-theme="dark"] {
  --bg: #16181c; --bg-2: #1b1e23; --panel: #1a1d22; --ink: #dfe1e4; --dim: #9a9fa8;
  --line: #2b2f36; --line-2: #363b43; --accent: #8fa8e0; --accent-ink: #16181c;
  --merchant: #7c8697; --il: #7f97d8; --wallet: #57a986; --os: #cc9c4a; --fund: #a487c9;
}
:root[data-theme="light"] {
  --bg: #fdfdfc; --bg-2: #f5f5f3; --panel: #ffffff; --ink: #1a1c1e; --dim: #5c626a;
  --line: #e2e2dd; --line-2: #d3d3cc; --accent: #33518f; --accent-ink: #fff;
  --merchant: #8b93a1; --il: #4a67b0; --wallet: #3f8f6b; --os: #b5842f; --fund: #7a5ba6;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
  text-decoration-thickness: .5px; }
a:hover { text-decoration-thickness: 1.3px; }
img, svg { max-width: 100%; }
code { font-family: var(--mono); font-size: .86em; }

/* Mobile overflow guards. A wide element (e.g. the demo widget's shadow-DOM code trace,
   which is overflow-x:auto) can expand the page on some browsers — notably iOS Safari,
   which lets an overflow:auto child stretch its parent. overflow-x: clip prevents a
   horizontal body scroll WITHOUT creating a scroll container, so the reading-view sticky
   TOC still works. Long unbreakable tokens wrap rather than clip; the demo host is capped
   to its column so its shadow content can never push the page wider. */
html { overflow-x: clip; }
body { overflow-wrap: break-word; }
paytp-demos { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--accent-ink);
  padding: .6rem 1rem; border-radius: 0 0 6px 0; z-index: 100; }
.skip:focus { left: 0; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }
.muted { color: var(--dim); }
.center { text-align: center; }
.small { font-size: .88rem; }
.nowrap { white-space: nowrap; }

/* ---- top bar ---- */
.nav { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); }
.nav-in { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; gap: 1rem; padding: .85rem 1.5rem; }
.brand { display: inline-flex; align-items: baseline; gap: .5rem; font-weight: 600; color: var(--ink);
  font-size: 1rem; text-decoration: none; font-family: var(--serif); }
.brand:hover { text-decoration: none; }
.brand .mark { width: 1.2rem; height: 1.2rem; align-self: center; display: block; }
.brand .tp { color: var(--dim); font-weight: 400; font-size: .78rem; font-family: var(--sans); }
/* Header brand: stack the tagline left-justified under the wordmark; icon stays centered on the wordmark line. */
.nav .brand { display: grid; grid-template-columns: auto auto; align-items: center; gap: 0 .5rem; }
.nav .brand .mark { grid-column: 1; grid-row: 1; align-self: center; }
.nav .brand .brand-name { grid-column: 2; grid-row: 1; line-height: 1.15; }
.nav .brand .tp { grid-column: 2; grid-row: 2; line-height: 1.15; }
.nav-links { display: flex; gap: .1rem; margin-left: auto; align-items: center; }
.nav-links a { color: var(--dim); padding: .35rem .55rem; border-radius: 4px; font-size: .88rem; text-decoration: none; }
.nav-links a:hover { color: var(--ink); text-decoration: none; background: var(--bg-2); }
.nav-links a.active { color: var(--ink); font-weight: 600; }
.nav-cta { color: var(--accent) !important; }
.icon-btn { background: none; color: var(--dim); border: 1px solid var(--line); border-radius: 5px;
  width: 34px; height: 34px; font-size: 1rem; cursor: pointer; flex: 0 0 auto; }
.icon-btn:hover { color: var(--ink); border-color: var(--line-2); }
.nav-toggle { display: none; }

@media (max-width: 820px) {
  .nav-links { position: fixed; inset: 62px 0 auto 0; flex-direction: column; align-items: stretch;
    background: var(--bg); border-bottom: 1px solid var(--line); padding: .5rem 1rem 1rem; gap: 0;
    margin: 0; display: none; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: .7rem .5rem; border-bottom: 1px solid var(--line); }
  .nav-links #theme { margin: .6rem 0 0 .5rem; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; }
}

/* ---- sections ---- */
section { padding: 2.4rem 0; border-top: 1px solid var(--line); }
section:first-of-type { border-top: none; }
.eyebrow { font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; font-size: .72rem;
  font-weight: 600; color: var(--dim); margin: 0 0 .7rem; }
h1, h2, h3, h4 { line-height: 1.25; letter-spacing: -.005em; font-weight: 600; }
.title { font-family: var(--serif); font-size: 1.7rem; margin: 0 0 .7rem; font-weight: 600; letter-spacing: -.01em; }
h1.title { font-size: clamp(1.7rem, 3.4vw, 2.1rem); }
.lede { font-size: 1.06rem; color: var(--dim); max-width: var(--readw); margin: 0 0 1.4rem; }

/* ---- hero / title block ---- */
.hero { padding: 3rem 0 2rem; }
.hero h1 { font-family: var(--serif); font-size: clamp(1.6rem, 3.2vw, 2.1rem); font-weight: 600;
  margin: 0 0 1.1rem; max-width: 30ch; letter-spacing: -.012em; line-height: 1.18; }
.hero .thesis { font-size: 1.1rem; color: var(--ink); max-width: var(--readw); margin: 0 0 1.4rem; }
.hero .thesis b { font-weight: 600; }
.pill { display: inline-block; font-family: var(--mono); font-size: .74rem; color: var(--dim);
  margin-bottom: 1.2rem; letter-spacing: .01em; }
.pill .dot { display: none; }
.pill a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--line-2); }
.pill a:hover { color: var(--ink); border-bottom-color: var(--dim); }
.cta-row { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-top: .3rem; align-items: center; }
.btn { display: inline-flex; align-items: center; gap: .4rem; border-radius: var(--radius); padding: .5rem .9rem;
  font-size: .92rem; font-weight: 500; cursor: pointer; border: 1px solid var(--line-2); text-decoration: none; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); text-decoration: none; }
.btn.ghost { background: none; color: var(--ink); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* three commitments — numbered definitions, not cards */
.commitments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem 1.8rem; margin-top: 2.4rem;
  border-top: 1px solid var(--line); padding-top: 1.6rem; }
.commit .n { font-family: var(--mono); font-weight: 600; color: var(--dim); font-size: .78rem; }
.commit h3 { margin: .3rem 0 .35rem; font-size: 1rem; font-weight: 600; }
.commit p { margin: 0; font-size: .92rem; color: var(--dim); line-height: 1.55; }
@media (max-width: 760px) { .commitments { grid-template-columns: 1fr; gap: 1.2rem; } }

/* at-a-glance facts */
.facts { margin: 1.8rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.facts li { display: flex; gap: .8rem; padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.facts li b { min-width: 12ch; color: var(--ink); font-weight: 600; }
.facts li span { color: var(--dim); }

/* ---- cards / grids (flat, document-like) ---- */
.grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; }
.grid.two { grid-template-columns: 1fr 1fr; }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.card { background: var(--bg); padding: 1.15rem 1.25rem; }
.card h3 { margin: 0 0 .4rem; font-size: 1rem; font-weight: 600; }
.card p { margin: 0 0 .5rem; color: var(--dim); font-size: .9rem; line-height: 1.55; }
.card p:last-child { margin-bottom: 0; }
.card .k { font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--dim); font-weight: 600; display: block; margin-bottom: .3rem; }
.card.link { display: block; color: var(--ink); text-decoration: none; }
.card.link:hover { background: var(--bg-2); text-decoration: none; }
.card.link h3 { color: var(--accent); }
@media (max-width: 820px) { .grid.two, .grid.three { grid-template-columns: 1fr; } }

/* standalone bordered box (single) */
.box { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem 1.25rem; background: var(--bg); }

.tag { display: inline-block; font-family: var(--mono); color: var(--dim); font-size: .72rem; font-weight: 600; }

/* ---- how it works: tiers ---- */
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 1.4rem; }
.tier { background: var(--bg); padding: 1.25rem 1.4rem; }
.tier .badge { font-family: var(--mono); font-size: .7rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--dim); }
.tier h3 { margin: .3rem 0 .6rem; font-size: 1.05rem; font-weight: 600; }
.flowline { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin: .8rem 0; }
.node { background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; padding: .3rem .5rem;
  font-size: .78rem; white-space: nowrap; color: var(--ink); }
.arrow { color: var(--dim); font-size: .85rem; }
.tier p { margin: 0; }
@media (max-width: 760px) { .tiers { grid-template-columns: 1fr; } }

/* ---- meed split figure ---- */
.figure { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem; margin-top: 1.4rem; background: var(--bg); }
.figure .figcaption { font-size: .82rem; color: var(--dim); margin: 0 0 1rem; }
.figure .figcaption b { color: var(--ink); }
.split-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: start; }
.split-controls { display: flex; flex-direction: column; gap: .7rem; }
.amt-row { display: flex; align-items: baseline; gap: .5rem; }
.amt-row .big { font-family: var(--mono); font-size: 1.5rem; font-weight: 600; }
input[type="range"] { width: 100%; accent-color: var(--accent); }
.roles-toggle { display: flex; flex-direction: column; gap: .3rem; margin-top: .2rem; }
.toggle { display: flex; align-items: center; gap: .5rem; font-size: .88rem; cursor: pointer; padding: .2rem .1rem; }
.toggle input { accent-color: var(--accent); width: 15px; height: 15px; }
.swatch { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }
.recips { display: flex; flex-direction: column; gap: .5rem; }
.recip { border: 1px solid var(--line); border-radius: 4px; padding: .55rem .75rem;
  display: grid; grid-template-columns: 1fr auto; gap: .1rem .8rem; align-items: center; background: var(--bg); }
.recip .name { font-weight: 600; font-size: .88rem; }
.recip .amt { font-family: var(--mono); font-weight: 600; text-align: right; }
.recip .bp { font-family: var(--mono); color: var(--dim); font-size: .72rem; text-align: right; }
.recip .bar { grid-column: 1 / -1; height: 5px; border-radius: 2px; margin-top: .3rem;
  background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; }
.recip .bar > span { display: block; height: 100%; width: 0; border-radius: 2px; transition: width .6s ease; }
.recip[data-role="merchant"] .bar > span { background: var(--merchant); }
.recip[data-role="il"] .bar > span { background: var(--il); }
.recip[data-role="wallet"] .bar > span { background: var(--wallet); }
.recip[data-role="os"] .bar > span { background: var(--os); }
.recip[data-role="fund"] .bar > span { background: var(--fund); }
.recip[data-role="osfund"] .bar > span { background: var(--fund); }
.recip.rerouted { border-color: color-mix(in srgb, var(--fund) 45%, var(--line)); }
.recip .note { grid-column: 1/-1; font-size: .74rem; color: var(--warn); margin-top: .2rem; }
@media (max-width: 760px) { .split-wrap { grid-template-columns: 1fr; gap: 1.1rem; } }

/* ---- embedded demo suite ---- */
paytp-demos { display: block; margin-top: 1.2rem; min-height: 60vh; }

/* ---- FAQ ---- */
.faq { display: flex; flex-direction: column; margin-top: 1.2rem; max-width: var(--readw);
  border-top: 1px solid var(--line); }
details.q { border-bottom: 1px solid var(--line); }
details.q summary { cursor: pointer; font-weight: 600; padding: .95rem 0; list-style: none;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .98rem; }
details.q summary::-webkit-details-marker { display: none; }
details.q summary::after { content: "+"; color: var(--dim); font-family: var(--mono); }
details.q[open] summary::after { content: "–"; }
details.q .a { padding: 0 0 1rem; color: var(--dim); }
details.q .a p { margin: 0 0 .6rem; }
details.q .a p:last-child { margin-bottom: 0; }

/* ---- roadmap ---- */
.road { display: flex; flex-direction: column; gap: 0; margin-top: 1.4rem; max-width: var(--readw); }
.road .step { display: grid; grid-template-columns: 18px 1fr; gap: .9rem; padding-bottom: 1.2rem; position: relative; }
.road .step::before { content: ""; position: absolute; left: 8px; top: 18px; bottom: -2px; width: 1px; background: var(--line-2); }
.road .step:last-child::before { display: none; }
.road .dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--bg);
  display: flex; align-items: center; justify-content: center; font-size: .6rem; z-index: 1; margin-top: .2rem; color: var(--dim); }
.road .step.done .dot { background: var(--dim); border-color: var(--dim); color: var(--bg); }
.road .step.now .dot { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.road h4 { margin: 0 0 .2rem; font-size: .96rem; font-weight: 600; }
.road h4 .lbl { font-family: var(--mono); font-size: .68rem; color: var(--dim); font-weight: 600; margin-left: .5rem;
  text-transform: uppercase; letter-spacing: .04em; }
.road p { margin: 0; color: var(--dim); font-size: .9rem; line-height: 1.5; }

/* ---- process flow (numbered; borrows the Status roadmap visual) ---- */
.flow { display: flex; flex-direction: column; margin: 1.1rem 0 0; max-width: var(--readw); }
.flow .step { display: grid; grid-template-columns: 24px 1fr; gap: 1rem; padding-bottom: 1.35rem; position: relative; }
.flow .step:last-child { padding-bottom: 0; }
.flow .step::before { content: ""; position: absolute; left: 11.5px; top: 27px; bottom: -3px; width: 1px; background: var(--line-2); }
.flow .step:last-child::before { display: none; }
.flow .dot { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--bg);
  display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: .76rem; font-weight: 600;
  color: var(--accent); z-index: 1; }
.flow h4 { margin: .1rem 0 .25rem; font-size: 1rem; font-weight: 600; }
.flow h4 .flow-tag { font-family: var(--mono); font-size: .66rem; font-weight: 600; color: var(--dim);
  border: 1px solid var(--line); border-radius: 3px; padding: .05rem .32rem; margin-left: .5rem;
  vertical-align: middle; letter-spacing: .02em; white-space: nowrap; }
.flow p { margin: 0; color: var(--dim); font-size: .93rem; line-height: 1.55; }
.flow p code { color: var(--ink); }
/* a new sub-section (e.g. Tier 1) that follows a flow needs a clear break from it */
.flow + .eyebrow { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }

/* ---- callout / note ---- */
.note-box { border: 1px solid var(--line); border-left: 2px solid var(--dim); background: var(--bg-2);
  border-radius: 0 var(--radius) var(--radius) 0; padding: .85rem 1.1rem; margin: 1.3rem 0; font-size: .92rem; }
.note-box.warn { border-left-color: var(--warn); }
.note-box strong { color: var(--ink); }

/* back-to-top button (appears after scrolling; hidden in print) */
.to-top { position: fixed; bottom: 1.1rem; z-index: 60;
  right: max(1.1rem, calc((100vw - var(--maxw)) / 2 + 1.1rem));
  width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--line);
  background: var(--bg-2); color: var(--ink); font-size: 1.15rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { border-color: var(--dim); }
.to-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }
@media print { .to-top { display: none !important; } }

/* ---- hero tagline ---- */
.tagline { font-family: var(--serif); font-style: italic; color: var(--dim);
  font-size: 1.06rem; margin: 0 0 .9rem; letter-spacing: .01em; }

/* ---- two-column: main content (left) + narrow right rail ---- */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; column-gap: 2.6rem; align-items: start; }
.cols > .col-main { grid-column: 1; grid-row: 1; }
.cols > .col-side { grid-column: 2; grid-row: 1; padding-left: 2.6rem; border-left: 1px solid var(--line); }
.col-side .title { font-size: 1.3rem; }
.col-side .routes .rd { flex-basis: 100%; }
.col-side .routes .ra { display: none; }
/* rail "at a glance" stat list */
.col-side .stats { margin-top: .9rem; border-bottom: 1px solid var(--line); }
.col-side .stat { border-top: 1px solid var(--line); padding: .55rem 0; }
.col-side .stat .k { display: block; font-family: var(--mono); font-size: .67rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--dim); margin-bottom: .14rem; }
.col-side .stat .v { display: block; font-size: .9rem; color: var(--ink); line-height: 1.45; }
@media (max-width: 860px) {
  .cols { grid-template-columns: 1fr; row-gap: 2.4rem; }
  .cols > .col-main, .cols > .col-side { grid-column: 1; grid-row: auto; }
  .cols > .col-side { padding-left: 0; border-left: none; }
  .col-side .routes .ra { display: block; }
}

/* ---- landing "start here" routes (prominent rows, not cards) ---- */
.routes { list-style: none; padding: 0; margin: 1.3rem 0 .4rem; border-top: 1px solid var(--line-2); }
.routes li { border-bottom: 1px solid var(--line-2); }
.routes a { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem;
  padding: 1.05rem .2rem; color: var(--ink); text-decoration: none; }
.routes a:hover { background: var(--bg-2); text-decoration: none; }
.routes a:hover .rk { text-decoration: underline; text-underline-offset: 2px; }
.routes .rk { font-family: var(--serif); font-weight: 600; font-size: 1.14rem; color: var(--accent); flex: 0 0 13rem; }
.routes .rd { color: var(--dim); font-size: .95rem; flex: 1 1 18rem; }
.routes .ra { color: var(--dim); margin-left: auto; font-size: 1.05rem; }
@media (max-width: 560px) { .routes .rk { flex-basis: 100%; } .routes .ra { display: none; } }
.routes-more { margin: .9rem 0 0; color: var(--dim); font-size: .93rem; }

/* ---- flat prose points (replaces boxed card-grids for an academic feel) ---- */
.points { margin-top: 1.3rem; max-width: 48rem; }
.points p { margin: 0 0 1rem; color: var(--ink); line-height: 1.6; }
.points p:last-child { margin-bottom: 0; }
.points p b { color: var(--ink); font-weight: 600; }

/* ---- long-form story prose (meed page) ---- */
.story { max-width: var(--readw); }
.story h2 { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; margin: 0 0 1rem; }
.story p { font-size: 1.06rem; margin: 0 0 1.05rem; color: var(--ink); }
.story p:last-child { margin-bottom: 0; }

/* ---- related-work matrix ---- */
.tbl-scroll { overflow-x: auto; margin-top: 1.3rem; border: 1px solid var(--line); border-radius: var(--radius); }
table.matrix { border-collapse: collapse; width: 100%; font-size: .86rem; min-width: 560px; }
table.matrix th, table.matrix td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.matrix thead th { background: var(--bg-2); font-weight: 600; }
table.matrix td.yes { color: var(--ok); }
table.matrix td.no { color: var(--dim); }
table.matrix tr:last-child td { border-bottom: none; }
table.matrix tr.paytp td { background: color-mix(in srgb, var(--accent) 6%, transparent); font-weight: 600; }

/* ---- contents list (home) ---- */
.toc-list { list-style: none; padding: 0; margin: 1.4rem 0 0; border-top: 1px solid var(--line); }
.toc-list li { border-bottom: 1px solid var(--line); }
.toc-list a { display: grid; grid-template-columns: 12rem 1fr; gap: 1rem; padding: .8rem .2rem;
  color: var(--ink); text-decoration: none; align-items: baseline; }
.toc-list a:hover { background: var(--bg-2); text-decoration: none; }
.toc-list a .t { font-weight: 600; color: var(--accent); }
.toc-list a .d { color: var(--dim); font-size: .9rem; }
@media (max-width: 640px) { .toc-list a { grid-template-columns: 1fr; gap: .2rem; } }

/* ---- footer ---- */
.foot { border-top: 1px solid var(--line); padding: 2.5rem 0 2.5rem; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 1.5rem; }
.foot h5 { margin: 0 0 .6rem; font-family: var(--mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--dim); font-weight: 600; }
.foot a { display: block; color: var(--dim); font-size: .88rem; padding: .16rem 0; text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; }
.foot .brand { display: inline-flex; color: var(--ink); font-size: 1rem; }
.foot .brand:hover { text-decoration: none; }
.foot .legal { margin-top: 1.8rem; padding-top: 1.3rem; border-top: 1px solid var(--line);
  color: var(--dim); font-size: .8rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } }

/* ---- pagehead ---- */
.pagehead { padding: 2.75rem 0 1.5rem; border-top: none; border-bottom: 1px solid var(--line); }
.pagehead .lede { margin-bottom: 0; }
.pagehead + section { border-top: none; }

/* utility spacing */
.mt-1 { margin-top: .6rem; } .mt-2 { margin-top: 1.2rem; } .mt-3 { margin-top: 2rem; }
ul.ticks { list-style: none; padding: 0; margin: 1rem 0 0; }
ul.ticks li { position: relative; padding-left: 1.3rem; margin: .45rem 0; color: var(--dim); }
ul.ticks li::before { content: "—"; position: absolute; left: 0; color: var(--dim); }
ul.ticks li b { color: var(--ink); }