/* Figma 108:1443 and 108:1380, one content tree at both sizes. */
#sn-connect .sn-product-frame--content-height,#sn-connect .sn-glass:has(.connect-diagram),#sn-connect .sn-graphic-canvas:has(.connect-diagram){height:auto;min-height:0;aspect-ratio:auto;overflow:visible}
#sn-connect .sn-glass:has(.connect-diagram){display:block;padding:0;background:transparent;border:0}
#sn-connect .sn-graphic-canvas:has(.connect-diagram){display:block;width:100%;min-width:0}
#sn-connect .connect-diagram{--cn-unit:calc(100cqw / 1248);margin:0;width:100%;box-sizing:border-box;padding:calc(121 * var(--cn-unit)) calc(167 * var(--cn-unit)) calc(121 * var(--cn-unit)) calc(135 * var(--cn-unit));border:1px solid rgb(255 255 255 / .25);border-radius:16px;background:transparent;color:#fff;font:600 calc(12 * var(--cn-unit))/1.25 "Funnel Sans";font-variation-settings:"wght" 600;letter-spacing:.1em;text-transform:uppercase}
#sn-connect .connect-diagram-content{display:grid;grid-template-columns:188fr 476fr 280fr;grid-template-areas:"existing-heading . newwork-heading" "existing bridge target";row-gap:calc(60 * var(--cn-unit));padding-bottom:calc(32 * var(--cn-unit))}
#sn-connect .connect-diagram-heading{display:flex;align-items:center;justify-content:center;min-height:calc(36 * var(--cn-unit));margin:0;font:inherit;letter-spacing:inherit;text-align:center}
#sn-connect .connect-diagram-heading--existing{grid-area:existing-heading}#sn-connect .connect-diagram-heading--newwork{grid-area:newwork-heading}
#sn-connect .connect-diagram-existing{grid-area:existing;display:flex;flex-direction:column;justify-content:center;gap:calc(12 * var(--cn-unit));padding-bottom:calc(16 * var(--cn-unit))}
#sn-connect .connect-diagram-pill{display:flex;align-items:center;justify-content:center;min-height:calc(36 * var(--cn-unit));padding:0 calc(8 * var(--cn-unit));border-radius:72px;background:#fff;color:#0f172b;text-align:center}
#sn-connect .connect-diagram-target{grid-area:target;display:flex;flex-direction:column;gap:calc(12 * var(--cn-unit));padding:calc(44 * var(--cn-unit)) calc(24 * var(--cn-unit));border:1px solid rgb(255 255 255 / .5);border-radius:8px}
#sn-connect .connect-diagram-bridge{grid-area:bridge;display:flex;align-items:center;gap:calc(9 * var(--cn-unit));padding-left:calc(48 * var(--cn-unit));padding-right:calc(12 * var(--cn-unit))}
#sn-connect .connect-diagram-core{display:flex;align-items:center;justify-content:center;flex:none;width:calc(130 * var(--cn-unit));height:calc(130 * var(--cn-unit));border-radius:50%;background:#fff;color:#0f172b;font:inherit;font-size:1.2em;letter-spacing:inherit}
#sn-connect .connect-diagram-bracket{position:relative;flex:none;width:calc(86 * var(--cn-unit));height:calc(268 * var(--cn-unit))}
#sn-connect .connect-diagram-arrow{position:relative;flex:none;width:calc(182 * var(--cn-unit));height:calc(8 * var(--cn-unit))}
#sn-connect .connect-diagram-bridge img{position:absolute;left:50%;top:50%;max-width:none;transform-origin:center}
#sn-connect .connect-diagram-bracket .connect-diagram-desktop{transform:translate(-50%,-50%) rotate(90deg) scale(var(--connect-scale,1))}
#sn-connect .connect-diagram-arrow .connect-diagram-desktop{transform:translate(-50%,-50%) scale(var(--connect-scale,1))}
#sn-connect .connect-diagram-mobile{display:none}
@container(max-width:760px){
 #sn-connect .connect-diagram{padding:32px;border-radius:18px;font-size:12px}
 #sn-connect .connect-diagram-content{display:flex;flex-direction:column;align-items:center;gap:16px;padding:0}
 #sn-connect .connect-diagram-heading{min-height:36px;width:100%}
 #sn-connect .connect-diagram-existing{width:100%;align-items:center;gap:12px;padding-bottom:16px}
 #sn-connect .connect-diagram-pill{min-height:36px;padding:8px 10px;width:100%;box-sizing:border-box}
 #sn-connect .connect-diagram-existing .connect-diagram-pill{max-width:200px}
 #sn-connect .connect-diagram-bridge{flex-direction:column;gap:8px;padding:0;width:100%}
 #sn-connect .connect-diagram-core{width:130px;height:130px}
 #sn-connect .connect-diagram-bracket{width:min(268px,100%);height:86px}
 #sn-connect .connect-diagram-arrow{width:8px;height:48px}
 #sn-connect .connect-diagram-desktop{display:none}#sn-connect .connect-diagram-mobile{display:block}
 #sn-connect .connect-diagram-bracket .connect-diagram-mobile{transform:translate(-50%,-50%) rotate(180deg) scale(var(--connect-mobile-scale,1))}
 #sn-connect .connect-diagram-arrow .connect-diagram-mobile{transform:translate(-50%,-50%) rotate(90deg)}
 #sn-connect .connect-diagram-target{width:100%;box-sizing:border-box;gap:12px;padding:44px 24px}
}
@container(max-width:360px){#sn-connect .connect-diagram{padding:24px 16px}#sn-connect .connect-diagram-target{padding:32px 12px}#sn-connect .connect-diagram-target .connect-diagram-pill{font-size:11px}}