/* ==========================================================================
   Legal / rich-text pages (layouts/legal-page.njk): /privacy, /terms, /accessibility, /traction-studio-ai/privacy
   ========================================================================== */

.lg { padding: 160px 40px 100px; display: flex; justify-content: center; align-items: center; gap: 20px; overflow: hidden; }
.lg__inner { flex: 1 0 0; min-width: 0; max-width: 1000px; display: flex; flex-direction: column; align-items: center; gap: 80px; }
.lg__head { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.lg__title { width: 100%; max-width: 600px; white-space: pre-wrap; font: 600 44px/52.8px var(--f-head); letter-spacing: -0.04em; color: var(--ink-2); text-align: center; }
/* Live quirk: the "Last updated" line is white (80%) on the white page, i.e. invisible. Kept as-is. */
.lg__updated { width: 100%; max-width: 480px; white-space: pre-wrap; font: 400 18px/27px var(--f-body); color: rgba(255, 255, 255, 0.8); text-align: center; }
.lg__content { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 64px; }
.lg__rt { width: 100%; max-width: 600px; overflow-wrap: break-word; word-break: break-word; }
.lg__rt p, .lg__rt h3 { white-space: pre-wrap; } /* not on the container: source newlines between blocks must collapse */

/* Rich text (mirrors Framer's .framer-text rules: block spacing via margin-top on non-first children) */
.lg__rt > * + * { margin-top: 20px; }
.lg__rt p, .lg__rt li, .lg__rt ul { font: 400 18px/27px var(--f-body); color: var(--ink-2); }
.lg__rt ul { padding: 0; position: relative; }
.lg__rt li { position: relative; list-style: none; padding-inline-start: 2ch; }
.lg__rt li::before { content: "•"; position: absolute; inset-inline-start: 0; }
.lg__rt li p { font: inherit; color: inherit; }
.lg__rt a { color: var(--green); }
.lg__rt strong { font-family: var(--f-inter); font-weight: 700; font-feature-settings: var(--inter-features); }

/* /accessibility: links inherit the text colour */
.lg--accessibility .lg__rt a { color: inherit; }
/* /terms: smaller body text */
.lg--small .lg__rt p, .lg--small .lg__rt li { font-size: 16px; line-height: 24px; color: var(--ink-3); }

/* ---------- Traction Studio AI privacy (dark theme, Syncopate/Lexend) ---------- */
.lg--tsai { background: var(--ink-3); }
.lg__logo { flex: none; position: relative; width: 301px; height: 70px; }
.lg__logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lg--tsai .lg__title { font: 400 43px/51.6px "Syncopate", sans-serif; letter-spacing: -0.04em; color: var(--white); }
.lg--tsai .lg__updated { font: 400 16px/22.4px "Lexend", sans-serif; letter-spacing: -0.02em; }
.lg--tsai .lg__rt { max-width: none; }
.lg--tsai .lg__rt p, .lg--tsai .lg__rt li, .lg--tsai .lg__rt ul, .lg--tsai .lg__rt h3 { font: 400 18px/27px "Lexend", sans-serif; color: rgba(255, 255, 255, 0.65); }
.lg--tsai .lg__rt h3 { margin-top: 40px; font-size: 28px; line-height: 36.4px; font-weight: 600; letter-spacing: -0.04em; color: var(--white); }
.lg--tsai .lg__rt > h3:first-child { margin-top: 0; }
.lg--tsai .lg__rt a { color: #0099ff; text-decoration: underline; }

@media (max-width: 1199.98px) {
  .lg { padding: 140px 30px 100px; }
  .lg__inner { gap: 60px; }
  .lg__title { font-size: 38px; line-height: 45.6px; }
  .lg__updated { font-size: 17px; line-height: 25.5px; }
  .lg__rt { max-width: 480px; }
  .lg__rt p, .lg__rt li, .lg__rt ul { font-size: 17px; line-height: 25.5px; }
  .lg--small .lg__rt p, .lg--small .lg__rt li { font-size: 15px; line-height: 22.5px; }

  .lg--tsai .lg__title { font-size: 42px; line-height: 50.4px; }
  .lg--tsai .lg__updated { font-size: 15px; line-height: 21px; }
  .lg--tsai .lg__rt { max-width: 480px; }
  .lg--tsai .lg__rt p, .lg--tsai .lg__rt li, .lg--tsai .lg__rt ul { font-size: 17px; line-height: 25.5px; }
  /* Live quirk: on tablet/phone only the first heading keeps its heading style; the rest render as body text. Kept as-is. */
  .lg--tsai .lg__rt > * + * { margin-top: 0; } /* tablet/phone variants on live have no paragraph spacing */
  .lg--tsai .lg__rt h3 { margin-top: 0; font-size: 17px; line-height: 25.5px; font-weight: 400; letter-spacing: 0; color: rgba(255, 255, 255, 0.65); }
  .lg--tsai .lg__rt h3:first-of-type { margin-top: 40px; font-size: 30px; line-height: 39px; font-weight: 600; letter-spacing: -0.04em; color: var(--white); }
}

@media (max-width: 809.98px) {
  .lg { flex-direction: column; padding: 120px 20px 100px; }
  .lg__inner { flex: none; width: 100%; gap: 40px; }
  .lg__title { font-size: 30px; line-height: 36px; letter-spacing: -0.09em; }
  .lg__updated { font-size: 16px; line-height: 24px; }
  .lg__rt { max-width: 320px; }
  .lg__rt p, .lg__rt li, .lg__rt ul { font-size: 16px; line-height: 24px; }
  .lg--small .lg__rt p, .lg--small .lg__rt li { font-size: 14px; line-height: 21px; }

  .lg--tsai .lg__title { font-size: 30px; line-height: 36px; letter-spacing: -0.04em; }
  .lg--tsai .lg__rt { max-width: 320px; }
  .lg--tsai .lg__rt p, .lg--tsai .lg__rt li, .lg--tsai .lg__rt ul { font-size: 16px; line-height: 24px; }
  .lg--tsai .lg__rt h3 { font-size: 16px; line-height: 24px; }
  .lg--tsai .lg__rt h3:first-of-type { font-size: 28px; line-height: 36.4px; }
}