/* Shared by privacy.html and terms.html.
   One stylesheet rather than two copies, because the day the two pages drift
   apart visually is the day one of them looks unmaintained — which is not the
   impression a legal page should give. */
/* @font-face lives in fonts.css, linked by every page. */
:root{
  --paper:#fffbf7;
  --ground:#877f76;
  --line:rgba(255,251,247,.26);
  --sans:"Bloom Emoji","Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --display:"Bloom Emoji","Spicy Rice",Georgia,"Times New Roman",serif;
  --glass-bg:rgba(255,251,247,0.09);
  --glass-border:2px solid rgba(255,251,247,0.26);
  --grain:100;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--paper);
     font:17px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,0) 55%)}

#grain{position:fixed;inset:0;z-index:40;pointer-events:none;
       opacity:calc(var(--grain) / 1000);mix-blend-mode:overlay;
       background-repeat:repeat;background-size:128px 128px}

main{position:relative;z-index:1;max-width:720px;margin:0 auto;padding:48px 22px 40px}
.back{display:inline-block;color:var(--paper);opacity:.7;text-decoration:none;
      font-size:14px;margin-bottom:26px}
.back:hover{opacity:1}
h1{font:400 clamp(30px,6vw,44px)/1.15 var(--display);margin:0 0 8px;letter-spacing:-.01em}
.updated{margin:0 0 30px;font-size:13.5px;opacity:.6}

/* ---- contents ------------------------------------------------------------
   Seventeen numbered sections is a lot to scroll blindly. A person opening a
   privacy policy almost always wants one specific answer — deletion, or who
   else sees it — so give them a way to go straight there. */
.toc{background:rgba(255,251,247,.05);border:2px solid var(--line);
     border-radius:16px;padding:18px 22px;margin:0 0 22px}
.toclab{margin:0 0 10px;font-size:11.5px;letter-spacing:.13em;
        text-transform:uppercase;opacity:.6}
.toc ol{margin:0;padding:0;list-style:none;
        columns:2;column-gap:26px}
@media (max-width:620px){ .toc ol{columns:1} }
.toc li{margin:0 0 6px;font-size:14.5px;break-inside:avoid}
.toc a{color:var(--paper);opacity:.82;text-decoration:none;
       border-bottom:1px solid rgba(255,251,247,.22)}
.toc a:hover{opacity:1;border-bottom-color:var(--paper)}
/* the anchor lands under nothing, but give the heading a little air so it does
   not sit flush against the top of the viewport after a jump */
.doc h2{scroll-margin-top:20px}

.doc{background:var(--glass-bg);border:var(--glass-border);border-radius:20px;
     backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
     box-shadow:0 4px 30px rgba(0,0,0,.1);padding:30px 26px}
.doc h2{font:400 clamp(20px,3.4vw,25px)/1.3 var(--display);margin:30px 0 10px}
.doc h2:first-child{margin-top:0}
.doc h3{font-size:16px;margin:20px 0 6px;font-weight:700}
.doc p,.doc li{opacity:.87;font-size:16px}
.doc p{margin:0 0 13px}
.doc ul,.doc ol{margin:0 0 13px;padding-left:22px}
.doc li{margin-bottom:7px}
.doc a{color:var(--paper);text-underline-offset:3px}
/* A quoted commitment should look like one — set apart, not another paragraph. */
.doc blockquote{margin:0 0 16px;padding:14px 18px;border-left:3px solid rgba(255,251,247,.5);
                background:rgba(255,251,247,.06);border-radius:0 12px 12px 0}
.doc blockquote p{margin:0;font-size:16.5px;opacity:.95}
/* The contact block. `address` is the right element and browsers italicise it
   by default, which reads as an aside rather than as the way to reach a human. */
.doc address{font-style:normal;margin:0;padding:15px 18px;border-radius:14px;
             border:2px solid var(--line);background:rgba(255,251,247,.05);
             line-height:1.7;font-size:15.5px}
.doc address a{color:var(--paper)}
.doc .postal{opacity:.8}
.doc table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:15px;display:block;
           overflow-x:auto}
.doc th,.doc td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);
                vertical-align:top}
.doc th{font-size:12px;letter-spacing:.09em;text-transform:uppercase;opacity:.62;font-weight:400}

/* The unmistakable "this is not written yet" marker. Deliberately loud: a
   placeholder that looks like finished copy is how a draft ends up published. */
.todo{border:2px dashed rgba(255,214,196,.65);background:rgba(255,150,120,.1);
      border-radius:14px;padding:16px 18px;margin:0 0 22px}
.todo p{margin:0;font-size:14.5px;color:#ffd9d0;opacity:1}
.todo b{display:block;margin-bottom:5px;letter-spacing:.06em;text-transform:uppercase;font-size:11.5px}

footer{position:relative;z-index:1;text-align:center;padding:30px 22px 46px;
       font-size:13px;opacity:.6}
footer a{color:var(--paper)}
/* Catch-all so a link added later is never default blue. Scoped to unclassed
   anchors: a bare `a:visited` is (0,1,1) and outranks single-class rules like
   `.back` (0,1,0), so it would silently win wherever a class sets a colour. */
a:not([class]){color:var(--paper)}
a:not([class]):visited{color:var(--paper)}
footer .sep{opacity:.4;padding:0 6px}