/* Cards sit in a shared grid row band. Subgrid makes every card use the
   same two rows - head, then body - so the coloured header ends at the
   same height on all cards, and the equal-height bodies let the button
   sit on a common baseline. */
.section .pkg { display: grid; grid-template-rows: subgrid; grid-row: span 2; }
.section .pkg .pkg-body { display: flex; flex-direction: column; }
.section .pkg .pkg-btn { margin-top: auto; padding-top: 1.25rem; }

/* Browsers without subgrid: cards still match height and the white body
   still fills, but the header boundary follows its own content. */
@supports not (grid-template-rows: subgrid) {
  .section .pkg { display: flex; flex-direction: column; }
  .section .pkg .pkg-body { flex: 1 1 auto; }
}
/* Headers are already equal height (row band above), so pinning the price
   to the bottom of the header lands every price on the same baseline,
   whatever length the description above it runs to. */
.section .pkg .pkg-head { display: flex; flex-direction: column; }
.section .pkg .pkg-head .pkg-price { margin-top: auto; padding-top: 1.25rem; }
/* Per-card accent. The colour field sets --pkg-accent on the card, so the
   header and the button read from one value. Cards with no colour set are
   untouched and keep the theme orange button and its own hover. */
.section .pkg.has-accent .pkg-head { background: var(--pkg-accent); }
.section .pkg.has-accent .pkg-btn .button,
.section .pkg.has-accent .pkg-btn .button:hover {
  background-color: var(--pkg-accent);
  border-color: var(--pkg-accent);
}
.section .pkg.has-accent .pkg-btn .button:hover { filter: brightness(0.88); }