/* ---- HERO (light) ---- */
.legal-hero {
  position:relative; overflow:hidden; padding:150px 0 var(--space-2xl);
  background:linear-gradient(180deg, var(--brand-50) 0%, #fff 80%);
}
.legal-hero .wrap { max-width:760px; }
.legal-hero h1 {
  line-height:var(--line-tight); letter-spacing:-.02em; color:var(--color-secondary);
}
.legal-updated {
  font-size:var(--text-sm); color:var(--color-ink-soft); margin:var(--space-xs) 0 0; letter-spacing:.01em;
}
.legal-updated strong { color:var(--color-secondary); font-weight:var(--weight-bold); }

/* Prominent draft note */
.legal-draft {
  display:flex; align-items:flex-start; gap:var(--space-xs); margin:var(--space-m) 0 0;
  background:oklch(from var(--color-warning) 95% 0.03 h); border:1px solid oklch(from var(--color-warning) 85% 0.05 h);
  border-radius:var(--radius-component-lg); padding:var(--space-s) var(--space-m); box-shadow:var(--shadow-xs);
}
.legal-draft svg {
  width:22px; height:22px; flex:none; margin-top:2px;
  stroke:var(--color-warning); fill:none; stroke-width:2;
}
.legal-draft p { margin:0; font-size:var(--text-sm); line-height:var(--line-normal); color:var(--color-warning); }
.legal-draft strong { color:var(--color-warning); font-weight:var(--weight-bold); }

/* ---- BODY (single readable column) ---- */
.legal-page {
  max-width:740px;
  color:var(--color-ink);
  font-size:var(--text-md);
  line-height:var(--line-relaxed);
}
.legal-page .legal-intro {
  font-size:var(--text-lg); line-height:var(--line-relaxed); color:var(--color-ink-soft); margin:0 0 var(--space-2xs);
}
.legal-page .legal-intro strong { color:var(--color-secondary); }
.legal-page .legal-intro em { font-style:italic; }

.legal-page h2 {
  color:var(--color-secondary); letter-spacing:-.005em; line-height:var(--line-snug);
  margin:var(--space-xl) 0 var(--space-xs); scroll-margin-top:96px;
}
.legal-page h3 {
  color:var(--color-secondary);
  letter-spacing:-.005em; margin:var(--space-m) 0 var(--space-2xs);
}
.legal-page p { margin:0 0 var(--space-s); }
.legal-page p strong { color:var(--color-secondary); font-weight:var(--weight-bold); }
.legal-page em { font-style:italic; }

.legal-page ul { margin:0 0 var(--space-s); padding-left:0; list-style:none; }
.legal-page ul li {
  position:relative; padding-left:var(--space-m); margin-bottom:var(--space-2xs); line-height:var(--line-relaxed);
}
.legal-page ul li::before {
  content:""; position:absolute; left:6px; top:.62em;
  width:7px; height:7px; border-radius:var(--radius-full);
  background:var(--color-accent);
}
.legal-page ul li strong { color:var(--color-secondary); font-weight:var(--weight-bold); }

.legal-page a { color:var(--color-primary); font-weight:var(--weight-semibold); }
.legal-page a:hover { text-decoration:underline; }

/* ---- Contact block ---- */
.legal-contact {
  margin:var(--space-m) 0 0; background:var(--brand-25); border:none;
  border-radius:var(--radius-component-lg); padding:var(--space-m); box-shadow:var(--shadow-xs);
}
.legal-contact-name {
  font-weight:var(--weight-bold); color:var(--color-secondary); margin:0 0 var(--space-xs) !important;
}
.legal-contact-list { margin:0 !important; }
.legal-contact-list li { padding-left:0 !important; display:flex; align-items:center; gap:var(--space-xs); }
.legal-contact-list li::before { content:none !important; }
.legal-contact-list svg {
  width:20px; height:20px; flex:none;
  stroke:var(--color-primary); fill:none; stroke-width:2;
}

/* ---- Responsive ---- */
@media (max-width:760px) {
  .legal-hero { padding-top:124px; }
  .legal-page { font-size:var(--text-md); }
}