/* =============================================================================
 * PAGE — LEGAL (Terms of Service / Privacy Policy / Cookie Policy)
 * =============================================================================
 * Shared prose layout for the three legal pages. Reuses the compact hero block,
 * then renders a single centered reading column. All values are design-system
 * tokens (see variables.css); the only literal is the reading measure, expressed
 * in `ch` for legibility.
 * ========================================================================== */

.legal-page {
  background: var(--color-bg-page);
}

/* Section rhythm aligned on the site-wide ~48px cadence (Home / Solutions). */
.legal {
  padding-block: var(--space-24);
}

.legal__inner {
  /* Full container width, matching the other page templates. The shared
     `.container` helper supplies the max-width, centering and responsive
     gutters (see base.css). */
  width: 100%;
}

/* ----- Meta line ("Last updated …") -------------------------------------- */
.legal__meta {
  font-family: var(--font-inter);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-10);
}

/* ----- Headings ----------------------------------------------------------- */
.legal__prose h2 {
  font-family: var(--font-gilroy);
  font-weight: var(--fw-bold);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  color: var(--color-text-primary);
  margin-top: var(--space-12);
  margin-bottom: var(--space-5);
}

.legal__prose h2:first-child {
  margin-top: 0;
}

.legal__prose h3 {
  font-family: var(--font-gilroy);
  font-weight: var(--fw-semibold);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  color: var(--color-text-primary);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}

/* ----- Body copy ---------------------------------------------------------- */
.legal__prose p,
.legal__prose li {
  font-family: var(--font-inter);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
}

.legal__prose p {
  margin-bottom: var(--space-6);
}

.legal__prose ul {
  list-style: disc;
  padding-left: var(--space-8);
  margin-bottom: var(--space-6);
}

.legal__prose li {
  margin-bottom: var(--space-3);
}

.legal__prose li::marker {
  color: var(--color-interactive-primary);
}

.legal__prose strong {
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

/* ----- Links -------------------------------------------------------------- */
.legal__prose a {
  color: var(--color-interactive-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}

.legal__prose a:hover,
.legal__prose a:focus-visible {
  color: var(--color-interactive-primary-hover);
}

/* ----- Tables (Privacy / Cookie data tables) ----------------------------- */
.legal__table-wrap {
  overflow-x: auto;
  margin-bottom: var(--space-6);
}

.legal__prose table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-inter);
  font-size: var(--text-sm);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.legal__prose thead th {
  text-align: left;
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  background: var(--color-glass-lime-12);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-default);
}

.legal__prose tbody td {
  color: var(--color-text-secondary);
  line-height: var(--lh-normal);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: top;
}

.legal__prose tbody tr:last-child td {
  border-bottom: 0;
}

/* ----- Callout (⚠️ verification / draft notes) --------------------------- */
.legal__callout {
  font-family: var(--font-inter);
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-primary);
  background: var(--color-glass-lime-12);
  border-left: 3px solid var(--color-interactive-primary);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-6);
}

/* ----- Responsive --------------------------------------------------------- */
@media (max-width: 767px) {
  .legal__prose h2 {
    font-size: var(--text-xl);
  }

  .legal__prose h3 {
    font-size: var(--text-md);
  }

  .legal__prose thead th,
  .legal__prose tbody td {
    padding: var(--space-3) var(--space-4);
  }
}