/* The privacy policy and terms of use. Same tokens, header and footer as
   index.html, which keeps its own copy inline; change both together. */
:root {
  --bg: #ffffff;
  --tint: #f3f6fc;
  --ink: #1b1f2d;
  --ink-2: #4b556b;
  --ink-3: #7a849b;
  --line: #e3e8f1;
  --blue: #457aef;
  --blue-wash: #eaf1fe;
  --navy: #0e162a;
  --on-dark: #ffffff;
  --on-dark-2: rgba(255, 255, 255, .74);
  --on-dark-line: rgba(255, 255, 255, .16);

  --logo-ink: #1b1f2d;
  --logo-word: #457aef;
  --logo-pin: #457aef;
  --logo-heart: #ffffff;
  --logo-plane-a: #ffffff;
  --logo-plane-b: #bdbdbd;
  --logo-plane-c: #e0e0e0;

  --font-display: "Poppins", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-small: .875rem;
  --fs-label: .72rem;
  --radius-sm: 8px;
  --section: clamp(60px, 8vw, 104px);
  --gutter: clamp(16px, 4vw, 32px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a1020;
    --tint: #0f172b;
    --ink: #e8ecf5;
    --ink-2: #aab4ca;
    --ink-3: #7f8aa3;
    --line: #212c47;
    --blue: #6b97f5;
    --blue-wash: #16244a;
    --navy: #060b18;
    --logo-ink: #ffffff;
    --logo-word: #7fa6f8;
    --logo-pin: #5b8df5;
    --logo-heart: #1a2f5c;
    --logo-plane-a: #1a2f5c;
    --logo-plane-b: #6a86b8;
    --logo-plane-c: #0f1e40;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0a1020;
  --tint: #0f172b;
  --ink: #e8ecf5;
  --ink-2: #aab4ca;
  --ink-3: #7f8aa3;
  --line: #212c47;
  --blue: #6b97f5;
  --blue-wash: #16244a;
  --navy: #060b18;
  --logo-ink: #ffffff;
  --logo-word: #7fa6f8;
  --logo-pin: #5b8df5;
  --logo-heart: #1a2f5c;
  --logo-plane-a: #1a2f5c;
  --logo-plane-b: #6a86b8;
  --logo-plane-c: #0f1e40;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: var(--blue); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }

/* Header: the logo home and the one action, nothing to navigate within a page this long */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.brand { display: inline-flex; flex: none; }
.brand svg { width: 164px; height: 29px; }
.nav a.back { color: var(--ink-2); text-decoration: none; font-size: .9375rem; font-weight: 500; }
.nav a.back:hover { color: var(--ink); }

/* The document */
.doc { max-width: 46rem; padding-block: clamp(40px, 6vw, 72px) 0; }
.doc .eyebrow {
  font: 600 var(--fs-label)/1 var(--font-body);
  letter-spacing: .13em; text-transform: uppercase; color: var(--blue);
}
.doc h1 {
  margin: 14px 0 0;
  font: 600 clamp(2rem, 1.4rem + 2.2vw, 2.8rem)/1.12 var(--font-display);
  letter-spacing: -.022em; text-wrap: balance;
}
.doc .updated { margin: 12px 0 0; color: var(--ink-3); font-size: var(--fs-small); }
.doc .lede { margin: 24px 0 0; color: var(--ink-2); font-size: 1.08rem; }
.doc h2 {
  margin: 44px 0 0; scroll-margin-top: 80px;
  font: 600 1.3rem/1.3 var(--font-display); letter-spacing: -.01em; text-wrap: balance;
}
.doc h3 { margin: 24px 0 0; font: 600 1.02rem/1.4 var(--font-display); }
.doc p, .doc ul, .doc .table { margin: 12px 0 0; }
.doc ul { padding-left: 1.2rem; }
.doc li + li { margin-top: 6px; }
.doc li::marker { color: var(--ink-3); }
.doc strong { font-weight: 600; }
.doc .contents {
  margin-top: 28px; padding: 18px 22px;
  background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.doc .contents ol { margin: 8px 0 0; padding-left: 1.2rem; columns: 2 16rem; column-gap: 32px; }
.doc .contents li { break-inside: avoid; }
.doc .contents a { text-decoration: none; }
.doc .contents a:hover { text-decoration: underline; }
.doc .table { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.doc table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.doc th { background: var(--tint); font-weight: 600; }
.doc tr:last-child td { border-bottom: none; }
.doc address { font-style: normal; }

/* An unfilled detail. deploy.sh refuses to publish a page that still has one. */
[data-todo] { background: #fff1c2; color: #5a4300; padding: 0 .25em; border-radius: 3px; }

/* Footer, as on the home page */
.site-footer {
  --logo-ink: #ffffff; --logo-word: #7fa6f8; --logo-pin: #5b8df5; --logo-heart: #1a2f5c;
  --logo-plane-a: #1a2f5c; --logo-plane-b: #6a86b8; --logo-plane-c: #0f1e40;
  background: var(--navy); color: var(--on-dark-2); font-size: var(--fs-small);
  padding-block: 56px 36px; margin-top: var(--section);
}
.foot { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot .brand svg { width: 180px; height: 32px; }
.foot p { margin: 14px 0 0; max-width: 26rem; }
.foot address { font-style: normal; margin-top: 14px; max-width: 26rem; }
.foot h3 { margin: 0 0 14px; color: var(--on-dark); font: 600 var(--fs-label)/1 var(--font-body); letter-spacing: .13em; text-transform: uppercase; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot a { color: var(--on-dark-2); text-decoration: none; }
.foot a:hover, .foot a[aria-current="page"] { color: var(--on-dark); }
.legal { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--on-dark-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
@media (max-width: 760px) { .foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .foot > :first-child { grid-column: 1 / -1; } }