:root {
  --vc-color: #f45120;
  --vc-radius: 12px;
  --vc-font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --plyr-color-main: var(--vc-color);
  --plyr-font-family: var(--vc-font);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: transparent;
  overflow: hidden;
  font-family: var(--vc-font);
}

/* ------------------------------------------------------------------------ */
/* Player frame                                                             */
/* ------------------------------------------------------------------------ */

.vc {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--vc-radius);
  background: #000;
  isolation: isolate;
  container-type: size;
}

/*
 * The video's 16:9 box, as large as fits and centered: the whole frame in a
 * 16:9 embed, with even black bars on a screen or frame of any other shape
 * (fullscreen on 16:10, ultrawide, a phone). The YouTube crop and the quality
 * sizing below assume this box is exactly 16:9.
 */
.vc-stage {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: min(100cqw, 100cqh * 16 / 9);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: inherit;
}

.vc-mount {
  width: 100%;
}

/* Embedded, the page wrapper fills the frame so .vc can (size containment
   means .vc never takes its height from its content). */
html:not(.standalone) .vc-page {
  height: 100%;
}

.vc .plyr {
  width: 100%;
}

/*
 * Draw the YouTube iframe at twice the player's height. The video is
 * letterboxed in the middle, so YouTube's title bar and branding strip land
 * outside the visible area; pointer-events:none stops its hover UI. A chosen
 * quality renders the iframe at a fixed size scaled from the top-left.
 */
.vc .plyr__video-embed iframe {
  top: -50%;
  height: 200%;
  pointer-events: none;
  transform-origin: 0 0;
}

/*
 * Captions render near the bottom of YouTube's frame, so the 2x crop would
 * hide them. Instead, zoom the frame slightly and shift it up: YouTube's
 * fixed-height title bar sits above the visible area, captions stay in view.
 */
.vc.captions-on .plyr__video-embed iframe {
  top: -56px;
  left: -50px;
  width: calc(100% + 100px);
  height: calc(100% + 56px);
}

/* Cover YouTube's suggestions when the video ends. */
.vc[data-state="ended"] .plyr__poster {
  /* biome-ignore lint/complexity/noImportantStyles: Plyr hides the poster after first play */
  display: block !important;
  /* biome-ignore lint/complexity/noImportantStyles: Plyr hides the poster after first play */
  opacity: 1 !important;
  z-index: 1;
  filter: brightness(0.35) blur(2px);
  transform: scale(1.04);
}

/* With captions on the frame is uncropped, so also cover YouTube's pause UI. */
.vc.captions-on[data-state="paused"] .plyr__poster {
  /* biome-ignore lint/complexity/noImportantStyles: Plyr hides the poster after first play */
  display: block !important;
  /* biome-ignore lint/complexity/noImportantStyles: Plyr hides the poster after first play */
  opacity: 1 !important;
  z-index: 1;
  filter: brightness(0.6);
}

/* Plyr sizes submenus to their full content height. A quality list can be
   taller than a phone embed, where the video stage clips anything above it. */
.vc .plyr__menu__container,
.vc .plyr__menu__container > div {
  max-height: calc(min(56.25cqw, 100cqh) - 64px);
}

.vc .plyr__menu__container > div {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgb(128 128 128 / 0.55) transparent;
  scrollbar-width: thin;
}

.vc .plyr__menu__container .plyr__control--back {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--vc-menu-surface, #fff);
}

@container (max-width: 300px) {
  .vc .plyr__menu__container [id$="-home"] [role="menu"] {
    padding-block: 1px;
  }
}

.vc[data-state="ended"] .plyr__control--overlaid {
  display: none;
}

/* ------------------------------------------------------------------------ */
/* Facade: poster + play button before anything loads from YouTube          */
/* ------------------------------------------------------------------------ */

.vc-facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
}

.vc-facade img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vc-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--vc-color);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}

.vc-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #fff;
  transform: translate(-50%, -50%);
}

.vc-facade:hover .vc-play,
.vc-facade:focus-visible .vc-play {
  transform: translate(-50%, -50%) scale(1.08);
}

.vc-facade:focus-visible {
  outline: 3px solid var(--vc-color);
  outline-offset: -3px;
}

.vc-facade.is-loading .vc-play::after {
  width: 26px;
  height: 26px;
  border: 3px solid rgb(255 255 255 / 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  left: 50%;
  animation: vc-spin 0.8s linear infinite;
}

.vc-load-error {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgb(0 0 0 / 0.75);
  color: #fff;
  font: 600 13px var(--vc-font);
  text-align: center;
}

@keyframes vc-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* ------------------------------------------------------------------------ */
/* Overlays                                                                 */
/* ------------------------------------------------------------------------ */

.vc-logo {
  position: absolute;
  z-index: 4;
  display: block;
  max-width: 22%;
  opacity: 0.85;
  transition: opacity 0.2s;
}

.vc-logo:hover {
  opacity: 1;
}

.vc-logo img {
  display: block;
  max-width: 100%;
  max-height: 44px;
}

[data-position="top-left"] {
  top: 14px;
  left: 14px;
}

[data-position="top-right"] {
  top: 14px;
  right: 14px;
}

[data-position="bottom-left"] {
  bottom: 60px;
  left: 14px;
}

[data-position="bottom-right"] {
  bottom: 60px;
  right: 14px;
}

.vc-ctas {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.vc-cta {
  position: absolute;
  max-width: 60%;
  padding: 10px 16px;
  border: 0;
  border-radius: calc(var(--vc-radius) * 0.75 + 2px);
  background: var(--vc-color);
  color: #fff;
  font: 600 14px / 1.2 var(--vc-font);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.3);
  cursor: pointer;
  pointer-events: auto;
  animation: vc-pop 0.25s ease-out;
}

.vc-cta:hover {
  filter: brightness(0.92);
}

@keyframes vc-pop {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.vc-unmute,
.vc-resumed {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.72);
  color: #fff;
  font: 600 14px / 1 var(--vc-font);
  backdrop-filter: blur(8px);
}

.vc-unmute {
  top: 50%;
  left: 50%;
  padding: 14px 20px;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.vc-unmute:hover {
  background: rgb(0 0 0 / 0.85);
}

.vc-unmute-icon {
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4V5z'/%3E%3Cpath d='m23 9-6 6M17 9l6 6'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4V5z'/%3E%3Cpath d='m23 9-6 6M17 9l6 6'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.vc-resumed {
  top: 14px;
  left: 14px;
  padding: 8px 8px 8px 14px;
  font-size: 13px;
}

.vc-resumed button {
  padding: 6px 10px;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.16);
  color: #fff;
  font: inherit;
  cursor: pointer;
}

/* ------------------------------------------------------------------------ */
/* Email capture and end screen                                             */
/* ------------------------------------------------------------------------ */

.vc-lead,
.vc-end {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  color: #fff;
  text-align: center;
}

.vc-lead {
  background: rgb(10 11 14 / 0.86);
  backdrop-filter: blur(10px);
}

.vc-lead h2,
.vc-end h2 {
  margin: 0 0 4px;
  max-width: 32ch;
  font-size: clamp(18px, 4vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.vc-lead input {
  width: min(320px, 100%);
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: calc(var(--vc-radius) * 0.75 + 2px);
  background: rgb(255 255 255 / 0.08);
  color: #fff;
  font: 15px var(--vc-font);
  outline: none;
}

.vc-lead input::placeholder {
  color: rgb(255 255 255 / 0.5);
}

.vc-lead input:focus {
  border-color: var(--vc-color);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--vc-color) 35%, transparent);
}

.vc-lead-error {
  min-height: 1em;
  margin: 0;
  color: #fca5a5;
  font-size: 13px;
}

.vc-lead-error:empty {
  display: none;
}

.vc-lead-submit,
.vc-end-cta,
.vc-end-replay,
.vc-lead-skip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: calc(var(--vc-radius) * 0.75 + 2px);
  font: 600 15px var(--vc-font);
  cursor: pointer;
}

.vc-lead-submit,
.vc-end-cta {
  min-width: min(320px, 100%);
  background: var(--vc-color);
  color: #fff;
}

.vc-end-cta {
  min-width: 0;
}

.vc-lead-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.vc-lead-skip {
  height: auto;
  padding: 4px 8px;
  background: none;
  color: rgb(255 255 255 / 0.6);
  font-weight: 500;
  font-size: 13px;
}

.vc-end {
  display: none;
}

.vc[data-state="ended"] .vc-end {
  display: flex;
}

.vc-end-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.vc-end-replay {
  background: rgb(255 255 255 / 0.14);
  color: #fff;
  backdrop-filter: blur(6px);
}

.vc-end-replay:hover {
  background: rgb(255 255 255 / 0.24);
}

.vc-end-cta:hover,
.vc-lead-submit:hover:not(:disabled) {
  filter: brightness(0.92);
}

/* ------------------------------------------------------------------------ */
/* Standalone share page: the player opened directly instead of iframed     */
/* ------------------------------------------------------------------------ */

.vc-brand,
.vc-meta {
  display: none;
}

html.standalone,
html.standalone body {
  overflow: auto;
  background: #0d0f14;
  color: #f2f3f5;
}

html.standalone body {
  display: flex;
  justify-content: center;
  min-height: 100%;
  padding: clamp(16px, 4vw, 48px);
}

html.standalone .vc-page {
  width: 100%;
  max-width: 1100px;
  margin: auto 0;
}

html.standalone .vc {
  height: auto;
  aspect-ratio: 16 / 9;
  box-shadow: 0 30px 80px -30px rgb(0 0 0 / 0.8);
}

html.standalone .vc-brand {
  display: flex;
  align-items: center;
  height: 40px;
  margin-bottom: 20px;
  color: #f2f3f5;
  font-size: 16px;
  font-weight: 700;
}

.vc-brand img {
  max-height: 36px;
  max-width: 200px;
}

html.standalone .vc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: 24px;
}

.vc-title {
  margin: 0;
  font-size: clamp(18px, 2.6vw, 24px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.vc-description {
  max-width: 70ch;
  margin: 10px 0 0;
  color: #a3a8b3;
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-line;
}

.vc-share-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 22px;
  border-radius: 12px;
  background: var(--vc-color);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.vc-share-cta:hover {
  filter: brightness(0.92);
}

/* ------------------------------------------------------------------------ */
/* Password and unavailable pages                                           */
/* ------------------------------------------------------------------------ */

.vc-gate {
  display: grid;
  place-items: center;
  background: #0d0f14;
  color: #f2f3f5;
}

html.standalone .vc-gate {
  display: grid;
}

.vc-lock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: min(360px, 100% - 32px);
  text-align: center;
}

.vc-lock svg {
  width: 40px;
  height: 40px;
  padding: 10px;
  border-radius: 14px;
  background: color-mix(in oklab, var(--vc-color) 20%, transparent);
  color: var(--vc-color);
}

.vc-lock h1 {
  margin: 4px 0 0;
  font-size: 18px;
  line-height: 1.35;
}

.vc-lock p {
  margin: 0;
  color: #a3a8b3;
  font-size: 14px;
}

.vc-lock input {
  width: 100%;
  height: 44px;
  margin-top: 8px;
  padding: 0 14px;
  border: 1px solid #2a2e37;
  border-radius: 10px;
  background: #151820;
  color: #fff;
  font: 15px var(--vc-font);
  outline: none;
}

.vc-lock input:focus {
  border-color: var(--vc-color);
}

.vc-lock button {
  width: 100%;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: var(--vc-color);
  color: #fff;
  font: 600 15px var(--vc-font);
  cursor: pointer;
}

.vc-lock .vc-error {
  color: #fca5a5;
}

.vc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.vc-unavailable {
  color: #9aa0aa;
  font-size: 15px;
}

/* ------------------------------------------------------------------------ */
/* Fullscreen (native, or Plyr's fallback on iPhone): the frame fills the     */
/* screen on any page, including the share page's fixed 16:9 frame.          */
/* ------------------------------------------------------------------------ */

html .vc:is(:fullscreen, .plyr--fullscreen-fallback) {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
}

/* A phone browser that cannot lock orientation still gets a landscape
   picture and controls. The script embed expands the iframe first. */
html .vc.vc-rotated:is(:fullscreen, .plyr--fullscreen-fallback) {
  position: fixed;
  top: 0;
  left: 0;
  width: 100dvh;
  height: 100dvw;
  aspect-ratio: auto;
  transform: translateX(100dvw) rotate(90deg);
  transform-origin: top left;
}

@container (max-width: 420px) {
  .vc .plyr .plyr__volume input {
    display: none;
  }
}

@container (max-width: 280px) {
  .vc .plyr .plyr__volume,
  .vc .plyr .plyr__time,
  .vc .plyr .plyr__menu {
    display: none;
  }
}

@media (pointer: coarse) {
  .vc .plyr__controls .plyr__control {
    min-width: 44px;
    min-height: 44px;
  }

  .vc .plyr__controls > .plyr__control,
  .vc .plyr__controls > .plyr__volume > .plyr__control,
  .vc .plyr__controls > .plyr__menu > .plyr__control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ------------------------------------------------------------------------ */
/* Skins: data-skin on .vc restyles the same Plyr markup, so every behavior */
/* (menus, captions, CTAs, email capture) is identical across skins.         */
/* "classic" is Plyr's look with the brand color and needs no rules.         */
/* ------------------------------------------------------------------------ */

/* Minimal: small controls, hairline progress, the thumb appears on hover. */
.vc[data-skin="minimal"] {
  --plyr-control-icon-size: 16px;
  --plyr-control-spacing: 8px;
  --plyr-range-track-height: 3px;
  --plyr-range-thumb-height: 11px;
  --plyr-font-size-time: 12px;
  --plyr-video-controls-background: linear-gradient(
    transparent,
    rgb(0 0 0 / 0.45)
  );
  --plyr-video-control-background-hover: rgb(255 255 255 / 0.12);
  --plyr-video-range-track-background: rgb(255 255 255 / 0.25);
}

.vc[data-skin="minimal"] .plyr__progress input::-webkit-slider-thumb {
  transform: scale(0);
  transition: transform 0.15s ease;
}

.vc[data-skin="minimal"] .plyr__progress:hover input::-webkit-slider-thumb {
  transform: scale(1);
}

.vc[data-skin="minimal"] .plyr__progress input::-moz-range-thumb {
  transform: scale(0);
  transition: transform 0.15s ease;
}

.vc[data-skin="minimal"] .plyr__progress:hover input::-moz-range-thumb {
  transform: scale(1);
}

/* Glass: a floating frosted control bar inset from the edges. */
.vc[data-skin="glass"] {
  --vc-menu-surface: #18181c;
  --plyr-control-radius: 999px;
  --plyr-range-track-height: 4px;
  --plyr-video-controls-background: rgb(18 18 22 / 0.42);
  --plyr-video-control-background-hover: rgb(255 255 255 / 0.14);
  --plyr-video-range-track-background: rgb(255 255 255 / 0.22);
  --plyr-menu-background: rgb(24 24 28 / 0.86);
  --plyr-menu-color: #fff;
  --plyr-menu-arrow-color: rgb(255 255 255 / 0.6);
  --plyr-menu-back-border-color: rgb(255 255 255 / 0.12);
  --plyr-menu-back-border-shadow-color: transparent;
  --plyr-menu-radius: 14px;
}

.vc[data-skin="glass"] .plyr--video .plyr__controls {
  right: 12px;
  bottom: 12px;
  left: 12px;
  padding: 6px 10px;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: max(16px, var(--vc-radius));
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.3);
  backdrop-filter: blur(16px) saturate(1.5);
}

.vc[data-skin="glass"] .plyr--hide-controls .plyr__controls {
  transform: translateY(calc(100% + 12px));
}

.vc[data-skin="glass"] .plyr__menu__container {
  backdrop-filter: blur(16px) saturate(1.5);
}

.vc[data-skin="glass"] .plyr__menu__container > div {
  color-scheme: dark;
}

/* Bold: big controls, a thick progress bar and a brand-colored play button. */
.vc[data-skin="bold"] {
  --plyr-control-icon-size: 22px;
  --plyr-control-spacing: 12px;
  --plyr-control-radius: calc(var(--vc-radius) * 0.6 + 2px);
  --plyr-range-track-height: 8px;
  --plyr-range-thumb-height: 18px;
  --plyr-range-thumb-shadow:
    0 0 0 3px var(--vc-color), 0 2px 6px rgb(0 0 0 / 0.4);
  --plyr-font-size-time: 15px;
  --plyr-font-weight-regular: 600;
  --plyr-video-controls-background: linear-gradient(
    transparent,
    rgb(0 0 0 / 0.85)
  );
  --plyr-video-control-background-hover: var(--vc-color);
}

/* Cinema: progress on its own full-width row above the buttons. */
.vc[data-skin="cinema"] {
  --plyr-range-track-height: 3px;
  --plyr-range-thumb-height: 12px;
  --plyr-font-size-time: 13px;
  --plyr-video-controls-background: linear-gradient(
    transparent,
    rgb(0 0 0 / 0.55) 40%,
    rgb(0 0 0 / 0.9)
  );
  --plyr-video-control-background-hover: transparent;
  --plyr-video-control-color-hover: var(--vc-color);
}

.vc[data-skin="cinema"] .plyr--video .plyr__controls {
  flex-wrap: wrap;
  padding: 56px 16px 10px;
}

.vc[data-skin="cinema"] .plyr__controls .plyr__progress__container {
  flex: 1 0 100%;
  order: -1;
  margin: 0 0 4px;
  padding: 0 6px;
}

/* Plyr pushes everything after the first control right; here the buttons
   row keeps play and time together on the left instead. */
.vc[data-skin="cinema"] .plyr__controls .plyr__controls__item:first-child {
  margin-right: 0;
}

/* The first right-hand control takes the free space, pushing the group right. */
.vc[data-skin="cinema"]
  .plyr__controls
  > :is(.plyr__volume, .plyr__menu, [data-plyr="fullscreen"]) {
  margin-left: auto;
}

.vc[data-skin="cinema"]
  .plyr__controls
  > :is(.plyr__volume, .plyr__menu, [data-plyr="fullscreen"])
  ~ :is(.plyr__volume, .plyr__menu, [data-plyr="fullscreen"]) {
  margin-left: 0;
}

/* Play buttons: the facade (before load) and Plyr's overlaid one match. */
.vc[data-skin="minimal"] :is(.vc-play, .plyr__control--overlaid),
.vc[data-skin="glass"] :is(.vc-play, .plyr__control--overlaid) {
  border: 1px solid rgb(255 255 255 / 0.3);
  /* Dark tint keeps the white icon readable on bright frames. */
  background: rgb(20 20 24 / 0.38);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.25);
  backdrop-filter: blur(12px) saturate(1.4);
}

.vc[data-skin="minimal"] .vc-play {
  width: 60px;
  height: 60px;
}

.vc[data-skin="bold"] :is(.vc-play, .plyr__control--overlaid) {
  border-radius: calc(var(--vc-radius) + 4px);
  box-shadow: 0 12px 36px color-mix(in oklab, var(--vc-color) 45%, transparent);
}

.vc[data-skin="bold"] .vc-play {
  width: 96px;
  height: 68px;
}

.vc[data-skin="bold"] .plyr__control--overlaid {
  padding: 22px 34px;
}

.vc[data-skin="bold"] .plyr__control--overlaid svg {
  width: 26px;
  height: 26px;
}

.vc[data-skin="cinema"] :is(.vc-play, .plyr__control--overlaid) {
  border: 2px solid rgb(255 255 255 / 0.9);
  background: rgb(0 0 0 / 0.25);
  box-shadow: none;
  backdrop-filter: blur(4px);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.vc[data-skin="cinema"] .vc-play {
  width: 88px;
  height: 88px;
}

.vc[data-skin="cinema"] .plyr__control--overlaid {
  padding: 28px;
}

.vc[data-skin="cinema"] .plyr__control--overlaid svg {
  width: 26px;
  height: 26px;
}

.vc[data-skin="cinema"] .plyr__control--overlaid:hover,
.vc[data-skin="cinema"] .vc-facade:hover .vc-play {
  border-color: var(--vc-color);
  background: var(--vc-color);
}