/* ============================================================
   Marketing Automation & AI Workflows - page-specific styles
   Builds on styles.css + service-page.css (tokens, type, buttons,
   reveal, marquee, FAQ, CTA, build steps, wd-stats, wd-quote).
   ============================================================ */

/* ---------- hero board: workflow pipeline + live stats ---------- */
.au-board{
  position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:18px;
  margin:clamp(40px,6vw,68px) auto 0;max-width:1060px;
}

/* workflow card */
.au-flow{
  background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.6);padding:22px 24px 26px;position:relative;overflow:hidden;
}
.au-flow-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.au-flow-head .t{font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--ink);display:flex;align-items:center;gap:9px;}
.au-flow-head .t .dotlive{width:8px;height:8px;border-radius:50%;background:#2e9c54;box-shadow:0 0 0 4px rgba(46,156,84,.18);animation:auPulse 1.6s ease-in-out infinite;}
@keyframes auPulse{50%{box-shadow:0 0 0 7px rgba(46,156,84,0);}}
.au-flow-head .tag{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);background:#fdeee8;padding:4px 10px;border-radius:999px;}

/* the vertical pipeline */
.au-pipe{position:relative;padding-left:4px;}
.au-node{position:relative;display:flex;align-items:center;gap:14px;padding:11px 0;}
/* connector line behind icons */
.au-node:not(:last-child)::before{
  content:"";position:absolute;left:21px;top:46px;bottom:-11px;width:2px;background:#ececea;z-index:0;
}
/* progress fill on the connector */
.au-node:not(:last-child)::after{
  content:"";position:absolute;left:21px;top:46px;width:2px;height:0;background:var(--accent);z-index:1;
  transition:height .45s ease;
}
.au-node.done:not(:last-child)::after{height:calc(100% - 35px);}

.au-ic{
  position:relative;z-index:2;width:42px;height:42px;border-radius:12px;flex:none;
  display:grid;place-items:center;background:#f2f1ee;color:#9a9893;border:1px solid #ececea;
  transition:.35s;
}
.au-ic svg{width:20px;height:20px;}
.au-ic .spin{position:absolute;inset:-2px;border-radius:13px;border:2px solid transparent;border-top-color:var(--accent);opacity:0;animation:spin .8s linear infinite;}
.au-node.active .au-ic{background:#fff;border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px rgba(244,81,30,.12);}
.au-node.active .au-ic .spin{opacity:1;}
.au-node.done .au-ic{background:var(--accent);border-color:var(--accent);color:#fff;}

.au-body{flex:1;min-width:0;}
.au-body .n{font-weight:700;font-size:14.5px;color:#bdbbb6;transition:.3s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.au-body .d{font-size:12.5px;color:#c4c2bd;margin-top:1px;height:0;opacity:0;overflow:hidden;transition:.3s;}
.au-node.active .au-body .n,.au-node.done .au-body .n{color:#16181a;}
.au-node.active .au-body .d{height:16px;opacity:1;}
.au-tagchip{font-size:11px;font-weight:700;color:#9a9893;background:#f2f1ee;border-radius:999px;padding:4px 10px;flex:none;transition:.3s;}
.au-node.active .au-tagchip{color:var(--accent);background:#fdeee8;}
.au-node.done .au-tagchip{color:#2e9c54;background:#e8f6ee;}

/* stats side */
.au-side{display:flex;flex-direction:column;gap:14px;}
.au-stat{
  background:rgba(255,255,255,.97);border-radius:16px;box-shadow:0 18px 40px -20px rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.6);padding:18px 20px;
}
.au-stat .lab{font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.01em;}
.au-stat .val{font-size:clamp(28px,3.4vw,38px);font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1.05;margin-top:5px;display:flex;align-items:baseline;gap:2px;}
.au-stat .val .suf{font-size:.5em;font-weight:800;color:var(--accent);}
.au-stat .delta{font-size:12px;font-weight:600;color:#2e9c54;margin-top:6px;}
.au-stat.spark{flex:1;display:flex;flex-direction:column;}
.au-spark{margin-top:auto;display:flex;align-items:flex-end;gap:6px;height:62px;}
.au-spark i{flex:1;border-radius:5px 5px 0 0;background:linear-gradient(180deg,var(--accent),#ff8a5c);height:0;transition:height .7s cubic-bezier(.2,.7,.3,1);}
.reveal.in .au-spark i{height:var(--h);}

/* ---------- "what you automate" cards (reuse svc-grid) ---------- */
.au-tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;}

/* ---------- integrations marquee-ish strip (reuse chip) ---------- */
.au-int{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:820px;margin:clamp(30px,4vw,44px) auto 0;}
.au-int .chip{display:flex;align-items:center;gap:9px;}
.au-int .chip .d{width:9px;height:9px;border-radius:3px;background:var(--accent);opacity:.7;}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .au-board{grid-template-columns:1fr;}
  .au-side{flex-direction:row;flex-wrap:wrap;}
  .au-stat{flex:1 1 calc(50% - 7px);}
  .au-stat.spark{flex:1 1 100%;}
  .au-spark{height:54px;}
}
@media (max-width:480px){
  .au-side{flex-direction:column;}
  .au-stat{flex:1 1 auto;}
  .au-tagchip{display:none;}
}