/* ═══════════════════════════════════════════════════════════════════
   np-static.css — About, FAQ, Privacy and Terms.

   These four were the last pages still wearing the pre-rebuild markup:
   .about-card, .faq-item, .legal-wrap. Those classes only ever existed
   in np-legacy.css, which is the thin sheet that stops old markup from
   looking broken — it was never meant to make anything look designed.
   The result was four pages of unstyled running text hanging off the
   left edge of a site that had been rebuilt around them.

   Everything below is a new vocabulary rather than a patch on the old
   classes, because the pages are being rewritten anyway and the legacy
   names carry assumptions (fixed widths, float clears) not worth
   inheriting. The `pg-` prefix is shared page furniture; `doc-` is the
   legal-document layout used by Privacy and Terms.

   Every colour resolves through the tokens in np.css, so the light
   theme comes for free at :root[data-theme="light"] and there is no
   second palette to keep in step.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Shell ────────────────────────────────────────────────────────── */
.pg-wrap{
  max-width:var(--page);
  margin:0 auto;
  padding:0 22px 110px;
}
.pg-wrap.is-narrow{ max-width:900px; }

/* ── Hero ─────────────────────────────────────────────────────────────
   A band rather than a box: no border, no card. The only decoration is
   a soft bloom behind the heading, in the same accents the rest of the
   site uses. pointer-events are off so it can never intercept a click
   on the text above it. */
.pg-hero{
  position:relative;
  padding:74px 0 34px;
  isolation:isolate;
}
.pg-hero::before{
  content:"";
  position:absolute; inset:-40px 0 auto 0; height:340px;
  z-index:-1; pointer-events:none;
  background:
    radial-gradient(58% 100% at 18% 0%, rgba(var(--c1-rgb),.13), transparent 70%),
    radial-gradient(46% 100% at 82% 12%, rgba(var(--c5-rgb),.16), transparent 72%);
}

.pg-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono);
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--c1);
  margin:0 0 16px;
}
.pg-eyebrow::before{
  content:""; width:22px; height:2px; border-radius:2px;
  background:var(--grad-cta);
}

.pg-hero h1{
  font-family:var(--display);
  font-weight:800; letter-spacing:-.03em;
  /* Deliberately restrained. An earlier pass shipped a display size
     that filled half the viewport and read as shouting. */
  font-size:clamp(28px,3.6vw,44px);
  line-height:1.12;
  margin:0 0 18px;
  color:var(--txt);
  text-wrap:balance;
  max-width:18ch;
}

.pg-lede{
  font-size:clamp(15.5px,1.3vw,18px);
  line-height:1.62;
  color:var(--txt-2);
  max-width:62ch;
  margin:0;
}
.pg-lede strong{ color:var(--txt); font-weight:600; }

/* ── Figures strip ────────────────────────────────────────────────────
   Read live from the database rather than typed into the markup, so the
   page cannot quietly go on claiming numbers that stopped being true. */
.pg-figures{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;
  margin:44px 0 0;
  background:var(--edge);
  border:1px solid var(--edge);
  border-radius:var(--r);
  overflow:hidden;
}
.pg-figure{
  background:var(--bg-2);
  padding:20px 22px;
}
.pg-figure b{
  display:block;
  font-family:var(--display);
  font-size:clamp(22px,2.4vw,29px);
  font-weight:800; letter-spacing:-.02em;
  color:var(--txt);
  font-variant-numeric:tabular-nums;
  line-height:1.1;
}
.pg-figure span{
  display:block; margin-top:6px;
  font-size:11.5px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--txt-3);
}

/* ── Section ──────────────────────────────────────────────────────── */
.pg-sec{ margin:66px 0 0; }
.pg-sec > h2{
  font-family:var(--display);
  font-weight:800; letter-spacing:-.025em;
  font-size:clamp(20px,2.2vw,27px);
  line-height:1.22;
  color:var(--txt);
  margin:0 0 10px;
  scroll-margin-top:96px;
  text-wrap:balance;
}
.pg-sec > .pg-sec-note{
  color:var(--txt-2);
  font-size:15.5px; line-height:1.65;
  max-width:64ch;
  margin:0 0 26px;
}
.pg-sec > .pg-sec-note:last-child{ margin-bottom:0; }

.pg-prose p{
  color:var(--txt-2);
  font-size:15.5px; line-height:1.72;
  max-width:66ch;
  margin:0 0 1.05em;
}
.pg-prose p:last-child{ margin-bottom:0; }
.pg-prose strong{ color:var(--txt); font-weight:600; }
.pg-prose a{ color:var(--c3); text-decoration:none; border-bottom:1px solid rgba(var(--c3-rgb),.35); }
.pg-prose a:hover{ border-bottom-color:var(--c3); }

/* ── Card grid ───────────────────────────────────────────────────── */
.pg-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:16px;
}
.pg-card{
  position:relative;
  background:var(--glass);
  border:1px solid var(--edge);
  border-radius:var(--r);
  padding:24px 24px 26px;
  transition:border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.pg-card:hover{ border-color:var(--edge-2); transform:translateY(-2px); }
.pg-card-mark{
  display:grid; place-items:center;
  width:36px; height:36px; margin:0 0 15px;
  border-radius:10px;
  background:rgba(var(--c1-rgb),.12);
  border:1px solid rgba(var(--c1-rgb),.22);
  color:var(--c1);
  font-size:15px;
}
.pg-card h3{
  font-family:var(--display);
  font-weight:700; font-size:16.5px; letter-spacing:-.01em;
  color:var(--txt);
  margin:0 0 8px;
}
.pg-card p{
  color:var(--txt-2);
  font-size:14.5px; line-height:1.62;
  margin:0;
}

/* ── Numbered steps ───────────────────────────────────────────────────
   A real sequence — you cannot discuss a poll before you open one — so
   the numbering carries information rather than decorating the list. */
.pg-steps{
  list-style:none;
  margin:0; padding:0;
  counter-reset:step;
  display:grid; gap:2px;
}
.pg-step{
  counter-increment:step;
  position:relative;
  display:grid;
  grid-template-columns:56px 1fr;
  gap:20px;
  align-items:start;
  padding:22px 0;
  border-top:1px solid var(--edge);
}
.pg-step:last-child{ border-bottom:1px solid var(--edge); }
.pg-step::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--mono);
  font-size:13px; font-weight:600; letter-spacing:.08em;
  color:var(--c1);
  padding-top:3px;
}
.pg-step h3{
  font-family:var(--display);
  font-weight:700; font-size:17px; letter-spacing:-.01em;
  color:var(--txt);
  margin:0 0 7px;
}
.pg-step p{
  color:var(--txt-2);
  font-size:15px; line-height:1.65;
  max-width:62ch;
  margin:0;
}
.pg-step p a{ color:var(--c3); text-decoration:none; border-bottom:1px solid rgba(var(--c3-rgb),.35); }
.pg-step p a:hover{ border-bottom-color:var(--c3); }

/* ── Team ─────────────────────────────────────────────────────────── */
.pg-team{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:16px;
}
.pg-person{
  background:var(--glass);
  border:1px solid var(--edge);
  border-radius:var(--r);
  padding:24px 20px;
  text-align:center;
}
.pg-person img{
  display:block;            /* images are inline by default, and an
                               inline box ignores width and height */
  width:66px; height:66px;
  margin:0 auto 14px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid var(--edge-2);
  background:var(--bg-2);
}
.pg-person h3{
  font-family:var(--display);
  font-weight:700; font-size:15.5px;
  color:var(--txt);
  margin:0 0 4px;
}
.pg-person span{
  display:block;
  font-size:12px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--txt-3);
}

/* ── Call-to-action panel ─────────────────────────────────────────── */
.pg-cta{
  margin:72px 0 0;
  padding:38px 34px;
  border-radius:var(--r-2);
  border:1px solid var(--edge);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(var(--c5-rgb),.20), transparent 62%),
    var(--glass);
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:22px;
}
.pg-cta h2{
  font-family:var(--display);
  font-weight:800; letter-spacing:-.02em;
  font-size:clamp(19px,2vw,24px);
  color:var(--txt);
  margin:0 0 7px;
}
.pg-cta p{
  color:var(--txt-2);
  font-size:14.5px; line-height:1.6;
  margin:0; max-width:52ch;
}
.pg-cta-actions{ display:flex; flex-wrap:wrap; gap:10px; }

/* ── Buttons ──────────────────────────────────────────────────────────
   text-decoration is forced off: np-pages.css underlines anchors inside
   main, and a button that arrives underlined reads as a bug. */
.pg-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px;
  border-radius:99px;
  font-family:var(--body);
  font-size:14px; font-weight:650;
  text-decoration:none !important;
  border:1px solid var(--edge-2);
  color:var(--txt);
  background:var(--glass-2);
  transition:border-color var(--fast) var(--ease), background var(--fast) var(--ease);
  white-space:nowrap;
}
.pg-btn:hover{ border-color:var(--txt-3); background:var(--glass); }
.pg-btn.is-primary{
  background:var(--grad-cta);
  color:var(--on-cta);
  border-color:transparent;
  font-weight:700;
}
.pg-btn.is-primary:hover{ filter:brightness(1.07); }

/* ══ FAQ ════════════════════════════════════════════════════════════ */

.pg-faq-tools{
  display:flex; flex-wrap:wrap; gap:10px;
  margin:34px 0 8px;
}
.pg-faq-search{ flex:1 1 260px; position:relative; }
.pg-faq-search input{
  width:100%;
  padding:12px 16px;
  border-radius:99px;
  border:1px solid var(--edge);
  background:var(--bg-2);
  color:var(--txt);
  font-family:var(--body); font-size:14.5px;
  outline:none;
  transition:border-color var(--fast) var(--ease);
}
.pg-faq-search input::placeholder{ color:var(--txt-3); }
.pg-faq-search input:focus{ border-color:rgba(var(--c1-rgb),.55); }

.pg-faq-group{ margin:44px 0 0; }
.pg-faq-group > h2{
  font-family:var(--display);
  font-weight:800; letter-spacing:-.02em;
  font-size:clamp(17px,1.8vw,21px);
  color:var(--txt);
  margin:0 0 14px;
  scroll-margin-top:96px;
}

.pg-qa{
  border:1px solid var(--edge);
  border-radius:var(--r);
  background:var(--glass);
  overflow:hidden;
  margin:0 0 9px;
  transition:border-color var(--fast) var(--ease);
}
.pg-qa[open]{ border-color:var(--edge-2); }
.pg-qa > summary{
  display:flex; align-items:center; gap:13px;
  padding:16px 19px;
  cursor:pointer;
  list-style:none;
  font-family:var(--body);
  font-size:15.2px; font-weight:600;
  color:var(--txt);
  min-width:0;   /* long questions wrap instead of shoving the toggle out */
}
.pg-qa > summary::-webkit-details-marker{ display:none; }
.pg-qa > summary::after{
  content:"";
  flex:0 0 auto;
  margin-left:auto;
  width:9px; height:9px;
  border-right:2px solid var(--txt-3);
  border-bottom:2px solid var(--txt-3);
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.pg-qa[open] > summary::after{
  transform:rotate(-135deg) translateY(2px);
  border-color:var(--c1);
}
.pg-qa > summary:hover{ color:var(--c1); }
.pg-qa-body{
  padding:16px 19px 18px;
  border-top:1px solid var(--edge);
}
.pg-qa-body p{
  color:var(--txt-2);
  font-size:14.8px; line-height:1.68;
  max-width:68ch;
  margin:0 0 .9em;
}
.pg-qa-body p:last-child{ margin-bottom:0; }
.pg-qa-body strong{ color:var(--txt); font-weight:600; }
.pg-qa-body a{ color:var(--c3); text-decoration:none; border-bottom:1px solid rgba(var(--c3-rgb),.35); }
.pg-qa-body a:hover{ border-bottom-color:var(--c3); }
.pg-qa-body ul{
  margin:.85em 0; padding:0; list-style:none;
  display:grid; gap:.5em;
}
.pg-qa-body ul > li{
  position:relative; padding-left:1.6em;
  color:var(--txt-2); font-size:14.8px; line-height:1.6;
}
.pg-qa-body ul > li::before{
  content:""; position:absolute; left:.25em; top:.62em;
  width:5px; height:5px; border-radius:1px;
  background:var(--grad-cta);
  transform:rotate(45deg);
}

/* Hidden by the search filter. [hidden] is only display:none in the UA
   sheet, and .pg-qa sets a background — any author rule outranks it, so
   without this the "hidden" cards stay on screen. */
.pg-qa[hidden],
.pg-faq-group[hidden],
.pg-faq-empty[hidden]{ display:none !important; }

.pg-faq-empty{
  padding:34px 4px;
  color:var(--txt-2);
  font-size:15px;
}

/* ══ Legal documents ════════════════════════════════════════════════ */

.doc{
  display:grid;
  grid-template-columns:236px minmax(0,1fr);
  gap:52px;
  align-items:start;
  margin:40px 0 0;
}

/* The table of contents rides along the page. Legal text is scanned for
   one clause, not read end to end, so getting back to the index without
   scrolling is the whole point of having one. */
.doc-toc{
  position:sticky; top:96px;
  align-self:start;
  max-height:calc(100vh - 130px);
  overflow-y:auto;
  padding-right:8px;
}
.doc-toc h2{
  font-family:var(--mono);
  font-size:11px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--txt-3);
  margin:0 0 14px;
}
.doc-toc ol{
  list-style:none; margin:0; padding:0;
  counter-reset:toc;
  display:grid; gap:1px;
}
.doc-toc li{ counter-increment:toc; }
.doc-toc a{
  display:grid;
  grid-template-columns:26px 1fr;
  gap:4px;
  padding:7px 10px 7px 12px;
  font-size:13.6px; line-height:1.42;
  color:var(--txt-2);
  text-decoration:none !important;
  border-left:2px solid transparent;
  border-radius:0 6px 6px 0;
  transition:color var(--fast) var(--ease), border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.doc-toc a::before{
  content:counter(toc,decimal-leading-zero);
  font-family:var(--mono); font-size:11px;
  color:var(--txt-3);
}
.doc-toc a:hover{ color:var(--txt); background:var(--glass-2); }
.doc-toc a.is-current{
  color:var(--txt);
  border-left-color:var(--c1);
  background:var(--glass-2);
}
.doc-toc a.is-current::before{ color:var(--c1); }

.doc-body{ min-width:0; counter-reset:clause; }

.doc-summary{
  border:1px solid rgba(var(--c1-rgb),.20);
  background:rgba(var(--c1-rgb),.05);
  border-radius:var(--r);
  padding:22px 24px;
  margin:0 0 42px;
}
.doc-summary h2{
  font-family:var(--display);
  font-size:15px; font-weight:700;
  color:var(--txt);
  margin:0 0 10px;
}
.doc-summary p{
  color:var(--txt-2);
  font-size:14.6px; line-height:1.65;
  margin:0;
}
.doc-summary ul{
  margin:0; padding:0; list-style:none;
  display:grid; gap:.55em;
}
.doc-summary li{
  position:relative; padding-left:1.6em;
  color:var(--txt-2);
  font-size:14.6px; line-height:1.65;
}
.doc-summary li::before{
  content:""; position:absolute; left:.25em; top:.6em;
  width:5px; height:5px; border-radius:1px;
  background:var(--grad-cta); transform:rotate(45deg);
}
.doc-summary strong{ color:var(--txt); font-weight:600; }

.doc-sec{
  counter-increment:clause;
  padding:0 0 34px;
  margin:0 0 34px;
  border-bottom:1px solid var(--edge);
}
.doc-sec:last-of-type{ border-bottom:0; margin-bottom:0; }
.doc-sec > h2{
  font-family:var(--display);
  font-weight:800; letter-spacing:-.02em;
  font-size:clamp(18px,1.9vw,23px);
  line-height:1.25;
  color:var(--txt);
  margin:0 0 14px;
  scroll-margin-top:96px;
  text-wrap:balance;
}
.doc-sec > h2::before{
  content:counter(clause,decimal-leading-zero);
  display:block; margin-bottom:.55em;
  font-family:var(--mono);
  font-size:11px; font-weight:600; letter-spacing:.2em;
  color:var(--c1);
}
.doc-sec h3{
  font-family:var(--display);
  font-weight:700; font-size:15.5px;
  color:var(--txt);
  margin:1.7em 0 .5em;
}
.doc-sec p{
  color:var(--txt-2);
  font-size:15px; line-height:1.72;
  max-width:70ch;
  margin:0 0 1em;
}
.doc-sec p:last-child{ margin-bottom:0; }
.doc-sec strong{ color:var(--txt); font-weight:600; }
.doc-sec a{ color:var(--c3); text-decoration:none; border-bottom:1px solid rgba(var(--c3-rgb),.35); }
.doc-sec a:hover{ border-bottom-color:var(--c3); }
.doc-sec ul{
  margin:1em 0; padding:0; list-style:none;
  display:grid; gap:.6em;
}
.doc-sec ul > li{
  position:relative; padding-left:1.7em;
  color:var(--txt-2); font-size:15px; line-height:1.65;
}
.doc-sec ul > li::before{
  content:""; position:absolute; left:.28em; top:.66em;
  width:5px; height:5px; border-radius:1px;
  background:var(--grad-cta); transform:rotate(45deg);
}

/* A data table, for "what we collect and why". Scrolls inside its own
   box so a narrow screen never makes the page scroll sideways. */
.doc-table{
  margin:1.2em 0;
  border:1px solid var(--edge);
  border-radius:var(--r);
  overflow-x:auto;
}
.doc-table table{
  width:100%;
  border-collapse:collapse;
  min-width:460px;
}
.doc-table th,
.doc-table td{
  text-align:left;
  padding:12px 16px;
  border-bottom:1px solid var(--edge);
  font-size:14px; line-height:1.55;
  vertical-align:top;
}
.doc-table thead th{
  font-family:var(--mono);
  font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--txt-3);
  background:var(--glass-2);
  white-space:nowrap;
}
.doc-table td{ color:var(--txt-2); }
.doc-table td:first-child{ color:var(--txt); font-weight:600; }
.doc-table tr:last-child td{ border-bottom:0; }

.doc-meta{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:22px 0 0;
}
.doc-tag{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 13px;
  border-radius:99px;
  border:1px solid var(--edge);
  background:var(--glass-2);
  font-size:12px; font-weight:600;
  color:var(--txt-2);
}
.doc-tag b{ color:var(--txt); font-weight:650; }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width:940px){
  /* minmax(0,1fr), not 1fr: a bare 1fr track floors at the content's
     max-content width, and the contents grid inside it pushed the column
     to 614px on a 375px screen. min-width:0 on the rail is the same fix
     one level down. */
  .doc{ grid-template-columns:minmax(0,1fr); gap:0; }
  .doc-toc{ min-width:0; }
  /* Un-stick it: a sticky rail stacked above the content would cover
     the text it is meant to index. */
  .doc-toc{
    position:static; max-height:none; overflow:visible;
    margin:0 0 36px;
    padding:18px 20px;
    border:1px solid var(--edge);
    border-radius:var(--r);
    background:var(--glass-2);
  }
  .doc-toc ol{ grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
}
@media (max-width:620px){
  .pg-wrap{ padding:0 16px 80px; }
  .pg-hero{ padding:52px 0 26px; }
  .pg-hero h1{ max-width:none; }
  .pg-sec{ margin-top:50px; }
  .pg-step{ grid-template-columns:38px 1fr; gap:14px; }
  .pg-cta{ padding:28px 22px; }
  .pg-cta-actions{ width:100%; }
  .pg-btn{ flex:1 1 auto; justify-content:center; }
  .pg-figures{ grid-template-columns:repeat(2,1fr); }
}

@media (prefers-reduced-motion:reduce){
  .pg-card, .pg-card:hover{ transform:none; }
}