/* =====================================================================
   HTML explainer video — scenes drawn in HTML/CSS, played by video.js
   ===================================================================== */
.xv{--xv-r:20px;max-width:1040px;margin:0 auto}
.xv-frame{position:relative;border-radius:var(--xv-r);overflow:hidden;background:#0b1020;box-shadow:0 30px 80px rgba(2,6,23,.28);border:1px solid rgba(255,255,255,.08);aspect-ratio:16/9;color:#fff;user-select:none}
.xv-frame:fullscreen{border-radius:0;aspect-ratio:auto;width:100vw;height:100vh}
.xv-stage{position:absolute;inset:0;background:radial-gradient(700px 380px at 80% 0%,color-mix(in srgb,var(--blue) 40%,transparent),transparent 65%),radial-gradient(520px 340px at 0% 100%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 65%),#0b1020}
.xv-scene{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1.25fr;gap:4%;align-items:center;padding:5% 6% 13%;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.xv-scene.on{opacity:1;visibility:visible}
.xv-scene.full{grid-template-columns:1fr;text-align:center;justify-items:center}
.xv-cap .xv-step{display:inline-block;font-size:clamp(.6rem,1.2vw,.78rem);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.8em}
.xv-cap h3{font-size:clamp(1rem,2.9vw,2.1rem);line-height:1.15;margin:0 0 .5em;color:#fff}
.xv-cap p{font-size:clamp(.72rem,1.5vw,1.02rem);color:rgba(255,255,255,.72);margin:0}
.xv-sample{position:absolute;right:14px;top:12px;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45)}

/* Animated reveal of parts inside the active scene */
.xv-scene .xa{opacity:0;transform:translateY(14px)}
.xv-scene.on .xa{animation:xvIn .55s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.25s + var(--i,0) * .32s)}
@keyframes xvIn{to{opacity:1;transform:none}}
.xv-frame.paused .xv-tick{animation-play-state:paused}

/* App window */
.xv-app{background:#fff;color:#0f172a;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.4);overflow:hidden;font-size:clamp(.55rem,1.15vw,.82rem);width:100%}
.xv-bar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#f1f5f9;border-bottom:1px solid #e2e8f0;font-weight:600;color:#475569}
.xv-bar span{width:8px;height:8px;border-radius:50%;background:#cbd5e1}
.xv-bar span:nth-child(1){background:#fca5a5}.xv-bar span:nth-child(2){background:#fcd34d}.xv-bar span:nth-child(3){background:#86efac}
.xv-bar b{margin-left:8px;font-weight:600}
.xv-body{padding:12px 14px;display:grid;gap:8px}
.xv-row{display:flex;justify-content:space-between;gap:10px;padding:7px 10px;border-radius:8px;background:#f8fafc}
.xv-row b{font-weight:700}
.xv-total{display:flex;justify-content:space-between;padding:10px;border-radius:10px;background:var(--primary);color:#fff;font-weight:700}
.xv-btn{display:block;text-align:center;padding:9px;border-radius:10px;background:var(--blue);color:#fff;font-weight:700}
.xv-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:8px}
.xv-kpi{padding:9px;border-radius:10px;border:1px solid #e2e8f0}
.xv-kpi small{display:block;color:#64748b;font-size:.85em}
.xv-kpi b{font-size:1.25em}
.xv-chart{display:flex;align-items:flex-end;gap:5px;height:clamp(50px,9vw,110px);padding:8px;border:1px solid #e2e8f0;border-radius:10px}
.xv-chart i{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--blue),color-mix(in srgb,var(--blue) 35%,#fff));height:0;animation:xvGrow .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.6s + var(--i,0) * .07s)}
.xv-scene:not(.on) .xv-chart i{animation:none}
@keyframes xvGrow{to{height:var(--h)}}
.xv-stock{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:center;padding:6px 10px;border-radius:8px;background:#f8fafc}
.xv-meter{height:6px;border-radius:6px;background:#e2e8f0;overflow:hidden}
.xv-meter i{display:block;height:100%;width:var(--w);background:var(--blue);border-radius:6px}
.xv-meter.low i{background:#ef4444}
.xv-badge{font-size:.8em;font-weight:700;padding:2px 8px;border-radius:999px;background:#fee2e2;color:#b91c1c}

/* Chat */
.xv-chat{background:#efeae2;padding:12px;display:grid;gap:7px;min-height:clamp(120px,22vw,260px)}
.xv-msg{max-width:82%;padding:7px 10px;border-radius:10px;line-height:1.35;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.xv-msg.in{background:#fff;justify-self:start;border-top-left-radius:2px}
.xv-msg.out{background:#d9fdd3;justify-self:end;border-top-right-radius:2px}
.xv-msg.note{justify-self:center;background:#fff7d6;font-size:.85em;color:#6b5a00}

/* Checklist */
.xv-list{display:grid;gap:8px;font-size:clamp(.66rem,1.4vw,.98rem);text-align:left}
.xv-list li{list-style:none;display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
.xv-list li::before{content:"✓";display:grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;background:var(--blue);color:#fff;font-weight:800;font-size:.85em;flex-shrink:0}
.xv-steps{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.xv-steps span{padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-weight:600;font-size:clamp(.62rem,1.3vw,.9rem)}
.xv-steps span b{color:var(--accent);margin-right:6px}

/* Title / CTA */
.xv-logo{height:clamp(34px,7vw,74px);width:auto;background:#fff;border-radius:14px;padding:8px 14px;margin:0 auto 4%}
.xv-title h2{font-size:clamp(1.3rem,4.2vw,3rem);margin:0 0 .3em;color:#fff;line-height:1.1}
.xv-title p{font-size:clamp(.75rem,1.7vw,1.15rem);color:rgba(255,255,255,.75);margin:0 auto;max-width:34em}
.xv-cta{display:inline-block;margin-top:5%;padding:.8em 1.6em;border-radius:999px;background:var(--blue);color:#fff;font-weight:700;font-size:clamp(.75rem,1.6vw,1.05rem);box-shadow:0 10px 30px color-mix(in srgb,var(--blue) 45%,transparent)}
.xv-tick{display:inline-block;animation:xvPulse 1.6s ease-in-out infinite}
@keyframes xvPulse{50%{transform:scale(1.05)}}

/* Subtitles */
.xv-sub{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);max-width:86%;text-align:center;font-size:clamp(.62rem,1.35vw,.92rem);background:rgba(0,0,0,.62);padding:5px 12px;border-radius:8px;opacity:0;transition:opacity .3s}
.xv-frame.subs .xv-sub{opacity:1}

/* Controls */
.xv-ctrl{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;padding:10px 14px;background:linear-gradient(transparent,rgba(0,0,0,.65));z-index:3}
.xv-ctrl button{all:unset;cursor:pointer;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;color:#fff;flex-shrink:0}
.xv-ctrl button:hover,.xv-ctrl button:focus-visible{background:rgba(255,255,255,.15)}
.xv-ctrl svg{width:18px;height:18px}
.xv-track{flex:1;height:6px;border-radius:6px;background:rgba(255,255,255,.25);cursor:pointer;position:relative}
.xv-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:6px;background:var(--blue)}
.xv-time{font-size:.78rem;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.85);min-width:78px;text-align:right}
.xv-big{position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:50%;border:0;cursor:pointer;background:var(--blue);color:#fff;display:grid;place-items:center;z-index:4;box-shadow:0 0 0 12px color-mix(in srgb,var(--blue) 22%,transparent);transition:transform .2s}
.xv-big:hover{transform:scale(1.06)}
.xv-big svg{width:34px;height:34px;margin-left:5px}
.xv-frame.playing .xv-big{display:none}
.xv-transcript{margin-top:14px}
.xv-transcript summary{cursor:pointer;font-weight:600;color:var(--blue)}
.xv-transcript ol{margin:10px 0 0;padding-left:1.3em;color:var(--muted);display:grid;gap:6px}

@media (max-width:700px){
  .xv-scene{grid-template-columns:1fr;gap:3%;padding:5% 5% 16%;align-content:center}
  .xv-scene .xv-cap p{display:none}
  .xv-app{font-size:.58rem}
  .xv-time{display:none}
}
@media (prefers-reduced-motion:reduce){.xv-scene .xa{animation:none!important;opacity:1;transform:none}}

.xv-ctrl [data-xv=cc][aria-pressed=true]{background:rgba(255,255,255,.18)}