/* Shared by the legal pages. They are plain HTML on purpose: served straight
   by nginx, readable with JavaScript off, and crawlable — a policy nobody can
   load is not a policy. Same tokens as the app so they don't feel bolted on.
   The font families match Directory.jsx, which names them and lets the system
   stack answer; nothing here loads a web font either. */
:root{
  --mat:#0E141C; --surf:#16202D; --surf2:#1B2836; --line:#26364B;
  --bone:#EDE7DA; --soft:#93A2B5; --red:#D33B30; --gold:#E0A93B; --go:#4ED08A;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--mat);color:var(--bone)}
body{font-family:'Barlow',system-ui,sans-serif;font-size:16px;line-height:1.62;
  -webkit-text-size-adjust:100%}
a{color:var(--bone);text-underline-offset:3px}
a:hover{color:var(--gold)}

.bar{display:flex;align-items:center;gap:14px;padding:16px 22px;
  border-bottom:1px solid var(--line);background:var(--surf)}
.mark{width:30px;height:30px;border-radius:50%;flex:none;border:3px solid var(--bone);
  display:grid;place-items:center}
.mark-dot{width:8px;height:8px;border-radius:50%;background:var(--red);display:block}
.brand{font-family:'Archivo Black','Barlow',sans-serif;font-size:17px;letter-spacing:.01em;
  text-decoration:none}
.bar .back{margin-left:auto;font-size:13px;color:var(--soft)}

main{max-width:74ch;margin:0 auto;padding:38px 22px 90px}
h1{font-family:'Archivo Black','Barlow',sans-serif;font-weight:400;font-size:31px;
  line-height:1.15;margin:0 0 6px}
h2{font-family:'Archivo Black','Barlow',sans-serif;font-weight:400;font-size:20px;
  margin:40px 0 10px;padding-top:14px;border-top:1px solid var(--line)}
h3{font-size:16px;margin:24px 0 6px;letter-spacing:.01em}
p,li{color:#DCD6C9}
li{margin:5px 0}
ul,ol{padding-left:22px}
.stamp{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;color:var(--soft);
  letter-spacing:.04em;text-transform:uppercase;margin:0 0 26px}
.lede{font-size:17px;color:var(--bone);border-left:3px solid var(--red);padding-left:16px;
  margin:22px 0 30px}
.toc{background:var(--surf);border:1px solid var(--line);border-radius:4px;padding:14px 18px;
  margin:26px 0}
.toc ol{margin:0;padding-left:20px}
.toc a{color:var(--soft);text-decoration:none}
.toc a:hover{color:var(--gold);text-decoration:underline}
table{width:100%;border-collapse:collapse;margin:16px 0;font-size:15px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--soft);font-weight:600;font-size:13px;letter-spacing:.05em;text-transform:uppercase}
code{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px;
  background:var(--surf2);padding:1px 5px;border-radius:3px}

/* Anything still needing a decision from a person. Deliberately loud: these
   pages must not go live with one of these still in them. */
.tbd{background:var(--red);color:#fff;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:13px;padding:1px 6px;border-radius:3px;font-weight:600}
.counsel{border:2px solid var(--red);border-radius:4px;padding:14px 18px;margin:22px 0;
  background:rgba(211,59,48,.09)}
.counsel h3{margin-top:0;color:var(--red)}

.note{background:var(--surf);border-left:3px solid var(--gold);padding:12px 16px;margin:20px 0;
  font-size:15px}
footer{max-width:74ch;margin:0 auto;padding:20px 22px 60px;border-top:1px solid var(--line);
  color:var(--soft);font-size:13px}
footer a{color:var(--soft)}
@media (max-width:640px){ main{padding:26px 18px 70px} h1{font-size:26px} }