/* ==========================================================================
   legal.css — privacy policy and any future legal page

   Loaded after styles.css. Reuses the site's header, tokens and accent
   treatment; everything here is the long-form reading column, which nothing
   else on the site needed.
   ========================================================================== */

.legal-body {
  min-height: 100svh;          /* svh, not dvh — see the note on .footer */
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
}

.legal {
  flex: 1;
  padding: 2rem 1.25rem 6rem;
}

/* A measure, not a container. Long-form text is unreadable at the width the
   rest of the site uses for cards. */
.legal__rail {
  width: 100%;
  max-width: 68ch;
  margin: 0 auto;
}

.legal__head {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-bottom: 2.5rem;
}
.legal__head h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(2.25rem, 7vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: var(--tracking-tighter);
}
.legal__updated {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow-sm);
  text-transform: uppercase;
  color: var(--text-subtle);
}

.legal__lede {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--rule-hairline);
}

.legal__block { margin-top: 2.75rem; }
.legal__block h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tighter);
  margin-bottom: 0.875rem;
}
.legal__block p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}
.legal__block p + p { margin-top: 1rem; }

.legal__block ul {
  margin: 1rem 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.legal__block li {
  position: relative;
  padding-left: 1.375rem;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}
/* Accent bullet rather than a disc — the one place the brand shows up in
   otherwise plain legal copy. */
.legal__block li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}

.legal__block a,
.legal__foot a {
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal__foot {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-hairline);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

@media (min-width: 640px) {
  .legal { padding: 3rem 2.5rem 7rem; }
}