/* ============================================================
   OUTMATE — Automate GTM Workflows page
   New bits only. Loads AFTER outmate.css + vid.css.
   ============================================================ */

/* ===== HERO: live workflow-run mockup ===== */
.run{
  margin:auto 0; width:min(560px,90%); margin-left:auto;
  background:#0f0f13; border:1px solid var(--line-dark); border-radius:10px;
  overflow:hidden; font-family:var(--mono);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
}
.run-bar{ display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-bottom:1px solid var(--line-dark); color:#cfcfcf; font-size:11px; letter-spacing:.04em; }
.run-bar .live{ display:inline-flex; align-items:center; gap:7px; }
.run-bar .dot{ width:7px;height:7px;border-radius:50%;background:var(--accent); animation:pulse 1.8s infinite; }
.run-flow{ padding:8px 0; }
/* a node = one stage of the play */
.node{ display:grid; grid-template-columns:30px 1fr auto; gap:12px; align-items:center; padding:13px 16px; position:relative; }
.node .stage{ width:24px; height:24px; border-radius:6px; display:grid; place-items:center;
  font-size:11px; color:#fff; border:1px solid rgba(255,255,255,.16); background:#1b1b22; }
.node.fired .stage{ background:var(--accent); border-color:var(--accent); }
.node .nlabel{ display:flex; flex-direction:column; min-width:0; }
.node .nlabel .t{ color:#f1f1f4; font-size:12.5px; }
.node .nlabel .s{ color:#7e7e86; font-size:10px; margin-top:3px; letter-spacing:.03em; }
.node .nstatus{ font-size:10px; letter-spacing:.06em; color:#7e7e86; white-space:nowrap; }
.node.fired .nstatus{ color:#a9a2ff; }
.node.pending .nstatus{ color:#5a5a62; }
/* connector line between nodes */
.node + .node::before{
  content:""; position:absolute; left:27px; top:-13px; height:13px; width:2px;
  background:linear-gradient(var(--accent), rgba(80,70,230,.15));
}
.node.pending + .node::before,.node.pending::before{ background:rgba(255,255,255,.10); }
/* travelling pulse down the spine */
.run-flow .spark{
  position:absolute; left:26px; width:4px; height:4px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 8px 2px rgba(80,70,230,.8); opacity:0;
}
@keyframes sparkdrop{ 0%{ opacity:0; transform:translateY(0);} 8%{opacity:1;} 92%{opacity:1;} 100%{ opacity:0; transform:translateY(var(--drop,200px)); } }

/* ===== AGENTS GRID (new section) ===== */
.agents-grid{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }
.agent{ padding:clamp(20px,2vw,30px); border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; gap:14px; min-height:clamp(150px,13vw,180px); transition:background .25s; }
.agent:nth-child(4n){ border-right:0; }
.agent:hover{ background:var(--paper-2); }
.agent .ai{ width:34px; height:34px; border-radius:8px; background:var(--ink); color:#fff;
  display:grid; place-items:center; font-family:var(--mono); font-size:13px; }
.agent.lead .ai{ background:var(--accent); }
.agent .an{ font-family:var(--sans); font-weight:700; letter-spacing:-.01em; font-size:clamp(15px,1.4vw,18px); line-height:1.1; }
.agent .ad{ font-family:var(--mono); font-size:10.5px; letter-spacing:.03em; color:var(--muted); margin-top:auto; text-transform:uppercase; }
.agents-note{ padding:18px clamp(20px,4vw,72px); font-family:var(--mono); font-size:11px; letter-spacing:.05em;
  color:var(--muted); border-top:1px solid var(--line); display:flex; gap:10px; align-items:center; }
.agents-note .acc{ color:var(--accent); }

/* ===== count-up: no layout shift ===== */
.count{ font-variant-numeric:tabular-nums; }

/* ===== problem scenario list (themed) ===== */
.scenarios{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.scenarios li{ padding:18px 0; border-bottom:1px solid rgba(255,255,255,.12); display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; }
.scenarios li:first-child{ border-top:1px solid rgba(255,255,255,.12); }
.scenarios .mk{ font-family:var(--mono); color:var(--accent); font-size:13px; margin-top:3px; }
.scenarios .tx{ font-family:var(--body); font-size:clamp(14px,1.25vw,17px); line-height:1.5; color:#c7c7cd; }
.scenarios .tx b{ color:#fff; font-weight:600; }

/* ===== how-highlight reused; nothing new ===== */

/* ===== responsive ===== */
@media (max-width:980px){
  .agents-grid{ grid-template-columns:repeat(2,1fr); }
  .agent:nth-child(4n){ border-right:1px solid var(--line); }
  .agent:nth-child(2n){ border-right:0; }
}
@media (max-width:520px){
  .agents-grid{ grid-template-columns:1fr; }
  .agent,.agent:nth-child(4n){ border-right:0; }
  .run{ width:100%; }
  .node{ grid-template-columns:26px 1fr; }
  .node .nstatus{ grid-column:2; }
}