/* ══════════════════════════════════════════════════════════════
   LEGAL — privacy & terms long-form pages.
   On-brand but quieter than the landing page: no animated WebGL mesh.
   A single fixed, brightness-capped coral→lavender gradient (the same
   ramp as the homepage statement text) sits behind the glass nav, with
   the prose inside a frosted .glass-card. Loaded after base.css (tokens
   + .glass-card) and hero.css (the .nav pill).
   ══════════════════════════════════════════════════════════════ */

/* — Fixed page background: a calm static gradient, no canvas. Mirrors
     the story statement ramp (coral → pink → lavender); the top end is
     capped at a muted lavender so it never peaks too bright. — */
.legal-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    #F2A6A0 0%, #EFB1AE 24%, #E9AEC0 50%, #D7AEE4 78%, #C79FDF 100%);
}

/* — Page shell: clear the fixed nav, give the footer room below. — */
.legal {
  position: relative;
  z-index: 1;                              /* over the fixed gradient */
  padding: clamp(96px, 14vh, 150px) 24px clamp(48px, 8vh, 96px);
}

/* — The frosted card the whole document lives in. Inherits the brand
     .glass-card rim treatment; we only set layout + a touch more body
     padding for comfortable reading measure. — */
.legal-card {
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(32px, 5vw, 64px);
  /* Lighter frost than the default .glass-card: minimal blur + a thin
     white veil, so the gradient reads clearly through the box while dense
     text stays legible. */
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
}

/* — Header — */
.legal-card h1 {
  font-size: clamp(34px, 6vw, 52px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #ffffff;
  margin-bottom: 10px;
}
.legal-date {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 18px;
}
.legal-lede {
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 500;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 40px;
}

/* — Sections — */
.legal-card h2 {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #ffffff;
  margin-top: 40px;
  margin-bottom: 12px;
}
.legal-card p {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 16px;
}
.legal-card p strong { color: #ffffff; font-weight: 600; }
.legal-card em { color: rgba(255, 255, 255, 0.95); font-style: italic; }

.legal-card ul { padding-left: 22px; margin-bottom: 16px; }
.legal-card li {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 8px;
}
.legal-card li::marker { color: rgba(255, 255, 255, 0.5); }
.legal-card li strong { color: #ffffff; font-weight: 600; }

/* — Links: brand coral, legible on the frosted lavender. — */
.legal-card a {
  color: var(--peach);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(245, 215, 204, 0.45);
}
.legal-card a:hover {
  color: #ffffff;
  text-decoration-color: rgba(255, 255, 255, 0.7);
}

.legal-card code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

/* — Inner callout (privacy "your photos are yours" box) — a brighter
     frosted panel nested inside the card. — */
.legal-callout {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4),
              inset 0 -1px 1px rgba(0, 0, 0, 0.05);
  padding: 20px 24px;
  margin: 24px 0;
}
.legal-callout p:last-child { margin-bottom: 0; }

@media (max-width: 560px) {
  .legal-card { padding: 28px 22px; }
  .legal-card h1 { font-size: 30px; }
}