/* Only the active phone walkthrough owns this viewport. Desktop remains untouched. */
@media(max-width:650px),(max-width:1000px) and (max-height:500px){
  body.b2b-demo-immersive #navigation,
  body.b2b-demo-immersive #motion-toggle,
  body.b2b-demo-immersive #show-guide,
  body.b2b-demo-immersive .reading-progress{visibility:hidden!important;pointer-events:none!important}
  /* Clip decorative horizontal overflow at the viewport, not around the pinned scene. */
  html:has(body.b2b-demo-immersive){overflow-x:clip!important}
  body.b2b-demo-immersive #landing-page #journey{overflow:visible!important}
  body.b2b-demo-immersive #landing-page #product[data-scroll-story=active]{
    position:fixed!important;inset:0!important;top:0!important;left:0!important;
    width:100%!important;max-width:none!important;height:var(--b2b-immersive-height,100dvh)!important;
    min-height:0!important;max-height:none!important;margin:0!important;padding:0!important;
    z-index:160!important;background:transparent;touch-action:auto;
  }
  body.b2b-demo-immersive #landing-page #product .demo-sticky{
    position:relative!important;display:block!important;inset:auto!important;
    width:100%!important;height:100%!important;margin:0!important;
    padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)!important;gap:0!important;
  }
  body.b2b-demo-immersive #landing-page #product .demo-top,
  body.b2b-demo-immersive #landing-page #product .demo-mobile-tabs,
  body.b2b-demo-immersive #landing-page #product .scroll-story-bar,
  body.b2b-demo-immersive #landing-page #product .v12-demo-foot,
  body.b2b-demo-immersive #landing-page #product .demo-script-note,
  body.b2b-demo-immersive #landing-page #product [data-mobile-demo-guide],
  body.b2b-demo-immersive #landing-page #product [data-mobile-demo-feedback],
  body.b2b-demo-immersive #landing-page #product #phone-demo-options,
  body.b2b-demo-immersive #landing-page #product .mobile-demo-stack-controls,
  body.b2b-demo-immersive #landing-page #product .mobile-demo-stack-hint{display:none!important}
  body.b2b-demo-immersive #landing-page #product[data-scroll-story=active] .browser-stage{
    position:relative!important;inset:auto!important;width:100%!important;height:100%!important;
    min-height:0!important;max-height:none!important;padding:0!important;margin:0!important;
    border:0!important;border-radius:0!important;pointer-events:auto!important;touch-action:auto;
  }
  /* The marketing iframe routes vertical gestures; horizontal controls remain native. */
  body.b2b-demo-immersive #landing-page #product[data-scroll-story=active] .browser-stage iframe{pointer-events:auto!important;touch-action:auto!important}
  /* Native Cyan still travels; its invisible band anchors it above the viewport edge. */
  body.b2b-demo-immersive #landing-page #product .scroll-story-guide-space{
    position:absolute!important;right:0;bottom:16px;width:100%;height:88px!important;
    margin:0!important;padding:0!important;pointer-events:none;
  }
  body.b2b-demo-immersive #tour-guide.scroll-story-cyan{z-index:170!important}
  body.b2b-demo-immersive #tour-guide #guide-visual{touch-action:pan-y}
}

/* Preserve Cyan's same speech card above the phone interface. */
@media(max-width:650px),(max-width:1000px) and (max-height:500px){
  body.b2b-demo-immersive #tour-guide.scroll-story-cyan #guide-bubble{display:block!important}
  body.b2b-demo-immersive #tour-guide.scroll-story-cyan:not(.introducing) #guide-bubble{max-height:min(110px,30dvh)!important}
}