.mobile-demo-stack-controls, .mobile-demo-stack-hint, .mobile-demo-card-label { display: none; }
body.motion-paused #landing-page #product.has-mobile-demo-stack .mobile-demo-card { transition: none; }

@media (max-width: 650px), (max-width: 900px) and (max-height: 500px) and (pointer: coarse) {
  #landing-page #product.has-mobile-demo-stack .mobile-demo-stack-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; border-radius: 999px; background: #08090abf; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  #landing-page #product .mobile-demo-stack-controls button { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 1px solid #ffffff35; border-radius: 50%; background: #17191dbf; font-size: 21px; }
  #landing-page #product .mobile-demo-stack-position { font-size: 14px; font-weight: 600; color: #eeedf3; }
  #landing-page #product.has-mobile-demo-stack .mobile-demo-stack-hint { display: block; width: fit-content; max-width: 100%; font-size: 12px; color: #e0e2e9; text-align: center; line-height: 1.5; margin: 5px auto 8px; padding: 4px 8px; border-radius: 8px; background: #08090abf; }
  #landing-page #product.has-mobile-demo-stack .demo-mobile-tabs { display: none; }
  #landing-page #product.has-mobile-demo-stack .demo-routes,
  #landing-page #product.has-mobile-demo-stack .demo-expand { display: none; }
  #landing-page #product.has-mobile-demo-stack .demo-route-picker { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; color: #babac6; background: #1d1e22; border: 1px solid #ffffff2e; border-radius: 8px; font-size: 12px; }
  #landing-page #product.has-mobile-demo-stack .demo-route-picker select { flex: 1; min-width: 0; height: 44px; color: #f0f0f4; background: transparent; border: 0; font-size: 14px; }
  #landing-page #product.has-mobile-demo-stack .demo-mobile-tabs button { display: flex; justify-content: center; align-items: center; min-height: 44px; padding: 8px 3px; border: 1px solid #ffffff25; border-radius: 8px; background: #12141880; font-size: 13px; color: #bbbcc5; }
  #landing-page #product.has-mobile-demo-stack .demo-mobile-tabs button.active { color: #f2f3f5; border-color: #b3d9ed80; background: #8fc9e219; }
  #landing-page #product .browser-stage.has-mobile-demo-stack { --demo-card-height: clamp(480px, 76svh, 700px); height: auto; min-height: 0; padding: 44px 0 0; overflow: visible; }
  #landing-page #product.has-mobile-demo-stack .browser-board { display: grid; grid-template-columns: minmax(0, 1fr); position: relative; gap: 0; transform: none !important; }
  #landing-page #product.has-mobile-demo-stack .first-window,
  #landing-page #product.has-mobile-demo-stack .first-window > .window-body { display: contents !important; }
  #landing-page #product.has-mobile-demo-stack .first-window > .browser-tabs,
  #landing-page #product.has-mobile-demo-stack .first-window > .browser-url,
  #landing-page #product.has-mobile-demo-stack .second-window > .browser-tabs,
  #landing-page #product.has-mobile-demo-stack .second-window > .browser-url,
  #landing-page #product.has-mobile-demo-stack .demo-wire { display: none !important; }
  #landing-page #product.has-mobile-demo-stack .mobile-demo-card { grid-area: 1 / 1; display: flex !important; flex-direction: column; width: 100%; height: var(--demo-card-height); min-height: 0; margin: 0; border: 1px solid #ffffff38; border-radius: 12px; background: #101216; overflow: hidden; box-shadow: 0 16px 40px #0006; transform-origin: top center; transition: transform 180ms ease, border-color 180ms ease; }
  #landing-page #product.has-mobile-demo-stack .mobile-demo-card[data-stack-depth="0"] { z-index: 3; transform: none !important; }
  #landing-page #product.has-mobile-demo-stack .mobile-demo-card[data-stack-depth="1"] { z-index: 2; transform: translateY(-22px) scaleX(.95) !important; border-color: #82939f88; pointer-events: none; }
  #landing-page #product.has-mobile-demo-stack .mobile-demo-card[data-stack-depth="2"] { z-index: 1; transform: translateY(-44px) scaleX(.9) !important; border-color: #82939f66; pointer-events: none; }
  #landing-page #product.has-mobile-demo-stack .mobile-demo-card-label { display: flex; justify-content: space-between; align-items: center; flex: none; height: 34px; padding: 0 12px; color: #d5d8e0; background: #25292f; border-bottom: 1px solid #ffffff1a; font-size: 12px; line-height: 1; letter-spacing: 0; }
  #landing-page #product.has-mobile-demo-stack .mobile-demo-card-label > span:last-child { color: #aab4c0; font-size: 11px; }
  #landing-page #product.has-mobile-demo-stack .extension-dock > iframe { width: 100%; min-height: 0; flex: 1; }
  #landing-page #product.has-mobile-demo-stack .extension-label { flex: none; min-height: 32px; font-size: 12px; }
  #landing-page #product.has-mobile-demo-stack .second-window > .window-body { display: flex; flex: 1; min-height: 0; height: auto; }
  #landing-page #product.has-mobile-demo-stack .second-window .assistant-pane { display: flex; flex: 1; min-height: 0; width: 100%; }
  #landing-page #product.has-mobile-demo-stack .provider-top { flex: none; }
  #landing-page #product.has-mobile-demo-stack .provider-transcript { flex: 1; min-height: 0; overflow-y: auto; }
  #landing-page #product.has-mobile-demo-stack .provider-composer { flex: none; }
  #landing-page #product.is-focused.has-mobile-demo-stack .browser-stage { --demo-card-height: max(360px, calc(100dvh - 400px)); }
}

@media (prefers-reduced-motion: reduce) {
  #landing-page #product.has-mobile-demo-stack .mobile-demo-card { transition: none; }
}
