/* Shared by terms.html and privacy.html. Same tokens as the marketing page and
   the app, so the legal pages do not look like somebody else's website. */

:root{
  --bg:#000000; --surface:#0A0A09; --surface-2:#121210;
  --border:#232320; --border-strong:#38362F;
  --text:#EDEAE3; --text-dim:#9A968C; --text-faint:#8A867C;
  --accent:#D8C9A3; --accent-ink:#0A0A09;
  --warn:#C9A227; --crit:#CE624A;
  --mono:"IBM Plex Mono",ui-monospace,"Courier New",monospace;
  --type:"Courier Prime","Courier New",Courier,monospace;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --r:4px;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#F6F5F1; --surface:#FFFFFF; --surface-2:#EFEDE7;
    --border:#DEDBD2; --border-strong:#BEB9AC;
    --text:#16150F; --text-dim:#5E5B52; --text-faint:#67635A;
    --accent:#6B5A2E; --accent-ink:#FFFFFF;
    --warn:#7A610C; --crit:#A63B23;
  }
}
:root[data-theme="light"]{
  --bg:#F6F5F1; --surface:#FFFFFF; --surface-2:#EFEDE7;
  --border:#DEDBD2; --border-strong:#BEB9AC;
  --text:#16150F; --text-dim:#5E5B52; --text-faint:#67635A;
  --accent:#6B5A2E; --accent-ink:#FFFFFF;
  --warn:#7A610C; --crit:#A63B23;
}

*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--text);
  font-family:var(--type); font-size:15px; line-height:1.68;
  -webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

.wrap{max-width:760px; margin:0 auto; padding:0 22px 70px}

header{padding:34px 0 26px; border-bottom:1px solid var(--border); margin-bottom:32px}
.brand{font-family:var(--serif); font-size:25px; line-height:1;
  text-decoration:none; color:var(--text); display:inline-block}
.brand em{font-style:italic; color:var(--text-dim)}
.eyebrow{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-faint); margin:22px 0 8px}
header h1{font-family:var(--serif); font-weight:400; font-size:clamp(30px,5vw,40px);
  margin:0 0 8px; line-height:1.1}
.updated{font-family:var(--mono); font-size:11.5px; color:var(--text-faint); margin:0}

h2{font-family:var(--serif); font-weight:400; font-size:23px;
  margin:38px 0 12px; line-height:1.2; text-wrap:balance}
h3{font-family:var(--mono); font-size:12.5px; font-weight:600; letter-spacing:.03em;
  margin:26px 0 8px}
p{margin:0 0 14px; max-width:70ch}
ul,ol{margin:0 0 14px; padding-left:22px; max-width:70ch}
li{margin-bottom:9px}
strong{font-weight:700}
a{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
code{font-family:var(--mono); font-size:13px; color:var(--text-dim)}

.notice{border:1px solid var(--border-strong); border-left-width:3px;
  border-left-color:var(--accent); border-radius:var(--r);
  background:var(--surface); padding:14px 16px; margin:0 0 22px}
.notice p:last-child{margin-bottom:0}
.notice.critical{border-left-color:var(--crit)}
.notice.draft{border-left-color:var(--warn)}

.tablewrap{overflow-x:auto; margin:0 0 18px}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:13.5px}
th,td{text-align:left; vertical-align:top; padding:9px 12px 9px 0;
  border-bottom:1px solid var(--border)}
th{font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-faint); font-weight:500}

footer{border-top:1px solid var(--border); margin-top:44px; padding-top:20px;
  display:flex; gap:18px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11.5px}
footer a{color:var(--text-faint); text-decoration:none}
footer a:hover{color:var(--text-dim); text-decoration:underline}