.cme-legal {
  padding-top: 140px;
  padding-bottom: 40px;
  background:
    radial-gradient(
      1200px 520px at 15% 10%,
      color-mix(in srgb, var(--brand) 12%, transparent),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg, #0d1b32) 94%, transparent),
      var(--bg, #0d1b32)
    );
  color: var(--ink);
}

.dark-mode .cme-legal {
  background:
    radial-gradient(
      1200px 520px at 15% 10%,
      color-mix(in srgb, var(--brand) 18%, transparent),
      transparent 60%
    ),
    linear-gradient(180deg, color-mix(in srgb, #0d1b32 94%, #0b1224 6%), #0d1b32);
}

.cme-legal-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 2.75rem);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: 50px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dark-mode .cme-legal-container {
  border-color: color-mix(in srgb, var(--border) 70%, transparent);
}

.cme-legal h1,
.cme-legal h2,
.cme-legal h3 {
  color: var(--hero-ink);
}

.dark-mode .cme-legal h1,
.dark-mode .cme-legal h2,
.dark-mode .cme-legal h3 {
  color: color-mix(in srgb, #eaf4ff 92%, transparent);
}

.cme-richtext {
  display: grid;
  gap: 1rem;
}

.cme-richtext h2 {
  margin: 1rem 0 0;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.15;
}

.cme-richtext p,
.cme-richtext li {
  color: color-mix(in srgb, var(--ink) 88%, transparent);
  font-size: 1rem;
  line-height: 1.7;
}

.dark-mode .cme-richtext p,
.dark-mode .cme-richtext li {
  color: color-mix(in srgb, #eaf4ff 88%, transparent);
}

.cme-richtext p,
.cme-richtext ul {
  margin: 0;
}

.cme-richtext ul {
  padding-left: 1.25rem;
  display: grid;
  gap: 0.45rem;
}

@media (max-width: 768px) {
  .cme-legal {
    padding-top: 120px;
    padding-bottom: 28px;
  }

  .cme-legal-container {
    border-radius: 30px;
    margin-inline: var(--cme-section-gx);
  }
}