#how-it-works {
  position: relative;
  --calling-purple: #ae82df;
}

#how-it-works.is-enhanced { height: 260svh; }

#how-it-works .hiw-stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  padding-block: 48px;
}

#how-it-works.is-enhanced .hiw-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  padding-block: 28px;
}

#how-it-works .platform-heading {
  margin: 0;
  padding-inline: 24px;
  text-align: center;
  color: #e5c77f;
  font: 400 clamp(28px, 4vw, 48px)/1.12 "Cormorant Garamond", Georgia, serif;
  text-wrap: balance;
}

#how-it-works .platform-heading span { display: block; }

#how-it-works .school-hiw-offer {
  background: radial-gradient(ellipse at center, rgba(139, 92, 246, .13), transparent 75%);
}

#how-it-works .school-hiw-focus { gap: 0; margin: 0; }

#how-it-works .school-hiw-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 50px;
  padding: 24px clamp(12px, 1.5vw, 22px);
}

#how-it-works .school-hiw-area + .school-hiw-area {
  border-left: 1px solid rgba(255, 255, 255, .07);
}

#how-it-works .school-hiw-figure {
  flex: none;
  height: clamp(145px, 24svh, 240px);
}

#how-it-works .inst-anim {
  width: 100%;
  height: 100%;
  transform: scale(1.35);
  opacity: .84;
}

#how-it-works .school-hiw-area-title {
  margin: 0;
  color: rgba(255, 255, 255, .95);
  font: 400 var(--lc-6, 34px)/1.12 "Cormorant Garamond", Georgia, serif;
  text-wrap: balance;
}

#how-it-works .inst-anim :is(.spoke, .seg, .rad-seg, .ring, .corec) {
  stroke: var(--calling-purple);
}

#how-it-works .inst-cross .ring { animation-name: calling-rings; }

@keyframes calling-rings {
  0% { transform: scale(1); opacity: 0; }
  8% { opacity: .34; }
  83%, 100% { transform: scale(5.6); opacity: 0; }
}

#how-it-works:not(.is-in-view) .inst-anim * { animation-play-state: paused; }

@media (min-width: 769px) and (max-width: 1023px) {
  #how-it-works .school-hiw-focus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #how-it-works .school-hiw-area:nth-child(odd) { border-left: 0; }
}

@media (max-width: 768px) {
  #how-it-works .school-hiw-focus { grid-template-columns: minmax(0, 1fr); }
  #how-it-works .school-hiw-area + .school-hiw-area { border-left: 0; }
  #how-it-works .school-hiw-figure { height: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  #how-it-works .inst-cross .ring { opacity: .25; transform: none; }
}