/* A request is traced through its dependencies while the graph stays in view. */
.bp-page.cx-page{overflow:clip}
.cx-scroll-story{position:relative}
.cx-scroll-story.is-pinned>.cx-stage{position:sticky;top:96px}
.cx-stage{--cx-scroll:0}
.cx-stage .cx-map-depth{transform:none;will-change:auto}
.cx-stage .cx-node{transform:translate(calc(-50% + var(--cx-node-x,0px)),calc(-50% + var(--cx-node-y,0px)))}
.cx-stage .cx-project{transform:translate(-50%,calc(-50% + var(--cx-core-y,0px)))}
.cx-stage .cx-wire{stroke-dasharray:100;stroke-dashoffset:var(--cx-wire-offset,0);transition:opacity .45s}
.cx-stage .cx-scroll-backbone{fill:none;stroke:#dedede;stroke-width:.8;opacity:.11}
.cx-stage .cx-packet{stroke-dasharray:3 97;animation-duration:3.8s;stroke-width:2;opacity:.48}
.cx-stage .cx-packet.is-selected,.cx-stage .cx-packet.cx-scroll-route-active{opacity:1;filter:drop-shadow(0 0 3px #ffffff65)}
.cx-stage .cx-wire.cx-scroll-route-active{opacity:.5}
.cx-stage .cx-node-point{transition:background .4s,box-shadow .4s,transform .4s}
.cx-stage .cx-node.cx-scroll-node-active .cx-node-point{background:#fff;box-shadow:0 0 18px #ffffff8c;transform:scale(1.35)}
.cx-stage .cx-node.cx-scroll-node-active>span{color:#b4b4b4}
.cx-stage .cx-node.cx-scroll-node-active>strong{color:#fff}
.cx-stage[data-cx-scroll-manual=true] .cx-wire{stroke-dashoffset:0}
@media(min-width:1100px) and (min-height:760px){
 .cx-stage.cx-scroll-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(235px,.36fr);gap:18px 30px;padding:28px 36px 24px}
 .cx-scroll-layout .cx-stage-head{grid-column:1/-1;align-items:center}
 .cx-scroll-layout .cx-stage-head h2{font-size:clamp(28px,2.7vw,38px);margin-top:10px}
 .cx-scroll-layout .cx-map{grid-column:1;grid-row:2/4;height:clamp(380px,46vh,510px);margin:16px 0 8px}
 .cx-scroll-layout .cx-update{grid-column:2;grid-row:2;align-self:center;flex-direction:column;align-items:flex-start;gap:20px;padding:24px}
 .cx-scroll-layout .cx-update p{font-size:22px;line-height:1.35}
 .cx-scroll-layout .cx-update button{font-size:11px;padding:13px 17px;gap:16px;white-space:normal;text-align:left}
 .cx-scroll-layout .cx-insight{grid-column:2;grid-row:3;display:block;margin:0;padding:0 7px;min-height:180px;align-self:start}
 .cx-scroll-layout .cx-insight>span{display:block;margin-bottom:13px}
 .cx-scroll-layout .cx-insight h3{font-size:21px;line-height:1.25}
 .cx-scroll-layout .cx-insight p{font-size:12px;line-height:1.7;margin-top:13px}
 .cx-scroll-layout .cx-note{grid-column:1/-1;margin-top:0!important}
 .cx-scroll-layout .cx-project{padding-inline:12px}
 .cx-scroll-layout .cx-project>strong{font-size:clamp(31px,2.8vw,42px)}
 .cx-scroll-layout .cx-project>span{font-size:9px}
 .cx-scroll-layout .cx-node{min-width:135px;max-width:170px;padding:14px 9px}
 .cx-scroll-layout .cx-node>strong{font-size:15px}
 .cx-scroll-layout .cx-node>small{font-size:10px}
 .cx-scroll-layout .cx-customer{--cx-x:18%;--cx-y:24%}
 .cx-scroll-layout .cx-engineering{--cx-x:83%;--cx-y:29%}
 .cx-scroll-layout .cx-legal{--cx-x:83%;--cx-y:76%}
 .cx-scroll-layout .cx-product{--cx-x:18%;--cx-y:76%}
 .cx-scroll-layout .cx-owner{--cx-x:52%;--cx-y:7%}
 .cx-scroll-layout .cx-commitment{--cx-x:52%;--cx-y:89%}
}
@media(prefers-reduced-motion:reduce){
 .cx-stage .cx-node,.cx-stage .cx-project{--cx-node-x:0px!important;--cx-node-y:0px!important;--cx-core-y:0px!important}
 .cx-stage .cx-wire{stroke-dashoffset:0;transition:none}
 .cx-stage .cx-packet{animation:none;filter:none}
 .cx-stage .cx-node-point{transition:none}
}

/* On a reading layout the request precedes its map, then each existing
   consequence remains visible in causal order. No second diagram is needed. */
.cx-stage.cx-linear-layout{display:flex;flex-direction:column;gap:0}
.cx-linear-layout .cx-stage-head{order:0}
.cx-linear-layout .cx-update{order:1;margin:28px 0 12px;align-self:stretch}
.cx-linear-layout .cx-map{order:2;width:100%;flex:none}
.cx-linear-layout .cx-insight{order:3;display:block;min-height:0;margin-top:38px;padding:0}
.cx-linear-layout .cx-insight>span{display:none}
.cx-linear-layout .cx-insight>div{display:flex;flex-direction:column;gap:34px}
.cx-linear-layout .cx-insight article{scroll-margin-top:112px;animation:none!important;max-width:660px}
.cx-linear-layout .cx-note{order:4;margin-top:34px!important}
.cx-stage[data-cx-map-visible=false] .cx-packet{animation-play-state:paused!important}
@media(max-width:760px){
 .cx-linear-layout .cx-map{width:calc(100% + 24px);margin:26px -12px 0}
 .cx-linear-layout .cx-product{--cx-x:76%;--cx-y:34%}
 .cx-linear-layout .cx-engineering{--cx-x:24%;--cx-y:60%}
 .cx-linear-layout .cx-legal{--cx-x:76%;--cx-y:60%}
 .cx-linear-layout .cx-insight{margin-top:30px}
 .cx-linear-layout .cx-insight>div{gap:32px}
}