/* The numbered process sequences only; hero panels and content cards are separate. */
@media (hover: hover) and (pointer: fine) {
  :is(#process .steps > .step, .kkt-page .kkt-steps > li, .ed-page .ed-steps > li, .site-page .support-online__steps > li):hover {
    background-color: rgba(156, 0, 123, .035);
    background-color: color-mix(in srgb, var(--sp-accent, #9c007b) 3.5%, transparent);
  }
}

/* The support steps contain actual links; give keyboard users the same cue. */
.site-page .support-online__steps > li:has(a:focus-visible) {
  background-color: rgba(156, 0, 123, .035);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(#process .steps > .step, .kkt-page .kkt-steps > li, .ed-page .ed-steps > li, .site-page .support-online__steps > li) {
    transition: transform .3s ease, background-color .3s ease;
  }
  :is(#process .steps > .step, .kkt-page .kkt-steps > li, .ed-page .ed-steps > li, .site-page .support-online__steps > li):hover {
    transform: scale(1.02);
  }
}