<div class="space-y-5">
  <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><h2 class="text-lg font-bold text-slate-900">Staff Work Wizards</h2><p class="mt-1 text-sm text-slate-500">Action shortcuts for task execution using existing ERP screens.</p></div>
  <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
    {% for card in wizards %}
    <a href="{{ card.href }}" class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft transition hover:-translate-y-0.5 hover:shadow-lg">
      <h3 class="text-base font-bold text-slate-900">{{ card.title }}</h3>
      <p class="mt-2 text-sm text-slate-500">{{ card.desc }}</p>
      <p class="mt-4 text-sm font-semibold text-brand-700">Open →</p>
    </a>
    {% endfor %}
  </div>
</div>
