/* Progressive enhancement: default content is visible, without transformed layout. */
@keyframes comnexiom-reveal{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.motion-reveal.is-revealed{animation:comnexiom-reveal 460ms ease-out both;animation-delay:var(--reveal-delay,0ms)}
.flow-diagram{margin:32px 0 0}.flow-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.flow-step{position:relative;min-width:0;padding:22px 18px;border:1px solid var(--line);border-radius:14px;background:var(--navy);color:var(--blue)}
.flow-number{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--muted);margin-bottom:16px}.flow-icon{display:block;width:58px;height:58px;margin:0 0 22px;color:var(--green)}
.flow-step h3{font-size:18px;line-height:1.3;letter-spacing:0;margin:0 0 10px;color:var(--white)}.flow-step p{font-size:14px;line-height:1.6;margin:0;color:var(--muted)}
.flow-step:not(:last-child)::after{content:'→';position:absolute;z-index:1;right:-19px;top:85px;width:18px;text-align:center;color:var(--blue);font-size:20px;line-height:1}
.flow-diagram figcaption{margin-top:22px;font-size:14px;line-height:1.7;color:var(--muted);max-width:1000px}
@keyframes comnexiom-flow{0%,100%{border-color:var(--line);box-shadow:0 0 0 0 transparent}35%,70%{border-color:var(--green);box-shadow:0 0 0 1px #42f21b44,0 0 20px #0785ff22}}
@keyframes comnexiom-signal{0%,100%{color:var(--blue);opacity:.6}50%{color:var(--green);opacity:1}}
.flow-diagram.flow-running .flow-step{animation:comnexiom-flow 760ms ease-out 1;animation-delay:calc(var(--step)*600ms)}
.flow-diagram.flow-running .flow-step::after{animation:comnexiom-signal 600ms ease-out 1;animation-delay:calc(var(--step)*600ms + 400ms)}
@media(max-width:1000px){.flow-steps{grid-template-columns:1fr;gap:26px}.flow-step{display:grid;grid-template-columns:58px 1fr;column-gap:20px;padding:20px}.flow-number{position:absolute;right:16px;top:12px;margin:0}.flow-icon{grid-row:1/3;align-self:center;margin:0}.flow-step h3{padding-right:20px}.flow-step:not(:last-child)::after{content:'↓';top:auto;bottom:-25px;left:40px;right:auto;height:24px}.flow-step p{grid-column:2}}
@media(prefers-reduced-motion:reduce){.motion-reveal.is-revealed,.flow-diagram.flow-running .flow-step,.flow-diagram.flow-running .flow-step::after{animation:none!important;transition:none!important;transform:none!important;opacity:1!important}}