/* Scroll stepper (Duvo-style): steps scroll on the left, one sticky stage on the right shows the
   active pane. Built by stepper.js from an existing block list at >= 992px; below that the
   original stacked layout stays. */
.lpStep {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  column-gap: 40px;
  align-items: start;
}
.lpStep .lpStep__steps {
  min-width: 0;
}
.lpStep .lpStep__steps > div {
  min-height: 72vh;
  display: grid;
  align-content: center;
}
.lpStep .lpStep__steps > div > ._2row {
  grid-template-columns: 1fr;
  padding-left: 0;
  padding-right: 0;
}
.lpStep .lpStep__steps a.button-v2-main {
  white-space: nowrap;
}
.lpStep .lpStep__steps h3.dark {
  font-size: var(--fs-heading-s);
}
.lpStep .lpStep__steps > div .flex-v-20 {
  transition: opacity 0.35s var(--ease);
}
.lpStep .lpStep__steps > div:not(.is-active) .flex-v-20 {
  opacity: 0.38;
}
.lpStep .lpStep__stage {
  position: sticky;
  top: calc(50vh - var(--lpStep-h, 560px) / 2);
  display: grid;
  min-width: 0;
  padding: 24px 0;
}
.lpStep .lpStep__stage > .lphp-frame {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  pointer-events: none;
}
.lpStep .lpStep__stage > .lphp-frame.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .lpStep .lpStep__stage > .lphp-frame,
  .lpStep .lpStep__steps > div .flex-v-20 {
    transition: none;
  }
}
@media (max-width: 991px) {
  .lpStep {
    display: block;
  }
  .lpStep .lpStep__steps > div {
    min-height: 0;
    display: block;
  }
  .lpStep .lpStep__steps > div .flex-v-20 {
    opacity: 1;
  }
  .lpStep .lpStep__stage {
    position: static;
    display: block;
    padding: 0;
  }
  .lpStep .lpStep__stage > .lphp-frame {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    margin: 24px 0;
  }
}