/* Homepage demo video lightbox + reveal loop. Tokens come from :root in human-home.css. */
.hrv-open{overflow:hidden}
/* Sized by width and viewport height, so the whole 16:9 frame always fits on screen. The end panel
   is a child of the dialog, so its absolute position resolves against the frame-sized dialog box. */
.hrv-dialog{width:min(1180px,calc(100% - 40px),calc((100dvh - 48px) * 16 / 9));max-width:none;max-height:none;margin:auto;padding:0;border:0;background:transparent;overflow:visible}
.hrv-dialog::backdrop{background:rgba(20,17,13,.78);backdrop-filter:blur(6px)}
.hrv-frame{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:var(--human-ink,#14110d);box-shadow:0 40px 100px rgba(0,0,0,.45)}
.hrv-video{display:block;width:100%;height:100%;object-fit:contain;background:var(--human-ink,#14110d)}
/* Sits over the end card's "Start 7-day trial" button: 1920x1080 box 578,698 to 977,807 across its entrance and pulse, padded 6px. */
.hrv-hotspot{position:absolute;left:29.79%;top:64.07%;width:21.41%;height:11.11%;border-radius:999px;cursor:pointer}
.hrv-hotspot:focus-visible{outline:3px solid var(--human-white,#fffdf8);outline-offset:3px}
.hrv-end{position:absolute;left:50%;bottom:14%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:12px;padding:10px;border-radius:999px;background:rgba(255,253,248,.9);box-shadow:0 14px 34px rgba(20,17,13,.18);backdrop-filter:blur(8px);white-space:nowrap}
.hrv-end[hidden],.hrv-hotspot[hidden]{display:none}
.hrv-end .human-btn{min-height:46px}
.hrv-dialog .hrv-replay{border-color:var(--human-line,rgba(20,17,13,.16));font:inherit;font-weight:850;cursor:pointer}
/* Inside the frame corner so it is always on screen, even in short landscape viewports. */
.hrv-dialog .hrv-close{position:absolute;top:12px;right:12px;z-index:3;width:38px;height:38px;border:0;border-radius:50%;background:rgba(20,17,13,.55);color:#fff;font:400 28px/1 system-ui,-apple-system,sans-serif;cursor:pointer;backdrop-filter:blur(6px)}
.hrv-dialog .hrv-close:hover,.hrv-dialog .hrv-close:focus-visible{background:rgba(20,17,13,.82)}

.hrv-loop{margin:0 0 36px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;align-items:center}
.hrv-loop video{display:block;width:100%;aspect-ratio:16/9;border-radius:18px;border:1px solid var(--human-line,rgba(20,17,13,.16));background:var(--human-paper,#f4efe3);box-shadow:var(--human-shadow,0 28px 80px rgba(20,17,13,.14))}
.hrv-loop figcaption strong{display:block;color:var(--human-ink,#14110d);font-family:"Libre Baskerville",Georgia,serif;font-size:clamp(24px,2.4vw,34px);font-weight:400;letter-spacing:-.02em;line-height:1.2}
.hrv-loop figcaption span{display:block;margin-top:14px;color:var(--human-muted,#655e55);font-size:15px;line-height:1.6}

@media (max-width:760px){
  .hrv-dialog{width:min(calc(100% - 24px),calc((100dvh - 24px) * 16 / 9))}
  .hrv-loop{grid-template-columns:1fr;gap:20px}
}
/* Phones in portrait: the frame is too small for an overlay, so the end panel sits below the video
   with full touch-size buttons. */
@media (max-width:760px) and (min-height:481px){
  .hrv-end{position:static;transform:none;width:max-content;max-width:100%;margin:12px auto 0;flex-wrap:wrap;border-radius:24px;background:rgba(255,253,248,.96)}
  .hrv-end .human-btn{min-height:44px;padding:0 16px;font-size:14px}
}
/* Short landscape: no room below, and the lower half holds the native controls and the video's own
   button, so the panel moves to the top-left corner of the frame. */
@media (max-height:480px){
  .hrv-end{left:12px;top:12px;bottom:auto;transform:none;max-width:calc(100% - 74px);flex-wrap:wrap;justify-content:flex-start;padding:6px;gap:8px;border-radius:24px}
  .hrv-end .human-btn{min-height:40px;padding:0 12px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){.hrv-dialog::backdrop{backdrop-filter:none}}