/* The workflow is an illustration, not an interactive editor. */
.agent-workflow{width:calc(100% - 64px);max-width:1200px;margin:0 auto;padding:24px 0 32px}
.agent-workflow #speed-title{font:300 var(--section-title)/1.12 var(--font-heading);letter-spacing:-2px;color:#fff;text-align:center;margin:0 auto 36px;text-wrap:balance}
.agent-workflow #speed-title s{position:relative;display:inline-block;text-decoration:none;color:#858585}
.agent-workflow #speed-title s::after{content:"";position:absolute;left:-.07em;right:-.07em;top:52%;height:1.5px;background:#aaa;pointer-events:none}
.agent-workflow #speed-title em,.wf-feedback em{font-family:'Libre Caslon Condensed',Georgia,serif;font-weight:600;color:var(--accent);font-style:italic}
.wf-canvas{position:relative;isolation:isolate;border:1px solid #292929;border-radius:26px;background-color:#090909;background-image:radial-gradient(#292929 .75px,transparent .75px);background-size:22px 22px;padding:40px 48px 48px}
.wf-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:64px 58px;list-style:none;padding:0;margin:0}
.wf-card{min-width:0;padding:24px;border:1px solid #333;border-radius:17px;background:#141414;box-shadow:0 12px 24px #0003;color:#f5f5f5}
.wf-research{grid-area:1/1;margin-top:18px}
.wf-copy{grid-area:1/2;margin-top:82px}
.wf-creative{grid-area:1/3}
.wf-organic{grid-area:2/3}
.wf-meta{grid-area:2/2;margin-top:40px}
.wf-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px;height:23px}
.wf-number{font:400 12px/1 var(--font-body);color:#aaa;letter-spacing:.06em}
.wf-card-top>svg{width:22px;height:22px;fill:none;stroke:#ff765c;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.wf-card h3{font:400 22px/1.2 var(--font-heading);letter-spacing:-.65px;color:#fafafa;margin:0 0 12px}
.wf-card>p{font:400 14px/1.6 var(--font-body);letter-spacing:-.08px;color:#a7a7a7;margin:0 0 24px;text-wrap:pretty}
.wf-connections{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible;pointer-events:none}
.wf-wire{fill:none;stroke:#505050;stroke-width:1.2;marker-end:url(#wf-arrow)}
.wf-wire-feedback{stroke:#49413e;stroke-dasharray:4 5}
.wf-port{fill:#141414;stroke:#9b594b;stroke-width:1.2}
.wf-pulse{visibility:hidden;pointer-events:none}
.wf-canvas.wf-animate .wf-pulse{visibility:visible}
.wf-pulse-trail{fill:none;stroke:#ff6547;stroke-width:2.2;stroke-linecap:round;filter:drop-shadow(0 0 4px #ff330f99)}
.wf-pulse-halo{fill:#ff4a26;filter:blur(2px)}
.wf-pulse-core{fill:#ffb49d;filter:drop-shadow(0 0 4px #ff4c26)}
.wf-canvas.wf-animate .wf-port-active{fill:#ff765c;stroke:#ffb49d}
.wf-canvas .wf-stage-active{border-color:#8b4734;box-shadow:0 0 0 1px #ff330f12,0 0 24px #ff330f0a,0 12px 24px #0003}
.wf-canvas .wf-stage-active .wf-number{color:#ff927a}
.wf-feedback{position:absolute;left:48px;bottom:152px;width:calc((100% - 212px)/3);margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:0;font:300 24px/1.3 var(--font-heading);letter-spacing:-.5px;color:#aaa;z-index:1;text-align:center;pointer-events:none}
.wf-feedback>span{display:block}
.wf-feedback em{white-space:nowrap}
.wf-feedback em{font-size:28px;letter-spacing:-.6px}
/* Research: source fragments merge into a structured insight stack. */
.wf-sources{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.wf-sources span{background:#1d1d1d;border:1px solid #333;border-radius:6px;padding:7px 8px;font:400 11px/1.3 var(--font-body);color:#bcbcbc;text-align:center}
.wf-source-merge{display:block;width:100%;height:27px;fill:none;stroke:#51423b;stroke-width:1}
.wf-insights{display:grid;gap:6px}
.wf-insights span{display:flex;align-items:center;gap:9px;background:#1b1918;border:1px solid #40302a;border-radius:7px;padding:10px 11px;font:400 12px/1.2 var(--font-body);color:#d8d3d0}
.wf-insights i{width:4px;height:4px;background:#ff684c;border-radius:50%;flex:none}
.wf-insights b{margin-left:auto;font-weight:400;color:#a88176}
/* Copy: the structure of a draft without invented customer quotations. */
.wf-copy-output{padding-inline:3px}
.wf-draft{position:relative;border:1px solid #343434;background:#191919;border-radius:7px;padding:10px 12px}
.wf-draft>span{display:block;font:400 11px/1.4 var(--font-body);color:#b0b0b0;margin-bottom:8px}
.wf-draft>i{display:block;width:86%;height:3px;background:#3a3a3a;border-radius:2px;margin:5px 0}
.wf-draft>i:last-of-type{width:62%}
.wf-mini-arrow{display:block;text-align:center;font-size:14px;color:#71635d;line-height:23px}
.wf-hook{border-color:#6b3a2d;background:#231a17}
.wf-hook>span{color:#ff927a}.wf-hook>i{background:#6e4134}
.wf-hook>b{position:absolute;right:11px;top:7px;font:400 46px/1 Georgia,serif;color:#ad5b44}
/* Creative: a storyboard becomes multiple executions. */
.wf-storyboard{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.wf-storyboard>span{border:1px solid #373737;border-radius:6px;background:#1c1c1c;padding:8px;font:400 10px/1.3 var(--font-body);color:#bbb}
.wf-storyboard i{display:block;font-style:normal;color:#777;font-size:9px;margin-bottom:7px}
.wf-creative-fan{display:flex;align-items:center;justify-content:center;position:relative;height:172px;margin:19px 0 8px}
.wf-creative-fan img{display:block;object-fit:cover;object-position:50% 35%;border:3px solid #242424;border-radius:9px;width:37%;max-width:104px;height:139px}
.wf-creative-fan img:first-child{transform:rotate(-11deg) translateX(10px)}
.wf-creative-fan img:nth-child(2){z-index:1;width:41%;max-width:112px;height:158px;flex:none;box-shadow:0 8px 16px #0005}
.wf-creative-fan img:last-child{transform:rotate(11deg) translateX(-10px)}
.wf-output-note{display:block;font:400 11px/1.4 var(--font-body);color:#999;text-align:center}
/* Organic testing: a field of creatives becomes a shortlist. */
.wf-test-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
.wf-test-grid img{display:block;width:100%;height:52px;object-fit:cover;border-radius:4px;border:1px solid #444;opacity:.82}
.wf-signals{display:flex;flex-wrap:wrap;gap:5px;margin:12px 0 0}
.wf-signals>span{padding:5px 6px;border-radius:4px;background:#242424;font:400 10px/1.2 var(--font-body);color:#bdbdbd}
.wf-shortlist-lines{display:block;fill:none;stroke:#665044;stroke-width:1;width:100%;height:25px}
.wf-shortlist{display:flex;align-items:center;gap:8px;border:1px solid #654332;background:#211b17;border-radius:8px;padding:11px}
.wf-shortlist>span{font:400 11px/1.3 var(--font-body);color:#e0d5cd;max-width:70px}
.wf-shortlist>div{display:flex;margin-left:auto;gap:4px}
.wf-shortlist img{width:29px;height:38px;object-fit:cover;border-radius:3px;border:1px solid #89634e}
.wf-shortlist>b{font:400 16px var(--font-body);color:#ff947f}
/* Paid distribution: candidates move into conversion-led testing. */
.wf-selected{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:0 0 12px}
.wf-selected>div{display:flex;gap:5px}
.wf-selected img{object-fit:cover;border:1px solid #555;border-radius:5px;width:38px;height:48px}
.wf-selected>span{font:400 11px/1.4 var(--font-body);color:#aaa;flex:1}
.wf-selected>b{width:100%;font:400 16px/1 var(--font-body);color:#71635d;text-align:center}
.wf-campaign{padding:16px 13px;border:1px solid #644133;border-radius:8px;background:#201917}
.wf-campaign-heading{display:flex;align-items:center;gap:9px;font:400 13px/1.3 var(--font-body);color:#e0d5d0}
.wf-campaign-heading svg{width:24px;height:20px;fill:none;stroke:#ff765c;stroke-width:1.5;flex:none}
.wf-campaign-path{display:flex;align-items:center;justify-content:space-between;gap:4px;padding-top:15px;margin-top:14px;border-top:1px solid #493026;font:400 10px/1.3 var(--font-body);color:#bba89f}
.wf-campaign-path b{font-weight:400;color:#ff765c}
@media(min-width:1000px) and (max-width:1190px){
 .wf-canvas{padding:32px 32px 40px}.wf-grid{gap:54px 38px}.wf-card{padding:19px}.wf-card h3{font-size:20px}.wf-card>p{font-size:13px}.wf-feedback{left:32px;width:calc((100% - 140px)/3);font-size:21px}.wf-feedback em{font-size:25px}
}
@media(min-width:1000px){.wf-canvas.wf-wired .wf-feedback{top:var(--wf-feedback-top);bottom:auto}}
@media(max-width:999px){
 .agent-workflow{max-width:650px;width:calc(100% - 44px);padding:24px 0}
 .agent-workflow #speed-title{max-width:560px}
 .wf-canvas{padding:28px 24px 28px 48px;border-radius:21px}
 .wf-grid{grid-template-columns:1fr;gap:38px}
 .wf-card{grid-area:auto;margin:0;padding:24px}
 .wf-card h3{font-size:23px}.wf-card>p{font-size:15px}
 .wf-research-output,.wf-copy-output,.wf-creative-output,.wf-organic-output,.wf-meta-output{max-width:320px;margin-inline:auto}
 .wf-feedback{position:relative;left:auto;bottom:auto;width:auto;margin-top:34px;font-size:21px}
 .wf-feedback em{font-size:25px}
 .wf-canvas:not(.wf-wired) .wf-grid:before{content:"";position:absolute;left:-20px;top:24px;bottom:24px;width:1px;background:#45403c}
}
@media(max-width:480px){
 .wf-canvas{padding:24px 16px 25px 35px;border-radius:18px}
 .wf-card{padding:19px 16px}.wf-card h3{font-size:21px}.wf-card>p{font-size:14px;margin-bottom:22px}
 .wf-grid{gap:32px}.wf-feedback{font-size:17px}.wf-feedback em{font-size:21px}
 .wf-creative-fan{height:155px}.wf-creative-fan img{height:123px}.wf-creative-fan img:nth-child(2){height:145px}
 .wf-campaign{padding:13px 10px}.wf-campaign-path{font-size:9px}
}
@media(prefers-reduced-motion:reduce){.wf-pulse{display:none}}
/* Reveal the whole canvas together so its cards and wires stay aligned. */
@media(prefers-reduced-motion:no-preference){
 .agent-workflow.wf-entered #speed-title{animation:wf-arrive 620ms cubic-bezier(.22,1,.36,1) both}
 .agent-workflow.wf-entered .wf-canvas{animation:wf-arrive 700ms cubic-bezier(.22,1,.36,1) 140ms both}
 @keyframes wf-arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
}

@media(max-width:700px){.agent-workflow #speed-title{font-size:38px;line-height:1.15;letter-spacing:-1.3px;margin-bottom:28px}}
@media(max-width:380px){.agent-workflow #speed-title{font-size:34px}}

@media(max-width:700px){.agent-workflow #speed-title{font-size:clamp(28px,8.2vw,48px);line-height:1.12;letter-spacing:-1.2px}.agent-workflow #speed-title .workflow-title-line{display:block;white-space:nowrap}}