/* v50: the animated "watch her work" loop on the free review page. Pure CSS, no script. One 15s loop; each step lights in turn. */
.flow .flowlead{color:var(--mut);max-width:42em;margin:-12px 0 26px}
.flow .steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:14px;position:relative;counter-reset:none}
.flow .steps:before{content:"";position:absolute;left:4%;right:4%;top:25px;height:3px;background:var(--line);border-radius:3px}
.flow .steps:after{content:"";position:absolute;left:4%;top:25px;height:3px;width:92%;background:linear-gradient(90deg,var(--blue),var(--sun));border-radius:3px;transform-origin:left;transform:scaleX(0);animation:flowline 15s linear infinite}
.flow .st{position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 14px 14px;box-shadow:var(--shadow);animation:stlit 15s ease-in-out infinite;animation-delay:calc(var(--i)*2.2s - 2.2s);z-index:1}
.flow .s1{--i:1}.flow .s2{--i:2}.flow .s3{--i:3}.flow .s4{--i:4}.flow .s5{--i:5}.flow .s6{--i:6}
.flow .dot{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--sky);color:var(--blue2);font-weight:800;font-size:.9rem;border:2px solid var(--line);margin-bottom:10px;animation:dotlit 15s ease-in-out infinite;animation-delay:inherit}
.flow .st h3{font-size:1rem;margin:0 0 4px;letter-spacing:-.01em}.flow .st p{font-size:.84rem;line-height:1.45;color:var(--mut);margin:0 0 10px}
.flow .viz{height:64px;border-radius:10px;background:var(--sky);border:1px solid var(--line);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:5px;padding:8px}
.flow .viz{animation-delay:inherit}.flow .viz *{animation-duration:15s;animation-iteration-count:infinite;animation-delay:inherit;animation-timing-function:ease-out}
.flow .v1{flex-direction:column;align-items:stretch;gap:6px}.flow .v1 i{display:block;height:7px;border-radius:4px;background:var(--blue);opacity:.75;transform-origin:left;animation-name:typebar}.flow .v1 i:nth-child(2){width:70%}.flow .v1 i:nth-child(3){width:45%}
.flow .v2{font-size:.66rem;font-weight:800;color:var(--blue2)}.flow .v2 b{background:#fff;border:1px solid var(--line);border-radius:6px;padding:3px 5px;white-space:nowrap}.flow .v2 u{text-decoration:none;color:var(--mut)}.flow .v2 .tick{position:absolute;right:6px;top:4px;color:#fff;background:var(--ok);border-radius:50%;width:18px;height:18px;display:grid;place-items:center;font-size:.7rem;animation-name:pop}
.flow .v3{flex-wrap:wrap;align-content:center}.flow .v3 i{display:block;width:22px;height:28px;border-radius:4px;background:#fff;border:1px solid var(--line);box-shadow:inset 0 5px 0 var(--blue);animation-name:pagein}
.flow .v4{align-items:flex-end;gap:7px}.flow .v4 i{display:block;width:16px;border-radius:4px 4px 0 0;background:linear-gradient(var(--blue),var(--blue2));transform-origin:bottom;animation-name:barup}.flow .v4 i:nth-child(1){height:46px}.flow .v4 i:nth-child(2){height:30px;background:var(--sun2)}.flow .v4 i:nth-child(3){height:40px}.flow .v4 i:nth-child(4){height:52px}
.flow .v5{flex-direction:column;align-items:flex-start;gap:3px}.flow .v5 i{font-style:normal;font-weight:800;color:var(--ok);font-size:.75rem;animation-name:pop}.flow .v5 i:after{content:" ";display:inline-block;width:46px;height:5px;border-radius:3px;background:var(--line);margin-left:6px;vertical-align:middle}
.flow .v6 b{background:#fff;border:1px solid var(--line);border-radius:6px;padding:8px 9px;font-size:.7rem;font-weight:800;color:#c0392b;box-shadow:inset 0 5px 0 var(--blue2);animation-name:fly}
.flow .rail{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}.flow .rail li{font-size:.84rem;font-weight:700;color:var(--blue2);background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 14px;animation:railglow 15s ease-in-out infinite}
.flow .rail li:nth-child(2){animation-delay:.5s}.flow .rail li:nth-child(3){animation-delay:1s}.flow .rail li:nth-child(4){animation-delay:1.5s}.flow .rail li:nth-child(5){animation-delay:2s}
@keyframes flowline{0%{transform:scaleX(0)}88%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes stlit{0%,16%{border-color:var(--blue);transform:translateY(-4px);box-shadow:0 14px 34px rgba(31,99,214,.22)}18%,100%{border-color:var(--line);transform:none;box-shadow:var(--shadow)}}
@keyframes dotlit{0%,16%{background:var(--blue);color:#fff;border-color:var(--blue)}18%,100%{background:var(--sky);color:var(--blue2);border-color:var(--line)}}
@keyframes typebar{0%{transform:scaleX(0)}8%,100%{transform:scaleX(1)}}
@keyframes pop{0%,2%{transform:scale(0);opacity:0}8%,96%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}
@keyframes pagein{0%,2%{transform:translateY(14px);opacity:0}9%,96%{transform:none;opacity:1}100%{opacity:0}}
@keyframes barup{0%{transform:scaleY(0)}10%,96%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes fly{0%{transform:translateX(-46px);opacity:0}10%{transform:none;opacity:1}14%,100%{transform:none;opacity:1}}
@keyframes railglow{0%,12%{background:var(--sky);border-color:var(--blue)}16%,100%{background:#fff;border-color:var(--line)}}
@media(max-width:1000px){.flow .steps{grid-template-columns:repeat(3,1fr)}.flow .steps:before,.flow .steps:after{display:none}}
@media(max-width:620px){.flow .steps{grid-template-columns:1fr}.flow .viz{max-width:260px}}
@media(prefers-reduced-motion:reduce){.flow .steps:after{animation:none;transform:scaleX(1)}.flow .st,.flow .dot,.flow .viz *,.flow .rail li{animation:none!important}.flow .dot{background:var(--blue);color:#fff;border-color:var(--blue)}}