/* Page-only styles for privacy-policy.html — loaded after styles.css, only on this page. */

/* ---------- hero (Figma: text block at y=227; 16 / 44 / 24 type; arch peak at 523) ---------- */
.hero--legal .display { font-size: var(--fs-lead); line-height: 1.091; }
.hero--legal .intro { color: var(--white); line-height: 1.29; }
.hero--legal .hero-inner > p.small:first-child, .hero--legal .display { margin-bottom: clamp(10px, 1.11vw, 16px); }
@media (max-width: 767px) {
  .hero--legal + .arch-top { padding-top: 56px; }
}
@media (min-width: 768px) {
  .hero--legal { padding-top: max(clamp(110px, 15.76vw, 227px), 16svh) !important; padding-bottom: calc(var(--arch) + min(9.33vw, 134px)); }
  .hero--legal + .arch-top { padding-top: min(5.14vw, 74px); }
}

/* ---------- body: one 781-wide column at x=156 ---------- */
@media (min-width: 768px) {
  .legal-body { max-width: calc(min(8.06vw, 116px) + min(54.24vw, 781px)); }
}
.legal-body { gap: clamp(32px, 3.06vw, 44px); }
.legal-body .draft-note { margin-bottom: 0; }
.legal-body section { gap: clamp(10px, .83vw, 12px); }
.legal-body h2 { font-size: var(--fs-intro); line-height: 1.083; margin-bottom: 4px; }
.legal-body h3 { font-size: var(--fs-body); font-weight: 500; line-height: 1.28; }
.legal-body p { color: var(--ink); font-size: var(--fs-body); line-height: 1.28; }
.legal-body ul { gap: 4px; padding-left: 0; }
.legal-body li { color: var(--ink); font-size: var(--fs-small); line-height: 1.4375; padding-left: 14px; }
.legal-body li::before { top: calc(.71875em - 3px); width: 6px; height: 6px; background: #474747; } /* centred on the 23/16 line at every width */
.legal-body .draft-note { font-size: var(--fs-xs); color: #6b4e00; line-height: 1.3; }
.legal-contact { display: grid; gap: clamp(8px, .83vw, 12px); }
.legal-body .legal-contact p { font-size: var(--fs-small); line-height: 1.25; }
.legal-contact .lbl { color: var(--muted); margin-right: 4px; }
.legal-contact a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; } /* design: plain text, underline on hover/focus only */
.legal-contact a:focus-visible { text-decoration-color: currentColor; }
.legal-contact a:hover { text-decoration-color: currentColor; }

/* intro text box: 781 wide */
@media (min-width: 768px) { .hero--legal .intro { max-width: min(54.24vw, 781px); } }

/* hero → body arch: the Figma bezier mask now lives in styles.css (.arch-top::before) */

/* list lead-ins ('List Title' / 'Section Note'): Medium 18/23 */
.legal-body h3 { color: var(--ink); }

/* phones: section titles stay clearly above the 18px body (after the base rule so it wins) */
@media (max-width: 767px) {
  .legal-body h2 { font-size: 22px; }
}

/* section 01 title at y=727 (75px below the hero) — beats the shared max(--section, svgh*.12) !important pad,
   the blur has faded to paper (~#f5) by then */
@media (min-width: 768px) {
  body.page-privacy-policy .hero--legal + .arch-top { padding-top: min(5.21vw, 75px) !important; }
}
/* the reminder now closes the text column */
.legal-body > .draft-note { margin-top: 0; }