/* dmscs public site. Same design system as the app (frontend/src/styles.css): cool neutrals, one steel-blue accent,
   Arial, 1px borders with no shadows, 4px radius, the Damascus grain as the only texture. The type scale is larger
   than the app's because these pages are read rather than scanned, and are often read on a phone.
   Light is the base; dark swaps tokens only, following the OS (or forced with <html data-theme="dark|light">). */
:root {
  color-scheme: light;
  --font-sans: Arial, "Helvetica Neue", Helvetica, sans-serif;

  /* Neutrals, text and accent: the app's tokens, unchanged */
  --color-bg: #f5f7fa;
  --color-surface: #ffffff;
  --color-surface-alt: #eef1f5;
  --color-border: #d8dee6;
  --color-border-strong: #b8c2ce;
  --color-text: #1c2733;
  --color-text-muted: #5b6878;
  --color-text-faint: #8a96a5;
  --color-accent: #2a5c8a;
  --color-accent-hover: #214a70;
  --color-accent-subtle: #e6eef6;
  --color-accent-ink: #ffffff;
  --color-damascus-line: rgba(28, 39, 51, 0.08);
  --color-damascus-hero: rgba(28, 39, 51, 0.07);

  /* Categorical slots used by the sample charts (the app's --series-*) */
  --series-1: #2a5c8a;
  --series-2: #5b87b0;
  --series-3: #8fb0cf;
  --series-4: #3f7a6e;
  --series-gray: #8a96a5;

  /* Type: the app's scale (14 body, 17 h2, 22 h1, 28 display) stretched for reading */
  --text-small: 13px;
  --text-body: 16px;
  --text-lead: 18px;
  --text-h3: 17px;
  --text-h2: clamp(22px, 1.4vw + 16px, 30px);
  --text-h1: clamp(28px, 2.2vw + 18px, 40px);
  --text-hero: clamp(32px, 3.6vw + 18px, 54px);

  --radius-sm: 3px;
  --radius-md: 4px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --space-8: 64px; --space-9: 96px;

  --gutter: 16px;
  --measure: 68ch;
  --page: 1120px;
}
@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --color-bg: #121820;
    --color-surface: #1a222c;
    --color-surface-alt: #222c38;
    --color-border: #2e3a48;
    --color-border-strong: #41505f;
    --color-text: #e4e9ef;
    --color-text-muted: #9aa7b5;
    --color-text-faint: #6b7887;
    --color-accent: #6fa3d2;
    --color-accent-hover: #8bb6dd;
    --color-accent-subtle: #1e3246;
    --color-accent-ink: #0d1620;
    --color-damascus-line: rgba(255, 255, 255, 0.08);
    --color-damascus-hero: rgba(255, 255, 255, 0.06);
    --series-1: #6fa3d2;
    --series-2: #4a7da8;
    --series-3: #a4c6e3;
    --series-4: #4ca08f;
    --series-gray: #6b7887;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #121820; --color-surface: #1a222c; --color-surface-alt: #222c38;
  --color-border: #2e3a48; --color-border-strong: #41505f;
  --color-text: #e4e9ef; --color-text-muted: #9aa7b5; --color-text-faint: #6b7887;
  --color-accent: #6fa3d2; --color-accent-hover: #8bb6dd; --color-accent-subtle: #1e3246; --color-accent-ink: #0d1620;
  --color-damascus-line: rgba(255, 255, 255, 0.08); --color-damascus-hero: rgba(255, 255, 255, 0.06);
  --series-1: #6fa3d2; --series-2: #4a7da8; --series-3: #a4c6e3; --series-4: #4ca08f; --series-gray: #6b7887;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { background: var(--color-bg); font-family: var(--font-sans); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--color-bg); color: var(--color-text);
  font-size: var(--text-body); line-height: 1.6; font-variant-numeric: tabular-nums;
}
body > main { flex: 1; }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.2; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
img, svg { display: block; max-width: 100%; }
a { color: var(--color-accent); text-underline-offset: 2px; }
a:hover { color: var(--color-accent-hover); }
strong { font-weight: 700; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
:target { scroll-margin-top: var(--space-5); }

.wrap { width: 100%; max-width: calc(var(--page) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 10; padding: var(--space-2) var(--space-3);
  background: var(--color-surface); border: 1px solid var(--color-accent); border-radius: var(--radius-md);
}
.skip:focus { top: var(--space-2); }
.muted { color: var(--color-text-muted); }
.small { font-size: var(--text-small); line-height: 1.5; }

/* ---------- Damascus grain ----------
   Texture, not decoration: the app's top bar grain, drawn from the same generator (frontend/src/damascus) with a fixed
   seed and saved as SVG. Used as a mask so its colour stays a theme token. Never interactive. */
.grain { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--color-damascus-line); }
.grain-bar {
  -webkit-mask: url(assets/damascus-bar.svg) center / cover no-repeat; mask: url(assets/damascus-bar.svg) center / cover no-repeat;
}
.grain-fade {
  /* The app's "fade" variant: strongest on the left, gone by three quarters across. Two masks, intersected. */
  -webkit-mask: url(assets/damascus-bar.svg) center / cover no-repeat, linear-gradient(to right, #000 0%, #000 22%, transparent 78%);
  -webkit-mask-composite: source-in;
  mask: url(assets/damascus-bar.svg) center / cover no-repeat, linear-gradient(to right, #000 0%, #000 22%, transparent 78%);
  mask-composite: intersect;
}
.grain-hero {
  background: var(--color-damascus-hero);
  -webkit-mask: url(assets/damascus-hero.svg) center / cover no-repeat, linear-gradient(to right, #000 0%, #000 30%, transparent 92%);
  -webkit-mask-composite: source-in;
  mask: url(assets/damascus-hero.svg) center / cover no-repeat, linear-gradient(to right, #000 0%, #000 30%, transparent 92%);
  mask-composite: intersect;
}

/* ---------- Top bar ---------- */
.topbar { position: relative; background: var(--color-surface); border-bottom: 1px solid var(--color-accent); }
.topbar-inner {
  position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr auto;
  grid-template-areas: "brand nav cta"; align-items: center; column-gap: var(--space-5); min-height: 60px;
}
.brand {
  grid-area: brand; display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-h3); font-weight: 700; line-height: 24px; color: var(--color-text); text-decoration: none;
}
.brand:hover { color: var(--color-text); }
.brand img { width: 36px; height: 36px; }
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .logo-light { display: none; }
  :root:where(:not([data-theme="light"])) .logo-dark { display: block; }
}
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; }

.nav { grid-area: nav; display: flex; align-self: stretch; gap: var(--space-1); }
.nav a {
  display: inline-flex; align-items: center; padding: 3px var(--space-3) 0; border-bottom: 3px solid transparent;
  color: var(--color-text-muted); text-decoration: none; white-space: nowrap; transition: color 0.12s;
}
.nav a:hover { color: var(--color-text); }
.nav a[aria-current="page"] { color: var(--color-text); font-weight: 700; border-bottom-color: var(--color-accent); }
.nav a:focus-visible { outline-offset: -2px; }
.topbar .btn { grid-area: cta; }

/* Phones: brand and Sign in on the first row, the page links under them as full-width tabs. Three links fit at
   320px, so no menu button is needed and nothing is hidden. */
@media (max-width: 639px) {
  .topbar-inner { grid-template-columns: 1fr auto; grid-template-areas: "brand cta" "nav nav"; row-gap: 0; padding-top: var(--space-2); }
  .nav { margin-inline: calc(-1 * var(--space-3)); min-height: 44px; }
  .nav a { flex: 1; justify-content: center; padding-inline: var(--space-2); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 40px; padding: 0 var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text); font-size: 15px; font-weight: 700; line-height: 20px;
  text-decoration: none; white-space: nowrap; transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.btn:hover { background: var(--color-surface-alt); color: var(--color-text); }
.btn.primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn.primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-accent-ink); }
.btn.large { min-height: 48px; padding: 0 var(--space-5); font-size: var(--text-body); }
.btn svg { flex: none; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 479px) { .actions .btn.large { flex: 1 1 100%; } }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.hero-inner {
  position: relative; z-index: 1; display: grid; gap: var(--space-7); align-items: center;
  padding-block: var(--space-8) var(--space-8);
}
@media (min-width: 960px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-8); padding-block: var(--space-9); }
}
.eyebrow {
  display: inline-block; margin-bottom: var(--space-4); padding: 2px var(--space-2); border-radius: var(--radius-sm);
  background: var(--color-accent-subtle); color: var(--color-accent); font-size: var(--text-small); font-weight: 700;
  letter-spacing: 0.02em; line-height: 20px;
}
.hero h1 { font-size: var(--text-hero); line-height: 1.08; letter-spacing: -0.015em; max-width: 14ch; }
.lead { margin-top: var(--space-5); font-size: var(--text-lead); line-height: 1.55; color: var(--color-text-muted); max-width: 46ch; }
.hero .actions { margin-top: var(--space-6); }
.hero-note { margin-top: var(--space-4); color: var(--color-text-muted); font-size: var(--text-small); }

/* ---------- Sample panel (an illustration of the app's X-Ray view, with made-up figures) ---------- */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); }
.sample { margin: 0; padding: var(--space-5); font-size: 14px; line-height: 20px; min-width: 0; }
.sample-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.sample-head h2 { font-size: var(--text-h3); line-height: 24px; }
.tag {
  display: inline-block; padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--color-surface-alt);
  color: var(--color-text-muted); font-size: 12px; line-height: 20px; white-space: nowrap;
}
.kpis { display: flex; flex-wrap: wrap; gap: var(--space-3) 0; margin-bottom: var(--space-5); }
.tile { padding: 0 var(--space-4); border-left: 1px solid var(--color-border); min-width: 0; }
.tile:first-child { padding-left: 0; border-left: 0; }
.tile .value { font-size: 17px; line-height: 24px; font-weight: 700; }
.tile.primary .value { font-size: 28px; line-height: 34px; }
.tile .label { color: var(--color-text-muted); font-size: 12px; line-height: 16px; margin-top: 2px; }
.rows-title { margin-bottom: var(--space-2); color: var(--color-text-muted); font-size: 12px; font-weight: 700; line-height: 16px; }
.rows { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.row { display: grid; grid-template-columns: 18px minmax(92px, 132px) minmax(0, 1fr) 44px; gap: var(--space-3); align-items: center; }
.row .rank { color: var(--color-text-muted); font-size: 12px; text-align: right; }
.row .sym { font-weight: 700; line-height: 18px; }
.row .nm { display: block; color: var(--color-text-muted); font-size: 12px; font-weight: 400; line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .pct { text-align: right; font-weight: 700; }
.stack { display: flex; gap: 2px; height: 16px; min-width: 0; }
.seg { background: var(--c); min-width: 2px; }
.seg:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-top: var(--space-4); color: var(--color-text-muted); font-size: 12px; line-height: 16px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 10px; height: 10px; border-radius: 2px; background: var(--c); flex: none; }
.c1 { --c: var(--series-1); } .c2 { --c: var(--series-2); } .c3 { --c: var(--series-3); } .c4 { --c: var(--series-4); } .cg { --c: var(--series-gray); }
.sample-foot { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 12px; line-height: 16px; }
@media (max-width: 479px) {
  .sample { padding: var(--space-4); }
  .row { grid-template-columns: minmax(64px, 84px) minmax(0, 1fr) 40px; gap: var(--space-2); }
  .row .rank { display: none; }
  /* Three equal columns, so no tile wraps onto a line of its own with a stray divider */
  .kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile { padding: 0 var(--space-3); }
  .tile .value, .tile.primary .value { font-size: 20px; line-height: 26px; }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--space-8); }
@media (min-width: 960px) { .section { padding-block: var(--space-9); } }
.section.alt { background: var(--color-surface); border-block: 1px solid var(--color-border); }
.section-head { max-width: 640px; margin-bottom: var(--space-7); }
.section-head h2 { font-size: var(--text-h2); letter-spacing: -0.01em; }
.section-head p { margin-top: var(--space-3); font-size: var(--text-lead); color: var(--color-text-muted); }

/* Look-through explainer: what you hold, what's inside, what you own. Three columns, stacked on phones. */
.flow { display: grid; gap: var(--space-4); align-items: stretch; }
@media (min-width: 880px) { .flow { grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr); } }
.flow .card { padding: var(--space-5); }
.flow h3 { font-size: var(--text-h3); margin-bottom: var(--space-1); }
.flow .card > p { color: var(--color-text-muted); font-size: 14px; line-height: 1.5; margin-bottom: var(--space-4); }
.arrow { display: grid; place-items: center; color: var(--color-text-faint); }
.arrow svg { transform: rotate(90deg); }
@media (min-width: 880px) { .arrow svg { transform: none; } }
.ledger { margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; }
.ledger li { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--color-border); }
.ledger li:first-child { border-top: 0; padding-top: 0; }
.ledger .k { color: var(--color-text); }
.ledger .k small { display: block; color: var(--color-text-muted); font-size: 12px; line-height: 16px; }
.ledger .v { font-weight: 700; white-space: nowrap; }
.ledger .hl .k, .ledger .hl .v { color: var(--color-accent); }
.callout { margin-top: var(--space-5); padding: var(--space-4) var(--space-5); border-left: 3px solid var(--color-accent); background: var(--color-accent-subtle); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.callout p { max-width: var(--measure); }

/* Feature grid */
.features { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); margin: 0; padding: 0; list-style: none; }
.feature { display: flex; flex-direction: column; gap: var(--space-2); height: 100%; padding: var(--space-5); color: inherit; text-decoration: none; transition: border-color 0.12s; }
a.feature:hover { border-color: var(--color-border-strong); color: inherit; }
a.feature:hover h3 { color: var(--color-accent); }
.feature h3 { font-size: var(--text-h3); }
.feature p { color: var(--color-text-muted); font-size: 15px; line-height: 1.55; }
.icon {
  display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: var(--space-2); border-radius: var(--radius-md);
  background: var(--color-accent-subtle); color: var(--color-accent);
}
.more { margin-top: auto; padding-top: var(--space-2); color: var(--color-accent); font-size: 14px; font-weight: 700; }

/* Two-column text + list block (privacy summary, invite) */
.split { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 880px) { .split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-8); } }
.split h2 { font-size: var(--text-h2); letter-spacing: -0.01em; }
.split .lead { margin-top: var(--space-3); }
.split .actions { margin-top: var(--space-5); }
.points { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.points li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-4); }
.points .icon { margin: 0; }
.points h3 { font-size: var(--text-h3); margin-bottom: var(--space-1); }
.points p { color: var(--color-text-muted); }

.band { position: relative; overflow: hidden; background: var(--color-surface); border-top: 1px solid var(--color-border); }
.band-inner { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); padding-block: var(--space-7); }
.band h2 { font-size: var(--text-h2); letter-spacing: -0.01em; }
.band p { margin-top: var(--space-2); color: var(--color-text-muted); max-width: 56ch; }

/* ---------- Inner pages ---------- */
.page-head { position: relative; overflow: hidden; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.page-head .wrap { position: relative; z-index: 1; padding-block: var(--space-7); }
@media (min-width: 960px) { .page-head .wrap { padding-block: var(--space-8); } }
.page-head h1 { font-size: var(--text-h1); letter-spacing: -0.01em; }
.page-head .lead { margin-top: var(--space-3); }
.page-head .meta { margin-top: var(--space-3); color: var(--color-text-muted); font-size: var(--text-small); }

/* Long-form layout: an on-page contents list beside the text on wide screens, above it on narrow ones. */
.doc { display: grid; gap: var(--space-6); padding-block: var(--space-7) var(--space-8); }
@media (min-width: 1024px) { .doc { grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-8); } }
.toc { align-self: start; font-size: 14px; line-height: 20px; }
@media (min-width: 1024px) { .toc { position: sticky; top: var(--space-5); } }
.toc h2 { margin-bottom: var(--space-2); color: var(--color-text-muted); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.toc a { display: block; padding: 6px var(--space-3); border-left: 2px solid var(--color-border); color: var(--color-text-muted); text-decoration: none; }
.toc a:hover { border-left-color: var(--color-accent); color: var(--color-text); }
@media (max-width: 1023px) {
  .toc { padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
  .toc ol { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); column-gap: var(--space-4); }
}

.prose { max-width: var(--measure); min-width: 0; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-7); font-size: clamp(20px, 0.8vw + 16px, 24px); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--space-5); font-size: var(--text-h3); }
.prose h2 + *, .prose h3 + * { margin-top: var(--space-2); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: var(--space-2); }
.prose .note { padding: var(--space-3) var(--space-4); border-left: 3px solid var(--color-border-strong); background: var(--color-surface-alt); border-radius: 0 var(--radius-md) var(--radius-md) 0; color: var(--color-text-muted); font-size: 15px; }

/* Feature tour: one block per area, each with a short list of the views it covers */
.tour { display: grid; gap: var(--space-7); padding-block: var(--space-7) var(--space-8); }
.area + .area { padding-top: var(--space-7); border-top: 1px solid var(--color-border); }
.area { display: grid; gap: var(--space-5); scroll-margin-top: var(--space-5); }
@media (min-width: 880px) { .area { grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-7); } }
.area-title { display: flex; gap: var(--space-3); align-items: flex-start; }
.area-title .icon { margin: 0; flex: none; }
.area-title h2 { font-size: 20px; line-height: 1.25; }
.area-title .where { margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--text-small); }
.area-body > p { color: var(--color-text-muted); max-width: var(--measure); }
.views { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.views li { padding: var(--space-3) var(--space-4); background: var(--color-surface-alt); border-radius: var(--radius-md); font-size: 15px; line-height: 1.5; }
.views strong { display: block; }
.views span { color: var(--color-text-muted); }

/* FAQ: native disclosure, works without script and with find-in-page */
.faq { display: grid; gap: var(--space-6); padding-block: var(--space-7) var(--space-8); }
.faq-group h2 { margin-bottom: var(--space-3); font-size: 20px; }
.faq-list { border-top: 1px solid var(--color-border); }
.faq details { border-bottom: 1px solid var(--color-border); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) 0;
  font-size: var(--text-h3); font-weight: 700; line-height: 1.35; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-right: var(--space-1);
  border-right: 2px solid var(--color-text-muted); border-bottom: 2px solid var(--color-text-muted); transform: translateY(-3px) rotate(45deg);
  transition: transform 0.15s;
}
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq summary:hover { color: var(--color-accent); }
.faq summary:focus-visible { outline-offset: 4px; }
.faq .answer { padding-bottom: var(--space-5); max-width: var(--measure); color: var(--color-text-muted); }
.faq .answer > * + * { margin-top: var(--space-3); }
.faq .answer ul { margin-bottom: 0; padding-left: 1.25rem; }

/* 404 */
.lost { padding-block: var(--space-9); }
.lost h1 { font-size: var(--text-h1); }
.lost p { margin-top: var(--space-3); color: var(--color-text-muted); font-size: var(--text-lead); }
.lost .actions { margin-top: var(--space-6); }

/* ---------- Footer ---------- */
.footer { background: var(--color-surface); border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 14px; line-height: 20px; }
.footer-inner { display: grid; gap: var(--space-6); padding-block: var(--space-7) var(--space-6); }
@media (min-width: 720px) { .footer-inner { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); } }
.footer .brand { margin-bottom: var(--space-3); }
.footer .blurb { max-width: 36ch; }
.footer h2 { margin-bottom: var(--space-3); color: var(--color-text); font-size: 13px; }
.footer ul { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.footer a { color: var(--color-text-muted); text-decoration: none; }
.footer a:hover { color: var(--color-text); text-decoration: underline; }
.footer-cols { display: contents; }
@media (max-width: 719px) { .footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-5); } }
.fineprint {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-5);
  padding-block: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border); font-size: var(--text-small);
}

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

/* Windows high contrast and other forced palettes: masks and tinted fills disappear, so give the shapes edges. */
@media (forced-colors: active) {
  .grain { display: none; }
  .seg, .sw { forced-color-adjust: none; }
  .btn.primary { border: 2px solid ButtonText; }
  .nav a[aria-current="page"] { border-bottom-color: Highlight; }
  .callout, .prose .note, .icon, .tag, .eyebrow { border: 1px solid CanvasText; }
}

@media print {
  :root { --color-bg: #fff; --color-surface: #fff; --color-text: #000; --color-text-muted: #333; --color-accent: #000; }
  html, body { background: #fff; font-size: 11pt; }
  .grain, .skip, .nav, .topbar .btn, .toc, .actions, .band, .footer-cols, .footer .blurb { display: none !important; }
  .topbar, .page-head, .hero, .section.alt, .footer { background: none; border-color: #999; }
  .page-head .wrap, .doc, .section { padding-block: 12pt; }
  .doc { display: block; }
  .prose { max-width: none; }
  .prose a[href^="http"]::after, .prose a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #333; }
  .faq details { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  .card { break-inside: avoid; }
}