/* A single pinned stage: native scroll builds the platform from the inside out. */
.connection-story{height:500svh;min-height:0;padding:0;overflow:visible;position:relative;background:#080808;color:#fff}
.connection-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.connection-canvas{width:min(1240px,90%);height:min(680px,calc(100svh - 160px));position:relative;margin-top:25px}
.connection-titles{position:relative;height:175px;text-align:center;z-index:2}
.connection-title{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(25px);transition:opacity .5s,transform .65s,visibility .5s}
.connection-title.is-active{opacity:1;visibility:visible;transform:none}
.connection-title h2{font-size:clamp(42px,4.5vw,66px);font-weight:750;line-height:1.04;letter-spacing:-.055em}
.connection-title h2 em{color:#9b9ba6}
.connection-title p{font-size:18px;line-height:1.5;color:#9999a5;margin-top:22px;max-width:670px}
.connection-title[data-connection-title="0"]{top:calc(min(680px,100svh - 160px)/2 - 100px);bottom:auto;height:200px}
.connection-title[data-connection-title="0"] h2{font-size:clamp(52px,6.8vw,95px)}
.connection-architecture{position:relative;height:390px;margin-top:26px;opacity:0;transform:scale(.9);transition:opacity .6s,transform .8s}
.connection-story:not([data-connection-step="0"]) .connection-architecture{opacity:1;transform:none}
.architecture-source{position:absolute;left:50%;top:140px;transform:translate(-50%,-50%);text-align:center;z-index:2;transition:top .8s,transform .8s}
.architecture-logo{width:116px;height:116px;border-radius:30px;background:#161619;border:1px solid #ffffff26;display:grid;place-items:center;box-shadow:0 20px 65px #000,0 0 70px -30px #ffffff22;transition:width .8s,height .8s,border-radius .8s,box-shadow .8s}
.architecture-logo img{height:70px;width:auto;transition:height .8s}.architecture-source>span{font-size:18px;letter-spacing:-.5px;font-weight:650;display:block;margin-top:17px;transition:opacity .3s}
.architecture-clouds{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;position:absolute;inset:106px 0 auto;opacity:0;visibility:hidden;transition:opacity .7s,visibility .7s}
.architecture-cloud{position:relative;text-align:center;min-width:0;border-top:1px solid color-mix(in srgb,var(--cloud-color),transparent 55%);padding:23px 10px 18px;border-radius:14px;background:linear-gradient(color-mix(in srgb,var(--cloud-color),transparent 95%),#111114);transform:translateY(28px);transition:transform .7s,background .7s;transition-delay:calc(var(--cloud-order)*45ms)}
.architecture-cloud:before{content:'';position:absolute;left:50%;top:-30px;width:1px;height:29px;background:#ffffff28}
.architecture-cloud h3{font-size:21px;line-height:1.2;font-weight:600;letter-spacing:-.8px;color:var(--cloud-color)}.architecture-cloud h3 small{font-size:13px;font-weight:400;letter-spacing:0;display:block;margin-top:4px;color:#a0a0ad}
.architecture-branches{position:absolute;left:8.33%;right:8.33%;top:76px;border-top:1px solid #ffffff28;opacity:0;transition:opacity .7s}.architecture-branches:before{content:'';position:absolute;left:50%;height:40px;width:1px;background:#ffffff28;bottom:0}
.architecture-app{margin-top:0;max-height:0;opacity:0;overflow:hidden;transform:translateY(-15px);transition:opacity .6s,max-height .75s,margin-top .75s,transform .75s}
.architecture-app>span{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:color-mix(in srgb,var(--cloud-color),transparent 88%);color:var(--cloud-color);margin:0 auto 11px;border:1px solid color-mix(in srgb,var(--cloud-color),transparent 70%)}.architecture-app svg{width:24px;height:24px}.architecture-app strong{display:block;font-size:13px;font-weight:500;color:#dddde6}.architecture-app p{font-size:12px;color:#848491;line-height:1.5;max-width:125px;margin:8px auto 0}
.architecture-agent{position:absolute;left:-7px;right:-7px;bottom:-45px;min-height:59px;display:flex;align-items:center;justify-content:center;gap:9px;padding:12px 10px;border-radius:15px;background:#22221c;box-shadow:0 12px 26px #0008;border:1px solid #ffdf005a;opacity:0;transform:translateY(24px) scale(.9);transition:opacity .6s,transform .7s;transition-delay:calc(var(--cloud-order)*50ms)}.architecture-agent img{width:12px;height:22px;object-fit:contain;flex-shrink:0}.architecture-agent span{font-size:13px;line-height:1.35;color:#f6efc6;max-width:115px;text-align:left}
.connection-trail{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:28px;opacity:0;transition:opacity .5s}.connection-trail>span{font-size:12px;letter-spacing:.2px;color:#62626f;display:flex;align-items:center;gap:8px;transition:color .5s}.connection-trail b{font-size:10px;font-weight:400}.connection-trail .is-active{color:#f0f0f5}.connection-story:not([data-connection-step="0"]) .connection-trail{opacity:1}
.connection-story:is([data-connection-step="2"],[data-connection-step="3"],[data-connection-step="4"]) .architecture-source{top:15px}.connection-story:is([data-connection-step="2"],[data-connection-step="3"],[data-connection-step="4"]) .architecture-logo{width:58px;height:58px;border-radius:17px}.connection-story:is([data-connection-step="2"],[data-connection-step="3"],[data-connection-step="4"]) .architecture-logo img{height:35px}.connection-story:is([data-connection-step="2"],[data-connection-step="3"],[data-connection-step="4"]) .architecture-source>span{opacity:0;position:absolute;width:140px;left:50%;transform:translateX(-50%)}
.connection-story:is([data-connection-step="2"],[data-connection-step="3"],[data-connection-step="4"]) :is(.architecture-clouds,.architecture-branches){opacity:1;visibility:visible}.connection-story:is([data-connection-step="2"],[data-connection-step="3"],[data-connection-step="4"]) .architecture-cloud{transform:none}
.connection-story:is([data-connection-step="3"],[data-connection-step="4"]) .architecture-app{opacity:1;max-height:160px;margin-top:22px;transform:none}.connection-story[data-connection-step="4"] .architecture-agent{opacity:1;transform:none}.connection-story[data-connection-step="4"] .architecture-logo{box-shadow:0 0 50px -15px #ffdf0070;border-color:#ffdf0060}
.connection-linear{display:none;position:relative}.connection-linear article{min-height:100svh;padding:110px 7% 90px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.connection-linear h2{font-size:clamp(38px,6vw,75px);font-weight:750;line-height:1.05;letter-spacing:-.05em}.connection-linear em{color:#a0a0af}.connection-linear p{font-size:18px;max-width:620px;color:#a0a0af;margin-top:24px}.linear-brand{height:130px;width:auto;margin-top:40px}.linear-clouds{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:850px;margin-top:40px;font-size:18px}
@media(max-width:1100px){.architecture-clouds{gap:12px}.architecture-cloud h3{font-size:17px}.architecture-agent{left:-3px;right:-3px;padding:10px 8px}.architecture-agent span{font-size:12px}.connection-title p{font-size:17px}}
@media(max-width:760px){.connection-canvas{width:90%;height:calc(100svh - 145px);max-height:710px;margin-top:0}.connection-titles{height:170px}.connection-title h2{font-size:clamp(31px,7.6vw,48px)}.connection-title p{font-size:15px;line-height:1.5;margin-top:16px;max-width:440px}.connection-title[data-connection-title="0"]{top:calc((100svh - 145px)/2 - 100px)}.connection-title[data-connection-title="0"] h2{font-size:clamp(43px,9.6vw,68px)}.connection-architecture{height:385px;margin-top:20px}.architecture-source{top:120px}.architecture-logo{width:95px;height:95px;border-radius:25px}.architecture-logo img{height:57px}.architecture-source>span{font-size:17px}.architecture-clouds{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 12px;top:69px}.architecture-cloud{padding:13px 5px 13px;border-radius:12px}.architecture-cloud h3{font-size:15px;letter-spacing:-.5px}.architecture-cloud h3 small{font-size:11px;margin-top:3px}.architecture-cloud:before{height:16px;top:-17px}.architecture-cloud:nth-child(n+4):before{height:39px;top:-40px}.architecture-branches{top:52px;left:16.66%;right:16.66%}.architecture-branches:before{height:26px}.connection-story:is([data-connection-step="2"],[data-connection-step="3"],[data-connection-step="4"]) .architecture-source{top:13px}.connection-story:is([data-connection-step="2"],[data-connection-step="3"],[data-connection-step="4"]) .architecture-logo{width:42px;height:42px;border-radius:12px}.connection-story:is([data-connection-step="2"],[data-connection-step="3"],[data-connection-step="4"]) .architecture-logo img{height:26px}.architecture-app>span{width:31px;height:31px;border-radius:9px;margin-bottom:7px}.architecture-app svg{width:18px;height:18px}.architecture-app strong{font-size:11px}.architecture-app p{display:none}.connection-story:is([data-connection-step="3"],[data-connection-step="4"]) .architecture-app{margin-top:14px;max-height:65px}.architecture-agent{gap:5px;min-height:45px;bottom:-30px;padding:7px 5px;border-radius:10px}.architecture-agent img{width:9px;height:17px}.architecture-agent span{font-size:10px;line-height:1.3}.connection-trail{gap:12px;bottom:0}.connection-trail span{font-size:10px;gap:4px}.connection-trail b{display:none}.linear-clouds{grid-template-columns:repeat(2,1fr);font-size:15px;gap:18px}}
@media(max-width:760px) and (max-height:730px){.connection-titles{height:140px}.connection-title h2{font-size:30px}.connection-title p{font-size:14px;margin-top:12px}.connection-architecture{margin-top:12px}.architecture-clouds{top:50px;gap:33px 10px}.architecture-branches{top:34px}.connection-story:is([data-connection-step="2"],[data-connection-step="3"],[data-connection-step="4"]) .architecture-source{top:0}.architecture-cloud{padding-block:10px}.architecture-cloud h3{font-size:13px}.architecture-app>span{width:25px;height:25px;margin-bottom:5px}.connection-story:is([data-connection-step="3"],[data-connection-step="4"]) .architecture-app{margin-top:9px}.connection-trail{bottom:-5px}}
@media(prefers-reduced-motion:reduce),(max-height:560px){.connection-story{height:auto}.connection-sticky{display:none}.connection-linear{display:block}}
/* Each cloud contains an overlapping deck of apps and one working agent. */
.app-deck{position:relative;width:112px;height:66px;margin:2px auto 12px;isolation:isolate}
.deck-icon{position:absolute;top:8px;left:30px;width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:color-mix(in srgb,var(--cloud-color) 24%,#18181e);border:1px solid color-mix(in srgb,var(--cloud-color) 50%,#35353c);color:var(--cloud-color);box-shadow:0 8px 16px #0005;transition:transform .7s}
.deck-icon:nth-child(1){transform:translateX(-23px) rotate(-17deg);z-index:1}.deck-icon:nth-child(2){transform:translateY(-6px);z-index:3;background:color-mix(in srgb,var(--cloud-color) 17%,#1d1d24)}.deck-icon:nth-child(3){transform:translateX(23px) rotate(17deg);z-index:2}.deck-icon svg{width:26px;height:26px}
.architecture-app strong,.linear-deck>strong{font-size:16px;font-weight:550;color:#eeeef4;display:block}.architecture-app{overflow:visible}.connection-story:is([data-connection-step="3"],[data-connection-step="4"]) .architecture-app{max-height:120px;margin-top:22px}
.architecture-agent{left:0;right:0;bottom:-94px;min-height:0;padding:0;display:flex;flex-direction:column;gap:9px;background:none;border:0;border-radius:0;box-shadow:none;transform:translateY(24px) scale(.9)}
.agent-app-icon{display:grid!important;place-items:center;width:56px;height:56px;border-radius:17px;background:#19191c;border:1px solid #ffdf0060;box-shadow:0 8px 22px #0005,0 0 22px -15px #ffdf0060;max-width:none!important}
.architecture-agent .agent-app-icon img,.linear-agent .agent-app-icon img{width:auto;height:33px}.architecture-agent .agent-app-verb,.agent-app-verb{font-size:14px;line-height:1.3;text-align:center;color:#e9e4c3;max-width:none;display:block}.linear-feature{display:flex;flex-direction:column;align-items:center;gap:9px}.linear-deck{gap:0}.linear-deck .app-deck{flex-shrink:0}
@media(max-width:1100px) and (min-width:761px){.app-deck{transform:scale(.9);margin-bottom:6px}.architecture-app strong{font-size:14px}.architecture-agent .agent-app-verb{font-size:12px}}
@media(max-width:760px){.architecture-clouds{row-gap:68px}.app-deck{width:78px;height:43px;margin:2px auto 7px}.deck-icon{width:34px;height:34px;border-radius:10px;left:22px;top:6px}.deck-icon:nth-child(1){transform:translateX(-16px) rotate(-17deg)}.deck-icon:nth-child(2){transform:translateY(-4px)}.deck-icon:nth-child(3){transform:translateX(16px) rotate(17deg)}.deck-icon svg{width:18px;height:18px}.architecture-app strong{font-size:12px}.connection-story:is([data-connection-step="3"],[data-connection-step="4"]) .architecture-app{max-height:80px;margin-top:11px}.architecture-agent{bottom:-58px;gap:5px}.agent-app-icon{width:35px;height:35px;border-radius:10px}.architecture-agent .agent-app-icon img{height:22px}.architecture-agent .agent-app-verb{font-size:10px}.architecture-cloud:nth-child(n+4):before{height:67px;top:-68px}.linear-agent .agent-app-icon{width:52px;height:52px;border-radius:15px}.linear-deck>strong{font-size:15px}}
@media(max-width:760px) and (max-height:730px){.architecture-clouds{row-gap:60px}.app-deck{height:36px;margin-bottom:5px;transform:scale(.9);transform-origin:center}.architecture-agent{bottom:-52px}.agent-app-icon{width:30px;height:30px;border-radius:9px}.architecture-agent .agent-app-icon img{height:19px}.architecture-app strong{font-size:11px}.architecture-cloud:nth-child(n+4):before{height:59px;top:-60px}}