.terms-page {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background-color: var(--color-space-canvas);
  overflow-wrap: anywhere;
}

.terms-page::before,
.terms-page::after {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  content: "";
}

.terms-page::before {
  inset: 0;
  opacity: 0.3;
  background-image:
    radial-gradient(circle at 13% 10%, rgba(195, 199, 219, 0.42) 0 1px, transparent 1.4px),
    radial-gradient(circle at 77% 18%, rgba(168, 85, 247, 0.3) 0 1px, transparent 1.5px),
    radial-gradient(circle at 52% 43%, rgba(195, 199, 219, 0.26) 0 1px, transparent 1.2px),
    linear-gradient(to bottom, rgba(195, 199, 219, 0.035) 1px, transparent 1px);
  background-size: 184px 184px, 247px 247px, 311px 311px, 100% 6px;
}

.terms-page::after {
  top: 9rem;
  right: -14rem;
  width: 35rem;
  height: 35rem;
  border: 1px solid rgba(85, 80, 109, 0.42);
  box-shadow: inset 0 0 0 3rem rgba(31, 27, 44, 0.1);
  transform: rotate(45deg);
}

.terms-page .container {
  position: relative;
}

.terms-hero {
  position: relative;
  padding-block: var(--space-9) var(--space-8);
}

.terms-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(20rem, 1fr);
  align-items: start;
  gap: var(--space-8);
}

.terms-hero__grid > * {
  min-width: 0;
}

.terms-hero__copy {
  width: 100%;
  min-width: 0;
  max-width: 45rem;
}

.terms-index,
.terms-section__heading {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: var(--space-3);
}

.terms-index {
  margin-bottom: var(--space-4);
  color: var(--color-muted-silver);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: var(--leading-meta);
  text-transform: uppercase;
}

.terms-index span,
.terms-section__heading span {
  flex: 0 0 auto;
  min-width: 0;
}

.terms-index i,
.terms-section__heading i {
  display: block;
  flex: 1 1 auto;
  min-width: 1.5rem;
  height: 1px;
  background: var(--color-frame-line);
}

.terms-hero__copy > .eyebrow {
  margin: 0 0 var(--space-3);
}

.terms-hero__copy h1 {
  max-width: 43rem;
  margin-bottom: var(--space-5);
}

.terms-hero__lead {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  max-width: 43.75rem;
  gap: var(--space-4);
}

.terms-hero__lead > * {
  min-width: 0;
  margin: 0;
}

.terms-status {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  max-width: 23.75rem;
  justify-self: end;
  gap: var(--space-4);
}

.terms-status__heading,
.terms-status__body {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  gap: var(--space-3);
}

.terms-status__signal {
  width: 0.75rem;
  height: 0.75rem;
  border: 1px solid var(--color-alien-violet);
  background: var(--color-violet-deep);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}

.terms-status h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2.3vw, 1.65rem);
}

.terms-status__body > * {
  min-width: 0;
  margin: 0;
  font-size: var(--text-small);
  line-height: 1.55;
}

.terms-section {
  position: relative;
  padding-block: var(--space-8);
}

.terms-section + .terms-section::before {
  position: absolute;
  top: 0;
  left: max(var(--container-padding), calc((100% - var(--container-max)) / 2));
  width: min(12rem, 22vw);
  height: 1px;
  background: rgba(85, 80, 109, 0.75);
  content: "";
}

.terms-section__grid {
  display: grid;
  align-items: start;
  width: 100%;
  min-width: 0;
}

.terms-section__grid > * {
  min-width: 0;
}

.terms-section__grid--usage {
  grid-template-columns: minmax(0, 7fr) minmax(18.75rem, 5fr);
  gap: var(--space-8);
}

.terms-reading {
  width: 100%;
  min-width: 0;
}

.terms-reading--acceptance {
  max-width: 42.5rem;
}

.terms-reading--editorial {
  max-width: 42.5rem;
}

.terms-reading--limits,
.terms-reading--copyright,
.terms-reading--changes {
  max-width: 43.75rem;
}

.terms-reading--external {
  max-width: 38.75rem;
}

.terms-reading--review {
  max-width: 42.5rem;
}

.terms-section__heading {
  margin-bottom: var(--space-3);
}

.terms-reading h2 {
  margin-bottom: var(--space-4);
}

.terms-reading > :last-child {
  margin-bottom: 0;
}

.terms-note {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  max-width: 24.375rem;
  justify-self: end;
  gap: var(--space-3);
}

.terms-note__label {
  width: 100%;
  min-width: 0;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-frame-line);
}

.terms-note h3,
.terms-note .terms-marker-list {
  margin: 0;
}

.terms-marker-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  padding: 0;
  gap: var(--space-3);
}

.terms-marker-list > li {
  position: relative;
  width: 100%;
  min-width: 0;
  padding-left: 1.25rem;
  color: var(--color-steel-silver);
  font-size: var(--text-small);
  line-height: 1.55;
}

.terms-marker-list > li::before {
  position: absolute;
  top: 0.48em;
  left: 0;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid var(--color-frame-line);
  background: var(--color-space-canvas);
  content: "";
}

.terms-topic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  min-width: 0;
  margin-top: var(--space-7);
  gap: var(--space-5);
}

.terms-topic-grid > * {
  min-width: 0;
}

.terms-topic {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  padding: var(--space-5);
  gap: var(--space-3);
  background: rgba(31, 27, 44, 0.52);
}

.terms-topic h3,
.terms-topic p {
  margin: 0;
}

.terms-topic p {
  color: var(--color-muted-silver);
  font-size: var(--text-small);
  line-height: 1.6;
}

.terms-caution {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  max-width: 28.75rem;
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px solid rgba(213, 168, 75, 0.72);
  background: rgba(31, 27, 44, 0.76);
  gap: var(--space-3);
}

.terms-caution__label {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: var(--space-2);
}

.terms-caution__mark {
  flex: 0 0 auto;
  width: 0.625rem;
  height: 0.625rem;
  background: var(--color-warning-amber);
}

.terms-caution h3,
.terms-caution p {
  margin: 0;
}

.terms-caution p {
  font-size: var(--text-small);
  line-height: 1.6;
}

.terms-link-record {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  max-width: 47.5rem;
  margin-top: var(--space-6);
}

.terms-link-record__content,
.terms-closing-record__content {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-4);
}

.terms-link-record__content h3,
.terms-link-record__content p,
.terms-closing-record__content p {
  margin: 0;
}

.terms-link-record__content .muted {
  max-width: 41rem;
  font-size: var(--text-small);
  line-height: 1.6;
}

.terms-play-button {
  width: auto;
  max-width: 100%;
}

.terms-use-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 5fr);
  width: min(100%, 56.25rem);
  min-width: 0;
  margin-top: var(--space-7);
  column-gap: calc(var(--space-6) * 2);
  row-gap: var(--space-5);
}

.terms-use-grid > * {
  min-width: 0;
}

.terms-use-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  align-self: start;
  gap: var(--space-3);
}

.terms-use-panel h3,
.terms-use-panel p,
.terms-use-panel .terms-marker-list {
  margin: 0;
}

.terms-use-panel p {
  font-size: var(--text-small);
  line-height: 1.6;
}

.terms-use-panel__warning {
  color: var(--color-warning-amber);
}

.terms-review-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 1fr));
  width: min(100%, 52.5rem);
  min-width: 0;
  margin-top: var(--space-7);
  background: rgba(31, 27, 44, 0.5);
}

.terms-review-strip > * {
  min-width: 0;
}

.terms-review-strip__intro,
.terms-review-step {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  padding: var(--space-4);
  gap: var(--space-3);
}

.terms-review-strip__intro {
  justify-content: center;
  border-right: 1px solid var(--color-frame-line);
}

.terms-review-step {
  border-right: 1px solid var(--color-frame-line);
}

.terms-review-step:last-child {
  border-right: 0;
}

.terms-review-step__number {
  color: var(--color-alien-violet);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  letter-spacing: 0.08em;
  line-height: var(--leading-meta);
}

.terms-review-step h3,
.terms-review-step p {
  margin: 0;
}

.terms-review-step h3 {
  font-size: 1.05rem;
}

.terms-review-step p {
  color: var(--color-muted-silver);
  font-size: var(--text-caption);
  line-height: 1.55;
}

.terms-section--closing {
  padding-bottom: var(--space-8);
}

.terms-closing-record {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  max-width: 38.75rem;
  margin-top: var(--space-6);
}

.terms-closing-record__content p {
  max-width: 34rem;
}

@media (max-width: 62rem) {
  .terms-hero__grid {
    gap: var(--space-6);
  }

  .terms-section__grid--usage {
    gap: var(--space-6);
  }

  .terms-topic-grid {
    gap: var(--space-4);
  }
}

@media (max-width: 56.25rem) {
  .terms-hero {
    padding-block: var(--space-8) var(--space-7);
  }

  .terms-hero__grid,
  .terms-section__grid--usage {
    grid-template-columns: minmax(0, 1fr);
  }

  .terms-hero__grid {
    gap: var(--space-5);
  }

  .terms-section__grid--usage {
    gap: var(--space-5);
  }

  .terms-status,
  .terms-note {
    max-width: none;
    justify-self: stretch;
  }

  .terms-topic-grid {
    grid-template-columns: minmax(0, 1fr);
    margin-top: var(--space-6);
  }

  .terms-use-grid {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    margin-top: var(--space-6);
    gap: var(--space-5);
  }

  .terms-review-strip {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    margin-top: var(--space-6);
  }

  .terms-review-strip__intro,
  .terms-review-step {
    border-right: 0;
    border-bottom: 1px solid var(--color-frame-line);
  }

  .terms-review-step:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 40rem) {
  .terms-page::after {
    top: 4rem;
    right: -20rem;
    opacity: 0.45;
  }

  .terms-hero {
    padding-block: var(--space-7) var(--space-6);
  }

  .terms-hero__copy h1 {
    font-size: clamp(2.125rem, 10vw, 2.5rem);
  }

  .terms-section {
    padding-block: var(--space-6);
  }

  .terms-section + .terms-section::before {
    left: var(--container-padding-mobile);
  }

  .terms-status,
  .terms-note,
  .terms-caution,
  .terms-link-record,
  .terms-closing-record {
    padding: var(--space-4);
  }

  .terms-topic {
    padding: var(--space-4);
  }

  .terms-caution {
    max-width: none;
  }

  .terms-play-button {
    width: 100%;
    min-height: 3rem;
    padding-inline: var(--space-3);
    white-space: nowrap;
  }

  .terms-section--closing {
    padding-bottom: var(--space-7);
  }
}

@media (prefers-reduced-motion: reduce) {
  .terms-page::before,
  .terms-page::after {
    animation: none;
  }
}
