/* Homepage demo video lightbox + scan loop. Plain CSS on purpose: the Tailwind Play CDN
   does not style JS-injected elements, so nothing here uses brand utilities. */
.sfv-open{overflow:hidden}
.sfv-dialog{width:min(1180px,calc(100% - 40px),calc((100vh - 48px) * 16 / 9));width:min(1180px,calc(100% - 40px),calc((100dvh - 48px) * 16 / 9));max-width:none;max-height:none;padding:0;border:0;background:transparent;overflow:visible}
.sfv-dialog::backdrop{background:rgba(15,23,42,.8);backdrop-filter:blur(6px)}
.sfv-frame{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#0f172a;box-shadow:0 40px 100px rgba(0,0,0,.45)}
.sfv-video{display:block;width:100%;height:100%;object-fit:contain;background:#0f172a}
/* Sits exactly over the "Buy SealedFolio" button in the video's end card (1920x1080 box 797,751 to 1123,843, padded). */
.sfv-hotspot{position:absolute;left:41.2%;top:69.1%;width:17.6%;height:9.3%;border-radius:12px;cursor:pointer}
.sfv-hotspot:focus-visible{outline:3px solid #15803d;outline-offset:3px}
.sfv-end{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:12px;padding:10px;border-radius:14px;background:rgba(255,255,255,.86);box-shadow:0 14px 34px rgba(15,23,42,.16);backdrop-filter:blur(8px)}
.sfv-end[hidden],.sfv-hotspot[hidden]{display:none}
.sfv-cta{display:inline-flex;align-items:center;white-space:nowrap;min-height:48px;padding:0 26px;border-radius:8px;background:#15803d;color:#fff;font-weight:600;font-size:15px;text-decoration:none}
.sfv-cta:hover{background:#166534;color:#fff}
.sfv-replay{white-space:nowrap;min-height:48px;padding:0 20px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;color:#15803d;font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.sfv-replay:hover{background:#f0fdf4}
.sfv-close{position:absolute;top:12px;right:12px;z-index:3;width:38px;height:38px;border:0;border-radius:50%;background:rgba(15,23,42,.55);color:#fff;font-size:24px;line-height:1;cursor:pointer;backdrop-filter:blur(4px)}
.sfv-close:hover,.sfv-close:focus-visible{background:rgba(15,23,42,.8);outline:2px solid #fff;outline-offset:2px}

.sf-scan-loop{margin:64px 0 0;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;align-items:center}
.sf-scan-loop video{display:block;width:100%;aspect-ratio:16/9;border-radius:16px;border:1px solid #e2e8f0;background:#f8fafc;box-shadow:0 30px 70px rgba(15,23,42,.1)}
.sf-scan-loop figcaption strong{display:block;color:#0f172a;font-size:clamp(22px,2.2vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.sf-scan-loop figcaption span{display:block;margin-top:12px;color:#64748b;font-size:14px;line-height:1.6}

@media (max-width:760px){
  .sfv-dialog{width:min(calc(100% - 24px),calc((100vh - 24px) * 16 / 9));width:min(calc(100% - 24px),calc((100dvh - 24px) * 16 / 9))}
  .sfv-close{top:8px;right:8px;width:34px;height:34px;font-size:22px}
  /* On phones the bottom of the frame holds the end card's own CTA, so the panel sits at the top. */
  .sfv-end{top:5%;bottom:auto;gap:8px;padding:6px}
  .sfv-cta,.sfv-replay{min-height:38px;padding:0 14px;font-size:13px}
  .sf-scan-loop{grid-template-columns:1fr;gap:20px;margin-top:40px}
}
@media (prefers-reduced-motion:reduce){.sfv-dialog::backdrop{backdrop-filter:none}}