/* ==========================================================================
   Affiora — long-form legal / policy pages
   Loaded alongside styles.css, which supplies the tokens and site chrome.
   Kept separate so editing prose styles doesn't invalidate the cache hash
   of the main stylesheet on every marketing page.
   ========================================================================== */

.legal-head {
  padding: clamp(40px, 6vw, 72px) var(--gutter) clamp(24px, 3vw, 36px);
  background: radial-gradient(120% 120% at 85% -10%,
              color-mix(in oklch, var(--accent) 9%, #fff) 0%, #fff 48%);
  border-bottom: 1px solid var(--color-border-subtle);
}

.legal-head__inner { max-width: 820px; margin: 0 auto; }

.legal-head__title {
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--color-text-primary);
  text-wrap: pretty;
}

/* Operator / effective date / jurisdiction block under the title. */
.legal-meta {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin: 0;
}
.legal-meta strong { color: var(--color-text-secondary); font-weight: 600; }

.legal-body {
  padding: clamp(32px, 5vw, 56px) var(--gutter) clamp(64px, 9vw, 104px);
  background: #fff;
}

.legal-doc {
  max-width: 820px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.68;
  color: var(--color-text-secondary);
}

/* --- Headings ------------------------------------------------------------- */
.legal-doc h2 {
  font-size: clamp(20px, 2.4vw, 25px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text-primary);
  margin: 56px 0 16px;
  padding-top: 28px;
  border-top: 1px solid var(--color-border-subtle);
  scroll-margin-top: 88px;   /* clears the sticky header on anchor jumps */
  text-wrap: pretty;
}
.legal-doc h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.legal-doc h3 {
  font-size: 17.5px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 32px 0 10px;
  scroll-margin-top: 88px;
}

/* --- Text ----------------------------------------------------------------- */
.legal-doc p { margin: 0 0 18px; text-wrap: pretty; }
.legal-doc strong { color: var(--color-text-primary); font-weight: 600; }

.legal-doc a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.legal-doc a:hover { text-decoration-thickness: 2px; }

/* Long uppercase disclaimer blocks (warranties, liability). Full-caps text at
   body size is punishing to read, so it gets a slightly smaller size, looser
   tracking and a tinted panel that signals "skim-able boilerplate". */
.legal-doc p.legal-caps {
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: var(--color-text-muted);
  background: var(--color-surface-page);
  border-left: 3px solid var(--neutral-300);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  padding: 16px 18px;
  margin-bottom: 16px;
}

/* --- Lists ---------------------------------------------------------------- */
.legal-doc ul { margin: 0 0 18px; padding-left: 22px; }
.legal-doc li { margin-bottom: 9px; text-wrap: pretty; }
.legal-doc li::marker { color: var(--neutral-400); }

/* --- Tables --------------------------------------------------------------- */
/* Policy tables run wide. The wrapper scrolls instead of the page body. */
.legal-table {
  overflow-x: auto;
  margin: 0 0 24px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  -webkit-overflow-scrolling: touch;
}
.legal-table table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 14.5px;
}
.legal-table th,
.legal-table td {
  text-align: left;
  vertical-align: top;
  padding: 13px 16px;
  border-bottom: 1px solid var(--color-border-subtle);
}
.legal-table th {
  background: var(--color-surface-page);
  color: var(--color-text-primary);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.legal-table tr:last-child td { border-bottom: none; }
.legal-table tbody tr:hover td { background: var(--neutral-50); }

/* --- Cross-links between the four policies -------------------------------- */
.legal-related {
  max-width: 820px;
  margin: 56px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--color-border-subtle);
}
.legal-related__label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neutral-400);
  margin: 0 0 14px;
}
.legal-related__links { display: flex; flex-wrap: wrap; gap: 10px; }
.legal-related__links a {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-full);
  padding: 9px 16px;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.legal-related__links a:hover {
  color: var(--accent);
  border-color: color-mix(in oklch, var(--accent) 40%, #fff);
  background: color-mix(in oklch, var(--accent) 6%, #fff);
}
.legal-related__links a[aria-current="page"] {
  color: #fff;
  background: var(--accent);
  border-color: transparent;
}

@media print {
  .site-header, .site-footer, .skip-link, .legal-related, .to-top { display: none !important; }
  .legal-body, .legal-head { padding: 0; background: #fff; }
  .legal-doc { max-width: none; font-size: 11pt; color: #000; }
  .legal-doc h2 { page-break-after: avoid; }
  .legal-table { page-break-inside: avoid; }
}