/* Shared directional connectors for the two three-step narratives. */
.connected-steps{--flow-gap:72px;--flow-center:38px;gap:var(--flow-gap)}
.connected-steps>li{position:relative}
.connected-steps>li>span{display:flex;align-items:center;width:78px;height:76px;font-size:64px;line-height:1;margin:0 0 26px}
.connected-steps>li:not(:last-child)::after{content:"";display:block;position:absolute;left:94px;right:calc(18px - var(--flow-gap));top:calc(var(--flow-center) - 1.5px);height:3px;border-radius:3px;background:var(--red);pointer-events:none}
.connected-steps>li:not(:last-child)::before{content:"";display:block;position:absolute;left:auto;right:calc(11px - var(--flow-gap));top:calc(var(--flow-center) - 6px);width:12px;height:12px;border-top:3px solid var(--red);border-right:3px solid var(--red);transform:rotate(45deg);box-sizing:border-box;pointer-events:none}
.connected-steps>li:last-child::before,.connected-steps>li:last-child::after{content:none;display:none}
@media(max-width:1100px) and (min-width:761px){.connected-steps{--flow-gap:48px}}
@media(max-width:760px){
 .connected-steps{--flow-gap:40px;grid-template-columns:1fr}
 .connected-steps>li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 20px}
 .connected-steps>li>span{grid-row:span 2;width:44px;height:44px;font-size:38px;margin:2px 0 0}
 .connected-steps>li:not(:last-child)::after{left:20.5px;right:auto;top:55px;bottom:-20px;width:3px;height:auto}
 .connected-steps>li:not(:last-child)::before{left:16px;right:auto;top:auto;bottom:-26px;transform:rotate(135deg)}
}
@media(max-width:360px){
 .connected-steps>li{grid-template-columns:40px minmax(0,1fr);column-gap:17px}
 .connected-steps>li>span{width:40px;font-size:36px}
 .connected-steps>li:not(:last-child)::after{left:18.5px}
 .connected-steps>li:not(:last-child)::before{left:14px}
}