/* ============================================================================
   /privacy/ · the Privacy Policy.

   Same treatment as /manifesto/ and for the same three reasons, which are
   written out in full at the top of css/manifesto.css:

   1. FONTS. The source pulled Space Grotesk and Newsreader from
      fonts.googleapis.com. css/fonts.css exists to keep the site off that
      origin, so body type is Archivo and the one serif line (the contact
      pull-quote) uses a system stack.
   2. THEME. The source was paper-only. Everything here is expressed in two
      surface roles, PAGE and FEATURE, and each theme fills them: in light the
      policy cards are white on paper and the contact panel is near-black, as
      authored; in dark the page is the site's ground and the panel is raised
      off it, with the accent orb doing the work the inversion used to.
   3. NAMESPACE. Every class is prefixed `pv-` — the source used `.wrap` and
      `.callout`, which already mean other things in site.css.

   A legal document earns one extra rule the marketing pages do not have: it
   has to print. Everything below survives being put on paper, and the
   @media print block at the bottom is not decoration.
   ============================================================================ */

.pv{
  --pv-page:var(--bg);
  --pv-card:var(--bg-2);
  --pv-line:var(--line);
  --pv-line-2:var(--line-2);

  --pv-feature:var(--bg-3);
  --pv-feature-ink:var(--ink);
  --pv-feature-ink-2:var(--ink-2);
  --pv-feature-ink-3:var(--ink-3);
  --pv-feature-line:var(--line);

  --pv-serif:ui-serif,'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;

  background:var(--pv-page);
  color:var(--ink);
}
:root[data-theme="light"] .pv{
  --pv-feature:#0E0F12;
  --pv-feature-ink:#F4F2EE;
  --pv-feature-ink-2:#B8B5AF;
  --pv-feature-ink-3:#9C9A96;
  --pv-feature-line:#1C1D22;
}

/* A policy is a long scroll with no pictures in it, and knowing how much is
   left is the difference between reading it and skimming it. */
.pv-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:60;
  background:var(--accent-bright);transition:width .1s linear}
@media (prefers-reduced-motion:reduce){ .pv-progress{transition:none} }

.pv-col{max-width:840px;margin:0 auto;padding:0 var(--pad)}
.pv-ml{font-family:var(--mono);letter-spacing:.24em;text-transform:uppercase}

/* ---- hero ---- */
/* Paper, not the inverted panel: this page opens on a document, and a
   near-black hero would promise an essay. Top padding clears the fixed nav. */
.pv-hero{background:var(--pv-card);border-bottom:1px solid var(--pv-line);
  padding:128px 0 52px;position:relative;overflow:hidden}
.pv-hero>*:not(.pv-orb){position:relative}
.pv-orb{position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--accent),transparent 64%);opacity:.3}
.pv-kicker{font-family:var(--mono);letter-spacing:.24em;text-transform:uppercase;
  font-size:10px;color:var(--accent-bright);margin-bottom:18px;display:block}
.pv-hero h1{font-family:var(--sans);font-weight:800;font-size:clamp(31px,5vw,46px);
  letter-spacing:-.032em;line-height:1.03;max-width:640px;color:var(--ink)}
.pv-hero .pv-sub{margin-top:20px;font-size:15.5px;line-height:1.65;color:var(--ink-2);max-width:600px}
.pv-meta{display:flex;gap:28px;margin-top:30px;flex-wrap:wrap}
.pv-meta div{font-family:var(--mono);letter-spacing:.24em;text-transform:uppercase;
  font-size:9.5px;color:var(--ink-4)}
/* The value inside each label drops the mono/uppercase treatment: a date and a
   version number are facts to read, not labels to scan past. */
.pv-meta strong{display:block;font-family:var(--sans);letter-spacing:0;text-transform:none;
  font-size:13.5px;font-weight:700;color:var(--ink);margin-top:6px}

/* ---- the sections ---- */
.pv-main{padding:56px 0 72px}
.pv-sec{background:var(--pv-card);border:1px solid var(--pv-line);border-radius:16px;
  padding:clamp(24px,3.4vw,38px) clamp(22px,3.8vw,42px);margin-bottom:22px;
  scroll-margin-top:96px}
.pv-sec .pv-cap{font-family:var(--mono);letter-spacing:.24em;text-transform:uppercase;
  font-size:9px;color:var(--ink-4);margin-bottom:12px;display:block}
.pv-sec h2{font-family:var(--sans);font-weight:800;font-size:clamp(20px,2.6vw,24px);
  letter-spacing:-.025em;line-height:1.15;margin-bottom:14px;color:var(--ink)}
/* The 40–80 word direct answer under each question heading. Set a step up from
   the supporting prose because it is the part most readers will read alone. */
.pv-sec .pv-answer{font-size:15px;line-height:1.68;color:var(--ink-2);margin-bottom:18px}
.pv-sec p{font-size:14px;line-height:1.68;color:var(--ink-3);margin-bottom:14px}
.pv-sec p:last-child{margin-bottom:0}
.pv-sec ul{list-style:none;margin:0 0 14px;padding:0}
.pv-sec li{font-size:14px;line-height:1.66;color:var(--ink-3);padding-left:20px;
  position:relative;margin-bottom:9px}
.pv-sec li::before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--ink-4)}
.pv-sec li strong{color:var(--ink);font-weight:700}
.pv-sec code{font-family:var(--mono);font-size:.9em;background:var(--pv-page);
  border:1px solid var(--pv-line);border-radius:5px;padding:1px 5px}

.pv-callout{border-left:3px solid var(--accent);background:var(--pv-page);
  border-radius:0 14px 14px 0;padding:18px 22px;margin:18px 0 4px}
.pv-callout .pv-cap{color:var(--ink-4)}
.pv-callout p{font-size:13.5px;line-height:1.62;color:var(--ink-2);margin:0}

/* ---- the facts tables (operator details, version history) ---- */
.pv-facts{border:1px solid var(--pv-line);border-radius:14px;overflow:hidden;margin:6px 0 4px}
.pv-facts .pv-frow{display:grid;grid-template-columns:190px 1fr;gap:18px;padding:12px 20px;
  border-top:1px solid var(--pv-line);align-items:baseline}
.pv-facts .pv-frow:first-child{border-top:none}
.pv-facts .pv-frow:nth-child(odd){background:var(--pv-page)}
.pv-facts dt{font-family:var(--mono);letter-spacing:.2em;text-transform:uppercase;
  font-size:8.5px;color:var(--ink-4);padding-top:3px}
.pv-facts dd{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:0}

/* ---- contact panel ---- */
.pv-panel{background:var(--pv-feature);color:var(--pv-feature-ink);border-radius:16px;
  padding:34px clamp(22px,4vw,38px);position:relative;overflow:hidden;margin-top:34px}
.pv-panel>*:not(.pv-orb){position:relative}
.pv-panel .pv-cap{font-family:var(--mono);letter-spacing:.24em;text-transform:uppercase;
  font-size:9.5px;color:var(--accent-bright);margin-bottom:14px;display:block}
.pv-quote{font-family:var(--pv-serif);font-size:clamp(17px,2.2vw,19px);line-height:1.5;
  color:var(--pv-feature-ink);max-width:560px;margin:0}
.pv-contact{margin-top:22px;padding-top:20px;border-top:1px solid var(--pv-feature-line);
  display:flex;gap:36px;flex-wrap:wrap}
.pv-contact div{font-family:var(--mono);letter-spacing:.24em;text-transform:uppercase;
  font-size:9px;color:var(--pv-feature-ink-3)}
.pv-contact strong{display:block;font-family:var(--sans);letter-spacing:0;text-transform:none;
  font-size:13.5px;font-weight:700;color:var(--pv-feature-ink);margin-top:6px}
.pv-contact a{color:var(--pv-feature-ink)}
.pv-contact a:hover{color:var(--accent-bright)}

/* ---- scroll reveal ---- */
.pv-reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.pv-reveal.in{opacity:1;transform:none}
/* No-JS and reduced-motion both need the text visible, for opposite reasons:
   one never gets the class, the other should never see the move. On a policy
   page this matters more than anywhere else — nobody should have to run our
   JavaScript to read what we do with their data. */
@media (prefers-reduced-motion:reduce){ .pv-reveal{opacity:1;transform:none;transition:none} }

@media (max-width:640px){
  .pv-hero{padding:104px 0 40px}
  .pv-facts .pv-frow{grid-template-columns:1fr;gap:4px}
  .pv-meta{gap:18px}
  .pv-contact{gap:20px}
}

/* ---- print ----
   People print privacy policies, send them to counsel, and file them. On paper
   the ambient background, the nav, the progress bar and the reveal animation
   are all noise, and the inverted panel is a waste of a toner cartridge. */
@media print{
  .pv{background:#fff;color:#000}
  body.no-gl::before,header,.pv-progress,.footnav{display:none!important}
  .pv-reveal{opacity:1!important;transform:none!important}
  .pv-hero{padding:0 0 24px;border-bottom:1px solid #ccc;background:#fff}
  .pv-sec{border:none;border-bottom:1px solid #ddd;border-radius:0;padding:14px 0;
    margin:0;background:#fff;break-inside:avoid}
  .pv-panel{background:#fff;color:#000;border:1px solid #ccc;break-inside:avoid}
  .pv-panel .pv-cap,.pv-contact a{color:#000}
  .pv-quote,.pv-contact strong{color:#000}
  .pv-orb{display:none}
  .pv-sec h2,.pv-hero h1{color:#000}
  .pv-sec .pv-answer,.pv-sec p,.pv-sec li,.pv-facts dd{color:#222}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9px;color:#555}
}