/* terms-of-service.css — Terms of Service page (Figma frame 239:773)

   Desktop layout first; tablet (≤768px) and mobile (≤480px) overrides at the
   bottom, same breakpoints as the other pages.
   Values marked "FLAG: no token" come straight from the Figma frame and have
   no matching design token in tokens.css yet. */

/* Figma frame stacks Navbar / main / Footer with a 10px auto-layout gap.
   FLAG: no token (10px). */
.page-terms {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px 0;
}

/* Header ---------------------------------------------------------------- */

/* Gradient fill plus Figma's "::after" layer: a 143px white fade over the
   bottom edge. FLAG: no token (143.77deg angle, 35%/70% stops, 143px fade). */
.legal-header {
  display: flex;
  justify-content: center;
  width: 100%;
  background:
    linear-gradient(to bottom, transparent, var(--color-white)) bottom / 100% 143px no-repeat,
    linear-gradient(143.77deg, var(--color-white) 0%, var(--color-primary-25) 35%, var(--color-primary-50) 70%, var(--color-accent2-50) 100%);
}

/* FLAG: no token (1160px max-width, 72px vertical padding, 12px gap). */
.legal-header__inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 1160px;
  padding: var(--section-space-top) var(--space-lg) var(--section-space);
}

/* Figma "Caption" text style (Source Sans 3 Bold 14, uppercase). Family and
   size map to the caption tokens; FLAG: no token for line-height 1.8 or
   letter-spacing 4%. */
.legal-header__label {
  margin: 0;
  font-family: var(--font-caption-family);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-caption-size);
  line-height: 1.8;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent1-500);
}

.legal-header__title {
  margin: 0;
  font-family: var(--font-title-family);
  font-weight: var(--font-title-weight);
  font-size: var(--font-title-size);
  line-height: var(--font-title-line-height);
  color: var(--color-neutral-900);
}

/* Body ------------------------------------------------------------------ */

/* FLAG: no token (1140px max-width, 80px vertical padding, 36px gap). */
.legal-body {
  display: flex;
  flex-direction: column;
  gap: 36px;
  width: 100%;
  max-width: 1140px;
  padding: 0 0 var(--section-space);
}

/* FLAG: no token (12px gap). */
.legal-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 var(--space-lg);
}

.legal-block__title {
  margin: 0;
  font-family: var(--font-h3-family);
  font-weight: var(--font-h3-weight);
  font-size: var(--font-h3-size);
  line-height: var(--font-h3-line-height);
  color: var(--color-neutral-900);
}

.legal-block__text {
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-body-regular-weight);
  font-size: var(--font-body-regular-size);
  line-height: var(--font-body-regular-line-height);
  color: var(--color-neutral-500);
}

.legal-block__text p,
.legal-block__text ul {
  margin: 0;
}

/* Figma separates some paragraphs with an empty line; one body line-height. */
.legal-block__text .is-spaced {
  margin-top: calc(var(--font-body-regular-line-height) * 1em);
}

/* FLAG: no token (24px list indent). */
.legal-block__text ul {
  padding-left: 24px;
}

.legal-block__text strong {
  font-weight: var(--font-weight-bold);
}

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

/* Responsive ==============================================================
   Tablet (≤768px) and mobile (≤480px), desktop-first like the other pages;
   the tablet block also applies at mobile widths unless overridden below.
   Not in Figma (desktop-only frame). Type sizes step down via the tokens.
   ========================================================================== */

@media (max-width: 768px) {
  .legal-header__inner {
    padding: var(--section-space-top) var(--space-lg) var(--section-space);
  }

  .legal-body {
    gap: 32px;
    padding: 0 0 var(--section-space);
  }
}

@media (max-width: 480px) {
  .legal-header__inner {
    padding: var(--section-space-top) var(--space-md) var(--section-space);
  }

  .legal-body {
    gap: 28px;
    padding: 0 0 var(--section-space);
  }

  .legal-block {
    padding: 0 var(--space-md);
  }

  /* Long URLs and email addresses must wrap instead of widening the page. */
  .legal-block__text {
    overflow-wrap: anywhere;
  }

  .legal-block__text ul {
    padding-left: 20px;
  }
}