/* Reference-led visual treatment; workflow state and handlers stay unchanged. */
.customer-support-hero-scroll-stage { position:relative; margin-bottom:-100svh; }
.customer-support-hero-scroll-stage::after { content:""; display:block; height:100svh; pointer-events:none; }
.agent-workflow-demo::after { bottom:auto; height:clamp(125px,12vw,175px); border-bottom-right-radius:100% 100%; }
.agent-workflow-demo__workspace { gap:18px; grid-template-columns:minmax(280px,.8fr) minmax(0,1.8fr); background:transparent; border:0; overflow:visible; }
.agent-workflow-demo__request-panel,.agent-workflow-demo__activity { padding:24px; border:1px solid #dfe8f1; border-radius:14px; }
.agent-workflow-demo__request-panel { background:#fff; }
.agent-workflow-demo__activity { background:#fff; }
.agent-workflow-demo {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='%23d0efdf' d='M1000 0V1000H815C805 870 805 720 820 590C840 410 885 230 945 115C965 75 982 35 1000 0Z'/%3E%3C/svg%3E") top right / 100% 100% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='%23e2d2fa' d='M0 0H370V120C370 230 345 310 305 380C270 440 245 500 245 620V1000H0Z'/%3E%3C/svg%3E") top left / 100% 100% no-repeat,
    #fff;
}
.agent-workflow-demo::before {
  display:block;
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:38%;
  background:#fff;
  border-radius:58% 42% 0 0 / 36% 26% 0 0;
  pointer-events:none;
  z-index:0;
}
.agent-workflow-demo__request-panel > .agent-workflow-demo__panel-label { display:none; }
.agent-workflow-demo__message { margin:0 0 24px; align-items:flex-start; gap:14px; }
.agent-workflow-demo__message p { font-size:1.1rem; line-height:1.5; }
.agent-workflow-demo__avatar { width:36px; height:36px; flex:0 0 36px; background:#0561e9; color:white; }
.agent-workflow-demo__scenario-list { gap:16px; }
.agent-workflow-demo__scenario-list button { grid-template-columns:42px minmax(0,1fr) auto; padding:18px 14px; min-height:112px; border:1px solid #e3ebf3; border-radius:12px; background:#fff; gap:8px 12px; text-align:left; }
.agent-workflow-demo__scenario-list button.is-selected { border-color:#4e8fdd; outline:1px solid #a3c3ef; }
.agent-workflow-demo__scenario-list button strong { grid-column:2; grid-row:1; }
.agent-workflow-demo__scenario-list button strong,.agent-workflow-demo__scenario-list button.is-selected strong { font-size:.95rem; }
.agent-workflow-demo__scenario-list button small { grid-column:2 / -1; grid-row:2; }
.agent-workflow-demo__scenario-list button small,.agent-workflow-demo__scenario-list button.is-selected small { font-size:.8rem; }
.agent-workflow-demo__scenario-list button > span { grid-column:3; grid-row:1; font-size:.55rem; padding:4px 7px; }
.workflow-visual-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:9px; background:#e7f1ff; color:#0965de; font-style:normal; flex-shrink:0; }
.agent-workflow-demo__scenario-list .workflow-visual-icon { grid-column:1; grid-row:1 / 3; align-self:center; }
[data-agent-scenario=refund] .workflow-visual-icon,.agent-workflow-demo__timeline li:nth-child(2) .workflow-visual-icon,.agent-workflow-demo__handoff-flow li:nth-child(2) .workflow-visual-icon { background:#e4f6ed; color:#12895f; }
[data-agent-scenario=ambiguous] .workflow-visual-icon,.agent-workflow-demo__timeline li:nth-child(3) .workflow-visual-icon,.agent-workflow-demo__handoff-flow li:nth-child(3) .workflow-visual-icon { background:#fff2dc; color:#c87008; }
.agent-workflow-demo__timeline li:first-child .workflow-visual-icon,.agent-workflow-demo__handoff-flow li:first-child .workflow-visual-icon { background:#efebff; color:#7750d3; }
.agent-workflow-demo__sandbox-label { border-top:1px solid #dce7f2; padding-top:18px; font-size:.75rem; }
.agent-workflow-demo__activity-head strong { font-size:1.35rem; }
.agent-workflow-demo__now { margin:20px 0 16px; padding:20px; border:1px solid #e0e8f4; border-radius:12px; background:#f3f7fd; }
.agent-workflow-demo__now strong { font-size:.95rem; }
.agent-workflow-demo__now p:last-child { font-size:.8rem; }
.agent-workflow-demo__timeline { margin:0; }
.agent-workflow-demo__timeline li { display:grid; grid-template-columns:24px 42px minmax(0,1fr) auto; align-items:center; gap:12px; margin:10px 0; padding:13px 12px; border:1px solid #e6ecf2; border-radius:10px; background:#fff; }
.agent-workflow-demo__timeline li::before { display:none; }
.agent-workflow-demo__timeline li > span { grid-column:1; grid-row:1; }
.agent-workflow-demo__timeline .workflow-visual-icon { grid-column:2; grid-row:1; }
.agent-workflow-demo__timeline li > div { grid-column:3; grid-row:1; }
.agent-workflow-demo__timeline li > small { grid-column:4; grid-row:1; border-radius:20px; padding:4px 9px; background:#f2f5f8; font-size:.65rem; }
.agent-workflow-demo__timeline strong { font-size:.9rem; }
.agent-workflow-demo__timeline p { font-size:.78rem; }
.agent-workflow-demo__run { position:relative; margin-top:8px; padding:12px 48px; justify-content:center; align-items:center; text-align:center; }
.agent-workflow-demo__run > span { position:absolute; right:16px; }
.agent-workflow-demo__oversight { grid-column:1/-1; padding:0; gap:0; grid-template-columns:1fr 1.6fr; border:1px solid #e1e9f2; border-radius:14px; overflow:hidden; }
.agent-workflow-demo__oversight-copy { position:relative; padding:28px 28px 28px 150px; background:#f2f7fd; }
.agent-workflow-demo__oversight-copy img { position:absolute; width:110px; height:110px; object-fit:cover; border-radius:50%; left:22px; top:50%; transform:translateY(-50%); }
.agent-workflow-demo__oversight-copy h3 { font-size:1.45rem; margin:10px 0; }
.agent-workflow-demo__oversight-copy > p:last-child { font-size:.8rem; line-height:1.65; }
.agent-workflow-demo__handoff-flow { padding:18px 28px; background:#fffbf2; }
.agent-workflow-demo__handoff-flow li { align-items:center; padding:12px 0; border:0; }
.agent-workflow-demo__handoff-flow li > span { order:-1; }
.agent-workflow-demo__handoff-flow strong { font-size:.85rem; }
.agent-workflow-demo__handoff-flow small { font-size:.78rem; }
@media(max-width:900px) { .agent-workflow-demo__workspace,.agent-workflow-demo__oversight { grid-template-columns:1fr; } }
@media(max-width:500px) { .agent-workflow-demo__activity,.agent-workflow-demo__request-panel { padding:16px; } .agent-workflow-demo__timeline li { grid-template-columns:20px 32px minmax(0,1fr); gap:8px; } .agent-workflow-demo__timeline li > small { grid-column:3; grid-row:2; justify-self:start; } .agent-workflow-demo__timeline .workflow-visual-icon { width:32px; height:32px; } .agent-workflow-demo__oversight-copy { padding-left:110px; } .agent-workflow-demo__oversight-copy img { width:72px; height:72px; left:18px; } }