/* ═══════════════════════════════════════════════════════════════════════════
   Legal pages (privacy.html, terms.html)

   Selectors are scoped to body.legal rather than to the .legal-body wrapper on
   purpose: Termly's generated HTML does not balance its tags, so parts of the
   document can end up outside that wrapper in the parsed DOM. Scoping to the
   page means the typography survives regardless of how the nesting lands.

   These pages embed HTML generated by Termly, which ships its own <style>
   block forcing Arial on a white background via !important. Every rule here
   that overrides it is scoped under body.legal, giving it higher specificity
   than Termly's bare [data-custom-class='...'] selectors, so it wins no matter
   which stylesheet the browser applies last.
   ═══════════════════════════════════════════════════════════════════════════ */

.legal-page {
  padding: 56px 0 90px;
}

.legal-wrap {
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
  padding-inline: var(--pad-screen);
}

.legal-back {
  display: inline-block;
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.4px;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--border-muted);
  padding-bottom: 2px;
}
.legal-back:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ── Overriding Termly's baked-in Arial/white styling ───────────────────── */

/* Termly already sets its own content transparent. Scope this to the generated
   document only — applied to the whole page it strips the header CTA's dark
   background and the table header fill. */
body.legal [data-custom-class='body'],
body.legal [data-custom-class='body'] * {
  background: transparent !important;
}

/* Document title ("PRIVACY POLICY" / "TERMS OF SERVICE") */
body.legal [data-custom-class='title'],
body.legal [data-custom-class='title'] * {
  font-family: var(--serif) !important;
  font-weight: 700 !important;
  font-size: clamp(30px, 4.4vw, 42px) !important;
  line-height: 1.15 !important;
  letter-spacing: 0.5px !important;
  color: var(--ink) !important;
}

/* "Last updated …" */
body.legal [data-custom-class='subtitle'],
body.legal [data-custom-class='subtitle'] * {
  font-family: var(--serif) !important;
  font-size: 15px !important;
  letter-spacing: 0.3px !important;
  color: var(--muted) !important;
}

/* Numbered section headings */
body.legal [data-custom-class='heading_1'],
body.legal [data-custom-class='heading_1'] * {
  font-family: var(--serif) !important;
  font-weight: 700 !important;
  font-size: clamp(21px, 2.6vw, 26px) !important;
  line-height: 1.25 !important;
  letter-spacing: 0.3px !important;
  color: var(--ink) !important;
}

/* Sub-headings inside a section */
body.legal [data-custom-class='heading_2'],
body.legal [data-custom-class='heading_2'] * {
  font-family: var(--serif) !important;
  font-weight: 700 !important;
  font-size: clamp(18px, 2.1vw, 21px) !important;
  line-height: 1.3 !important;
  color: var(--ink) !important;
}

/* Body copy */
body.legal [data-custom-class='body_text'],
body.legal [data-custom-class='body_text'] * {
  font-family: var(--serif) !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: var(--body) !important;
}

/* Links — the site's ink underline rather than Termly's blue */
body.legal [data-custom-class='link'],
body.legal [data-custom-class='link'] * {
  font-family: var(--serif) !important;
  font-size: 17px !important;
  color: var(--ink) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--border-muted) !important;
  text-underline-offset: 3px !important;
  word-break: break-word !important;
}
body.legal a:hover,
body.legal a:hover * {
  text-decoration-color: var(--ink) !important;
}

/* Termly wraps headings in inline <span>s that carry their own colours. */
body.legal h1, body.legal h2, body.legal h3 {
  font-family: var(--serif);
  color: var(--ink);
  margin: 0;
}
body.legal h2 { margin-top: 34px; }
body.legal h3 { margin-top: 22px; }

/* The sticky header would otherwise cover an anchor target on jump. */
body.legal [id] { scroll-margin-top: calc(var(--header-h) + 20px); }

body.legal ul { padding-left: 22px; margin: 8px 0; }
body.legal li { margin-bottom: 6px; }

/* ── The category tables in "US residents have specific privacy rights" ──
   Three columns at 100% width overflow on a phone, so each table scrolls
   inside its own container rather than the page scrolling sideways. */
body.legal table {
  width: 100% !important;
  border-collapse: collapse;
  margin: 14px 0;
  font-family: var(--serif);
}
body.legal th,
body.legal td {
  border-color: var(--border) !important;
  padding: 10px 12px;
  vertical-align: top;
}
body.legal th { background: var(--elevated) !important; }

.legal-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Termly's editor leaves empty marker elements in the output. */
body.legal bdt { display: inline; }

/* The "Powered by Termly" badge. Termly's free plan expects the attribution
   to stay, so it is kept — just scaled down so it does not dominate the top
   of the page. The text credit at the very bottom is the primary attribution. */
body.legal span[style*="background: url(data:image/svg+xml"] {
  transform: scale(0.75);
  transform-origin: left center;
  opacity: 0.55;
  margin-bottom: 2rem !important;
}

/* Placeholder shown until the Termly HTML is pasted in. */
.legal-placeholder {
  border: 1px dashed var(--border-muted);
  border-radius: 14px;
  padding: 34px 26px;
  text-align: center;
  font-family: var(--serif);
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}

@media (max-width: 720px) {
  .legal-page { padding: 34px 0 70px; }
  body.legal [data-custom-class='body_text'],
  body.legal [data-custom-class='body_text'] * { font-size: 16px !important; }
  body.legal th, body.legal td { padding: 8px 10px; }
}