/* Our own video player on both Black Friday landings (assets/js/edu.js builds the bar, the next-video tile and the three
   questions of the 70% step). No native controls, no real fullscreen: "full screen" fills the browser window. No seeking: the bar only
   shows where the film is, with a notch where the 60% unlocks (85% of the film). The next-video tile sits exactly on the film's own end-card placeholder
   (1920x1080: x 1040, y 300, 760x428), so the stage always keeps 16:9 and the tile is placed in percent.
   Colours come from the page: --yellow / --yellow-ink on both, the rest per skin below. */
.mhpbf-edu{--mp-acc:var(--yellow);--mp-acc-ink:var(--yellow-ink);--mp-r:13px;--mp-line:var(--rim2);--mp-dim:var(--text);--mp-hi:var(--ink);--mp-f:var(--h);--mp-field:rgba(16,19,27,.6);--mp-pill:999px;--mp-dot:50%;--mp-panel:var(--panel);--mp-tile:var(--bg)}
.mhpbf-gr{--mp-r:0px;--mp-line:var(--paper);--mp-dim:var(--dust);--mp-hi:var(--paper);--mp-f:var(--f-body);--mp-field:var(--black);--mp-pill:0px;--mp-dot:0px;--mp-panel:var(--reel);--mp-tile:var(--black)}

/* ---- stage ---- */
.vbox:focus{outline:none}
.vbox:focus-visible{outline:2px solid var(--mp-acc);outline-offset:3px}
.mp-stage{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden;-webkit-user-select:none;user-select:none}
.mp-stage video{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:contain}
.vbox.started .mp-stage{cursor:pointer}
.vbox.mp-idle .mp-stage{cursor:none}

/* ---- the bar ---- */
.mp-bar{position:absolute;left:0;right:0;bottom:0;z-index:4;display:none;align-items:center;gap:clamp(4px,1vw,10px);padding:34px clamp(8px,1.6vw,16px) clamp(6px,1.2vw,12px);background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.45) 55%,transparent);color:#fff;font:600 13px/1 var(--mp-f);transition:opacity .25s;cursor:default}
.vbox.started .mp-bar{display:flex}
.vbox.mp-idle .mp-bar{opacity:0;pointer-events:none}
.mp-b{flex:none;display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;background:transparent;color:#fff;cursor:pointer;padding:0}
.mp-b:hover{background:rgba(255,255,255,.12)}
.mp-b:focus-visible{outline:2px solid var(--mp-acc);outline-offset:1px}
.mp-b svg{width:22px;height:22px;fill:currentColor}
.mp-time{flex:none;font-variant-numeric:tabular-nums;letter-spacing:.01em;opacity:.92;white-space:nowrap}
.mp-track{position:relative;flex:1 1 auto;min-width:60px;height:22px;cursor:default}
.mp-track::before,.mp-track i{content:"";position:absolute;left:0;top:50%;height:4px;margin-top:-2px;border-radius:2px}
.mp-track::before{right:0;background:rgba(255,255,255,.22)}
.mp-track .mp-load{width:0;background:rgba(255,255,255,.35)}
.mp-track .mp-pos{width:0;background:var(--mp-acc)}
/* where the 60% unlocks */
.mp-mark{position:absolute;top:50%;width:3px;height:14px;margin:-7px 0 0 -1.5px;background:var(--mp-acc);border-radius:1px;box-shadow:0 0 0 1.5px rgba(0,0,0,.6)}
.mp-mark span{position:absolute;bottom:17px;left:50%;transform:translateX(-50%);background:var(--mp-acc);color:var(--mp-acc-ink);font:800 11px/1 var(--mp-f);padding:4px 6px;border-radius:4px;white-space:nowrap;pointer-events:none}
.mp-mark.done{display:none}

/* ---- now playing (a related film in this player) ---- */
.mp-now{position:absolute;z-index:3;left:clamp(8px,1.6vw,16px);top:clamp(8px,1.6vw,16px);margin:0;max-width:calc(100% - 32px);display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.7);color:#fff;font:700 13px/1.2 var(--mp-f);padding:6px 10px 6px 6px;border-radius:999px;transition:opacity .25s}
.mp-now img{width:22px;height:22px;border-radius:6px;flex:none}
.vbox.mp-idle .mp-now{opacity:0}
.mp-now[hidden],.mp-rel[hidden]{display:none}

/* ---- the next-video tile, on the film's own placeholder ---- */
.mp-rel{position:absolute;z-index:3;left:54.17%;top:27.78%;width:39.58%;height:39.63%;padding:0;border:0;border-radius:calc(var(--mp-r) * .75);overflow:hidden;cursor:pointer;background:#111 center/cover no-repeat;color:#fff;text-align:left;box-shadow:0 0 0 2px var(--mp-acc),0 18px 50px rgba(0,0,0,.6);opacity:0;transform:scale(.94);transition:opacity .35s,transform .35s cubic-bezier(.2,.9,.3,1.2);container-type:size}
.mp-rel.on{opacity:1;transform:none}
.mp-rel::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.35) 52%,rgba(0,0,0,.1) 100%)}
.mp-rel:hover,.mp-rel:focus-visible{box-shadow:0 0 0 4px var(--mp-acc),0 18px 50px rgba(0,0,0,.6);outline:none}
.mp-rel-play{position:absolute;left:50%;top:40%;width:22cqh;height:22cqh;min-width:34px;min-height:34px;margin:-11cqh 0 0 -11cqh;border-radius:50%;background:var(--mp-acc);display:grid;place-items:center;transition:transform .15s}
.mp-rel:hover .mp-rel-play{transform:scale(1.08)}
.mp-rel-play i{width:0;height:0;border-left:5.5cqh solid var(--mp-acc-ink);border-top:3.6cqh solid transparent;border-bottom:3.6cqh solid transparent;margin-left:1.4cqh}
.mp-rel-txt{position:absolute;left:5cqw;right:5cqw;bottom:6cqh;display:flex;align-items:center;gap:3.5cqw}
.mp-rel-txt img{width:14cqh;height:14cqh;border-radius:2.4cqh;flex:none}
.mp-rel-txt span{display:flex;flex-direction:column;gap:1.6cqh;min-width:0}
.mp-rel-txt small{font:700 max(10px,7cqh)/1 var(--mp-f);color:var(--mp-acc)}
.mp-rel-txt b{font:800 max(12px,10.5cqh)/1.1 var(--mp-f);letter-spacing:-.01em;text-wrap:balance}
.mp-rel-txt em{margin-left:auto;font:600 max(10px,7cqh)/1 var(--mp-f);font-style:normal;opacity:.8;font-variant-numeric:tabular-nums}

/* ---- full window: still our player ---- */
.vbox.mp-full{position:fixed;inset:0;z-index:2147483000;margin:0;border-radius:0;box-shadow:none;background:#000;display:grid;place-items:center;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.vbox.mp-full .mp-stage{width:min(100vw,177.78vh);width:min(100%,177.78dvh)}
.vbox.mp-full .mp-bar{padding-bottom:max(12px,env(safe-area-inset-bottom,0px))}
html.mp-lock,html.mp-lock body{overflow:hidden}
html.mp-lock .bb,html.mp-lock .tn,html.mp-lock .toast:not(.on){visibility:hidden}
html.mp-lock .toast{z-index:2147483001}

/* ---- the 70% step: three short questions (edu.js quiz()) ---- */
.qz{display:flex;flex-direction:column;gap:16px}
.qq{margin:0;padding:0;border:0;min-width:0}
.qq legend{display:flex;gap:9px;align-items:flex-start;width:100%;padding:0;margin:0 0 9px;font:700 15px/1.35 var(--mp-f);color:var(--mp-hi)}
.qq legend i{flex:none;display:grid;place-items:center;width:22px;height:22px;border:1.5px solid var(--mp-line);border-radius:var(--mp-dot);font:800 11.5px/1 var(--mp-f);font-style:normal;color:var(--mp-hi);transition:background .15s,border-color .15s}
.qq.done legend i{background:var(--mp-acc);border-color:var(--mp-acc);color:var(--mp-acc-ink)}
.qq legend small{display:block;margin-top:2px;font-size:12.5px;font-weight:600;color:var(--mp-dim)}
.qo{display:flex;flex-wrap:wrap;gap:6px;padding-left:31px}
.qc{padding:8px 12px;border:1.5px solid var(--mp-line);border-radius:var(--mp-pill);background:var(--mp-field);color:var(--mp-hi);font:600 13.5px/1.25 var(--mp-f);text-align:left;cursor:pointer;transition:border-color .12s,background .12s,color .12s}
.qc:hover{border-color:var(--mp-acc)}
.qc.on{background:var(--mp-acc);border-color:var(--mp-acc);color:var(--mp-acc-ink)}
.qc:focus-visible{outline:2px solid var(--mp-acc);outline-offset:2px}
.qz-go{width:100%}
.qz-go:disabled{opacity:.4;cursor:default}
.qz-go:disabled:hover{background:transparent;color:var(--mp-acc)}
.qz-fine{margin:-6px 0 0;font-size:12px;line-height:1.45;color:var(--mp-dim)}
.qz-fine a{color:inherit}
.pf-go{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 16px;border:1.5px solid var(--mp-acc);border-radius:var(--mp-r);background:transparent;color:var(--mp-acc);font:800 15px/1.1 var(--mp-f);cursor:pointer;text-align:center}
.pf-go:hover{background:var(--mp-acc);color:var(--mp-acc-ink)}
.pf-go:focus-visible{outline:2px solid var(--mp-acc);outline-offset:2px}
.qz.busy .pf-go{opacity:.6;pointer-events:none}
.qz.busy .pf-go::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:mpspin .8s linear infinite}
/* the button on the deal card, and the dialog the questions open in */
.watch .qi{flex:none;width:20px;height:20px;fill:none;stroke:var(--mp-acc);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.qzm{width:min(560px,calc(100% - 24px));max-width:none;max-height:calc(100dvh - 24px);margin:auto;padding:0;border:1px solid var(--mp-line);border-radius:calc(var(--mp-r) + 6px);background:var(--mp-panel);color:var(--mp-hi);box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:auto;overscroll-behavior:contain}
.qzm::backdrop{background:rgba(5,6,10,.74);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.qzm[open]{animation:qzmin .22s ease-out}
@keyframes qzmin{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.qzm-in{display:flex;flex-direction:column;gap:20px;padding:20px 22px 22px}
.qzm-h{display:flex;align-items:center;gap:12px}
.qzm-h img{flex:none;width:46px;height:46px;padding:6px;border-radius:var(--mp-r);background:var(--mp-tile);object-fit:contain}
.qzm-h div{flex:1;min-width:0}
.qzm-h p{margin:0;font:800 13px/1.3 var(--mp-f);color:var(--mp-acc)}
.qzm-h h2{margin:3px 0 0;font:800 22px/1.15 var(--mp-f);color:var(--mp-hi)}
.qzm-x{flex:none;align-self:flex-start;display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--mp-line);border-radius:var(--mp-dot);background:transparent;color:var(--mp-hi);cursor:pointer}
.qzm-x:hover{border-color:var(--mp-acc);color:var(--mp-acc)}
.qzm-x svg{width:16px;height:16px;fill:currentColor}
html.qzm-lock{overflow:hidden}
.soc-msg{margin:0;font-size:14px;line-height:1.45;color:var(--mp-hi)}
.soc-msg:empty{display:none}
.soc-msg.bad{color:#FF8A7A}
@keyframes mpspin{to{transform:rotate(360deg)}}

/* a small tile (phones): the play button and the name only */
@container (max-height:120px){
  .mp-rel-play{top:34%;width:30cqh;height:30cqh;min-width:26px;min-height:26px;margin:-15cqh 0 0 -15cqh}
  .mp-rel-txt{bottom:7cqh}
  .mp-rel-txt img,.mp-rel-txt small,.mp-rel-txt em{display:none}
  .mp-rel-txt b{font-size:11px;text-align:center;width:100%}
  .mp-rel-play i{border-left-width:9px;border-top-width:6px;border-bottom-width:6px;margin-left:2px}
  .mp-rel-txt span{width:100%}
}
@media (max-width:560px){
  .mp-time{font-size:12px}
  .mp-b{width:34px;height:34px}
  .mp-mark span{display:none}
  .mp-bar{padding-top:26px}
  .qo{padding-left:0}
  .qzm-in{padding:16px 16px 18px}
  .qzm-h h2{font-size:20px}
}
@media (prefers-reduced-motion:reduce){ .mp-rel,.mp-bar,.mp-now,.qc{transition:none} .qz.busy .pf-go::before,.qzm[open]{animation:none} }

/* the sticky plugin bar: a soft edge where more plugins sit off screen (edu.js sets .fl / .fr) */
.tn ul.fr{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
.tn ul.fl{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px);mask-image:linear-gradient(90deg,transparent,#000 56px)}
.tn ul.fl.fr{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent)}