/* V111 WEB DELIVERY HERO
   1) Hero: real poster layer stays visible while the new MP4 is primed underneath.
   2) Results: use the browser's native horizontal scroll, not manual touchmove JS.
*/

/* ---------- HERO / VIDEO 0 ---------- */
.new-video-frame{position:relative!important;background:#050608!important;}
#video-zero{
  position:relative!important;
  z-index:1!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:#050608!important;
}
#video-zero-native-poster{
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:#050608!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:none!important;
  transition:opacity .08s linear!important;
}

#video-zero-native-poster>img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
}

#video-zero-native-poster.is-hidden{opacity:0!important;visibility:hidden!important;}
#video-zero-start{
  z-index:4!important;
  background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.12))!important;
}
#video-zero-start .play-disc,
#video-zero-start strong,
#video-zero-start small{opacity:1!important;}
#video-zero-fullscreen,#video-zero-progress{opacity:0!important;pointer-events:none!important;transition:opacity .12s linear!important;}
.new-video-frame.user-playing #video-zero-fullscreen,
.new-video-frame.user-playing #video-zero-progress{opacity:1!important;pointer-events:auto!important;}

/* Do not alter Video 1 / Video 2 media quality or sizing. */
#video-one,#video-two{background:#050608!important;}
#video-one-poster-layer{pointer-events:none!important;}

/* ---------- RESULTS: ONE layout, native mobile swipe ---------- */
.results-section{overflow:hidden!important;}
.results-carousel{
  --proof-card-w:min(360px,62%);
  width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  padding:0!important;
  overflow:visible!important;
  position:relative!important;
}
#proof-track{
  box-sizing:border-box!important;
  display:flex!important;
  align-items:stretch!important;
  gap:14px!important;
  width:100%!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  padding-top:6px!important;
  padding-bottom:14px!important;
  padding-left:calc((100% - var(--proof-card-w))/2)!important;
  padding-right:calc((100% - var(--proof-card-w))/2)!important;
  scroll-padding-inline:calc((100% - var(--proof-card-w))/2)!important;
  scroll-snap-type:x mandatory!important;
  scroll-behavior:smooth!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-x:contain!important;
  touch-action:auto!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  scrollbar-width:none!important;
}
#proof-track::-webkit-scrollbar{display:none!important;}
#proof-track .proof-card,
#proof-track .proof-video-card,
#proof-track .proof-image-card{
  box-sizing:border-box!important;
  flex:0 0 var(--proof-card-w)!important;
  width:var(--proof-card-w)!important;
  min-width:var(--proof-card-w)!important;
  max-width:var(--proof-card-w)!important;
  margin:0!important;
  scroll-snap-align:center!important;
  scroll-snap-stop:always!important;
  touch-action:auto!important;
}
#proof-track .proof-media,
#proof-track .proof-video-wrap,
#proof-track .image-layer{
  position:relative!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:9/16!important;
  border-radius:22px!important;
  overflow:hidden!important;
  background:#05070b!important;
  touch-action:auto!important;
}
/* Critical iPhone fix: native <video> must not own the finger gesture. The card owns it. */
#proof-track .proof-video,
#proof-track .proof-poster-image,
#proof-track .proof-main{
  pointer-events:none!important;
  -webkit-user-drag:none!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  touch-action:auto!important;
}
#proof-track .proof-video,
#proof-track .proof-poster-image{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  background:#05070b!important;
}
#proof-track .proof-video{opacity:0!important;z-index:1!important;}
#proof-track .proof-poster-image{opacity:1!important;z-index:2!important;}
#proof-track .proof-main{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:#05070b!important;
}
#proof-track .proof-card.is-playing .proof-video,
#proof-track .proof-card.is-paused .proof-video{opacity:1!important;}
#proof-track .proof-card.is-playing .proof-poster-image,
#proof-track .proof-card.is-paused .proof-poster-image{opacity:0!important;}

#proof-prev,#proof-next{z-index:8!important;}

@media (max-width:768px){
  .results-carousel{--proof-card-w:min(82vw,350px);}
  #proof-track{gap:12px!important;}
  #proof-track .proof-media,
  #proof-track .proof-video-wrap,
  #proof-track .image-layer{border-radius:20px!important;}
}


/* ---------- V110: immediate feedback on the hero Play tap ---------- */
#video-zero-start.is-starting{cursor:progress!important;}
#video-zero-start.is-starting .play-disc{position:relative!important;}
#video-zero-start.is-starting .play-disc svg{opacity:0!important;}
#video-zero-start.is-starting .play-disc::after{
  content:"";
  position:absolute;
  inset:17px;
  border-radius:50%;
  border:3px solid rgba(20,16,18,.22);
  border-top-color:#171116;
  animation:apxHeroSpin .58s linear infinite;
}
#video-zero-start.is-starting strong{letter-spacing:.055em!important;}
#video-zero-start.is-starting small{opacity:.9!important;}
@keyframes apxHeroSpin{to{transform:rotate(360deg)}}