/* Shared by privacy.html and terms.html. index.html keeps its styles inline —
   it is one screen of bespoke layout, while these two are long documents of
   repeating parts, which is what a stylesheet is for. The tokens below are the
   same values index.html uses literally. */
*{box-sizing:border-box}
body{margin:0;background:#fbfaf8;color:#17191c;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#1b5e8c;text-decoration:none}
a:hover{color:#123f5f}
main{max-width:1180px;margin:0 auto;background:#fbfaf8}

header{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:22px 40px;border-bottom:1px solid #e6e3dd}
.brand{font:600 17px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.035em;color:#17191c}
.brand span{font-weight:300;color:oklch(0.5 0.1 232)}
header nav{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
header nav a{font:500 13px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;color:#454a52}
header nav a.cta{color:#fbfaf8;background:#17191c;padding:10px 15px;border-radius:6px}

.title{padding:64px 40px 40px;border-bottom:1px solid #e6e3dd}
.eyebrow{font:500 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;color:oklch(0.5 0.1 232)}
.title h1{margin:18px 0 0;font:600 38px/1.12 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.03em;text-wrap:pretty}
.title .meta{margin:16px 0 0;font:400 12px/1.6 ui-monospace,Menlo,monospace;color:rgba(0,0,0,.5)}

/* The one thing these documents say that the originals did not: which
   platforms they cover. */
.scope{margin:26px 0 0;border:1px solid #e0dcd4;border-left:3px solid oklch(0.58 0.12 232);border-radius:9px;background:#f5f2ec;padding:20px 24px}
.scope p{margin:0;font:400 15px/1.65 'Helvetica Neue',Helvetica,Arial,sans-serif;color:#454a52;max-width:76ch;text-wrap:pretty}

article{padding:48px 40px 64px;max-width:900px}
article section{padding-bottom:34px}
article h2{margin:0 0 14px;font:600 22px/1.3 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.02em;scroll-margin-top:24px}
article h3{margin:26px 0 10px;font:600 15px/1.4 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.01em;color:#17191c}
article p{margin:0 0 14px;font:400 15px/1.7 'Helvetica Neue',Helvetica,Arial,sans-serif;color:#454a52;max-width:76ch;text-wrap:pretty}
article ul{margin:0 0 14px;padding-left:20px}
article li{font:400 15px/1.7 'Helvetica Neue',Helvetica,Arial,sans-serif;color:#454a52;max-width:74ch;margin-bottom:6px;text-wrap:pretty}
article p:last-child,article ul:last-child{margin-bottom:0}
article strong{font-weight:600;color:#17191c}

/* "For this purpose we use X, on basis Y, kept for Z" — the same three facts
   recur under every processing purpose, so they get their own block rather
   than trailing the prose that introduces them. */
.facts{border:1px solid #e0dcd4;border-radius:9px;background:#fff;margin:0 0 14px;overflow:hidden;max-width:76ch}
.facts div{display:flex;justify-content:space-between;gap:20px;padding:12px 18px;border-bottom:1px solid #eeebe5}
.facts div:last-child{border-bottom:0}
.facts dt{font:400 13px/1.5 'Helvetica Neue',Helvetica,Arial,sans-serif;color:#565b63;flex:0 0 auto}
.facts dd{margin:0;font:500 13px/1.5 'Helvetica Neue',Helvetica,Arial,sans-serif;color:#17191c;text-align:right}

.toc{border:1px solid #e6e3dd;border-radius:9px;background:#fff;padding:24px 26px;margin:0 0 42px;max-width:76ch}
.toc h2{margin:0 0 14px;font:600 13px/1 ui-monospace,Menlo,monospace;letter-spacing:.12em;color:rgba(0,0,0,.45)}
.toc ol{margin:0;padding-left:22px;columns:2;column-gap:32px}
.toc li{font:400 14px/1.8 'Helvetica Neue',Helvetica,Arial,sans-serif;color:#454a52;break-inside:avoid}

.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:44px;padding:56px 40px;background:#17191c}
.contact h2{margin:0 0 14px;font:600 13px/1 ui-monospace,Menlo,monospace;letter-spacing:.12em;color:rgba(255,255,255,.5)}
.contact p{margin:0 0 6px;font:400 15px/1.6 'Helvetica Neue',Helvetica,Arial,sans-serif;color:rgba(255,255,255,.72);max-width:52ch}
.contact .name{font-weight:500;color:#fbfaf8}
.contact a{color:#9fc9e6}
.contact .reg{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;margin-top:12px;font:400 12px/1.6 ui-monospace,Menlo,monospace;color:rgba(255,255,255,.55)}
.contact .reg span:nth-child(even){color:rgba(255,255,255,.85)}

footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:20px 40px;background:#101215}
footer span{font:400 12px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;color:rgba(255,255,255,.4)}
footer div{display:flex;gap:20px}
footer a{font:400 12px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;color:rgba(255,255,255,.55)}

@media (max-width:760px){
  header,.title,article,.contact,footer{padding-left:20px;padding-right:20px}
  .title h1{font-size:30px}
  .toc ol{columns:1}
  .facts div{flex-direction:column;gap:2px}
  .facts dd{text-align:left}
}