/*
 * Alf Theme — Legal Page (Terms of Use / Privacy Policy / ...)
 * Figma: node 1266:2049 desktop / 1266:1572 mobile (hero)
 *        node 1266:2054 desktop / 1266:2007 mobile (Terms content)
 *        node 1275:1511 (Privacy Policy content)
 */

/* ── Hero ────────────────────────────────────────────────────────── */

.legal-hero {
  background-color: var(--color-dark);
  padding-top: 144px;
  padding-bottom: 80px;
}

.legal-hero__wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.legal-hero__title {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-regular);
  line-height: normal;
  color: var(--color-bg);
  margin: 0;
}

.legal-hero__subtitle {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-regular);
  line-height: normal;
  color: var(--color-bg);
  margin: 0;
}

.legal-hero__updated {
  font-size: var(--font-size-body-md);
  font-weight: var(--font-weight-bold);
  line-height: normal;
  color: var(--color-primary);
  margin: 0;
}

@media (max-width: 900px) {
  .legal-hero {
    padding-top: 100px;
    padding-bottom: 56px;
  }
}

@media (max-width: 767px) {
  .legal-hero__title {
    font-size: var(--font-size-h1-mobile);
    font-weight: var(--font-weight-light);
  }

  .legal-hero__subtitle {
    font-weight: var(--font-weight-light);
  }

  .legal-hero__updated {
    font-size: var(--font-size-h4);
  }
}

/* ── Content ─────────────────────────────────────────────────────── */

.legal-content {
  padding-top: var(--spacing-xxl);
  padding-bottom: var(--section-pad-desktop);
  background-color: var(--color-bg);
}

.legal-content__body {
  display: flex;
  flex-direction: column;
  gap: 56px;
  counter-reset: legal-clause;
}

.legal-content__body > p {
  font-size: var(--font-size-body-md);
  color: var(--color-dark);
  margin: 0;
}

/* Each numbered clause: <div class="legal-clause"> — title auto-numbers. */
.legal-clause {
  display: flex;
  flex-direction: column;
  gap: 24px;
  counter-increment: legal-clause;
}

.legal-clause__title {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  line-height: normal;
  color: var(--color-primary);
  margin: 0;
}

.legal-clause__title::before {
  content: counter(legal-clause) ". ";
}

/* Un-numbered lead-in block (e.g. "Summary of Key Points") — same layout
   as .legal-clause but without the auto-number, since it isn't a clause. */
.legal-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.legal-section__title {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: normal;
  color: var(--color-primary);
  margin: 0;
}

.legal-clause p,
.legal-section p {
  font-size: var(--font-size-body-md);
  color: var(--color-dark);
  margin: 0;
}

.legal-clause p + p,
.legal-section p + p {
  margin-top: 16px;
}

.legal-content__body ul {
  list-style: disc;
  padding-left: 24px;
  margin: 8px 0 0;
}

.legal-content__body li {
  font-size: var(--font-size-body-md);
  color: var(--color-dark);
}

.legal-content__body li + li {
  margin-top: 4px;
}

.legal-content__body a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Contact clause: name / address / email block. */
.legal-contact__name {
  font-weight: var(--font-weight-bold);
}

@media (max-width: 900px) {
  .legal-content {
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-xxl);
  }
}