/*
 * Privacy and Terms: dense commercial-game legal — the site's body size
 * (a 7,500-px policy at 12 px was the least readable text on the site),
 * tighter leading and closer headings than the marketing pages, so the
 * columns still read like a EULA rather than a landing page.
 */
.legal-kick { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.75rem; }
.legal-kick .plate { font-size: 0.75rem; min-height: 1.55rem; }

.page-head.legal-head h1 {
  letter-spacing: 0.01em;
  max-width: 42rem;
}
.page-head.legal-head > p {
  font-size: 1.0625rem;
  line-height: 1.5;
  max-width: 44rem;
  color: var(--ink-2);
}

/* The column shares the hero's left edge (site.css .wrap.prose); the
   measure is on the children so the wrap stays the page's own box. */
.prose.legal { font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
.prose.legal > * { max-width: 44rem; }
.prose.legal > h2:first-child { margin-top: 0; padding-top: 0; }
/* No ch-measure on the headings: .section h2's 26ch, at this size, broke
   "1. Who decides how data is used" into two lines of three words. */
.prose.legal h2 {
  font-size: 1.4rem;
  margin: 2.25rem 0 0.6rem;
  padding-top: 0.75rem;
  letter-spacing: 0.02em;
  max-width: none;
}
.prose.legal h3 {
  font-size: 0.9375rem;
  margin: 1.25rem 0 0.4rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.prose.legal p, .prose.legal li { font-size: 1rem; line-height: 1.6; }
.prose.legal p { margin-bottom: 0.9rem; }
.prose.legal ul, .prose.legal ol { margin: 0.35rem 0 0.9rem; }
.prose.legal li { margin: 0.2rem 0; }
.prose.legal #contents + ol { padding-left: 1.4rem; }
.prose.legal code { font-size: 0.875rem; }

/* A phone: the Contents list (the <ol> after the Contents heading) is a
   column of 44 px taps, not 16 px lines. */
@media (pointer: coarse), (max-width: 767.98px) {
  .prose.legal #contents + ol li { margin: 0; }
  .prose.legal #contents + ol li a { display: inline-block; padding-block: 0.6rem; }
}