/* ============================================================================
   legal.css — the two pages we owe: /privacy and /terms.

   Register: DOCUMENT, top to bottom (DESIGN.md §2). A legal page is the purest
   case of "a page you read": no lamp, no glass, no gradient surface, no cast
   shadow. Structure comes from hairlines, numbering and space. The nav takes its
   flat `html.classic` treatment for the same reason.

   The :root block below is a VERBATIM COPY of index.html's token block
   (DESIGN.md §3). It is duplicated rather than trimmed so the two can be diffed:
   a trimmed subset would drift silently. If a token changes in index.html, copy
   the whole block across again.
   ============================================================================ */

/* ============================================================================
   Fonts — self-hosted, the same unmodified Google Fonts subsets index.html serves,
   and the same three families this page always asked the css2 API for: no props on
   a legal page, so no Caveat ink, no Special Elite typewriter, no italic serif.
   Paths are relative to this file, which sits at the root, so they resolve for both
   /privacy and /terms. Licences: fonts/LICENSE-*.txt.
   ============================================================================ */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(fonts/cormorant-garamond-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(fonts/cormorant-garamond-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/libre-franklin-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/libre-franklin-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/space-mono-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/space-mono-400-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---------- type families ---------- */
  --serif: "Cormorant Garamond", Georgia, serif; /* the story */
  --sans: "Libre Franklin", system-ui, sans-serif; /* the interface */
  --mono: "Space Mono", monospace; /* file markings */
  --hand: "Caveat", cursive; /* prop: ink */
  --typed: "Special Elite", monospace; /* prop: typewriter */

  /* ---------- surfaces (Document ground) ---------- */
  --s-0-rgb: 10 10 10; /* components — the page ground is also a scrim */
  --s-0: rgb(var(--s-0-rgb)); /* page */
  --s-1-rgb: 14 15 18; /* components — the raised surface is also translucent chrome */
  --s-1: rgb(
    var(--s-1-rgb)
  ); /* raised: panels, modals, cards, canvas visuals */
  --s-2: #141519; /* inset: fields, wells, nested cards */
  --sheen: 255 255 255; /* white. alpha at point of use — washes, paper highlights */
  --wash-1: rgb(var(--sheen) / 0.05); /* hover lift on any surface */
  --wash-2: rgb(var(--sheen) / 0.08); /* active / stronger hover */

  /* ---------- hairlines ---------- */
  --line-soft: #17181c; /* section dividers — whisper */
  --line: #212329; /* default border */
  --line-strong: #3a3d42; /* interactive border: fields, quiet buttons */
  --line-hover: #5c6068; /* interactive border, hovered */

  /* ---------- text on dark ---------- */
  --ink: #ece6d8; /* headings */
  --text: #e8e2d4; /* body, emphasis */
  --muted: #a9a294; /* sub-copy, links            — 7.8:1 */
  --faint: #827d6f; /* labels, captions, colophon — 4.8:1 */

  /* ---------- text on paper ---------- */
  --ink-paper: #2b2620;
  --muted-paper: #4a4338;
  --faint-paper: #6f6657;

  /* ---------- physical objects ---------- */
  --paper: #eee7d6; /* pressable paper: primary button, chip-on */
  --paper-hi: #f6f1e4; /* the same, hovered */
  --paper-sheet: #f1ead9; /* the letter */
  --paper-ink: #16130d; /* text on paper */
  --cork: #97714b;
  --thread: #a82531;
  --ink-blue: #26408f;
  /* the pushpin dome — one object, three placements (letter, classic board, intro).
     It was written twice with identical stops and once with different ones. */
  --pin-a: #ff8e7e;
  --pin-b: #ee4233;
  --pin-c: #cc1d11;
  --pin-d: #7c0f08;

  /* ---------- the lamp (one light source, Scene only) ---------- */
  --lamp: 255 214 160; /* one hue. alpha at point of use, never above .12 */
  --shade: 0 0 0; /* the dark. alpha at point of use — vignettes, scrims,
                       the fade into the next screen. Same idiom as --lamp:
                       one value, alpha where it is used, never a new colour. */

  /* ---------- semantic ---------- */
  --ok: #5fcb92;
  --err: #d98a8a;

  /* ---------- brand — PROVISIONAL, see DESIGN.md §6 ----------
     Defined as rgb components so alpha uses (focus ring, the info icon, the
     copied-state pills) route through the SAME two values — a future rebrand
     stays an edit to these two lines. Do not add a third brand colour. */
  --brand-a-rgb: 26 171 95;
  --brand-b-rgb: 24 128 194;
  --brand-a: rgb(var(--brand-a-rgb));
  --brand-b: rgb(var(--brand-b-rgb));

  /* ---------- sim HUD — QUARANTINED, see DESIGN.md §6 ----------
     Sealed inside #sim. The chip/web literals there are alpha-composited from
     --p (cursor proximity) per frame and are a documented exception to §3. */
  --hud: #6cc0ff;

  /* ---------- privacy map — QUARANTINED light UI ----------
     #privacy's node renders the real product on a WHITE surface — a deliberate
     callback, not paper and not a Document panel, so it shares no token with
     either. Sealed inside #privacy exactly as --hud is sealed inside #sim. */
  --pv-surface: #f7f7f3;
  --pv-card: #fff;
  --pv-line: #d9d8d0;
  --pv-grid: rgba(20, 22, 30, 0.075);
  --pv-string: #161616;
  --pv-ink: #16181c; /* decrypted */
  --pv-cipher: #b6b3a8; /* ciphertext */
  --pv-faint: #8c8a80; /* the tag + lock at rest */
  --e-pv:
    0 10px 26px rgba(20, 22, 30, 0.14), 0 2px 5px rgba(20, 22, 30, 0.08);

  /* ---------- type scale — 8 steps, no half-pixels, nothing below 12px ---------- */
  --fs-micro: 12px; /* file markings, legal, colophon */
  --fs-sm: 14px; /* secondary UI, captions */
  --fs-body: 16px; /* body copy */
  --fs-lg: 18px; /* lead paragraphs, primary buttons */
  --fs-h3: 24px; /* index names, panel headings */
  --fs-h2: clamp(28px, 2.8vw, 38px); /* modal titles, letter lead */
  --fs-h1: clamp(34px, 3.4vw, 52px); /* hero */
  --fs-display: clamp(
    40px,
    4.6vw,
    66px
  ); /* intro H1, module names, privacy */

  --lh-tight: 1.1; /* display */
  --lh-head: 1.2; /* headings */
  --lh-ui: 1.45; /* interface, buttons, labels */
  --lh-body: 1.7; /* body copy */

  /* ---------- tracking — two values, everything else is 0 ---------- */
  --tr-label: 0.14em; /* mono uppercase file markings */
  --tr-tight: -0.02em; /* display + wordmark */

  /* ---------- spacing — 4px base ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  --section-y: clamp(
    72px,
    11vh,
    140px
  ); /* vertical rhythm between sections */
  --gutter: clamp(32px, 5vw, 84px); /* horizontal page gutter */
  --wrap: 1400px; /* content max width */
  --measure: 46ch; /* body copy max width */

  /* ---------- motion — three durations, two easings ---------- */
  --t-fast: 0.15s; /* state: hover, focus, press */
  --t-base: 0.28s; /* reveal: modal, disclosure, fade */
  --t-slow: 0.55s; /* mood: nav promotion, progressive reveal, cross-fade */
  --ease: cubic-bezier(0.2, 0.8, 0.3, 1);
  --ease-pop: cubic-bezier(0.34, 1.6, 0.64, 1); /* pins and locks only */

  /* ---------- radius ---------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 22px; /* full-bleed Scene panels only — single use, the intro banner */
  --r-paper: 3px; /* paper objects. Paper does not have 14px corners */
  --r-pill: 999px;

  /* ---------- elevation, register-scoped ---------- */
  --e-float: 0 4px 14px rgba(0, 0, 0, 0.16); /* floating chrome: nav pill, mode toggle.
     Deliberately far lighter than --e-doc — a heavy shadow under the nav was
     explicitly rejected; the pill must read as blended, not as a page-wide bar. */
  --e-doc: 0 6px 20px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.3);
  --e-scene:
    0 16px 44px rgba(0, 0, 0, 0.45), 0 3px 10px rgba(0, 0, 0, 0.3);
  --e-object:
    0 40px 90px rgba(0, 0, 0, 0.55), 0 4px 14px rgba(0, 0, 0, 0.4);

  /* ---------- text legibility over Scene ----------
   Floating text (the hero and the nav over cork) carries its own
     shadow so it stays readable on the newspaper and the lit board. Not
     elevation — the text does not sit above anything; it is being kept legible. */
  --ts-scene: 0 2px 18px rgba(0, 0, 0, 0.65), 0 0 2px rgba(0, 0, 0, 0.4);
  --ts-ui: 0 0 6px rgba(0, 0, 0, 0.45);
}

/* ============================== base ==============================
   Copied from index.html so the two documents sit on the same ground. */
* {
  box-sizing: border-box;
}
html {
  background: var(--s-0);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) var(--s-0);
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--s-0);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
::selection {
  background: var(--ink-blue);
  color: var(--paper-hi);
}
::-webkit-scrollbar {
  width: 9px;
}
::-webkit-scrollbar-track {
  background: var(--s-0);
}
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--r-sm);
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ============================== top navigation ==============================
   Same pill, same 54px geometry, same tokens as index.html, but flat: a hairline
   instead of glass, because this page is a Document and never a lit Scene
   (DESIGN.md §2, and the html.classic rule the nav already carries there).
   The CTA is permanently in its `promoted` state: there is no hero here owning
   the screen, so the signup is the only action in view from the first pixel. */
#topnav {
  position: fixed;
  top: var(--sp-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  height: 54px;
  padding: 0 var(--sp-3) 0 var(--sp-5);
  max-width: calc(100vw - var(--sp-6));
  background: var(--s-1);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--e-float);
}
.i-logo {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-lg);
  letter-spacing: var(--tr-tight);
  text-decoration: none;
  background: linear-gradient(90deg, var(--brand-a), var(--brand-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.i-links {
  display: flex;
  gap: var(--sp-5);
}
.i-links a {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  color: var(--muted);
  text-decoration: none;
  transition: color var(--t-fast);
}
.i-links a:hover {
  color: var(--text);
}
/* which of the two documents you are standing in: the nav lists both, so it has
   to say which one you opened. */
.i-links a[aria-current="page"] {
  color: var(--text);
}
.i-navcta {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--wash-1);
  transition:
    color var(--t-fast),
    border-color var(--t-fast),
    background var(--t-fast);
}
.i-navcta:hover {
  border-color: var(--line-hover);
  background: var(--wash-2);
}

/* ============================== the document ==============================
   One column. No sidebar index: at this length the specific thing it would save
   is a few seconds of scrolling, and a two-column docs layout on a legal page is
   borrowed authority (DESIGN.md §1). Structure is the numbering and the rules.

   The section number hangs in the left margin as a mono file marking, the same
   label recipe the colophon uses. It is what makes this read as a numbered
   document rather than a long post, which is what lets a reply say "section 4"
   and be understood. */
.lg-wrap {
  max-width: calc(var(--measure) + 200px);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.lg-head {
  padding: calc(54px + var(--sp-4) + var(--section-y)) 0 var(--sp-8);
}
.lg-h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--ink);
  margin: 0;
}
.lg-lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  color: var(--text);
  max-width: var(--measure);
  margin: var(--sp-5) 0 0;
}
/* file marking: mono, micro, tracked, uppercase, --faint (DESIGN.md §4) */
.lg-meta {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  line-height: var(--lh-ui);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--faint);
  margin: var(--sp-6) 0 0;
}
main.lg {
  counter-reset: sec;
}
.lg-s {
  counter-increment: sec;
  position: relative;
  padding: var(--sp-7) 0 var(--sp-7) 76px;
  border-top: 1px solid var(--line-soft);
}
.lg-h2 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-head);
  color: var(--ink);
  margin: 0 0 var(--sp-4);
  scroll-margin-top: calc(54px + var(--sp-6));
}
.lg-h2::before {
  content: counter(sec, decimal-leading-zero);
  position: absolute;
  left: 0;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  color: var(--faint);
  /* seated against the cap height of the 24px heading, not its line box */
  padding-top: 6px;
}
.lg-s p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--muted);
  max-width: var(--measure);
  margin: 0 0 var(--sp-4);
}
.lg-s p:last-child {
  margin-bottom: 0;
}
/* emphasis moves along the colour ladder, never into italics (DESIGN.md §4) */
.lg-em {
  color: var(--text);
}
.lg-s a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
  transition: text-decoration-color var(--t-fast);
}
.lg-s a:hover {
  text-decoration-color: var(--line-hover);
}
code {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  color: var(--text);
}

/* a list is a set of hairline-ticked rows, not discs: Document takes its
   structure from hairlines, and this is the smallest one on the page */
.lg-list {
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding: 0;
  max-width: var(--measure);
}
.lg-list li {
  position: relative;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--muted);
  padding-left: var(--sp-5);
  margin-bottom: var(--sp-2);
}
.lg-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 8px;
  height: 1px;
  background: var(--line-strong);
}

/* the technical inventory: a mono key, and what it is for. Used for the browser
   storage keys and the hosts this page contacts, where the exact string IS the
   claim and has to be checkable character by character against the source. */
.lg-dl {
  margin: 0 0 var(--sp-4);
  max-width: var(--measure);
}
.lg-dl dt {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  color: var(--text);
  margin-top: var(--sp-4);
  overflow-wrap: anywhere;
}
.lg-dl dt:first-child {
  margin-top: 0;
}
.lg-dl dd {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--muted);
  margin: var(--sp-1) 0 0;
}

/* the one place either document raises its voice: the limit of the promise,
   put where nobody has to go looking for it. Hairline, no fill, no glow. */
.lg-note {
  border-left: 1px solid var(--line-strong);
  padding-left: var(--sp-5);
  margin: var(--sp-5) 0;
  max-width: var(--measure);
}
.lg-note p {
  color: var(--text);
}

@media (max-width: 700px) {
  .lg-s {
    padding-left: 0;
  }
  .lg-h2::before {
    position: static;
    display: block;
    padding: 0 0 var(--sp-2);
  }
}

/* ============================== footer ==============================
   The colophon from index.html, minus the one control that needs the contact
   modal: here it is a real mailto instead, so nothing on these pages is styled
   but inert. */
#footer {
  position: relative;
  background: var(--s-0);
  border-top: 1px solid var(--line-soft);
  padding: var(--section-y) 0 var(--sp-7);
  margin-top: var(--section-y);
}
.ft-wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.ft-top {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(40px, 5vw, 96px);
  align-items: start;
}
.ft-mark {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-h3);
  letter-spacing: var(--tr-tight);
  display: inline-block;
  text-decoration: none;
  background: linear-gradient(90deg, var(--brand-a), var(--brand-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ft-line {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--muted);
  margin: var(--sp-4) 0 0;
  max-width: 30ch;
}
.ft-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3) var(--sp-5);
}
.ft-act {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  color: var(--muted);
  text-decoration: none;
  transition: color var(--t-fast);
}
.ft-act:hover {
  color: var(--ink);
}
/* `btn-quiet` — see DESIGN.md §5 */
.ft-act-cta {
  font-weight: 600;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: var(--sp-3) var(--sp-5);
  transition:
    color var(--t-fast),
    border-color var(--t-fast),
    background var(--t-fast);
}
.ft-act-cta:hover {
  border-color: var(--line-hover);
  background: var(--wash-1);
}
.ft-rule {
  height: 1px;
  background: var(--line-soft);
  margin: clamp(40px, 6vh, 68px) 0 var(--sp-5);
}
.ft-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.ft-copy {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  line-height: var(--lh-ui);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--faint);
}
.ft-legal {
  display: flex;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.ft-legal a {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  line-height: var(--lh-ui);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--faint);
  text-decoration: none;
  transition: color var(--t-fast);
}
.ft-legal a:hover {
  color: var(--muted);
}
@media (max-width: 920px) {
  .ft-top {
    grid-template-columns: 1fr;
    gap: var(--sp-7);
  }
  .ft-actions {
    justify-content: flex-start;
  }
}
@media (max-width: 520px) {
  .ft-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }
}

/* ============================== the phone layout ==============================
   Scoped to html.mobile, set before first paint by the inline script in each page's
   head on any device that fails the desktop test (pointer:fine AND >= 900px). Same
   hook and same reasoning as index.html: the desktop pages came out of this pass
   unchanged, so nothing here can be reached by one. Sits last so the cascade is not
   an argument. */

/* the pill is centred and shrink-to-fit, and these pages give it FOUR things to hold:
   the wordmark, both document links, and the signup. At 375px that is wider than the
   screen, so it becomes a full-width bar at the same inset — same surface, same
   radius, same hairline, sized to what it is on. */
/* width OR height: a phone held sideways is ~930x430, which passes the width test */
@media (max-width: 950px), (max-height: 620px) {
  html.mobile {
    --fs-display: clamp(31px, 8.4vw, 44px);
    --fs-h2: clamp(23px, 6.2vw, 32px);
    --gutter: clamp(18px, 5vw, 32px);
    --section-y: clamp(56px, 8svh, 96px);
  }
  html.mobile #topnav {
    left: var(--sp-3);
    right: var(--sp-3);
    width: auto;
    max-width: none;
    transform: none;
    justify-content: space-between;
    gap: var(--sp-2);
    height: 50px;
    /* measured: at 375px the four items plus this padding come to 333 of the 351 the bar
       has. The desktop 24px left inset and 24px link gap put it 2px over. */
    padding: 0 var(--sp-2) 0 var(--sp-3);
  }
  html.mobile .i-logo {
    font-size: var(--fs-body);
  }
  html.mobile .i-links {
    gap: var(--sp-2);
  }
  html.mobile .i-navcta {
    padding: var(--sp-2) var(--sp-3);
  }
  /* the 44px hit-target floor: these are 14px text links with no box of their own */
  html.mobile .i-links a,
  html.mobile .ft-act:not(.ft-act-cta),
  html.mobile .ft-legal a {
    display: inline-block;
    padding: var(--sp-3) 0;
  }
  /* the heading's anchor offset is the nav's height, and the nav is 4px shorter here */
  html.mobile .lg-h2 {
    scroll-margin-top: calc(50px + var(--sp-6));
  }
}

/* Below ~360px the bar's four items cannot share a line. index.html drops its single
   Privacy link at this width, because that page has the same link in its footer; here
   the two links ARE the navigation between the only two documents on the site, so
   nothing may be dropped and the bar wraps to two rows instead. */
@media (max-width: 359px) {
  html.mobile #topnav {
    flex-wrap: wrap;
    height: auto;
    padding: var(--sp-2) var(--sp-3);
    row-gap: var(--sp-1);
    border-radius: var(--r-lg);
  }
}