.legal-page {
  min-height: 100vh;
  background: #eee8dc;
  color: var(--ink);
  font-family: 'Barlow', sans-serif;
}

.legal-hero {
  padding: clamp(3rem, 8vw, 7rem) max(1.25rem, calc((100vw - 1180px) / 2));
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr);
  align-items: end;
  gap: clamp(2rem, 6vw, 5rem);
  border-bottom: 1px solid #aaa398;
  background: #101112;
  color: #fff;
}

.legal-kicker {
  display: block;
  margin-bottom: 1rem;
  color: #8fd1ca;
  font: 700 .8rem 'Barlow Condensed', sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.legal-hero h1 {
  max-width: 10ch;
  margin: 0;
  font: 700 clamp(3.8rem, 9vw, 8rem)/.82 'Geologica', sans-serif;
  letter-spacing: -.07em;
}

.legal-hero h1 em { color: var(--violet); font-style: normal; }
.legal-hero p { max-width: 34rem; margin: 0; color: #c8cbcc; font-size: 1.08rem; line-height: 1.65; }

.legal-layout {
  width: min(1180px, calc(100% - 2.5rem));
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5rem) 0 6rem;
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  align-items: start;
  gap: clamp(2rem, 6vw, 5rem);
}

.legal-index {
  position: sticky;
  top: 7rem;
  max-height: calc(100dvh - 8rem);
  overflow: auto;
  padding: 1.25rem;
  border: 1px solid #aaa398;
  background: #f8f4ec;
}

.legal-index strong {
  display: block;
  margin-bottom: .8rem;
  font: 700 .78rem 'Barlow Condensed', sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.legal-index nav { display: grid; }
.legal-index a { padding: .65rem 0; border-top: 1px solid #c9c1b6; color: #4f4b45; line-height: 1.3; }
.legal-index a:hover, .legal-index a:focus-visible { color: var(--violet); }

.legal-document { min-width: 0; }
.legal-updated { margin: 0 0 2rem; color: #68635c; font-size: .92rem; }
.legal-document section { padding: 2rem 0; border-top: 1px solid #aaa398; scroll-margin-top: 7rem; }
.legal-document section:first-of-type { padding-top: 0; border-top: 0; }
.legal-document h2 { max-width: 22ch; margin: 0 0 1rem; font: 700 clamp(1.8rem, 4vw, 3rem)/.98 'Geologica', sans-serif; letter-spacing: -.045em; }
.legal-document h3 { margin: 1.4rem 0 .6rem; font: 700 1.2rem 'Geologica', sans-serif; letter-spacing: -.025em; }
.legal-document h3[id] { scroll-margin-top: 7rem; }
.legal-document p, .legal-document li { color: #3f3b36; font-size: 1.02rem; line-height: 1.7; }
.legal-document p { margin: .8rem 0; }
.legal-document ul { margin: .8rem 0; padding-left: 1.3rem; }
.legal-document a { color: #4f33bd; text-decoration: underline; text-underline-offset: .18em; }
.legal-document strong { color: var(--ink); }

.legal-callout {
  margin: 1.25rem 0;
  padding: 1rem 1.15rem;
  border-left: .3rem solid var(--violet);
  background: #e3ddeb;
}

.legal-document .legal-contact {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
}

.legal-contact p { color: #d0d3d3; }
.legal-contact a { color: #8fd1ca; }

@media (max-width: 48rem) {
  .legal-hero, .legal-layout { grid-template-columns: 1fr; }
  .legal-hero h1 { font-size: clamp(3.4rem, 17vw, 5rem); }
  .legal-index { position: static; max-height: none; overflow: visible; }
  .legal-index nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
}

@media (max-width: 30rem) {
  .legal-hero h1 { font-size: clamp(2.5rem, 15vw, 4.5rem); }
  .legal-index nav { grid-template-columns: 1fr; }
}