/* Explainer video: homepage button, compact page buttons and pop-up player. JS: /js/fz-video.js */
.fzv-play{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#E3262E;box-shadow:0 4px 10px -3px rgba(227,38,46,.6)}
.fzv-play svg{width:46%;height:46%;margin-left:2px;fill:#fff}

/* homepage: still button under the search box */
.fzv-home{margin:14px 0 0;text-align:center}
.fzv-pill{display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:7px 18px 7px 7px;border:1.5px solid #e8e8ef;border-radius:99px;background:#fff;color:#14141b;
  font:500 .95rem "Plus Jakarta Sans",system-ui,sans-serif;cursor:pointer;text-align:left;box-shadow:0 1px 2px rgba(20,20,40,.05),0 10px 26px -14px rgba(20,20,60,.35);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.fzv-pill:hover{transform:translateY(-2px);border-color:#f3b4b7;box-shadow:0 1px 2px rgba(20,20,40,.05),0 16px 32px -14px rgba(227,38,46,.45)}
.fzv-pill:focus-visible{outline:3px solid #2F5BEA;outline-offset:3px}
.fzv-pill b{font-weight:800}
.fzv-pill .fzv-w{color:#c81e25;font-weight:700;white-space:nowrap}
.fzv-dur{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:99px;background:#f2f2f7;color:#5d5d6b;font:700 .74rem "Plus Jakarta Sans",system-ui,sans-serif;vertical-align:1px}
.fzv-home .fzv-pill{animation:fzv-fade .6s ease .15s both} /* opacity only: space is reserved, so no layout jump */
@keyframes fzv-fade{from{opacity:0}to{opacity:1}}
@media (max-width:560px){
  .fzv-home{margin-top:10px}
  .fzv-pill{font-size:.86rem;line-height:1.25;padding:6px 14px 6px 6px}
  .fzv-pill b{display:block}
}

/* compact card (Artwork Guidelines, The Art Dr) */
.fzv-card{display:flex;align-items:center;gap:12px;width:100%;max-width:440px;margin:14px 0 0;padding:8px 14px 8px 8px;border:1.5px solid #e8e8ef;border-radius:16px;background:#fff;
  color:#14141b;font:500 .88rem/1.35 "Plus Jakarta Sans",system-ui,sans-serif;text-align:left;cursor:pointer;transition:border-color .18s,box-shadow .18s,transform .18s}
.fzv-card:hover{border-color:#f3b4b7;transform:translateY(-1px);box-shadow:0 12px 26px -16px rgba(227,38,46,.5)}
.fzv-card:focus-visible{outline:3px solid #2F5BEA;outline-offset:3px}
.fzv-thumb{position:relative;flex:none;width:96px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#eee}
.fzv-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.fzv-thumb .fzv-play{position:absolute;left:50%;top:50%;width:30px;height:30px;transform:translate(-50%,-50%)}
.fzv-card b{display:block;font-weight:800;font-size:.95rem}
.fzv-card .fzv-s{color:#5d5d6b}

/* small link-style button (order pages' artwork step, inside The Art Director) */
.fzv-link{display:inline-flex;align-items:center;gap:9px;margin:0 0 14px;padding:5px 14px 5px 5px;border:1.5px solid #e8e8ef;border-radius:99px;background:#fff;color:#14141b;
  font:700 .88rem "Plus Jakarta Sans",system-ui,sans-serif;cursor:pointer;text-align:left;transition:border-color .18s,box-shadow .18s}
.fzv-link .fzv-play{width:28px;height:28px}
.fzv-link:hover{border-color:#f3b4b7;box-shadow:0 8px 20px -12px rgba(227,38,46,.5)}
.fzv-link:focus-visible{outline:3px solid #2F5BEA;outline-offset:3px}
.fzv-link .fzv-dur{margin-left:2px}

/* pop-up player */
.fzv-lock,.fzv-lock body{overflow:hidden}
.fzv-modal{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:64px 12px 24px;background:rgba(12,12,24,.86);opacity:0;transition:opacity .2s ease}
.fzv-modal[hidden]{display:none}
.fzv-modal.fzv-in{opacity:1}
.fzv-box{width:min(1000px,100%,calc((100vh - 110px) * 16 / 9));aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
.fzv-frame,.fzv-frame video,.fzv-frame iframe{display:block;width:100%;height:100%;border:0;background:#000}
.fzv-x{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.fzv-x svg{width:22px;height:22px;fill:none;stroke:#14141b;stroke-width:2.6;stroke-linecap:round}
.fzv-x:focus-visible{outline:3px solid #ffd200;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.fzv-home .fzv-pill{animation:none}.fzv-modal{transition:none}}

/* 19 Oct 2026: video ON HOLD (no longer matches the site). Hidden unless js/fz-video.js sets VIDEO_ENABLED = true
   (it then adds class fzv-on to <html>). Hidden by CSS, not JS, so nothing jumps on load. */
html:not(.fzv-on) [data-fz-video],html:not(.fzv-on) .fzv-home,html:not(.fzv-on) .fzv-ck{display:none!important}