/*
 * Page-scoped CSS for /preview/legal/privacy.
 *
 * Reuses existing v5.2 classes where the shape already exists:
 *   .page-hero, .page-hero-title, .page-hero-sub,
 *   .section-head, .wrap, .eyebrow, .eyebrow.prompt, .link
 *
 * Page-specific additions only:
 *   .privacy-summary      tonal container for the "last updated" + TL;DR row
 *   .privacy-updated      the date heading (smaller than a normal h2)
 *   .privacy-tldr         the short-version paragraph
 *   .privacy-list         <dl> styled as a labeled list (dt/dd pairs)
 *   .privacy-bullets      prose-friendly <ul> with comfortable spacing
 *   .privacy-contact      final contact section, slightly recessed
 *
 * Token references (--accent, --ink-deep, --text, --text-muted, --rule,
 * --serif, --sans, --mono) match v5.2.
 */

/* ---------- section rhythm ---------- */
.privacy-summary,
.privacy-contact {
  padding-block: 2.5rem;
}

/* The "last updated" row sits right under the hero; tighten the gap. */
.privacy-summary .section-head {
  margin-bottom: 0.75rem;
}

.privacy-updated {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text, #ebe9e4);
  margin: 0;
}

.privacy-updated time {
  color: var(--accent, #F16C0A);
}

.privacy-tldr {
  font-family: var(--serif, 'Fraunces', serif);
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--text, #ebe9e4);
  max-width: 60ch;
  margin: 0;
}

/* ---------- labeled list (what we collect) ---------- */
.privacy-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem 0;
  margin: 1.5rem 0 0;
  padding: 0;
}

.privacy-list dt {
  font-family: var(--sans, 'Inter', sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent, #F16C0A);
  margin: 0 0 0.35rem;
}

.privacy-list dd {
  margin: 0;
  max-width: 64ch;
  line-height: 1.6;
  color: var(--text, #ebe9e4);
}

/* On wider screens, give the labels a fixed column so the prose
 * lines up like a glossary. Below 720px we stack them. */
@media (min-width: 720px) {
  .privacy-list {
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: 1rem 1.5rem;
  }

  .privacy-list dt {
    margin: 0;
    padding-top: 0.1rem;
  }
}

/* ---------- prose bullet lists ---------- */
.privacy-bullets {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: grid;
  gap: 0.85rem;
  max-width: 64ch;
}

.privacy-bullets li {
  position: relative;
  padding-left: 1.25rem;
  line-height: 1.6;
  color: var(--text, #ebe9e4);
}

.privacy-bullets li::before {
  content: '\2022';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent, #F16C0A);
  font-weight: 700;
}

.privacy-bullets li strong {
  color: var(--text, #ebe9e4);
  font-weight: 600;
}

.privacy-bullets code,
.privacy-list code {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 0.9em;
  padding: 0.05em 0.4em;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  color: var(--text, #ebe9e4);
}

/* ---------- contact closer ---------- */
.privacy-contact p {
  max-width: 60ch;
  line-height: 1.65;
}