/* Privacy + Terms. External file, not inline: style-src 'self' blocks inline <style> in
   prod, and localhost sends no CSP so that failure would only show up after deploy. */
body.legal{background:var(--cream);color:var(--ink)}

.lhead{border-bottom:1px solid var(--rule);background:var(--cream)}
.lhead .inner{max-width:var(--wrap);margin:0 auto;padding:20px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.lhead a.wordmark{font-family:var(--display);font-size:20px;font-weight:600;
  letter-spacing:-.02em;text-decoration:none}
.lhead a.wordmark em{font-style:normal;color:var(--ember)}
.lhead .back{font-size:14px;color:var(--muted);text-decoration:none}
.lhead .back:hover{color:var(--ink)}

.legal main{max-width:68ch;margin:0 auto;padding:54px 24px 72px}
.legal .eyebrow{font-size:11px;font-weight:800;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ember);margin-bottom:16px}
.legal h1{font-size:clamp(32px,5vw,50px);margin-bottom:12px}
.legal .eff{font-size:14px;color:var(--muted);margin-bottom:38px}
.legal h2{font-size:21px;margin:38px 0 10px}
.legal p{margin-bottom:14px}
.legal ul{margin:0 0 14px 20px}
.legal li{margin-bottom:7px}
/* Scoped to the prose column on purpose: unscoped, this also repainted the footer's
   links ember-on-near-black, which measures 2.47:1. The footer keeps its own cream. */
.legal main a{color:var(--ember-d);text-underline-offset:3px}
.legal .callout{border-left:3px solid var(--ember);background:var(--cream-2);
  padding:16px 18px;border-radius:0 8px 8px 0;margin:22px 0}
.legal .callout p:last-child{margin-bottom:0}

@media (max-width:640px){
  .legal main{padding:36px 20px 56px}
  .lhead .inner{padding:16px 20px}
}