/* ============================================================
   FILESURE API — Legal pages (Terms, Privacy, Refund)
   Builds on tokens.css (foundations) + home.css (nav, footer,
   .wrap, .btn, .m). This file only adds the long-form reading
   layout: hero, sticky table of contents, and prose typography.
   ============================================================ */

/* ---- Hero ---- */
.legal-hero{border-bottom:1px solid var(--border-faint);background:var(--surface-1)}
.legal-hero__in{max-width:1180px;margin:0 auto;padding:44px 32px 38px;width:100%}
.legal-crumb{display:flex;align-items:center;gap:7px;font-size:var(--body-sm);color:var(--fg-muted);margin-bottom:18px}
.legal-crumb a{color:var(--fg-muted);transition:color .15s}
.legal-crumb a:hover{color:var(--fg-strong)}
.legal-crumb .m{font-size:15px;color:var(--fg-faint)}
.legal-crumb span[aria-current]{color:var(--fg-2)}
.legal-hero h1{font-family:var(--font-sans);font-weight:var(--w-bold);font-size:var(--heading-2xl);line-height:var(--heading-2xl-lh);color:var(--fg-strong);margin:0;letter-spacing:-0.01em}
.legal-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;font-size:var(--body-sm);color:var(--fg-muted)}
.legal-meta .pill{display:inline-flex;align-items:center;gap:6px}
.legal-meta .m{font-size:16px;color:var(--lavender-500)}
.legal-lede{margin:18px 0 0;max-width:740px;font-size:var(--body-lg);line-height:1.62;color:var(--fg-3)}

/* ---- Layout: TOC + prose ---- */
.legal-main{max-width:1180px;margin:0 auto;padding:44px 32px 72px;width:100%;display:grid;grid-template-columns:1fr;gap:36px}
@media(min-width:960px){.legal-main{grid-template-columns:236px minmax(0,1fr);gap:64px}}

/* ---- Table of contents ---- */
.legal-toc{font-size:var(--body-sm)}
.legal-toc summary{font-family:var(--font-sans);font-weight:var(--w-semibold);font-size:var(--caption);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-label);cursor:pointer;list-style:none;padding:10px 0;display:flex;align-items:center;justify-content:space-between}
.legal-toc summary::-webkit-details-marker{display:none}
.legal-toc summary .m{font-size:18px;transition:transform .2s}
.legal-toc[open] summary .m{transform:rotate(180deg)}
.legal-toc ol{list-style:none;margin:6px 0 0;padding:0;border-left:1px solid var(--border-faint);counter-reset:toc}
.legal-toc li{margin:0;counter-increment:toc}
.legal-toc a{display:block;padding:7px 0 7px 16px;margin-left:-1px;color:var(--fg-muted);border-left:2px solid transparent;line-height:1.4;transition:color .15s,border-color .15s}
.legal-toc a::before{content:counter(toc) ". ";color:var(--fg-faint)}
.legal-toc a:hover{color:var(--brand);border-left-color:var(--lavender-400)}
@media(min-width:960px){
  .legal-toc{align-self:start;position:sticky;top:92px;max-height:calc(100vh - 116px);overflow-y:auto}
  .legal-toc summary{pointer-events:none}      /* always open, non-collapsible on desktop */
  .legal-toc summary .m{display:none}
}

/* ---- Prose ---- */
.legal-prose{max-width:760px;font-family:var(--font-sans);color:var(--fg-body)}
.legal-prose section{padding-top:38px;margin-top:38px;border-top:1px solid var(--border-faint);scroll-margin-top:88px}
.legal-prose section:first-of-type{padding-top:0;margin-top:0;border-top:none}
.legal-prose h2{font-family:var(--font-sans);font-weight:var(--w-bold);font-size:var(--heading-lg);line-height:var(--heading-lg-lh);color:var(--fg-strong);margin:0 0 14px}
.legal-prose h2 .num{color:var(--lavender-500);font-weight:var(--w-semibold);margin-right:10px}
.legal-prose h3{font-family:var(--font-sans);font-weight:var(--w-semibold);font-size:var(--heading-sm);line-height:var(--heading-sm-lh);color:var(--fg-1);margin:24px 0 6px;scroll-margin-top:88px}
.legal-prose p{font-size:16px;line-height:1.72;color:var(--fg-body);margin:0 0 15px}
.legal-prose ul,.legal-prose ol.list{margin:0 0 15px;padding-left:22px}
.legal-prose li{font-size:16px;line-height:1.72;color:var(--fg-body);margin:0 0 8px}
.legal-prose strong{color:var(--fg-2);font-weight:var(--w-semibold)}
.legal-prose a{color:var(--brand);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.legal-prose a:hover{color:var(--brand-hover)}
.legal-prose .lead{font-size:var(--body-lg);color:var(--fg-3)}
.legal-prose code{font-family:var(--font-mono);font-size:0.875em;background:var(--surface-3);color:var(--rust-500);padding:1px 6px;border-radius:var(--radius-xs);white-space:nowrap}

/* Callouts + contact card */
.legal-note{background:var(--lavender-200);border:1px solid var(--lavender-400);border-radius:var(--radius-lg);padding:16px 20px;margin:0 0 15px}
.legal-note p{margin:0;font-size:15px;color:var(--fg-2)}
.legal-note .h{display:flex;align-items:center;gap:8px;font-weight:var(--w-semibold);color:var(--fg-strong);margin-bottom:4px}
.legal-note .h .m{font-size:18px;color:var(--lavender-600)}
.legal-contact{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 24px;margin-top:6px}
.legal-contact p{margin:0 0 3px;font-size:15px;line-height:1.6}
.legal-contact .who{font-weight:var(--w-semibold);color:var(--fg-strong)}

/* Top-of-section anchor offset for h3 ids too */
.legal-prose [id]{scroll-margin-top:88px}