html { scroll-behavior:smooth; }
button,input { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:wait; }
[hidden] { display:none !important; }
:focus-visible { outline:3px solid #1264de !important; outline-offset:4px; }
.brand-mark { display:grid; place-items:center; width:80px; height:80px; border-radius:50%; background:#0866ff; color:white; font-size:29px; font-weight:800; letter-spacing:-2px; }
.brand-mark.small { width:60px; height:60px; font-size:22px; }
#step1 .logo-container { display:flex; flex-direction:column; align-items:center; gap:12px; }
#step1 .logo-container .brand-logo { width:100px; height:auto; max-height:none; object-fit:contain; }
.brand-logo--footer { width:70px !important; height:auto !important; object-fit:contain; }
.logo-notice { font-size:11px; color:#647184; line-height:1.5; }
#step1 .main-card, #step1 .feature-item, #step1 .trust-badge { opacity:1; }
@media(prefers-reduced-motion:reduce) { #step1 .anim-chart path, #step1 .checkmark-circle, #step1 .checkmark-check { stroke-dashoffset:0; } }
.feature-item.checking { border-color:#0866ff !important; background:#e9f2ff !important; }
.feature-item.complete .icon-wrap { color:#168347 !important; background:#e4f5eb !important; }
#enterExperience { margin-top:20px; }
.media-placeholder { width:100%; height:100%; display:flex; flex-direction:column; gap:18px; align-items:center; justify-content:center; padding:24px; background:linear-gradient(130deg,#e0e9ff,#f3f6fc); color:#243b62; text-align:center; }
.media-placeholder strong { font-size:clamp(16px,2.2vw,26px); }
.media-placeholder p { font-size:14px; }
.media-play { display:grid; place-items:center; width:80px; height:80px; border-radius:50%; background:#0c4eb9; color:white; font-size:26px; padding-left:4px; }
.main-video { width:100%; height:100%; object-fit:contain; background:#101b2c; }
mux-player.main-video { --center-controls:flex; --bottom-controls:flex; --mute-button:block; --fullscreen-button:block; --time-display:block; --duration-display:block; }
mux-player.main-video::part(range) { pointer-events:auto; }
.slot-label { font-size:11px; }
.consent { display:flex; gap:10px; align-items:flex-start; text-align:left; font-size:12px; line-height:1.6; margin:16px 0; }
.consent input { flex:0 0 18px; width:18px; height:18px; margin:3px 0; }
.field-error { color:#a91e32; text-align:left; font-size:12px; margin:-4px 0 12px; }
[aria-invalid="true"] { border:2px solid #a91e32 !important; }
#formStatus { font-size:13px; line-height:1.6; margin:12px 0; }
.amount-label { display:block; font-weight:600; margin-bottom:12px; }
#depositAmount { width:100%; padding:14px 16px; background:white; border:1px solid #bac7dc; border-radius:10px; color:#10213a; font-size:22px; }
#depositHelp { font-size:12px; color:#44536a; margin:10px 0 24px; }
.calc-days { display:block; }
.calc-value { overflow-wrap:anywhere; }
.calculator-actions { display:flex; justify-content:center; gap:12px; margin:24px 0 16px; flex-wrap:wrap; }
.calculator-actions .ai-btn { margin:0; }
.reset-btn { background:#fff; border:1px solid #b2c0d9; border-radius:10px; padding:12px 20px; color:#1b416c; }
#calculationStatus,.model-note { font-size:12px; line-height:1.7; margin-top:12px; }
.model-note { color:#44536a; }
.final-sub { line-height:1.7; }
.footer-text { max-width:700px; margin:0 auto; line-height:1.7; }
.form-small a { color:#0c4eb9; text-decoration:underline; }
dialog { margin:auto; width:min(700px,calc(100% - 32px)); max-height:85dvh; overflow:auto; padding:36px; border:1px solid #c9d6ed; border-radius:20px; color:#142330; box-shadow:0 20px 90px #1234; }
dialog::backdrop { background:#10213199; }
dialog h2 { padding-right:30px; margin-bottom:20px; }
dialog p { margin-bottom:18px; line-height:1.8; font-size:14px; }
.dialog-close { position:absolute; right:15px; top:10px; font-size:30px; background:none; border:0; }
body:has(dialog[open]) { overflow:hidden; }
@media(max-width:600px) { .media-play{width:52px;height:52px;font-size:18px} .media-placeholder{gap:10px;padding:16px} .media-placeholder p{font-size:12px} .calc-value{font-size:36px} dialog{padding:26px} .footer-logos{gap:15px} }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} }

/* Reveal sections once, with staggered availability tiles. */
.section-enter { animation:sectionReveal .65s cubic-bezier(.22,1,.36,1) both; }
#slotsBlock.section-enter .slot { animation:slotReveal .6s cubic-bezier(.22,1,.36,1) var(--slot-delay,0ms) both; }
.slot { transition:background-color .35s ease, box-shadow .35s ease; }
.slot.taken { opacity:1; }
.slot.taken .slot-label { color:#666b7c; }
.slot.free .slot-icon { animation:slotBreathe 3.5s ease-in-out var(--slot-delay,0ms) infinite; }
.ai-btn,.slots-btn,.reset-btn,#step1 .btn-cta { transition:transform .22s ease, box-shadow .22s ease, background-color .22s ease; }
@media(hover:hover) { .ai-btn:hover,.slots-btn:hover,.reset-btn:hover { transform:translateY(-2px); box-shadow:0 8px 22px #0c4eb924; } }
.ai-btn:active,.slots-btn:active,.reset-btn:active { transform:translateY(0); }
#aiBlock,#slotsBlock,#secondVideoBlock,#formBlock { scroll-margin-top:24px; }
@keyframes sectionReveal { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes slotReveal { from { opacity:0; transform:translateY(14px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes slotBreathe { 0%,100% { transform:scale(1); opacity:.7; } 50% { transform:scale(1.08); opacity:1; } }
@media(prefers-reduced-motion:reduce) {
  .section-enter,#slotsBlock.section-enter .slot { opacity:1; transform:none; }
}

@media(prefers-reduced-motion:reduce) { #step2 .main-card { opacity:1; transform:none; } }

.iti { width:100%; margin-bottom:16px; } .iti input { margin-bottom:0!important; } .iti__country-list { max-width:min(360px,80vw); color:#142330; text-align:left; }

.iti--container { z-index:10000; }

#step1 .brand-title { font-size:28px; font-weight:700; line-height:1.2; color:#142330; letter-spacing:-.5px; margin:4px 0 12px; }

/* Overlay icons retain keyboard and screen-reader access without seek controls. */
mux-player.main-video { --controls:none; --center-controls:none; --bottom-controls:none; --top-controls:none; pointer-events:none; }
video.main-video { pointer-events:none; }
.video-overlay-host { position:relative; }
.video-controls { position:absolute; inset:0; z-index:5; pointer-events:none; }
.video-controls button { position:absolute; display:grid; place-items:center; width:48px; height:48px; padding:12px; border:1px solid #ffffff55; border-radius:50%; background:#101b2cbb; color:white; pointer-events:auto; backdrop-filter:blur(8px); box-shadow:0 3px 14px #0003; transition:background .2s,transform .2s; }
.video-controls button svg { width:100%; height:100%; }
.video-controls .video-play-icon { left:16px; bottom:16px; }
.video-controls .video-mute-icon { right:16px; bottom:16px; }
.video-controls button:hover { background:#0c4eb9; transform:scale(1.06); }
.video-controls button:disabled { opacity:.5; cursor:default; }
@media(max-width:600px) { .video-controls button { width:44px; height:44px; padding:11px; } .video-controls .video-play-icon { left:10px; bottom:10px; } .video-controls .video-mute-icon { right:10px; bottom:10px; } }

/* Full-surface playback toggle; centered icon appears only while paused. */
.video-controls { pointer-events:auto; cursor:pointer; }
.video-controls .video-play-icon { left:50%; top:50%; bottom:auto; width:72px; height:72px; padding:20px; transform:translate(-50%,-50%); transition:opacity .2s,background .2s; }
.video-controls .video-play-icon:hover { transform:translate(-50%,-50%); }
.video-controls.is-playing .video-play-icon { opacity:0; }
.video-controls.is-playing .video-play-icon:focus-visible { opacity:1; }
.video-controls.is-ended { cursor:default; }
.video-controls.is-ended .video-play-icon { display:none; }
@media(max-width:600px) { .video-controls .video-play-icon { left:50%; top:50%; bottom:auto; width:60px; height:60px; padding:17px; } }