.page-legal {
  background: #f1ede6;
  color: #14161a;
}
.page-legal main { min-height: 70vh; }
.legal-hero {
  padding: clamp(150px, 18vw, 240px) var(--page-x) clamp(64px, 8vw, 110px);
  background: #090b0f;
  color: #f2eee7;
}
.legal-hero h1 {
  max-width: 980px;
  margin: 18px 0 24px;
  font-family: Cormorant, Didot, Georgia, serif;
  font-size: clamp(48px, 8vw, 104px);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.035em;
}
.legal-hero > p:last-child {
  max-width: 720px;
  color: #c7c2bb;
  font-size: clamp(16px, 1.4vw, 20px);
}
.legal-document,
.page-legal .entry-content > .legal-section {
  width: min(940px, calc(100% - 48px));
  margin: 0 auto;
  overflow-wrap: anywhere;
}
.legal-document { padding: clamp(64px, 9vw, 120px) 0; }
.page-legal .entry-content {
  counter-reset: legal-section;
  padding: 0 0 clamp(64px, 9vw, 120px);
  background:
    radial-gradient(circle at 12% 7%, rgba(102, 116, 137, .09), transparent 24rem),
    #f1ede6;
}
.page-legal .entry-content > .legal-hero { margin-bottom: clamp(64px, 8vw, 105px); }
.page-legal .entry-content > .legal-section {
  position: relative;
  counter-increment: legal-section;
  margin-bottom: 18px;
  padding: clamp(30px, 4vw, 48px) clamp(24px, 4.5vw, 54px);
  border: 1px solid rgba(20, 22, 26, .14);
  background: rgba(255, 255, 255, .48);
  box-shadow: 0 18px 50px rgba(20, 22, 26, .045);
}
.page-legal .entry-content > .legal-section::before {
  content: counter(legal-section, decimal-leading-zero);
  position: absolute;
  top: 22px;
  right: clamp(20px, 3vw, 34px);
  color: rgba(58, 70, 89, .22);
  font: 500 11px/1 Jost, sans-serif;
  letter-spacing: .18em;
}
.legal-document h2,
.legal-document h3,
.legal-document h4,
.legal-section h2,
.legal-section h3,
.legal-section h4 {
  font-family: Cormorant, Didot, Georgia, serif;
  font-weight: 500;
  line-height: 1.05;
}
.legal-document h2,
.legal-section h2 {
  margin: 64px 0 20px;
  padding-top: 28px;
  border-top: 1px solid #14161a2e;
  font-size: clamp(32px, 5vw, 52px);
}
.legal-document h2:first-child,
.legal-section h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-document h3,
.legal-section h3 {
  margin: 34px 0 12px;
  font-size: clamp(25px, 3vw, 34px);
}
.legal-document p,
.legal-document li,
.legal-section p,
.legal-section li {
  font-size: 16px;
  line-height: 1.85;
}
.legal-document p,
.legal-section p { margin: 0 0 18px; }
.legal-document ul,
.legal-document ol,
.legal-section ul,
.legal-section ol {
  margin: 12px 0 28px;
  padding-left: 24px;
}
.legal-document a,
.legal-section a {
  color: #273b57;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
  padding: 34px var(--page-x);
  background: #dcd4c9;
}
.legal-contact p {
  width: 100%;
  font-family: Cormorant, Georgia, serif;
  font-size: 28px;
}
.legal-contact a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
@media (max-width: 680px) {
  .legal-document,
  .page-legal .entry-content > .legal-section { width: min(100% - 28px, 940px); }
  .legal-hero { padding: 125px 18px 56px; }
  .legal-hero h1 { font-size: clamp(42px, 13vw, 62px); }
  .page-legal .entry-content > .legal-hero { margin-bottom: 42px; }
  .page-legal .entry-content > .legal-section { padding: 28px 22px; }
  .legal-document h2,
  .legal-section h2 { margin-top: 44px; font-size: clamp(30px, 9vw, 40px); }
  .legal-section p,
  .legal-section li { font-size: 15px; line-height: 1.75; }
}