.legal-page {
  --legal-rule: #c9c3bb;
  --legal-ink: #44464a;
  background: var(--ivory, #f5f4f0);
  color: var(--charcoal, #17191d);
}

.legal-hero {
  background: var(--stone, #e9e7e1);
  border-bottom: 1px solid var(--legal-rule);
}

.legal-hero-inner {
  padding-block: 6.5rem 5.75rem;
}

.legal-kicker,
.legal-index-label {
  color: var(--copper, #a6422c);
  font-family: ui-monospace, Consolas, monospace;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.legal-kicker {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.5rem;
}

.legal-kicker::after {
  content: "";
  width: 3rem;
  border-top: 1px solid currentColor;
}

.legal-hero h1 {
  max-width: 15ch;
  margin: 0;
  font-size: 5rem;
  line-height: 1.05;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.legal-layout {
  display: grid;
  grid-template-columns: minmax(11rem, 15rem) minmax(0, 49rem);
  justify-content: space-between;
  align-items: start;
  column-gap: 3rem;
  padding-block: 4.5rem 7rem;
}

.legal-index {
  border-top: 1px solid var(--legal-rule);
  padding-top: 1.25rem;
}

.legal-index-label { cursor: pointer; margin: 0 0 .75rem; padding-block: .5rem; }
.legal-index ol { padding: 0; margin: 0; list-style: none; }
.legal-index a {
  display: block;
  padding: .35rem .125rem;
  color: var(--legal-ink);
  font-size: .875rem;
  line-height: 1.5;
  text-decoration: none;
}

.legal-index a:hover { color: var(--copper, #a6422c); text-decoration: underline; }
.legal-body { min-width: 0; line-height: 1.7; color: var(--legal-ink); overflow-wrap: anywhere; }
.legal-body p { margin: 0 0 1rem; }
.legal-body .legal-meta { font-size: .9375rem; margin-bottom: 2rem; }
.legal-body section { padding-block: 2rem; border-top: 1px solid var(--legal-rule); }
.legal-body section > :last-child { margin-bottom: 0; }
.legal-body h2, .legal-body h3, .legal-body h4 { color: var(--charcoal, #17191d); }
.legal-body h2 { font-size: 1.875rem; line-height: 1.2; margin: 0 0 1.125rem; scroll-margin-top: 6rem; }
.legal-body h3 { font-size: 1.25rem; line-height: 1.35; margin: 1.75rem 0 .625rem; }
.legal-body h4 { font-size: 1rem; margin: 1.5rem 0 .5rem; }
.legal-body ul, .legal-body ol { padding-inline-start: 1.5rem; margin: 0 0 1rem; }
.legal-body li + li { margin-top: .375rem; }
.legal-body a { color: var(--copper, #a6422c); text-decoration: underline; text-underline-offset: .18em; }
.legal-page :focus-visible { outline: 2px solid var(--copper, #a6422c); outline-offset: 3px; }
.legal-table { max-width: 100%; overflow-x: auto; margin: 1.25rem 0; }
.legal-table table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.legal-table th, .legal-table td { padding: .75rem; border-bottom: 1px solid var(--legal-rule); text-align: start; vertical-align: top; min-width: 8rem; }
.legal-table th { color: var(--charcoal, #17191d); background: var(--stone, #e9e7e1); }
.legal-table td p:last-child, .legal-table th p:last-child { margin-bottom: 0; }

@media screen and (min-width: 981px) {
  .legal-index {
    position: sticky;
    top: 2rem;
    max-height: calc(100dvh - 4rem);
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .legal-index a:focus-visible { outline-offset: -2px; }
}

@media (max-width: 980px) {
  .legal-hero-inner { padding-block: 5rem 4.25rem; }
  .legal-hero h1 { font-size: 4rem; }
  .legal-layout { grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr); gap: 2rem; }
}

@media (max-width: 700px) {
  .legal-hero-inner { padding-block: 3.5rem; }
  .legal-hero h1 { font-size: 2.625rem; }
  .legal-layout { grid-template-columns: minmax(0, 1fr); padding-block: 2rem 4rem; gap: 2.5rem; }
  .legal-index a { padding-block: .5rem; }
  .legal-index-label { margin-bottom: 0; }
  .legal-index[open] .legal-index-label { margin-bottom: .75rem; }
  .legal-body h2 { font-size: 1.5rem; }
}

@media print {
  .legal-hero, .legal-page { background: white; }
  .legal-layout { display: block; padding-block: 1rem; }
  .legal-index { display: none; }
  .legal-hero-inner { padding-block: 1rem; }
  .legal-hero h1 { font-size: 2.5rem; }
  .legal-body h2, .legal-body h3 { break-after: avoid; }
  .legal-table { overflow: visible; }
}