/* =========================================================
   Component · card — the white card used by the program solution cards, plus its chip and dotted list.
   ========================================================= */

/* ---------- Program cards ---------- */

.card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--edge); border-radius: var(--radius);
  transition: transform .55s var(--servo), box-shadow .4s, border-color .3s;
}
.card:hover { transform: translateY(-6px); border-color: var(--edge-strong); box-shadow: 0 28px 50px -30px rgba(46, 49, 146, .35); }
.card__head { display: flex; align-items: center; justify-content: space-between; }
.card__lvl { font: 500 12px var(--mono); letter-spacing: .14em; color: var(--muted); }
.chip { padding: 5px 11px; border-radius: 999px; background: var(--bg); font: 500 11.5px var(--mono); letter-spacing: .04em; color: var(--text); }
.chip--alt { background: var(--accent-soft); color: var(--ink); }
.card .ico { width: 56px; height: 56px; margin: 18px 0 8px; overflow: visible; }
.card__title { font-size: 26px; }
.card__text { color: var(--text); font-size: 16px; }
.card__list {
  display: grid; gap: 9px;
  margin: auto 0 0; padding: 18px 0 0; list-style: none;
  border-top: 1px dashed var(--edge);
  font: 400 13px var(--mono); color: var(--text);
}
.card__list li { display: flex; align-items: center; gap: 10px; }
.card__list li::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--accent); }