/* css/legal.css — Standalone stylesheet for the legal/policy pages
   (legal/*.html). Deliberately separate from style.css (which is built for
   the app shell/3D canvas UI, not long-form reading) but reuses the same
   color tokens so the pages feel like part of Blockplan rather than a
   generic document. Self-contained: these pages don't load style.css. */
:root{
  --bg-0:#0a0c10; --bg-1:#101318; --bg-2:#161a20; --bg-3:#1d222a;
  --border:#262c35; --border-soft:#1e232b;
  --text:#eef1f5; --text-dim:#9aa5b3; --text-faint:#5e6875;
  --accent:#d9a441; --accent-strong:#f0bb5c;
  --accent-2:#3f9c88; --accent-2-strong:#52bfa8;
  --danger:#e0554a; --good:#5cbf7d;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg-0); color:var(--text);
  font:400 15px/1.65 'Inter',-apple-system,BlinkMacSystemFont,sans-serif; -webkit-font-smoothing:antialiased; }
a{ color:var(--accent-2-strong); text-decoration:none; }
a:hover{ text-decoration:underline; }
.legal-topbar{ position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:16px;
  padding:14px 24px; background:var(--bg-1); border-bottom:1px solid var(--border); }
.legal-topbar a.brand{ font:700 16px/1 'Sora',sans-serif; color:var(--text); letter-spacing:0.2px; }
.legal-topbar nav{ display:flex; gap:18px; margin-left:auto; flex-wrap:wrap; }
.legal-topbar nav a{ color:var(--text-dim); font-size:13.5px; }
.legal-topbar nav a.current{ color:var(--accent-strong); }
.legal-wrap{ max-width:760px; margin:0 auto; padding:40px 24px 80px; }
.legal-wrap h1{ font:700 30px/1.25 'Sora',sans-serif; margin:0 0 6px; color:var(--text); }
.legal-meta{ color:var(--text-faint); font-size:13px; margin:0 0 36px; }
.legal-wrap h2{ font:600 19px/1.3 'Sora',sans-serif; color:var(--text); margin:38px 0 12px; padding-top:6px; border-top:1px solid var(--border-soft); }
.legal-wrap h2:first-of-type{ border-top:none; padding-top:0; }
.legal-wrap h3{ font:600 15.5px/1.3 'Sora',sans-serif; color:var(--text); margin:20px 0 8px; }
.legal-wrap p{ color:var(--text-dim); margin:0 0 14px; }
.legal-wrap li{ color:var(--text-dim); margin:0 0 8px; }
.legal-wrap ul,.legal-wrap ol{ margin:0 0 14px; padding-left:22px; }
.legal-wrap strong{ color:var(--text); }
.legal-wrap code{ background:var(--bg-3); border:1px solid var(--border); border-radius:4px; padding:1px 6px; font:500 13px/1 'JetBrains Mono',monospace; color:var(--text); }
.callout{ display:flex; gap:10px; align-items:flex-start; padding:14px 16px; border-radius:10px; margin:0 0 20px; font-size:13.5px; }
.callout-review{ background:rgba(217,164,65,0.1); border:1px solid rgba(217,164,65,0.35); color:var(--text); }
.callout-review b{ color:var(--accent-strong); }
.callout-info{ background:rgba(63,156,136,0.1); border:1px solid rgba(63,156,136,0.3); color:var(--text); }
.toc{ background:var(--bg-2); border:1px solid var(--border); border-radius:12px; padding:16px 20px; margin:0 0 36px; }
.toc b{ display:block; margin-bottom:8px; font:600 13px/1 'Sora',sans-serif; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.5px; }
.toc ol{ margin:0; padding-left:20px; columns:2; column-gap:24px; }
.toc li{ margin-bottom:6px; font-size:13.5px; break-inside:avoid; }
.legal-footer{ max-width:760px; margin:0 auto; padding:0 24px 60px; color:var(--text-faint); font-size:12.5px; }
.legal-footer a{ color:var(--text-dim); }
@media (max-width:640px){
  .legal-topbar{ padding:12px 16px; }
  .legal-wrap{ padding:28px 16px 60px; }
  .legal-wrap h1{ font-size:24px; }
  .toc ol{ columns:1; }
}