.vl-proof-banner {
  --vl-proof-bg: #f4f6f8;
  --vl-proof-border: #e3e8ec;
  --vl-proof-heading: #1d2c34;
  --vl-proof-accent: #1a7569;
  --vl-proof-button: #304754;
  --vl-proof-max-width: 1240px;

  width: 100%;

  background: var(--vl-proof-bg);
  border-top: 1px solid var(--vl-proof-border);
  border-bottom: 1px solid var(--vl-proof-border);
}

.vl-proof-banner__container {
  display: grid;
  grid-template-columns:
    minmax(220px, 0.72fr)
    minmax(0, 1.7fr)
    minmax(220px, 0.78fr);
  align-items: stretch;

  width: min(100% - 48px, var(--vl-proof-max-width));
  min-height: 106px;
  margin: 0 auto;
}

/* Shared columns */

.vl-proof-banner__stat,
.vl-proof-banner__description,
.vl-proof-banner__cta-wrap {
  display: flex;
  align-items: center;

  min-height: 106px;
}

/* Statistic */

.vl-proof-banner__stat {
  padding: 0 36px 0 0;

  color: var(--vl-proof-heading) !important;

  font-family: "IBM Plex Sans", sans-serif !important;
  font-size: 40px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.025em !important;
  white-space: nowrap;
}

/* Description */

.vl-proof-banner__description {
  position: relative;

  padding: 0 48px;

  color: var(--vl-proof-heading) !important;

  font-family: "IBM Plex Sans", sans-serif !important;
  font-size: 18px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: -0.005em !important;
}

.vl-proof-banner__description::before,
.vl-proof-banner__cta-wrap::before {
  content: "";

  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 0;

  width: 1px;

  background: var(--vl-proof-border);
}

.vl-proof-banner__description p {
  max-width: 760px;
  margin: 0 !important;

  color: var(--vl-proof-heading) !important;

  font-family: inherit !important;
  font-size: inherit !important;
  font-style: normal !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

.vl-proof-banner__description > *:last-child {
  margin-bottom: 0 !important;
}

/* CTA */

.vl-proof-banner__cta-wrap {
  position: relative;

  justify-content: flex-end;

  padding: 0 0 0 48px;
}

.vl-proof-banner__cta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;

  color: #1a7569 !important;

  font-family: "IBM Plex Sans", sans-serif !important;
  font-size: 18px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-align: right;
  text-decoration: none !important;
  white-space: nowrap;

  transition:
    color 180ms ease,
    transform 180ms ease;
}

.vl-proof-banner__cta:hover,
.vl-proof-banner__cta:focus {
  color: var(--vl-proof-button) !important;
  text-decoration: none !important;
}

.vl-proof-banner__cta:visited {
  color: #1a7569 !important;
}

.vl-proof-banner__cta:focus-visible {
  outline: 3px solid rgba(26, 117, 105, 0.24);
  outline-offset: 4px;
}

.vl-proof-banner__arrow {
  display: inline-block;

  transition: transform 180ms ease;
}

.vl-proof-banner__cta:hover
.vl-proof-banner__arrow {
  transform: translateX(4px);
}

/* Tablet */

@media (max-width: 960px) {
  .vl-proof-banner__container {
    grid-template-columns:
      minmax(180px, 0.72fr)
      minmax(0, 1.3fr);
  }

  .vl-proof-banner__stat,
  .vl-proof-banner__description {
    min-height: 100px;
  }

  /* CTA */

.vl-proof-banner__cta-wrap {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  padding-left: 48px;
}

.vl-proof-banner__cta-wrap::before {
  content: "";

  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;

  width: 1px;

  background: var(--vl-proof-border);
}

.vl-proof-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: #1A7569 !important;

  font-family: "IBM Plex Sans", sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;

  transition:
    color .2s ease,
    gap .2s ease;
}

.vl-proof-banner__cta:visited {
  color: #1A7569 !important;
}

.vl-proof-banner__cta:hover,
.vl-proof-banner__cta:focus {
  color: #304754 !important;
  text-decoration: none !important;
}

.vl-proof-banner__arrow {
  display: inline-block;
  font-size: 16px;
  line-height: 1;

  transition:
    transform .2s ease;
}

.vl-proof-banner__cta:hover .vl-proof-banner__arrow {
  transform: translateX(4px);
}

/* Mobile */

@media (max-width: 640px) {
  .vl-proof-banner__container {
    display: flex;
    flex-direction: column;

    width: min(100% - 40px, var(--vl-proof-max-width));
    min-height: auto;
    padding: 28px 0;
  }

  .vl-proof-banner__stat,
  .vl-proof-banner__description,
  .vl-proof-banner__cta-wrap {
    width: 100%;
    min-height: auto;
    padding: 0;
  }

  .vl-proof-banner__stat {
    font-size: 36px !important;
    white-space: normal;
  }

  .vl-proof-banner__description {
    margin-top: 14px;

    font-size: 17px !important;
    line-height: 1.45 !important;
  }

  .vl-proof-banner__description::before,
  .vl-proof-banner__cta-wrap::before {
    display: none;
  }

  .vl-proof-banner__cta-wrap {
    justify-content: flex-start;

    margin-top: 20px;
    padding-top: 18px;

    border-top: 1px solid var(--vl-proof-border);
  }

  .vl-proof-banner__cta {
    justify-content: flex-start;

    font-size: 17px !important;
    text-align: left;
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .vl-proof-banner__cta,
  .vl-proof-banner__arrow {
    transition: none;
  }
}