/* ================================================================
   Datalyst Africa — AI Agents catalogue & trial modal
   Scoped additions for ai-agents.html and pricing.html only.
   ================================================================ */

/* ---------- Agent card grid ---------- */
.agent-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.agent-card{
  display:block;width:100%;text-align:left;font-family:inherit;color:inherit;
  cursor:pointer;appearance:none;-webkit-appearance:none;scroll-margin-top:150px;
}
.agent-card:focus-visible{outline:2.5px solid var(--blue);outline-offset:3px}
.agent-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.agent-feats{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.agent-feats li{display:flex;align-items:flex-start;gap:9px;font-size:.865rem;color:var(--ink-2);line-height:1.5}
.agent-feats li svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--blue-600)}
.agent-feats-sm li{font-size:.82rem}
.agent-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:18px;border-top:1px solid var(--line-2)}
.agent-price{font-weight:800;color:var(--navy-900);font-size:1rem;letter-spacing:-.01em}
.agent-price span{font-weight:600;color:var(--ink-3);font-size:.78rem}
.agent-cta{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:700;color:var(--blue-600)}
.agent-cta svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.agent-card:hover .agent-cta svg{transform:translateX(4px)}

/* Empty-state when a filter matches nothing (defensive; should not occur) */
.agent-empty{display:none;text-align:center;padding:60px 20px;color:var(--ink-3)}
.agent-empty.on{display:block}

/* ---------- Pricing page: compact per-agent cards ---------- */
.agent-pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.agent-pcard{padding:clamp(20px,2vw,26px)}
.agent-pcard .agent-price{display:block;font-size:1.3rem;margin-top:10px}

/* ---------- Trial modal ---------- */
.trial-modal-overlay{
  position:fixed;inset:0;z-index:200;display:flex;align-items:flex-start;justify-content:center;
  padding:min(6vh,60px) 18px 40px;background:rgba(1,26,40,.62);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .32s var(--ease);overflow-y:auto;
}
.trial-modal-overlay.on{opacity:1;pointer-events:auto}
.trial-modal{
  position:relative;width:100%;max-width:560px;background:#fff;border-radius:var(--r-lg);
  padding:clamp(24px,3vw,40px);box-shadow:0 32px 90px rgba(1,26,40,.42);
  transform:translateY(18px) scale(.98);opacity:0;transition:transform .38s var(--ease),opacity .38s var(--ease);
}
.trial-modal-overlay.on .trial-modal{transform:translateY(0) scale(1);opacity:1}
.trial-modal-close{
  position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg-2);border:1px solid var(--line);color:var(--ink-2);cursor:pointer;transition:background-color .25s,color .25s;
}
.trial-modal-close:hover{background:var(--navy);color:#fff}
.trial-modal-close svg{width:18px;height:18px}
.trial-modal-head{display:flex;align-items:flex-start;gap:16px;padding-right:34px}
.trial-steps{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.trial-step{display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;color:var(--ink-3)}
.trial-step-n{
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--bg-3);color:var(--ink-3);font-size:.72rem;font-family:var(--ff-mono);
}
.trial-step.on{color:var(--navy-900)}
.trial-step.on .trial-step-n{background:var(--blue);color:#fff}
.trial-step:not(:last-child)::after{content:"";width:16px;height:1px;background:var(--line);margin-left:4px}
.trial-stage{
  border:1px dashed var(--line);border-radius:var(--r);padding:22px 20px;text-align:center;background:var(--bg-2);
  position:relative;
}
.trial-stage-ico{width:30px;height:30px;color:var(--blue-600);margin:0 auto 12px}
.trial-stage-title{font-weight:800;color:var(--navy-900);font-size:.96rem}
.trial-stage-sub{font-size:.85rem;color:var(--ink-2);margin-top:8px;line-height:1.6}
.trial-modal-foot{border-top:1px solid var(--line-2);padding-top:20px}

@media (max-width:980px){
  .agent-grid,.agent-pgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .agent-grid,.agent-pgrid{grid-template-columns:1fr}
  .agent-card-foot{flex-direction:column;align-items:flex-start;gap:10px}
}