/* Legal pages: /privacy and /terms.
   Loaded after styles.css and built only from its tokens, so the pages keep
   the site's look without touching the homepage's stylesheet. No JavaScript:
   these pages have nothing to reveal or animate, and the CSP allows no inline
   script. */

.legal-nav { display: flex; gap: 6px; }
.legal-nav a {
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: .92rem;
  font-weight: 500;
}
.legal-nav a:hover { color: var(--ink); background: var(--surface); }
.legal-nav a[aria-current="page"] { color: var(--ink); background: var(--surface-2); }

.legal { padding-block: clamp(40px, 7vw, 84px); }

.legal__title {
  margin: 0 0 10px;
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 750;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--ink);
}
.legal__meta { margin: 0 0 32px; color: var(--ink-3); font-size: .95rem; }

.legal__summary {
  margin: 0 0 48px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.legal__summary p { margin: 0; color: var(--ink); }

.legal section { margin: 0 0 38px; }
.legal h2 {
  margin: 0 0 12px;
  font-size: 1.2rem;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--ink);
}
.legal p,
.legal li { color: var(--ink-2); font-size: 1rem; line-height: 1.65; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 1.25em; }
.legal li { margin: 0 0 8px; }
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal address { font-style: normal; color: var(--ink-2); line-height: 1.65; }

/* Support page: each question is a native <details>, so it opens and closes
   with no JavaScript — the CSP allows none inline, and none is needed. */
.faq { margin: 0 0 38px; }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq h2 + details { border-top: 1px solid var(--line-soft); }
.faq summary {
  position: relative;
  padding: 16px 36px 16px 0;
  list-style: none;
  cursor: pointer;
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 550;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  font-size: 1.35rem;
  font-weight: 400;
  transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { margin: 0 0 18px; }

@media (prefers-reduced-motion: reduce) {
  .faq summary::after { transition: none; }
}