/* page/legal (owner go, 2026-10-02): shared styles for /免責聲明/ and /privacy-policy/. Reuses
   site.css tokens (--green, --paper, --ink, --mute, --sec, --pad, --nav-h) and existing utility
   classes (.dark, .eyebrow, .lead, .wrap, .h2-s) - no new colours, no new fonts. */

.legal-head { padding: calc(var(--nav-h) + 56px) 0 56px; }
.legal-head-in { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.legal-head-in .lead { color: var(--mute-d); max-width: none; }

.legal-body { padding: var(--sec) 0; background: var(--paper); }
.legal-col { max-width: 720px; display: flex; flex-direction: column; gap: 40px; }

/* Each section = one h2 + its own text/list stack. h2-s (clamp 24-30px), not the 42px .h2 token
   built for wide multi-column sections - this column is 720px, a 42px heading would overpower it. */
.legal-col section { display: flex; flex-direction: column; gap: 14px; }
.legal-col h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2vw, 26px); line-height: 1.3; color: var(--ink); }
.legal-col p { font-size: 16px; line-height: 1.8; color: var(--ink); }
.legal-col p.mute { color: var(--mute); }

/* Global reset sets `ul,ol { list-style:none }` site-wide (site.css); restored here only inside
   the legal text column, where real bulleted/numbered lists are part of the reading content
   rather than a nav/card layout. */
.legal-col ul { list-style: disc; padding-inline-start: 1.25em; display: flex; flex-direction: column; gap: 8px; }
.legal-col ol { list-style: decimal; padding-inline-start: 1.25em; display: flex; flex-direction: column; gap: 8px; }
.legal-col li { font-size: 16px; line-height: 1.8; color: var(--ink); }

.legal-col a { color: var(--green-mid); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 767px) {
  .legal-head { padding: calc(var(--nav-h) + 28px) 0 36px; }
  .legal-body { padding: clamp(48px, 10vw, 72px) 0; }
  .legal-col { gap: 32px; }
}