/* Demo video lightbox + muted section loops. Tokens come from css/style.css :root. */
.vpv-open{overflow:hidden}
/* The site resets margin on *, which removes the native dialog centring; restore it. */
.vpv-dialog{position:fixed;inset:0;margin:auto;height:fit-content;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}
.vpv-dialog::backdrop{background:rgba(15,23,42,.8);backdrop-filter:blur(6px)}
.vpv-frame{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#0f172a;box-shadow:0 40px 100px rgba(0,0,0,.45)}
.vpv-video{display:block;width:100%;height:100%;object-fit:contain;background:#0f172a}
/* left/top/width/height are set per video from js/demo-video.js */
.vpv-hotspot{position:absolute;border-radius:12px;cursor:pointer}
.vpv-hotspot:focus-visible{outline:3px solid #fff;outline-offset:3px}
.vpv-end{position:absolute;left:50%;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,.18);backdrop-filter:blur(8px)}
.vpv-end[hidden],.vpv-hotspot[hidden]{display:none}
.vpv-end .btn{white-space:nowrap}
.vpv-replay{min-height:44px;padding:0 18px;border:1px solid var(--color-border,#d8e0ea);border-radius:var(--radius-sm,8px);background:#fff;color:var(--color-accent-hover,#b45309);font:inherit;font-size:.95rem;font-weight:600;cursor:pointer;white-space:nowrap}
.vpv-replay:hover{border-color:var(--color-accent,#d97706)}
/* Inside the frame corner so it is always on screen, even in short landscape viewports. */
.vpv-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(6px)}
.vpv-close:hover,.vpv-close:focus-visible{background:rgba(15,23,42,.8)}

.cs-demo-trigger{white-space:nowrap}
.pwm-hero .cs-demo-trigger{margin-left:8px}

.cs-loop{margin:48px auto 0;max-width:var(--max-width,1200px);display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:44px;align-items:center;text-align:left}
.cs-loop video{display:block;width:100%;aspect-ratio:16/9;border-radius:16px;border:1px solid var(--color-border,#d8e0ea);background:var(--color-bg-light,#eef2f7);box-shadow:0 30px 70px rgba(15,23,42,.12)}
.cs-loop figcaption strong{display:block;color:var(--color-text,#0f172a);font-size:clamp(1.3rem,2.1vw,1.75rem);font-weight:600;letter-spacing:-.02em;line-height:1.25}
.cs-loop figcaption span{display:block;margin-top:12px;color:var(--color-text-muted,#475569);font-size:.95rem;line-height:1.6}
.cs-loop--inline{margin:28px 0;grid-template-columns:1fr;gap:14px}
.cs-loop--inline figcaption strong{font-size:1.1rem}

@media (max-width:760px){
  .vpv-dialog{width:min(calc(100% - 24px),calc((100dvh - 24px) * 16 / 9))}
  .vpv-end{gap:8px;padding:8px}
  .vpv-end .btn,.vpv-replay{min-height:36px;padding:0 12px;font-size:.8rem}
  .pwm-hero .cs-demo-trigger{margin:12px 0 0}
  .cs-loop{grid-template-columns:1fr;gap:18px;margin-top:32px}
}
@media (prefers-reduced-motion:reduce){.vpv-dialog::backdrop{backdrop-filter:none}}