/* privacy.html only. styles.css is pinned by tests/test_site.py to the classes
   index.html uses, and privacy.html may not invent a class of its own, so this
   file reaches the policy's elements by tag under <main>. It turns the home
   page's heading-beside-a-button row into a single reading column. */

main .section { padding: 56px 0 96px; }

main .section-head {
  display: block;
  margin-bottom: 0;
  max-width: 40em;
}
main .section-head .eyebrow {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
}
main h1 { margin-top: 14px; }
main .lead {
  margin-top: 22px;
  max-width: 36em;
  font-size: 19px;
  line-height: 1.5;
}

main h2 {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--dot);
  max-width: 40em;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.2;
}

main .body-text {
  margin-top: 16px;
  max-width: 38em;
  font-size: 17px;
  line-height: 1.65;
}
main .body-text a {
  color: var(--green-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
main .body-text a:hover { color: var(--green-900); }
main .body-text strong { color: var(--ink); font-weight: 600; }
main code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--card);
  padding: 2px 6px;
  border-radius: 6px;
}
main .btn { margin-top: 40px; }

@media (max-width: 700px) {
  main .section { padding: 40px 0 72px; }
  main h2 { margin-top: 44px; padding-top: 22px; }
}

/* The home page's logo is a <span>; here it is a link back, and must not
   take the browser's blue. The button at the foot is inside .body-text, so
   the link rule above would paint its text green without this. */
.nav .logo { color: var(--ink); text-decoration: none; }
main .body-text a.btn { color: var(--white); text-decoration: none; }
main .body-text a.btn:hover { color: var(--white); }