body {
  background: radial-gradient(circle at top left, rgba(226, 239, 255, 0.8), transparent 55%),
              radial-gradient(circle at bottom right, rgba(219, 234, 254, 0.9), #f6f9fc 65%);
}

.hero--home {
  position: relative;
}

.hero-grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 768px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }
}

.hero-content {
  max-width: 36rem;
}

.hero-search {
  margin-top: var(--space-5);
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.hero-search__input {
  flex: 1 1 14rem;
  min-width: 0;
}

.hero-search__button {
  flex-shrink: 0;
}

.hero-cta-group {
  margin-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero-chips {
  margin-top: var(--space-5);
}

.hero-media {
  max-width: 28rem;
  justify-self: center;
}

.hero-figure,
.teacher-figure {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.section-header {
  margin-bottom: var(--space-6);
}

.section-header--center {
  text-align: center;
}

.section-lead {
  color: var(--color-text-muted);
  max-width: 40rem;
}

.section-header--center .section-lead {
  margin-inline: auto;
}

.cards-grid {
  margin-top: var(--space-4);
}

.card--compact {
  padding: var(--space-5);
}

.card--quote {
  position: relative;
}

.card--quote::before {
  content: "\201C";
  position: absolute;
  top: 0.5rem;
  left: 1.1rem;
  font-size: 3.5rem;
  color: var(--color-primary-soft);
  line-height: 1;
}

.card--quote p:first-child {
  padding-top: var(--space-4);
}

.card-quote-meta {
  color: var(--color-text-muted);
}

.card-footer--align {
  align-items: center;
}

.section-alt {
  background-color: rgba(255, 255, 255, 0.72);
}

.teacher-grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 768px) {
  .teacher-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

.teacher-media {
  max-width: 26rem;
  justify-self: center;
}

.teacher-cards {
  margin-top: var(--space-4);
}

.teacher-cta {
  margin-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.formats-grid {
  margin-top: var(--space-4);
}

.enrollment-grid {
  display: grid;
  gap: var(--space-8);
  align-items: flex-start;
}

@media (min-width: 960px) {
  .enrollment-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }
}

.enrollment-steps {
  padding-left: 1.5rem;
  counter-reset: enrollment;
}

.enrollment-steps > li {
  margin-bottom: var(--space-4);
}

.enrollment-steps > li h3 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-2);
}

.enrollment-steps > li a {
  font-size: var(--font-size-sm);
}

.enrollment-aside {
  position: sticky;
  top: var(--space-8);
}

@media (max-width: 768px) {
  .enrollment-aside {
    position: static;
  }
}

.updates-grid {
  display: grid;
  gap: var(--space-8);
  align-items: flex-start;
}

@media (min-width: 960px) {
  .updates-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }
}

.updates-list {
  display: grid;
  gap: var(--space-4);
}

.update-item h3 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-2);
}

.resources-aside ul {
  list-style: none;
  padding-left: 0;
}

.resources-aside li + li {
  margin-top: 0.5rem;
}

.section-faq {
  padding-bottom: var(--space-20);
}

.faq-grid {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 960px) {
  .faq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.faq-item {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.faq-item h3 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-2);
}

.faq-item a {
  font-size: var(--font-size-sm);
}

.faq-column {
  display: grid;
  gap: var(--space-4);
}

@media (max-width: 600px) {
  .hero-search {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-search__button {
    width: 100%;
  }

  .hero-cta-group {
    flex-direction: column;
    align-items: stretch;
  }
}