/* Home page facelift (TW #3658): the three "Up and Running" steps pop in one by one as the visitor
   scrolls. The hidden starting state only applies once facelift.js adds .is-reveal, so without
   script, or with reduced motion, the steps simply show. */
.how-it-works.is-reveal .step {
  opacity: 0;
  transform: translateY(28px) scale(0.9);
}
.how-it-works.is-reveal .step.is-in {
  animation: uc-step-pop 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.how-it-works.is-reveal .step.is-in .step-number {
  animation: uc-step-ring 1s ease-out 0.2s both;
}
@keyframes uc-step-pop {
  from { opacity: 0; transform: translateY(28px) scale(0.9); }
  to { opacity: 1; transform: none; }
}
@keyframes uc-step-ring {
  0% { box-shadow: 0 0 0 0 rgba(232, 168, 56, 0.75); }
  100% { box-shadow: 0 0 0 20px rgba(232, 168, 56, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .how-it-works.is-reveal .step { opacity: 1; transform: none; }
  .how-it-works.is-reveal .step.is-in,
  .how-it-works.is-reveal .step.is-in .step-number { animation: none; }
}

/* The three steps in colorful boxes (Steve 2026-10-18, TW #3683, option C of
   https://claude.ai/artifact/3sDcFWht6yWVMACXcoszEm): rich gradients with a soft glow. */
.how-it-works .step { border-radius: 16px; padding: 2rem 1.6rem 1.8rem; color: #fff; }
.how-it-works .step p { color: inherit; }
.how-it-works .step:nth-child(1) { background: linear-gradient(150deg, #f6c453 0%, #e08a1e 100%); color: #2a1600; box-shadow: 0 14px 30px rgba(224, 138, 30, 0.35); }
.how-it-works .step:nth-child(2) { background: linear-gradient(150deg, #3b7fd0 0%, #1a3a5c 100%); box-shadow: 0 14px 30px rgba(26, 58, 92, 0.35); }
.how-it-works .step:nth-child(3) { background: linear-gradient(150deg, #22a594 0%, #0f5e6b 100%); box-shadow: 0 14px 30px rgba(15, 94, 107, 0.35); }
.how-it-works .step-number { background: rgba(255, 255, 255, 0.95); }
.how-it-works .step:nth-child(1) .step-number { color: #b8650c; }
.how-it-works .step:nth-child(2) .step-number { color: #1a3a5c; }
.how-it-works .step:nth-child(3) .step-number { color: #0f5e6b; }
@media (max-width: 900px) { .how-it-works .steps { gap: 1.25rem; } }