/* Supporting context only: the real demo keeps its original grid and hit targets. */
.connected-stage{padding-top:132px;padding-bottom:187px;isolation:isolate}
.connected-stage .demo-experience{position:relative;z-index:2}
.connected-network{position:absolute;inset:0 44px 55px;pointer-events:none;z-index:0;color:#639df2}
.network-depth{position:absolute;inset:0}
.network-lines{position:absolute;width:100%;height:100%;overflow:visible;opacity:.38}
.context-card{position:absolute;width:202px;padding:14px 16px;border:1px solid #278aff66;border-radius:10px;background:linear-gradient(125deg,#132d48ee,#0c1e34ed);box-shadow:0 8px 30px #0002,inset 0 0 22px #1673db12;color:#bacce2;font-size:11px;line-height:1.6}
.context-card strong{display:block;color:#e5efff;font-size:12px;font-weight:600;margin-top:5px}
.context-card small{color:#87b6f8;font-size:10px;margin-top:4px}
.context-label{display:flex;align-items:center;gap:8px;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:#93acd0}
.context-icon{font-size:15px;line-height:1;letter-spacing:0;color:#7aafff}
.context-jobs{left:0;top:0}.context-calendar{left:45%;top:0}.context-stock{right:0;top:0}
.context-customers{left:0;bottom:0}.context-invoices{left:45%;bottom:0}.context-notes{right:0;bottom:0}
.network-message{position:absolute;bottom:48px;left:25%;font-size:10px;letter-spacing:1px;color:#91b6e7;opacity:0}
@media(max-width:1050px){.context-card{width:185px;padding:12px}.context-calendar,.context-invoices{left:calc(50% - 92px)}.network-message{display:none}}
@media(max-width:700px){.connected-stage{padding-top:116px;padding-bottom:0}.connected-network{inset:0 22px}.context-card{width:calc(50% - 7px);padding:11px 10px;font-size:9px}.context-card strong{font-size:10px}.context-card small{font-size:9px}.context-label{font-size:8px}.context-calendar,.context-stock,.context-customers,.context-notes{display:none}.context-invoices{top:0;bottom:auto;right:0;left:auto}.network-lines{height:220px;opacity:.22}.network-lines [data-path]:not([data-path="Jobs"]):not([data-path="Invoices"]){display:none}}

/* Motion is gated by viewport, page visibility, preference and the visitor's pause button. */
.network-depth{transition:transform .5s ease-out}
.context-card{transition:border-color .6s,box-shadow .6s;animation:context-drift 9s ease-in-out infinite alternate;animation-play-state:paused}
.context-card:nth-of-type(2n){animation-delay:-3s;animation-duration:11s}
.context-card:nth-of-type(3n){animation-delay:-6s}
.context-card.is-active{border-color:#669ff6a6;box-shadow:0 0 28px #338cff20,inset 0 0 20px #2c7df90a}
.network-lines{opacity:.55}.network-lines path{stroke:#2994ff;stroke-width:1.6;filter:drop-shadow(0 0 3px #1688ed66);stroke-opacity:.7}
.network-lines .network-pulse,.network-mobile-lines .network-pulse{stroke:#89c9ff;stroke-width:2.5;stroke-linecap:round;stroke-opacity:0;stroke-dasharray:2 98;stroke-dashoffset:100;filter:drop-shadow(0 0 4px #429dff)}
.network-moving[data-network-tour="running"] .network-pulse.is-active{animation:network-travel 2.4s ease-in-out infinite}
.network-stars{position:absolute;inset:-25px;overflow:hidden;opacity:.6}
.network-stars i{position:absolute;width:var(--size);height:var(--size);border-radius:50%;background:#6cafff;box-shadow:0 0 8px #5a9fff;animation:star-drift 12s ease-in-out var(--delay) infinite alternate;animation-play-state:paused}
.network-moving .context-card,.network-moving .network-stars i{animation-play-state:running}
.network-message{transition:opacity .8s}.network-settled .network-message{opacity:1}
.network-motion{display:block;position:absolute;right:44px;bottom:0;z-index:3;margin:0;background:transparent;border:1px solid #4d6d96;border-radius:5px;padding:7px 10px;font-size:10px;color:#b9cee8;cursor:pointer}
.network-motion:focus-visible{outline:3px solid #f0b44b;outline-offset:4px}.network-motion[hidden]{display:none}
.hero-top h1{animation:hero-arrive .75s ease-out both}
.network-entered .demo-device{animation:demo-arrive 1s ease-out both}
.network-entered .network-lines{animation:lines-arrive 1.4s ease-out both}
@keyframes context-drift{from{translate:0 0}to{translate:0 -5px}}
@keyframes star-drift{from{transform:translate3d(0,0,0);opacity:.25}to{transform:translate3d(4px,-8px,0);opacity:.7}}
@keyframes network-travel{0%{stroke-dashoffset:100;stroke-opacity:0}15%,75%{stroke-opacity:1}100%{stroke-dashoffset:0;stroke-opacity:0}}
@keyframes hero-arrive{from{opacity:.5;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes demo-arrive{from{transform:translateY(16px)}to{transform:none}}
@keyframes lines-arrive{from{opacity:0;stroke-dasharray:100;stroke-dashoffset:100}to{opacity:.55;stroke-dashoffset:0}}
@media(max-width:700px){.network-motion{position:relative;right:auto;bottom:auto;margin:18px 0 0 auto}.network-stars{inset:0}.network-lines [data-pulse]:not([data-pulse="Jobs"]):not([data-pulse="Invoices"]){display:none}}
@media(prefers-reduced-motion:reduce){.network-depth{transform:none!important}.connected-stage *,.hero-top h1{animation:none!important;transition:none!important}.network-pulse{display:none}.network-message{display:none}}

.context-icon{width:21px;height:21px;flex:none;color:#239bff}.context-label{font-size:10px;letter-spacing:.8px;color:#d6e6ff}.context-card small{display:block}.network-mobile-lines{display:none}
@media(max-width:700px){.network-lines{display:none}.network-mobile-lines{display:block;position:absolute;width:100%;height:220px;stroke:#2994ff;stroke-width:1.2;opacity:.35}.context-icon{width:17px;height:17px}}

/* Real buttons, with a full-card hit area and no interception of page scrolling. */
.context-card{appearance:none;font-family:inherit;text-align:left;pointer-events:auto;cursor:pointer;min-height:44px;touch-action:pan-y}
.context-card::after{content:'↗';position:absolute;right:12px;top:12px;color:#81baff;font-size:12px}
.context-card:focus-visible{outline:3px solid #f0b44b;outline-offset:5px;animation-play-state:paused!important}
@media(hover:hover) and (pointer:fine){.context-card:hover{border-color:#67b7ff;box-shadow:0 0 24px #238aff33;animation-play-state:paused}}
/* Keep the headline and calls to action grouped on wide screens. */
@media(min-width:1051px){
 .hero{padding-top:36px}
 .hero-top{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);column-gap:40px;align-items:center}
 .hero-top>.eyebrow{grid-column:1/-1}
 .hero-top h1{grid-column:1;grid-row:2;font-size:clamp(58px,4.3vw,72px);margin:22px 0}
 .hero-top .hero-bottom{display:contents}
 .hero-top .hero-bottom>p{grid-column:1;grid-row:3;font-size:16px}
 .hero-top .hero-actions{grid-column:2;grid-row:2;justify-self:end;align-items:flex-start;flex-direction:column;gap:20px}
 .connected-stage{margin-top:32px}
}