:focus-visible {
  outline: 3px solid rgba(22, 135, 232, .55);
  outline-offset: 4px;
}

.hero-copy h1 em,
.page-hero h1 em,
.onboarding-intro h1 em {
  color: transparent;
  background: linear-gradient(100deg, #637083 10%, #1687e8 50%, #637083 90%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  animation: headline-shimmer 7s linear infinite;
}

.service-icon,
.option-icon {
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), color .3s;
}

.service-card:hover .service-icon {
  color: var(--lime);
  transform: translateY(-7px) rotate(-7deg) scale(1.08);
}

.option-card:hover .option-icon,
.option-card:has(input:checked) .option-icon {
  color: var(--lime);
  transform: rotate(-8deg) scale(1.12);
}

.faq-item button span {
  transition: transform .25s, color .25s;
}

.faq-item button:hover span {
  color: var(--lime);
  transform: translateX(6px);
}

main {
  animation: page-enter .65s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes page-enter {
  from { opacity: 0; transform: translateY(12px); }
}

@keyframes headline-shimmer {
  to { background-position: -200% center; }
}

@media (prefers-reduced-motion: reduce) {
  main,
  .hero-copy h1 em,
  .page-hero h1 em,
  .onboarding-intro h1 em {
    animation: none;
  }
}