/* ==========================================================================
   Watch Vault Media — site stylesheet

   Built to the family standard (~/Projects/aveneg-design-kit/family-standard.md,
   owned by the corporate site's session; the owner ruled on 2026-10-13 that
   avenegtechnologies.com sets the standard for the family). What that fixes
   here:

     - The family's colour tokens. Do not invent a colour.
     - Headlines (h1, h2) in the system serif; everything else in the system
       sans; labels in mono capitals.
     - Body 18px. No sentence under 15px. Labels and nav 14px. All in rem.
     - 64 to 104px between sections. One left edge: nothing is centred.
     - Brass is rationed: the hero label, a link's underline.
     - Prose links are underlined, never colour alone. Button edges are 3:1.
       Anything a finger must hit is 48px high.
     - One radius, 3px. No glows.
     - Breakpoints at 45em (720px) and 60em (960px).

   Copied from the Watch Vault Tracker site's stylesheet, with its phone and
   drawn-watch pictures removed: this site shows no picture of the app yet.

   No inline style="" anywhere and no script of ours: static/_headers ships
   a Content Security Policy that allows neither.
   ========================================================================== */

:root {
  --ink: #0E0F12;
  --surface: #16181D;
  --surface-2: #1E2128;
  --surface-3: #23262E;
  --line: #2A2E37;
  --line-2: #363B45;
  --text: #E7E4DC;
  --prose: #B9BCC2;
  --muted: #A8ABB2;
  --muted-2: #9297A2;
  --brass: #C6A15B;
  --brass-dim: #A28442;
  --brass-lit: #D3B273;
  --brass-ink: #15120B;
  /* A real limit, and only that (family standard 1.10, section 1): a
     callout's rule, mark and label, never a ground, a wash or body text. */
  --alert: #CB6E4C;

  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --r: 3px;
  --tap: 3rem;

  --wrap: 1080px;                                   /* including gutters */
  --narrow: 44rem;
  --gut: clamp(20px, 5vw, 40px);
  --section: clamp(4rem, 2.5rem + 6vw, 6.5rem);     /* 64 to 104 */

  color-scheme: dark;
}

/* ── reset ───────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  background: var(--ink);
  color: var(--prose);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; padding: 0; }

/* A link in a sentence is the sentence's own colour with a brass underline:
   it never depends on colour alone. */
a { color: var(--text); text-decoration: underline; text-decoration-color: var(--brass); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--brass-lit); }
::selection { background: var(--brass); color: var(--brass-ink); }

:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: var(--r); }

/* ── layout ──────────────────────────────────────────────────────────────── */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.section { position: relative; padding-block: var(--section); }
/* The rule between sections runs gutter to gutter, the same span as every
   other hairline on the page. */
.section::before {
  content: ""; position: absolute; top: 0;
  left: var(--gut); right: var(--gut);
  border-top: 1px solid var(--line);
}
/* A page that opens with a section (About, Contact, the legal pages) starts
   straight under the header: no rule, which would double the header's own. */
main > .section:first-child { padding-top: clamp(3rem, 2rem + 5vw, 4.75rem); }
main > .section:first-child::before { display: none; }
.section[id] { scroll-margin-top: 1.5rem; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brass); color: var(--brass-ink); padding: 14px 18px;
  font: 600 .875rem/1 var(--mono); text-decoration: none;
}
.skip:focus { left: 12px; top: 12px; }

/* ── type ────────────────────────────────────────────────────────────────── */

/* Labels: mono capitals, 14px. The one voice for nav, tags and keys. */
.eyebrow, .nav a, .notice-tag, .facts dt, .spec-key, .toc-h {
  font-family: var(--mono);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.3;
}
.eyebrow { color: var(--muted); }
.hero .eyebrow { color: var(--brass); }

h1, h2, h3 { color: var(--text); font-weight: 400; text-wrap: balance; }
h1, h2 { font-family: var(--serif); }

.display {
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);    /* 36 to 56 */
  line-height: 1.08;
  letter-spacing: -.012em;
}
h2 {
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.125rem);    /* 28 to 34 */
  line-height: 1.18;
  max-width: 24ch;
}
/* A one-line statement that carries a section by itself. */
h3, .line { font-size: clamp(1.25rem, 1.2rem + .2vw, 1.375rem); line-height: 1.3; }

.lead {
  font-size: clamp(1.1875rem, 1.13rem + .25vw, 1.3125rem);   /* 19 to 21 */
  line-height: 1.5;
  color: var(--prose);
  max-width: 34rem;
  text-wrap: pretty;
}
/* A second paragraph that explains the product, a price or a privacy point
   is body text: 18px, quieter than the lead by size alone. (Standard 1.1:
   "Body is for anything a reader needs." An earlier build set these at 15px.) */
.sub { max-width: 34rem; text-wrap: pretty; }
/* Captions under or beside a picture, and legal fine print: 15px, nothing
   else. */
.fine, figcaption {
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--prose);
  max-width: 34rem;
  text-wrap: pretty;
}
p { max-width: 38rem; text-wrap: pretty; }

/* ── buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap);
  padding: 0 1.5rem;
  background: var(--surface-2);
  /* muted-2, not a hairline colour: a hairline is 1.7:1 on this ground and
     an older eye does not see the button's edge. */
  border: 1px solid var(--muted-2);
  border-radius: var(--r);
  color: var(--text);
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
}
.btn:hover { background: var(--surface-3); color: var(--text); }
.btn.primary { background: var(--brass); border-color: var(--brass); color: var(--brass-ink); font-weight: 600; }
.btn.primary:hover { background: var(--brass-lit); border-color: var(--brass-lit); color: var(--brass-ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── notice bar and masthead ─────────────────────────────────────────────── */

.notice { background: var(--surface); border-bottom: 1px solid var(--line); }
.notice-in {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 16px;
  padding-block: 12px;
  font-size: .9375rem; line-height: 1.4;
  color: var(--prose);
}
/* Outlined, not filled, so the page has no solid brass block that is only a date. */
.notice-tag {
  letter-spacing: .12em;
  color: var(--brass);
  border: 1px solid var(--brass-dim);
  border-radius: var(--r);
  padding: 4px 8px;
  white-space: nowrap;
}

.masthead { border-bottom: 1px solid var(--line); }
.masthead-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 24px; }
.brand { display: block; padding-block: 12px; text-decoration: none; }
/* The lockup is the owner's artwork as an inline SVG (src/partials/lockup.svg),
   never redrawn and never typed. Size it by height; colour it here. */
.lockup { display: block; height: 40px; width: auto; }
.lk-ring { fill: none; stroke: var(--brass); stroke-width: 3; stroke-miterlimit: 10; }
.lk-brass { fill: var(--brass); }
.lk-word { fill: #D6D5D3; }
.lk-sub { fill: var(--muted); }
.lk-tm { fill: var(--text); font-family: var(--sans); font-size: 30px; font-weight: 500; letter-spacing: 0; }

.nav a {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--tap);
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--brass); }
.nav a:focus-visible { outline-offset: -6px; }
/* Phone: the lockup on its own row, then five equal cells. No hidden menu:
   the site has no script to open one, and five links fit at 320 wide with
   the label tracking eased a little. Cells take their word's width and
   share the spare room between them, so the long words never touch. */
@media (max-width: 44.99em) {
  .nav {
    display: grid; grid-template-columns: repeat(5, auto); justify-content: space-between;
    flex: 1 0 100%;
    margin-inline: calc(var(--gut) * -1);
    padding-inline: calc(var(--gut) - 8px);
    border-top: 1px solid var(--line);
  }
  .nav a { letter-spacing: .04em; }
}
@media (min-width: 45em) {
  .nav { display: flex; align-self: stretch; gap: 8px; margin-right: -12px; }
  .nav a { padding-inline: 12px; }
}

/* ── hero ──────────────────────────────────────────────────────────────────
   Headline, then the words and three facts, hanging from the one left edge.
   There is no picture of the app yet (none is signed off), so none is drawn. */

.hero { padding-top: clamp(2.5rem, 1.5rem + 4vw, 4rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero .eyebrow { margin-bottom: 20px; }
.hero .display span { display: block; }
.hero .lead { margin-top: 24px; }
.hero-aside { margin-top: 12px; }

/* Sources, platform, status: what a visitor needs before anything else. */
.facts { margin-top: 32px; border-top: 1px solid var(--line); max-width: 34rem; }
.facts > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-size: 1.0625rem; line-height: 1.4; color: var(--text); }
.hero-note { margin-top: 20px; }
.hero-note b { font-weight: 600; color: var(--text); }

.hero-body { padding-bottom: clamp(3rem, 2rem + 4vw, 4.5rem); }

/* The picture of the app: a screenshot, cut off at its foot so it stands on the
   caption under it. The caption sits below the picture, never over it. Inside
   the picture, the app's own look applies. */
.hero-fig { margin: 0 auto; width: min(100%, 19rem); }
.hero-img { display: block; width: 100%; height: 28rem; object-fit: cover; object-position: top; border: 1px solid var(--line-2); border-bottom: 0; border-radius: 28px 28px 0 0; }
.hero-fig figcaption { width: 80%; margin: 16px auto 0; text-align: left; line-height: 1.35; }
@media (max-width: 44.99em) {
  .hero-fig { margin-top: 8px; }
  .hero-body { padding-bottom: 0; }
}
@media (min-width: 45em) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    grid-template-areas: "head fig" "body fig";
    column-gap: clamp(2.5rem, 7vw, 6rem);
  }
  .hero-head { grid-area: head; }
  .hero-body { grid-area: body; }
  .hero-fig { grid-area: fig; margin: 0; align-self: start; width: clamp(15rem, 28vw, 19rem); }
}

/* ── four statements, ruled ──────────────────────────────────────────────── */

.four { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 32px; margin-top: 40px; }
.four li { border-top: 1px solid var(--line-2); padding-top: 16px; }
.four p { margin-top: 8px; font-size: 1.0625rem; line-height: 1.5; }
@media (min-width: 45em) { .four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60em) { .four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.settle { margin-top: 40px; max-width: 40rem; }

/* ── a plate: one boxed statement ────────────────────────────────────────── */

.plate {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 64px;
  padding: clamp(1.5rem, 1rem + 3vw, 3rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.plate .lead { margin-top: 16px; }
/* 17px, the body size inside a card. */
.plate .sub { font-size: 1.0625rem; }
@media (min-width: 60em) {
  .plate { grid-template-columns: 6fr 5fr; align-items: end; }
}

/* ── two columns, open ───────────────────────────────────────────────────── */

.band { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 64px; }
@media (min-width: 60em) { .band { grid-template-columns: 5fr 6fr; } }
.band h2 { max-width: 13em; }
.band p + p { margin-top: 16px; }

.close h2 { max-width: none; }
.close .line { margin-top: 16px; color: var(--prose); }

/* ── rows: a label, and what it holds ────────────────────────────────────── */

.spec { border-top: 1px solid var(--line); margin-top: 32px; }
.spec-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 32px; padding: 20px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 45em) { .spec-row { grid-template-columns: 11rem minmax(0, 1fr); align-items: start; } }
.spec-key { color: var(--brass); padding-top: 4px; }
/* A section that ends on rows ends on its last line of text: the row's own
   rule and the section's rule below it, with nothing between, read as an
   empty band. */
.section > .spec:last-child .spec-row:last-child { border-bottom: 0; padding-bottom: 0; }
.spec-val { margin: 0; }
.spec-val h3 { margin-bottom: 4px; }
.spec-val p + p { margin-top: 4px; }
.spec-val a { overflow-wrap: anywhere; }

/* ── document pages (privacy, terms, about, contact) ─────────────────────── */

.doc { max-width: var(--narrow); }
.doc .eyebrow { margin-bottom: 16px; }
.doc h1 { font-size: clamp(2.25rem, 1.75rem + 2.2vw, 3rem); line-height: 1.08; letter-spacing: -.012em; }
.doc .lead { margin-top: 24px; max-width: none; }
.doc h2 { max-width: none; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); scroll-margin-top: 1.5rem; }
.doc p { margin-top: 16px; max-width: none; }
.doc strong { color: var(--text); font-weight: 600; }
.doc ul { margin-top: 16px; padding-left: 1.3em; list-style: disc; }
.doc li { margin-top: 8px; }
.doc li::marker { color: var(--brass-dim); }
.doc .updated { margin-top: 12px; font-size: .9375rem; color: var(--muted); }
.doc address { font-style: normal; margin-top: 16px; }
/* A ledger directly under a section heading, or a heading directly under a
   ledger, would draw two rules a few pixels apart. One rule each. */
.doc h2 + .spec { border-top: 0; margin-top: 8px; }
.doc .spec + h2 { border-top: 0; padding-top: 0; }
.doc .spec-val p { margin-top: 0; }
.doc .spec-val p + p { margin-top: 4px; }
/* "On this page", on the two long legal pages. */
.toc { margin-top: 32px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r); }
.toc-h { color: var(--muted); }
.doc .toc p { margin: 0; }
.doc .toc ol { margin: 8px 0 0; padding-left: 1.6em; list-style: decimal; }
.doc .toc li { margin: 0; }
.doc .toc li::marker { color: var(--muted); }
.toc a { display: flex; align-items: center; min-height: var(--tap); }
@media (min-width: 45em) { .doc .toc ol { columns: 2; column-gap: 48px; } .doc .toc li { break-inside: avoid; } }

/* ── the support page ──────────────────────────────────────────────────────
   Questions grouped by topic, a jump list to the groups. Every jump link is
   a full tap target, three across, two on a tablet, one on a phone. */

/* Support's opening: the family's support composition (design kit
   components/faq, "Where it goes"), as the Archive's /support. The column
   widens to the page; the ways to reach us are bordered cells with a
   hairline between; what support cannot do is a callout. */
.doc.support { max-width: none; }
.doc.support .lead { max-width: 34rem; }
.help-cells {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 1px; margin-top: 48px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
@media (min-width: 45em) { .help-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.help-cell { background: var(--surface); padding: clamp(20px, 3vw, 28px); }
.cell-label {
  font-family: var(--mono); font-size: .875rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; line-height: 1.3;
  color: var(--brass);
}
.doc .help-cell .cell-label { margin-top: 0; }
.doc .help-cell h2 {
  margin: 12px 0 8px; padding: 0; border: 0;
  font-family: var(--sans); font-size: clamp(1.25rem, 1.2rem + .2vw, 1.375rem); line-height: 1.3;
}
.doc .help-cell p + p, .doc .help-cell h2 + p { margin-top: 0; }
.doc .help-cell .cell-label + p { margin-top: 12px; }
.help-cell p:not(.cell-label) { font-size: 1.0625rem; }
.callout { margin-top: 32px; padding: 4px 0 4px 24px; border-left: 3px solid var(--brass); }
.callout.warn { border-left-color: var(--alert); }
.doc .callout-head {
  display: flex; align-items: flex-start; gap: 16px; margin-top: 0;
  font-family: var(--mono); font-size: .875rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; line-height: 1.3;
  color: var(--muted);
}
.callout.warn .callout-head { color: var(--alert); }
.callout-head > span { min-width: 0; }
.callout-mark { width: 22px; height: 22px; flex: none; margin-top: -3px; }
.callout p:not(.callout-head) { font-size: 1.0625rem; margin-top: 12px; max-width: 38rem; }
.doc.support + .faq, #faq .eyebrow { margin-top: 0; }
#faq .faq { margin-top: 0; }
.faq-title { margin: 16px 0 48px; }

/* Support: the family's questions-and-answers component, design kit guide
   1.9, components/faq/. The rules below the aliases are the kit's faq.css,
   copied unchanged: to update, copy the file again. The aliases give the
   kit's token names to this site's values. */
.faq {
  margin-top: 48px;
  --radius: var(--r);
  --fs-line: clamp(1.25rem, 1.15rem + 0.4vw, 1.375rem);
  --fs-body: 1.125rem; --fs-fact: 1.0625rem; --fs-small: 0.9375rem; --fs-label: 0.875rem;
  --track: 0.16em; --track-tight: 0.12em;
  --measure: 38rem;
}

/* Questions and answers: the family's FAQ / Support component.
   Standard: components/faq/README.md. Reference implementation:
   watchvaultarchive.com/support. Values are on the family spacing scale
   (4 8 12 16 24 32 48 64) and type roles (family-standard.md section 2).

   Element selectors are allowed inside .faq-index and .qa-a, as they are in
   .doc: that content is written by a generator from plain text. */

/* ---- The index: one tile per topic ---------------------------------------- */

.faq-index {
  margin: 0 0 8px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.faq-index-label {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--muted);
}

/* One column on a phone, each tile its own height. From 720 up the tiles sit
   in columns and grid-auto-rows: 1fr makes every tile the same height, so a
   label that wraps does not leave its neighbours short. */
.faq-index ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq-index li { display: flex; }

.faq-index a {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 8px 16px;
  font-family: var(--mono);
  font-size: var(--fs-label);
  line-height: 1.4;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--muted-2);
  border-radius: var(--radius);
}

.faq-index a:hover,
.faq-index a:focus-visible {
  color: var(--text);
  background: var(--surface-3);
  border-color: var(--brass-dim);
}

@media (min-width: 45em) {
  .faq-index ul { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
}

@media (min-width: 60em) {
  .faq-index ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- A topic: a Title, then its questions ---------------------------------- */

.faq-sec { margin-top: 48px; }

/* scroll-margin-top: the height of whatever sticks, plus 16px. */
.faq-sec > h2 { margin: 0 0 8px; scroll-margin-top: 16px; }

.qa-list { border-top: 1px solid var(--line-2); }

/* ---- One question ------------------------------------------------------------ */

.qa {
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 16px;
}

.qa > summary {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--tap);
  padding: 16px 4px 16px 0;
  list-style: none;
  cursor: pointer;
}

.qa > summary::-webkit-details-marker { display: none; }
.qa > summary::marker { content: ""; }

/* The full-width row takes its focus ring inside, not on the hairlines. */
.qa > summary:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }

/* The question is an h3 (with the id a link points at) that must look like
   the plain line it sits in. */
.qa-h { display: contents; margin: 0; font: inherit; }

.qa-q {
  flex: 1;
  font-size: var(--fs-line);
  line-height: 1.35;
  color: var(--text);
  text-wrap: pretty;
}

.qa > summary:hover .qa-q {
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

/* The mark: a plus in muted-2, a brass minus when open. Drawn, no icon file. */
.qa > summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  background:
    linear-gradient(var(--muted-2), var(--muted-2)) center / 100% 1px no-repeat,
    linear-gradient(var(--muted-2), var(--muted-2)) center / 1px 100% no-repeat;
  transition: transform 0.18s ease;
}

.qa > summary:hover::after {
  background:
    linear-gradient(var(--brass), var(--brass)) center / 100% 1px no-repeat,
    linear-gradient(var(--brass), var(--brass)) center / 1px 100% no-repeat;
}

.qa[open] > summary::after,
.qa[open] > summary:hover::after {
  background: linear-gradient(var(--brass), var(--brass)) center / 100% 1px no-repeat;
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .qa > summary::after { transition: none; }
}

/* ---- The answer --------------------------------------------------------------- */

.qa-a {
  max-width: var(--measure);
  padding: 0 0 24px;
}

@media (min-width: 45em) {
  .qa-a { padding-right: 48px; }
}

.qa-a > :first-child { margin-top: 0; }
.qa-a p { font-size: var(--fs-body); color: var(--prose); }
.qa-a p + p { margin-top: 16px; }

.faq-ul,
.faq-ol {
  margin: 16px 0 0;
  padding-left: 1.25em;
  font-size: var(--fs-body);
  color: var(--prose);
}

.faq-ul li,
.faq-ol li { margin-top: 8px; }

.faq-ul li::marker,
.faq-ol li::marker { color: var(--brass-dim); }

.faq-ul + p,
.faq-ol + p,
.faq-dl + p { margin-top: 16px; }

/* Label and value rows, for settings, limits and the like. */
.faq-dl { margin: 16px 0 0; }

.faq-dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

@media (min-width: 45em) {
  .faq-dl > div { grid-template-columns: 12.5rem minmax(0, 1fr); gap: 4px 24px; }
}

.faq-dl dt {
  padding-top: 4px;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-tight);
  color: var(--muted);
}

.faq-dl dd { margin: 0; font-size: var(--fs-fact); color: var(--prose); }

/* A cited source: long addresses may break anywhere, never push the page. */
.faq-cite { margin-top: 4px; font-family: var(--mono); font-size: var(--fs-small); }
.faq-cite a { display: inline-flex; align-items: center; min-height: var(--tap); overflow-wrap: anywhere; }
.faq-cite-label { color: var(--muted); }

/* A labelled file path or menu path. */
.faq-path { margin-top: 4px; font-size: var(--fs-small); }
.faq-path-label { display: block; font-family: var(--mono); color: var(--muted); }
.faq-path code { color: var(--text); overflow-wrap: anywhere; }

@media (min-width: 45em) {
  .faq-path { display: flex; gap: 12px; }
  .faq-path-label { flex: 0 0 5rem; }
}

/* ── footer ──────────────────────────────────────────────────────────────── */

.foot { border-top: 1px solid var(--line); padding-block: 48px; background: var(--surface); }
.foot-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 24px 48px; }
.foot .lockup { height: 36px; }
.foot-tag { margin-top: 12px; font-size: 1.0625rem; color: var(--prose); }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 32px; max-width: 36rem; }
/* A list of destinations, not links inside a sentence: underlined on hover. */
.foot-links a { display: inline-flex; align-items: center; min-height: var(--tap); font-size: 1.0625rem; text-decoration: none; }
.foot-links a:hover { text-decoration: underline; text-decoration-color: var(--brass); }
.foot-base {
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 48px;
  font-size: .9375rem; line-height: 1.6;
}
@media (min-width: 60em) { .foot-base { grid-template-columns: 1fr 1fr; } }
.foot-base p { max-width: 34rem; }

/* ── utilities ─────────────────────────────────────────────────────────────
   A fixed scale rather than inline style="", which the CSP forbids. Last in
   the file so they win ties. */

.mt2 { margin-top: 16px; }
.mt3 { margin-top: 24px; }
.mt4 { margin-top: 32px; }
.mt5 { margin-top: 48px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Our ethos (family guide 1.13): a label, the first sentence as the Title, three
   paragraphs in the 38rem reading column, and the closing line in the Line role. */
.doc .ethos p { max-width: 38rem; }
.doc .ethos .eyebrow { margin-top: 64px; }
.doc .ethos h2 { margin-top: 16px; padding-top: 0; border-top: 0; }
.doc .ethos .line { margin-top: 32px; color: var(--text); font-weight: 400; }