/*
 * Milon Training Tracker — Design Tokens for Standalone HTML Pages
 *
 * Import in any standalone HTML doc that lives in /public:
 *   <link rel="stylesheet" href="/design-tokens.css">
 *
 * Derived from src/styles/fonts.css and src/components/ui/dashboard-primitives.tsx.
 * This is the single source of truth for standalone pages — update here when
 * the design system changes, never embed tokens inline in individual HTML files.
 *
 * The two legal pages (privacy.html, terms.html) are the exception to the app's look:
 * they wear the landing site's, from the last section of this file, under
 * <html class="legal"> (#818). Nothing above that section changes for them.
 */

/* The typeface is served from this server (#631), never from Google Fonts. The files, where they came
   from and their checksums: /fonts/SOURCE.txt. KEEP THIS BLOCK EQUAL TO THE ONE IN
   src/styles/fonts.css (`outsideHosts.test.ts` compares them); its comment says why the weight ranges
   are 300 to 800 and 400 to 600. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/Geist-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/GeistMono-Variable.woff2') format('woff2');
}

/* ── Design Tokens ─────────────────────────────────────────────────────── */

:root {
  /* Typography */
  --font-display: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', 'JetBrains Mono', monospace;

  /* Text */
  --cream:        #f5ede1;
  --cream-soft:   rgba(245, 237, 225, 0.72);
  --cream-dim:    rgba(245, 237, 225, 0.50);
  --cream-faint:  rgba(245, 237, 225, 0.35);

  /* Accents */
  --amber:        #e8c5a0;
  --amber-light:  #f5d4a8;
  --amber-glow:   rgba(232, 197, 160, 0.40);

  /* Warnings */
  --terracotta:       #c66e4d;
  --terracotta-soft:  rgba(198, 110, 77, 0.16);
  --terracotta-text:  #dd8a68; /* small text on a tinted dark surface (AA) */

  /* Backgrounds */
  --bg-page:        linear-gradient(to bottom in oklab, #322f36 0%, #423d49 14%, #554a5a 28%, #8c6653 54%, #453a36 78%, #2c2c2c 100%);
  --bg-page-solid:  #322f36;
  --bg-card:        rgba(245, 237, 225, 0.05);
  --bg-card-hover:  rgba(245, 237, 225, 0.08);
  --bg-code:        rgba(28, 24, 22, 0.65);
  --bg-input:       rgba(245, 237, 225, 0.05);

  /* Device image mount (SB-7). Light on purpose: product renders are shot on
     white, so a tier-1 photo needs a light mount, and a glyph must share it or
     the two read as different systems. The glyphs themselves are transparent
     SVG on currentColor -- one asset, both contexts -- so this surface is for
     the photo half, not a second colourway (G-1, resolved 2026-08-29).
     Was a raw #f2efe9 on 7 of the 14 artboard slots. */
  --bg-device-slot: #f2efe9;

  /* Borders */
  --border:             rgba(245, 237, 225, 0.12);
  --border-strong:      rgba(245, 237, 225, 0.20);
  --border-amber:       rgba(232, 197, 160, 0.35);
  --border-input:       rgba(245, 237, 225, 0.14);
  --border-input-focus: rgba(232, 197, 160, 0.55);

  /* Shadows */
  --shadow-card:   0 24px 48px -20px rgba(20, 14, 12, 0.55);
  --shadow-button: 0 12px 32px -8px rgba(20, 14, 12, 0.55), inset 0 1px 0 rgba(245, 237, 225, 0.06);

  /* Radius */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-full: 9999px;
}

/* ── Reset / Base ──────────────────────────────────────────────────────── */

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

html {
  background: var(--bg-page-solid);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  /* No font-feature-settings: see src/styles/fonts.css (#631, ruling R15). */
  font-size: 1rem;
  line-height: 1.65;
  color: var(--cream);
  background: var(--bg-page);
  background-attachment: fixed;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Contrast scrim ────────────────────────────────────────────────────── */

/* Opt-in, for a page that is read rather than scanned: `class="reading-scrim"`
   on <body>. On the gradient's tan peak (#8c6653) cream text is 4.37:1 and the
   body tier (--cream-soft) is 3.1:1, short of WCAG AA's 4.5:1. Behind this
   layer they are 7.2:1 and 4.7:1. The values are DESIGN.md's ("Contrast
   scrim"): full strength over the middle of the screen, gone at the top and
   the bottom, where the gradient is dark already and should show. */
body.reading-scrim::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(24, 19, 17, 0) 0%,
    rgba(24, 19, 17, 0.36) 33.333%,
    rgba(24, 19, 17, 0.36) 66.667%,
    rgba(24, 19, 17, 0) 100%
  );
}
body.reading-scrim > * { position: relative; }

/* ── Typography ────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--cream);
  line-height: 1.1;
  letter-spacing: -0.022em;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 500; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 500; }
h3 { font-size: 1.25rem; font-weight: 500; }
h4 { font-size: 1rem; font-weight: 600; }

p { color: var(--cream-soft); margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--amber); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--amber-light); }

strong { color: var(--cream); font-weight: 600; }

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: rgba(232, 197, 160, 0.12);
  color: var(--amber);
  padding: 0.15em 0.45em;
  border-radius: 4px;
}

pre {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 1rem 1.25rem;
  overflow-x: auto;
  line-height: 1.75;
  color: var(--amber);
}

pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  color: inherit;
}

/* ── Layout Utilities ──────────────────────────────────────────────────── */

.container {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container-wide {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── Cards ─────────────────────────────────────────────────────────────── */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.5rem;
}

.card-amber {
  background: rgba(232, 197, 160, 0.05);
  border: 1px solid var(--border-amber);
  border-radius: var(--r-lg);
  padding: 1.5rem;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.25rem;
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--cream);
  transition: background 0.15s, border-color 0.15s;
  text-decoration: none;
  line-height: 1;
}

.btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-amber);
  color: var(--cream);
}

.btn-amber {
  background: rgba(232, 197, 160, 0.10);
  border-color: rgba(232, 197, 160, 0.30);
  color: var(--amber);
}

.btn-amber:hover {
  background: rgba(232, 197, 160, 0.16);
  color: var(--amber-light);
}

/* ── Badges / Chips ────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2em 0.65em;
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  background: rgba(245, 237, 225, 0.06);
  border: 1px solid var(--border);
  color: var(--cream-dim);
  white-space: nowrap;
}

.badge-amber {
  background: rgba(232, 197, 160, 0.12);
  border-color: rgba(232, 197, 160, 0.28);
  color: var(--amber);
}

.badge-terracotta {
  background: var(--terracotta-soft);
  border-color: rgba(198, 110, 77, 0.32);
  color: var(--terracotta);
}

/* ── Form ──────────────────────────────────────────────────────────────── */

.input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: var(--r-md);
  padding: 0.625rem 1rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--cream);
  outline: none;
  transition: border-color 0.15s;
  min-height: 44px;
}

.input:focus { border-color: var(--border-input-focus); }
.input::placeholder { color: var(--cream-faint); }

/* ── Dividers ──────────────────────────────────────────────────────────── */

.hairline {
  height: 1px;
  background: linear-gradient(90deg, rgba(245,237,225,0.22), rgba(245,237,225,0.06) 70%, transparent);
  border: none;
  margin: 2rem 0;
}

hr { composes: hairline; }

/* ── Text Utilities ────────────────────────────────────────────────────── */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cream-dim);
  font-weight: 400;
}

.text-amber   { color: var(--amber); }
.text-dim     { color: var(--cream-dim); }
.text-faint   { color: var(--cream-faint); }
.text-warn    { color: var(--terracotta); }
.font-mono    { font-family: var(--font-mono); }

/* ── Callouts ──────────────────────────────────────────────────────────── */

.callout {
  background: rgba(232, 197, 160, 0.06);
  border-left: 2px solid var(--amber);
  padding: 0.75rem 1rem;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 0.875rem;
  color: var(--cream-soft);
}

.callout-warn {
  background: var(--terracotta-soft);
  border-left-color: var(--terracotta);
}

/* ── Step Number ───────────────────────────────────────────────────────── */

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(232, 197, 160, 0.12);
  border: 1px solid rgba(232, 197, 160, 0.30);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--amber);
  line-height: 1;
}

.step-num-lg {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.9rem;
}

/* ── Tables ────────────────────────────────────────────────────────────── */

table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }

th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(232, 197, 160, 0.35);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream-dim);
  font-weight: 500;
}

td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(245, 237, 225, 0.06);
  color: var(--cream-soft);
  vertical-align: top;
}

tr:last-child td { border-bottom: none; }
tr:nth-child(odd) td { background: rgba(245, 237, 225, 0.02); }

/* ── Scrollbars ────────────────────────────────────────────────────────── */

* { scrollbar-width: thin; scrollbar-color: rgba(232,197,160,0.30) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(232,197,160,0.30); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(232,197,160,0.50); }

/* ── The legal pages: the landing site's look (#818) ───────────────────── */

/* privacy.html and terms.html are read by people who arrive from the landing site's footer, so
   they wear its look: sand, ink, a condensed uppercase display face and solid rules, as in
   landingpage/src/styles/global.css and its components. Copied as values, never linked: the app
   serves these pages, and nothing here depends on the landing site's build. Everything is scoped
   to <html class="legal">; the app's tokens and the rules above stay as they are for any other
   standalone page.

   One look in two schemes. The landing site has one scheme (light, sand). These pages are also
   opened from inside the app, which is dark, and they are read at length, so under
   prefers-color-scheme: dark they take the landing site's ink bands (the "three things" and
   "No six-pack promises" sections): ink ground, tan headings, mute text, tan edges and sand
   shadows. Printing always uses the light scheme.

   The typeface is served from this server: the files, their licences and where they came from are
   /fonts/SOURCE.txt. The unicode-range is the landing site's (the Latin block). */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/Archivo-Variable.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: 'Big Shoulders Display';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/BigShouldersDisplay-Variable.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;
}

html.legal {
  /* The landing site's palette, by its own names (landingpage/src/styles/global.css). */
  --sand: #e3c097;
  --ink: #17120f;
  --paper: #fffaf1;
  --tan: #f3d9b8;
  --mute: #e2cfb6;
  --soft: #4d4035;
  --f3: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f3d: 'Big Shoulders Display', 'Archivo Narrow', Impact, sans-serif;

  /* What the page uses, per scheme. Light: ink on sand 10.8:1, --soft on sand 5.8:1, ink on
     paper 17.9:1. */
  --lg-ground: var(--sand);
  --lg-head: var(--ink);
  --lg-text: var(--ink);
  --lg-quiet: var(--soft);
  --lg-edge: var(--ink);
  --lg-card: var(--paper);
  --lg-card-text: var(--ink);
  --lg-card-edge: var(--ink);
  --lg-card-rule: var(--ink);
  --lg-shadow: var(--ink);

  color-scheme: light;
  background: var(--lg-ground);
}

@media screen and (prefers-color-scheme: dark) {
  /* Dark: the landing site's ink band. Mute on ink 12.2:1, tan on ink 13.7:1; the quiet tier
     stays above 7:1. A card is lifted off the ground a little, never a paper slab. */
  html.legal {
    --lg-ground: var(--ink);
    --lg-head: var(--tan);
    --lg-text: var(--mute);
    --lg-quiet: color-mix(in oklab, var(--mute) 78%, var(--ink));
    --lg-edge: var(--tan);
    --lg-card: color-mix(in oklab, var(--tan) 7%, var(--ink));
    --lg-card-text: var(--mute);
    --lg-card-edge: var(--tan);
    --lg-card-rule: color-mix(in oklab, var(--tan) 55%, var(--ink));
    --lg-shadow: var(--sand);
    color-scheme: dark;
  }
}

/* One ink band per page in the light scheme, as the landing site sets its "No six-pack
   promises" section: ink from edge to edge, tan and mute text, paper cards with a tan edge and a
   sand shadow. In the dark scheme the whole page is that band already, so it adds nothing. */
@media screen and (prefers-color-scheme: light) {
  html.legal .part.band {
    --lg-head: var(--tan);
    --lg-text: var(--mute);
    --lg-quiet: var(--mute);
    --lg-edge: var(--tan);
    --lg-card-edge: var(--tan);
    --lg-shadow: var(--sand);
    color: var(--lg-text);
    /* Edge to edge from inside .wrap: the band's own ink, and a border image's fill pushed out to
       both sides (an outset paints, and never makes the page scroll sideways). */
    background: var(--ink);
    border: 0;
    border-image: linear-gradient(var(--ink), var(--ink)) fill 0 / 0 / 0 100vmax;
    padding-block: clamp(48px, 6vw, 88px);
  }
  html.legal .part.band + .part { margin-top: clamp(56px, 7vw, 104px); }
}

html.legal body {
  min-height: 100dvh;
  color: var(--lg-text);
  background: var(--lg-ground);
  font-family: var(--f3);
  font-size: 1.0625rem;
  line-height: 1.6;
  /* Archivo's space is narrow (0.21em; a humanist sans is near 0.27em). The landing site sets
     short lines; a legal text is read word by word, so its words get a little more room. */
  word-spacing: 0.05em;
  overflow-wrap: break-word;
}

html.legal ::selection { color: var(--lg-ground); background: var(--lg-head); }

html.legal,
html.legal * { scrollbar-color: color-mix(in oklab, var(--lg-text) 40%, transparent) transparent; }
html.legal ::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--lg-text) 40%, transparent); }

/* The landing site's .wrap: one width for the header, the text and the footer. */
html.legal .wrap {
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

/* ── Type ── */

html.legal h1,
html.legal h2,
html.legal h3 {
  color: var(--lg-head);
  font-family: var(--f3d);
  font-weight: 900;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}
html.legal h1 {
  font-size: clamp(min(3.5rem, 15vw), 9vw, 7.5rem);
  line-height: 0.86;
}
html.legal h2 {
  font-size: clamp(2.25rem, 3.6vw, 3.5rem);
  line-height: 0.9;
}
html.legal h3 {
  font-size: clamp(1.5rem, 2vw, 1.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
}

html.legal p,
html.legal li,
html.legal td,
html.legal address { color: inherit; text-wrap: pretty; }
html.legal p { margin: 0; }
html.legal strong { color: inherit; font-weight: 700; }
html.legal address { font-style: normal; font-weight: 500; }
html.legal .nowrap,
html.legal a[href^="mailto:"] { white-space: nowrap; }

/* Links are ink (tan in the dark) and always underlined: they never rely on colour. */
html.legal a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: none;
}
html.legal a:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}
@media (hover: hover) {
  html.legal a:hover { color: inherit; text-decoration-thickness: 3px; }
}

/* ── The page ── */

/* The landing site's header: the wordmark, alone (these pages have no sign-in link). */
html.legal .top { padding-block: 22px 0; }
html.legal .wordmark {
  font-family: var(--f3d);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--lg-head);
}

html.legal .mast { padding-block: clamp(40px, 6vw, 88px) clamp(24px, 3vw, 40px); }

/* A part of the page: its title (or label) in the left column, its text in the right one, under
   a solid rule, as a record is kept. One column below 64rem. */
html.legal .part {
  margin-top: clamp(48px, 6vw, 88px);
  padding-top: clamp(18px, 2vw, 26px);
  border-top: 2px solid var(--lg-edge);
}
html.legal .part.first {
  margin-top: 0;
  border-top-width: 3px;
}
html.legal .part > h2,
html.legal .part > .label { margin-bottom: clamp(18px, 2.4vw, 28px); }
html.legal h2[id] { scroll-margin-top: 1.5rem; }

/* The label of a part that has no heading of its own: the date, "In short", "Contents". */
html.legal .label {
  color: var(--lg-head);
  font-family: var(--f3d);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
html.legal .label.updated {
  font-family: var(--f3);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}

@media (min-width: 64rem) {
  html.legal .part {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: clamp(32px, 5vw, 72px);
    align-items: start;
  }
  html.legal .part > h2,
  html.legal .part > .label { margin-bottom: 0; }
  /* The title of the part being read stays in view beside its text. */
  html.legal .part > h2 {
    position: sticky;
    top: 1.5rem;
  }
}

/* The text column: 70 to 75 characters a line; the table's card may run wider. */
html.legal .flow { max-width: 46rem; }
html.legal .flow > p,
html.legal .flow > ul,
html.legal .flow > address { max-width: 35rem; }
html.legal .flow > * + * { margin-top: 1.1em; }
html.legal .flow > h3 { margin-top: 2.4rem; }
html.legal .flow > :first-child { margin-top: 0; }

html.legal .lede {
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--lg-head);
}
html.legal .quiet,
html.legal .small { color: var(--lg-quiet); }
html.legal .small { font-size: 0.9375rem; }

/* Lists: a short solid bar, the landing site's mark, in place of a bullet. The marker is an empty
   string, not `none`: Safari's VoiceOver stops announcing a list whose list-style is none. */
html.legal ul { list-style-type: ''; padding: 0; }
html.legal ul > li { position: relative; padding-left: 1.5rem; }
html.legal ul > li + li { margin-top: 0.55em; }
html.legal ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 0.75rem;
  height: 2px;
  background: currentColor;
}

/* A paper card with an ink edge and a hard shadow, as the landing site's quote and form. Room on
   the right for the shadow, so it never touches the edge of a phone's screen. */
html.legal .paper {
  margin-right: 8px;
  padding: clamp(18px, 2.4vw, 28px);
  color: var(--lg-card-text);
  background: var(--lg-card);
  border: 2px solid var(--lg-card-edge);
  border-radius: 10px;
  box-shadow: 8px 8px 0 var(--lg-shadow);
}
html.legal .flow > .paper + * { margin-top: calc(1.1em + 8px); }

/* ── Terms: "In short", the contents, the section numbers ── */

html.legal .short > li { font-weight: 500; }

html.legal .toc { list-style-type: ''; padding: 0; }
html.legal .toc > li { border-top: 2px solid var(--lg-edge); }
html.legal .toc a {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-block: 0.6rem;
  font-weight: 600;
  text-decoration: none;
}
@media (hover: hover) {
  html.legal .toc a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
}
html.legal .toc .num {
  flex: 0 0 2rem;
  font-family: var(--f3d);
  font-size: 1.375rem;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* Two columns that read down, 01 to 08 and then 09 to 16, as the numbers run. */
@media (min-width: 40rem) {
  html.legal .toc {
    columns: 2;
    column-gap: clamp(24px, 3vw, 40px);
  }
  html.legal .toc > li { break-inside: avoid; }
}

/* The number of a section of the terms, above its title. */
html.legal h2 > .num {
  display: block;
  margin-bottom: 0.3em;
  font-size: 0.5em;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* ── Privacy: the outside services ── */

html.legal .services { padding-block: 4px; }
/* At the body's size: Archivo's space is narrow (0.21em), and at 16px words in a long cell ran together. */
html.legal .services table {
  width: 100%;
  border-collapse: collapse;
  font-size: inherit;
}
html.legal .services tr:nth-child(odd) td { background: none; }
html.legal .services th[scope=row],
html.legal .services td {
  padding: 18px 0;
  vertical-align: top;
  text-align: left;
  border-bottom: 0;
}
/* Rows ruled like the rest of the page: 2px, solid. */
html.legal .services tr + tr > * { border-top: 2px solid var(--lg-card-rule); }
/* A row header, set as a label: the rules above style a bare th as an eyebrow. */
html.legal .services th[scope=row] {
  width: 10rem;
  padding-right: 24px;
  color: var(--lg-card-text);
  font-family: var(--f3d);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
html.legal .services td { color: var(--lg-card-text); line-height: 1.55; }
html.legal .services td > * + * { margin-top: 0.75em; }

/* On a phone the six rows stack: the service's name, then what it receives, at full width. */
@media (max-width: 40rem) {
  html.legal .services table,
  html.legal .services tbody,
  html.legal .services tr,
  html.legal .services th[scope=row],
  html.legal .services td { display: block; width: auto; }
  html.legal .services th[scope=row] { padding: 22px 0 8px; }
  html.legal .services td { padding: 0 0 22px; }
  html.legal .services tr + tr > * { border-top: 0; }
  html.legal .services tr + tr { border-top: 2px solid var(--lg-card-rule); }
}

/* ── The foot ── */

/* The landing site's footer: a solid rule and one line. */
html.legal .foot { padding-block: clamp(64px, 8vw, 120px) clamp(32px, 4vw, 48px); }
html.legal .foot p {
  padding-top: 22px;
  border-top: 3px solid var(--lg-edge);
  font-size: 0.9375rem;
  font-weight: 500;
}
/* As on the landing site: the link keeps its look, and an invisible box around it makes the
   tap area 44px tall. Kept on one line, so the box is one rectangle. */
html.legal .foot a {
  position: relative;
  white-space: nowrap;
}
html.legal .foot a::after {
  content: '';
  position: absolute;
  inset: -14px -6px;
}

@media (forced-colors: active) {
  html.legal .paper { border-color: CanvasText; }
  /* A forced background would hide the bar; draw it in the text colour. */
  html.legal ul > li::before {
    forced-color-adjust: none;
    background: CanvasText;
  }
}

@media print {
  html.legal .part > h2 { position: static; }
  html.legal .paper { box-shadow: none; }
}