/* ============================================================
   SURFACES — the three kinds of card on the site (decided 02.10.2026)
   Requires: tokens.css, page.css

   .panel       a fill holding a whole section block ("How it works", the final CTA, /manage's
                interface block, /features blocks). Padding: --panel-pad-top / --pad-card-fluid /
                --panel-pad-bottom (80 · 32 · 80 desktop, 32 · 24 · 32 phones — top and bottom always equal), radius 16.
   .card        a fill holding the content of one grid item (bento blocks, accordion, strategy
                cards, the course card). Padding --pad-card-fluid on all sides (32 → 24), radius 16.
   .media-card  no fill: an image and text under it (blog and related-link cards). No padding;
                the image takes radius 12.
   Radii by role (decided 02.10.2026, variant B — close to the live /case-studies cards, 1.2rem): surfaces 16
   (panels, standalone pictures, filled cards), pictures 12, controls 12 (buttons on phones, chips) — the desktop
   CTA button keeps 24, as the home page. A picture inside a filled card follows the nested-radius rule.
   The fill follows the page theme: Surface on light pages, Background/Grey on dark ones.
   A variant changes the fill only (e.g. .card with the primary colour), never the padding or radius.
   ============================================================ */

.panel {
  border-radius: var(--radius-lg);
  padding: var(--panel-pad-top) var(--pad-card-fluid) var(--panel-pad-bottom);
  background: var(--color-surface);
}

.card {
  border-radius: var(--radius-lg);
  padding: var(--pad-card-fluid);
  background: var(--color-surface);
}

.theme-dark .panel, .theme-dark .card { background: var(--color-bg-grey); }

.media-card img { border-radius: var(--radius-md); }