/* ============================================================
   Nadel — legal pages (terms, privacy).
   Long-form prose on top of site.css; borrows its tokens so the
   type, colour and rhythm stay in step with the rest of the site.
   ============================================================ */
.legal{padding:120px 0 96px}
.legal .wrap{max-width:820px}

.legal .eyebrow{
  font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-2);
}
.legal h1{
  margin-top:12px;font-family:"Manrope",sans-serif;font-weight:800;
  font-size:clamp(34px,5vw,52px);letter-spacing:-.03em;line-height:1.08;color:var(--text);
}
.legal .updated{margin-top:14px;color:var(--muted);font-size:15px}

.legal-body{margin-top:56px;display:grid;gap:40px}
.legal-body section{scroll-margin-top:100px}
.legal-body h2{
  font-family:"Manrope",sans-serif;font-weight:700;font-size:20px;
  letter-spacing:-.02em;color:var(--text);
}
.legal-body p{margin-top:12px;color:var(--muted);font-size:16.5px;line-height:1.75}
.legal-body ul{margin-top:14px;display:grid;gap:12px;padding-left:20px}
.legal-body li{color:var(--muted);font-size:16.5px;line-height:1.75}
.legal-body li::marker{color:var(--accent)}
.legal-body strong{color:var(--text);font-weight:600}
.legal-body a{color:var(--accent-hi);font-weight:600}
.legal-body a:hover{text-decoration:underline}

.legal-back{
  display:inline-flex;align-items:center;gap:8px;margin-top:56px;
  color:var(--muted);font-size:15px;font-weight:600;
}
.legal-back:hover{color:var(--accent-hi)}

@media (max-width:720px){
  .legal{padding:96px 0 72px}
  .legal-body{gap:32px}
}