/* The 280px mist carries the sky into the next section. Its last 80px
   overlaps the page surface; the opaque endpoint follows the chosen theme.
   Scope specificity keeps these rules above the base carousel stylesheet. */
.lp .lp-hero { overflow: visible; isolation: isolate; }
.lp .lp-hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  left: 0;
  right: 0;
  bottom: -80px;
  height: 280px;
  background: linear-gradient(to bottom, transparent, var(--lp-bg) 72%, var(--lp-bg));
}
.lp .lp-product { position: relative; z-index: 2; padding-top: 100px; }
@media (max-width: 700px) { .lp .lp-product { padding-top: 90px; } }