/* Legal documents (Terms / Privacy / Cookies).
   The policy body itself carries Termly's own inline styling; this file only
   sets the page frame, the reading column and a paper card around the doc. */

.legal-page {
  padding: clamp(110px, 14vh, 160px) 0 96px;
  background: var(--paper-warm);
  min-height: 70vh;
}
/* Use the site-wide container so the page edges line up with the homepage etc. */
.legal-eyebrow {
  margin-bottom: 28px;
}

/* Paper card holding the verbatim policy. Spans the container; the reading
   column inside is capped so long legal text stays comfortable to read. */
.legal-doc {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: clamp(28px, 5vw, 72px);
  box-shadow: 0 1px 0 rgba(20, 17, 13, 0.04), 0 18px 48px rgba(20, 17, 13, 0.06);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.7;
  overflow-wrap: break-word;
}
/* Keep the text measure readable even though the card is full-width. */
.legal-doc > div[data-iframe-height] {
  max-width: 1040px;
  margin: 0 auto;
}

/* ---- Match site typography ----
   The Termly document hard-codes Arial/Roboto with !important; override with the
   Apxora fonts. Two-class selectors (.legal-page .legal-doc) out-specify Termly's
   single-class rules, so these win even though the Termly <style> loads later. */
.legal-page .legal-doc,
.legal-page .legal-doc * {
  font-family: var(--sans) !important;
}
/* Section headings in the body stay sans but a touch tighter. */
.legal-page .legal-doc [data-custom-class="heading_1"],
.legal-page .legal-doc [data-custom-class="heading_1"] *,
.legal-page .legal-doc [data-custom-class="heading_2"],
.legal-page .legal-doc [data-custom-class="heading_2"] * {
  font-family: var(--sans) !important;
  letter-spacing: -0.01em;
}
/* The document title (e.g. "TERMS OF USE") in the Fraunces display face. */
.legal-page .legal-doc [data-custom-class="title"],
.legal-page .legal-doc [data-custom-class="title"] * {
  font-family: var(--display) !important;
  letter-spacing: -0.01em;
}

/* Keep Termly's font scale but make the document breathe in our column. */
.legal-doc [data-custom-class="title"] {
  margin: 0 0 6px;
  line-height: 1.15;
}
.legal-doc [data-custom-class="subtitle"] {
  margin: 0 0 32px;
}
.legal-doc [data-custom-class="heading_1"] {
  margin: 40px 0 14px;
}
.legal-doc [data-custom-class="heading_2"] {
  margin: 28px 0 10px;
}
.legal-doc [data-custom-class="body_text"],
.legal-doc li,
.legal-doc p {
  margin: 0 0 12px;
}
.legal-doc ul,
.legal-doc ol {
  margin: 0 0 14px;
  padding-left: 22px;
}

/* Long cookie / data tables: never overflow the card. */
.legal-doc table {
  max-width: 100%;
  border-collapse: collapse;
}
.legal-doc .legal-doc-scroll,
.legal-doc [style*="overflow"] {
  max-width: 100%;
}

/* Links pick up the Apxora signal. */
.legal-doc a {
  color: var(--signal);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-doc a:hover {
  color: var(--signal-ink);
}

@media (max-width: 600px) {
  .legal-doc {
    padding: 22px 18px;
    font-size: 15px;
  }
}