/*
  Shared styling for the legal pages (/terms, /privacy).
  Tokens are copied from index.html rather than imported, because index.html keeps its CSS inline
  and there is no build step here — one stylesheet both pages link is the smallest way to stop the
  two drifting apart. If the palette in index.html changes, change it here too.
*/
:root{
  --bg:#F7F7F3; --surface:#FFFFFF; --card:#FFFFFF;
  --line:rgba(12,12,10,.10); --line2:rgba(12,12,10,.16);
  --hi:#0F0F0E; --mid:#565853; --lo:#8A8C86;
  --lime:#D5FF18; --lime-ink:#5C7A00; --on-lime:#0A0A0A; --lime-wash:rgba(174,214,0,.18);
  --display:"Bricolage Grotesque","Clash Display","Inter",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:16px; --r-sm:10px; --maxw:760px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0A0A0A; --surface:#121212; --card:#161616;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.15);
  --hi:#F3F3F0; --mid:#A2A49D; --lo:#6C6E68;
  --lime-ink:#D5FF18; --lime-wash:rgba(213,255,24,.12);
}}
:root[data-theme="dark"]{
  --bg:#0A0A0A; --surface:#121212; --card:#161616;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.15);
  --hi:#F3F3F0; --mid:#A2A49D; --lo:#6C6E68;
  --lime-ink:#D5FF18; --lime-wash:rgba(213,255,24,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--hi);font-family:var(--body);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

header.top{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:10}
header.top .wrap{display:flex;align-items:center;gap:12px;height:60px}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--hi);font-family:var(--display);font-weight:700;font-size:17px}
.mk{width:26px;height:26px;border-radius:999px;background:var(--lime);color:var(--on-lime);display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:800}
.top nav{margin-left:auto;display:flex;gap:18px}
.top nav a{color:var(--mid);text-decoration:none;font-size:14px}
.top nav a:hover,.top nav a[aria-current]{color:var(--hi)}

main{padding:40px 0 72px}
h1{font-family:var(--display);font-size:clamp(30px,6vw,42px);line-height:1.1;letter-spacing:-.02em;margin:0 0 8px}
.updated{color:var(--lo);font-size:13.5px;margin:0 0 24px}
.lede{color:var(--mid);font-size:17px;margin:0 0 32px}
h2{font-family:var(--display);font-size:20px;line-height:1.25;margin:32px 0 8px;scroll-margin-top:76px}
h3{font-size:15.5px;margin:20px 0 6px}
p,li{color:var(--mid)}
p{margin:0 0 12px}
ul,ol{margin:0 0 12px;padding-left:22px}
li{margin:0 0 6px}
strong{color:var(--hi);font-weight:600}
a{color:var(--lime-ink);text-underline-offset:2px}

/* The one thing a reader must not miss, and the reason most of this document reads as it does. */
.callout{
  border:1px solid var(--line2);background:var(--lime-wash);border-radius:var(--r);
  padding:16px 18px;margin:24px 0;
}
.callout p{color:var(--hi);margin:0}

.toc{border:1px solid var(--line);background:var(--card);border-radius:var(--r);padding:16px 18px;margin:0 0 32px}
.toc p{color:var(--lo);font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;margin:0 0 8px}
.toc ol{margin:0;padding-left:20px}
.toc a{color:var(--mid);text-decoration:none}
.toc a:hover{color:var(--hi)}

table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:14.5px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--mid)}
th{color:var(--hi);font-weight:600;white-space:nowrap}

footer.legal{border-top:1px solid var(--line);padding:24px 0 48px}
footer.legal p{font-size:13px;color:var(--lo);margin:0 0 8px}
footer.legal a{color:var(--mid)}