/* =========================================================
   LEGAL-PAGE.CSS — shared template for the site's legal-page series
   (Privacy Policy, Terms & Conditions; Disclaimer/Accessibility remain
   on the older minimal .page-hero template for now). A premium
   legal-doc template distinct from every other page family: a minimal
   dark hero (badge/heading/subtitle/"last updated" chip — no
   particles, no floating dashboard, no illustration), a sticky
   scroll-spy table of contents (desktop) / single collapsible
   accordion (mobile, native <details> — safe here since nothing needs
   to force it open at another breakpoint the way the footer's
   six-column nav grid did), and a stack of glass content cards, one
   per section, each with its own icon. Reuses main.css's .cta-band for
   the final CTA. Built entirely from existing tokens.
   ========================================================= */

/* ---------- Hero: minimal, dark, no illustration ---------- */
.hero.hero-legal{ padding:172px 0 84px; background: var(--ink); position:relative; overflow:hidden; text-align:center; }
.hero.hero-legal::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(46% 60% at 20% 15%, rgba(10,154,144,.16), transparent 65%),
    radial-gradient(40% 55% at 82% 85%, rgba(13,48,90,.4), transparent 65%);
}
.hero-legal-inner{ position:relative; z-index:1; max-width:700px; margin:0 auto; }
.hero-legal h1{ color: var(--paper); }
.hero-legal .lead{ color: rgba(247,245,240,.68); margin:0 auto; }

.legal-updated-chip{
  display:inline-flex; align-items:center; gap:9px; margin-top:24px; padding:9px 20px; border-radius:999px;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  font-family: var(--f-mono); font-size:.78rem; color: rgba(247,245,240,.65);
}
.legal-updated-chip i{ color: var(--teal); }

/* ---------- Two-column layout: sticky TOC (left) + content (right) ---------- */
.legal-layout{ display:grid; grid-template-columns: 250px 1fr; gap:60px; align-items:start; }
@media (max-width: 900px){ .legal-layout{ grid-template-columns: 1fr; gap:0; } }

.legal-toc{ position:sticky; top:112px; }
.legal-toc-title{ font-family: var(--f-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color: var(--slate-soft); margin-bottom:18px; }
.legal-toc ul{ display:flex; flex-direction:column; gap:1px; border-left:2px solid var(--rule); }
.legal-toc a{
  display:block; padding:9px 0 9px 18px; margin-left:-2px; font-size:.87rem; color: var(--slate-soft);
  border-left:2px solid transparent; transition: color .25s, border-color .25s;
}
.legal-toc a:hover{ color: var(--ink); }
.legal-toc a.active{ color: var(--teal-deep); border-left-color: var(--teal-deep); font-weight:600; }
@media (max-width: 900px){ .legal-toc{ display:none; } }

/* Mobile: single collapsible TOC accordion — native <details>, no JS
   needed, and no force-open override required at any other breakpoint
   (it's simply hidden outright above 900px). */
.legal-toc-mobile{ display:none; }
@media (max-width: 900px){
  .legal-toc-mobile{
    display:block; margin-bottom:36px; background: var(--white); border:1px solid var(--rule);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow:hidden;
  }
  .legal-toc-mobile summary{
    display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px; cursor:pointer;
    font-family: var(--f-display); font-size:1rem; color: var(--ink); list-style:none;
  }
  .legal-toc-mobile summary::-webkit-details-marker{ display:none; }
  .legal-toc-mobile summary i{ color: var(--teal-deep); transition: transform .3s var(--ease); }
  .legal-toc-mobile[open] summary i{ transform: rotate(180deg); }
  .legal-toc-mobile ul{ padding:0 22px 18px; display:flex; flex-direction:column; gap:2px; border-top:1px solid var(--rule); }
  .legal-toc-mobile a{ display:block; padding:10px 0; font-size:.9rem; color: var(--slate-soft); }
  .legal-toc-mobile a.active{ color: var(--teal-deep); font-weight:600; }
}

/* ---------- Content: glass cards, one per section ---------- */
.legal-content{ min-width:0; }
.legal-card{
  background: rgba(255,255,255,.75); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border:1px solid rgba(255,255,255,.7); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding:36px 38px; margin-bottom:22px; scroll-margin-top:100px;
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.legal-card:hover{ box-shadow: var(--shadow-lift); transform: translateY(-2px); }
@media (max-width: 640px){ .legal-card{ padding:26px 22px; } }

.legal-card-head{ display:flex; align-items:center; gap:16px; margin-bottom:16px; }
.legal-card .icon{
  flex-shrink:0; width:48px; height:48px; border-radius:13px; background: var(--paper-dim); color: var(--teal-deep);
  display:grid; place-items:center; font-size:1.15rem;
}
.legal-card h2{ margin:0; font-size:1.28rem; }
.legal-card p{ color: var(--slate); font-size:.96rem; line-height:1.75; max-width:68ch; }
.legal-card p:last-child{ margin-bottom:0; }
.legal-card ul{ margin:0 0 1em; padding:0; list-style:none; max-width:68ch; }
.legal-card ul:last-child{ margin-bottom:0; }
.legal-card ul li{ position:relative; padding-left:22px; margin-bottom:9px; font-size:.96rem; line-height:1.6; color: var(--slate); }
.legal-card ul li::before{ content:""; position:absolute; left:2px; top:.62em; width:6px; height:6px; border-radius:50%; background: var(--teal); }

.legal-contact-rows{ display:flex; flex-direction:column; gap:14px; margin-top:4px; }
.legal-contact-row{ display:flex; align-items:center; gap:12px; font-size:.95rem; color: var(--ink); }
.legal-contact-row i{ width:20px; text-align:center; color: var(--teal-deep); flex-shrink:0; }
.legal-contact-row a{ color: var(--teal-deep); font-weight:600; }
.legal-contact-row a:hover{ text-decoration: underline; }