/* Shared by /privacy/ and /terms/ only. The home page keeps its own inline styles —
   it is one bespoke page with a game in it, and splitting its CSS out would buy
   nothing. These two are plain documents and can share a stylesheet.
   Same tokens as index.html: paper, orange, black. */
:root{
  --paper:#f7f3ea; --bg2:#efe7d9; --surface:#fffdf7; --white:#fff;
  --ink:#141210; --black:#0e0d0c; --ink2:#4a423a;
  --orange:#c2600c; --orange-br:#ff8c1a; --amber:#d98e04; --ember:#e2543a;
  --muted:#6f665c;
  --line:rgba(20,18,16,.14); --line2:rgba(20,18,16,.3);
  --sans:"Manrope",system-ui,sans-serif;
  --serif:"Source Serif 4",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --shadow:0 18px 48px rgba(40,30,18,.14);
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.62;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:linear-gradient(rgba(20,18,16,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(20,18,16,.04) 1px,transparent 1px);
  background-size:38px 38px;mask-image:linear-gradient(to bottom,black,transparent 78%)}
a{color:var(--orange)}
::selection{background:var(--orange-br);color:var(--black)}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

.shell{width:min(780px,calc(100% - 40px));margin-inline:auto}
.tiny{font-size:12px}
.mono{font-family:var(--mono)}

.topbar{background:rgba(247,243,234,.92);border-bottom:1px solid var(--line)}
.topbar-inner{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:20px;width:min(1120px,calc(100% - 40px));margin-inline:auto}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none;font-weight:700;color:var(--ink);white-space:nowrap}
.mark-card{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--black);border-radius:11px;background:var(--surface);font:700 15px var(--mono);color:var(--orange);transform:rotate(-5deg);box-shadow:4px 4px 0 var(--black);flex:none}
.mark small{display:block;color:var(--muted);font:500 10px var(--mono);text-transform:uppercase;letter-spacing:.11em;line-height:1.45}
.navlink{font:600 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--ink2)}
.navlink:hover{color:var(--orange)}

main{padding:64px 0 24px}
.eyebrow{font:600 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ember);margin:0 0 10px}
h1{font:650 clamp(36px,5.4vw,58px)/1 var(--serif);letter-spacing:-.04em;margin:0 0 18px;text-wrap:balance}
h2{font:600 clamp(22px,2.8vw,29px)/1.16 var(--serif);letter-spacing:-.022em;margin:44px 0 12px}
.lede{font-size:19px;line-height:1.5;color:var(--ink2);max-width:640px;text-wrap:pretty}
.stamp{display:inline-block;margin:16px 0 0;font:700 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--black);background:var(--amber);padding:4px 9px;border-radius:5px}
p{color:#4b433b}
ul{padding-left:0;list-style:none;margin:14px 0}
li{position:relative;padding:9px 0 9px 26px;border-top:1px solid var(--line);color:#433b34}
li:first-child{border-top:0}
li::before{content:"↳";position:absolute;left:1px;color:var(--orange);font-family:var(--mono)}
li b{color:var(--ink)}

/* the processor table — who sees what, in one grid */
.who{margin:16px 0 0;border-top:1px solid var(--line2)}
.who-row{display:grid;grid-template-columns:190px 1fr;gap:8px 18px;padding:13px 2px;border-bottom:1px solid var(--line);align-items:baseline}
.who-row b{font:700 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--orange)}
.who-row span{font-size:14.5px;color:#4b433b}

.rule-note{margin-top:28px;padding:15px 17px;border-left:3px solid var(--orange);background:rgba(255,140,26,.08);color:#463c33;border-radius:0 10px 10px 0;font-size:14.5px}

.foot{border-top:1px solid var(--line);background:rgba(255,255,255,.5);padding:32px 0 44px;margin-top:56px}
.foot-grid{display:flex;flex-wrap:wrap;gap:16px 22px;justify-content:space-between;align-items:center;width:min(1120px,calc(100% - 40px));margin-inline:auto}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--orange-br);box-shadow:0 0 0 3px rgba(255,140,26,.22)}
.foot-links{display:flex;flex-wrap:wrap;gap:16px;font:600 12px var(--mono);letter-spacing:.05em}
.foot-links a{text-decoration:none;color:var(--ink2)}
.foot-links a:hover{color:var(--orange)}

@media (max-width:620px){
  .mark small{display:none}
  main{padding:44px 0 16px}
  .who-row{grid-template-columns:1fr;gap:4px}
}