/* ==========================================================================
   Homepage showcase — animated graphics ported from the Zapyrus/Compass
   comparison page (agent flow, execution race, sales lifecycle).
   Animation keyframes + helpers copied verbatim from that page's <style>.
   ========================================================================== */

    @keyframes blkIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
    @keyframes recIn{from{opacity:0;filter:blur(7px);transform:scale(.97)}to{opacity:1;filter:blur(0);transform:none}}
    @keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
    @keyframes drawX{from{transform:translateY(-50%) scaleX(0)}to{transform:translateY(-50%) scaleX(1)}}
    @keyframes popIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
    @keyframes spin{to{transform:rotate(360deg)}}
    @keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}
    .xo-flow-scaler{width:100%;max-width:1680px;aspect-ratio:1680/570;overflow:hidden;margin:0 auto}
    .xo-flow-stage{width:1680px;height:570px;transform-origin:top left;transform:scale(var(--xo-scale,1))}
    .xo-cube{position:absolute;width:30px;height:30px;transform-style:preserve-3d;animation:om-undulate 4.4s ease-in-out infinite}
    .xo-cube-top{position:absolute;inset:0;background:var(--t)}
    .xo-cube-s{position:absolute;left:0;top:100%;width:30px;height:9px;background:var(--s);transform-origin:50% 0;transform:rotateX(-90deg)}
    .xo-cube-e{position:absolute;left:100%;top:0;width:9px;height:30px;background:var(--e);transform-origin:0 0;transform:rotateY(-90deg)}
    @keyframes om-float{0%,100%{transform:translateY(-4px)}50%{transform:translateY(4px)}}
    @keyframes om-dash{to{stroke-dashoffset:-126}}
    @keyframes om-pulse{0%{opacity:.26}5%,100%{opacity:1}}
    @keyframes om-tileglow{0%{background:#fff;border-color:var(--border)}5%,100%{background:var(--xos-primary-50);border-color:var(--xos-primary-200)}}
    @keyframes om-bar{0%{transform:scaleX(0)}55%{transform:scaleX(1)}100%{transform:scaleX(1)}}
    @keyframes om-tick{0%,22%{opacity:0;transform:scale(.6)}34%,100%{opacity:1;transform:scale(1)}}
    @keyframes om-undulate{0%,100%{transform:translateZ(0)}50%{transform:translateZ(var(--amp))}}
    @keyframes om-sweep{0%{transform:translateX(-110px)}62%{transform:translateX(560px)}100%{transform:translateX(560px)}}
    @keyframes om-breathe{0%,100%{opacity:.45}50%{opacity:1}}
    @media (prefers-reduced-motion:reduce){.xo-flow-stage *{animation:none !important}}
    [data-anim]{animation:none !important;opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
    [data-in] [data-anim]{opacity:1;transform:none}
    [data-in] [data-anim]:nth-child(3n+2){transition-delay:.08s}
    [data-in] [data-anim]:nth-child(3n){transition-delay:.16s}
    [data-draw]{animation:none !important;transform:translateY(-50%) scaleX(0);transform-origin:left center;transition:transform .9s var(--ease)}
    [data-in] [data-draw]{transform:translateY(-50%) scaleX(1)}
    @media (prefers-reduced-motion: reduce){[data-anim],[data-draw]{transition:none}}
    @media (max-width:1190px){
      .cmp-flow{flex-direction:column;align-items:center !important;gap:36px !important}
      .cmp-divider{display:none !important}
      .cmp-flow > *{width:auto !important;flex:0 0 auto !important;min-width:0 !important}
      .cmp-flow > svg{transform:rotate(90deg);align-self:center}
    }
    @media (max-width:900px){
      /* narrow screens */
      .cmp-h1{white-space:normal !important}
      .cmp-grid2{grid-template-columns:1fr !important}
      .cmp-flow{flex-direction:column !important;align-items:stretch !important}
      .cmp-flow > *{width:auto !important;flex:0 0 auto !important;min-width:0 !important}
      .cmp-hide-sm{display:none !important}
      .cmp-cols{grid-template-columns:1fr 84px 84px 84px !important}
      .cmp-bar{width:34px !important}
      .cmp-trk{grid-template-columns:1fr !important}
      .cmp-steps{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
      .cmp-steps > .cmp-exec{grid-column:1/-1 !important;grid-row:auto !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important}
      .cmp-steps > .cmp-exec-cap{grid-column:1/-1 !important;grid-row:auto !important}
      .cmp-nowrap{white-space:normal !important}
      .cmp-foot{grid-template-columns:1fr 1fr !important;gap:28px !important}
    }
  /* keep the artifact body clear of the site's fixed nav */

/* ---- Homepage showcase layout ---- */
.home-showcase { padding: clamp(40px, 6vw, 88px) 0 clamp(24px, 4vw, 48px); overflow-x: clip; }
.home-showcase .container { max-width: var(--content-max); margin: 0 auto; padding: 0 24px; }
.showcase-block { margin-top: clamp(44px, 6vw, 84px); }
.showcase-block:first-child { margin-top: 0; }

/* little centered eyebrow header above graphics 1 & 2 */
.showcase-eyebrow {
  font: 600 12px/1.3 var(--font-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--primary);
  text-align: center;
  margin: 0 0 18px;
}

/* bordered card wrapper (matches the comparison page cards) */
.showcase-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  background: var(--card);
  padding: 26px 28px 22px;
}

/* graphic 3 heading — left aligned, as in the reference */
.showcase-lc-head {
  font: 700 clamp(24px, 3.4vw, 38px)/1.12 var(--font-sans);
  letter-spacing: -0.02em;
  color: #000;
  margin: 0;
}
.showcase-lc-sub {
  font: 400 16px/1.6 var(--font-sans);
  color: #494949;
  margin: 14px 0 0;
  max-width: 62ch;
}
.showcase-lc-head + .showcase-lc-sub { margin-top: 12px; }