/* ============================================================
   FOR SAVINGS — Legal / document pages (GDPR, VOP)
   Builds on styles.css tokens
   ============================================================ */

/* slim landing-style header reused from LP */
.lp-head{ position:fixed; inset:0 0 auto 0; z-index:60; padding-block:13px; background:rgba(18,29,39,.7); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid rgba(255,255,255,.08); }
.lp-head-in{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.lp-head-right{ display:flex; align-items:center; gap:20px; }
.lp-phone{ display:inline-flex; align-items:center; gap:8px; color:#fff; font-weight:600; font-size:15px; white-space:nowrap; }
.lp-phone svg{ width:18px; height:18px; color:var(--teal); }
@media (max-width:560px){ .lp-phone span{ display:none; } .lp-head-right{ gap:12px; } }

/* hero band */
.legal-hero{ background:var(--navy); color:#fff; position:relative; overflow:hidden; padding-top:clamp(120px,15vw,164px); padding-bottom:clamp(40px,6vw,64px); }
.legal-hero::before{ content:""; position:absolute; right:-10%; top:-30%; width:55%; height:150%; background:radial-gradient(closest-side, rgba(97,188,170,.28), transparent 70%); pointer-events:none; }
.legal-hero .wrap{ position:relative; z-index:2; }
.legal-crumb{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:rgba(255,255,255,.6); margin-bottom:18px; }
.legal-crumb a{ color:rgba(255,255,255,.6); transition:color .2s; }
.legal-crumb a:hover{ color:var(--green); }
.legal-crumb svg{ width:14px; height:14px; opacity:.5; }
.legal-hero h1{ font-family:var(--font-head); font-weight:800; font-size:clamp(30px,4.6vw,52px); letter-spacing:-.02em; line-height:1.06; margin:0; max-width:18ch; }
.legal-hero .meta{ margin-top:18px; font-size:14.5px; color:rgba(255,255,255,.65); }

/* document body */
.legal-body{ background:var(--cream-200); padding-block:clamp(48px,7vw,84px); }
.legal-layout{ display:grid; grid-template-columns:248px 1fr; gap:clamp(32px,5vw,64px); align-items:start; }

/* sticky table of contents */
.legal-toc{ position:sticky; top:96px; }
.legal-toc h2{ font-family:var(--font-head); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--slate); margin:0 0 14px; font-weight:700; }
.legal-toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc; display:flex; flex-direction:column; gap:2px; }
.legal-toc a{ display:flex; gap:10px; padding:8px 12px; border-radius:10px; font-size:14px; color:var(--navy-800); line-height:1.4; transition:background .18s, color .18s; counter-increment:toc; }
.legal-toc a::before{ content:counter(toc); font-variant-numeric:tabular-nums; font-weight:700; color:var(--green-600); flex:none; }
.legal-toc a:hover{ background:#fff; }
.legal-toc a.active{ background:#fff; color:var(--navy); box-shadow:var(--shadow-sm); }

/* document card */
.legal-doc{ background:#fff; border:1px solid rgba(20,34,46,.06); border-radius:var(--radius-lg); padding:clamp(28px,4vw,56px); box-shadow:var(--shadow-sm); }
.legal-doc .intro{ font-size:17px; color:var(--slate); line-height:1.7; margin-bottom:8px; max-width:68ch; }
.legal-doc section{ scroll-margin-top:96px; padding-top:34px; }
.legal-doc section + section{ border-top:1px solid rgba(20,34,46,.07); margin-top:34px; }
.legal-doc h2.sec-title{ font-family:var(--font-head); font-size:clamp(20px,2.4vw,26px); font-weight:800; color:var(--navy); letter-spacing:-.01em; margin:0 0 16px; display:flex; gap:14px; align-items:baseline; }
.legal-doc h2.sec-title .num{ font-size:15px; font-weight:700; color:#0c1a14; background:var(--grad); border-radius:9px; padding:4px 11px; flex:none; letter-spacing:0; transform:translateY(-2px); }
.legal-doc h3{ font-family:var(--font-head); font-size:17px; font-weight:700; color:var(--navy); margin:26px 0 10px; }
.legal-doc p{ font-size:15.5px; color:var(--navy-800); line-height:1.72; margin:0 0 14px; max-width:72ch; }
.legal-doc ul.bul{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:10px; }
.legal-doc ul.bul li{ position:relative; padding-left:26px; font-size:15.5px; color:var(--navy-800); line-height:1.65; max-width:70ch; }
.legal-doc ul.bul li::before{ content:""; position:absolute; left:4px; top:9px; width:8px; height:8px; border-radius:3px; background:var(--grad); }
.legal-doc ul.bul li b{ color:var(--navy); }
.legal-doc a.inl{ color:var(--green-600); font-weight:600; border-bottom:1px solid rgba(95,167,87,.35); transition:border-color .2s; }
.legal-doc a.inl:hover{ border-color:var(--green-600); }

/* definition / data table */
.legal-table{ width:100%; border-collapse:collapse; margin:8px 0 18px; font-size:14.5px; }
.legal-table th, .legal-table td{ text-align:left; padding:13px 16px; border-bottom:1px solid rgba(20,34,46,.08); vertical-align:top; color:var(--navy-800); line-height:1.55; }
.legal-table th{ font-family:var(--font-head); font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--slate); font-weight:700; background:var(--cream-200); }
.legal-table tr:last-child td{ border-bottom:none; }
.legal-table td:first-child{ font-weight:600; color:var(--navy); width:34%; }

/* callout */
.legal-note{ display:flex; gap:14px; background:var(--grad-soft); border:1px solid rgba(97,188,170,.3); border-radius:16px; padding:18px 22px; margin:18px 0; }
.legal-note svg{ width:22px; height:22px; color:var(--green-600); flex:none; margin-top:2px; }
.legal-note p{ margin:0; font-size:14.5px; color:var(--navy); }

/* back to top + contact strip */
.legal-foot-cta{ margin-top:30px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; background:var(--navy); color:#fff; border-radius:var(--radius-lg); padding:26px 30px; }
.legal-foot-cta b{ font-family:var(--font-head); font-size:18px; font-weight:700; display:block; margin-bottom:3px; }
.legal-foot-cta span{ font-size:14px; color:rgba(255,255,255,.7); }

@media (max-width:860px){
  .legal-layout{ grid-template-columns:1fr; gap:26px; }
  .legal-toc{ position:static; }
  .legal-toc ol{ display:grid; grid-template-columns:1fr 1fr; gap:4px; }
}
@media (max-width:520px){
  .legal-toc ol{ grid-template-columns:1fr; }
  .legal-table td:first-child{ width:auto; }
}