/* A connected, scroll-led explanation of the four NextHeading steps. */
#how.how-section{
  padding:90px 0 110px;
  border:0;
  background:linear-gradient(135deg,#DCEFEA 0%,#E9F2ED 48%,#F7F4EE 100%);
}
#how .how-heading{text-align:center;margin:0 auto 54px}
#how .how-heading .eyebrow{margin-bottom:24px}
#how .how-heading h2{
  margin:0;
  font-size:clamp(40px,4.1vw,58px);
  line-height:1.1;
  font-weight:700;
  letter-spacing:-.045em;
}
#how .how-sequence{
  position:relative;
  isolation:isolate;
  width:min(700px,100%);
  height:924px;
  margin:0 auto;
}
#how .how-connector{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  z-index:0;
  pointer-events:none;
}
#how .how-connector path{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
#how .how-path-glow{stroke:#279B8F33;stroke-width:5;filter:drop-shadow(0 0 7px #279B8F88)}
#how .how-path-track{stroke:#279B8F28;stroke-width:1.5}
#how .how-path-fill{stroke:#279B8F;stroke-width:3.5;filter:drop-shadow(0 0 8px #279B8FB0)}
#how .how-path-tip{
  fill:#279B8F;
  opacity:0;
  filter:drop-shadow(0 0 6px #279B8FBB);
}
#how .how-step{
  position:absolute;
  z-index:1;
  width:270px;
  height:270px;
  padding:25px;
  border:1px solid #B5DCD5;
  border-radius:24px;
  background:#fff;
  box-shadow:0 10px 28px #102A3508;
  color:#102A35;
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1),background-color .42s ease,border-color .42s ease,box-shadow .42s ease,color .42s ease;
}
#how .how-step[data-step="1"]{top:0;left:0}
#how .how-step[data-step="2"]{top:218px;right:0}
#how .how-step[data-step="3"]{top:436px;left:0}
#how .how-step[data-step="4"]{top:654px;right:0}
#how.how-enhanced .how-step{opacity:0;transform:translateY(28px) scale(.98)}
#how.how-enhanced .how-step.is-visible{opacity:1;transform:translateY(0) scale(1)}
#how .how-step .number{
  display:grid;
  place-items:center;
  width:50px;
  height:50px;
  margin:0 0 16px;
  border:1px solid #279B8F;
  border-radius:50%;
  background:#279B8F;
  color:#fff;
  font:30px/1 "Newsreader",serif;
  letter-spacing:0;
  transition:background-color .42s ease,border-color .42s ease,color .42s ease;
}
#how .how-step h3{
  margin:0 0 10px;
  color:inherit;
  font-size:21px;
  font-weight:700;
  line-height:1.16;
  letter-spacing:-.02em;
}
#how .how-step p{
  margin:0;
  color:#68787E;
  font-size:14px;
  line-height:1.35;
  transition:color .42s ease;
}
#how .how-step.is-active{
  border-color:#279B8F;
  background:#279B8F;
  box-shadow:0 16px 36px #279B8F30;
  color:#fff;
}
#how .how-step.is-active .number{border-color:#fff;background:transparent;color:#fff}
#how .how-step.is-active p{color:#F3FCF8}
@media(max-width:760px){
  #how.how-section{padding:72px 0 84px}
  #how .how-heading{margin-bottom:42px}
  #how .how-heading h2{font-size:clamp(35px,6vw,46px)}
  #how .how-sequence{
    display:grid;
    gap:24px;
    width:min(560px,100%);
    height:auto;
    padding-left:60px;
  }
  #how .how-step,
  #how .how-step[data-step]{
    position:relative;
    top:auto;
    right:auto;
    left:auto;
    width:100%;
    height:auto;
    min-height:225px;
  }
}
@media(max-width:430px){
  #how .how-heading h2{font-size:35px}
  #how .how-sequence{padding-left:48px;gap:20px}
  #how .how-step{padding:21px;min-height:0}
  #how .how-step .number{width:46px;height:46px;font-size:27px;margin-bottom:14px}
  #how .how-step h3{font-size:20px}
}
@media(prefers-reduced-motion:reduce){
  #how .how-step,#how .how-step .number,#how .how-step p{transition:none!important}
  #how.how-enhanced .how-step{opacity:1;transform:none}
  #how .how-path-glow,#how .how-path-fill,#how .how-path-tip{filter:none}
}