/* Comic Videos AI · sample video tiles (autoplay muted, stream on view, tap for sound) */
.cvv{position:relative;overflow:hidden;border-radius:24px;aspect-ratio:9/16;background:radial-gradient(120% 70% at 50% 0%,color-mix(in srgb,var(--deep) 55%,var(--ink)),var(--ink) 70%);isolation:isolate;cursor:pointer}
.cvv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease;z-index:1}
.cvv.is-on video{opacity:1}
.cvv-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;text-align:center;color:#fff}
.cvv-ph b{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--pop)}
.cvv-ph i{font-style:normal;font-family:var(--display);font-weight:800;font-size:clamp(18px,1.6vw,24px);line-height:1.15}
.cvv-ph .cvv-spin{width:30px;height:30px;border-radius:50%;border:3px solid color-mix(in srgb,#fff 18%,transparent);border-top-color:var(--pop);animation:cvv-spin 1s linear infinite}
.cvv--empty .cvv-ph .cvv-spin{display:none}
@keyframes cvv-spin{to{transform:rotate(360deg)}}
.cvv::after{content:"";position:absolute;inset:auto 0 0 0;height:34%;background:linear-gradient(transparent,rgba(0,0,0,.55));z-index:2;pointer-events:none}

/* the sound tag */
.cvv-snd{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;display:inline-flex;align-items:center;gap:7px;padding:8px 14px 8px 10px;border-radius:999px;border:2px solid var(--pop);background:rgba(14,12,10,.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font:700 12.5px/1 var(--display);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;cursor:pointer;box-shadow:0 0 0 0 color-mix(in srgb,var(--pop) 70%,transparent),0 8px 20px -6px rgba(0,0,0,.6);animation:cvv-ping 1.9s ease-out infinite;transition:transform .2s ease,background .2s ease}
.cvv-snd:hover{transform:translateX(-50%) scale(1.06)}
.cvv-snd svg{width:17px;height:17px;flex:none;color:var(--pop)}
.cvv-snd .on{display:none}
.cvv.is-sound .cvv-snd{background:linear-gradient(135deg,var(--go),var(--go-2));border-color:transparent;color:var(--ink);animation:none}
.cvv.is-sound .cvv-snd svg{color:var(--ink)}
.cvv.is-sound .cvv-snd .off,.cvv.is-sound .cvv-snd .t-off{display:none}
.cvv.is-sound .cvv-snd .on,.cvv.is-sound .cvv-snd .t-on{display:inline}
.cvv-snd .t-on{display:none}
.cvv--empty .cvv-snd{display:none}
@keyframes cvv-ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--pop) 70%,transparent),0 8px 20px -6px rgba(0,0,0,.6)}75%,100%{box-shadow:0 0 0 12px transparent,0 8px 20px -6px rgba(0,0,0,.6)}}
.phone .cvv{border-radius:24px}
.samples.has-sound .samples__track{animation-play-state:paused}

/* prompt rows: phone instead of the wide GIF box */
.pgif.pgif--phone{box-shadow:none;overflow:visible;border-radius:0;display:flex;justify-content:center}
.pgif--phone .phone{width:min(255px,70%);translate:none!important}
.five .cvv{border-radius:20px}

@media (max-width:760px){
  .cvv-snd{bottom:10px;padding:7px 11px 7px 8px;font-size:11px;gap:5px}
  .cvv-snd svg{width:14px;height:14px}
  .phone .cvv{border-radius:20px}
  /* 5-video row becomes a swipe row on phones so each video is big enough to watch */
  .five{display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px!important;margin-left:-16px!important;margin-right:-16px!important;padding:8px 16px 22px!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .five::-webkit-scrollbar{display:none}
  .five .phone{flex:0 0 60vw!important;width:60vw!important;max-width:260px;scroll-snap-align:center;translate:none!important;border-radius:24px!important;padding:6px!important}
  .five .cvv{border-radius:19px}
  .pgif--phone .phone{width:min(260px,72%)}
}
@media (prefers-reduced-motion:reduce){.cvv-snd{animation:none}}
.samples__track{animation-duration:90s}
/* JVZoo pixels: keep them firing, but never let a blocked pixel (ad blocker, privacy browser) draw a broken-image box above the hero */
body > img[src*="jvzoo.com"]{position:absolute!important;top:0;left:0;width:1px!important;height:1px!important;overflow:hidden;opacity:0;pointer-events:none}

/* real videos: show the still as soon as the tile is near, fade the video in when it plays */
.cvv.is-loaded video{opacity:1}

/* photo-to-comic row: the uploaded photo pinned on each phone */
.p2c-sub{margin-top:14px}
.five .phone.p2c{position:relative;overflow:visible}
.p2c-photo{position:absolute;z-index:4;top:-22px;left:-16px;width:46%;margin:0;padding:5px 5px 0;background:#fff;border-radius:6px;transform:rotate(-7deg);box-shadow:0 14px 26px -10px rgba(0,0,0,.55);transition:transform .35s ease}
.p2c-photo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px}
.p2c-photo figcaption{font:800 11px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;text-align:center;color:var(--ink);padding:5px 0 6px}
 .p2c-arrow{position:absolute;z-index:5;right:-15px;bottom:-13px;transform:rotate(52deg);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:var(--ink);box-shadow:0 8px 18px -6px rgba(0,0,0,.6)}
.p2c-arrow svg{width:17px;height:17px}
.five .phone.p2c:hover .p2c-photo{transform:rotate(-3deg) scale(1.04)}
.five{padding-top:26px}
@media (max-width:760px){
  .p2c-photo{top:-14px;left:-6px;width:44%;padding:4px 4px 0}
  .p2c-photo figcaption{font-size:10px;padding:4px 0 5px}
  .p2c-arrow{width:26px;height:26px;right:-12px;bottom:-11px}
  .five{padding-top:22px!important}
}

/* monitor on the "Introducing" stage plays a baby video */
.mock-vid{position:absolute;z-index:3;left:44.75%;top:0;margin-top:1.12%;width:12.9%;aspect-ratio:9/16;border-radius:6px;overflow:hidden;box-shadow:0 0 0 2px rgba(255,255,255,.18),0 10px 30px -8px rgba(0,0,0,.7)}
.mock-vid .cvv{border-radius:0;height:100%}
.mock-vid .cvv-snd{bottom:6px;padding:5px 8px 5px 6px;font-size:9.5px;gap:4px;border-width:1.5px}
.mock-vid .cvv-snd svg{width:12px;height:12px}
@media (max-width:760px){
  .mock-vid .cvv-snd{padding:4px;bottom:4px}
  .mock-vid .cvv-snd span{display:none}
}