/* ==========================================================
   W FUTURES · document pages (v51)
   Legal, policy and utility pages. ONE stylesheet for all of
   them so twelve files cannot drift apart the way two ever
   could — the twin-file rule is for the site itself, where the
   CSS is inseparable from a single-file page.

   Same tokens, same type scale, same two curves as the site.
   The rhythm is the site's own: a dark band, a light document,
   a dark foot. Long text is read on paper, so the document is
   white; the mark is white-on-transparent, so the band it sits
   in is charcoal. Nothing here invents a value.
   ========================================================== */

:root{
  --white:#FFFFFF; --charcoal:#101314; --ink:#0B0C0C; --cyan:#00E5E5;
  --on-light-1:#0B0C0C; --on-light-2:#555957; --on-light-3:#6E7371;
  --on-dark-1:#FFFFFF; --on-dark-2:rgba(255,255,255,.72); --on-dark-3:rgba(255,255,255,.48);
  --hair-l:rgba(11,12,12,.13); --hair-l-2:rgba(11,12,12,.26);
  --hair-d:rgba(255,255,255,.12); --hair-d-2:rgba(255,255,255,.22);
  --heb:'Heebo',system-ui,sans-serif;
  --mono:'IBM Plex Mono','Miriam Libre',monospace;
  --ease:cubic-bezier(.19,1,.22,1);
  --pad:clamp(22px,5.4vw,92px);
  --doc:760px;
  --s1:8px; --s2:16px; --s3:26px; --s4:44px; --s5:68px; --s6:104px;
  --t-mono:12.5px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--heb);background:var(--white);color:var(--on-light-1);
  font-size:clamp(16px,1.05vw,17px);font-weight:300;line-height:1.82;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}

/* the skip link — first thing in the tab order on every page */
.skip{position:fixed;top:-64px;inset-inline-start:16px;z-index:99;
  background:var(--cyan);color:var(--ink);padding:12px 18px;border-radius:999px;
  font-size:14px;font-weight:500;text-decoration:none;transition:top .3s var(--ease)}
.skip:focus{top:16px}

a{color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

.wrap{width:min(1240px,100%);margin-inline:auto;padding-inline:var(--pad)}

/* ---------- the band ---------- */
.docbar{background:var(--charcoal);color:#fff;padding-block:22px;
  border-bottom:1px solid var(--hair-d)}
.docbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.docbar .mark img{height:16px;width:auto}
.docbar nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,28px)}
.docbar a{font-size:13.5px;font-weight:300;color:var(--on-dark-2);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;transition:color .3s var(--ease)}
.docbar a:hover{color:#fff}
.docbar .lang{font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  padding-inline-start:clamp(12px,1.6vw,20px);position:relative}
.docbar .lang::before{content:"";position:absolute;inset-inline-start:0;top:50%;
  width:1px;height:16px;transform:translateY(-50%);background:var(--hair-d-2)}

/* ---------- the document ---------- */
.doc{padding-block:clamp(56px,8vw,110px) clamp(72px,9vw,140px)}
.doc .wrap{max-width:calc(var(--doc) + 2 * var(--pad))}

.eyebrow{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.22em;
  text-transform:uppercase;color:var(--on-light-3);display:block}
.eyebrow::before{content:"[ ";opacity:.55}
.eyebrow::after{content:" ]";opacity:.55}

h1{margin-top:var(--s3);font-size:clamp(34px,4.6vw,58px);font-weight:700;
  letter-spacing:-.038em;line-height:1.04;text-wrap:balance}
.docsub{margin-top:var(--s3);font-size:clamp(18px,1.7vw,22px);font-weight:300;
  letter-spacing:-.016em;line-height:1.5;color:var(--on-light-2);max-width:52ch;
  text-wrap:balance}
.updated{margin-top:var(--s4);padding-top:var(--s2);border-top:1px solid var(--hair-l);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-light-3)}

h2{margin-top:clamp(44px,5.4vw,72px);font-size:clamp(21px,2.1vw,27px);font-weight:500;
  letter-spacing:-.024em;line-height:1.24;text-wrap:balance}
h3{margin-top:var(--s4);font-size:clamp(17px,1.35vw,19px);font-weight:500;
  letter-spacing:-.014em;line-height:1.35}
h2 + p,h3 + p,h2 + ul,h3 + ul{margin-top:var(--s2)}
p + p,p + ul,ul + p,p + h3{margin-top:var(--s3)}
p,li{color:var(--on-light-2);max-width:68ch}
strong{font-weight:500;color:var(--on-light-1)}

ul,ol{margin-inline-start:1.1em;display:grid;gap:10px}
li{padding-inline-start:.2em}
li::marker{color:var(--on-light-3)}

/* an inline link inside prose is underlined — colour alone is never the signal */
.doc p a,.doc li a{color:var(--on-light-1);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:var(--hair-l-2);transition:text-decoration-color .3s var(--ease)}
.doc p a:hover,.doc li a:hover{text-decoration-color:var(--cyan)}

/* a value the reader has to act on: an address, a phone number, a name */
.field{margin-top:var(--s3);display:grid;gap:4px;
  padding-inline-start:var(--s3);border-inline-start:1px solid var(--hair-l-2)}
.field .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-light-3)}
.field .v{font-size:clamp(17px,1.35vw,20px);font-weight:400;color:var(--on-light-1);
  letter-spacing:-.014em}
/* a value here is a standalone action, not a link inside a sentence, so it takes
   a real target rather than the inline-link exemption. */
.field .v a{display:inline-flex;align-items:center;min-height:44px;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:var(--hair-l-2);transition:text-decoration-color .3s var(--ease)}
.field .v a:hover{text-decoration-color:var(--cyan)}

/* the one thing on these pages that is not final. Marked, never invisible. */
.todo{background:rgba(0,229,229,.09);box-shadow:inset 0 -1px 0 0 var(--cyan);
  padding:1px 6px;font-weight:400;color:var(--on-light-1);white-space:nowrap}

/* a table, when a policy genuinely needs one (cookies) */
.tablewrap{margin-top:var(--s3);overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
th,td{text-align:start;padding:14px 16px;border-bottom:1px solid var(--hair-l);
  vertical-align:top;color:var(--on-light-2)}
th{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-light-3);font-weight:400;border-bottom-color:var(--hair-l-2)}
td:first-child{color:var(--on-light-1);font-weight:400;white-space:nowrap}

/* the sitemap / index list */
.idxlist{margin-top:var(--s4);list-style:none;margin-inline-start:0;display:grid;gap:0}
.idxlist li{padding:0;border-top:1px solid var(--hair-l)}
.idxlist li:last-child{border-bottom:1px solid var(--hair-l)}
.idxlist a{display:flex;align-items:baseline;gap:16px;padding-block:18px;
  text-decoration:none;color:var(--on-light-1);min-height:44px;
  transition:padding-inline-start .4s var(--ease)}
.idxlist a:hover{padding-inline-start:8px}
.idxlist .n{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  color:var(--on-light-3);flex:none;min-width:2.4em}
.idxlist .t{font-size:clamp(17px,1.5vw,20px);font-weight:400;letter-spacing:-.016em}
.idxlist .d{font-size:14px;font-weight:300;color:var(--on-light-3);margin-inline-start:auto;
  text-align:end}

/* the back-to-site action — the site's own pill, reduced to what a document needs */
.docact{margin-top:clamp(56px,7vw,96px);padding-top:var(--s4);
  border-top:1px solid var(--hair-l)}
.wbtn{display:inline-flex;align-items:center;gap:11px;position:relative;
  padding:15px 26px;border:1px solid currentColor;border-radius:999px;
  font-size:14px;font-weight:500;letter-spacing:-.006em;line-height:1;
  text-decoration:none;color:var(--on-light-1);cursor:pointer;
  transition:background-color .42s var(--ease),color .42s var(--ease),
             border-color .42s var(--ease)}
.wbtn svg{width:11px;height:11px;flex:none}
.wbtn::after{content:"";position:absolute;inset:-1px;pointer-events:none;
  border:1px solid var(--cyan);border-radius:999px;
  transition:clip-path .55s var(--ease)}
[dir="rtl"] .wbtn::after{clip-path:inset(0 0 0 calc(100% - 30px))}
[dir="ltr"] .wbtn::after{clip-path:inset(0 calc(100% - 30px) 0 0)}
.wbtn:hover::after,.wbtn:focus-visible::after{clip-path:inset(0)}
.wbtn:hover{background:var(--on-light-1);color:#fff;border-color:var(--on-light-1)}

/* ---------- the foot ---------- */
.docfoot{background:var(--ink);color:#fff;padding-block:clamp(44px,5vw,64px) 30px;
  font-size:14px;font-weight:300}
.docfoot .wrap{display:flex;flex-wrap:wrap;gap:12px clamp(18px,2.4vw,34px);
  align-items:center}
.docfoot a{color:var(--on-dark-3);text-decoration:none;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  display:inline-flex;align-items:center;min-height:44px;transition:color .3s var(--ease)}
.docfoot a:hover{color:#fff}
.docfoot .copy{margin-inline-start:auto;font-family:var(--mono);font-size:var(--t-mono);
  letter-spacing:.22em;color:var(--on-dark-3)}

@media (max-width:640px){
  .docbar .wrap{flex-wrap:wrap;gap:6px 16px}
  .docfoot .copy{margin-inline-start:0;width:100%}
  .idxlist .d{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;
    scroll-behavior:auto!important}
}