/* optimization: three-step path, every step centred on its column. The CRM leg stays a scattered grey band all the way into Addie; only the Addie leg is crisp and bright. Stacks into a left-aligned list on narrow screens */
.sg-stage{--stage:#E8E2FD;position:relative;padding:76px 56px 68px;border-radius:var(--r-panel);background-color:var(--stage);background-image:var(--grain-d)}
.sg{--g:48px;--nd:52px;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g)}
.sg-s{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center}
.sg-s::before{content:"";position:absolute;top:calc(var(--nd)/2 - 3px);left:calc(50% + var(--nd)/2);width:calc(100% + var(--g) - var(--nd));height:6px;background:radial-gradient(circle,var(--cobalt) 0 2.2px,transparent 2.8px) 0 50%/10px 6px repeat-x;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--cobalt) 55%,transparent));animation:sgFlow .9s linear infinite}
.sg-s:last-child::before{display:none}
.sg-s:first-child::before{top:calc(var(--nd)/2 - 15px);left:calc(50% + var(--nd)/2 - 6px);width:calc(100% + var(--g) - var(--nd) + 12px);height:30px;background:radial-gradient(circle,var(--fg3) 0 1.4px,transparent 2px) 0 3px/13px 30px repeat-x,radial-gradient(circle,var(--fg3) 0 1px,transparent 1.6px) 4px -7px/19px 30px repeat-x,radial-gradient(circle,var(--fg3) 0 2px,transparent 2.6px) 9px 8px/29px 30px repeat-x,radial-gradient(circle,var(--fg3) 0 1.2px,transparent 1.8px) 2px -2px/7px 30px repeat-x;filter:none;opacity:.85;animation:sgNoise 2.4s linear infinite}
@keyframes sgFlow{to{background-position:10px 50%}}
@keyframes sgNoise{to{background-position:13px 3px,23px -7px,38px 8px,9px -2px}}
.sg-n{position:relative;z-index:1;display:grid;place-items:center;width:var(--nd);height:var(--nd);border-radius:50%;background:var(--paper);box-shadow:var(--a-shadow);font-size:15px;font-weight:500;letter-spacing:.3px;color:var(--cobalt);font-variant-numeric:tabular-nums}
.sg-a .sg-n{background:var(--cobalt);color:var(--paper);box-shadow:0 0 0 7px color-mix(in srgb,var(--cobalt) 16%,transparent),var(--a-shadow)}
.sg-gold{background:var(--gold);color:var(--ink);box-shadow:0 0 0 7px color-mix(in srgb,var(--gold) 30%,transparent),var(--a-shadow)}
.sg-mini i{width:22px;height:22px;background:linear-gradient(160deg,var(--gold),var(--orange));-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
.sg-s h3{margin-top:32px;font-size:24px;line-height:1.15;letter-spacing:-.5px;text-wrap:balance}
.sg-s p{margin-top:12px;max-width:30ch;font-size:16.5px;line-height:1.55;letter-spacing:-.1px;color:var(--fg2);text-wrap:pretty}
.sg-c{position:absolute;z-index:1;top:calc(var(--nd)/2);left:calc(100% + var(--g)/2);transform:translate(-50%,-50%);padding:7px 14px;border-radius:999px;background:var(--paper);box-shadow:var(--a-shadow);font-size:13.5px;font-weight:500;line-height:1.3;white-space:nowrap;color:var(--fg)}
@media (max-width:1080px){.sg-stage{padding:64px 36px 56px}.sg{--g:36px}.sg-s h3{font-size:22px}.sg-s p{font-size:15.5px}}
@media (max-width:980px){
.sg-stage{padding:48px 40px}
.sg{grid-template-columns:minmax(0,1fr)}
.sg-s{display:grid;grid-template-columns:var(--nd) minmax(0,1fr);column-gap:22px;align-content:start;align-items:normal;text-align:left}
.sg-n{grid-row:1/span 3}
.sg-s h3,.sg-s p,.sg-c{grid-column:2}
.sg-s h3{display:flex;align-items:center;min-height:var(--nd);margin-top:0}
.sg-s p{max-width:46ch;margin-top:4px;font-size:16px}
.sg-s::before,.sg-s:first-child::before{top:var(--nd);left:calc(var(--nd)/2 - 3px);width:6px;height:calc(100% + var(--g) - var(--nd));background:radial-gradient(circle,var(--cobalt) 0 2.2px,transparent 2.8px) 50% 0/6px 10px repeat-y;animation-name:sgFlowY;animation-duration:.9s}
.sg-s:first-child::before{left:calc(var(--nd)/2 - 13px);width:26px;background:radial-gradient(circle,var(--fg3) 0 1.4px,transparent 2px) 3px 0/26px 13px repeat-y,radial-gradient(circle,var(--fg3) 0 1px,transparent 1.6px) -7px 4px/26px 19px repeat-y,radial-gradient(circle,var(--fg3) 0 2px,transparent 2.6px) 8px 9px/26px 29px repeat-y,radial-gradient(circle,var(--fg3) 0 1.2px,transparent 1.8px) -2px 2px/26px 7px repeat-y;animation-name:sgNoiseY;animation-duration:2.4s}
.sg-c{position:static;justify-self:start;transform:none;margin-top:16px}
}
@keyframes sgFlowY{to{background-position:50% 10px}}
@keyframes sgNoiseY{to{background-position:3px 13px,-7px 23px,8px 38px,-2px 9px}}
@media (max-width:760px){.sg-stage{padding:32px 22px;border-radius:28px}.sg{--g:30px;--nd:44px}.sg-s{column-gap:16px}.sg-s h3{font-size:21px}}
@media (prefers-reduced-motion:reduce){.sg-stage .sg-s::before{animation:none}}


.op-sg{scroll-margin-top:96px}

.sg-stage:not(.run) .sg-s::before,.sg-stage:not(.run) .spk,.sg-stage:not(.run) .dot{animation-play-state:paused}

@media(max-width:980px){.sg-c{display:none}}