/* ============================================================
   Shared stylesheet for the two policy pages, /privacy/ and /terms/.
   index.html stays a single self-contained file with no external CSS; these
   two secondary pages share one sheet instead so they can never drift from
   each other. The tokens, base type, nav and footer rules below are copied
   verbatim from index.html, with one exception: the tokens that only the home
   page uses are not repeated here, which is --tglow, --e2, --line-strong,
   --surface-sunk, --fs-lede, --lh-lede, --fs-tile-title and --lh-tile-title.
   Everything a shared rule reads is declared in this file, and the harness
   check "one type system across both stylesheets" fails if that stops being
   true. If a token or the footer changes in index.html, change it here too.
   That is the one duplication in this build and it is deliberate:
   the alternative was pulling the homepage's CSS out into a file and costing
   it an extra request on first paint.
   Font paths are relative to THIS file, so they resolve from any page depth.
   ============================================================ */
@font-face{font-family:Manrope;src:url(fonts/manrope-latin.woff2) format('woff2');font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:InterVar;src:url(fonts/inter-latin.woff2) format('woff2');font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:PlexMono;src:url(fonts/plexmono-latin.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  --canvas:#F5F7FA;
  --panel:#FFFFFF;
  --navy-deep:#0A1D37;
  --navy:#1E3A8A;
  --accent:#2563EB;
  --accent-hover:#1D4FD8;
  --accent-muted:#DCE6FB;
  --text:#111827;
  --text-2:#6B7280;
  --line:#E3E8EF;

  --display:Manrope,'Segoe UI',system-ui,sans-serif;
  --body:InterVar,'Segoe UI',system-ui,sans-serif;
  --mono:PlexMono,ui-monospace,'Cascadia Mono',Consolas,monospace;

  /* Tracking, one token per role, copied from index.html. These were missing
     here, which is why .cbar-a a asked for var(--track-meta) and silently got
     no letter-spacing at all, and why the footer legal name block drifted to
     .12em on these pages while the home page kept .13em. */
  --track-label:.15em;
  --track-entity:.13em;
  --track-meta:.1em;

  --e1:cubic-bezier(.22,.61,.36,1);

  --gut:clamp(20px,5vw,72px);
  --maxw:1220px;
  --navh:74px;
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:calc(var(--navh) + 16px)}
body{overflow-x:hidden;overflow-x:clip}
html,body{margin:0;padding:0}
body{
  background:var(--canvas);
  color:var(--text);
  font-family:var(--body);
  font-weight:400;
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover)}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.022em;line-height:1.06;margin:0}
h1,h2,h3{text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy-deep);color:#fff;padding:12px 18px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.skip:focus{left:12px;top:12px}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
main{position:relative;z-index:1}

/* ---------- nav, identical to the homepage ---------- */
nav{position:sticky;top:0;z-index:100}
nav::before{
  content:"";position:absolute;inset:0 0 auto 0;height:122%;pointer-events:none;
  background:linear-gradient(to bottom,rgba(245,247,250,.95) 0%,rgba(245,247,250,.88) 58%,rgba(245,247,250,0) 100%);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  /* #000 is an alpha stencil here, not a colour. See the same note in
     index.html: it is never painted and must not become a token. */
  -webkit-mask-image:linear-gradient(to bottom,#000 64%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 64%,transparent 100%);
}
.navin{position:relative;display:flex;align-items:center;gap:28px;height:var(--navh);width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--navy-deep);font-family:var(--mono);font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap}
.brand img{width:32px;height:32px;flex:none;object-fit:contain}
.brand:hover{color:var(--navy)}
.menu{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,1.9vw,30px)}
.menu a:not(.btn){color:var(--navy-deep);font-size:14px;font-weight:500;position:relative;padding:6px 0;transition:color .3s var(--e1)}
.menu a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .38s var(--e1)}
.menu a:not(.btn):hover{color:var(--accent)}
.menu a:not(.btn):hover::after{transform:scaleX(1)}
/* The nav's only press feedback used to be the accent button. With that removed
   the links had none: .menu a:not(.btn) sets colour at (0,2,1) and beats the
   global a:active at (0,1,1), so a tap did nothing visible until the page moved.
   :not(.btn) keeps the specificity above the base rule. 70ms, like every other
   press state on the page; the .3s carries the hover, not the press. */
.menu a:not(.btn):active{color:var(--accent-hover);transition-duration:.07s}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--body);font-size:14px;font-weight:500;letter-spacing:.005em;
  padding:11px 20px;border-radius:6px;border:1px solid transparent;cursor:pointer;
  transition:background-color .32s var(--e1),color .32s var(--e1),border-color .32s var(--e1),transform .32s var(--e1),box-shadow .32s var(--e1)}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent-hover);color:#fff;transform:translateY(-1px);box-shadow:0 6px 18px rgba(37,99,235,.24)}
.btn:active{transition-duration:.07s}
.btn-accent:active{background:var(--accent-hover);transform:translateY(0) scale(.985);box-shadow:0 2px 8px rgba(37,99,235,.2)}

.burger{display:none;margin-left:auto;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:1px solid var(--line);border-radius:6px;cursor:pointer;color:var(--navy-deep)}
.burger span{display:block;width:18px;height:1.5px;background:currentColor;position:relative;transition:transform .3s var(--e1)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:currentColor;transition:transform .3s var(--e1)}
.burger span::before{top:-5.5px}
.burger span::after{top:5.5px}
.burger:active{transition-duration:.07s;border-color:var(--accent);color:var(--accent)}
.burger[aria-expanded=true] span{transform:rotate(45deg)}
.burger[aria-expanded=true] span::before{transform:translateY(5.5px) rotate(-90deg)}
.burger[aria-expanded=true] span::after{transform:translateY(-5.5px) rotate(-90deg);opacity:0}

@media (max-width:900px){
  .burger{display:inline-flex}
  .menu{position:absolute;top:var(--navh);left:0;right:0;margin:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--panel);border-block:1px solid var(--line);
    padding:8px var(--gut) 20px;box-shadow:0 24px 48px rgba(10,29,55,.08);display:none}
  .menu.open{display:flex}
  .menu a:not(.btn){padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}
  .menu a:not(.btn)::after{display:none}
}

/* ---------- the policy document itself ---------- */
.doc{padding-block:clamp(46px,8vh,96px) clamp(30px,5vh,60px)}
.doc-kick{font-family:var(--mono);font-size:11px;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.doc h1{font-size:clamp(32px,4.4vw,60px);color:var(--navy-deep);max-width:20ch}
.doc .updated{margin-top:16px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.doc-body{margin-top:clamp(34px,5vh,60px);max-width:68ch}
.doc-body h2{font-size:clamp(19px,1.7vw,24px);color:var(--navy-deep);margin-top:clamp(30px,4.4vh,46px)}
.doc-body h2:first-child{margin-top:0}
.doc-body p{font-size:clamp(15px,1.1vw,17px);color:var(--text-2);line-height:1.72;margin-top:14px;
  text-wrap:pretty}   /* legal prose runs long, so keep last lines off one word */
.doc-body p strong{color:var(--text);font-weight:500}
.doc-body ul{margin:14px 0 0;padding-left:20px}
.doc-body li{font-size:clamp(15px,1.1vw,17px);color:var(--text-2);line-height:1.72;margin-top:8px;
  text-wrap:pretty}
.doc-back{margin-top:clamp(38px,6vh,66px);padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px 26px;align-items:baseline}
.doc-back a{padding-block:4px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}

/* ---------- footer, identical to the homepage ---------- */
/* compressed on the client's instruction, same values as index.html */
footer{position:relative;z-index:1;border-top:1px solid var(--line);
  padding-block:clamp(26px,3.4vh,42px);margin-top:clamp(16px,2.4vh,32px)}
/* 1fr/1.75fr, not 1.1/1.6: at the tighter split a footer column measured 173px
   and the email address, 179px of monospace, broke mid-word into ".c / om". */
.foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.75fr);
  gap:clamp(34px,5vw,80px);align-items:start}
/* the trimmed dimensional lockup, wordmark re-set in Manrope so the spelling
   matches the Articles. The original render reads "Zcom" with a lowercase c. */
.fmark{display:block;margin:0 0 clamp(16px,2vw,22px)}
/* see the note in index.html: the asset was regenerated at 436x304 */
.fmark img{width:clamp(168px,17.5vw,218px);height:auto}
.fsocial{list-style:none;margin:0 0 clamp(14px,1.8vw,20px);padding:0;display:flex;flex-wrap:wrap;gap:10px}
.fsocial a{width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--navy-deep);
  transition:color .3s var(--e1),border-color .3s var(--e1),transform .3s var(--e1)}
.fsocial a:hover{color:var(--accent);border-color:var(--accent)}
.fsocial a:active{transition-duration:.07s;transform:scale(.94)}
.fsocial svg{width:17px;height:17px}
.fsocial a.fsemail{width:auto;padding:0 14px;font-size:13.5px;font-weight:500;letter-spacing:.005em;white-space:nowrap}
.fcols{position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.6vw,40px)}
.fcols::before{display:none}
.fch{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:-.006em;
  color:var(--navy-deep);margin-bottom:12px}
.fcols a{display:block;font-size:13.5px;color:var(--text-2);padding:5px 0;transition:color .3s var(--e1)}
.fcols a:hover{color:var(--accent)}
.fcols a:active{transition-duration:.07s;color:var(--accent-hover)}
/* break-word not break-all, paired with a <wbr> after the @, so if the column
   is ever too narrow it splits at the @ and never mid-domain */
.foot-base{margin-top:clamp(20px,2.8vh,32px);padding-top:18px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 28px;align-items:baseline;justify-content:space-between}
.copyline{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:var(--track-meta);
  text-transform:uppercase;color:var(--text-2)}
.foot-legal{display:flex;flex-wrap:wrap;gap:8px 26px;margin:0}
.foot-legal a{padding-block:4px;font-family:var(--mono);font-size:10.5px;letter-spacing:var(--track-meta);text-transform:uppercase;color:var(--text-2)}
.foot-legal a:hover{color:var(--accent)}
.foot-legal a[aria-current=page]{color:var(--navy-deep)}

@media (max-width:860px){
  .foot{grid-template-columns:1fr;gap:32px}
  .fcols{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
}
@media (max-width:460px){
  .fcols{grid-template-columns:1fr}
}

/* ---------- preference media queries, same policy as the homepage ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
@media (prefers-reduced-transparency:reduce){
  nav::before{background:var(--canvas);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast:more){
  :root{--text-2:#4B5563;--line:#9AA5B4}
  nav::before{background:var(--canvas);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (hover:none){
  .btn-accent:hover{transform:none;box-shadow:none;background:var(--accent)}
}
@media (pointer:coarse){
  .btn{min-height:44px}
  .menu a:not(.btn){min-height:44px;display:flex;align-items:center}
}

/* ---------- cookie consent bar, dormant. See the note in the markup. ---------- */
.cbar{position:fixed;left:clamp(12px,2vw,26px);right:clamp(12px,2vw,26px);
  bottom:clamp(12px,2vw,26px);z-index:120;
  display:flex;flex-wrap:wrap;align-items:center;gap:14px clamp(18px,2.4vw,34px);
  background:var(--panel);border:1px solid var(--line);
  border-radius:clamp(10px,1vw,14px);padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,26px);
  box-shadow:0 18px 44px rgba(10,29,55,.14);max-width:var(--maxw);margin-inline:auto}
.cbar-t{flex:1 1 320px;margin:0;font-size:clamp(14px,1.05vw,15.5px);
  line-height:1.6;color:var(--text-2)}
.cbar-a{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;flex:0 0 auto}
.cbar-a a{font-family:var(--mono);font-size:10.5px;letter-spacing:var(--track-meta);
  text-transform:uppercase;color:var(--text-2)}
.cbar-a .btn{padding-block:11px}
@media (max-width:560px){
  .cbar-a{width:100%}
  .cbar-a .btn{flex:1 1 auto;justify-content:center}
}
@media (prefers-reduced-transparency:reduce){ .cbar{box-shadow:none} }