/* Legal reading layout adapted from Apple Core; app-specific responsive fit. */
.hero { padding-bottom: 52px; }
.hero .subtle { max-width: 640px; margin-inline: auto; }
.legal { max-width: 760px; padding-block: 40px; }
.legal h1 { font-size: clamp(32px, 5vw, 48px); line-height: 1.08; }
.legal h2 { margin-top: 32px; font-size: 22px; letter-spacing: -.025em; }
.legal p, .legal ul { line-height: 1.7; margin-bottom: 18px; }
.legal ul { color: var(--muted); padding-left: 24px; }
.legal li { margin-bottom: 7px; }
.breadcrumbs { font-size: 15px; margin-bottom: 24px; gap: 8px; flex-wrap: wrap; }
.draft-note { padding: 16px 20px; background: var(--surface); border-radius: 9px; margin-bottom: 24px; }
.draft-note strong { color: var(--ink); }
header { flex-wrap: wrap; }
.brand { white-space: normal; }
header nav { flex-wrap: wrap; gap: 8px 24px; }
header nav a, footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
footer nav { flex-wrap: wrap; }
h1, h2, h3, p, a, li { overflow-wrap: break-word; }
.actions { flex-wrap: wrap; }
nav a[aria-current="page"] { color: var(--ink); }
@media (max-width: 700px) {
  header nav { gap: 8px 18px; }
  .hero { padding-bottom: 35px; }
  .legal { padding-top: 25px; }
}