/* Layout and detail refinements introduced in v9. */
.hero {
  grid-template-columns: minmax(0, 1fr) minmax(300px, .92fr);
  gap: clamp(56px, 5vw, 84px);
}

.hero-copy {
  padding-right: clamp(8px, 1.2vw, 20px);
}

.section,
.plan {
  align-items: start;
}

.section-number {
  align-self: start;
}

.quote-card {
  align-items: flex-start;
  flex-direction: column;
  padding-top: 54px;
}

.quote-card span {
  position: static;
  display: block;
  height: 44px;
  margin: 0 0 14px;
  font-size: 76px;
  line-height: .72;
  color: rgba(183, 38, 24, .32);
  opacity: 1;
}

.quote-card p {
  margin: 0;
}

.quote-card.dark span {
  color: #fff;
  opacity: .9;
}

.mock-plan {
  margin-top: 28px;
}

@media (max-width: 1120px) and (min-width: 801px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(260px, .68fr);
    gap: 58px;
  }

  .hero-copy {
    padding-right: 10px;
  }
}

@media (max-width: 800px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 55px;
  }

  .hero-copy {
    padding-right: 0;
  }

  .quote-card {
    padding-top: 48px;
  }

  .quote-card span {
    height: 40px;
    margin-bottom: 12px;
    font-size: 70px;
  }

  .mock-plan {
    margin-top: 40px;
  }

}