/* ──────────────────────────────────────────────────────────────
   Weekly Pulse: privacy & support page layout
   Same palette, type and shape language as the landing page, with
   the motion left out: these pages are read by someone checking a
   compliance box or worried about their data, not being sold to.
   Requires tokens.css and base.css.
   ────────────────────────────────────────────────────────────── */

.legal-page,
.support-page {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 80px) clamp(14px, 3.4vw, 34px) clamp(60px, 8vw, 100px);
}

/* ── page head ── */
.section-number {
  display: inline-block;
  margin: 0 0 20px;
  padding: 7px 16px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 99px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: rotate(-1.5deg);
}

.legal-header h1,
.support-hero h1 {
  margin: 0;
  font-size: clamp(38px, 6.4vw, 68px);
  line-height: 1.02;
}

.legal-intro,
.support-hero > p:not(.section-number) {
  margin: 20px 0 0;
  max-width: 56ch;
  font-size: clamp(16px, 1.85vw, 19.5px);
  color: var(--sub);
}

.updated {
  margin: 22px 0 0;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--sub);
}

.legal-header { padding-bottom: clamp(32px, 5vw, 52px); }

/* ── legal body ── */
.legal-content section {
  margin-bottom: clamp(16px, 2.2vw, 22px);
  padding: clamp(22px, 3vw, 30px);
  background: var(--card);
  border: var(--bw) solid var(--edge);
  border-radius: var(--r-md);
  box-shadow: 6px 6px 0 var(--shadow);
}
.legal-content h2,
.faq h2 {
  margin: 0 0 10px;
  font-size: clamp(21px, 2.6vw, 27px);
  line-height: 1.15;
}
.legal-content p {
  margin: 0;
  font-size: 15.5px;
  color: var(--sub);
}
.legal-content a,
.faq a,
details a {
  color: var(--ink);
  border-bottom: var(--bw-s) solid var(--play);
  padding-bottom: 1px;
  font-weight: 800;
}

/* ── support ── */
.support-hero { padding-bottom: clamp(32px, 5vw, 52px); }
.support-hero .pop { margin-top: 30px; }

.faq h2 { margin-bottom: 24px; font-size: clamp(26px, 3.6vw, 38px); }

details {
  margin-bottom: clamp(12px, 1.8vw, 16px);
  background: var(--card);
  border: var(--bw) solid var(--edge);
  border-radius: var(--r-md);
  box-shadow: 6px 6px 0 var(--shadow);
  overflow: hidden;
}
summary {
  padding: 20px clamp(22px, 3vw, 28px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: Fredoka, Nunito, sans-serif;
  font-weight: 600;
  font-size: 18px;
  cursor: pointer;
  list-style: none;
}
summary::-webkit-details-marker { display: none; }
/* the marker is state feedback, not decoration, so it keeps its transition */
summary::after {
  content: "+";
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: var(--sun);
  color: var(--on-accent);
  border: var(--bw-s) solid var(--edge);
  border-radius: 10px;
  font-size: 19px;
  line-height: 1;
  transition: transform .25s var(--e);
}
details[open] summary::after { transform: rotate(45deg); }
details p {
  margin: 0;
  padding: 0 clamp(22px, 3vw, 28px) 22px;
  max-width: 62ch;
  font-size: 15.5px;
  color: var(--sub);
}

@media (max-width: 620px) {
  .legal-content section,
  details { box-shadow: 4px 4px 0 var(--shadow); }
  summary { font-size: 16.5px; }
}