/* ==========================================================================
   Continuum Travel Therapy — policy pages (privacy-statement, cookie-policy)

   Loaded after css/site.css. One readable column of prose; no cards, no
   two-column layout — these are documents, not marketing.

   The pages are generated by tools/build-jobs.cjs from the body fragments in
   tools/legal/. Edit those, not the built HTML.
   ========================================================================== */

.legal-page {
  padding: var(--space-8) 0 var(--space-12);
  background: var(--canvas);
}

.legal {
  max-width: 760px;
  padding: var(--space-10) clamp(var(--space-5), 5vw, var(--space-10));
  background: var(--surface);
  border: 1px solid rgba(27, 42, 67, 0.08);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-card);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--slate-600);
}

.legal__title {
  margin: var(--space-3) 0 var(--space-2);
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--navy-800);
}
.legal__updated {
  margin: 0 0 var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(27, 42, 67, 0.08);
  font-size: 13.5px;
  color: var(--slate-500);
}

/* A short plain-language summary above the detail. */
.legal__summary {
  margin: 0 0 var(--space-8);
  padding: var(--space-5) var(--space-6);
  background: var(--color-primary-tint);
  border-left: 4px solid var(--teal-500);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-size: 15px;
  color: var(--navy-700);
}
.legal__summary p { margin: 0 0 var(--space-3); }
.legal__summary p:last-child { margin-bottom: 0; }

.legal h2 {
  margin: var(--space-10) 0 var(--space-4);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--navy-800);
  scroll-margin-top: 88px;
}
.legal h3 {
  margin: var(--space-6) 0 var(--space-3);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navy-800);
}
.legal > h2:first-of-type { margin-top: 0; }

.legal p { margin: 0 0 var(--space-4); }
.legal ul, .legal ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.legal li { margin-bottom: var(--space-2); }
.legal strong { color: var(--navy-800); font-weight: 600; }

.legal a { color: var(--teal-700); font-weight: 500; }
.legal a:hover { text-decoration: underline; }

.legal address {
  margin: 0 0 var(--space-4);
  font-style: normal;
  line-height: 1.7;
}

/* Tables — the disclosure lists (what we store, who receives what). */
.legal__table {
  width: 100%;
  margin: 0 0 var(--space-6);
  border-collapse: collapse;
  font-size: 14px;
  text-align: left;
}
.legal__table th,
.legal__table td {
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid rgba(27, 42, 67, 0.08);
  vertical-align: top;
}
.legal__table th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-400);
}
.legal__table td:first-child { font-weight: 600; color: var(--navy-800); }
.legal__table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--navy-700);
  word-break: break-all;
}

/* A table of columns does not fit a phone; stack each row into a block. */
@media (max-width: 640px) {
  .legal__table, .legal__table tbody, .legal__table tr, .legal__table td { display: block; width: 100%; }
  .legal__table thead { display: none; }
  .legal__table tr {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid rgba(27, 42, 67, 0.08);
  }
  .legal__table td { padding: 2px 0; border: none; }
  .legal__table td:first-child { margin-bottom: 2px; }
  .legal__table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--slate-400);
  }
}

.legal__contact {
  margin-top: var(--space-10);
  padding: var(--space-6);
  background: var(--surface-muted);
  border-radius: var(--radius-lg);
}
.legal__contact p:last-child { margin-bottom: 0; }