/* Q-Helix microlearnings: readable button contrast in all main-content sections. */
.qh main a.btn:not(.light):not(.outline),
.qh main a.btn:not(.light):not(.outline):visited,
.qh main button.btn:not(.light):not(.outline) {
  background: #F47726 !important;
  border-color: #F47726 !important;
  color: #112B55 !important;
  -webkit-text-fill-color: #112B55 !important;
  text-shadow: none !important;
  font-weight: 800;
  text-decoration: none !important;
}
.qh main a.btn:not(.light):not(.outline):hover,
.qh main a.btn:not(.light):not(.outline):focus-visible,
.qh main button.btn:not(.light):not(.outline):hover,
.qh main button.btn:not(.light):not(.outline):focus-visible {
  background: #FFB480 !important;
  border-color: #FFB480 !important;
  color: #112B55 !important;
  -webkit-text-fill-color: #112B55 !important;
}
.qh main a.btn.light, .qh main a.btn.light:visited,
.qh main button.btn.light {
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: #193467 !important;
  -webkit-text-fill-color: #193467 !important;
  text-shadow: none !important;
  text-decoration: none !important;
  font-weight: 800;
}
.qh main a.btn.light:hover, .qh main a.btn.light:focus-visible,
.qh main button.btn.light:hover, .qh main button.btn.light:focus-visible {
  background: #E8F5FD !important;
  border-color: #E8F5FD !important;
  color: #112B55 !important;
  -webkit-text-fill-color: #112B55 !important;
}
.qh main a.btn.outline, .qh main a.btn.outline:visited {
  background: #FFFFFF !important;
  border: 2px solid #193467 !important;
  color: #193467 !important;
  -webkit-text-fill-color: #193467 !important;
  text-shadow: none !important;
}
.qh main a.btn.outline:hover, .qh main a.btn.outline:focus-visible {
  background: #E8F5FD !important;
  color: #112B55 !important;
  -webkit-text-fill-color: #112B55 !important;
}
.qh main .btn:focus-visible, .qh main .linkbutton:focus-visible {
  outline: 3px solid #06B1CC !important;
  outline-offset: 3px;
}
.qh main .linkbutton { color: #193467; }
.qh main .linkbutton:hover { color: #057BA9; }

/* Gently animate the existing vector artwork: modules connect to an earned badge. */
.qh .qh-ml-illustration { overflow: visible; width: 100%; height: auto; }
.qh .qh-ml-illustration .qh-ml-module {
  transform-box: fill-box;
  transform-origin: center;
  animation: qh-ml-module-appear 800ms cubic-bezier(.2,.7,.2,1) both;
}
.qh .qh-ml-illustration .qh-ml-module-2 { animation-delay: 180ms; }
.qh .qh-ml-illustration .qh-ml-module-3 { animation-delay: 360ms; }
.qh .qh-ml-illustration .qh-ml-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: qh-ml-dot-breathe 3.6s ease-in-out infinite;
}
.qh .qh-ml-illustration .qh-ml-dot-2 { animation-delay: 650ms; }
.qh .qh-ml-illustration .qh-ml-dot-3 { animation-delay: 1300ms; }
.qh .qh-ml-illustration .qh-ml-credential {
  transform-origin: 351px 148px;
  animation: qh-ml-badge-float 3.8s ease-in-out infinite;
}
.qh .qh-ml-illustration .qh-ml-check {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: qh-ml-check-draw 1200ms ease-out 600ms forwards;
}
.qh .qh-ml-illustration .qh-ml-connector {
  stroke-dasharray: 42;
  stroke-dashoffset: 42;
  animation: qh-ml-check-draw 900ms ease-out 250ms forwards;
}
@keyframes qh-ml-module-appear {
  from { opacity: .4; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes qh-ml-dot-breathe {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}
@keyframes qh-ml-badge-float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes qh-ml-check-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .qh .qh-ml-illustration .qh-ml-module,
  .qh .qh-ml-illustration .qh-ml-dot,
  .qh .qh-ml-illustration .qh-ml-credential,
  .qh .qh-ml-illustration .qh-ml-check,
  .qh .qh-ml-illustration .qh-ml-connector {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
  }
}