/* A decorative nudge toward the next pricing step. Selection stays user-controlled. */
#pricing .plan-steps {
  --step-cue-width: 30px;
  --step-cue-height: 26px;
  --step-cue-center-y: 32px;
  --step-cue-travel: 6px;
}

#pricing .plan-steps #tab-build[aria-selected="true"]::before,
#pricing .plan-steps #tab-host[aria-selected="true"]::before {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  top: calc(var(--step-cue-center-y) - var(--step-cue-height) / 2);
  left: calc(100% - var(--step-cue-width) / 2);
  width: var(--step-cue-width);
  height: var(--step-cue-height);
  background: #78a7af;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  opacity: .8;
  animation: webclt-next-step 1.8s ease-in-out infinite alternate;
}

@keyframes webclt-next-step {
  from { transform: translateX(calc(-1 * var(--step-cue-travel))); }
  to { transform: translateX(var(--step-cue-travel)); }
}

@media (max-width: 639px) {
  #pricing .plan-steps {
    --step-cue-width: 24px;
    --step-cue-height: 22px;
    --step-cue-center-y: 26px;
    --step-cue-travel: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #pricing .plan-steps #tab-build[aria-selected="true"]::before,
  #pricing .plan-steps #tab-host[aria-selected="true"]::before {
    animation: none;
    transform: none;
    opacity: .8;
  }
}

@media (forced-colors: active) {
  #pricing .plan-steps #tab-build[aria-selected="true"]::before,
  #pricing .plan-steps #tab-host[aria-selected="true"]::before {
    animation: none;
    background: CanvasText;
    forced-color-adjust: none;
    opacity: 1;
  }
}