/* ============================================================
   Legal & policy pages.
   
   A separate stylesheet rather than the marketing page's inline
   <style>: these pages are long-form prose and need almost none
   of that CSS (hero, grids, steps, motion). Tokens are copied
   from it verbatim so the two surfaces stay one system — if a
   token changes there, change it here too.
   
   Fonts are the same self-hosted files under /fonts. No request
   leaves the origin from these pages, which is the claim the
   cookie notice makes, so it has to be true of the notice itself.
   ============================================================ */

@font-face { font-family:'Geist'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/geist-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Geist'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/geist-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Geist'; font-style:normal; font-weight:600; font-display:swap;
  src:url(/fonts/geist-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Geist'; font-style:normal; font-weight:700; font-display:swap;
  src:url(/fonts/geist-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Geist Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/geist-mono-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --s0:#fbfcfd; --s1:#f4f6f8; --s2:#e9edf1; --s3:#d5dce2;
  --txm:#63717d; --tx2:#35424c; --tx:#16212a;
  --accent:#146c61; --accent-strong:#0f554c; --accent-ink:#ffffff;
  --band:#f6f8f9; --line-strong:#7f8a91; --accent-wash:#e7f4f1;
  --warn-wash:#fdf3e3; --warn-line:#c9922f; --warn-ink:#6b4b09;
  --sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --display:var(--sans);
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --s0:#101618; --s1:#161f22; --s2:#202c30; --s3:#33424a;
    --txm:#98a5aa; --tx2:#c2ccd0; --tx:#eef3f4;
    --accent:#6ed6c2; --accent-strong:#6ed6c2; --accent-ink:#0f2622;
    --band:#141e24; --line-strong:#64757d; --accent-wash:rgba(110,214,194,.12);
    --warn-wash:rgba(201,146,47,.14); --warn-line:#c9922f; --warn-ink:#e8c98a;
  }
}
:root[data-theme="dark"] {
  --s0:#101618; --s1:#161f22; --s2:#202c30; --s3:#33424a;
  --txm:#98a5aa; --tx2:#c2ccd0; --tx:#eef3f4;
  --accent:#6ed6c2; --accent-strong:#6ed6c2; --accent-ink:#0f2622;
  --band:#141e24; --line-strong:#64757d; --accent-wash:rgba(110,214,194,.12);
  --warn-wash:rgba(201,146,47,.14); --warn-line:#c9922f; --warn-ink:#e8c98a;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:80px}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--s0); color:var(--tx2);
  font:400 16px/1.7 var(--sans); -webkit-font-smoothing:antialiased;
}

/* --- chrome --- */
.bar{
  position:sticky; top:0; z-index:10; background:color-mix(in srgb, var(--s0) 88%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--s2);
}
.bar__in{max-width:880px; margin:0 auto; padding:14px 24px; display:flex; gap:16px; align-items:baseline; flex-wrap:wrap}
.bar a{color:var(--tx); text-decoration:none; font-weight:600; font-size:15px}
.bar nav{margin-left:auto; display:flex; gap:18px; flex-wrap:wrap}
.bar nav a{font-weight:400; font-size:14px; color:var(--txm)}
.bar nav a:hover,.bar a:hover{color:var(--accent-strong); text-decoration:underline}
.bar nav a[aria-current="page"]{color:var(--tx); font-weight:600}

main{max-width:880px; margin:0 auto; padding:48px 24px 96px}
.doc{max-width:68ch}

/* --- prose --- */
h1{
  font:700 clamp(30px,5vw,42px)/1.18 var(--display); letter-spacing:-.03em;
  color:var(--tx); margin:0 0 12px; letter-spacing:-.01em;
}
h2{
  font:700 22px/1.32 var(--display); letter-spacing:-.02em;
  color:var(--tx); margin:48px 0 12px; letter-spacing:-.005em;
}
h3{font:600 16px/1.4 var(--sans); color:var(--tx); margin:28px 0 8px}
p,li{margin:0 0 14px}
a{color:var(--accent-strong); text-underline-offset:2px}
strong{color:var(--tx); font-weight:600}
ul,ol{padding-left:22px; margin:0 0 16px}
li::marker{color:var(--line-strong)}
code{font:400 13.5px var(--mono); background:var(--s2); padding:1px 5px; border-radius:4px; color:var(--tx)}
hr{border:0; border-top:1px solid var(--s2); margin:40px 0}

.meta{font-size:14px; color:var(--txm); margin:0 0 32px}
.lede{font-size:18px; line-height:1.6; color:var(--tx2); margin:0 0 8px}

/* --- callouts --- */
.note, .draft{
  border:1px solid var(--s3); border-left:3px solid var(--line-strong);
  background:var(--band); border-radius:0 6px 6px 0;
  padding:14px 18px; margin:0 0 32px; font-size:15px;
}
.note{border-left-color:var(--accent); background:var(--accent-wash)}
.draft{border-left-color:var(--warn-line); background:var(--warn-wash); color:var(--warn-ink)}
.draft strong{color:var(--warn-ink)}
.note p:last-child,.draft p:last-child{margin-bottom:0}

/* An unresolved value that must be filled before these pages go live.
   Deliberately loud: a placeholder that reads as finished prose is how a
   half-written policy gets published. */
/* The draft banner's illustrative example. Styled like a real placeholder but
   deliberately a different class, so `grep 'class="todo"'` counts only values
   that actually still need filling in. */
mark.eg,
mark.todo{
  background:var(--warn-wash); color:var(--warn-ink); border-bottom:1.5px dashed var(--warn-line);
  padding:0 3px; font-weight:600; font-size:.95em;
}

/* --- tables --- */
.tw{overflow-x:auto; margin:0 0 20px; border:1px solid var(--s2); border-radius:6px}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:14.5px}
th,td{text-align:left; padding:10px 14px; border-bottom:1px solid var(--s2); vertical-align:top}
th{background:var(--band); color:var(--tx); font-weight:600; white-space:nowrap}
tbody tr:last-child td{border-bottom:0}

/* --- table of contents --- */
.toc{background:var(--s1); border:1px solid var(--s2); border-radius:8px; padding:18px 22px; margin:0 0 40px}
.toc h2{font:600 13px/1 var(--sans); text-transform:uppercase; letter-spacing:.08em; color:var(--txm); margin:0 0 12px}
.toc ol{margin:0; padding-left:20px; font-size:15px}
.toc li{margin:0 0 6px}

footer{border-top:1px solid var(--s2); background:var(--band)}
footer div{max-width:880px; margin:0 auto; padding:28px 24px; font-size:14px; color:var(--txm);
  display:flex; gap:20px; flex-wrap:wrap; align-items:baseline}
footer a{color:var(--txm)}
footer a:hover{color:var(--accent-strong)}
footer .sp{margin-left:auto}

:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:2px}