/* ===========================
   LEGAL PAGES — LAYOUT
   =========================== */

.ss-body.ss-legal {
  background: radial-gradient(circle at 10% -10%, #2b1b3b 0%, #050308 65%, #020105 100%);
}

.legal-main {
  padding-top: 82px;
}

.legal-wrapper {
  max-width: 960px;
  margin-inline: auto;
  padding-block: 36px 48px;
}

/* ===========================
   HERO
   =========================== */

.legal-hero {
  margin-bottom: 28px;
}

.legal-kicker {
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 201, 120, 0.85);
  margin-bottom: 10px;
}

.legal-title {
  margin: 0 0 12px;
  font-size: clamp(1.7rem, 1.9vw + 1.1rem, 2.2rem);
  line-height: 1.2;
  background: linear-gradient(120deg, #ffffff, #f4c978, #c86c89);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.legal-intro {
  margin: 0;
  font-size: 0.96rem;
  color: var(--ss-color-text-muted);
}

/* ===========================
   SECTIONS
   =========================== */

.legal-section {
  border-radius: 22px;
  padding: 16px 18px 18px;
  margin-bottom: 16px;
  background: radial-gradient(circle at 0 0, rgba(244, 201, 120, 0.06), rgba(5, 3, 8, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--ss-shadow-subtle);
}

.legal-heading {
  margin: 0 0 8px;
  font-size: 1rem;
}

.legal-subheading {
  margin: 14px 0 4px;
  font-size: 0.94rem;
}

.legal-section p {
  margin: 0 0 6px;
  font-size: 0.92rem;
  color: var(--ss-color-text-muted);
}

/* ===========================
   LISTS
   =========================== */

.legal-list {
  margin: 4px 0 8px 18px;
  padding: 0;
  font-size: 0.9rem;
  color: var(--ss-color-text-muted);
}

.legal-list--bullet {
  list-style: disc;
}

.legal-list--ordered {
  list-style: decimal;
}

.legal-list li {
  margin-bottom: 4px;
}

/* ===========================
   META
   =========================== */

.legal-updated {
  margin-top: 8px;
  font-size: 0.88rem;
  color: rgba(244, 201, 120, 0.85);
}

/* ===========================
   RESPONSIVE
   =========================== */

@media (max-width: 900px) {
  .legal-wrapper {
    padding-block: 30px 40px;
  }

  .legal-section {
    padding-inline: 14px;
  }
}

@media (max-width: 640px) {
  .legal-wrapper {
    padding-inline: 0;
  }

  .legal-section {
    border-radius: 18px;
  }
}