/* Three document scroll stops drive one sticky viewport. No wheel/touch hijack. */
.how-scroll { position: relative; z-index: 1; height: 300vh; height: 300svh; background: #f9fafc; }
.how-stop { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; scroll-snap-stop: always; pointer-events: none; }
.how-stop:nth-child(1) { top: 0; }
.how-stop:nth-child(2) { top: 100vh; top: 100svh; }
.how-stop:nth-child(3) { top: 200vh; top: 200svh; }
.how-panel { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; padding: 152px 40px 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.how-heading { text-align: center; flex: none; }
.how-heading h2 { margin: 0; font-size: 48px; line-height: 56px; font-weight: 300; }
.how-heading p { margin: 22px 0 0; color: var(--gray); font-size: 20px; line-height: 28px; }
.how-layout { width: min(100%, 969px); min-height: 0; flex: none; display: grid; grid-template-columns: minmax(0, 464px) minmax(0, 368px); column-gap: 137px; align-items: center; margin-top: 24px; }
.how-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 50px; }
.how-step { opacity: .3; transition: opacity 350ms ease; }
.how-step.is-active { opacity: 1; }
.how-step h3 { margin: 0; color: #00aeef; font-size: 20px; line-height: 28px; font-weight: 600; }
.how-step p { margin: 10px 0 0; color: var(--black); font-size: 20px; line-height: 28px; }
.how-jug { position: relative; width: min(100%, 368px, max(240px, calc((100svh - 338px) * .67843))); aspect-ratio: 416 / 613.181; margin: 0; justify-self: center; }
.how-jug-shell { position: absolute; inset: 0; width: 100%; height: auto; }
.how-jug-water { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (min-width: 768px) {
  .how-jug { transform: scale(.9); }
  .how-steps { transform: translateY(-20px); }
  .how-step:not(:first-child) p { max-width: 446px; }
}
@media (max-width: 767px) {
  .how-scroll { height: auto; }
  .how-stop { display: none; }
  .how-panel { position: relative; top: auto; height: auto; min-height: 1015px; padding: 70px 23px 50px; justify-content: flex-start; }
  .how-heading h2 { font-size: 38px; line-height: 44px; }
  .how-heading p { max-width: 295px; margin: 16px auto 0; }
  .how-layout { flex: none; width: 100%; display: flex; flex-direction: column; gap: 44px; margin-top: 46px; }
  .how-jug { flex: none; order: -1; width: 200px; }
  .how-steps { width: min(100%, 306px); gap: 42px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .how-step { transition: none; } }