/* How we work: enhancements to the original four-step rail */
.flow4{counter-reset:f;padding-top:4px}
.flow4::before{z-index:0;top:35px;height:2px;border-radius:2px;background:#E3E9F4}
.flow4::after{z-index:0;top:35px;height:2px;border-radius:2px;background:linear-gradient(90deg,#A9C2EE,#3C63B8 55%,#74C22D);transition:width 1.8s cubic-bezier(.45,0,.25,1) .2s}
.flow4 li{counter-increment:f;padding:0 14px 26px;border-radius:24px;isolation:isolate;position:relative;z-index:1}
.flow4 li::after{content:"";position:absolute;inset:-14px 0 0;border-radius:24px;background:#fff;box-shadow:0 1px 2px rgba(11,20,48,.04),0 24px 50px -28px rgba(28,47,95,.35);opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .45s var(--ease);z-index:-1}
.flow4 li:hover::after{opacity:1;transform:none}
/* node */
.flow4 .n{width:72px;height:72px;background:radial-gradient(circle at 35% 28%,#FFFFFF,#EEF3FA 75%);border:1px solid rgba(11,20,48,.08);box-shadow:0 0 0 7px #fff,0 1px 2px rgba(11,20,48,.05),0 14px 30px -14px rgba(28,47,95,.35);color:#1C2F5F;transition:color .5s,transform .5s var(--ease),box-shadow .5s}
.flow4 .n svg{width:26px;height:26px;position:relative;z-index:1}
.flow4 .n::before{content:"";position:absolute;inset:-5px;border-radius:50%;padding:2px;background:conic-gradient(from 210deg,#A9C2EE,#3C63B8,#74C22D,#B8EB4F,#A9C2EE);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transform:rotate(-90deg) scale(.85);transition:opacity .6s ease,transform .9s var(--ease)}
.flow4 .n::after{content:counter(f,decimal-leading-zero);position:absolute;right:-6px;top:-6px;min-width:24px;height:24px;padding:0 6px;border-radius:999px;display:grid;place-items:center;background:#0B1430;color:#B8EB4F;font:700 11px/1 var(--f-display);letter-spacing:.04em;box-shadow:0 6px 14px -6px rgba(11,20,48,.6);opacity:0;transform:scale(.4);transition:opacity .4s ease,transform .5s cubic-bezier(.34,1.6,.5,1)}
.flow4.is-in .n{color:#3C63B8}
.flow4.is-in .n::before{opacity:1;transform:none}
.flow4.is-in .n::after{opacity:1;transform:none}
.flow4.is-in li:nth-child(1) .n,.flow4.is-in li:nth-child(1) .n::before,.flow4.is-in li:nth-child(1) .n::after{transition-delay:.25s}
.flow4.is-in li:nth-child(2) .n,.flow4.is-in li:nth-child(2) .n::before,.flow4.is-in li:nth-child(2) .n::after{transition-delay:.85s}
.flow4.is-in li:nth-child(3) .n,.flow4.is-in li:nth-child(3) .n::before,.flow4.is-in li:nth-child(3) .n::after{transition-delay:1.45s}
.flow4.is-in li:nth-child(4) .n,.flow4.is-in li:nth-child(4) .n::before,.flow4.is-in li:nth-child(4) .n::after{transition-delay:2s}
.flow4 li:hover .n{transform:translateY(-3px);color:#1E9C6B;box-shadow:0 0 0 7px #fff,0 1px 2px rgba(11,20,48,.05),0 18px 34px -14px rgba(30,156,107,.45)}
/* text */
.flow4 li h3{margin-top:12px;font-size:var(--fs-lg);color:var(--d-hi)}
.flow4 li p{line-height:1.6}
/* recurring: a soft light travels the rail and each stage glows as it passes */
.flow4 li:first-child>.n+h3::before{content:"";position:absolute;left:50%;top:31px;width:10px;z-index:3;height:10px;margin-left:-5px;border-radius:50%;background:#B8EB4F;box-shadow:0 0 0 4px rgba(146,214,60,.2),0 0 16px 4px rgba(146,214,60,.55);opacity:0;pointer-events:none;z-index:0}
.flow4.is-in li:first-child>.n+h3::before{animation:hwTravel 7s linear 2.8s infinite}
@keyframes hwTravel{0%{left:50%;opacity:0}4%{opacity:1}36%{left:350%;opacity:1}40%{left:350%;opacity:0}100%{left:350%;opacity:0}}
.flow4.is-in .n{animation:hwNode 7s ease-out infinite}
.flow4.is-in li:nth-child(1) .n{animation-delay:2.8s}
.flow4.is-in li:nth-child(2) .n{animation-delay:3.64s}
.flow4.is-in li:nth-child(3) .n{animation-delay:4.48s}
.flow4.is-in li:nth-child(4) .n{animation-delay:5.32s}
@keyframes hwNode{0%{box-shadow:0 0 0 7px #fff,0 1px 2px rgba(11,20,48,.05),0 14px 30px -14px rgba(28,47,95,.35),0 0 0 0 rgba(146,214,60,.45)}6%{box-shadow:0 0 0 7px #fff,0 1px 2px rgba(11,20,48,.05),0 14px 30px -14px rgba(28,47,95,.35),0 0 0 12px rgba(146,214,60,0)}100%{box-shadow:0 0 0 7px #fff,0 1px 2px rgba(11,20,48,.05),0 14px 30px -14px rgba(28,47,95,.35),0 0 0 12px rgba(146,214,60,0)}}
@media (max-width:860px){.flow4 li{padding-bottom:18px}.flow4 li:first-child>.n+h3::before{display:none}}
@media (prefers-reduced-motion:reduce){.flow4 *,.flow4 *::before,.flow4 *::after{animation:none !important;transition:none !important}}
/* m-floor:start (generated by scripts/gen_mfloor.py) */
@media (max-width:760px){.flow4 .n::after{font-size:max(12px, 11px)}}
/* m-floor:end */