/* GENERATED by scripts/gen-static.mjs. Do not edit. */
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/chivo-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/chivo-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/chivo-latin-900-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Chivo Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/chivo-mono-latin-700-normal.woff2') format('woff2');
}

:root {
  --paper: #fbfaff;
  --paper-2: #f1eefa;
  --ink: #17123a;
  --ink-2: #403a6b;
  --ink-3: #5b5589;
  --accent: #5340b8;
  --rule: #d5cfe8;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #100d28;
    --paper-2: #191538;
    --ink: #e9e5ff;
    --ink-2: #b6aedc;
    --ink-3: #8f86b8;
    --accent: #a79bff;
    --rule: #322a5e;
  }
}

/* EVERYTHING below this point is scoped to the policy page or to the static
   footer, and must stay that way.

   This stylesheet is loaded UNLAYERED alongside Tailwind's output, and Tailwind
   puts its utilities in a cascade layer. An unlayered rule beats a layered one
   whatever the specificity, so a bare element-level colour rule here silently
   overrides every text-colour utility on the React pages. It did exactly that:
   the home
   page's primary call to action rendered violet text on a violet fill, which no
   file check would ever have caught. Scope, or use a layer. */
body.policy {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Chivo', ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.policy *, .policy *::before, .policy *::after { box-sizing: border-box; }
.policy a { color: var(--accent); }
.policy :focus-visible,
.site-footer :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- the static footer shared by every React page ---- */
.site-footer { border-top: 1px solid var(--rule); background: var(--paper); }
.site-footer__inner {
  max-width: 72rem; margin: 0 auto; padding: 3rem 1rem;
  display: grid; gap: 2rem; grid-template-columns: 1fr;
}
@media (min-width: 640px) { .site-footer__inner { padding: 3.5rem 1.5rem; grid-template-columns: 1.2fr 1fr 1fr; } }
.site-footer__name { margin: 0; font-weight: 900; letter-spacing: -0.01em; font-size: 1.0625rem; }
.site-footer__line { margin: .5rem 0 0; font-size: .9375rem; color: var(--ink-2); }
.site-footer__line a { color: var(--accent); }
.site-footer__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.site-footer__nav a {
  font-family: 'Chivo Mono', ui-monospace, monospace; font-size: .6875rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--ink-2);
}
.site-footer__nav a:hover { color: var(--accent); }
.site-footer__legal { font-size: .8125rem; color: var(--ink-3); }
.site-footer__legal p { margin: 0 0 .5rem; }
.site-footer__credit a { color: var(--ink-3); }

/* ---- the privacy policy ---- */
.policy__chrome {
  border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: 48rem; margin: 0 auto; padding: 1rem;
}
.policy__wordmark {
  display: inline-flex; align-items: center; gap: .625rem; text-decoration: none; color: var(--ink);
  font-family: 'Chivo Mono', ui-monospace, monospace; font-size: .8125rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.policy__mark { width: 1rem; height: 1rem; border: 2px solid var(--accent); display: block; }
.policy__back {
  font-family: 'Chivo Mono', ui-monospace, monospace; font-size: .6875rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--ink-2);
}
.policy__back:hover { color: var(--accent); }

.policy__main { max-width: 48rem; margin: 0 auto; padding: 3rem 1rem 4rem; }
.policy__eyebrow {
  font-family: 'Chivo Mono', ui-monospace, monospace; font-size: .6875rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin: 0;
}
.policy__main h1 {
  font-size: 2.25rem; line-height: 1.1; font-weight: 900; letter-spacing: -0.025em;
  margin: 1rem 0 0;
}
.policy__lede { font-size: 1.0625rem; color: var(--ink-2); margin: 1.25rem 0 0; max-width: 60ch; }
.policy__updated {
  font-family: 'Chivo Mono', ui-monospace, monospace; font-size: .75rem; color: var(--ink-3);
  margin: 1.5rem 0 0;
}
.policy__main section { border-top: 1px solid var(--rule); margin-top: 2.5rem; padding-top: 1.75rem; }
.policy__main h2 {
  font-size: 1.1875rem; line-height: 1.3; font-weight: 700; margin: 0 0 .75rem;
  display: flex; gap: .875rem; align-items: baseline;
}
.policy__main h2 span {
  font-family: 'Chivo Mono', ui-monospace, monospace; font-size: .75rem; font-weight: 700;
  color: var(--accent); flex: none;
}
.policy__main p { margin: 0 0 1rem; color: var(--ink-2); max-width: 68ch; }
.policy__main ul { margin: 0; padding-left: 1.125rem; color: var(--ink-2); }
.policy__main strong { color: var(--ink); }

.policy__footer {
  border-top: 1px solid var(--rule); max-width: 48rem; margin: 0 auto;
  padding: 2rem 1rem 3rem; font-size: .875rem; color: var(--ink-3);
}
.policy__footer p { margin: 0 0 .375rem; }
.policy__copy { margin-top: .75rem; }