/* Privacy policy and terms pages. Uses the colour tokens from styles.css. */
.legalbar {
  max-width: 720px; margin: 0 auto;
  padding: calc(12px + env(safe-area-inset-top)) 16px 4px;
}
.legalbar a {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 600; text-decoration: none; padding: 6px 10px 6px 4px; border-radius: 10px;
}
.legalbar a:hover { background: var(--accent-soft); }
.legalbar svg { width: 20px; height: 20px; stroke-width: 2.4; }
main.legal { max-width: 720px; margin: 0 auto; padding: 4px 16px 48px; }
.legal article { padding: 20px 20px 8px; line-height: 1.6; overflow-wrap: anywhere; }
.legal h1 { font-size: 1.6rem; letter-spacing: -.02em; margin: 0 0 .2em; }
.legal h2 { font-size: 1.15rem; margin: 1.6em 0 .4em; }
.legal ul { padding-left: 1.2em; margin: .4em 0 1em; }
.legal li { margin: .25em 0; }
.legal .lede { font-size: 1.05rem; }
.legal .callout {
  background: var(--accent-soft); border-radius: var(--radius-sm);
  padding: 12px 14px; margin: 1em 0;
}
.legal .callout.warn { background: var(--phe-soft); }
.legal .doclinks { text-align: center; margin: 20px 0; }
@media (min-width: 900px) {
  main.legal { margin: 0 auto; padding: 8px 16px 64px; max-width: 760px; }
  .legal article { padding: 36px 44px 20px; }
}