.legal-page {
  background: var(--fx-white);
}

.legal-hero {
  padding-block: clamp(58px, 8vw, 104px);
  background:
    radial-gradient(circle at 88% 8%, rgba(243, 107, 19, 0.1), transparent 28%),
    linear-gradient(180deg, var(--fx-cream), var(--fx-white) 36%);
}

.legal-page .shell {
  width: min(calc(100% - 48px), var(--fx-container));
  margin-inline: auto;
}

.legal-heading {
  max-width: 820px;
  margin-bottom: 38px;
}

.legal-heading h1 {
  margin-bottom: 16px;
}

.legal-heading > p:last-child {
  font-size: clamp(1rem, 2vw, 1.18rem);
}

.legal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.legal-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 16px;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--fx-line);
  border-radius: var(--fx-radius-md);
  background: var(--fx-white);
  box-shadow: var(--fx-shadow-sm);
}

.legal-card > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: var(--fx-orange-600);
  background: var(--fx-orange-100);
  font-size: 0.78rem;
  font-weight: 900;
}

.legal-card h2 {
  margin-bottom: 9px;
  font-size: clamp(1.16rem, 2vw, 1.45rem);
}

.legal-card p {
  margin: 0;
}

.legal-acknowledgement {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 20px;
  padding: 24px;
  border: 1px solid #cfe5d8;
  border-radius: var(--fx-radius-md);
  background: var(--fx-green-100);
}

.legal-acknowledgement + .legal-acknowledgement {
  border-color: #f1dac6;
  background: var(--fx-cream);
}

.legal-acknowledgement > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--fx-white);
  background: var(--fx-success);
  font-weight: 900;
}

.legal-acknowledgement + .legal-acknowledgement > span {
  background: var(--fx-orange-600);
}

.legal-acknowledgement p {
  margin: 4px 0 0;
}

@media (max-width: 760px) {
  .legal-page .shell {
    width: min(calc(100% - 28px), var(--fx-container));
  }

  .legal-grid {
    grid-template-columns: 1fr;
  }

  .legal-card,
  .legal-acknowledgement {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    padding: 20px;
  }

  .legal-card > span,
  .legal-acknowledgement > span {
    width: 38px;
    height: 38px;
  }
}