/* Keep the workflow focused on its route and typography, not card-shaped surfaces. */
.workflow-experience .workflow-step-surface {
  display: none !important;
}

.workflow-experience .workflow-step-title {
  font-size: clamp(1.05rem, 1.25vw, 1.32rem) !important;
  line-height: 1.22 !important;
  letter-spacing: 0.005em;
}

.workflow-experience .workflow-step {
  transform-origin: left center;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), filter 260ms ease;
}

.workflow-experience .workflow-step:hover,
.workflow-experience .workflow-step.is-hover-target,
.workflow-experience .workflow-step:focus-visible {
  z-index: 8;
  filter: drop-shadow(0 16px 26px rgba(var(--workflow-accent-rgb), 0.22));
  transform: translateX(10px) scale(1.12) !important;
}

.workflow-experience .workflow-step p {
  color: rgba(var(--text-rgb), 0.9) !important;
  font-size: clamp(0.96rem, 1vw, 1.05rem) !important;
  line-height: 1.58 !important;
}

.workflow-experience .workflow-step::after {
  position: absolute;
  top: 50%;
  left: 0;
  display: block !important;
  width: 2px;
  height: 0;
  border-radius: 999px;
  background: var(--workflow-accent);
  box-shadow: 0 0 12px rgba(var(--workflow-accent-rgb), 0.62);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scaleY(0.35);
  transform-origin: center;
  transition: height 220ms ease, opacity 180ms ease, transform 220ms ease;
}

.workflow-experience .workflow-step:hover::after,
.workflow-experience .workflow-step:focus-visible::after {
  height: 64%;
  opacity: 0.92;
  transform: translateY(-50%) scaleY(1);
}

.workflow-experience .workflow-step:hover .workflow-step-copy,
.workflow-experience .workflow-step:focus-visible .workflow-step-copy {
  transform: translateX(4px);
}

.workflow-experience .workflow-step:hover .workflow-step-number,
.workflow-experience .workflow-step:focus-visible .workflow-step-number {
  color: var(--workflow-title-strong);
  text-shadow: 0 0 12px rgba(var(--workflow-accent-rgb), 0.28);
  transform: translateX(2px) scale(1.06) !important;
}

.workflow-experience .workflow-step:hover .workflow-step-title,
.workflow-experience .workflow-step:focus-visible .workflow-step-title {
  color: var(--workflow-title-strong);
}

@media (prefers-reduced-motion: reduce) {
  .workflow-experience .workflow-step:hover .workflow-step-copy,
  .workflow-experience .workflow-step:focus-visible .workflow-step-copy,
  .workflow-experience .workflow-step:hover .workflow-step-number,
  .workflow-experience .workflow-step:focus-visible .workflow-step-number {
    transform: none !important;
  }

  .workflow-experience .workflow-step:hover,
  .workflow-experience .workflow-step.is-hover-target,
  .workflow-experience .workflow-step:focus-visible {
    filter: none;
    transition: none;
    transform: translateX(10px) scale(1.12) !important;
  }

  .workflow-experience .workflow-step:hover::after,
  .workflow-experience .workflow-step:focus-visible::after {
    transform: translateY(-50%) scaleY(1);
  }
}