/* Approved connection layout. The existing scroll choreography remains in charge. */
@media(min-width:701px){
  html:not(.static-home) .unified-scroll.depth-scene:not(.is-static) .unified-network .business-canvas{height:100%;display:flex;flex-direction:column}
  html:not(.static-home) .unified-scroll.depth-scene:not(.is-static) .unified-network .canvas-toolbar{flex:none;min-height:28px}
  html:not(.static-home) .unified-scroll.depth-scene:not(.is-static) .unified-network .has-logo-hub .canvas-stage{flex:1;height:auto;min-height:0;margin:8px 0 28px}
  html:not(.static-home) .unified-scroll.depth-scene:not(.is-static) .unified-network .business-canvas>figcaption{position:absolute;bottom:0;width:100%;height:0;padding:0}
  .depth-scene .unified-network .has-logo-hub #canvas-tool-note:not(:empty){position:absolute;bottom:0;margin:0;width:100%;font-size:10px;line-height:1.4}
  .depth-scene .unified-network .canvas-stage{transform:translate3d(var(--depth-plane-x,0),var(--depth-plane-y,0),0)}
  .depth-scene .unified-network .canvas-tool{width:70px;height:52px;gap:0}
  .depth-scene .unified-network .has-logo-hub .canvas-tool>span{width:52px;height:52px;border-radius:14px;background:linear-gradient(150deg,#fff,#fafcff);border:1px solid #d5e1f2;box-shadow:0 3px 5px #243d5f05,inset 0 -2px 0 #dfe8f333}
  .depth-scene .unified-network .has-logo-hub .canvas-tool img{width:29px;height:29px}
  .depth-scene .unified-network .canvas-tool small{position:absolute;top:calc(100% + 6px);font-size:9px;line-height:1.2;white-space:nowrap}
  .unified-scroll.depth-scene .unified-network .canvas-core.logo-hub{--partner-gap:22px;top:50%;width:304px;height:114px}
  .depth-scene .partnership-sas{width:92px;height:92px;border-radius:15px;background:linear-gradient(145deg,#0d213c,#07182e);border:1px solid #3b5d8a;box-shadow:0 8px 16px -10px #12305975,inset 0 1px 0 #ffffff18}
  .depth-scene .canvas-core.logo-hub .core-connected .partnership-business{width:190px;height:114px;border-radius:17px;font-size:26px;gap:11px;letter-spacing:-.045em;background:linear-gradient(130deg,#2469cd,#1a55ad);border-color:#5384d1;box-shadow:0 10px 20px -13px #1437667a,inset 0 1px 0 #ffffff26}
  .depth-scene .canvas-core.logo-hub .core-connected .partnership-detail{font-size:10px;letter-spacing:0;max-width:none;white-space:nowrap}
  .depth-scene .partnership-caption{top:calc(100% + 14px);width:340px;font-size:12px;white-space:nowrap}
  .depth-scene .partnership-link{height:1px;background:#749acb}
  .depth-scene .partnership-link::after{width:4px;height:4px;top:-1.5px;background:#9fb9dd;box-shadow:none;animation:none}
}
.depth-scene .canvas-routes .canvas-route-base{stroke:#a9bfdc;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.depth-scene .canvas-routes .canvas-data-packet{stroke:#2468d0;stroke-width:2.8;stroke-dasharray:.1 .9;stroke-linecap:round;opacity:0;transition:none}
@media(prefers-reduced-motion:no-preference){
  .depth-scene .canvas-data-packet{animation:connection-transfer 12s linear var(--stream-delay,0s) infinite both paused}
  .depth-scene .canvas-data-route.is-out .canvas-data-packet{animation-name:connection-transfer-back}
  .depth-scene .business-canvas[data-motion="playing"] .canvas-data-packet{animation-play-state:running}
  .depth-scene[data-disconnecting="true"] .business-canvas .canvas-data-packet{animation-play-state:paused}
  @keyframes connection-transfer{0%{stroke-dashoffset:1px;opacity:0}2%{opacity:.95}30%{stroke-dashoffset:0px;opacity:.95}33.333%,100%{stroke-dashoffset:0px;opacity:0}}
  @keyframes connection-transfer-back{0%{stroke-dashoffset:0px;opacity:0}2%{opacity:.95}30%{stroke-dashoffset:1px;opacity:.95}33.333%,100%{stroke-dashoffset:1px;opacity:0}}
}
@media(min-width:701px) and (max-width:1200px){
  .depth-scene .unified-network .canvas-tool{width:60px;height:44px}
  .depth-scene .unified-network .has-logo-hub .canvas-tool>span{width:44px;height:44px;border-radius:12px}
  .depth-scene .unified-network .has-logo-hub .canvas-tool img{width:26px;height:26px}
  .depth-scene .unified-network .canvas-tool small{font-size:8px}
  .unified-scroll.depth-scene .unified-network .canvas-core.logo-hub{--partner-gap:17px;width:244px;height:94px}
  .depth-scene .partnership-sas{width:76px;height:76px;border-radius:13px}
  .depth-scene .canvas-core.logo-hub .core-connected .partnership-business{width:151px;height:94px;font-size:22px;border-radius:14px;gap:9px}
  .depth-scene .canvas-core.logo-hub .core-connected .partnership-detail{font-size:8px}
  .depth-scene .partnership-caption{width:290px;font-size:10px}
}
@media(min-width:701px) and (max-width:900px){
  .depth-scene .unified-network .canvas-tool{width:52px;height:40px}
  .depth-scene .unified-network .has-logo-hub .canvas-tool>span{width:40px;height:40px;border-radius:11px}
  .depth-scene .unified-network .has-logo-hub .canvas-tool img{width:24px;height:24px}
  .unified-scroll.depth-scene .unified-network .canvas-core.logo-hub{--partner-gap:14px;width:205px;height:83px}
  .depth-scene .partnership-sas{width:65px;height:65px;border-radius:11px}
  .depth-scene .canvas-core.logo-hub .core-connected .partnership-business{width:126px;height:83px;font-size:18px;border-radius:13px;gap:8px}
  .depth-scene .canvas-core.logo-hub .core-connected .partnership-detail{font-size:7px}
  .depth-scene .partnership-caption{width:250px;font-size:9px}
}
@media(min-width:701px) and (max-height:700px){
  .depth-scene .unified-network .canvas-tool{height:32px}
  .depth-scene .unified-network .has-logo-hub .canvas-tool>span{width:32px;height:32px;border-radius:9px}
  .depth-scene .unified-network .has-logo-hub .canvas-tool img{width:22px;height:22px}
  .depth-scene .unified-network .canvas-tool small{font-size:8px;top:calc(100% + 4px)}
}

/* Keep a complete diagram when motion or JavaScript is unavailable. */
@media(min-width:701px){
  .static-home .depth-scene .unified-network .has-logo-hub .canvas-stage,
  .depth-scene.is-static .unified-network .has-logo-hub .canvas-stage{height:280px;min-height:280px;flex:none;margin:8px 0 28px;transform:none!important}
}
.static-home .canvas-data-routes{display:none!important}

/* Separate tools becomes three unfinished work areas; connected keeps the network. */
.manual-work{display:none}
.depth-scene .manual-work{display:block;position:absolute;inset:0;pointer-events:none}
.depth-scene .manual-workspace{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr) auto;gap:12px clamp(22px,4vw,58px);padding:0 6px;opacity:0;visibility:hidden;transform:translateY(8px)}
.depth-scene .manual-card{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:7px;align-self:center;width:100%;height:100%;max-height:170px;min-width:0;padding:clamp(10px,1.4vw,18px);border:1px solid #cfd6df;border-radius:12px;background:linear-gradient(145deg,#fff,#fbfaf7);box-shadow:0 12px 24px -18px #22344c66;isolation:isolate;color:#23354b}
.depth-scene .manual-card::before{content:"";position:absolute;inset:3px -3px -4px 3px;z-index:-1;border:1px solid #dce0e5;border-radius:inherit;background:#f7f6f2;transform:rotate(1deg)}
.depth-scene .manual-card-mail{transform:rotate(-1.6deg)}
.depth-scene .manual-card-calendar{transform:rotate(1deg)}
.depth-scene .manual-card-sheet{transform:rotate(-1deg)}
.depth-scene .manual-card header{display:flex;align-items:center;gap:8px;font:600 12px/1.2 var(--font-body)}
.depth-scene .manual-card header img{width:20px;height:20px;object-fit:contain;flex:none}
.depth-scene .manual-card header i{margin-left:auto;color:#8793a2;font:400 9px/1 var(--mono);font-style:normal}
.depth-scene .manual-card-content{align-self:center;min-width:0}
.depth-scene .manual-email b{font:500 10px/1.3 var(--font-body);color:#7b8592}
.depth-scene .manual-email p{margin:4px 0 0;font:500 clamp(11px,1.05vw,15px)/1.35 var(--font-body);letter-spacing:-.02em}
.depth-scene .manual-week{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;text-align:center;font:500 9px/1.2 var(--font-body);color:#7b8592}
.depth-scene .manual-week span{display:grid;gap:5px}
.depth-scene .manual-week i{height:clamp(14px,2vw,25px);display:block;border-radius:4px;border:1px solid #e0e5ed;background:#f0f3f8}
.depth-scene .manual-week span:nth-child(2) i{border:1px dashed #b99b72;background:#fcf8f0}
.depth-scene .manual-week span:nth-child(3) i{background:#e1e9f5}
.depth-scene .manual-sheet{border:1px solid #e0e5eb;border-radius:5px;overflow:hidden;font:400 10px/1.2 var(--font-body)}
.depth-scene .manual-sheet>div{display:grid;grid-template-columns:1fr 1fr}
.depth-scene .manual-sheet>div:first-child{background:#eff3f5;border-bottom:1px solid #e0e5eb;color:#6e7c8b;font-size:8px}
.depth-scene .manual-sheet b,.depth-scene .manual-sheet span,.depth-scene .manual-sheet em{padding:5px 6px;font-weight:400;white-space:nowrap}
.depth-scene .manual-sheet>* >:last-child{border-left:1px solid #e0e5eb}
.depth-scene .manual-sheet em{font-style:normal;color:#9b8a71;background:#fcf9f3}
.depth-scene .manual-card-status{display:flex;align-items:center;gap:6px;margin:0;color:#8a6741;font:500 10px/1.2 var(--font-body)}
.depth-scene .manual-card-status>span{width:5px;height:5px;border-radius:50%;background:#b28c5b;flex:none}
.depth-scene .manual-workspace-note{grid-column:1/-1;margin:0;text-align:center;color:#40536b;font:500 11px/1.3 var(--font-body)}
.depth-scene .manual-workspace-note>span{margin-right:8px;color:#85909e;font:400 8px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.05em}
.depth-scene .business-canvas .canvas-core.logo-hub .core-connected{display:flex}
.unified-scroll.depth-scene .unified-network .business-canvas[data-state="separate"] .canvas-core.logo-hub{background:transparent;border:0;box-shadow:none}
.depth-scene .business-canvas[data-state="separate"] .canvas-tools,
.depth-scene .business-canvas[data-state="separate"] .core-connected{opacity:0;visibility:hidden;pointer-events:none}
.depth-scene .business-canvas[data-state="separate"] .manual-workspace{opacity:1;visibility:visible;transform:translateY(0)}
.depth-scene .business-canvas[data-state="separate"] .canvas-routes .canvas-route-base{stroke-dashoffset:1!important;opacity:0!important}
.depth-scene .business-canvas[data-state="separate"] .canvas-data-routes{opacity:0!important}
@media(min-width:701px) and (max-height:700px){
  .depth-scene .manual-workspace{gap:9px 30px}
  .depth-scene .manual-card{padding:9px 12px;gap:5px}
  .depth-scene .manual-card header{font-size:11px}
  .depth-scene .manual-card header img{width:17px;height:17px}
  .depth-scene .manual-email b{font-size:9px}
  .depth-scene .manual-email p{margin-top:2px;font-size:11px}
  .depth-scene .manual-week{font-size:8px}
  .depth-scene .manual-week span{gap:3px}
  .depth-scene .manual-week i{height:14px}
  .depth-scene .manual-sheet b,.depth-scene .manual-sheet span,.depth-scene .manual-sheet em{padding:3px 5px}
  .depth-scene .manual-card-status{font-size:9px}
  .depth-scene .manual-workspace-note{font-size:10px}
}
@media(max-width:700px){
  .depth-scene .manual-workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(3,minmax(0,1fr)) auto;gap:10px;padding:0 4px}
  .depth-scene .manual-card{grid-template-columns:92px minmax(0,1fr);grid-template-rows:1fr auto;gap:4px 12px;padding:10px 12px;max-height:none;transform:none}
  .depth-scene .manual-card::before{inset:2px -2px -3px 2px;transform:rotate(.5deg)}
  .depth-scene .manual-card header{grid-row:1/-1;font-size:10px;gap:7px}
  .depth-scene .manual-card header img{width:20px;height:20px}
  .depth-scene .manual-card header i{display:none}
  .depth-scene .manual-email b{font-size:8px}
  .depth-scene .manual-email p{margin-top:1px;font-size:11px}
  .depth-scene .manual-week{gap:5px;font-size:8px}
  .depth-scene .manual-week span{gap:3px}
  .depth-scene .manual-week i{height:12px}
  .depth-scene .manual-sheet{font-size:8px}
  .depth-scene .manual-sheet>div:first-child{font-size:7px}
  .depth-scene .manual-sheet b,.depth-scene .manual-sheet span,.depth-scene .manual-sheet em{padding:3px}
  .depth-scene .manual-card-status{grid-column:2;font-size:8px}
  .depth-scene .manual-workspace-note{font-size:10px;line-height:1.25}
  .depth-scene .manual-workspace-note>span{display:block;margin:0 0 2px;font-size:7px}
}
@media(max-width:360px){
  .depth-scene .manual-card{grid-template-columns:72px minmax(0,1fr);padding-inline:9px;gap:3px 8px}
  .depth-scene .manual-card header{font-size:9px;gap:5px}
}
@media(prefers-reduced-motion:no-preference){
  html:not(.static-home) .depth-scene .business-canvas .canvas-tools,
  html:not(.static-home) .depth-scene .business-canvas .core-connected,
  html:not(.static-home) .depth-scene .manual-workspace{transition:opacity .35s ease,transform .45s cubic-bezier(.22,1,.36,1),visibility 0s linear}
  html:not(.static-home) .depth-scene .business-canvas[data-state="separate"] .canvas-tools,
  html:not(.static-home) .depth-scene .business-canvas[data-state="separate"] .core-connected,
  html:not(.static-home) .depth-scene .business-canvas[data-state="connected"] .manual-workspace{transition:opacity .3s ease,transform .4s ease,visibility 0s linear .3s}
  html:not(.static-home) .depth-scene[data-disconnecting="false"] .canvas-routes .canvas-route-base{transition:stroke-dashoffset .5s cubic-bezier(.22,1,.36,1),opacity .4s ease}
  .depth-scene[data-disconnecting="true"] .canvas-routes .canvas-route-base{transition:none}
}
.static-home .manual-work{display:none}

/* Reserve a clear gap between the mobile captions and story navigation. */
@media(max-width:700px){
  .depth-scene .unified-progress{flex-wrap:nowrap;column-gap:12px}
  .depth-scene .unified-progress>div{width:auto}
  .depth-scene .unified-progress>div:first-child{flex:1;min-width:0;gap:8px}
  .depth-scene .unified-progress .unified-utility{flex:none}
  .unified-scroll.depth-scene .unified-network .canvas-core.logo-hub{margin-top:12px}
  .unified-scroll.depth-scene .unified-network .logo-hub::before{height:12px}
  .depth-scene .has-logo-hub .canvas-stage{padding-bottom:20px}
  .depth-scene .manual-card{padding-block:8px}
  .depth-scene .manual-email{font-size:8px;line-height:1.3}
}

/* Short phones need less vertical spacing above the same diagram. */
@media(max-width:360px) and (max-height:650px){
  .unified-scroll.depth-scene:not(.is-static) .canvas-copy .location{display:none}
  .unified-scroll.depth-scene:not(.is-static) .unified-headline{--depth-text-size:18px}
  .unified-scroll.depth-scene:not(.is-static) .depth-word-window{padding-block:0;margin-top:0}
  .unified-scroll.depth-scene:not(.is-static) .depth-suffix{margin-top:0}
  .unified-scroll.depth-scene:not(.is-static) .canvas-body{margin-top:4px}
  .unified-scroll.depth-scene:not(.is-static) .canvas-actions{margin-top:5px}
  .unified-scroll.depth-scene:not(.is-static) .unified-network .canvas-core.logo-hub{height:68px;margin-top:8px}
  .unified-scroll.depth-scene:not(.is-static) .unified-network .logo-hub::before{height:8px}
  .unified-scroll.depth-scene:not(.is-static) .partnership-sas{width:60px;height:60px}
  .unified-scroll.depth-scene:not(.is-static) .logo-hub-symbol{width:36px;height:30px}
  .unified-scroll.depth-scene:not(.is-static) .logo-hub-name{width:48px;height:10px}
  .unified-scroll.depth-scene:not(.is-static) .canvas-core.logo-hub .partnership-business{height:68px;font-size:19px;gap:5px}
  .unified-scroll.depth-scene:not(.is-static) .manual-card{padding-block:6px}
  .unified-scroll.depth-scene:not(.is-static) .manual-email p{font-size:10px}
}