/* The cream and dark surfaces provide the divider; only the handle is drawn.
   The comparison previews itself once, so it needs no extra scroll runway. */
.comparison-labels button{opacity:.58;transition:opacity .28s ease}
.comparison-labels button[aria-pressed="true"]{opacity:1}
.comparison-scroll{height:auto}
.comparison-sticky{position:relative;top:0}
.comparison,
.comparison:has(.compare-range:focus-visible){border:0;outline:none;box-shadow:none;--divider:calc(100% - 27px)}
.before-view{background:#f2f3e9}
.after-view{background:#20282a;isolation:isolate}
.comparison-background{position:absolute;left:-1.52%;top:-35.81%;width:103.22%;height:152.65%;max-width:none;object-fit:fill;pointer-events:none;z-index:0}
.after-view .growth-lead{background:#f2f3e9;color:#000}
.partner-owner{color:#fff;z-index:1}
.partner-owner span{font-size:1.0563cqw}
.after-view .service-grid{left:8.2746%;right:8.1573%;z-index:1}
.after-view .service{background:#f2f3e9;color:#000}
.after-connectors{left:6.5728%;width:87.0599%;z-index:1}
.after-connectors img{position:absolute;left:50%;top:50%;width:52.0001px;height:1483.5px;max-width:none;transform:translate(-50%,-50%) rotate(90deg) scale(var(--connector-scale,.75))}
.service-icon{overflow:visible;isolation:isolate}
.service-icon.lime{background:transparent;--icon-background:#e4ff9b}
.service-icon.orange{background:transparent;--icon-background:#ff9f76}
.service-icon.purple{background:transparent;--icon-background:#e2b0f4}
.service-icon.blue{background:transparent;--icon-background:#58b0f4}
.service-icon:before{content:'';position:absolute;inset:0;background:var(--icon-background);border-radius:7.778cqw;filter:blur(5.556cqw);z-index:-1}
.vendor{filter:none;transform:none;color:#62665d}
.vendor span{color:#858a7d}
.compare-divider{left:var(--divider);top:50%;bottom:auto;width:var(--handle-size,46px);height:var(--handle-size,46px);border:0;border-radius:50%;background:transparent;opacity:1;transform:translate(-50%,-50%);z-index:4;pointer-events:none}
.compare-divider img{position:absolute;left:50%;top:50%;width:122px;height:122px;max-width:none;transform:translate(-50%,-50%) scale(var(--handle-art-scale,.742));z-index:1}
.compare-divider:before{content:'';position:absolute;inset:1px;border-radius:50%;box-shadow:0 0 17px 8px #e4ff9b;opacity:.2;animation:comparison-glow 2.8s ease-in-out infinite}
@keyframes comparison-glow{0%,100%{opacity:.12;transform:scale(.96)}50%{opacity:.58;transform:scale(1.09)}}
.comparison.is-dragging .compare-divider:before,.motion-paused .compare-divider:before{animation-play-state:paused}
.comparison.is-keyboard .compare-divider{outline:2px solid #879c4e;outline-offset:5px}
.compare-range{outline:none}
/* Leave a clear lane for the handle where its minimum touch size no longer
   scales down with the desktop diagram. */
@media(max-width:1100px){
 .comparison{--card-edge:48px;--vendor-width:calc((100% - 96px - 8%) / 3)}
 .vendor{left:var(--card-edge);right:auto;width:var(--vendor-width)}
 .vendor-1,.vendor-4{left:calc((100% - var(--vendor-width)) / 2)}
 .vendor-2,.vendor-5{left:auto;right:var(--card-edge)}
 .after-view .service-grid{left:max(8.2746%,var(--card-edge));right:max(8.1573%,var(--card-edge))}
}
@media(max-width:800px){.partner-owner span{font-size:13px}}
@media(max-width:560px){
 .partner-owner span{font-size:12px}
 .after-connectors{left:8%;width:84%}
 .vendor{left:var(--card-edge);right:auto;width:calc(50% - var(--card-edge) - 3%)}
 .vendor-1,.vendor-3,.vendor-5{left:auto;right:var(--card-edge)}
 .vendor-2,.vendor-4{left:var(--card-edge);right:auto}
}
@media(prefers-reduced-motion:reduce){.compare-divider:before{animation:none;opacity:.2}}