.hero-flow { display: flex; min-height: 300px; flex-direction: column; justify-content: center; padding: 1.3rem; border: 1px solid #8bb5a5; border-radius: 1.2rem; background: linear-gradient(145deg, #27584f 0%, #173c3e 56%, #0f2b31 100%); box-shadow: inset 0 1px #ffffff29; }
.hero-flow .flow-kicker, .hero-flow .flow-note { position: static; margin: 0; color: #dfff67; font-size: .72rem; font-weight: 900; letter-spacing: .14em; }
.hero-flow ol { display: grid; gap: .6rem; margin: 1rem 0; padding: 0; list-style: none; }
.hero-flow li { position: relative; display: grid; grid-template-columns: 2.3rem 1fr; gap: .7rem; align-items: center; padding: .7rem; border-radius: .7rem; background: #ffffff10; }
.hero-flow li:not(:last-child)::after { content: '↓'; position: absolute; bottom: -.78rem; left: .9rem; z-index: 1; color: #dfff67; font-weight: 900; }
.hero-flow li > span { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border-radius: 50%; background: #dfff67; color: #143333; font-size: .7rem; font-weight: 900; }
.hero-flow strong { display: block; color: #fff; font-size: 1rem; }
.hero-flow small { display: block; margin-top: .1rem; color: #c9ddd5; font-size: .74rem; }
.hero-flow .flow-note { color: #bdd5cc; font-weight: 600; letter-spacing: .04em; }
@media (prefers-reduced-motion: no-preference) {
  .motion-ready .hero-flow li, .motion-ready .hero-flow .flow-kicker, .motion-ready .hero-flow .flow-note { opacity: 0; transform: translateX(16px); }
  .motion-ready .hero.is-revealed .hero-flow .flow-kicker { animation: flow-enter .4s ease .12s forwards; }
  .motion-ready .hero.is-revealed .hero-flow li:nth-child(1) { animation: flow-enter .42s ease .28s forwards; }
  .motion-ready .hero.is-revealed .hero-flow li:nth-child(2) { animation: flow-enter .42s ease .46s forwards; }
  .motion-ready .hero.is-revealed .hero-flow li:nth-child(3) { animation: flow-enter .42s ease .64s forwards; }
  .motion-ready .hero.is-revealed .hero-flow .flow-note { animation: flow-enter .42s ease .82s forwards; }
  @keyframes flow-enter { to { opacity: 1; transform: translateX(0); } }
}
@media (max-width: 800px) { .hero-flow { min-height: auto; } }