/* Vyve page header - shared by lease-to-own.html and rideshare.html.

   Light grey, a curve of Vyve red rising at the bottom, centred text, and one white
   card that shows the offer in a single picture. The same layout on every width: on a
   phone everything stacks; on a laptop it stays centred and the card turns sideways
   (two columns) so it fills the width instead of floating in a corner. */

body nav#nb{background:#0A0B0D!important;}

.vh{position:relative;overflow:hidden;padding:80px 20px 34px;text-align:center;color:#121316;
  background:
    radial-gradient(140% 52% at 50% 100%,#E8001D 0,#C80019 60%,transparent 60.4%),
    radial-gradient(80% 40% at 90% 10%,rgba(232,0,29,.10),transparent 70%),
    linear-gradient(180deg,#F7F7F9,#EFF0F3);}
.vh-in{max-width:1100px;margin:0 auto;}
.vh-eb{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#E8001D;font-weight:800;margin-bottom:14px;}
.vh-eb i{width:22px;height:2px;background:#E8001D;}
.vh-h1{font-weight:900;letter-spacing:-.035em;font-size:40px;line-height:1.02;margin:0;color:#121316;}
.vh-h1 span{color:#E8001D;}
.vh-nw{white-space:nowrap;}
/* a longer headline steps down on small phones so no line strands a single word */
@media(max-width:860px){.vh-h1-long{font-size:clamp(31px,9.6vw,37px);}
  .vh-h1-long span.vh-nw{display:block;}.vh-h1-long br{display:none;}}
.vh-lead{color:#6B7079;font-size:15px;line-height:1.55;max-width:330px;margin:12px auto 0;}
.vh-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:54px;margin-top:20px;
  border-radius:14px;background:#E8001D;color:#fff!important;font-weight:800;font-size:15.5px;text-decoration:none;
  box-shadow:0 10px 24px rgba(232,0,29,.28);transition:transform .2s,box-shadow .2s;}
.vh-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(232,0,29,.36);}
.vh-cta svg,.vh svg.vh-i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.vh-note{color:#6B7079;font-size:12.5px;margin-top:9px;}
.vh-links{display:flex;justify-content:center;gap:22px;margin-top:8px;}
.vh-links a{font-size:13.5px;font-weight:700;color:#121316;text-decoration:none;}

/* the card */
.vh-card{position:relative;margin:22px auto 0;max-width:400px;background:#fff;border-radius:22px;padding:16px;
  text-align:left;box-shadow:0 22px 56px rgba(18,19,22,.16);}
.vh-flag{position:absolute;left:-8px;top:-12px;display:flex;align-items:center;gap:6px;background:#121316;color:#fff;
  font-size:11px;font-weight:800;padding:6px 11px;border-radius:999px;box-shadow:0 8px 18px rgba(0,0,0,.18);}
.vh-flag svg{width:13px;height:13px;color:#FF5A6E;}
.vh-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.vh-who{display:flex;align-items:center;gap:10px;}
.vh-av{width:36px;height:36px;border-radius:11px;background:#F4F5F7;display:grid;place-items:center;color:#121316;flex:none;}
.vh-av svg{width:19px;height:19px;}
.vh-who b{display:block;font-size:14px;font-weight:800;}
.vh-who small{font-size:11.5px;color:#6B7079;font-weight:600;}
.vh-tag{font-size:10.5px;font-weight:800;color:#16A34A;background:#E7F6EC;padding:5px 9px;border-radius:999px;white-space:nowrap;}
.vh-mid{display:flex;align-items:center;gap:12px;margin:12px 0 8px;}
.vh-ring{width:58px;height:58px;flex:none;}
.vh-ring circle:last-child{transition:stroke-dashoffset 1.6s cubic-bezier(.16,1,.3,1);}
.vh-big{font-size:28px;font-weight:900;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;}
.vh-big small{font-size:14px;color:#6B7079;letter-spacing:0;}
.vh-sm{font-size:12px;color:#6B7079;font-weight:600;margin-top:4px;}
.vh-chips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px;}
.vh-chips span{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;background:#F4F5F7;
  border-radius:999px;padding:5px 9px;}
.vh-chips span:before{content:"";width:6px;height:6px;border-radius:50%;background:#16A34A;}
.vh-rows{border-top:1px solid #F0F1F3;}
.vh-rw{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid #F0F1F3;font-size:13px;}
.vh-rw:last-child{border-bottom:0;padding-bottom:0;}
.vh-rw span{display:flex;align-items:center;gap:8px;color:#6B7079;font-weight:600;}
.vh-rw b{font-weight:800;}
.vh-rw i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:none;}
.vh-rw i.ok{background:#16A34A;color:#fff;}
.vh-rw i.ok svg{width:12px;height:12px;stroke-width:3;}
.vh-rw i.pend{border:2px dashed #C9CDD3;}
.vh-opt,.vh-ex{display:none;}
.vh-ex{font-size:10.5px;color:#9AA0A8;margin-top:10px;text-align:center;}
@media(prefers-reduced-motion:reduce){.vh-ring circle:last-child{transition:none;}}

/* laptop: same centred column, the card turns sideways */
@media(min-width:861px){
  .vh{padding:96px 40px 60px;
    background:
      radial-gradient(64% 40% at 50% 100%,#E8001D 0,#C80019 60%,transparent 60.4%),
      radial-gradient(40% 50% at 92% 0%,rgba(232,0,29,.09),transparent 70%),
      radial-gradient(40% 50% at 8% 10%,rgba(232,0,29,.05),transparent 70%),
      linear-gradient(180deg,#F7F7F9,#EFF0F3);}
  .vh-h1{font-size:clamp(50px,4.8vw,66px);}
  .vh-lead{font-size:17px;max-width:540px;margin-top:16px;}
  .vh-cta{display:inline-flex;width:auto;height:56px;padding:0 34px;margin-top:26px;font-size:16px;}
  .vh-note{margin-top:12px;}
  .vh-card{max-width:760px;margin:36px auto 0;padding:22px 26px;display:grid;grid-template-columns:1fr 1.15fr;
    column-gap:30px;align-items:center;}
  .vh-top{grid-column:1/-1;padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid #F0F1F3;}
  .vh-left{grid-column:1;}
  .vh-rows{grid-column:2;border-top:0;}
  .vh-rw:first-child{padding-top:0;}
  .vh-rw:last-child{border-bottom:0;}
  .vh-ring{width:84px;height:84px;}
  .vh-big{font-size:34px;}
  .vh-mid{margin:8px 0;}
  .vh-opt{display:flex;}
  .vh-ex{display:block;grid-column:1/-1;}
}

/* ── Dark variant (rideshare) ─────────────────────────────────────────────────────
   A charcoal gradient with two soft red glows, like the home page's dark hero, so the
   white card and the red button carry the page. Text flips to white; the card stays white. */
.vh.vh-dark{color:#fff;
  background:
    radial-gradient(55% 45% at 85% 8%,rgba(232,0,29,.28),transparent 70%),
    radial-gradient(55% 40% at 0% 100%,rgba(232,0,29,.20),transparent 70%),
    linear-gradient(180deg,#1B1C21 0%,#101114 60%,#0B0C0E 100%);}
.vh-dark .vh-h1{color:#fff;}
.vh-dark .vh-lead,.vh-dark .vh-note{color:rgba(255,255,255,.72);}
.vh-dark .vh-links a{color:#fff;}
.vh-dark .vh-card{box-shadow:0 26px 70px rgba(0,0,0,.45);}
@media(min-width:861px){
  .vh.vh-dark{background:
    radial-gradient(40% 55% at 88% 6%,rgba(232,0,29,.26),transparent 70%),
    radial-gradient(40% 50% at 6% 100%,rgba(232,0,29,.18),transparent 70%),
    linear-gradient(180deg,#1B1C21 0%,#101114 60%,#0B0C0E 100%);}
}

/* ── Car on the card ──────────────────────────────────────────────────────────────
   A cut-out car breaks the card's top corner and runs off the edge of the screen, so
   it reads as driving in rather than sitting on top. The top row makes room for it,
   so it never covers a word. Rideshare: from the right. Lease to own: from the left. */
.vh-car{position:absolute;z-index:2;pointer-events:none;height:auto;
  filter:drop-shadow(0 16px 14px rgba(0,0,0,.28));animation:vhCarIn 1s cubic-bezier(.16,1,.3,1) .15s both;}
.vh-car-r{width:228px;right:-62px;top:-70px;}
.vh-car-l{width:236px;left:-66px;top:-70px;transform:scaleX(-1);animation-name:vhCarInL;}
.vh-has-car-r .vh-top{padding-right:132px;}
.vh-has-car-l .vh-top{padding-left:150px;}
.vh-has-car-l .vh-av{display:none;}
.vh-has-car-r .vh-flag{left:-8px;}
.vh-has-car-l .vh-flag{left:auto;right:-8px;}
@media(max-width:860px){.vh-has-car-r .vh-tag,.vh-has-car-l .vh-tag{display:none;}}
@keyframes vhCarIn{from{opacity:0;transform:translateX(70px);}to{opacity:1;transform:none;}}
@keyframes vhCarInL{from{opacity:0;transform:scaleX(-1) translateX(70px);}to{opacity:1;transform:scaleX(-1);}}
@media(min-width:861px){
  .vh-car-r{width:360px;right:-170px;top:-104px;}
  .vh-car-l{width:370px;left:-178px;top:-104px;}
  .vh-has-car-r .vh-top{padding-right:190px;}
  .vh-has-car-l .vh-top{padding-left:200px;}
}
@media(prefers-reduced-motion:reduce){.vh-car{animation:none;}}

/* ── Scroll cue, the same one the old rideshare header had ───────────────────────
   White, because it sits on the red curve (light pages) or the dark gradient. */
.vh-scroll{display:flex;justify-content:center;margin:20px auto 0;background:none;border:0;padding:6px;cursor:pointer;}
.vh-mouse{position:relative;display:block;width:4px;height:46px;border-radius:4px;background:rgba(255,255,255,.3);overflow:hidden;}
.vh-mouse i{position:absolute;left:0;top:0;width:4px;height:18px;border-radius:4px;background:#fff;animation:vhLine 1.6s cubic-bezier(.6,0,.4,1) infinite;}
@keyframes vhLine{0%{transform:translateY(-18px)}100%{transform:translateY(46px)}}
@keyframes vhWheel{0%{opacity:0;transform:translateY(-2px)}30%{opacity:1}70%{opacity:1;transform:translateY(10px)}100%{opacity:0;transform:translateY(12px)}}
@media(min-width:861px){
  .vh-scroll{margin-top:26px;}
  .vh-mouse{width:22px;height:34px;border:2px solid rgba(255,255,255,.8);border-radius:12px;background:none;overflow:visible;}
  .vh-mouse i{left:50%;top:6px;width:4px;height:7px;margin-left:-2px;border-radius:2px;animation:vhWheel 1.8s ease-in-out infinite;}
}
@media(prefers-reduced-motion:reduce){.vh-mouse i{animation:none;}}

/* the card keeps dark text on the dark variant, and a car needs clear air above the card
   so it never sits on the buttons or links */
.vh-card{color:#121316;}
.vh-has-car-r,.vh-has-car-l{margin-top:74px;}
@media(max-width:860px){
  .vh-car-r{width:210px;right:-54px;top:-76px;}
  .vh-car-l{width:216px;left:-58px;top:-66px;}
}
@media(min-width:861px){.vh-has-car-r,.vh-has-car-l{margin-top:104px;}}

/* phone-only / laptop-only text */
.vh-d{display:none;}
@media(min-width:861px){.vh-m{display:none;}.vh-d{display:inline;}}

/* ── Car at the bottom right (final) ─────────────────────────────────────────────
   Parked below the card's bottom-right corner, half off the screen edge, sitting on
   the red curve - so it never covers anything in the card. */
.vh-has-car-br{margin-top:22px;margin-bottom:96px;}
.vh-car-br{width:230px;right:-70px;bottom:-104px;top:auto;}
@media(min-width:861px){.vh-has-car-br{margin-top:36px;margin-bottom:96px;}.vh-car-br{width:320px;right:-250px;bottom:-112px;}}

/* ── Final car placement: bigger, clearly overlapping the card's bottom corner ──────
   The card gets empty space at its bottom so the car never covers text.
   Rideshare: bottom right. Lease to own: bottom left (mirrored) - related, not identical. */
.vh-has-car-br{margin-bottom:62px;padding-bottom:52px;}
.vh-car-br{width:270px;right:-70px;bottom:-72px;top:auto;}
.vh-car-bl{width:270px;left:-70px;right:auto;bottom:-72px;top:auto;transform:scaleX(-1);animation-name:vhCarInL;}
@media(min-width:861px){
  .vh{padding:76px 40px 34px;
    background:
      radial-gradient(95% 48% at 50% 100%,#E8001D 0,#C80019 60%,transparent 60.4%),
      radial-gradient(40% 50% at 92% 0%,rgba(232,0,29,.09),transparent 70%),
      linear-gradient(180deg,#F7F7F9,#EFF0F3);}
  .vh-h1{font-size:clamp(44px,4.2vw,58px);}
  .vh-lead{margin-top:12px;}
  .vh-cta{margin-top:20px;}
  .vh-has-car-br{margin-top:26px;margin-bottom:54px;padding-bottom:44px;}
  .vh-car-br{width:410px;right:-300px;bottom:-96px;}
  .vh-car-bl{width:410px;left:-300px;bottom:-96px;}
  .vh-scroll{margin-top:4px;}
}

@media(max-width:860px){.vh-has-car-br{padding-bottom:72px;}}

/* ── Compact pass: shorter headers so the car and scroll cue show on landing ──────── */
.vh{padding:70px 20px 18px;}
.vh-eb{margin-bottom:10px;}
.vh-h1{font-size:34px;}
.vh-lead{font-size:14px;margin-top:8px;}
.vh-cta{height:50px;margin-top:14px;}
.vh-note{margin-top:6px;}
.vh-links{margin-top:6px;}
.vh-card{padding:13px 14px;}
.vh-mid{margin:8px 0 4px;}
.vh-big{font-size:24px;}
.vh-ring{width:50px;height:50px;}
.vh-chips{margin:2px 0 6px;}
.vh-rw{padding:6px 0;}
.vh-has-car-br{margin-top:18px;margin-bottom:50px;padding-bottom:60px;}
.vh-car-br{width:240px;right:-64px;bottom:-62px;}
.vh-scroll{margin-top:0;}
/* platforms strip on the red curve, white type */
.vh-has-mq{padding-bottom:0;}
html body .vh .vh-mq{margin:6px -20px 0!important;background:rgba(0,0,0,.12)!important;border-top:1px solid rgba(255,255,255,.18)!important;}
html body .vh .vh-mq .hv-mq-label{color:#fff!important;opacity:.85;}
html body .vh .vh-mq .hv-track span{color:#fff!important;}
html body .vh .vh-mq .hv-track span::after{background:#fff!important;}
@media(min-width:861px){
  .vh{padding:64px 40px 14px;}
  .vh-h1{font-size:clamp(40px,3.6vw,50px);}
  .vh-lead{font-size:16px;margin-top:10px;}
  .vh-cta{height:50px;margin-top:16px;}
  .vh-card{padding:16px 22px;}
  .vh-top{padding-bottom:10px;}
  .vh-ring{width:64px;height:64px;}
  .vh-big{font-size:28px;}
  .vh-has-car-br{margin-top:20px;margin-bottom:40px;padding-bottom:30px;}
  .vh-car-br{width:340px;right:-250px;bottom:-78px;}
  html body .vh .vh-mq{margin:8px -40px 0!important;}
}
/* waitlist success: the check draws itself */
.lto-check{background:none!important;width:64px!important;height:64px!important;}
.lto-check svg{width:64px;height:64px;}
.lto-check circle{fill:#16A34A;stroke:none;transform-origin:center;animation:ltoPop .45s cubic-bezier(.16,1,.3,1) both;}
.lto-check path{fill:none;stroke:#fff;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:40;stroke-dashoffset:40;animation:ltoDraw .5s .3s ease-out forwards;}
@keyframes ltoPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes ltoDraw{to{stroke-dashoffset:0}}

html body .vh .vh-mq{max-width:none!important;width:auto!important;}

/* ── Final touches ── */
@media(min-width:861px){
  /* lease-to-own: one line, side by side */
  .vh-h1:not(.vh-h1-long) br{display:none;}
  .vh-h1:not(.vh-h1-long) span::before{content:" ";}
  /* rideshare: smaller subtitle, tighter */
  .vh-has-mq{padding-top:56px;}
  .vh-has-mq .vh-lead{font-size:14.5px;margin-top:8px;max-width:460px;}
  .vh-has-mq .vh-cta{margin-top:14px;}
  .vh-has-mq .vh-has-car-br{margin-top:14px;margin-bottom:34px;}
}
.vh-has-mq .vh-lead{font-size:13.5px;}
/* platforms strip: white, with red accents */
html body .vh .vh-mq{background:#fff!important;border-top:0!important;box-shadow:0 -6px 20px rgba(0,0,0,.10);}
html body .vh .vh-mq .hv-mq-label{color:#E8001D!important;opacity:1;}
html body .vh .vh-mq .hv-track span{color:#121316!important;}
html body .vh .vh-mq .hv-track span::after{background:#E8001D!important;}

/* ── Back to the red strip; more air under the nav; rideshare compacted ── */
html body .vh .vh-mq{background:rgba(0,0,0,.12)!important;border-top:1px solid rgba(255,255,255,.18)!important;box-shadow:none;}
html body .vh .vh-mq .hv-mq-label{color:#fff!important;opacity:.85;}
html body .vh .vh-mq .hv-track span{color:#fff!important;}
html body .vh .vh-mq .hv-track span::after{background:#fff!important;}
.vh-eb{font-size:10px;}
.vh{padding-top:82px;}
@media(min-width:861px){
  .vh,.vh-has-mq{padding-top:84px;}
  .vh-has-mq .vh-h1{font-size:clamp(36px,3.2vw,44px);}
  .vh-has-mq .vh-lead{font-size:14px;}
  .vh-has-mq .vh-cta{height:46px;margin-top:12px;}
  .vh-has-mq .vh-links{margin-top:4px;}
  .vh-has-mq .vh-card{padding:12px 20px;}
  .vh-has-mq .vh-chips{margin:0 0 4px;}
  .vh-has-mq .vh-rw{padding:5px 0;}
  .vh-has-mq .vh-ex{margin-top:6px;}
  .vh-has-mq .vh-car-br{width:300px;right:-220px;bottom:-66px;}
}

/* Wider, bigger on laptops; one-line rideshare headline */
@media(min-width:861px){
  .vh-in{max-width:1240px;}
  .vh-h1,.vh-has-mq .vh-h1{font-size:clamp(42px,3.8vw,58px);}
  .vh-h1-long br{display:none;}
  .vh-h1-long b.vh-nw::before{content:" ";}
  .vh-lead,.vh-has-mq .vh-lead{font-size:17px;max-width:620px;}
  .vh-cta,.vh-has-mq .vh-cta{height:54px;font-size:16.5px;}
  .vh-card,.vh-has-mq .vh-card{max-width:1000px;padding:22px 30px;}
  .vh-who b{font-size:16px;}
  .vh-big{font-size:36px;}
  .vh-rw{font-size:14.5px;}
  .vh-ring{width:80px;height:80px;}
  .vh-car-br,.vh-has-mq .vh-car-br{width:470px;right:-330px;bottom:-96px;}
  .vh-has-car-br,.vh-has-mq .vh-has-car-br{margin-bottom:56px;}
}

@media(min-width:861px){.vh-car-br,.vh-has-mq .vh-car-br{width:440px;right:-370px;bottom:-150px;}.vh-has-car-br,.vh-has-mq .vh-has-car-br{margin-bottom:92px;}}

/* strip uses the exact red of the band below it, so they read as one ribbon */
html body .vh .vh-mq{background:#E8001D!important;border-top:1px solid rgba(255,255,255,.22)!important;}
/* laptops: cards a little lower, cars nudged in from the edge */
@media(min-width:861px){
  .vh-has-car-br,.vh-has-mq .vh-has-car-br{margin-top:40px;}
  .vh-car-br,.vh-has-mq .vh-car-br{width:440px;right:-290px;bottom:-150px;}
}

/* ── Shorter headers, one-line subtitle, darker strip ── */
html body .vh .vh-mq{background:#C40019!important;border-top:1px solid rgba(255,255,255,.14)!important;}
.vh{padding-top:72px;}
.vh-lead{max-width:none;}
.vh-has-car-br,.vh-has-mq .vh-has-car-br{margin-top:26px;}
@media(min-width:861px){
  .vh,.vh-has-mq{padding-top:58px;}
  .vh-h1,.vh-has-mq .vh-h1{font-size:clamp(40px,3.4vw,52px);}
  .vh-lead,.vh-has-mq .vh-lead{font-size:16px;margin-top:8px;white-space:nowrap;}
  .vh-cta,.vh-has-mq .vh-cta{height:50px;margin-top:14px;}
  .vh-card,.vh-has-mq .vh-card{padding:16px 28px;}
  .vh-top{padding-bottom:8px;margin-bottom:2px;}
  .vh-rw{padding:5px 0;}
  .vh-ring{width:68px;height:68px;}
  .vh-big{font-size:32px;}
  .vh-ex{margin-top:6px;}
  .vh-has-car-br,.vh-has-mq .vh-has-car-br{margin-top:34px;margin-bottom:62px;padding-bottom:22px;}
  .vh-car-br,.vh-has-mq .vh-car-br{width:400px;right:-270px;bottom:-130px;}
  .vh-scroll{margin-top:0;}
}

@media(min-width:861px){.vh,.vh-has-mq{padding-top:76px;}}

/* strip sits flush on the red band below: no padding or margin under it */
.vh.vh-has-mq{padding-bottom:0!important;}
html body .vh .vh-mq{margin-bottom:0!important;}
.vh-has-mq + .prog-band{margin-top:0!important;}
/* cars: a little higher and further in */
@media(min-width:861px){
  .vh-has-car-br,.vh-has-mq .vh-has-car-br{padding-bottom:34px;}
  .vh-car-br,.vh-has-mq .vh-car-br{right:-235px;bottom:-112px;}
}

/* ── More room under the links ── */
.vh-links{margin-top:14px!important;}

/* ── The red curve breathes, like the chat button ── */
.vh{position:relative;}
.vh::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(140% 52% at 50% 100%,transparent 57%,rgba(232,0,29,.32) 60.4%,transparent 68%);
  transform-origin:50% 100%;animation:vhBreathe 3.2s ease-in-out infinite;}
.vh-in,.vh .vh-mq,.vh .vh-scroll{position:relative;z-index:1;}
@media(min-width:861px){.vh::before{background:radial-gradient(95% 48% at 50% 100%,transparent 57%,rgba(232,0,29,.30) 60.4%,transparent 68%);}}
@keyframes vhBreathe{0%,100%{opacity:.25;transform:scale(1)}50%{opacity:1;transform:scale(1.035)}}
@media(prefers-reduced-motion:reduce){.vh::before{animation:none;opacity:.5;}}

/* ── Card deck ── */
.vh-deck{position:relative;margin:26px -20px 50px;overflow:visible;touch-action:pan-y;}
.vh-track{display:flex;align-items:flex-start;gap:14px;transition:transform .55s cubic-bezier(.16,1,.3,1);will-change:transform;}
.vh-deck .vh-card{flex:0 0 calc(100vw - 52px);max-width:none;margin:0!important;opacity:.35;transform:scale(.93);
  transition:opacity .45s,transform .45s;cursor:pointer;}
.vh-deck .vh-card.is-on{opacity:1;transform:none;cursor:default;}
.vh-deck .vh-card:not(.is-on) .vh-car{opacity:0;transition:opacity .3s;}
.vh-deck .vh-card.is-on .vh-car{opacity:1;}
.vh-deck .vh-card:not(.is-on) .vh-flag{opacity:0;}
.vh-dots{display:flex;justify-content:center;gap:7px;margin-top:16px;position:relative;z-index:3;}
.vh-dots button{width:7px;height:7px;padding:0;border:0;border-radius:7px;background:rgba(18,19,22,.25);cursor:pointer;transition:width .3s,background .3s;}
.vh-dots button.on{width:22px;background:#121316;}
@media(min-width:861px){
  .vh-deck{margin:34px -40px 48px;}
  .vh-track{gap:28px;}
  .vh-deck .vh-card{flex:0 0 min(1000px,72vw);}
  .vh-dots{margin-top:18px;}
}

.vh-dots button{background:rgba(255,255,255,.45);}
.vh-dots button.on{background:#fff;}

.vh-deck .vh-card:not(.is-on) .vh-car{visibility:hidden;}

@media(max-width:860px){.vh-dots{justify-content:flex-start;padding-left:30px;}}

/* the car that stays still above a sliding deck */
.vh-car-fixed{position:absolute;z-index:4;width:270px;right:auto;bottom:auto;}
@media(min-width:861px){.vh-car-fixed{width:400px;}}

/* the Fusion photo is framed larger than the others; bring it in line */
.vh-car[src*="fusion"]{width:220px!important;}
@media(min-width:861px){.vh-car[src*="fusion"]{width:340px!important;}}