.engagements {
  --engagements-rail-offset: clamp(218px, 24svh, 270px);
  display: grid;
  grid-template-columns: minmax(330px, .56fr) minmax(620px, 1fr);
  column-gap: clamp(34px, 3.4vw, 64px);
  align-items: start;
  padding-top: clamp(120px, 10vw, 168px);
  padding-bottom: clamp(112px, 9vw, 152px);
  background: #edede7;
  color: #111;
}

.engagements-intro {
  position: sticky;
  top: var(--engagements-rail-offset);
  z-index: 1;
  grid-column: 1;
  align-self: start;
}

.engagements-intro h2 {
  max-width: 12ch;
  margin: 0;
  font-size: var(--type-section-size);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--type-section-line);
  text-wrap: balance;
}

.engagements-content {
  display: grid;
  grid-column: 2;
  gap: clamp(76px, 7vw, 112px);
  min-width: 0;
}

.engagements-pricing-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 3vw, 52px);
  align-items: end;
}

.engagements-intro-copy {
  max-width: 52ch;
  margin: 0;
  color: #55554f;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
}

.subscription-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  gap: clamp(28px, 3vw, 52px);
  row-gap: 0;
  align-items: stretch;
}

.subscription-tier {
  display: grid;
  min-width: 0;
  min-height: clamp(430px, 34vw, 520px);
  grid-row: 1 / span 5;
  grid-template-rows: subgrid;
  align-items: start;
}

.subscription-tier h3 {
  max-width: 15ch;
  margin: 0;
  font-size: var(--type-subheading-size);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--type-subheading-line);
  text-wrap: balance;
}

.subscription-tier__price {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: .3em;
  align-items: end;
  margin: clamp(26px, 2.4vw, 38px) 0 0;
  color: #55554f;
  font-size: var(--type-detail-size);
  line-height: var(--type-detail-line);
}

.subscription-tier__price > span:first-child {
  grid-column: 1 / -1;
  margin-bottom: 7px;
}

.subscription-tier__price strong {
  grid-column: 1;
  grid-row: 2;
  color: #111;
  font-size: clamp(2.65rem, 3.25vw, 4.25rem);
  font-weight: var(--weight-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.05em;
  line-height: .92;
  white-space: nowrap;
}

.subscription-tier__price > span:last-child {
  grid-column: 2;
  grid-row: 2;
  margin-bottom: .16em;
}

.subscription-tier__summary {
  max-width: 31ch;
  margin: clamp(30px, 2.8vw, 42px) 0 0;
  color: #222;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
}

.subscription-tier__features {
  display: grid;
  max-width: 32ch;
  gap: 10px;
  margin: clamp(22px, 2vw, 30px) 0 0;
  padding: 0;
  color: #5d5d57;
  font-size: var(--type-detail-size);
  line-height: var(--type-detail-line);
  list-style: none;
}

.subscription-tier__release {
  max-width: 28ch;
  margin: 0;
  padding-top: clamp(30px, 3.5vw, 48px);
  color: #111;
  font-size: var(--type-detail-size);
  font-weight: var(--weight-emphasis);
  line-height: var(--type-detail-line);
}

@media (min-width: 1081px) and (prefers-reduced-motion: no-preference) {
  .subscription-tier.reveal:nth-child(2) {
    transition-delay: 80ms;
  }

  .subscription-tier.reveal:nth-child(3) {
    transition-delay: 160ms;
  }
}

.subscription-terms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 52px);
  align-items: start;
}

.subscription-terms p {
  max-width: 56ch;
  margin: 0;
  color: #55554f;
  font-size: var(--type-detail-size);
  line-height: var(--type-detail-line);
}

.subscription-terms p:first-child {
  grid-column: 1 / 3;
  color: #222;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
}

@media (max-width: 1200px) {
  .subscription-tiers {
    gap: clamp(22px, 2.2vw, 34px);
  }

  .subscription-tier__price strong {
    font-size: clamp(2.35rem, 3.65vw, 3.15rem);
  }

  .subscription-terms {
    gap: clamp(22px, 2.2vw, 34px);
  }
}

@media (max-width: 1080px) {
  .engagements {
    grid-template-columns: 1fr;
    gap: clamp(64px, 10vw, 88px);
    padding-top: clamp(96px, 14vw, 128px);
    padding-bottom: clamp(88px, 13vw, 116px);
  }

  .engagements-intro {
    position: static;
    grid-column: 1;
  }

  .engagements-content {
    grid-column: 1;
    gap: clamp(64px, 10vw, 88px);
  }

  .engagements-intro-copy {
    max-width: 46ch;
  }

  .engagements-pricing-intro {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .subscription-tiers {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: clamp(72px, 13vw, 104px);
  }

  .subscription-tier {
    min-height: 0;
    grid-row: auto;
    grid-template-rows: auto;
  }

  .subscription-tier__price strong {
    font-size: clamp(3.1rem, 13vw, 4.6rem);
  }

  .subscription-tier__release {
    margin-top: clamp(32px, 7vw, 48px);
    padding-top: 0;
  }

  .subscription-terms {
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 48ch;
  }

  .subscription-terms p:first-child {
    grid-column: 1;
  }
}

@media (max-width: 520px) {
  .engagements-intro h2 {
    max-width: 11ch;
  }
}