/* Kloudfuse customer video. Layered on kf-design.css, which is untouched.
   Poster-first: nothing from YouTube loads until a click. */
/* ===================================================== customer video proof */

/* The action on a story card. Sits beside "Read story" where a customer has
   both formats, and stands alone where the video is the only proof. */
.sc-foot .watch{display:inline-flex;align-items:center;gap:7px;font-weight:600;
  color:var(--link);background:none;border:0;padding:0;font:inherit;
  font-size:inherit;cursor:pointer}
.sc-foot .watch:hover{gap:10px}
.sc-foot .watch .pl{width:17px;height:17px;border-radius:50%;flex:none;
  display:grid;place-items:center;background:var(--link);color:#fff}
.sc-foot .watch .pl .ptri{width:9px;height:9px}
.sc-foot .watch:hover .pl{background:var(--kf-ink)}
/* a card whose only action is the video still reads as a real story, not a
   placeholder -- which is what "Coming soon" was making Cactus look like */
.scard.has-video .sc-foot{gap:16px}

/* --------------------------------------------------- the in-page video block
   Used on a customer story page. A poster with a play control, not an iframe:
   the page stays light until someone asks for the video. */
.cv{margin:0}
.cv-lede{max-width:62ch}
.cv-frame{position:relative;display:block;width:100%;aspect-ratio:16/9;
  margin-top:26px;border-radius:var(--r-panel);overflow:hidden;
  border:1px solid var(--line);background:var(--kf-ink);cursor:pointer;
  padding:0}
.cv-frame img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease}
.cv-frame:hover img{transform:scale(1.015)}
.cv-frame::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(29,14,23,.05),rgba(29,14,23,.42))}
/* The play control. A frosted disc with a hairline ring rather than a flat
   white circle, and a triangle that sits on its centroid: centring the
   bounding box instead is what left the old one looking pushed off-centre,
   and the margin-left:3px patched over it at exactly one size. */
.cv-play{position:absolute;inset:0;margin:auto;width:68px;height:68px;
  border-radius:50%;display:grid;place-items:center;z-index:1;
  color:var(--kf-ink);background:rgba(255,253,252,.93);
  -webkit-backdrop-filter:blur(7px) saturate(150%);
  backdrop-filter:blur(7px) saturate(150%);
  box-shadow:0 14px 34px -14px rgba(29,14,23,.66),
             inset 0 0 0 1px rgba(255,255,255,.7);
  transition:background .22s ease,color .22s ease,transform .22s ease,
             box-shadow .22s ease}
.cv-frame:hover .cv-play,.cv-frame:focus-visible .cv-play{
  background:var(--action);color:#FFFDFC;transform:scale(1.07);
  box-shadow:0 20px 42px -14px rgba(244,95,57,.62),
             inset 0 0 0 1px rgba(255,255,255,.28)}
.cv-play .ptri{width:30px;height:30px}

/* One triangle for every play surface. The round line join gives it soft
   corners at any size, and the geometry carries its own optical offset, so
   the same markup drops into a 68px disc and a 17px badge alike. */
.ptri{display:block;fill:currentColor;stroke:currentColor;stroke-width:3;
  stroke-linejoin:round;stroke-linecap:round}
.cv-badge{position:absolute;top:16px;left:18px;z-index:1;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;background:rgba(29,14,23,.55);
  border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:5px 11px;
  backdrop-filter:blur(4px)}
.cv-cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  margin-top:16px}
.cv-cap b{font-size:15px;color:var(--fg)}
.cv-cap span{font-size:14px;color:var(--fg-3)}

/* ------------------------------------------------------------- the lightbox
   One dialog for the whole page. The iframe is built on open and destroyed on
   close, so nothing from YouTube is requested until a person asks for it, and
   nothing keeps playing behind a closed dialog. */
.cv-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  padding:clamp(16px,4vw,48px);background:rgba(20,9,15,.82);
  backdrop-filter:blur(6px)}
.cv-modal[hidden]{display:none}
.cv-modal .cv-box{position:relative;width:min(100%,1080px);aspect-ratio:16/9;
  background:#000;border-radius:var(--r-panel);overflow:hidden;
  box-shadow:0 40px 120px -40px rgba(0,0,0,.8)}
.cv-modal iframe{width:100%;height:100%;border:0;display:block}
/* the dialog's own chrome: Close, plus a permanent escape hatch to YouTube so
   an embed that fails for any reason is never a dead end */
.cv-bar{position:absolute;top:-46px;right:0;left:0;display:flex;
  justify-content:flex-end;align-items:center;gap:10px}
.cv-close,.cv-out{height:34px;padding:0 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.10);
  color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.cv-close:hover,.cv-out:hover{background:rgba(255,255,255,.2)}
@media (max-width:640px){.cv-bar{top:auto;bottom:-46px;justify-content:center}}

/* --------------------------------------------------- embed-unavailable panel
   YouTube validates the embedding page by its Referer. A page opened straight
   off disk (file://) sends none, so the player answers with "Error 153" no
   matter how the video is configured. Rather than hand that panel to whoever
   opened the preview, say what happened and offer the real link. */
.cv-fall{position:absolute;inset:0;display:grid;align-content:center;
  justify-items:start;gap:12px;padding:clamp(22px,5vw,52px);
  background:var(--kf-ink);color:#fff}
.cv-fall b{font-size:clamp(17px,2.2vw,21px);font-weight:650;line-height:1.25}
.cv-fall p{margin:0;max-width:56ch;font-size:14.5px;line-height:1.6;
  color:rgba(255,255,255,.72)}
.cv-fall .cv-out{background:var(--action);border-color:transparent;height:38px;
  padding:0 18px;margin-top:4px}
@media (prefers-reduced-motion:reduce){
  .cv-frame img,.cv-play{transition:none}
  .cv-frame:hover img{transform:none}
}