/* ========== White-label Page Styles ========== */

/* ---- Hero ---- */

.wl-hero-visual {
  min-height: 32rem;
}

.wl-hero-visual .intro-tooltip_1 {
  top: 8%;
}

.wl-hero-visual .intro-tooltip_2 {
  top: 34%;
}

.wl-hero-visual .intro-tooltip_3 {
  top: 60%;
}

.wl-hero-visual .intro-tooltip_4 {
  top: 84%;
}

/* ---- Metrics ---- */

.wl-metric__value {
  font-size: var(--h1);
  font-weight: 600;
  line-height: 1;
  color: var(--blue2);
}

/* ---- Cards ---- */

.wl-card {
  background: var(--white);
  border: 1px solid var(--blue3);
  border-radius: 1.25rem;
  padding: 1.875rem;
}

.wl-panel {
  background-color: var(--grey5);
  border-radius: 1.875rem;
  padding: 1.875rem;
}

/* ---- Accent panel ---- */

.wl-accent {
  background-color: var(--blue2-dark);
  border-radius: 1.875rem;
  padding: 1.875rem;
}

/* ---- Q&A and CTA ---- */

.wl-qa {
  border-top: 1px solid var(--grey4);
  padding: 2rem 0 1.75rem;
}

.wl-cta {
  background-color: var(--blue2-dark);
  border-radius: 1.875rem;
  padding: 3.75rem 1.875rem;
  text-align: center;
}

.button-element-white {
  color: var(--white);
}

@media (max-width: 767px) {
  .wl-cta {
    padding: 2.5rem 1.25rem;
  }
}