.legal {
  background: #f8f7f3;
  display: grid;
  grid-template-columns: 28% 1fr;
  gap: 70px;
}

.legal-intro {
  position: sticky;
  top: 30px;
  align-self: start;
}

.legal-intro h2 {
  font-size: clamp(37px, 4vw, 54px);
  letter-spacing: -2.6px;
}

.legal-intro > p:last-child {
  color: #647488;
  font-size: 14px;
  line-height: 1.7;
  max-width: 230px;
}

.legal-content { display: grid; gap: 28px; }

.legal-policy {
  background: #fff;
  border: 1px solid var(--line);
  padding: 42px 46px;
  scroll-margin-top: 25px;
}

.legal-policy h3 { font-size: 28px; letter-spacing: -1px; margin: 0 0 21px; }
.legal-policy h4 { font-size: 15px; margin: 28px 0 7px; }
.legal-policy p, .legal-policy li { color: #586b7e; font-size: 13px; line-height: 1.7; }
.legal-policy p { margin: 0 0 12px; }
.legal-policy ul { margin: 0 0 14px; padding-left: 20px; }
.legal-policy a { color: var(--coral); font-weight: 700; }
.legal-updated { color: #8190a0 !important; font-size: 11px !important; font-weight: 700; margin-top: 24px !important; }

@media (max-width: 820px) {
  .legal { grid-template-columns: 1fr; gap: 28px; }
  .legal-intro { position: static; }
  .legal-intro > p:last-child { max-width: 500px; }
}

@media (max-width: 520px) {
  .legal-policy { padding: 32px 8%; }
}

.legal-page {
  background: #f8f7f3;
  padding: 74px max(34px, 15%);
}

.legal-page .legal-policy { max-width: 900px; margin: 0 auto; }
.legal-page h1 { font-size: clamp(39px, 5vw, 58px); letter-spacing: -2.6px; margin: 0 0 24px; }
.legal-page .legal-policy h2 { font-size: 17px; letter-spacing: 0; margin: 28px 0 7px; }
.legal-page .legal-policy .button-primary { color: #fff; margin-top: 18px; }

@media (max-width: 520px) {
  .legal-page { padding: 45px 7%; }
}