.flow{--bg:var(--color-night);--line:var(--color-line-on-dark);--mint:var(--color-mint-on-dark);--zone:#8fd8ae12;--rail:2px;--node:60px;--icon:44px;--lane-gap:var(--space-3);--zone-x:12px;--fork-y:16px;--fork-pad:44px;--bend:20px;padding-block:var(--section-y);background:var(--bg);color:var(--color-on-dark)}.flow h2{margin:0 0 var(--section-y-sub);font-size:var(--text-h2);font-weight:700;line-height:var(--leading-heading);letter-spacing:var(--tracking-heading);text-wrap:balance}.flow-steps{gap:var(--space-6);flex-direction:column;margin:0;padding:0;list-style:none;display:flex;position:relative}.flow-steps:before{content:"";top:calc(var(--node) / 2);bottom:0;left:calc(var(--node) / 2 - var(--rail) / 2);width:var(--rail);background:var(--line);position:absolute}.flow-steps>.flow-step:last-child:after{content:"";z-index:1;top:var(--node);width:var(--node);background:var(--bg);position:absolute;bottom:0;left:0}.flow-step{grid-template-columns:var(--node) minmax(0, 1fr);column-gap:var(--space-4);display:grid;position:relative}.flow-node{z-index:1;width:var(--node);height:var(--node);border:1px solid var(--line);background:var(--bg);transition:border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);border-radius:50%;place-items:center;display:grid;position:relative}.flow-ic{width:var(--icon);height:var(--icon);fill:none;stroke:#ffffffe0;stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round;display:block}.flow-ic .acc{stroke:var(--mint)}.flow-ring{stroke:var(--mint);opacity:0;transform-box:fill-box;transform-origin:50%}.flow-txt{min-width:0;padding-top:2px}.flow-n{font-size:var(--text-sm);font-weight:600;line-height:var(--leading-snug);letter-spacing:var(--tracking-label);color:var(--mint);margin:0}.flow-tag{color:var(--color-on-dark-muted);font-weight:500}.flow-t{font-size:var(--text-md);font-weight:600;line-height:var(--leading-snug);letter-spacing:-.01em;text-wrap:balance;margin:2px 0 0}.flow-d{margin:var(--space-1) 0 0;font-size:var(--text-sm);color:var(--color-on-dark-muted);text-wrap:pretty;line-height:1.55}.flow-hook{display:none}.flow-fork{column-gap:var(--lane-gap);margin-inline:calc(-1 * var(--zone-x));padding:var(--fork-pad) var(--zone-x);border-radius:var(--radius-card);background:var(--zone);grid-template-columns:minmax(0,1fr) minmax(0,1fr);display:grid;position:relative}.flow-fork:before{content:"";top:var(--fork-y);bottom:var(--fork-y);left:calc(var(--zone-x) + var(--node) / 2);right:calc(50% - (var(--lane-gap) + var(--node)) / 2 - var(--rail) / 2);border:var(--rail) solid var(--line);border-left:0;border-radius:0 20px 20px 0;position:absolute}.flow-fork:after{content:"";background:radial-gradient(circle 5px at calc(var(--zone-x) + var(--node) / 2) calc(var(--fork-y) + var(--rail) / 2), var(--mint) 0 3.5px, transparent 4px), radial-gradient(circle 5px at calc(var(--zone-x) + var(--node) / 2) calc(100% - var(--fork-y) - var(--rail) / 2), var(--mint) 0 3.5px, transparent 4px);pointer-events:none;position:absolute;inset:0}.flow-lane{z-index:1;gap:var(--space-5);flex-direction:column;margin:0;padding:0;list-style:none;display:flex;position:relative}.flow-lane>.flow-step{column-gap:var(--space-3)}@media (min-width:640px){.flow{--node:64px;--icon:48px;--lane-gap:var(--space-5);--zone-x:16px;--fork-pad:48px}.flow-step{column-gap:var(--space-5)}.flow-lane>.flow-step{column-gap:var(--space-4)}.flow-t{font-size:var(--text-lg)}.flow-d{font-size:var(--text-base)}}@media (min-width:1024px){.flow{--node:72px;--icon:52px;--zone-x:0px;--bend:24px}.flow-steps{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,2.4fr) repeat(4,minmax(0,1fr));gap:0;display:grid}.flow-steps:before{top:calc(var(--node) / 2 - var(--rail) / 2);width:auto;height:var(--rail);bottom:auto;left:5.3191%;right:5.3191%}.flow-steps>.flow-step:last-child:after{content:none}.flow-step{padding-inline:var(--space-1);text-align:center;display:block}.flow-node{margin:0 auto var(--space-4)}.flow-txt{padding-top:0}.flow-t{margin-top:var(--space-1);font-size:.9375rem}.flow-d{margin-top:var(--space-2);font-size:.8125rem;line-height:1.5}.flow-step:before{content:"";top:calc(var(--node) / 2 - var(--rail) / 2);height:var(--rail);background:var(--mint);opacity:0;transition:opacity var(--dur-fast) var(--ease);position:absolute;left:0;right:0}.flow-steps>.flow-step:first-child:before{left:50%}.flow-steps>.flow-step:last-child:before{right:50%}.flow-step[data-hook=loop]:before{content:none}.flow-fork{background:0 0;border-radius:0;grid-template-rows:auto auto;grid-template-columns:minmax(0,.2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.2fr);margin:0;padding:0}.flow-fork:before{border-radius:var(--radius-card);background:var(--zone);border:0;inset:-20px 0 -12px}.flow-fork:after{z-index:0;background:radial-gradient(circle 5px at 4.1667% calc(var(--node) / 2), var(--mint) 0 3.5px, transparent 4px), radial-gradient(circle 5px at 95.8333% calc(var(--node) / 2), var(--mint) 0 3.5px, transparent 4px)}.flow-lane{grid-column:2/4;gap:0;display:grid}.flow-lane--tablet{grid-row:1;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.flow-lane--capsule{grid-row:2;grid-template-columns:minmax(0,1fr)}.flow-lane--tablet>.flow-step{padding-bottom:var(--space-6)}.flow-lane--capsule>.flow-step{padding-bottom:var(--space-5)}.flow-lane--capsule .flow-txt{max-width:32ch;margin-inline:auto}.flow-hook{transition:background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);display:block;position:absolute}.flow-step[data-hook=in]>.flow-hook,.flow-step[data-hook=out]>.flow-hook{top:calc(var(--node) / 2);width:var(--rail);margin-left:calc(var(--rail) / -2);background:var(--line);bottom:0}.flow-step[data-hook=in]>.flow-hook{left:-10%}.flow-step[data-hook=out]>.flow-hook{margin-left:0;margin-right:calc(var(--rail) / -2);right:-10%}.flow-step[data-hook=loop]>.flow-hook{height:calc(var(--node) / 2 + var(--rail) / 2);border:var(--rail) solid var(--line);margin-left:calc(var(--rail) / -2);margin-right:calc(var(--rail) / -2);border-top:0;border-radius:0 0 24px 24px;top:0;left:-5%;right:-5%}.flow-step[data-hook=loop]{padding-inline:0}}@media (min-width:1280px){.flow{--node:84px;--icon:60px}.flow-step{padding-inline:var(--space-2)}.flow-t{font-size:var(--text-md)}}@media (min-width:1360px){.flow-d{font-size:var(--text-sm)}}@media (hover:hover){.flow-step:hover>.flow-node{border-color:var(--mint);background:color-mix(in srgb, var(--mint) 14%, var(--bg));box-shadow:0 0 0 5px #8fd8ae1f}.flow-step:hover>.flow-hook{border-color:var(--mint)}.flow-step[data-hook=in]:hover>.flow-hook,.flow-step[data-hook=out]:hover>.flow-hook{background-color:var(--mint)}}@media (hover:hover) and (min-width:1024px){.flow-step:hover:before{opacity:1}:is(.flow[data-track]:has(.flow-step[data-hook=in]:hover) .flow-seg--in,.flow[data-track]:has(.flow-step[data-hook=out]:hover) .flow-seg--out,.flow[data-track]:has(.flow-step[data-hook=loop]:hover) .flow-seg--side){stroke:var(--mint)}}.flow-board{position:relative}.flow-track{z-index:0;pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.flow-seg{fill:none;stroke:var(--line);stroke-width:var(--rail);transition:stroke var(--dur-fast) var(--ease)}.flow-dot{fill:var(--mint)}.flow-bin-mark path{fill:none;stroke:var(--color-on-dark-muted);stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round}.flow[data-track] .flow-steps:before,.flow[data-track] .flow-fork:after{content:none}.flow[data-track] .flow-fork:before{border-color:#0000}.flow[data-track] .flow-step>.flow-hook{visibility:hidden}@media (prefers-reduced-motion:no-preference){.flow-step:hover .turret{animation:1s linear infinite flow-belt}.flow-step:hover .blade,.flow-step:hover .tumble,.flow-step:hover .arm{transform-box:fill-box;transform-origin:50%}.flow-step:hover .blade{animation:.9s ease-in-out infinite flow-blade}.flow-step:hover .tumble{animation:2.6s linear infinite flow-spin}.flow-step:hover .fluid circle{animation:1.1s ease-in-out infinite flow-bob}.flow-step:hover .fluid circle:nth-child(2n){animation-delay:-.5s}.flow-step:hover .dose path{animation:.9s ease-in-out infinite flow-bob}.flow-step:hover .seal{animation:.9s ease-in-out infinite flow-seal}.flow-step:hover .arm{transform-origin:0 100%;animation:1.3s ease-in-out infinite flow-arm}.flow-step:hover .scan{animation:1.6s ease-in-out infinite flow-scan}.flow-step:hover .lift,.flow-step:hover .drop{animation:1.4s ease-in-out infinite flow-lift}.flow-step:hover .flow-ring{animation:1.4s ease-out infinite flow-ping}}@keyframes flow-belt{to{stroke-dashoffset:-11px}}@keyframes flow-spin{to{transform:rotate(360deg)}}@keyframes flow-blade{50%{transform:scaleX(.25)}}@keyframes flow-bob{50%{transform:translateY(-4px)}}@keyframes flow-seal{50%{transform:translateY(-7px)}}@keyframes flow-arm{50%{transform:rotate(28deg)}}@keyframes flow-scan{0%,to{transform:translate(-14px)}50%{transform:translate(14px)}}@keyframes flow-lift{50%{transform:translateY(-5px)}}@keyframes flow-ping{0%{opacity:.9;transform:scale(.65)}to{opacity:0;transform:scale(1.25)}}