.legal-page {
  --legal-measure: 58rem;
  background: var(--porcelain);
  color: var(--ink);
}
.legal-intro { padding-block: 56px 36px; border-bottom: 1px solid var(--line); }
.legal-intro .shell,
.legal-content.shell { width: calc(100% - var(--gutter) * 2); max-width: var(--legal-measure); }
.legal-page .head { max-width: 100%; }
.legal-page .head h1 { max-width: 22ch; font-size: clamp(34px, 4vw, 54px); line-height: 1.12; }
.legal-page .dates { margin-top: 16px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.legal-description { margin-top: 20px; max-width: 68ch; font-size: 18px; line-height: 1.6; }
.legal-content { padding-top: 28px; padding-bottom: 72px; }
.legal-content article { font-size: 17px; line-height: 1.75; }
.legal-content article > p,
.legal-content article > ul,
.legal-content article > ol { max-width: 74ch; }
.legal-content article > p + p { margin-top: 18px; }
/* Oct 13, 2026 (Fable, final integration): styles.css already gives the page 100 px of scroll padding, so the 108 px margin
   landed every section 208 px down. 8 px keeps the hairline of a section, or a subsection heading, just under the header. */
.legal-content h2 { margin: 48px 0 18px; padding-top: 24px; border-top: 1px solid var(--line); font-size: clamp(25px, 2.5vw, 32px); line-height: 1.2; scroll-margin-top: 8px; }
.legal-content article > h2:first-child { margin-top: 32px; padding-top: 0; border-top: 0; }
.legal-content h3 { margin: 32px 0 14px; font-size: 22px; line-height: 1.25; scroll-margin-top: 8px; }
.legal-content article ul,
.legal-content article ol { display: grid; gap: 12px; margin-block: 20px; padding-left: 24px; }
.legal-content a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; overflow-wrap: anywhere; }
.legal-toc { border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.legal-toc summary { cursor: pointer; width: fit-content; min-height: 44px; padding-block: 10px; font-size: 16px; font-weight: 650; }
.legal-toc summary::marker { color: var(--lime); }
/* Oct 13, 2026 (Fable, final integration): the sections that carry the fine print moved from the main pages list their
   subsections under their entry, so a reader lands on the exact notes a main page links. Two columns that never split an
   entry, the subsections in one column under their section, one column on phones. */
.legal-toc ol { list-style: none; margin: 16px 0 8px; padding: 0; font-size: 15px; line-height: 1.55; columns: 2; column-gap: 28px; }
.legal-toc li { break-inside: avoid; padding-bottom: 12px; }
.legal-toc ol ol { columns: 1; margin: 8px 0 0; padding-left: 14px; border-left: 2px solid var(--line); font-size: 14px; }
.legal-toc ol ol li { padding-bottom: 6px; }
.legal-toc ol ol li:last-child { padding-bottom: 0; }
.legal-content .wrap { max-width: 100%; margin-block: 24px; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.legal-content table { width: 100%; min-width: 660px; border-collapse: collapse; font-size: 15px; line-height: 1.6; }
.legal-content th,
.legal-content td { padding: 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal-content th { background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 700; }
.legal-content tr:last-child td { border-bottom: 0; }
.legal-content code { font-size: 13px; overflow-wrap: anywhere; }
.legal-content td code { white-space: nowrap; }
.preference-panel { display: grid; gap: 20px; margin-top: 48px; padding: 32px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--paper); }
.legal-content .preference-panel h2 { margin: 0; padding: 0; border: 0; font-size: clamp(24px, 2.4vw, 28px); line-height: 1.2; }
.preference-panel p { margin: 0; line-height: 1.65; max-width: 68ch; }
.preference-panel button { justify-self: start; width: fit-content; max-width: 100%; min-height: 48px; padding: 14px 20px; margin-block: 4px; white-space: normal; text-align: left; line-height: 1.4; }
.preference-panel [data-preference-status] { margin: 0; color: var(--muted); font-size: 15px; }
.preference-panel [data-preference-status]:empty { display: none; }
/* Oct 13, 2026 (Fable, Find us redesign): the company facts list and the subheadings of the text that moved here from
   the Find us page (section 9, Company information). The list keeps the two column shape it had there. */
.legal-content h4 { margin: 24px 0 10px; font-size: 18px; line-height: 1.3; font-weight: 700; }
.legal-content .company-facts { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); max-width: 74ch; margin: 20px 0 0; border-top: 1px solid var(--line); }
.legal-content .company-facts dt, .legal-content .company-facts dd { margin: 0; padding-block: 14px; border-bottom: 1px solid var(--line); }
.legal-content .company-facts dt { padding-right: 16px; color: var(--muted); font-size: 14px; }
.legal-content .company-facts dd { color: var(--ink); overflow-wrap: anywhere; }
.legal-related { display: flex; flex-wrap: wrap; gap: 16px 24px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; }
.legal-page :focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.legal-page .footer-bottom > div { flex-wrap: wrap; }
@media (max-width: 640px) {
  .legal-intro { padding-block: 36px 28px; }
  .legal-content { padding-top: 20px; padding-bottom: 48px; }
  .legal-description { font-size: 17px; }
  .legal-content article { font-size: 16px; }
  .legal-toc ol { columns: 1; }
  .legal-content h2 { margin-top: 36px; padding-top: 20px; }
  .preference-panel { margin-top: 36px; padding: 24px; gap: 20px; }
  .legal-related { gap: 16px 20px; margin-top: 36px; }
  .legal-content .company-facts { grid-template-columns: minmax(0, 1fr); }
  .legal-content .company-facts dt { padding-bottom: 2px; border-bottom: 0; }
  .legal-content .company-facts dd { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .legal-page { scroll-behavior: auto; } }
@media print {
  .site-header, .site-footer, .legal-toc, .legal-related, [data-clear-preferences] { display: none; }
  .legal-intro, .legal-content { padding: 1rem 0; }
  .legal-content .wrap { overflow: visible; }
  .legal-content table { min-width: 0; }
  .legal-content th, .preference-panel { background: #eee; color: #111; }
  body, .legal-page { background: white; color: black; }
}