* { box-sizing: border-box; }
html, body { width:100%; height:100%; margin:0; background:#000; }
body { display:grid; place-items:center; overflow:hidden; }
.video-page { width:100vw; height:100dvh; display:grid; place-items:center; background:#000; }
.video-shell { position:relative; width:100%; height:100%; max-width:720px; max-height:1280px; background:#000; }
.video-shell video { width:100%; height:100%; display:block; object-fit:contain; background:#000; }
.initial-play { position:absolute; left:50%; top:50%; z-index:3; width:112px; height:112px; display:grid; place-items:center; padding:0; border:2px solid #b4e565; border-radius:50%; color:#fff; background:rgba(180,229,101,.85); box-shadow:0 0 0 10px rgba(180,229,101,.12); transform:translate(-50%,-50%); cursor:pointer; transition:opacity .25s ease, transform .25s ease; -webkit-tap-highlight-color:transparent; }
.initial-play::after { content:""; position:absolute; inset:-14px; border:2px solid rgba(180,229,101,.45); border-radius:50%; pointer-events:none; animation:playPulse 1.8s ease-out infinite; }
.initial-play span { margin-left:7px; color:#07100d; font-size:38px; line-height:1; }
.initial-play.is-hidden { opacity:0; transform:translate(-50%,-50%) scale(1.08); pointer-events:none; }
@keyframes playPulse { 0% { opacity:.7; transform:scale(.9); } 70%, 100% { opacity:0; transform:scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .initial-play::after { animation:none; } }
.cta-overlay { position:absolute; left:7%; right:7%; top:calc(50% - 15px); z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:19px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; opacity:0; visibility:hidden; transform:translateY(-50%) scale(.97); transition:opacity .65s ease, transform .65s ease, visibility 0s linear .65s; }
#ctaOverlay[data-visible="true"] { display:grid !important; opacity:1 !important; visibility:visible !important; transform:translateY(-50%) scale(1); transition-delay:0s; }
.cta-button { min-height:58px; display:grid; place-items:center; border:2px solid var(--cta-color,#b4e565); border-radius:7px; color:#fff; background:var(--cta-fill,rgba(180,229,101,.15)); font:700 16px/1 "DM Sans",sans-serif; text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.cta-button.text { --cta-color:#8ce4ca; --cta-fill:rgba(140,228,202,.15); }.cta-button.callback { --cta-color:#f8a36e; --cta-fill:rgba(248,163,110,.15); }
@media (min-width:721px) { .video-shell { height:100dvh; width:auto; } }
@media (min-width:721px) {
  .video-page video { height:100dvh; width:auto; box-shadow:none; }
}