/* The connected workflow sits directly on the shared star field. */
.demo-page:has(.ai-network){justify-content:flex-start}
.ai-network{position:relative;isolation:isolate;margin-top:48px;padding:36px}
.ai-network-heading{text-align:center;margin-bottom:24px}
.ai-network-heading h2{font-size:clamp(24px,2.3vw,34px);line-height:1.2;margin:0 0 10px;font-weight:500;letter-spacing:-.035em;color:#eef5fa}
.ai-network-heading h2 span{background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.ai-network-heading p{font-size:14px;line-height:1.5;color:#a6b2bd;margin:0}
.ai-network-stage{position:relative;display:grid;grid-template-columns:186px 1fr 180px;align-items:center;max-width:1050px;height:320px;margin:0 auto}
.ai-network-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.network-sources,.network-destinations{position:relative;display:grid;z-index:1}
.network-sources{gap:14px}
.network-destinations{gap:22px}
.network-node{position:relative;min-width:0;border:1px solid #ffffff24;border-radius:16px;color:#d6dee5;background:linear-gradient(125deg,#171d23f5,#080c10f5);box-shadow:inset 0 1px 0 #ffffff0d;transition:border-color .4s,background-color .4s,box-shadow .4s}
button.network-node{width:100%;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.network-source{display:flex;align-items:center;gap:11px;min-height:54px;padding:10px 14px}
.network-source .product-icon{flex-basis:19px;width:19px;height:19px;opacity:.8}
.network-source strong{display:block;font-size:13px;line-height:1.25;font-weight:500}
.network-source small{display:block;margin-top:4px;font-size:10px;line-height:1.2;color:#a2aeb9}
.network-source[aria-pressed=true]{border-color:#badbed75;box-shadow:inset 0 1px 0 #e7f4ff1c,0 0 18px #b4dcff09}
.network-source[data-state=active]{background:linear-gradient(125deg,#26353ff5,#111a21f5)}
.network-source:focus-visible{outline:2px solid #d4eafa;outline-offset:4px}
.network-hub{grid-column:2;grid-row:1;justify-self:center;display:grid;place-items:center;width:112px;height:112px;border-radius:32px;background:#05090de6;z-index:1;box-shadow:inset 0 1px 1px #ffffff36,inset 0 0 22px #c1e4ff0b,0 0 40px #a8d7f709}
.network-hub::before{content:'';position:absolute;inset:8px;border:1px solid #ffffff0c;border-radius:24px;pointer-events:none}
.network-hub span{font-size:38px;font-weight:500;letter-spacing:-.05em;line-height:1;background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.network-hub[data-state=active]{border-color:#d6eeff9c;box-shadow:inset 0 1px 1px #ffffff50,inset 0 0 26px #a8d7f71c,0 0 44px #a8d7f713}
.network-hub[data-state=complete]{border-color:#d4c3a85c}
.network-destinations{grid-column:3;grid-row:1}
.network-destination{display:flex;align-items:center;gap:12px;padding:14px 16px;min-height:64px}
.network-destination svg{width:21px;height:21px;flex-shrink:0;color:#c4ccd3;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.network-destination span{font-size:13px;line-height:1.4}
.network-destination small{display:block;color:#a2aeb9;font-size:10px}
.network-destination[data-state=active],.network-destination[data-state=complete]{border-color:#efcea071;box-shadow:inset 0 1px 0 #ffdda817,0 0 18px #ffdda808}
.network-destination[data-state=complete] svg{color:#f1d8b2}
/* Replace the existing label in place; outcomes never resize the diagram. */
.network-destination-symbol{position:relative;display:block;width:21px;height:21px;flex:0 0 21px}
.network-destination-symbol svg{display:block}
.network-destination-copy{position:relative;display:block;min-width:0;flex:1}
.network-default{display:block;transition:opacity .24s ease}
.network-result{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(3px);transition:opacity .32s ease,transform .32s ease}
.network-destination[data-state=complete] .network-default{opacity:0}
.network-destination[data-state=complete] .network-result{opacity:1;transform:none}
.network-destination-icon{transition:opacity .24s ease}
.network-destination .network-result-check{position:absolute;inset:0;opacity:0;transition:opacity .24s ease}
.network-result-check circle{stroke-opacity:.4}
.network-result-check path{stroke-dasharray:1;stroke-dashoffset:1}
.network-destination[data-state=complete] .network-destination-icon{opacity:0}
.network-destination[data-state=complete] .network-result-check{opacity:1}
.network-destination[data-state=complete] .network-result-check path{stroke-dashoffset:0;animation:network-result-check .48s cubic-bezier(.16,1,.3,1) both}
[data-ai-network][data-animation-paused=true] .network-result-check path{animation-play-state:paused}
@keyframes network-result-check{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.ai-network-caption{display:flex;align-items:center;justify-content:center;gap:12px;min-height:42px;margin:18px 0 0;font-size:14px;line-height:1.5;text-align:center;color:#dce4ea}
[data-network-phase]{flex-shrink:0;color:#bac8d4;font-size:10px;text-transform:uppercase;letter-spacing:.09em}
[data-network-phase]::before{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;margin:0 7px 2px 0;background:#bedbea}
[data-network-caption]{max-width:650px}
@media(hover:hover) and (pointer:fine){.network-source:hover{border-color:#e5f1fc88;background:#24313ae8}}
@media(max-width:1080px){
  .ai-network{padding:28px;margin-top:32px}
  .ai-network-stage{grid-template-columns:166px 1fr 156px}
  .network-source{padding-inline:12px;gap:9px}
  .network-destination{padding-inline:12px;gap:9px}
  .network-hub{width:94px;height:94px}
}
@media(max-width:600px){
  .ai-network{padding:28px 16px 22px}
  .ai-network-heading{margin-bottom:26px}
  .ai-network-heading h2{max-width:290px;margin-inline:auto}
  .ai-network-heading p{max-width:250px;margin-inline:auto;font-size:13px}
  .ai-network-stage{display:flex;flex-direction:column;height:auto;gap:56px;align-items:stretch}
  .network-sources{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:calc(100% - 44px);align-self:center}
  .network-source{padding:10px 9px;gap:7px;min-height:54px;border-radius:13px}
  .network-source strong{font-size:12px}
  .network-source small{font-size:9px}
  .network-source .product-icon{width:16px;height:16px;flex-basis:16px}
  .network-hub{align-self:center;width:88px;height:88px;border-radius:28px}
  .network-hub::before{border-radius:20px}
  .network-hub span{font-size:32px}
  .network-destinations{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .network-destination{flex-direction:column;justify-content:center;text-align:center;gap:8px;min-height:78px;padding:11px 4px;border-radius:13px}
  .network-destination span{font-size:11px}
  .network-destination small{font-size:9px}
  .network-destination-copy{width:100%;flex:0 0 auto}
  .ai-network-caption{flex-direction:column;gap:7px;min-height:75px;margin-top:22px;font-size:13px}
}
@media(max-width:360px){
  .ai-network{padding-inline:12px}
  .network-sources{width:calc(100% - 36px);gap:10px}
  .network-source{flex-direction:column;gap:6px;text-align:center;min-height:75px;padding:9px 4px}
  .network-source small{font-size:9px}
  .network-destination span{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.network-node{transition:none}}