/* ==========================================================================
   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;
  --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;
  /* clip, not hidden: hidden pairs with overflow-y:visible under the CSS
     overflow spec by forcing it to auto, turning body into a real scroll
     container — which breaks position:sticky in real Chrome/Firefox (the
     header and the homepage sub-nav stopped sticking). clip contains the
     hero image's horizontal bleed (see .hero-fig img below) without that
     side effect. Matches the same reasoning already applied to html above. */
  overflow-x: clip;
}

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: 1em;
  letter-spacing: .18em;
  text-transform: uppercase;
  /* No colour: inherits the surrounding prose deliberately, so an eyebrow
     reads as part of its block rather than as dimmed chrome above it. */
  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.3rem; letter-spacing: -.005em; }
/* Heading LEVEL reflects position in the document; heading SIZE reflects the
   component. A spec row or cell that is the page's top-level division takes
   an h2 — on a page whose first content heading sat at h3, a screen reader
   was told a level had been skipped — but it must still look like the h3 it
   sits beside elsewhere. */
.spec-val h2, .cell h2 { font-size: 1.3rem; 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); font-weight: 600; }
.mark-sub {
  /* block, not inline: as an inline span it sat beside the wordmark whenever
     the header was wide enough, and only dropped below it on a narrow
     viewport — so the lockup changed shape with the window. */
  display: block;
  /* This line is what differs between products in the family — Watch
     Collection, Watch Testing — so it is the product name, not a tagline, and
     is sized to be read. The tracking rhymes with the wordmark's .28em
     without matching it: related, subordinate. */
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--muted);
  margin-top: 0;
  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;
}

/* ── homepage section sub-nav ────────────────────────────────────────────── */
/* Sticks just below the site header (63px = header min-height + its 1px
   border) once scrolled to. Native anchor scrolling + `scroll-behavior:
   smooth` on <html> above does the jump — no JS needed for that part. The
   one bit of JS (subnav.js) only toggles which link looks active. */

.subnav {
  position: sticky; top: 63px; z-index: 40;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.subnav-in {
  display: flex; gap: 4px; overflow-x: auto;
  padding-block: 8px;
}
.subnav 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);
  white-space: nowrap;
}
.subnav a:hover { color: var(--text); background: var(--surface-2); }

/* Keeps a jumped-to section from landing flush under the two sticky bars. */
.hero, #s-what, #s-who, #s-privacy, #s-how, #s-security, #s-phone, #s-pricing { scroll-margin-top: 110px; }

/* Highlights whichever subnav link was last jumped to, with no JS: :target
   marks the section matching the current URL fragment, and :has() lets the
   nav (an earlier sibling) react to a later sibling's state. Persists until
   another anchor is clicked — good enough for "confirm you're here", not a
   true scroll-position tracker. */
.subnav:has(~ #s-overview:target) a[href="#s-overview"],
.subnav:has(~ #s-who:target) a[href="#s-who"],
.subnav:has(~ #s-privacy:target) a[href="#s-privacy"],
.subnav:has(~ #s-how:target) a[href="#s-how"],
.subnav:has(~ #s-security:target) a[href="#s-security"],
.subnav:has(~ #s-pricing:target) a[href="#s-pricing"] {
  color: var(--brass); background: var(--surface-2);
}

/* ── 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; }
/* The mark is an inline SVG so it takes its colour from CSS rather than being
   baked into a raster. Size here, colour from the cascade. */
.brand-mark { width: 40px; height: 40px; flex: none; color: var(--brass); }

.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; margin-right: auto; }
.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; }
  /* The lockup already shrinks its type here; the mark has to come with it.
     Left at its full size the header bar measured 430px inside a 420px
     container, and because body sets overflow-x: clip the excess was hidden
     rather than scrolled — so the Pricing button was silently cut off the
     right edge on a phone. */
  .brand-mark { width: 28px; height: 28px; }
  .brand { gap: 9px; }
  .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) {
  /* Something has to go at this width. Security stays: it is the site's
     central argument and the announcement bar links straight to it, so
     hiding it broke a link the visitor had just been offered. Guide,
     Support and Library are reachable from the content and matter after
     purchase rather than before it. */
  .nav a[href="/guide"], .nav a[href="/support"],
  .nav a[href="/library"], .nav a[href="/download"] { 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; } }

/* /buy: the price panel is much shorter than the spec column beside it.
   align-items: center (the default above) shoves it down the page to split
   the difference -- exactly wrong for the highest-priority block on a
   payment screen, which needs to be pinned to the top. */
.hero-grid.align-top { align-items: start; }

.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: .9rem;
  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;
}

/* ── 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; }

.field-tag {
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass);
  border: 1px solid var(--brass-dim);
  border-radius: 3px;
  padding: 1px 6px;
  margin-left: 6px;
  white-space: nowrap;
}

.note-with-fig { overflow: hidden; }
.note-fig {
  float: left;
  width: 120px;
  height: auto;
  border-radius: var(--r);
  margin: 2px 18px 10px 0;
  shape-outside: margin-box;
}
@media (max-width: 640px) {
  .note-fig { float: none; width: 100%; max-width: 220px; margin: 0 auto 14px; display: block; }
}
.note.warn .eyebrow b { color: var(--alert); }

/* ── callout icons ───────────────────────────────────────────────────────────
   A mark leading a callout heading. It goes first, on the left, because it has
   to be read before the label it categorises; a trailing mark on instructional
   copy sits off the reading path and reads as decoration.

   WHICH MARK. Chosen by what the block says, never by which .note variant it
   happens to use — two warn blocks can carry different marks and often should:
     alert (disc + exclamation)  this cannot be undone
     lock  (padlock)             your data stays yours
     question (disc + ?)         somewhere to go for more
   Same subject must get the same mark on every page. Pick by meaning; if
   nothing here fits, draw a fourth rather than stretching one of these.

   DRAWING ONE. The set only stays coherent if a new mark is built like the
   others, so:
     - in-house, on a 0 0 100 100 viewBox, and square — .note-icon is a fixed
       square box, since sizing on width alone would render a portrait icon
       taller than a square one at the same nominal size
     - SOLID, with detail knocked out to transparent, never painted in a
       background colour: the callout tints differ per variant, so a knockout
       is the only treatment that reads correctly on all of them
     - built to the existing metrics where the marks are siblings — alert and
       question share a disc, a 10-unit stroke and a dot at cy=76 r=6, which is
       what makes them read as a pair rather than two same-coloured icons
     - fill on attributes, never an internal <style>: style-src 'self' blocks
       the latter and the mark would render black
     - prefer fill-rule="evenodd" for the knockout (see the padlock) — a
       <mask> needs an id, ids are document-scoped, and two callouts sharing a
       mark on one page would then collide. Use a mask only when the knockout
       is a stroke rather than a closed shape, and give it a wr-ico-* name.

   LAYOUT. .note-head goes on whatever element carries the block's opening
   line — usually the .eyebrow, but on a callout with no heading it goes on
   the paragraph itself rather than inventing one, which is how the two
   headless callouts (/attributions/ and the guide's recommendation) are
   marked. Body prose in a .note shares the eyebrow's 24.75px line box, so
   the same 2px offset centres the mark either way.

   The label must sit in ONE element, even when it is a single <b>:
   flex wraps each contiguous run of bare text in its own anonymous item, so
   "Two things… — <b>and one that does not</b>" would otherwise become two
   items with the gap opening up mid-sentence. Aligned to flex-start because
   these labels wrap to two or three lines on a phone and the mark belongs
   beside the first line; the margin-top optically centres it there. Both the
   mark's size and that offset are tied to the eyebrow's line box (1em at the
   1.65 body line-height ≈ 26.4px) — change .eyebrow's font-size and these
   need recomputing, or the mark drifts off the line and starts to outweigh
   the type it sits beside. */
.note-head { display: flex; align-items: flex-start; gap: 16px; }
.note-head > span { min-width: 0; }
.note-icon { width: 22px; height: 22px; flex: none; margin-top: 2px; color: var(--brass); }
/* Each variant's icon tracks that variant's own heading colour above, so a
   callout only ever shows one accent. Add a pair here when adding a variant. */
.note.warn .note-icon { color: var(--alert); }
.note.reviewed .note-icon { color: var(--text); }

/* Data-freshness callout on pages carrying volatile third-party figures. */
.note.reviewed { border-left-color: var(--muted-2); background: rgba(255,255,255,.02); }
.note.reviewed .eyebrow b { color: var(--text); }
.note.reviewed time { font-family: var(--mono); font-size: .95em; }

/* ── glossary ────────────────────────────────────────────────────────────────
   A definition list rather than a table: it reads correctly when linearised
   by a screen reader, and each <dt> carries an id so a specific term can be
   linked and cited directly. */
.glossary { margin: 0; border-top: 1px solid var(--line); }
.glossary dt {
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass);
  padding-top: 20px;
  scroll-margin-top: 90px;
}
.glossary dd {
  margin: 6px 0 0;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  font-size: .9375rem;
  color: var(--muted);
  max-width: 68ch;
}
@media (min-width: 861px) {
  .glossary { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); gap: 0 28px; }
  .glossary dt { border-top: 0; }
  .glossary dd { margin-top: 0; padding-top: 20px; }
}

/* ── library prose ───────────────────────────────────────────────────────────
   The rest of the site is built from components, so vertical rhythm comes
   from utility classes applied per element. Library articles are long-form
   prose, where that would mean an mt- class on every paragraph. Scoped here
   so a new article gets correct spacing by default and nothing else moves. */
.prose h2 { margin-top: 52px; }
.prose h2 + p { margin-top: 14px; }
.prose p + p { margin-top: 14px; }
.prose .note + h2,
.prose .spec + h2,
.prose .limits + h2 { margin-top: 56px; }

.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; }

/* Content tables in library articles.
   Styled as a ledger — horizontal rules, no vertical borders — to match the
   .spec rows the rest of the site uses, rather than the boxed style the
   mirrored legal documents inherit. The boxed treatment reads as a data dump;
   this reads as part of the argument. */
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 26px 0 6px;
  font-size: .9375rem;
}
.prose thead th {
  text-align: left;
  vertical-align: bottom;
  padding: 0 20px 12px 0;
  border-bottom: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass);
  white-space: nowrap;
}
.prose tbody td {
  padding: 14px 20px 14px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--prose);
}
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody td:first-child { color: var(--text); }
.prose table a { text-decoration: none; border-bottom: 1px solid var(--brass-dim); }
@media (max-width: 640px) {
  .prose table { font-size: .875rem; }
  .prose thead th, .prose tbody td { padding-right: 14px; }
}

/* ── 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(4, minmax(0, 1fr)); gap: 32px 28px; }
/* Five columns since the Library section was added. At repeat(3) the Contact
   column wrapped alone onto a second row, which read as a layout fault. */
@media (max-width: 1000px) { .foot-grid { grid-template-columns: 1.3fr repeat(2, minmax(0, 1fr)); } }
@media (max-width: 780px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 460px) { .foot-grid { grid-template-columns: 1fr; } }

.foot-h {
  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; }
/* Footer links inherited body's 1.65, which is right for prose and far too
   airy for a link that wraps to two lines. Tightening the wrap means the gap
   BETWEEN items has to grow, or a wrapped item visually merges with the next
   one — the list stops reading as a list. */
.foot li { margin-bottom: 12px; line-height: 1.2; }
.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; }
/* Buttons rather than a list of links. As bare 10.5px muted text these read
   as a caption and got skipped; the labels also vary from "THE MONEY" to
   "WHAT THIS APP DELIBERATELY DOES NOT DO", so ragged text gave no shared
   shape to scan down.
   grid-auto-rows: 1fr is what makes every tile the same height — equal
   columns alone only equalise within a row, and the long label wraps to two
   lines while its neighbours take one. */
.faq-index ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 10px;
}
@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 li { display: flex; }
.faq-index a {
  flex: 1;
  display: flex; align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 10px 13px;
  min-height: 44px;
  transition: border-color .12s, background .12s, color .12s;
}
.faq-index a:hover,
.faq-index a:focus-visible {
  color: var(--text);
  border-color: var(--brass-dim);
  background: var(--surface-3);
}

/* A cited source inside an answer. Monospaced and allowed to break anywhere,
   because these are long vendor URLs and a phone will otherwise push the
   answer sideways. */
.faq-cite { font-family: var(--mono); font-size: .85rem; margin-top: 2px; }
.faq-cite a { overflow-wrap: anywhere; }
.faq-cite-label { color: var(--muted); }

/* A labelled file path. The label keeps a fixed column on wide screens so
   macOS and Windows line up as the source intends, and drops to its own line
   on a phone rather than squeezing the path into a few characters. */
.faq-path { display: flex; gap: 12px; margin-top: 2px; font-size: .85rem; }
.faq-path-label { font-family: var(--mono); color: var(--muted); flex: 0 0 72px; }
.faq-path code { font-family: var(--mono); color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .faq-path { display: block; }
  .faq-path-label { display: block; margin-bottom: 1px; }
}

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

/* #faq is the whole FAQ section on /support, linked to directly from the nav
   and from CTAs on other pages — same offset as the per-question anchors
   above, so the sticky announcement bar + header never covers the heading. */
#faq { 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); }