/* ==========================================================================
   legal.css — privacy policy and terms of use. Loaded only on those pages.
   ========================================================================== */

.legal-hero{
  background:var(--ink); color:var(--white);
  padding-block:clamp(3rem,6vw,5rem) clamp(2.4rem,4vw,3.4rem);
}
.legal-hero h1{ color:var(--white); font-size:clamp(2.1rem,4.6vw,3.3rem); max-width:20ch }
.legal-hero .kicker{ color:var(--signal) }
.legal-hero p{ color:var(--muted-on-ink); max-width:58ch; margin:1.1rem 0 0; font-size:1rem }
.legal-hero .updated{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.09em;
  color:var(--signal); margin-top:1.6rem; display:block;
}

.legal{ background:var(--paper-2); padding-block:clamp(2.6rem,5vw,4rem) clamp(4rem,7vw,6rem) }
.legal .wrap{ display:grid; grid-template-columns:250px 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:start }

/* --- contents rail --- */
.toc{ position:sticky; top:calc(var(--nav-h) + 24px) }
.toc h2{ font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; font-weight:400; color:var(--muted); margin:0 0 1rem }
.toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc; border-left:1px solid var(--rule) }
.toc li{ counter-increment:toc }
.toc a{
  display:block; padding:.45rem 0 .45rem 1rem; margin-left:-1px;
  font-size:.85rem; color:var(--muted); border-left:2px solid transparent;
  transition:color .25s, border-color .25s;
}
.toc a::before{ content:counter(toc) ". "; font-family:var(--mono); font-size:.72rem; color:var(--rule) }
.toc a:hover,.toc a.is-active{ color:var(--field); border-left-color:var(--field) }
.toc a:hover::before,.toc a.is-active::before{ color:var(--field) }

/* --- prose --- */
.prose{ max-width:74ch; counter-reset:clause }
.prose > section{ padding-block:1.6rem 0; scroll-margin-top:calc(var(--nav-h) + 20px) }
.prose > section + section{ border-top:1px solid var(--rule); margin-top:2.2rem }
.prose h2{
  counter-increment:clause;
  font-size:clamp(1.3rem,2.1vw,1.6rem); margin-bottom:.9rem;
  display:grid; grid-template-columns:auto 1fr; gap:.85rem; align-items:baseline;
}
.prose h2::before{
  content:counter(clause); font-family:var(--mono); font-size:.8rem;
  font-weight:400; color:var(--signal-dp);
}
.prose h3{ font-size:1.02rem; margin:1.6rem 0 .55rem }
.prose p{ color:var(--muted); font-size:.96rem; line-height:1.75 }
.prose ul{ margin:0 0 1.1rem; padding-left:1.1rem; color:var(--muted); font-size:.96rem; line-height:1.75 }
.prose li{ margin-bottom:.45rem }
.prose li::marker{ color:var(--field) }
.prose a{ color:var(--field); text-decoration:underline; text-underline-offset:3px }
.prose a:hover{ color:var(--ink) }
.prose strong{ color:var(--ink); font-weight:500 }

.note{
  background:var(--white); border:1px solid var(--rule); border-left:3px solid var(--signal);
  border-radius:2px; padding:1.1rem 1.3rem; margin:1.4rem 0;
}
.note p{ margin:0; font-size:.9rem }

.legal-contact{
  background:var(--white); border:1px solid var(--rule); border-radius:3px;
  padding:1.4rem 1.5rem; margin-top:1.4rem; font-size:.94rem; line-height:1.85;
}
.legal-contact b{ display:block; font-family:var(--display); font-size:1.05rem; font-weight:600; margin-bottom:.5rem }
.legal-contact a{ color:var(--field) }

@media (max-width:900px){
  .legal .wrap{ grid-template-columns:1fr }
  .toc{ position:static; border-bottom:1px solid var(--rule); padding-bottom:1.4rem }
  .toc ol{ display:flex; flex-wrap:wrap; gap:.3rem; border-left:0 }
  .toc a{ padding:.35rem .75rem; border:1px solid var(--rule); border-radius:100px; margin:0 }
  .toc a:hover,.toc a.is-active{ border-color:var(--field); background:var(--white) }
}
@media (max-width:640px){
  .prose h2{ grid-template-columns:1fr; gap:.2rem }
}