/* ==== 63-video.css ==== */
/* Video page (owner: video agent) · prefix vd- · sub-hero from v5 „Кобалт Про“, everything below it is the „Кино“ stage (2026-09-27)
   Sub-hero: the storyboard reel (63-video.js pause button). Scenes: film strip (process), four formats in sync, one lit price sheet.
   Loops run only under .scene.live; everything is still under reduced motion. */
.vd-defs{position:absolute;width:0;height:0;overflow:hidden}
.vd-hero :focus-visible,.vd-addon :focus-visible{outline-color:#fff}
.vd-board :focus-visible,.vd-rate :focus-visible{outline-color:var(--cobalt)}

/* ---------- hero: storyboard reel in a phone ---------- */
.vd-y{color:var(--yellow);font-weight:600;white-space:nowrap}
.vd-visual{position:relative;display:grid;place-items:center;padding-block:12px}
.vd-stage{position:relative;width:clamp(220px,20vw,280px)}
.vd-phone{position:relative;z-index:1;padding:9px;border-radius:44px;background:#0A0D1F;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16),0 44px 80px -30px rgba(0,0,30,.8)}
.vd-screen{position:relative;isolation:isolate;aspect-ratio:9/19.5;overflow:hidden;border-radius:35px;background:#070B52}
.vd-screen::before{content:'';position:absolute;z-index:6;top:2.2%;left:50%;width:30%;height:3.1%;translate:-50% 0;border-radius:99px;background:#000}
.vd-f{position:absolute;inset:0;opacity:0}
.vd-f1{opacity:1;z-index:1}.vd-f2{z-index:2}.vd-f3{z-index:3}.vd-f4{z-index:4}
.vd-f>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.vd-cap{position:absolute;left:50%;bottom:8.5%;translate:-50% 0;width:max-content;max-width:86%;padding:7px 12px;border-radius:10px;background:rgba(7,11,82,.78);color:#fff;font:600 15px/1.3 var(--f);text-align:center;text-wrap:balance}
.vd-endc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding-bottom:6%;text-align:center;color:#fff;background:repeating-radial-gradient(circle at 50% 44%,transparent 0 58px,rgba(255,255,255,.07) 58px 60px),radial-gradient(circle at 50% 44%,#4050FF,#2335FF 50%,#1B2AE0)}
.vd-logo{width:68px;height:68px;margin-bottom:8px;filter:drop-shadow(0 12px 20px rgba(0,0,40,.35))}
.vd-endc b{font-size:22px;line-height:1.15;font-weight:600;letter-spacing:-.02em}
.vd-endc small{font-size:14px;color:rgba(255,255,255,.8)}
.vd-endbtn{margin-top:18px;padding:11px 18px;border-radius:999px;background:var(--yellow);color:var(--ink);font-size:15px;font-weight:600}
.vd-prog{position:absolute;z-index:5;top:7.2%;left:8%;right:8%;height:3px;border-radius:3px;background:rgba(255,255,255,.34);overflow:hidden;-webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(25% - 4px),transparent calc(25% - 4px) 25%);mask:repeating-linear-gradient(90deg,#000 0 calc(25% - 4px),transparent calc(25% - 4px) 25%)}
.vd-prog i{display:block;height:100%;background:#fff;transform:scaleX(.25);transform-origin:0 50%}

.vd-board{position:absolute;z-index:2;right:calc(100% - 64px);top:15%;width:222px;padding:14px 14px 12px;border-radius:22px;background:#fff;color:var(--ink);box-shadow:0 2px 6px rgba(11,18,51,.08),0 30px 60px -22px rgba(3,6,60,.6)}
.vd-board-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.vd-board-h b{font-size:15px;font-weight:600}
/* 44px tap target, 34px visible disc */
.vd-pp{position:relative;display:grid;place-items:center;width:44px;height:44px;margin:-6px -6px -6px 0;padding:0;border:0;border-radius:50%;background:none;color:var(--cobalt);cursor:pointer}
.vd-pp::before{content:'';position:absolute;inset:5px;border-radius:50%;background:var(--cobalt-tint);transition:background-color .25s}
.vd-pp:hover::before{background:#DDE1FF}
.vd-pp .ic{position:relative;width:17px;height:17px;stroke-width:2.4}
.vd-i-play{display:none;fill:currentColor}
.vd-pp[aria-pressed="true"] .vd-i-pause{display:none}
.vd-pp[aria-pressed="true"] .vd-i-play{display:block}
.vd-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.vd-thumbs li{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--muted)}
.vd-thumbs svg{width:100%;aspect-ratio:9/15;border-radius:8px;display:block;box-shadow:0 0 0 1px var(--line)}
.vd-t1 svg{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--cobalt)}
.vd-t1 span{color:var(--cobalt)}
.vd-subs{position:absolute;z-index:2;right:-96px;bottom:21%;display:flex;align-items:center;gap:10px;width:max-content;padding:10px 16px 10px 10px;border-radius:18px;background:#fff;color:var(--ink);font-size:15px;line-height:1.2;box-shadow:0 2px 6px rgba(11,18,51,.08),0 30px 60px -22px rgba(3,6,60,.6)}
.vd-subs b{font-weight:600}
.vd-subs small{display:block;font-size:13px;font-weight:500;color:var(--muted)}
.vd-subs span{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--cobalt);color:#fff;font-size:15px}

@media (prefers-reduced-motion:no-preference){
  .vd-f{animation:vd-frame 12s linear infinite both;animation-delay:var(--d)}
  .vd-f1,.vd-t1 svg,.vd-t1 span{--d:0s}
  .vd-f2,.vd-t2 svg,.vd-t2 span{--d:-9s}
  .vd-f3,.vd-t3 svg,.vd-t3 span{--d:-6s}
  .vd-f4,.vd-t4 svg,.vd-t4 span{--d:-3s}
  .vd-f .vd-cap{animation:vd-cap 12s var(--ease) infinite both;animation-delay:var(--d)}
  .vd-prog i{animation:vd-prog 12s linear infinite}
  .vd-thumbs svg{animation:vd-thumb 12s linear infinite both;animation-delay:var(--d)}
  .vd-thumbs span{animation:vd-num 12s linear infinite both;animation-delay:var(--d)}
  /* the phone and the subtitle card levitate gently; the storyboard card with the pause button stays still */
  .vd-phone{animation:vd-float 8s ease-in-out infinite alternate}
  .vd-subs{animation:vd-float 7s ease-in-out -2s infinite alternate}
  .is-paused .vd-f,.is-paused .vd-cap,.is-paused .vd-prog i,.is-paused .vd-thumbs svg,.is-paused .vd-thumbs span,
  .is-paused .vd-phone,.is-paused .vd-subs{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){.vd-pp{display:none}}
@keyframes vd-frame{0%{opacity:0;transform:scale(1.07)}4%{opacity:1}29%{opacity:1}29.5%,100%{opacity:0;transform:scale(1)}}
@keyframes vd-cap{0%,6%{opacity:0;transform:translateY(8px)}11%,100%{opacity:1;transform:none}}
@keyframes vd-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes vd-thumb{0%,24.6%{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--cobalt)}25%,100%{box-shadow:0 0 0 1px var(--line)}}
@keyframes vd-num{0%,24.6%{color:var(--cobalt)}25%,100%{color:var(--muted)}}
@keyframes vd-float{from{transform:translateY(-7px)}to{transform:translateY(7px)}}


/* ================= below the sub-hero: „Кино“ scenes on the shared stage (2026-09-27) ================= */

/* ---------- 1. process: a real film strip, four frames that play in order ---------- */
.vd-strip{--fx:26px;--fy:46px;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto;column-gap:22px;padding:var(--fy) var(--fx) 0}
/* the film base: a grid item behind the window row, sprocket holes top and bottom */
.vd-strip::before{content:"";grid-area:1/1/2/-1;margin:calc(var(--fy)*-1) calc(var(--fx)*-1);border-radius:18px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='14'%3E%3Crect x='9' y='1' width='14' height='12' rx='3.5' fill='%23C9D2FF' fill-opacity='.22'/%3E%3C/svg%3E") 10px 16px/32px 14px repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='14'%3E%3Crect x='9' y='1' width='14' height='12' rx='3.5' fill='%23C9D2FF' fill-opacity='.22'/%3E%3C/svg%3E") 10px calc(100% - 16px)/32px 14px repeat-x,
    linear-gradient(180deg,#111858,#080C36);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 70px 120px -60px rgba(0,0,0,.9)}
.vd-shot{position:relative;z-index:1;display:grid;grid-row:1/3;grid-template-rows:subgrid}
.vd-shot:nth-child(1){grid-column:1}.vd-shot:nth-child(2){grid-column:2}.vd-shot:nth-child(3){grid-column:3}.vd-shot:nth-child(4){grid-column:4}
.vd-win{position:relative;isolation:isolate;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:#0B1233;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 18px 40px -22px rgba(0,0,0,.8)}
.vd-win>svg{display:block;width:100%;height:100%}
.vd-win svg .sq{transform-box:fill-box;transform-origin:50% 50%}
html.js .play .vd-win .vd-wave.sq{transform-origin:50% 50%}
/* the projector gate: a soft light that moves frame to frame (the one loop of the scene) */
.vd-win::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;opacity:0;
  box-shadow:inset 0 0 0 2.5px #fff;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 45%)}
.vd-shot-c{display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;align-items:center;column-gap:14px;padding-top:calc(var(--fy) + 24px)}
.vd-no{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font:600 15px/1 var(--f);color:#fff;
  background:linear-gradient(150deg,rgba(255,255,255,.18),rgba(255,255,255,.04));box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.vd-no::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 8px rgba(255,255,255,.12);opacity:0}
.vd-shot-c h3{font-size:24px;line-height:1.2;font-weight:600;letter-spacing:-.02em;color:var(--on)}
/* frame 1: the client's one job, an „Одобрено“ state on the storyboard sheet (HTML, so it never drops under 13px) */
.vd-ok{position:absolute;z-index:3;right:9.5%;bottom:11%;display:inline-flex;align-items:center;gap:5px;padding:6px 11px 6px 8px;border-radius:999px;background:var(--cobalt);color:#fff;font:600 13px/1 var(--f);white-space:nowrap;box-shadow:0 0 0 3px #fff,0 10px 20px -6px rgba(35,53,255,.75)}
.vd-ok .ic{width:15px;height:15px;stroke-width:2.8}

html.js .vd-strip::before{opacity:0}
html.js .vd-strip.play::before{animation:vdFeed 1.4s var(--ease) .4s both}
@keyframes vdFeed{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
/* desktop: the film runs off both screen edges, the frames stay on a 1320 column */
@media (min-width:1101px){
  .vd-process{overflow-x:clip;padding-top:clamp(56px,5.5vw,96px)}
  .vd-process .scn-head,.vd-price .scn-head{margin-bottom:40px}
  .vd-price .scn-foot{margin-top:32px}
  .vd-strip{--fx:max(64px,calc(50vw - 660px));--fy:40px;width:100vw;margin-inline:calc(50% - 50vw);column-gap:14px}
  .vd-shot-c{padding-top:calc(var(--fy) + 14px)}
  .vd-strip::before{border-radius:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(255,255,255,.09),0 70px 120px -60px rgba(0,0,0,.9)}
}
@media (prefers-reduced-motion:no-preference){
  .vd-win::after,.vd-no::before{animation:vdGate 10s linear infinite paused;animation-delay:calc(3.8s + var(--k,0) * 2.5s)}
  .vd-strip.live .vd-win::after,.vd-strip.live .vd-no::before{animation-play-state:running}
}
@keyframes vdGate{0%{opacity:0}4%{opacity:1}22%{opacity:1}26%,100%{opacity:0}}

/* ---------- 2. formats: one clip, four frames playing in sync ---------- */
.vd-fmts{container-type:inline-size;display:flex;justify-content:center;align-items:flex-start;gap:40px}
.vd-fmt{--fh:min(300px,calc((100cqw - 200px)/4.1403));display:grid;grid-template-rows:var(--fh) auto auto;justify-items:center;text-align:center}
.vd-fr{position:relative;align-self:end;flex:none}
.vd-fr-in{position:relative;isolation:isolate;width:calc(var(--fh)*var(--r));height:var(--fh);border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 40px 80px -34px rgba(0,0,0,.85)}
.vd-fs{position:absolute;inset:0;width:100%;height:100%;display:block}
.vd-fs1{transform-origin:50% 60%}
.vd-fs2{opacity:0}
.vd-mute{position:absolute;z-index:2;right:8px;top:8px;width:26px;height:26px;padding:5px;border-radius:50%;background:rgba(7,11,82,.6);color:#fff;stroke-width:2.2}
.vd-fcap{position:absolute;z-index:2;left:5%;right:5%;bottom:12%;display:grid;justify-items:center;align-items:end}
.vd-fcap>span{grid-area:1/1;max-width:100%;padding:5px 9px;border-radius:7px;background:rgba(7,11,82,.84);color:#fff;font:600 13px/1.3 var(--f);text-align:center;text-wrap:balance}
.vd-fcap>span+span{opacity:0}
.vd-fmt:first-child .vd-fcap>span{font-size:15px;padding:6px 11px}
.vd-fcap b{font-weight:inherit}
.vd-sh{display:none}
.vd-fr-r{margin-top:24px;font-size:32px;line-height:1;font-weight:600;letter-spacing:-.03em;color:var(--on)}
.vd-fr-w{margin-top:10px;white-space:nowrap;font-size:16px;line-height:1.45;color:var(--on-2)}
@media (prefers-reduced-motion:no-preference){
  .vd-fs1{animation:vd-fa 10s linear -1s infinite paused}
  .vd-fs2{animation:vd-fb 10s linear -1s infinite paused}
  .vd-fcap>span:first-child{animation:vd-c1 10s linear -1s infinite paused}
  .vd-fcap>span+span{animation:vd-c2 10s linear -1s infinite paused}
  .scene.live .vd-fs1,.scene.live .vd-fs2,.scene.live .vd-fcap>span{animation-play-state:running}
}
@keyframes vd-fa{0%{transform:scale(1)}50%{transform:scale(1.06)}51%,100%{transform:scale(1)}}
@keyframes vd-fb{0%,46%{opacity:0;transform:scale(1.05)}50%{opacity:1}96%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes vd-c1{0%,2%{opacity:0;transform:translateY(5px)}6%,44%{opacity:1;transform:none}47%,100%{opacity:0;transform:none}}
@keyframes vd-c2{0%,50%{opacity:0;transform:translateY(5px)}54%,93%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}

/* ---------- 3. price: one lit sheet, three lengths on a 30 s ruler ---------- */
.vd-rate{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:1120px;margin-inline:auto;padding:10px;color:var(--ink)}
/* the sheet itself is lit almost at once (.2s), then settles; its contents fill in after */
html.js .play .vd-rate.sq{animation-name:vdLit;animation-duration:.9s}
@keyframes vdLit{0%{opacity:0;transform:translateY(28px) scale(1.03)}22%{opacity:1}100%{opacity:1;transform:none}}
.vd-tier{display:flex;flex-direction:column;padding:30px 34px 28px}
.vd-tier+.vd-tier{border-left:1px solid var(--line)}
.vd-dur{display:flex;align-items:baseline;gap:12px}
.vd-dur b{font-size:clamp(64px,6vw,92px);line-height:.9;font-weight:600;letter-spacing:-.05em;color:var(--ink)}
.vd-dur span{font-size:18px;font-weight:500;color:var(--muted)}
.vd-ruler{position:relative;height:10px;margin-top:32px;border-radius:10px;
  background:#EDEFF8}
.vd-ruler::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:repeating-linear-gradient(90deg,transparent 0 calc(100% / 6 - 2px),#D5DAEC calc(100% / 6 - 2px) calc(100% / 6))}
.vd-ruler i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--len) / 30 * 100%);border-radius:10px;background:linear-gradient(90deg,#8FA0FF,var(--cobalt))}
/* the scale ends, under the first ruler only */
.vd-scale{position:absolute;left:0;right:0;top:calc(100% + 8px);display:flex;justify-content:space-between;font:500 14px/1 var(--f);color:var(--muted)}
.vd-tprice{margin-top:34px;font-size:clamp(34px,3.2vw,46px);line-height:1.1;font-weight:600;letter-spacing:-.04em;white-space:nowrap;color:var(--ink)}
/* one yellow per view: the header CTA keeps the yellow, the three prices get a cobalt-tint highlighter */
.vd-tprice span{padding-inline:2px;background:linear-gradient(transparent 64%,rgba(143,160,255,.45) 64% 90%,transparent 90%)}
.vd-tier .btn{margin-top:24px}

/* what every price holds: six icon tiles; under them the monthly videos of Растеж / Пълен as two plan pills */
.vd-incl{display:grid;justify-items:center;gap:16px;max-width:1120px;margin:36px auto 0;text-align:center}
.vd-inc-k{font-size:16px;font-weight:500;line-height:1.3;color:var(--on-2)}
.vd-inc{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;width:100%}
.vd-inc li{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 10px 18px;border-radius:20px;font-size:16px;font-weight:600;line-height:1.25;color:var(--on);
  background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(255,255,255,.13)}
.vd-inc-i{display:grid;place-items:center;width:50px;height:50px;border-radius:15px;color:#DDE2FF;background:rgba(143,160,255,.18);box-shadow:inset 0 0 0 1px rgba(201,210,255,.2)}
.vd-inc-i .ic{width:25px;height:25px;stroke-width:1.8}
.vd-addon{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:8px;font-size:17px;font-weight:500;line-height:1.3;color:var(--on)}
.vd-pl{padding:7px 13px;border-radius:999px;background:var(--cobalt);color:#fff;font-size:15px;font-weight:600;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.vd-addon-t{display:inline-flex;align-items:center;gap:8px;margin-left:6px}
.vd-addon-t .ic{width:16px;height:16px;color:#C9D2FF}

/* ---------- responsive ---------- */
@media (min-width:901px) and (max-width:1100px){
  /* small laptops: the copy-to-stage gap is only 126–178px, so the storyboard card is narrower and overhangs 110px, not 158px */
  .vd-board{width:190px;right:calc(100% - 80px)}
}
@media (max-width:1100px){
  /* the film runs down: one column of frames, sprocket holes left and right, the captions on the film */
  .vd-strip{--fx:44px;grid-template-columns:minmax(0,1fr);max-width:560px;margin-inline:auto;padding:24px var(--fx) 6px;border-radius:18px;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='32'%3E%3Crect x='1' y='9' width='12' height='14' rx='3.5' fill='%23C9D2FF' fill-opacity='.22'/%3E%3C/svg%3E") 14px 10px/14px 32px repeat-y,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='32'%3E%3Crect x='1' y='9' width='12' height='14' rx='3.5' fill='%23C9D2FF' fill-opacity='.22'/%3E%3C/svg%3E") calc(100% - 14px) 10px/14px 32px repeat-y,
      linear-gradient(180deg,#111858,#080C36);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 70px 120px -60px rgba(0,0,0,.9)}
  .vd-strip::before{display:none}
  .vd-shot,.vd-shot:nth-child(n){grid-column:1;grid-row:auto;display:block}
  .vd-shot-c{padding:20px 2px 34px}
  .vd-shot:last-child .vd-shot-c{padding-bottom:22px}
  html.js .vd-strip{opacity:0}
  html.js .vd-strip.play{animation:vdFeedY 1.3s var(--ease) .4s both}
}
@media (min-width:701px) and (max-width:1100px){
  /* tablets: each frame with its caption beside it, still one strip running down */
  .vd-strip{max-width:880px;padding-block:28px 10px}
  .vd-shot,.vd-shot:nth-child(n){display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.5fr);gap:28px;align-items:center;padding-bottom:18px}
  .vd-shot-c{grid-template-columns:minmax(0,1fr);row-gap:12px}
  .vd-shot-c,.vd-shot:last-child .vd-shot-c{padding:0}
}
@keyframes vdFeedY{from{opacity:0;clip-path:inset(0 0 100% 0 round 18px)}to{opacity:1;clip-path:inset(0 0 0 0 round 18px)}}
@media (max-width:900px){
  .vd-visual{padding-block:24px 8px}
  /* price: the sheet stacks; length on the left, name + price on the right, ruler under both */
  .vd-rate{grid-template-columns:1fr;padding:4px 0}
  .vd-tier+.vd-tier{border-left:0;border-top:1px solid var(--line)}
  .vd-tier{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"dur price" "ruler ruler" "btn btn";column-gap:18px;padding:28px 26px 26px}
  .vd-dur{grid-area:dur;flex-direction:column;align-items:flex-start;gap:6px}
  .vd-dur b{font-size:60px}
  .vd-dur span{font-size:16px}
  .vd-tprice{grid-area:price;justify-self:end;align-self:center;margin-top:0;font-size:34px}
  .vd-ruler{grid-area:ruler;margin-top:24px}
  .vd-tier .btn{grid-area:btn;margin-top:24px}
  .vd-tier:first-child .btn{margin-top:40px}
  .vd-inc{grid-template-columns:repeat(3,minmax(0,1fr));max-width:560px}

  /* formats: one height for all four (the shapes differ only in width), rows paired by width: 9:16 + 16:9 fill row 1, 4:5 + 1:1 below.
     Each item is exactly as wide as its frame; the label under it wraps inside that width. */
  .vd-fmts{flex-wrap:wrap;justify-content:center;gap:32px 14px;max-width:484px;margin-inline:auto}
  .vd-fmt{--fh:min(200px,calc((100cqw - 15px)/2.3403));width:calc(var(--fh)*var(--r));grid-template-rows:var(--fh) auto auto}
  .vd-fr-w{white-space:normal;text-wrap:balance}
  .vd-fmt:nth-child(2){order:1}
  .vd-fmt:nth-child(1){order:2}
  .vd-fmt:nth-child(3){order:3}
  .vd-fmt:nth-child(4){order:4}
}
@media (max-width:700px){
  /* hero: phone on the right, the two cards stacked on its left edge, all inside the gutter */
  .vd-visual{padding-block:20px 4px}
  .vd-stage{width:100%;max-width:360px}
  .vd-phone{width:190px;margin-left:auto;margin-right:max(0px,calc(50% - 160px));padding:7px;border-radius:36px}
  .vd-screen{border-radius:29px}
  .vd-cap{font-size:13px;padding:6px 10px}
  .vd-endc b{font-size:18px}
  .vd-endbtn{font-size:13px;padding:9px 14px}
  .vd-board{left:max(0px,calc(50% - 160px));right:auto;top:9%;width:160px;padding:10px 10px 9px;border-radius:18px}
  .vd-board-h{margin-bottom:8px}
  .vd-board-h b{font-size:13px}
  .vd-thumbs{gap:5px}
  .vd-thumbs svg{border-radius:6px}
  .vd-subs{left:calc(max(0px,calc(50% - 160px)) + 14px);right:auto;top:auto;bottom:14%;padding:8px 12px 8px 8px;font-size:14px;border-radius:14px;gap:8px}
  .vd-subs span{width:28px;height:28px;font-size:13px;border-radius:8px}

  /* process film on a phone: narrower holes margin so the frames stay big */
  .vd-strip{--fx:36px}
  .vd-strip{background-position:10px 10px,calc(100% - 10px) 10px,0 0}
  .vd-shot-c h3{font-size:22px}

  /* small frames: captions stay on one line, low in the frame, so the picture stays visible */
  .vd-fcap{bottom:7%;left:3%;right:3%}
  .vd-fmt:first-child .vd-fcap>span,.vd-fcap>span{font-size:13px;line-height:1.2;padding:3px 5px;white-space:nowrap}
  .vd-fmt:nth-child(2) .vd-fcap>span{padding-inline:3px}
  .vd-lg{display:none}.vd-sh{display:inline}
  .vd-mute{width:22px;height:22px;padding:4px;right:6px}
  .vd-fr-r{margin-top:16px;font-size:24px}
  .vd-fr-w{font-size:15px}

  .vd-tier{padding:20px 20px 18px}
  .vd-tier .btn{margin-top:18px;min-height:48px;font-size:15px}
  .vd-tier:first-child .btn{margin-top:32px}
  .vd-dur b{font-size:54px}
  .vd-tprice{font-size:30px}
  .vd-incl{margin-top:28px;gap:14px}
  .vd-inc{gap:8px}
  .vd-inc li{gap:10px;padding:16px 6px 14px;border-radius:16px;font-size:14px}
  .vd-inc-i{width:44px;height:44px;border-radius:13px}
  .vd-addon{font-size:16px}
  .vd-addon-t{flex-basis:100%;justify-content:center;margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  html.js .vd-strip,html.js .vd-strip::before{opacity:1;animation:none;clip-path:none}
}