/* ==========================================================================
   Legal pages (Privacy Policy / Cookie Policy) — extends css/style.css
   Reuses the same design tokens/components (kicker, btn, site-header,
   site-footer, beacon-dot) already defined there; this file only adds
   the document-style layout needed for long-form legal text.
   ========================================================================== */

.legal{ background: var(--paper); padding: 64px 0 96px; }
.legal-container{ max-width: 760px; }

.legal h1{
  font-size: clamp(30px, 4vw, 44px);
  color: var(--ink);
  margin-bottom: 6px;
}
.legal-updated{
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em;
  color: var(--muted); text-transform: uppercase; margin-bottom: 32px;
}

.legal-notice{
  display: flex; align-items: flex-start; gap: 14px;
  background: rgba(0,226,122,.07); border: 1px solid rgba(0,226,122,.28);
  border-radius: var(--r-md); padding: 18px 20px; margin-bottom: 40px;
}
.legal-notice i{ color: var(--green-deep); font-size: 17px; margin-top: 2px; flex-shrink: 0; }
.legal-notice p{ color: var(--body-dark); font-size: 14px; margin: 0; line-height: 1.55; }
.legal-notice code{
  background: rgba(10,11,13,.06); border-radius: 3px; padding: 1px 5px;
  font-family: var(--font-mono); font-size: 12.5px;
}

/* Inline "confirm this with a professional" flags within the body text */
.legal-placeholder{
  display: inline-block; background: rgba(0,226,122,.09);
  border: 1px dashed rgba(0,226,122,.4); border-radius: 4px;
  padding: 1px 8px; font-size: 13.5px; color: var(--green-deep);
}

.legal-body h2{
  font-size: 21px; color: var(--ink); margin-top: 40px; margin-bottom: 12px;
}
.legal-body h2:first-child{ margin-top: 0; }
.legal-body p{ color: var(--body-dark); font-size: 15.5px; line-height: 1.7; margin-bottom: 16px; }
.legal-body strong{ color: var(--ink); }
.legal-body a{ color: var(--green-deep); text-decoration: underline; text-decoration-color: rgba(0,226,122,.4); }
.legal-body a:hover{ color: var(--green-2); }

.legal-list{ margin: 0 0 16px; padding-left: 22px; list-style: disc; }
.legal-list li{ color: var(--body-dark); font-size: 15.5px; line-height: 1.65; margin-bottom: 8px; }

.legal-table{
  width: 100%; border-collapse: collapse; margin: 8px 0 24px;
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  font-size: 14px;
}
.legal-table th, .legal-table td{
  padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.legal-table thead th{
  font-family: var(--font-display); font-weight: 700; font-size: 13.5px;
  color: var(--paper); background: var(--char-2);
}
.legal-table tbody td{ color: var(--body-dark); }
.legal-table tbody tr:last-child td{ border-bottom: none; }
.legal-table tbody tr:nth-child(even) td{ background: rgba(255,255,255,.03); }

.legal-back{ margin-top: 44px; }

/* On-light header variant for these pages (they sit on a paper background
   with a simplified two-link nav, so keep the header readable on both
   ink-first and paper-first contexts). */
.legal .site-header,
body:has(.legal) .site-header{ background: rgba(10,11,13,0.9); }

@media (max-width: 720px){
  .legal{ padding: 48px 0 64px; }
  .legal-body h2{ font-size: 19px; margin-top: 32px; }
  .legal-table{ font-size: 13px; }
  .legal-table th, .legal-table td{ padding: 10px 12px; }
}