/* Shared chrome for the legal pages. Deliberately its own file rather than a
   copy of landing_site.html's inline CSS — these pages are long-form text and
   need almost none of the landing page's machinery. Tokens are copied from
   landing_site.html :root so the two stay visually in family. */
:root{
  --bg:#050505; --panel:#0b0b0b; --line:#1e1e1e; --line-2:#2c2c2c;
  --txt:#fafafa; --txt-2:rgba(250,250,250,0.62); --txt-3:rgba(250,250,250,0.38);
  --accent:#5B8AFF; --amber:#f59e0b;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--txt); line-height:1.7;
  -webkit-font-smoothing:antialiased; letter-spacing:-0.011em;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

header.legal-top{
  position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:14px;
  padding:14px 24px; border-bottom:1px solid var(--line);
  background:rgba(5,5,5,0.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
header.legal-top .brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:0.02em;color:var(--txt)}
header.legal-top .brand img{width:20px;height:20px;object-fit:contain}
header.legal-top nav{margin-left:auto;display:flex;gap:18px;font-size:13px}
header.legal-top nav a{color:var(--txt-3)}
header.legal-top nav a:hover,header.legal-top nav a[aria-current]{color:var(--txt);text-decoration:none}

main{max-width:760px;margin:0 auto;padding:56px 24px 100px}
h1{font-size:34px;font-weight:800;letter-spacing:-0.03em;line-height:1.15;margin-bottom:10px}
.updated{font-size:13px;color:var(--txt-3);margin-bottom:34px}
h2{font-size:19px;font-weight:700;letter-spacing:-0.02em;margin:40px 0 12px;scroll-margin-top:80px}
h3{font-size:15px;font-weight:700;margin:24px 0 8px;color:var(--txt)}
p,li{font-size:15px;color:var(--txt-2)}
p{margin-bottom:14px}
ul,ol{margin:0 0 16px 22px}
li{margin-bottom:7px}
strong{color:var(--txt);font-weight:600}
code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;color:var(--txt);background:rgba(255,255,255,0.06);padding:1px 5px;border-radius:4px}

/* The one thing on these pages that must not be skimmed past. */
.notice{
  border:1px solid rgba(245,158,11,0.32); background:rgba(245,158,11,0.07);
  border-radius:12px; padding:16px 18px; margin:0 0 34px;
}
.notice p{margin:0;font-size:13.5px;color:rgba(250,250,250,0.8)}
.notice strong{color:var(--amber)}

.toc{border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin-bottom:38px;background:var(--panel)}
.toc h4{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--txt-3);margin-bottom:10px;font-weight:700}
.toc ol{margin:0 0 0 18px}
.toc li{margin-bottom:4px;font-size:14px}

table{width:100%;border-collapse:collapse;margin:6px 0 20px;font-size:13.5px;display:block;overflow-x:auto}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--txt-3);font-weight:600;font-size:11px;letter-spacing:0.07em;text-transform:uppercase;white-space:nowrap}
td{color:var(--txt-2)}

footer.legal-foot{
  border-top:1px solid var(--line); padding:26px 24px; text-align:center;
  font-size:13px; color:var(--txt-3);
}
footer.legal-foot a{color:var(--txt-3);margin:0 9px}
footer.legal-foot a:hover{color:var(--txt)}

@media (max-width:640px){
  main{padding:36px 20px 70px}
  h1{font-size:27px}
}