/* ===========================================================================
   Legal Pages (Privacy Policy, Terms of Use) — shared page-specific styles
   Depends on css/styles.css for tokens and shared components.
=========================================================================== */

/* ---------- Hero ---------- */
.legal-hero{ padding:64px 0 56px; text-align:center; }
.legal-hero .container{ max-width:680px; }
.legal-hero-title{
  font-size:clamp(32px,4.6vw,48px);
  text-transform:uppercase;
  line-height:1.15;
  margin-bottom:18px;
}
.legal-hero-intro{
  color:var(--text-muted);
  font-size:16px;
  max-width:600px;
  margin:0 auto 22px;
}
.legal-updated{
  font-size:13px;
  letter-spacing:0.5px;
  color:var(--text-soft);
}

/* ---------- Placeholder marking (visibly flagged, not silently missing) ---------- */
.placeholder{
  color:var(--gold-light);
  font-weight:600;
  border-bottom:1px dashed var(--gold);
  padding-bottom:1px;
}
.on-ivory .placeholder{ color:#8a5a00; border-bottom-color:var(--gold); }

/* ---------- Body layout ---------- */
.legal{ background:var(--ivory); padding:64px 0 96px; }
.legal-layout{
  display:grid;
  grid-template-columns:230px 1fr;
  gap:56px;
  align-items:start;
}

/* ---------- Table of contents ---------- */
.legal-toc{
  position:sticky;
  top:96px;
  border:1px solid var(--border-ivory);
  border-radius:var(--radius-md);
  background:var(--ivory-card);
  padding:22px 22px 20px;
}
.legal-toc-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--teal-deep);
  margin-bottom:12px;
}
.legal-toc ol{
  display:flex;
  flex-direction:column;
  gap:10px;
  counter-reset:toc;
}
.legal-toc li{
  counter-increment:toc;
  font-size:13.5px;
}
.legal-toc a{
  color:var(--ink-soft);
  display:flex;
  gap:8px;
}
.legal-toc a::before{
  content:counter(toc);
  color:var(--gold);
  font-weight:700;
  flex-shrink:0;
}
.legal-toc a:hover{ color:var(--teal-deep); }

@media (max-width:900px){
  .legal-layout{ grid-template-columns:1fr; gap:32px; }
  .legal-toc{ position:static; }
  .legal-toc ol{ flex-direction:row; flex-wrap:wrap; gap:8px 18px; }
  .legal-toc li{ font-size:13px; }
}

/* ---------- Reading column ---------- */
.legal-body{ max-width:74ch; color:var(--ink); }
.legal-body section + section{ margin-top:44px; padding-top:44px; border-top:1px solid var(--border-ivory); }
.legal-body h2{
  font-size:19px;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:var(--ink);
  margin-bottom:16px;
  scroll-margin-top:96px;
}
.legal-body p{
  color:var(--ink-soft);
  font-size:15.5px;
  line-height:1.75;
  margin-bottom:16px;
}
.legal-body p:last-child{ margin-bottom:0; }
.legal-body ul{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:0 0 18px;
}
.legal-body li{
  font-size:15px;
  color:var(--ink-soft);
  line-height:1.6;
  padding-left:18px;
  position:relative;
}
.legal-body li::before{
  content:"";
  position:absolute;
  left:0; top:11px;
  width:8px; height:1px;
  background:var(--gold);
}
.legal-body strong{ color:var(--ink); }
.legal-contact-block{
  background:var(--ivory-card);
  border:1px solid var(--border-ivory);
  border-radius:var(--radius-sm);
  padding:18px 20px;
  font-size:15px;
  color:var(--ink);
  line-height:1.7;
}
.legal-flag{
  display:inline-block;
  margin-top:6px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#8a5a00;
  background:rgba(217,164,65,0.16);
  border:1px solid var(--gold);
  border-radius:20px;
  padding:4px 12px;
}