/* ============ Tokens — identical to home.html ============ */
:root{
  --graphite:#0E1316;
  --panel-dark-2:#1C262E;
  --cloud:#F4F6F7;
  --paper:#FFFFFF;
  --ink:#15202B;
  --smoke:#6B7780;
  --mist:#E8EDF0;
  --beacon:#FF8A23;
  --beacon-ink:#1A1106;
  --beacon-soft:#FFE9D6;
  --coolant:#1C6FB0;
  --coolant-soft:#E7F1F9;
  --good:#2FAE6B;
  --line:#E2E6E8;
  --r-lg:22px;
  --r-md:14px;
  --r-sm:9px;
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.65;
}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2.5px solid var(--beacon);outline-offset:3px;border-radius:4px;}

/* ============ Topbar ============ */
.legal-topbar{
  position:sticky;top:0;z-index:50;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
  background:var(--graphite);color:var(--mist);
  padding:15px clamp(20px,5vw,40px);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.legal-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;font-size:1.02rem;color:var(--mist);}
.legal-brand-mark{flex:none;}
.legal-brand-text small{display:block;font-family:var(--font-mono);font-weight:500;font-size:0.58rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--mist);opacity:.6;margin-top:1px;}
.legal-topbar-nav{display:flex;align-items:center;flex-wrap:wrap;gap:22px;font-size:0.88rem;font-weight:500;}
.legal-topbar-nav a{color:var(--mist);opacity:.78;transition:opacity .2s,color .2s;}
.legal-topbar-nav a:hover{opacity:1;}
.legal-topbar-nav a.active{opacity:1;color:var(--beacon);}

/* ============ Reading column ============ */
.legal-wrap{max-width:760px;margin-inline:auto;padding:clamp(48px,7vw,80px) clamp(20px,5vw,40px) clamp(64px,8vw,96px);}

.legal-doc-title{
  font-family:var(--font-display);font-weight:700;letter-spacing:-0.02em;line-height:1.08;
  font-size:clamp(2rem,3vw + 1rem,2.7rem);color:var(--ink);
}
.legal-updated{
  margin-top:10px;font-family:var(--font-mono);font-size:0.72rem;font-weight:600;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--coolant);
}

.legal-placeholder-notice{
  margin-top:32px;padding:18px 22px;border-radius:var(--r-md);
  background:var(--beacon-soft);border-left:3px solid var(--beacon);
  font-size:0.92rem;color:var(--ink);
}
.legal-placeholder-notice strong{font-family:var(--font-display);font-weight:600;}

.legal-placeholder{
  display:inline-block;font-family:var(--font-mono);font-size:0.85em;
  background:var(--beacon-soft);color:var(--beacon-ink);
  padding:1px 6px;border-radius:5px;
}

/* ============ Document body ============ */
.legal-doc{margin-top:44px;}
.legal-doc h2{
  font-family:var(--font-display);font-weight:600;letter-spacing:-0.01em;
  font-size:1.3rem;color:var(--ink);
  margin:42px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line);
}
.legal-doc h2:first-child{margin-top:0;}
.legal-doc p{margin:0 0 16px;color:var(--ink);}
.legal-doc ul{margin:0 0 16px;padding-left:22px;}
.legal-doc li{margin-bottom:8px;color:var(--ink);}
.legal-doc strong{font-weight:600;}
.legal-doc a{color:var(--coolant);text-decoration:underline;text-underline-offset:3px;}
.legal-doc a:hover{color:var(--beacon);}

/* ============ Footer — dark bookend, matches home.html ============ */
.legal-footer{
  background:#0A0E11;color:#8A98A3;
  display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;
  padding:24px clamp(20px,5vw,40px);
}
.legal-footer-links{display:flex;flex-wrap:wrap;gap:18px 26px;}
.legal-footer a{color:#AEB9C0;font-size:0.86rem;transition:color .2s;}
.legal-footer a:hover{color:var(--beacon);}
.legal-footer-copy{margin-left:auto;font-family:var(--font-mono);font-size:0.74rem;color:#5C6970;}
.legal-footer-copy a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.legal-footer-copy a:hover{color:var(--beacon);}

@media (max-width:640px){
  .legal-footer-copy{margin-left:0;}
}