.legal-page {
  background: var(--color-canvas-cream);
}

.legal-hero {
  padding-block: var(--space-8) var(--space-7);
}

.legal-hero__container {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  min-width: 0;
  overflow: hidden;
  padding: clamp(3.5rem, 6vw, 4.5rem);
  border-radius: var(--radius-hero);
  background: var(--color-navy-surface);
  color: var(--color-on-dark);
  isolation: isolate;
}

.legal-hero__identity,
.legal-hero__moon,
.legal-orientation__index,
.legal-reading-key,
.legal-distinction__definitions > div {
  min-width: 0;
}

.legal-hero__identity {
  display: flex;
  grid-column: 1;
  width: 100%;
  max-width: 45rem;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.legal-hero__identity > :is(h1, p) {
  margin: 0;
}

.legal-hero h1 {
  color: var(--color-on-dark);
}

.legal-hero__eyebrow,
.legal-hero__date {
  color: var(--color-on-dark-muted);
}

.legal-hero__lead {
  max-width: 52ch;
  font-size: var(--text-18);
  line-height: 1.61;
}

.legal-hero a {
  color: var(--color-on-dark);
}

.legal-hero__date {
  font-size: var(--text-14);
  font-variant-numeric: tabular-nums;
  line-height: 1.43;
}

.legal-hero__date span {
  display: inline-block;
  margin-inline-end: var(--space-2);
  color: var(--color-gold-soft);
}

.legal-hero__independence {
  display: flex;
  width: min(100%, 42.5rem);
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--color-moon-blue);
  border-radius: var(--radius-card);
  background: var(--color-moon-blue-soft);
  color: var(--color-ink-night);
}

.legal-hero__independence > p {
  margin: 0;
  max-width: 62ch;
}

.legal-hero__independence .eyebrow {
  color: var(--color-ink-muted);
}

.legal-hero__moon {
  position: relative;
  grid-column: 2;
  width: 100%;
  min-height: 100%;
}

.legal-hero__moon::before,
.legal-hero__moon::after {
  position: absolute;
  content: "";
  border-radius: 50%;
  pointer-events: none;
}

.legal-hero__moon::before {
  width: clamp(13rem, 21vw, 19rem);
  aspect-ratio: 1;
  inset: 7% 2% auto auto;
  border: clamp(1.5rem, 3vw, 2.5rem) solid rgb(220 234 247 / 8%);
}

.legal-hero__moon::after {
  width: 0.5rem;
  aspect-ratio: 1;
  inset: auto 22% 24% auto;
  background: rgb(220 234 247 / 8%);
  box-shadow: -4rem -2.5rem 0 0 rgb(220 234 247 / 8%), -8rem 4rem 0 0 rgb(220 234 247 / 8%);
}

.legal-orientation {
  padding-block-start: var(--space-7);
}

.legal-orientation__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(22.5rem, 1fr);
  align-items: start;
  gap: var(--space-6);
}

.legal-orientation__index {
  grid-column: 1;
  width: 100%;
  max-width: 56.25rem;
}

.legal-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-6);
  margin: 0;
  padding-inline-start: 1.5rem;
}

.legal-index li {
  min-width: 0;
  padding-inline-start: var(--space-1);
}

.legal-index a {
  display: block;
  min-height: 2.75rem;
  padding-block: var(--space-2);
}

.legal-reading-key {
  display: flex;
  grid-column: 2;
  width: 100%;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--color-moon-blue);
  border-radius: var(--radius-panel);
  background: var(--color-moon-blue-soft);
}

.legal-reading-key > :is(p, h2, dl) {
  margin: 0;
}

.legal-reading-key dl {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.legal-reading-key dt,
.legal-reading-key dd {
  margin: 0;
}

.legal-reading-key dd {
  padding-block-end: var(--space-2);
  color: var(--color-ink-muted);
  font-size: var(--text-14);
  line-height: 1.43;
}

.legal-section {
  scroll-margin-top: 6rem;
}

.legal-copy {
  width: 100%;
  max-width: 45rem;
  margin-inline: auto;
}

.legal-copy > .eyebrow {
  margin-block-end: var(--space-2);
}

.legal-copy > h2 {
  margin-block-end: var(--space-6);
}

.legal-clause {
  width: 100%;
  max-width: 72ch;
}

.legal-clause + .legal-clause,
.legal-clause + aside,
.legal-copy > aside + .legal-clause {
  margin-block-start: var(--space-6);
}

.legal-clause--support {
  padding-inline-start: var(--space-5);
  border-inline-start: 3px solid var(--color-combat-coral);
}

.legal-distinction,
.legal-change-note,
.legal-play-note,
.legal-recommendation,
.legal-store-note,
.legal-data-note,
.legal-contact-panel {
  display: flex;
  width: 100%;
  max-width: 45rem;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-5);
  border-radius: var(--radius-panel);
}

.legal-distinction > :is(p, h3),
.legal-change-note > :is(p, h3),
.legal-play-note > :is(p, h3),
.legal-recommendation > :is(p, h3),
.legal-store-note > :is(p, h3),
.legal-data-note > :is(p, h3),
.legal-contact-panel > :is(p, h3) {
  margin: 0;
}

.legal-distinction,
.legal-change-note,
.legal-play-note,
.legal-recommendation,
.legal-store-note,
.legal-data-note {
  margin-block-start: var(--space-6);
}

.legal-distinction__definitions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.legal-distinction__definitions > div {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--space-1);
}

.legal-distinction__definitions span {
  color: var(--color-ink-muted);
  font-size: var(--text-14);
  line-height: 1.43;
}

.legal-change-note {
  border: 1px solid var(--color-combat-coral);
  background: var(--color-coral-soft);
}

.legal-play-note,
.legal-data-note {
  border: 1px solid var(--color-moon-blue);
  background: var(--color-moon-blue-soft);
}

.legal-recommendation,
.legal-distinction {
  border: 1px solid var(--color-mint);
  background: var(--color-mint-soft);
}

.legal-store-note {
  border: 1px solid var(--color-legendary-gold);
  background: var(--color-gold-soft);
}

.legal-data-note ul,
.legal-clause ul {
  margin: 0;
}

.legal-data-note p:last-child,
.legal-change-note p:last-child,
.legal-play-note p:last-child,
.legal-recommendation p:last-child,
.legal-store-note p:last-child,
.legal-distinction p:last-child {
  margin-block-end: 0;
}

.legal-reference-label {
  margin-block-end: var(--space-3);
}

.legal-clause--separated {
  padding-block-start: var(--space-6);
  border-block-start: var(--border-default);
}

.legal-rights-note {
  display: flex;
  width: 100%;
  max-width: 38.75rem;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-start: var(--space-6);
  padding: var(--space-4) 0 0;
  border-block-start: var(--border-default);
}

.legal-rights-note > :is(h3, p) {
  margin: 0;
}

.legal-external-mark {
  margin-inline-end: var(--space-1);
  color: var(--color-moon-blue);
  font-weight: var(--weight-bold);
}

.legal-rules {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.legal-rules li {
  padding-inline-start: var(--space-1);
}

.legal-section--final {
  padding-block-end: var(--space-10);
}

.legal-clause--closing {
  padding-block-end: var(--space-6);
  border-block-end: var(--border-default);
}

.legal-contact-panel {
  max-width: 38.75rem;
  margin-block-start: var(--space-6);
  border: var(--border-default);
  background: var(--color-surface-white);
  box-shadow: var(--shadow-elevated);
}

@media (max-width: 56.25rem) {
  .legal-orientation__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-orientation__index,
  .legal-reading-key {
    grid-column: 1;
  }

  .legal-reading-key {
    max-width: 42.5rem;
  }
}

@media (max-width: 51.1875rem) {
  .legal-hero__container {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-5);
  }

  .legal-hero__identity {
    grid-column: 1;
  }

  .legal-hero__moon {
    display: none;
  }
}

@media (max-width: 48rem) {
  .legal-hero {
    padding-block: var(--space-6) var(--space-5);
  }

  .legal-hero h1 {
    font-size: 2.375rem;
    line-height: 1.1;
  }

  .legal-hero__lead {
    font-size: var(--text-18);
    line-height: 1.61;
  }

  .legal-hero__independence,
  .legal-reading-key,
  .legal-distinction,
  .legal-change-note,
  .legal-play-note,
  .legal-recommendation,
  .legal-store-note,
  .legal-data-note,
  .legal-contact-panel {
    padding: var(--space-4);
  }

  .legal-index {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }

  .legal-distinction__definitions {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .legal-clause--support {
    padding-block-start: var(--space-4);
    padding-inline-start: 0;
    border-block-start: 3px solid var(--color-combat-coral);
    border-inline-start: 0;
  }
}

@media (max-width: 24.375rem) {
  .legal-hero__container {
    padding: var(--space-4);
  }

  .legal-hero__identity {
    gap: var(--space-3);
  }

  .legal-hero__independence {
    padding: var(--space-3);
  }
}