/* ============================================================================
 * legal-v2.css — shared styling for the v2 legal pages (Terms, Privacy,
 * Financial Protection). No Figma node; built in Hugo's design language
 * (sand bg, Bebas heading, Roboto Flex readable prose, gold rule + links).
 * Loaded only on page-legal-v2.php. Nav/footer come from best-time-v2.css +
 * home-v2.css; this file styles the .lgl content band only.
 * ========================================================================== */

body.legal-v2 { background: var(--c-sand); color: var(--c-ink); font-family: var(--font-body); }

.lgl {
  max-width: 820px;
  margin: 0 auto;
  padding: 72px 24px 96px;
}

/* heading band */
.lgl__head { margin-bottom: 40px; }
.lgl__kicker {
  font-family: var(--font-body); font-weight: var(--fw-light);
  font-size: 13px; line-height: 16px; letter-spacing: 1.44px;
  text-transform: uppercase; color: var(--c-gold); margin: 0 0 12px;
}
.lgl__kicker strong { font-weight: var(--fw-bold); }
.lgl__title {
  font-family: var(--font-title); font-weight: var(--fw-regular);
  font-size: var(--fs-h1); line-height: var(--lh-h1);
  color: var(--c-ink); text-transform: uppercase; margin: 0;
}
.lgl__rule { display: block; width: 64px; height: 2px; background: var(--c-gold); margin-top: 24px; }

/* prose */
.lgl__prose { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); font-weight: var(--fw-light); color: var(--c-ink); }
.lgl__prose > *:first-child { margin-top: 0; }
.lgl__prose p { margin: 0 0 20px; }
.lgl__prose h2 {
  font-family: var(--font-title); font-weight: var(--fw-regular);
  font-size: var(--fs-h3); line-height: var(--lh-h3); text-transform: uppercase;
  color: var(--c-ink); margin: 48px 0 16px;
}
.lgl__prose h3 {
  font-family: var(--font-title); font-weight: var(--fw-regular);
  font-size: var(--fs-h5); line-height: var(--lh-h5); text-transform: uppercase;
  color: var(--c-ink); margin: 36px 0 12px;
}
.lgl__prose h4 {
  font-family: var(--font-body); font-weight: var(--fw-bold);
  font-size: var(--fs-body-xl); line-height: var(--lh-body-xl);
  color: var(--c-ink); margin: 28px 0 10px;
}
.lgl__prose a { color: var(--c-gold); text-decoration: underline; text-underline-offset: 2px; }
.lgl__prose a:hover { color: var(--c-ink); }
.lgl__prose strong { font-weight: var(--fw-bold); }
.lgl__prose ul, .lgl__prose ol { margin: 0 0 20px; padding-left: 24px; }
.lgl__prose li { margin: 0 0 8px; }
.lgl__prose hr { border: none; border-top: 1px solid var(--c-gold-30); margin: 40px 0; }
.lgl__prose table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: var(--fs-body); }
.lgl__prose th, .lgl__prose td { border: 1px solid var(--c-black-10); padding: 10px 12px; text-align: left; vertical-align: top; }
.lgl__prose th { background: rgba(177,159,112,0.12); font-weight: var(--fw-bold); }

/* tablet / mobile */
@media (max-width: 1023px) {
  .lgl { padding: 56px 24px 80px; }
  .lgl__title { font-size: var(--fs-h2); line-height: var(--lh-h2); }
}
@media (max-width: 600px) {
  .lgl { padding: 40px 20px 64px; }
  .lgl__title { font-size: var(--fs-h3); line-height: var(--lh-h3); }
  .lgl__prose { font-size: var(--fs-body); line-height: var(--lh-body); }
  .lgl__prose h2 { font-size: var(--fs-h4); line-height: var(--lh-h4); }
}