/* Shared stylesheet for the long-form pages — privacy.html and terms.html.
   A separate file rather than a copy of index.html's <style> in each, because
   these two are the pages most likely to be edited by someone reading the law
   rather than the CSS, and they should not be able to drift apart.

   The tokens are index.html's, trimmed to what prose needs. If you change a
   colour there, change it here. */

:root{
  --court:#194963; --court-deep:#0D2E41; --court-line:#1E5878;
  --paper:#EEF2F3; --card:#FFFFFF; --ink:#0E1F28;
  --body:#566B76;          /* prose — 5.6:1 on white, 4.9:1 on paper */
  --muted:#6A7E89;
  --line:#DBE4E7; --hair:#EBF0F2;
  --on-court:#B6D0DE;      /* 6.0:1 on court */
  --eyebrow-blue:#9CC0D6;
  --ball:#D9E84C;
  --sans:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --cond:'Barlow Condensed',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:16px;line-height:1.55;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
a{color:var(--court)}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:#fff;color:var(--court);
  font-family:var(--cond);font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:12px 18px;border-radius:2px}
.skip:focus{left:12px;top:12px}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px;margin:0 auto;padding:0 24px}

/* ── masthead / footer: index.html's, unchanged ─── */
.mast{background:var(--court);border-bottom:1px solid var(--court-deep)}
.mast-in{display:flex;align-items:center;gap:20px;height:62px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.mark{width:26px;height:26px;border-radius:5px;background:var(--court-deep);display:grid;place-items:center;flex:none}
.mark i{width:9px;height:9px;border-radius:50%;background:var(--ball);display:block}
.wordmark{font-family:var(--cond);font-weight:700;font-size:25px;letter-spacing:.05em;text-transform:uppercase;color:#fff}
.mast nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.mast nav a{font-family:var(--cond);font-weight:600;font-size:13px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--on-court);text-decoration:none;padding:8px 11px;border-radius:2px;transition:color .12s,background .12s}
.mast nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.mast nav a.cta{background:#fff;color:var(--court);margin-left:8px}
.mast nav a.cta:hover{background:#E6F0F5;color:var(--court)}
@media(max-width:760px){.mast nav a.hide-sm{display:none}}

footer{background:var(--court-deep);border-top:1px solid var(--court-line);padding:26px 0;color:var(--on-court);font-size:13.5px;margin-top:70px}
.foot-in{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
footer a{color:var(--on-court)}
.foot-in .r{margin-left:auto;font-family:var(--mono);font-size:12px}
@media(max-width:680px){.foot-in .r{margin-left:0}}

/* ── the document ─────────────────────────────── */
.head{background:var(--court);color:#fff;padding:48px 0 40px}
.eyebrow{font-family:var(--cond);font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--eyebrow-blue)}
.head h1{font-family:var(--cond);font-weight:700;font-size:46px;line-height:1.03;letter-spacing:.02em;
  text-transform:uppercase;margin:12px 0 16px;color:#fff}
.head .lede{font-size:19px;line-height:1.5;color:var(--on-court);max-width:60ch}
.stamp{margin-top:22px;font-family:var(--mono);font-size:12.5px;color:var(--eyebrow-blue)}
@media(max-width:900px){.head h1{font-size:36px}}
@media(max-width:680px){.head h1{font-size:30px} .head .lede{font-size:17px}}

.doc{padding:44px 0 0}
.doc section{margin-bottom:40px;scroll-margin-top:20px}
.doc h2{font-family:var(--cond);font-weight:700;font-size:27px;line-height:1.08;letter-spacing:.04em;
  text-transform:uppercase;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--court)}
.doc h3{font-family:var(--cond);font-weight:700;font-size:17px;letter-spacing:.1em;text-transform:uppercase;
  margin:24px 0 8px;color:var(--court)}
.doc p{color:var(--body);margin-bottom:14px;max-width:72ch}
.doc ul{margin:0 0 16px 20px;color:var(--body);max-width:72ch}
.doc li{margin-bottom:7px;padding-left:2px}
.doc strong{color:var(--ink);font-weight:600}
.doc .mono{font-family:var(--mono);font-size:.92em}

/* the "in one line" answer that opens each section */
.gist{background:var(--card);border-left:3px solid var(--court);padding:14px 18px;margin-bottom:18px;border-radius:0 2px 2px 0}
.gist p{margin:0;color:var(--ink);font-size:15.5px}

/* contents */
.toc{background:var(--card);border:1px solid var(--line);border-radius:2px;padding:18px 22px;margin-bottom:40px}
.toc h2{font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.1em;text-transform:uppercase;
  border:none;padding:0;margin-bottom:10px;color:var(--muted)}
.toc ol{margin:0;padding-left:20px;columns:2;column-gap:32px}
.toc li{margin-bottom:5px;color:var(--body);font-size:14.5px;break-inside:avoid}
@media(max-width:680px){.toc ol{columns:1}}

/* tables — what we hold, who sees it */
.tbl{width:100%;border-collapse:collapse;margin-bottom:18px;font-size:14.5px}
.tbl caption{text-align:left;font-family:var(--cond);font-weight:600;font-size:13px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);padding-bottom:8px}
.tbl th,.tbl td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-family:var(--cond);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--court);background:var(--hair);border-bottom:2px solid var(--court)}
.tbl td{color:var(--body)}
.tbl td:first-child{color:var(--ink);font-weight:500}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.note{font-size:14px;color:var(--muted);max-width:72ch}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}
:focus-visible{outline:2px solid var(--court);outline-offset:2px}
.mast :focus-visible,.head :focus-visible,footer :focus-visible{outline-color:#fff}

@media print{
  .mast,footer,.toc,.skip{display:none}
  body{background:#fff;font-size:11pt}
  .head{background:#fff;color:#000;padding:0 0 20px}
  .head h1,.head .lede,.stamp{color:#000}
  .doc h2{page-break-after:avoid}
  .gist{border-left:2px solid #000}
}