/* ==========================================================================
   Watch Register — site styles

   Design tokens below are lifted verbatim from the app's :root block
   (src/index.html @ v1.29.0). Do not invent new colours: if a value is
   needed that isn't here, it probably belongs in the app first.

   The site is dark-only on purpose. The app is dark-only, and a light
   marketing site fronting a dark product reads as a different product.
   ========================================================================== */

:root {
  /* — from the app, unchanged — */
  --ink: #0E0F12;
  --surface: #16181D;
  --surface-2: #1E2128;
  --surface-3: #23262E;
  --line: #2A2E37;
  --line-2: #363B45;
  --text: #E7E4DC;
  --muted: #A8ABB2;
  --muted-2: #9297A2;
  --prose: #B9BCC2;
  --brass: #C6A15B;
  /* Sampled from the app's own icon (static/icons/wr-mark-96.png) — the gold
     the "wr" monogram is actually drawn in, which is lighter than --brass.
     Used for the wordmark so the lettering and the mark beside it match. */
  --brass-mark: #E2CB92;
  --brass-dim: #A28442;
  --brass-wash: rgba(198, 161, 91, .10);
  --alert: #CB6E4C;
  --alert-wash: rgba(203, 110, 76, .12);
  --ok: #7C9A78;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --r: 3px;

  /* — site-only layout tokens — */
  --wrap: 1080px;
  --narrow: 720px;
  --gut: clamp(20px, 5vw, 40px);
  --section-y: clamp(56px, 9vw, 104px);

  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: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--brass); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--text); }
::selection { background: var(--brass); color: #14110a; }

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

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

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.narrow { max-width: var(--narrow); }
.section { padding-block: var(--section-y); }
.section + .section { border-top: 1px solid var(--line); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brass); color: #14110a; padding: 10px 16px;
  font: 600 13px/1 var(--mono);
}
.skip:focus { left: 12px; top: 12px; }

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

.eyebrow {
  font-family: var(--mono);
  font-size: 1.2rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8a8a8a;
  margin-bottom: 18px;
}
.eyebrow b { color: var(--brass); font-weight: 500; }

h1, h2, h3 { color: var(--text); font-weight: 400; line-height: 1.15; text-wrap: balance; }

.display {
  font-size: clamp(2.1rem, 5.4vw, 3.5rem);
  letter-spacing: -.022em;
  line-height: 1.06;
}
h2 { font-size: clamp(1.45rem, 3vw, 2rem); letter-spacing: -.015em; }
h3 { font-size: 1.4rem; letter-spacing: -.005em; }

.lead {
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  line-height: 1.6;
  color: var(--prose);
  max-width: 62ch;
  text-wrap: pretty;
}
p { max-width: 68ch; text-wrap: pretty; }
p + p { margin-top: 1em; }
.dim { color: var(--muted-2); }
.small { font-size: .875rem; }

/* Wordmark — the app's own device: mono, .28em, brass second half. */
.mark {
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text);
  font-size: 14px;
  white-space: nowrap;
}
.mark b { color: var(--brass-mark); font-weight: 600; }
.mark-sub {
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--muted-2);
  margin-top: 3px;
  text-transform: none;
  font-family: var(--sans);
}

/* ── buttons — matched to the app's .btn / .btn.primary ──────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  color: var(--text);
  padding: 11px 18px;
  border-radius: var(--r);
  font-size: 13.5px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
  white-space: nowrap;
}
.btn:hover { border-color: var(--brass-dim); color: var(--text); background: var(--surface-3); }
.btn.primary { background: var(--brass); border-color: var(--brass); color: #14110a; font-weight: 600; }
.btn.primary:hover { background: var(--brass-dim); border-color: var(--brass-dim); color: #14110a; }
.btn.ghost { background: transparent; }
.btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ── announcement bar ────────────────────────────────────────────────────── */

.announce {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  font-size: .8125rem;
}
.announce-in {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
  padding-block: 9px;
  justify-content: center;
}
.announce-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #14110a;
  background: var(--brass);
  border-radius: var(--r);
  padding: 3px 8px;
  white-space: nowrap;
}
.announce-txt { color: var(--muted); }
.announce-txt a { color: var(--brass-dim); }
.announce-txt a:hover { color: var(--brass); }
@media (max-width: 640px) {
  .announce-in { gap: 8px; padding-block: 8px; }
  .announce-txt { font-size: .75rem; }
}

/* "Coming <date>" marker on a price block */
.soon {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
  border: 1px solid var(--brass-dim);
  border-radius: var(--r);
  padding: 3px 8px;
  margin-bottom: 12px;
}

/* ── site header ─────────────────────────────────────────────────────────── */

.top {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.top-in { display: flex; align-items: center; gap: 16px; min-height: 62px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.brand img { width: 30px; height: 30px; flex: none; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: var(--r);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); background: var(--surface-2); }
.nav .btn { font-size: 11px; padding: 9px 14px; margin-left: 6px; }
@media (max-width: 720px) {
  .nav a { padding: 8px 8px; font-size: 10px; }
  .brand .mark-sub { display: none; }
}
/* .28em tracking on a 14-character wordmark is wider than a phone. Tighten it
   rather than letting the header overflow the viewport. */
@media (max-width: 560px) {
  .top-in { gap: 10px; }
  .mark { font-size: 11.5px; letter-spacing: .16em; }
  .nav { flex: none; }
  .nav .btn { margin-left: 2px; padding: 9px 12px; }
}
/* On the narrowest screens drop Security (it's reachable from the footer and
   from the landing page) but keep Download — losing the primary action from
   the header on mobile is worse than a tight nav. */
@media (max-width: 460px) {
  .nav a[href="/security"], .nav a[href="/support"] { display: none; }
}

/* ── hero ────────────────────────────────────────────────────────────────── */

.hero { padding-block: clamp(44px, 7vw, 80px) clamp(48px, 7vw, 84px); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } }

.hero .lead { margin-top: 20px; }
.hero .btn-row { margin-top: 32px; }

.hero-fig { position: relative; }
.hero-fig img {
  width: 100%;
  /* An opaque, straight-on screenshot rather than the tilted transparent
     composite this replaced. Being a plain rectangle of dark UI on a dark
     page, it needs an edge to define it and a shadow to lift it — the tilted
     version carried its own silhouette and needed neither. No colour filter:
     tinting a screenshot of the product misrepresents the product. */
  border-radius: var(--r);
  border: 1px solid var(--line-2);
  box-shadow: 0 28px 56px rgba(0, 0, 0, .55);
}

/* The screenshot is 1180px wide and the hero column is roughly 440. Rendered
   to fit, the interface becomes illegible — which defeats a hero whose job is
   to show the product. So it bleeds past its column into the right gutter.
   
   The gutter only exists once the viewport exceeds the 1080px container, so
   the bleed is gated on that. At 861–1199px an unconditional 132% overflowed
   the viewport by 65px and pushed the document wider than its client area —
   overflow-x is set on body, not html, so it did not contain it. */
@media (min-width: 1200px) {
  .hero-fig img { width: 132%; max-width: none; }
}

/* ── the ledger rule — primary structural device ─────────────────────────── */

.spec { border-top: 1px solid var(--line); margin-top: 40px; }
.spec-row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 8px 28px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
@media (max-width: 640px) { .spec-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; } }
.spec-key {
  font-family: var(--mono);
  font-size: 1rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  /* var(--brass), not the #c6a15a it was specified as — one digit apart and
     indistinguishable, but the token keeps this in the design system. */
  color: var(--brass);
  /* 3px, not 0. At this size/1.5 the label's first line sits above the h3
     beside it, most visibly on single-line keys. This lines them up. */
  padding-top: 3px;
  line-height: 1.5;
}
.spec-val h3 { margin-bottom: 5px; }
.spec-val p { font-size: .9375rem; }

/* Was tightened to 132px when the key was 10.5px and a 190px column stranded
   it far from its content. At 17px the label needs the room back, and the
   narrow column left a dead gutter instead. */
.doc .spec-row { grid-template-columns: 190px minmax(0, 1fr); gap: 8px 24px; }
@media (max-width: 640px) { .doc .spec-row { grid-template-columns: 1fr; } }

/* ── proof block — verbatim, checkable evidence ──────────────────────────── */

.proof {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(20px, 3vw, 30px);
  margin-top: 32px;
}
.proof-head {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: baseline; justify-content: space-between;
  margin-bottom: 16px;
}
.proof-head .eyebrow { margin: 0; }
.proof pre {
  margin: 0;
  overflow-x: auto;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 18px;
}
.proof code, code { font-family: var(--mono); font-size: 12.5px; line-height: 1.75; color: var(--text); }
.proof .hl { color: var(--brass); }
.proof-note { margin-top: 14px; font-size: .875rem; color: var(--muted-2); max-width: 66ch; }

/* inline code in prose */
:not(pre) > code {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .1em .4em;
  font-size: .875em;
  color: var(--text);
  overflow-wrap: break-word;
}

/* ── cards ───────────────────────────────────────────────────────────────── */

.grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 820px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.cell { background: var(--surface); padding: clamp(20px, 3vw, 28px); }
.cell h3 { margin-bottom: 8px; }
.cell p { font-size: .9375rem; color: var(--muted); }
.cell .num {
  font-family: var(--mono);
  font-size: 1rem;
  letter-spacing: .14em;
  color: var(--brass);
  display: block;
  margin-bottom: 12px;
}

/* ── image band ──────────────────────────────────────────────────────────── */

.band { position: relative; border-block: 1px solid var(--line); overflow: hidden; }
.band img { width: 100%; height: clamp(140px, 20vw, 230px); object-fit: cover; filter: saturate(.72) brightness(.55) contrast(1.05); }
/* Fades to page ink on all four edges so the band reads as a texture the page
   passes through, not a photograph pasted between two sections. */
.band::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--ink) 0%, transparent 26%, transparent 74%, var(--ink) 100%),
    linear-gradient(180deg, rgba(14, 15, 18, .65) 0%, transparent 30%, transparent 70%, rgba(14, 15, 18, .65) 100%);
  pointer-events: none;
}

/* ── limits / honesty callout ────────────────────────────────────────────── */

.note {
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--brass);
  border-radius: var(--r);
  background: var(--brass-wash);
  padding: 18px 22px;
  margin-top: 28px;
}
.note.warn { border-left-color: var(--alert); background: var(--alert-wash); }
.note p { font-size: .9375rem; }
.note .eyebrow { margin-bottom: 10px; }
.note.warn .eyebrow b { color: var(--alert); }

.limits { list-style: none; padding: 0; margin-top: 28px; border-top: 1px solid var(--line); }
.limits li {
  padding: 15px 0 15px 26px;
  border-bottom: 1px solid var(--line);
  position: relative;
  font-size: .9375rem;
  max-width: 72ch;
}
.limits li::before {
  content: "—";
  position: absolute; left: 0; top: 15px;
  color: var(--brass-dim);
  font-family: var(--mono);
}

/* ── tradeoff — rejected path vs chosen path ──────────────────────────────── */
/* Same visual grammar as the ledger rows: brass marks the decision that was
   made, muted marks the one that was not. Two columns rather than a single
   callout, because the point is the comparison, not just the conclusion. */

.tradeoff {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
@media (max-width: 700px) { .tradeoff { grid-template-columns: 1fr; } }

.tradeoff-col { background: var(--surface); padding: clamp(20px, 3vw, 26px); }
.tradeoff-chosen { background: var(--brass-wash); }

.tradeoff-label {
  font-family: var(--mono);
  font-size: .9rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 14px;
}
.tradeoff-chosen .tradeoff-label { color: var(--brass); }

.tradeoff-col ul { list-style: none; padding: 0; }
.tradeoff-col li {
  font-size: .9375rem;
  color: var(--muted);
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.tradeoff-col li:first-child { border-top: none; padding-top: 0; }
.tradeoff-chosen li { color: var(--prose); }

/* ── price ───────────────────────────────────────────────────────────────── */

.price-tag { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-block: 6px 18px; }
.price-tag .amount {
  font-family: var(--mono);
  font-size: clamp(2rem, 5vw, 2.75rem);
  color: var(--text);
  letter-spacing: -.01em;
  font-weight: 500;
}
.price-tag .per { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }

/* ── tables (used by the mirrored security doc) ──────────────────────────── */

.doc table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: .9375rem; }
.doc th, .doc td { text-align: left; padding: 11px 14px; border: 1px solid var(--line); vertical-align: top; }
.doc th { background: var(--surface-2); color: var(--text); font-weight: 600; font-size: .875rem; }
.doc td { background: var(--surface); }
.table-scroll { overflow-x: auto; }

/* ── document pages (mirrored markdown) ──────────────────────────────────── */

.doc { max-width: var(--narrow); }
.doc h1 { font-size: clamp(1.75rem, 4vw, 2.4rem); letter-spacing: -.02em; margin-bottom: 8px; }
.doc h2 {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: .01em;
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.doc h3 { margin-top: 30px; font-size: 1rem; }
.doc p, .doc li { color: var(--prose); }
.doc p { margin-top: 1em; }
.doc strong { color: var(--text); font-weight: 600; }
.doc ul, .doc ol { margin-top: 1em; padding-left: 1.3em; }
.doc li { margin-top: .5em; }
.doc li::marker { color: var(--brass-dim); }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
.doc pre {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 18px;
  overflow-x: auto;
  margin: 22px 0;
}
.doc blockquote {
  border-left: 2px solid var(--brass-dim);
  padding-left: 18px;
  margin: 22px 0;
  color: var(--muted);
}
.doc em { color: var(--muted); }

.doc-meta {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  padding: 16px 18px;
  margin-bottom: 36px;
  font-size: .8125rem;
  color: var(--muted-2);
}
.doc-meta code { font-size: .8125rem; }
.doc-meta a { color: var(--brass-dim); }

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

.foot { border-top: 1px solid var(--line); padding-block: 52px 40px; background: var(--surface); }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 780px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 460px) { .foot-grid { grid-template-columns: 1fr; } }

.foot h4 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 500;
  margin-bottom: 14px;
}
.foot ul { list-style: none; padding: 0; }
.foot li { margin-bottom: 9px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--brass); }
.foot-base {
  margin-top: 44px; padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 14px 40px;
  align-items: flex-start;
  justify-content: space-between;
  font-size: .8125rem;
  line-height: 1.65;
  color: var(--muted);
}
.foot-base p { max-width: 58ch; margin: 0; }
/* .foot a sets 14px for the link columns above. It must not bleed into the
   base row, where it would make a link larger than the sentence around it. */
.foot-base a { font-size: inherit; }

/* ── FAQ / support ───────────────────────────────────────────────────────── */

.faq-index {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  padding: 22px 26px;
  margin-bottom: 8px;
}
.faq-index .eyebrow { margin-bottom: 14px; }
.faq-index ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px 24px;
}
@media (max-width: 780px) { .faq-index ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .faq-index ul { grid-template-columns: 1fr; } }
.faq-index a {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.faq-index a:hover { color: var(--brass); }

.faq-sec { margin-top: 52px; }
.faq-sec > h2 {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 4px;
  scroll-margin-top: 90px;
}

/* ── accordion ───────────────────────────────────────────────────────────────
   <details>/<summary>: a real accordion with no JavaScript, so the site keeps
   `script-src 'none'`. Answers stay in the DOM when collapsed, so search
   engines and the FAQPage schema see the full text either way.
   ──────────────────────────────────────────────────────────────────────────── */

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

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

.qa > summary {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 20px 4px 20px 0;
  cursor: pointer;
  list-style: none;
  transition: color .12s;
}
/* Suppress the platform disclosure triangle in favour of our own marker. */
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary::marker { content: ""; }

.qa-q {
  flex: 1;
  color: var(--text);
  font-size: 1.0625rem;
  line-height: 1.4;
  text-wrap: pretty;
}
.qa[open] > summary .qa-q { color: var(--brass); }
.qa > summary:hover .qa-q { color: var(--brass); }

/* Marker: a plus that becomes a minus when open. Drawn in CSS, no icon file. */
.qa > summary::after {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  margin-top: 7px;
  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 .18s ease;
}
.qa[open] > summary::after {
  background: linear-gradient(var(--brass), var(--brass)) center/100% 1px no-repeat;
  transform: rotate(180deg);
}
.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:hover::after {
  background: linear-gradient(var(--brass), var(--brass)) center/100% 1px no-repeat;
}
.qa > summary:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; }

.qa-a {
  padding: 0 42px 26px 0;
  max-width: 74ch;
}
.qa-a > *:first-child { margin-top: 0; }
.qa-a p { font-size: .9375rem; color: var(--prose); }
.qa-a p + p { margin-top: .9em; }

/* Lists need a bottom margin: a paragraph after a list is common in this FAQ,
   and `p + p` does not fire when the previous sibling is a <ul>/<ol>/<dl>. */
.faq-ul, .faq-ol { margin: 14px 0 0; padding-left: 1.25em; font-size: .9375rem; }
.faq-ul li, .faq-ol li { margin-top: .5em; }
.faq-ul li::marker, .faq-ol li::marker { color: var(--brass-dim); }
.faq-ul + p, .faq-ol + p, .faq-dl + p { margin-top: 1.1em; }

.faq-dl { margin: 16px 0 0; }
.faq-dl > div {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 4px 20px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
@media (max-width: 600px) { .faq-dl > div { grid-template-columns: 1fr; gap: 2px; } }
.faq-dl dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--brass);
  padding-top: 3px;
}
.faq-dl dd { margin: 0; font-size: .9375rem; color: var(--prose); }

@media (max-width: 560px) {
  .qa > summary { gap: 14px; padding: 17px 2px 17px 0; }
  .qa-q { font-size: 1rem; }
  .qa-a { padding-right: 0; padding-bottom: 22px; }
}

/* ── utilities ───────────────────────────────────────────────────────────────
   Deliberately a fixed scale rather than inline style="" attributes, so the
   site can ship a Content Security Policy with no 'unsafe-inline' in
   style-src. See static/_headers.
   ──────────────────────────────────────────────────────────────────────────── */

.mt1 { margin-top: 12px; }
.mt2 { margin-top: 16px; }
.mt3 { margin-top: 20px; }
.mt4 { margin-top: 28px; }
.mt5 { margin-top: 36px; }
.mt6 { margin-top: 44px; }
.mt7 { margin-top: 52px; }

.panel { border: 1px solid var(--line); border-radius: var(--r); }
.spec.flush { margin-top: 0; }
.measure-short { max-width: 34ch; }

/* ── credits (image attribution) ─────────────────────────────────────────── */

/* Photo credits are the smallest thing on the page — a legal notice rather
   than something anyone reads by choice. Sized well below the licence line
   beside them so the difference reads as intent, not as an error. */
.credits { font-size: .65rem; color: var(--muted-2); line-height: 1.6; }
.credits a { color: var(--muted-2); text-decoration-color: var(--line-2); }
.credits a:hover { color: var(--brass); }