/* Listing cards, editorial restyle (Ugur, 2026-10-20; the homepage's featured-card treatment):
   no emoji tile, no per-calculator accent, no repeated category label; a small teal
   subcategory label, the name in the display serif, a compact summary and "Open calculator".
   Loaded by the pages that draw the _Card partial (category, search), after site.css. Kept out
   of site.css because site.css is part of the calculator page shell, whose every change is a
   freshness release for every calculator page (ops/check-calculator-page-freshness.sh); site.css's
   older .card rules stay as they are and are overridden here, on `a.card` (the _Card link) and
   the listing grid. 3 columns, 2 below 1020px, 1 below 640px. The card lifts with a shadow on
   hover and does not move. */
.cards { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
a.card { display:flex; flex-direction:column; min-width:0; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:18px 18px 16px; transition:box-shadow .15s, border-color .15s; }
a.card:hover { box-shadow:var(--shadow-md); border-color:var(--line-strong); transform:none; }
a.card:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
a.card .card-kicker { margin:0 0 10px; font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-teal); }
a.card h3 { margin:0; font-family:var(--font-display); font-weight:600; font-size:1.25rem; line-height:1.18; letter-spacing:-.012em; color:var(--ink); }
a.card p { margin:11px 0 0; font-size:.88rem; line-height:1.5; color:#3f4757;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
a.card .card-go { margin-top:auto; padding-top:14px; font-weight:600; font-size:.88rem; color:var(--accent); }
a.card:hover .card-go { color:var(--accent-strong); text-decoration:underline; }
@media (max-width:1020px) { .cards { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px) { .cards { grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce) { a.card { transition:none; } }