:root {
  color-scheme: light dark;
  --accent: #b44137;
  --bg: #f7f7fc;
  --fg: #121215;
  --muted: #5b5b63;
  --rule: #dededf;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #c65248;
    --bg: #171717;
    --fg: #ededf2;
    --muted: #a1a1a8;
    --rule: #2f2f33;
  }
}

html {
  background: var(--bg);
}

body {
  margin: 0 auto;
  max-width: 34rem;
  padding: 4rem 1.5rem 5rem;
  color: var(--fg);
  font: 1.0625rem/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-wrap: pretty;
}

p {
  margin: 0 0 1rem;
}

/* The name is the tail of "Notify", so the word is drawn whole and only its tail colored. */
.wordmark {
  display: inline-block;
  margin: 0 0 1.5rem;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.wordmark span {
  color: var(--accent);
}

h1 {
  margin: 0 0 1rem;
  font-size: 1.75rem;
  letter-spacing: -0.015em;
}

.tagline {
  margin-bottom: 2rem;
  font-size: 1.25rem;
}

/* Bold at 20px clears WCAG's large-text threshold, which the accent needs: see the `a` rule. */
.lead {
  margin-bottom: 0.5rem;
  color: var(--accent);
  font-size: 1.25rem;
  font-weight: 700;
}

ul {
  margin: 0 0 2rem;
  padding-left: 1.25rem;
  color: var(--muted);
}

li {
  margin-bottom: 0.35rem;
}

.muted {
  color: var(--muted);
}

/* Accent underline, not accent text: in dark mode it misses the 4.5:1 floor for body type. */
a {
  color: inherit;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

/* Long-form pages: a wider measure and looser leading, and lists that carry the prose and so
   keep its color. */
body.policy {
  max-width: 46rem;
  line-height: 1.7;
}

.policy h2 {
  margin: 2.75rem 0 0.75rem;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  scroll-margin-top: 2rem;
}

.policy ul {
  margin-bottom: 1rem;
  color: inherit;
}

.policy li {
  margin-bottom: 0.5rem;
}

/* Section index. Its numbers come from the `ol`, so they track the headings. */
.toc {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.toc ol {
  margin: 0;
  padding-left: 1.4rem;
  columns: 15rem 2;
  column-gap: 2.5rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

.toc li {
  margin-bottom: 0.4rem;
  break-inside: avoid;
}

.toc a {
  text-decoration: none;
}

.toc a:hover,
.toc a:focus-visible {
  text-decoration: underline;
}

/* Legal pages get printed and saved as PDFs. */
@media print {
  :root {
    --bg: #fff;
    --fg: #000;
    --muted: #333;
  }

  body {
    max-width: none;
    padding: 0;
    font-size: 11pt;
  }

  .toc {
    display: none;
  }

  h1,
  h2 {
    break-after: avoid;
  }
}