/*
  Legal / informational page layout — privacy.html only.

  Deliberately kept in its own file rather than added to the shared
  stylesheets: the approved homepage and Build Your Team page are frozen,
  and nothing here can reach them because no other page loads this file.

  No new design language. Every value below resolves to an existing token:
  the same type scale, palette, spacing rhythm, hairline and focus
  treatment already used across the site. This is a reading layout, not a
  new visual concept — no animation, no canvas, no decoration.
*/

.legal {
  padding-block: var(--space-xl) var(--space-2xl);
}

/* One measured column. Legal prose is read linearly, so it gets a
   comfortable line length (~70 characters) rather than the full grid. */
.legal__inner {
  max-width: 40rem;
}

.legal__title {
  margin-bottom: var(--space-xs);
}

.legal__updated {
  font-size: 0.9375rem;
  margin-bottom: var(--space-md);
}

.legal__intro {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-snug);
  max-width: none;
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--divider, var(--color-hairline));
}

/* Section rhythm — a clear break before each heading so the document
   scans, without the heading crowding the paragraph above it. */
.legal__section {
  margin-top: var(--space-md);
}

.legal__section h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.14rem + 0.45vw, 1.5rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-xs);
}

.legal__section p + p {
  margin-top: var(--space-xs);
}

/* Inline links inside the policy body need a visible affordance —
   the global reset strips underlines from every anchor. */
.legal a {
  color: var(--color-gold-deep);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--duration-fast) var(--ease-out);
}

.legal a:hover {
  color: var(--color-ink);
}

/* Long addresses and URLs must never push the 375px viewport sideways. */
.legal a[href^="mailto:"],
.legal a[href^="http"] {
  overflow-wrap: anywhere;
}

.legal__contact p + p {
  margin-top: 0;
}

@media (max-width: 40em) {
  .legal {
    padding-block: var(--space-lg) var(--space-xl);
  }
}