/**
 * Pricing cards SDC — structural CSS only (section spacing, max-width
 * container). html_text is pasted as TWO sibling top-level elements — a
 * heading row, then ONE div that is already `display:grid;
 * grid-template-columns:repeat(3,1fr)` inline (html/Home.html,
 * html/Packages.html) wrapping the Presence/Business/Enterprise cards.
 * `.mk3-pc__cards` must stay a plain block wrapper so those two children
 * stack normally; it must NOT itself be display:grid, or it turns the
 * heading row and the (already-gridded) cards div into two side-by-side
 * grid cells instead of stacked sections — a real bug caught by comparing
 * the live site to the source screenshot (same issue as feature-grid.css).
 */
.mk3-sdc--pricing-cards .mk3-pc__inner {
  max-width: 80rem; /* 1280px, matches .mk3-header__wrap / .mk3-footer__top */
  margin: 0 auto;
  /* html/Home.html: padding-top:80px, fixed not fluid — same fix as
   * feature-grid.css (a clamp() here undershot across 1024–1300px). */
  padding: 5rem 3rem 1.25rem;
}

@media (max-width: 768px) {
  .mk3-sdc--pricing-cards .mk3-pc__inner {
    padding: 2.5rem 1.25rem 1rem;
  }

  /* Same fix as feature-grid.css: the pasted cards div's inline
   * grid-template-columns:repeat(3,1fr) has no responsive fallback of its
   * own, so left as-is the 3 pricing cards get squeezed to ~180px-wide
   * columns and overflow their container on phones. */
  .mk3-sdc--pricing-cards .mk3-pc__cards > div,
  .mk3-sdc--pricing-cards .mk3-pc__cards > div > div {
    grid-template-columns: 1fr !important;
  }
}