/* ============================================================
   Archivo, self-hosted (no Google Fonts request). Variable file:
   one download covers 600 and 900. unicode-range keeps latin-ext
   off the wire unless a page actually uses those characters.
   SIL OFL 1.1 — see fonts/OFL-Archivo.txt.
   ============================================================ */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-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: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-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;
}

/* ============================================================
   Shared chrome for the legal pages. Tokens mirror index.html;
   everything below .prose is specific to long-form text, which
   the landing page has none of.
   ============================================================ */
:root {
  --paper:    #F2EEE6;
  --paper-2:  #FBF9F4;
  --ink:      #141414;
  --ink-82:   rgba(20,20,20,0.82);
  --ink-72:   rgba(20,20,20,0.72);
  --ink-60:   rgba(20,20,20,0.60);
  --ink-40:   rgba(20,20,20,0.40);
  --blue:     #3D5AF1;
  --blue-deep:#2E46CC;
  --blue-soft:#E4E9FE;
  --blue-lite:#8AA0FF;
  --bd: 2px solid var(--ink);
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-deep); }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper);
  font-family: var(--display); font-weight: 900; font-size: 13px; letter-spacing: 0.06em;
  padding: 12px 16px; border: 2px solid var(--paper);
}
.skip:focus { top: 12px; color: var(--paper); }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.rule-t { border-top: var(--bd); }
.rule-b { border-bottom: var(--bd); }

/* ============================== nav ============================== */
.navbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(242,238,230,0.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: var(--bd);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 900; font-size: 17px;
  color: var(--ink); letter-spacing: 0.02em;
}
.brand:hover { color: var(--ink); }
.brand img { width: 26px; height: 26px; flex: none; }
.nav-right { display: flex; align-items: center; gap: 24px; font-size: 14px; font-weight: 600; }
.nav-link { color: var(--ink-72); white-space: nowrap; }
.nav-link:hover { color: var(--ink); }
/* the nav sits on a fixed 64px bar — "Back to the site" wraps and breaks out
   of it below ~680px, so the label swaps for a short one there */
.nav-short { display: none; }
.btn {
  --sh: 4px;
  display: inline-block; text-align: center; white-space: nowrap;
  font-family: var(--display); font-weight: 900; letter-spacing: 0.02em;
  font-size: 13px; padding: 10px 18px;
  border: var(--bd); box-shadow: var(--sh) var(--sh) 0 var(--ink);
  background: var(--blue); color: #fff;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { color: #fff; transform: translate(1px,1px); box-shadow: calc(var(--sh) - 1px) calc(var(--sh) - 1px) 0 var(--ink); }
.btn:active { transform: translate(var(--sh), var(--sh)); box-shadow: 0 0 0 var(--ink); }

/* ============================== page head ============================== */
.legal-head { padding-top: 72px; padding-bottom: 56px; }
.kicker {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em;
  color: var(--ink-60); text-transform: uppercase; margin: 0;
}
.h1 {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(36px, 4.4vw, 66px); line-height: 0.98; letter-spacing: -0.03em;
  margin: 20px 0 0; max-width: 16ch; text-wrap: balance;
}
.h1 span { color: var(--ink-40); }
.stamp {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
  color: var(--ink-60); text-transform: uppercase; margin: 24px 0 0;
}

/* ============================== prose ============================== */
.prose { max-width: 74ch; margin-right: auto; padding-top: 64px; padding-bottom: 88px; }
.prose > p:first-child { margin-top: 0; }
.prose p { margin: 0 0 18px; color: var(--ink-82); }
.prose h2 {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: 20px; line-height: 1.15; letter-spacing: -0.01em;
  margin: 52px 0 18px; padding-top: 22px; border-top: var(--bd);
}
.prose h2:first-of-type { margin-top: 0; }
.prose h3 {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: 14px; letter-spacing: 0.04em; margin: 30px 0 10px;
}
.prose ul { margin: 0 0 18px; padding-left: 22px; color: var(--ink-82); }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--blue); }
.prose strong { font-weight: 700; color: var(--ink); }
.prose address { font-style: normal; color: var(--ink-82); }

/* the lede under each h1 — one paragraph of plain-English framing */
.summary {
  border: var(--bd); background: var(--paper-2);
  box-shadow: 6px 6px 0 var(--ink);
  padding: 26px 28px; margin: 0 0 44px;
}
.summary p { margin: 0; font-size: 17px; color: var(--ink-82); }
.summary p + p { margin-top: 14px; }
.summary .kicker { margin-bottom: 10px; }

/* the loud ones: health and screen-locking warnings in the terms */
.warn {
  border: var(--bd); background: var(--blue-soft);
  box-shadow: 6px 6px 0 var(--ink);
  padding: 24px 26px; margin: 0 0 24px;
}
.warn p:last-child, .warn ul:last-child { margin-bottom: 0; }

.toc {
  border: var(--bd); background: var(--paper-2);
  padding: 22px 26px; margin: 0 0 48px;
  columns: 2; column-gap: 34px;
}
.toc ol { margin: 0; padding-left: 20px; font-size: 15px; }
.toc li { margin-bottom: 6px; break-inside: avoid; }

/* ============================== footer ============================== */
footer.foot { background: var(--ink); color: var(--paper); border-top: var(--bd); }
.foot-in {
  padding: 48px 24px; display: flex; flex-direction: column; gap: 10px;
  align-items: center; font-size: 14px; color: rgba(242,238,230,0.6); text-align: center;
}
.foot-brand {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 900; font-size: 15px;
  color: var(--paper); letter-spacing: 0.02em;
}
.foot-brand img { width: 22px; height: 22px; }
.foot-in a { color: var(--blue-lite); }
.foot-in a:hover { color: #fff; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; }

@media (max-width: 680px) {
  body { font-size: 16px; }
  .nav-long { display: none; }
  .nav-short { display: inline; }
  /* logo + "← Back" + button will not fit beside the wordmark at 375px */
  .brand-word { display: none; }
  .legal-head { padding-top: 48px; padding-bottom: 40px; }
  .prose { padding-top: 44px; padding-bottom: 64px; }
  .toc { columns: 1; }
  .nav-right { gap: 14px; }
  .foot-in { padding: 40px 18px; }
}

@media print {
  .navbar, .skip, footer.foot { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .prose { max-width: none; padding-top: 0; padding-bottom: 0; }
  .summary, .warn, .toc { box-shadow: none; background: #fff; }
  .prose h2 { break-after: avoid; }
  a { color: #000; text-decoration: underline; }
}