/* The legal pages: the landing page's colours and type, set for long-form reading. */
.legal {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 5rem;
}
.legal h1 { font-size: clamp(2rem, 5vw, 2.6rem); line-height: 1.1; margin: 0 0 0.5rem; letter-spacing: -0.02em; }
.legal .updated { color: var(--muted); margin: 0 0 2.5rem; font-size: 0.95rem; }
.legal h2 {
  font-size: 1.25rem; margin: 2.75rem 0 0.75rem; letter-spacing: -0.01em;
  padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; }
.legal h3 { font-size: 1.02rem; margin: 1.5rem 0 0.4rem; }
.legal p, .legal li { line-height: 1.65; color: var(--ink); }
.legal ul { padding-left: 1.15rem; }
.legal li { margin-bottom: 0.5rem; }
.legal a { color: var(--leaf-dark); }
.legal table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.95rem; }
.legal th, .legal td { text-align: left; padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal th { color: var(--muted); font-weight: 600; }
.legal .callout {
  background: var(--mint); border-radius: var(--radius-md);
  padding: 1.1rem 1.25rem; margin: 1.5rem 0;
}
.legal .callout p:last-child { margin-bottom: 0; }
.legal .back { display: inline-block; margin-bottom: 2rem; color: var(--muted); text-decoration: none; }
.legal .back:hover { color: var(--ink); }
@media (max-width: 640px) {
  .legal table, .legal thead, .legal tbody, .legal tr, .legal th, .legal td { display: block; }
  .legal th { border: 0; padding-bottom: 0; }
  .legal td { padding-top: 0.2rem; }
}

/* Footer links on the landing page, to the pages above. */
.site-footer .footer-legal { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.site-footer .footer-legal a { color: inherit; opacity: 0.75; text-decoration: none; }
.site-footer .footer-legal a:hover { opacity: 1; text-decoration: underline; }