html { background: #fff; }

body.amal-legal-page {
  --legal-ink: #151515;
  --legal-muted: #68635d;
  --legal-rule: #e4e0da;
  --legal-paper: #fff;
  margin: 0;
  background: var(--legal-paper);
  color: var(--legal-ink);
  font-family: var(--amal-type-body, Arial, sans-serif);
  -webkit-font-smoothing: antialiased;
}

.amal-legal-page *,
.amal-legal-page *::before,
.amal-legal-page *::after { box-sizing: border-box; }

.legal-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(260px, .58fr);
  min-height: clamp(370px, 45vw, 590px);
  padding: clamp(72px, 9vw, 142px) clamp(30px, 7.8vw, 124px) clamp(58px, 7vw, 110px);
  border-bottom: 1px solid var(--legal-rule);
  background:
    linear-gradient(90deg, rgba(255,255,255,.97) 0 58%, rgba(255,255,255,.76) 74%, rgba(255,255,255,.45)),
    url("/images/shop-all/amal-shop-all-hero-v3.webp") 74% 45% / cover no-repeat;
}

.legal-hero__copy { align-self: end; max-width: 760px; }
.legal-eyebrow,
.legal-date {
  margin: 0;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .2em;
  line-height: 1.4;
  text-transform: uppercase;
}
.legal-eyebrow { color: #0b4f92; }
.legal-hero h1 {
  margin: 28px 0 22px;
  font-family: var(--amal-type-display, Georgia, serif);
  font-size: clamp(52px, 7.2vw, 112px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: .88;
}
.legal-hero__lede {
  max-width: 620px;
  margin: 0;
  color: #4e4a45;
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.65;
}
.legal-date { align-self: end; justify-self: end; color: var(--legal-muted); }

.legal-layout {
  display: grid;
  grid-template-columns: minmax(210px, .34fr) minmax(0, 1fr);
  gap: clamp(54px, 8vw, 150px);
  padding: clamp(58px, 7vw, 110px) clamp(30px, 7.8vw, 124px) clamp(82px, 10vw, 160px);
}

.legal-index {
  position: sticky;
  top: 30px;
  align-self: start;
  display: grid;
  gap: 18px;
  padding-top: 7px;
}
.legal-index p { margin: 0 0 8px; font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.legal-index a { width: fit-content; color: var(--legal-muted); font-size: 11px; line-height: 1.25; text-decoration: none; }
.legal-index a:hover,
.legal-index a:focus-visible { color: #0b4f92; outline: 0; }

.legal-document { max-width: 900px; }
.legal-section {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  column-gap: clamp(22px, 3vw, 46px);
  padding: 0 0 clamp(44px, 5vw, 74px);
  scroll-margin-top: 30px;
}
.legal-section + .legal-section { padding-top: clamp(44px, 5vw, 74px); border-top: 1px solid var(--legal-rule); }
.legal-section__number { padding-top: 7px; color: #a17f3e; font-size: 9px; font-weight: 600; letter-spacing: .16em; }
.legal-section h2 {
  margin: 0 0 22px;
  font-family: var(--amal-type-display, Georgia, serif);
  font-size: clamp(29px, 3vw, 46px);
  font-weight: 400;
  line-height: 1.03;
}
.legal-section p,
.legal-section li { color: #45413d; font-size: 14px; line-height: 1.75; }
.legal-section p { margin: 0 0 15px; }
.legal-section ul { margin: 18px 0 0; padding-left: 20px; }
.legal-section li + li { margin-top: 8px; }
.legal-section a { color: inherit; text-underline-offset: 3px; }
.legal-section strong { color: var(--legal-ink); font-weight: 600; }

.legal-contact {
  padding: clamp(40px, 5vw, 76px) clamp(30px, 7.8vw, 124px);
  border-top: 1px solid var(--legal-rule);
  background: #f7f5f1;
  text-align: center;
}
.legal-contact p { margin: 0 0 14px; color: var(--legal-muted); font-size: 11px; letter-spacing: .04em; }
.legal-contact a { color: var(--legal-ink); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-decoration: none; text-transform: uppercase; }

@media (max-width: 760px) {
  .legal-hero { grid-template-columns: 1fr; min-height: 430px; padding-top: 90px; }
  .legal-date { justify-self: start; margin-top: 35px; }
  .legal-layout { grid-template-columns: 1fr; gap: 52px; }
  .legal-index { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legal-index p { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .legal-hero { background-position: 64% 45%; }
  .legal-hero h1 { font-size: 52px; }
  .legal-section { grid-template-columns: 34px minmax(0, 1fr); column-gap: 16px; }
  .legal-section p,
  .legal-section li { font-size: 13px; }
}