/* ===========================================================
   PRIVACY POLICY — page-specific styling.
   Reuses every colour/type token, .eyebrow, .nav, and .footer rule
   already defined in style.css; this file only adds the handful of
   classes unique to a long-form legal read: the header band, the
   sticky table of contents, and the numbered section rhythm.
=========================================================== */

.legal-page{ background: var(--paper); }

/* ---- Header band — same warm full-bleed treatment as Founder ---- */
.legal-hero{
  background: var(--paper-warm);
  width: 100%;
  padding: clamp(140px,20vh,190px) max(var(--gutter), calc((100% - 900px) / 2)) clamp(56px,8vh,84px);
}
.legal-eyebrow{ color: var(--clay); }
.legal-hero-title{
  font-family: var(--display); font-weight:700; color: var(--ink);
  font-size: clamp(32px,5.4vw,58px); line-height:1.1; max-width: 820px;
}
.legal-hero-title em{
  font-family: var(--editorial); font-style:italic; font-weight:400; color: var(--rust);
}
.legal-hero-sub{
  font-size: 17px; line-height:1.65; color: var(--charcoal);
  max-width: 620px; margin-top:18px;
}
.legal-updated{
  font-family: var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color: var(--stone); margin-top:22px;
}

/* ---- Body: sticky TOC rail + numbered sections ---- */
.legal-body{
  max-width: 1160px; margin: 0 auto;
  padding: clamp(56px,9vh,96px) var(--gutter) clamp(100px,14vh,150px);
  display:grid; grid-template-columns: 220px 1fr; gap: clamp(40px,6vw,80px);
  align-items:start;
}
.legal-toc{ position: sticky; top: 110px; }
.legal-toc-label{
  font-family: var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color: var(--stone); margin-bottom:14px;
}
.legal-toc ol{ display:flex; flex-direction:column; gap:10px; counter-reset: toc; }
.legal-toc a{
  font-family: var(--body); font-size:13.5px; color: var(--charcoal);
  line-height:1.4; display:block; transition: color 0.25s;
}
.legal-toc a:hover{ color: var(--rust); }

.legal-sections{ display:flex; flex-direction:column; max-width: 720px; }
.legal-section{
  padding: clamp(30px,4vw,42px) 0;
  border-bottom: 1px solid rgba(33,19,17,0.1);
  scroll-margin-top: 100px;
}
.legal-section:first-child{ padding-top:0; }
.legal-section:last-child{ border-bottom:none; }
.legal-num{
  font-family: var(--mono); font-size:12px; letter-spacing:0.1em; color: var(--rust);
  margin-bottom:12px;
}
.legal-section h2{
  font-family: var(--display); font-weight:700; font-size: clamp(21px,2.6vw,27px);
  color: var(--ink); margin-bottom:16px;
}
.legal-section p{ font-size:15.5px; line-height:1.75; color: var(--charcoal); margin-bottom:14px; }
.legal-section p:last-child{ margin-bottom:0; }
.legal-section a{ color: var(--rust); text-decoration: underline; text-underline-offset:2px; }
.legal-list{ display:flex; flex-direction:column; gap:10px; margin: 4px 0 16px; }
.legal-list li{
  position:relative; padding-left:22px;
  font-size:15.5px; line-height:1.7; color: var(--charcoal);
}
.legal-list li::before{
  content:""; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:2px;
  background: var(--executive-gold);
}
.legal-list strong{ color: var(--ink); font-weight:600; }

.legal-contact-cards{ display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; }
.legal-contact-card{
  display:flex; align-items:center; gap:10px;
  background: var(--pure-white); border: 1px solid rgba(33,19,17,0.1);
  border-radius: 12px; padding: 13px 18px;
  font-family: var(--mono); font-size:13px; color: var(--ink);
  box-shadow: 0 10px 26px rgba(33,19,17,0.06);
  transition: transform 0.3s var(--ease-weighted), box-shadow 0.3s, border-color 0.3s;
  cursor:pointer;
}
.legal-contact-card svg{ width:16px; height:16px; stroke: var(--rust); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.legal-contact-card:hover{ transform: translateY(-2px); box-shadow: 0 16px 34px rgba(33,19,17,0.1); border-color: var(--executive-gold); }
.legal-contact-card.is-copied{ border-color: var(--executive-gold); background: var(--paper-warm); }

@media(max-width: 860px){
  .legal-body{ grid-template-columns: 1fr; }
  .legal-toc{ position:static; border-bottom: 1px solid rgba(33,19,17,0.1); padding-bottom: 28px; margin-bottom: 8px; }
  .legal-toc ol{ flex-direction:row; flex-wrap:wrap; gap: 8px 18px; }
}
@media(max-width: 520px){
  .legal-hero{ padding-top: 120px; }
  .legal-contact-cards{ flex-direction:column; align-items:stretch; }
}