.agent-workflow{position:absolute;width:565px;height:620px;right:-15px;top:2px;pointer-events:none}
.workflow-svg{width:100%;height:100%;overflow:visible}
.workflow-label{font-family:var(--mono);font-size:10px;letter-spacing:.17em;fill:#9fac95}
.workflow-wire{stroke:#849678;stroke-opacity:.55;stroke-width:1;stroke-linejoin:round;stroke-linecap:round;fill:none}
.workflow-lift{stroke:#90a77b;stroke-opacity:.55;stroke-width:1;fill:none}
.workflow-pass-through{stroke:#b1cd86;stroke-opacity:.19;stroke-width:1;stroke-dasharray:2 5;fill:none}
.flow-signal{stroke:#d7ff3a;stroke-width:1.45;stroke-linecap:round;stroke-dasharray:23 977;stroke-dashoffset:1000;opacity:0;animation:workflow-route 42s linear infinite;animation-delay:var(--route-delay)}
.workflow-node-light{opacity:0;animation:workflow-process 42s linear infinite;animation-delay:var(--route-delay)}
.workflow-selected .workflow-glyph{animation:workflow-glyph 42s linear infinite;animation-delay:var(--route-delay)}
@keyframes workflow-route{0%{stroke-dashoffset:1000;opacity:0}1%{opacity:.85}32.3%{opacity:.85}33.333%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes workflow-process{0%,13%{opacity:0}15%,19%{opacity:.95}22%,100%{opacity:0}}
@keyframes workflow-glyph{0%,13%{stroke:#c0cbb5}15%,19%{stroke:#d7ff3a}22%,100%{stroke:#c0cbb5}}
@media(min-width:1700px){.agent-workflow{right:0;top:34px;width:620px;height:680px}}
@media(max-width:1150px){.agent-workflow{width:450px;height:550px;right:-10px;top:38px}}
@media(max-width:900px){.agent-workflow{width:360px;height:490px;right:-15px;top:80px}}
@media(max-width:800px){.hero,.hero-inner{min-height:970px}.hero-inner{align-items:flex-start}.hero-copy{width:100%;padding:58px 0 0}.hero-description{max-width:440px}.agent-workflow{width:410px;height:440px;right:calc(50% - 205px);top:490px}}
@media(max-width:650px){.hero,.hero-inner{min-height:895px}.agent-workflow{width:340px;height:395px;right:calc(50% - 170px);top:459px;opacity:1}.workflow-label{font-size:12px}}
@media(max-width:360px){.hero,.hero-inner{min-height:915px}.agent-workflow{width:305px;height:395px;right:calc(50% - 152.5px);top:480px}}
@media(prefers-reduced-motion:reduce){.flow-signal{animation:none;opacity:0}.workflow-node-light{animation:none;opacity:0}.workflow-selected .workflow-glyph{animation:none}.workflow-selected rect{stroke:#849b69}}

/* Fit the longer hero copy while retaining the original visual treatment. */
.hero-copy{width:65%}
.hero h1{font-size:clamp(46px,4.25vw,62px);line-height:1.08}
.hero-description{max-width:600px}
.agent-workflow{width:470px;height:545px;right:-15px;top:75px}
@media(min-width:1700px){.hero h1{font-size:64px}.agent-workflow{width:500px;height:565px;right:0;top:90px}}
@media(max-width:1150px){.hero-copy{width:66%}.hero h1{font-size:50px}.hero-description{max-width:500px}.agent-workflow{width:360px;height:470px;right:-10px;top:95px}}
@media(max-width:900px){.hero h1{font-size:44px}.hero-description{max-width:450px}.agent-workflow{width:290px;height:420px;right:-15px;top:125px}}
@media(max-width:800px){
  .hero,.hero-inner{min-height:0}
  .hero-inner{display:flex;flex-direction:column;align-items:stretch;padding-bottom:24px}
  .hero-copy{width:100%;padding:58px 0 20px}
  .hero h1{font-size:clamp(36px,6.8vw,50px)}
  .hero-description{max-width:600px}
  .agent-workflow{position:relative;align-self:center;right:auto;top:auto;width:340px;height:395px;margin:0 0 20px}
  .hero-footnote{position:relative;bottom:auto;left:auto;right:auto}
}
@media(max-width:650px){.hero h1{font-size:clamp(34px,9.3vw,43px)}}
@media(max-width:360px){.agent-workflow{width:305px}}