/**
 * Landing mock stability — stage heights, shadow bleed, inner screen clip only.
 */

.landing-page {
  --lm-mock-bleed-y: clamp(1rem, 2.75vw, 2rem);
  --lm-mock-bleed-x: clamp(1.15rem, 3.25vw, 2.35rem);
  --lm-mock-bleed-lg: clamp(1.5rem, 4vw, 3rem);
  overflow-x: clip;
  max-width: 100%;
}

/* Decorative scroll floats removed — mocks live only inside their sections */
.landing-page .lm-safari-float-layer,
.landing-page .lm-fly-layer {
  display: none !important;
}

.landing-section.landing-panel {
  position: relative;
  z-index: 1;
}

.landing-main {
  overflow-x: clip;
  max-width: 100%;
}

/* Snap panels — mock sections keep shadow bleed; others clip decorative overflow */
.landing-page--snap .landing-panel {
  overflow: clip;
}

.landing-page--snap .landing-panel--hero,
.landing-page--snap .landing-flow-strip.landing-panel,
.landing-page--snap .landing-order-live.landing-panel,
.landing-page--snap .section-demo.landing-panel,
.landing-page--snap .section-ai-ala.landing-panel,
.landing-page--snap .section-ai-home.landing-panel,
.landing-page--snap .section-setup-concierge.landing-panel {
  overflow: visible;
}

.landing-page--snap .landing-flow-strip.landing-panel {
  overflow: visible;
  min-height: auto;
  padding-block: clamp(2.25rem, 6vh, 4rem);
}

/* —— Flow strip —— */
.landing-flow-strip {
  --lm-flow-phone-h: calc(var(--lm-flow-phone-w, 16rem) * 19.5 / 9);
}

.landing-flow-safari-col,
.landing-flow-visual,
.landing-flow-orbit {
  overflow: visible;
  max-width: 100%;
}

.landing-flow-orbit {
  --lm-flow-orbit-pad-y: clamp(1.65rem, 3.5vw, 2.35rem);
  --lm-flow-orbit-pad-x: clamp(2rem, 4.5vw, 2.85rem);
  min-height: calc(var(--lm-flow-phone-h) + var(--lm-flow-orbit-pad-y) * 2);
  padding-block: var(--lm-flow-orbit-pad-y);
  padding-inline: var(--lm-flow-orbit-pad-x);
}

.landing-flow-safari,
.landing-flow-safari__stage,
.landing-flow-safari .lm-mock-tilt__inner,
.landing-flow-visual,
.landing-flow-safari-col {
  overflow: visible;
}
.landing-flow-floats,
.landing-flow-float {
  display: none !important;
}

.landing-flow-screens {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

/* Fill the ala phone shell — full 9:19.5 screen for browse / checkout / WhatsApp */
.lm-ala-phone__screen .landing-flow-screens {
  flex: 1 1 auto;
  min-height: 100%;
  height: 100%;
  max-height: none;
}

.landing-flow-safari__phone .lm-ala-phone__shell {
  display: flex;
  flex-direction: column;
}

.landing-flow-safari__phone .lm-ala-phone__screen {
  flex: 1 1 auto;
  height: auto;
}

.landing-flow-safari__phone .landing-flow-screens,
.landing-flow-safari__phone .landing-flow-screen,
.landing-flow-safari__phone .landing-flow-screen.is-active {
  height: 100%;
  min-height: 100%;
}

.landing-flow-safari__phone .landing-flow-screen > .sh-menu,
.landing-flow-safari__phone .landing-flow-screen > .lm-mock-fidelity--checkout,
.landing-flow-safari__phone .landing-flow-screen > .flow-wa {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.lm-ala-phone__screen .landing-flow-screens {
  position: relative;
}

.lm-ala-phone__screen .landing-flow-screen,
.lm-ala-phone__screen .landing-flow-screen.is-active,
.lm-ala-phone__screen .landing-flow-screen.is-entering,
.lm-ala-phone__screen .landing-flow-screen.is-exiting {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.lm-ala-phone__screen .landing-flow-screen > .flow-wa,
.lm-ala-phone__screen .landing-flow-screen > .sh-menu,
.lm-ala-phone__screen .landing-flow-screen > .lm-mock-fidelity--checkout {
  flex: 1 1 auto;
  height: 100%;
  min-height: 100%;
  max-height: none;
  overflow: hidden;
}

.landing-flow-screen .lm-mock-fidelity--checkout {
  display: flex;
  flex-direction: column;
  background: var(--store-background, #fff);
}

.landing-flow-screen .lm-mock-fidelity--checkout .sf-checkout-page,
.landing-flow-screen .lm-mock-fidelity--checkout .sf-main {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.landing-flow-screen .lm-mock-fidelity--checkout .sf-checkout-page::-webkit-scrollbar {
  display: none;
}

.landing-flow-screen .lm-mock-fidelity--checkout .lm-checkout {
  min-height: 100%;
  padding-bottom: 0.65rem;
}

.landing-flow-screen .sh-menu__scroll,
.landing-flow-screen .sh-menu__content {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
}

.landing-flow-screen {
  height: 100%;
  overflow: hidden;
}

.landing-flow-screen .flow-wa {
  height: 100%;
  min-height: 100%;
  max-height: none;
  overflow: hidden;
}

.landing-flow-screen .flow-wa__thread {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* —— Hero mock —— */
.hero-mock,
.hero-mock__canvas,
.hero-mock__orbit,
.hero-mock__stage,
.hero-mock__device,
.hero-mock__phone-wrap,
.hero-mock .lm-mock-tilt__inner,
.hero-mock .lm-ala-phone,
.landing-hero-visual {
  overflow: visible;
  max-width: 100%;
}

.hero-mock__orbit {
  --hero-orbit-pad-y: clamp(1.5rem, 3.5vw, 2.35rem);
  --hero-orbit-pad-x: clamp(2rem, 5vw, 3rem);
  min-height: calc(var(--hero-phone-w, 15rem) + var(--hero-orbit-pad-y) * 2);
  padding-block: var(--hero-orbit-pad-y);
  padding-inline: var(--hero-orbit-pad-x);
}

@media (min-width: 1024px) {
  .hero-mock__orbit {
    --hero-orbit-pad-y: clamp(1.25rem, 2.5vh, 1.85rem);
    --hero-orbit-pad-x: clamp(1.75rem, 3.5vw, 2.5rem);
  }
}

/* —— Setup WhatsApp mock —— */
.lm-setup-concierge__visual-wrap,
.lm-setup-concierge__visual,
.lm-setup-concierge__visual .lm-mock-tilt__inner,
.lm-setup-wa-phone,
.lm-setup-wa-phone .lm-ala-phone {
  overflow: visible;
  max-width: 100%;
}

.lm-setup-concierge__visual-wrap {
  min-height: clamp(22rem, 52vw, 26rem);
}

.section-setup-concierge.is-wa-live .lm-setup-concierge__visual .lm-wa-mock__frame {
  animation: none;
}

.lm-wa-mock__frame {
  overflow: hidden;
}

.lm-wa-mock__phone {
  display: flex;
  flex-direction: column;
  height: clamp(21.5rem, 50vw, 25rem);
  min-height: clamp(21.5rem, 50vw, 25rem);
  max-height: clamp(21.5rem, 50vw, 25rem);
}

.lm-wa-mock__header,
.lm-wa-mock__composer {
  flex-shrink: 0;
}

.lm-wa-mock__thread {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow: hidden;
  padding: 0.65rem 0.55rem 0.5rem;
}

.lm-wa-mock__stack {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.lm-wa-mock__stack::-webkit-scrollbar {
  display: none;
}

.lm-wa-mock.is-thread-full .lm-wa-mock__thread,
.lm-wa-mock.is-thread-full .lm-wa-mock__stack {
  min-height: 0;
}

/* —— Demo section —— */
.demo-visual,
.demo-devices-desktop,
.demo-devices-mobile,
.demo-devices-desktop__orbit,
.demo-devices-mobile__orbit,
.demo-devices-desktop__stage,
.demo-devices-mobile__stage,
.demo-devices--stack,
.section-demo .demo-grid {
  max-width: 100%;
}

.section-demo .demo-visual-col,
.section-demo .demo-devices-desktop__panels,
.section-demo .demo-devices-mobile__panels {
  overflow: hidden;
}

.demo-devices-desktop__orbit,
.demo-devices-mobile__orbit {
  padding-block: var(--lm-mock-bleed-y);
  padding-inline: var(--lm-mock-bleed-x);
}

.section-demo .demo-devices-desktop__orbit,
.section-demo .demo-devices-mobile__orbit {
  padding: 0;
}

.section-demo .demo-devices-desktop__panels,
.section-demo[data-active-demo='dashboard'] .demo-devices-desktop__panels,
.section-demo[data-active-demo='storefront'] .demo-devices-desktop__panels,
.section-demo[data-active-demo='checkout'] .demo-devices-desktop__panels {
  height: var(--lm-demo-stage-h, clamp(15.5rem, 46vw, 17.75rem));
  min-height: var(--lm-demo-stage-h, clamp(15.5rem, 46vw, 17.75rem));
  max-height: var(--lm-demo-stage-h, clamp(15.5rem, 46vw, 17.75rem));
  overflow: hidden;
}

.section-demo .demo-devices-desktop__orbit {
  padding-bottom: 0;
  overflow: hidden;
}

.demo-devices-mobile__panels {
  height: var(--lm-demo-stage-h, clamp(15.5rem, 46vw, 17.75rem));
  min-height: var(--lm-demo-stage-h, clamp(15.5rem, 46vw, 17.75rem));
  max-height: var(--lm-demo-stage-h, clamp(15.5rem, 46vw, 17.75rem));
  overflow: hidden;
}

/* —— AI + order-live mocks —— */
.ai-ala-visual,
.ai-ala-mock,
.ai-home-mock-wrap,
.ai-home-mock-wrap__stage,
.ai-home-mock-wrap .lm-mock-tilt__inner,
.lm-ost-visual,
.lm-ost-stage,
.lm-ost-dash,
.lm-ost-phone,
.lm-ost-inner,
.lm-mock-tilt-host,
.lm-mock-tilt-host .lm-mock-tilt__inner {
  overflow: visible;
  max-width: 100%;
}

.lm-ala-phone,
.lm-ala-phone__perspective,
.lm-safari,
.lm-safari-float {
  overflow: visible;
}

/* Gentler pill drift — transform only, stays inside clip */
@keyframes landing-flow-orbit-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(2px, -3px, 0); }
}

@keyframes landing-flow-orbit-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-2px, 3px, 0); }
}

@media (max-width: 768px) {
  .landing-flow-orbit {
    --lm-flow-orbit-pad-x: clamp(1.65rem, 4.5vw, 2.1rem);
    --lm-flow-orbit-pad-y: clamp(1.75rem, 4vw, 2.15rem);
  }

  .hero-mock__orbit {
    --hero-orbit-pad-x: clamp(1.5rem, 4vw, 1.85rem);
    --hero-orbit-pad-y: clamp(1.65rem, 3.5vw, 2rem);
  }

  .lm-wa-mock__phone {
    height: clamp(20.5rem, 68vw, 23.5rem);
    min-height: clamp(20.5rem, 68vw, 23.5rem);
    max-height: clamp(20.5rem, 68vw, 23.5rem);
  }

  .lm-setup-concierge__visual-wrap {
    min-height: clamp(20.5rem, 68vw, 24rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-flow-float.lm-notify-pill-slot.is-visible,
  .section-setup-concierge.is-wa-live .lm-setup-concierge__visual .lm-wa-mock__frame {
    animation: none !important;
  }
}

/* —— Mock isolation — animations stay inside fixed stages (no page reflow) —— */
.landing-hero-visual,
.landing-flow-safari-col,
.lm-ost-visual,
.demo-visual,
.ai-ala-visual,
.lm-setup-concierge__visual-wrap {
  flex-shrink: 0;
}

.hero-mock__orbit,
.landing-flow-orbit,
.lm-ost-stage,
.ai-home-mock-wrap__stage {
  contain: layout style;
}