/* Actual kiosk home supplied by the user, preserved at its 486 × 865 ratio.
   Load after the host page's styles. Only the kiosk deployment scene is scoped. */
.story-scene--deploy {
  --kiosk-home-width:min(24vw,304px,calc((100dvh - var(--navh,60px) - 124px)*.5618497));
}
.story-scene--deploy .deploy-admin.deploy-kiosk-home {
  z-index:3;
  right:clamp(24px,3.1vw,48px);
  top:50%;
  width:var(--kiosk-home-width);
  height:auto;
  aspect-ratio:486/865;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(71,52,92,.14);
  border-radius:12px;
  background:#f8f5fc;
  box-shadow:0 24px 52px -28px rgba(38,26,61,.36),0 2px 7px rgba(38,26,61,.06);
  opacity:var(--deploy-admin-opacity,1);
  transform:translate3d(var(--deploy-admin-x,0),-50%,0) scale(var(--deploy-admin-scale,1));
}
.story-scene--deploy .deploy-admin.deploy-kiosk-home::before {display:none}
.story-scene--deploy .deploy-admin.deploy-kiosk-home img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:486/865;
  object-fit:contain;
  object-position:center;
}
.story-scene--deploy .deploy-secure-frame {
  right:clamp(24px,3.1vw,48px);
  width:var(--kiosk-home-width);
  height:auto;
  aspect-ratio:486/865;
  border-radius:14px;
  box-shadow:0 0 0 6px rgba(8,127,91,.035);
}
.story-scene--deploy .deploy-secure-frame span {top:-38px;right:0}
.story-scene--deploy .deploy-field {
  width:min(29vw,400px);
  height:auto;
  aspect-ratio:2244/2804;
}
.story-scene--deploy .deploy-beam {
  left:22%;
  right:calc(var(--kiosk-home-width) + clamp(24px,3.1vw,48px) + 8px);
}
.story-scene--deploy .deploy-status {
  left:16px;
  right:auto;
  top:calc(50% + min(18.12vw,250px) - 46px);
  z-index:4;
}

@media (min-width:768px) and (max-width:1023px) {
  .story-scene--deploy {--kiosk-home-width:min(25vw,280px,calc((100dvh - var(--navh,60px) - 124px)*.5618497))}
  .story-scene--deploy .deploy-admin.deploy-kiosk-home,
  .story-scene--deploy .deploy-secure-frame {right:20px}
  .story-scene--deploy .deploy-field {left:0;width:29vw;height:auto;aspect-ratio:2244/2804}
  .story-scene--deploy .deploy-status {left:0;top:calc(50% + 18.12vw - 46px)}
}

@media (max-width:767px) {
  .story-scene--deploy {--kiosk-home-width:min(42vw,195px);min-height:0}
  .stripe-story .story-scene--deploy .story-scene__sticky {
    display:flex;
    flex-direction:column;
    height:auto;
    min-height:0;
    padding-bottom:44px;
  }
  .stripe-story .story-scene--deploy .deploy-stage {
    position:relative;
    inset:auto;
    flex:0 0 auto;
    height:calc(var(--kiosk-home-width)*1.7798354 + 60px);
    min-height:0;
    max-height:none;
    margin-top:20px;
  }
  html.story-motion-ready .story-scene--deploy {
    --kiosk-home-width:min(42vw,195px,calc((100dvh - 390px)*.5618497));
  }
  html.story-motion-ready .stripe-story .story-scene--deploy .story-scene__sticky {
    height:calc(100dvh - var(--navh,60px));
    min-height:0;
    padding-bottom:88px;
  }
  .story-scene--deploy .deploy-admin.deploy-kiosk-home {
    top:14px;
    right:18px;
    width:var(--kiosk-home-width);
    transform:translate3d(var(--deploy-admin-x,0),0,0) scale(var(--deploy-admin-scale,1));
    transform-origin:center top;
    border-radius:10px;
  }
  .story-scene--deploy .deploy-secure-frame {
    top:14px;
    right:18px;
    width:var(--kiosk-home-width);
    transform:scale(var(--deploy-secure-scale,1));
    transform-origin:center top;
    border-radius:12px;
  }
  .story-scene--deploy .deploy-secure-frame span {top:auto;bottom:-37px;right:4px}
  .story-scene--deploy .deploy-field {
    top:calc(14px + var(--kiosk-home-width)*.20488);
    left:12px;
    width:calc(var(--kiosk-home-width)*1.1);
    height:auto;
    aspect-ratio:2244/2804;
    border-radius:16px;
    clip-path:inset(var(--deploy-clip,0%) 0 0 0 round 16px);
    transform:translate3d(var(--deploy-field-x,0),0,0);
  }
  .story-scene--deploy .deploy-field img {object-fit:contain;object-position:center}
  .story-scene--deploy .deploy-status {
    left:18px;
    right:auto;
    top:calc(20px + var(--kiosk-home-width)*1.58);
    z-index:2;
    gap:5px;
    padding:8px 9px;
    font-size:11px;
    transform:translate3d(0,var(--deploy-status-y,0),0);
  }
  .story-scene--deploy .deploy-status .cm-flow-svg {width:15px;height:15px}
}

@media (prefers-reduced-motion:reduce) and (max-width:767px) {
  .stripe-story .story-scene--deploy .story-scene__sticky {height:auto!important;min-height:0!important}
  .story-scene--deploy .deploy-field,
  .story-scene--deploy .deploy-admin.deploy-kiosk-home,
  .story-scene--deploy .deploy-secure-frame {transform:none!important}
}