/* =========================================================================
   .rp-card-panel — generic "bordered grid panel" feature section.
   A light band holding ONE white rounded panel split into an N-col grid by
   1px hairline dividers (white cells over a divider-coloured grid background +
   1px gaps). Each cell = light-blue icon chip + title + description, left-aligned.
   GENERIC, self-contained, block-scoped, reusable. First built from the Local
   Payroll Figma 16779:27679; values here ARE the component defaults.
   Near-miss existing grids (future-consolidation candidates): none — the kit had
   navy-pill (.rp-bento/.rp-cm-cards), asymmetric lavender (.rp-feature-cards),
   and image-placeholder (.rp-feature-trio) grids, but no hairline-divider panel.
   ========================================================================= */
.rp-card-panel { background: #F0F4FE; padding: 80px 24px; font-family: Mulish, -apple-system, sans-serif; }
.rp-card-panel__inner { max-width: 1200px; margin: 0 auto; }
.rp-card-panel__h { text-align: center; font-size: 35px; line-height: 51px; font-weight: 700; color: #021143; margin: 0 0 12px; }
/* blue continuation rendered on its own line via display:block (NOT a <br> — a <br> makes
   the sentence-case engine capitalise the next segment; Figma keeps it lowercase). */
.rp-card-panel__h .hl { color: #114EF7; display: block; }
.rp-card-panel__sub { text-align: center; font-size: 16px; line-height: 25.6px; color: #696969; max-width: 640px; margin: 0 auto 40px; }

/* one white rounded panel; 1px gaps over a divider-coloured grid bg = hairline lines. */
.rp-card-panel__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: #E5E9F5; border: 1px solid #E5E9F5; border-radius: 20px; overflow: hidden;
  box-shadow: 0 2px 16px rgba(16, 30, 74, .05);
}
.rp-card-panel__cell { background: #fff; padding: 32px; display: flex; flex-direction: column; text-align: start; }
.rp-card-panel__chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; background: #E4EBFE; margin-bottom: 16px; flex: 0 0 auto;
}
/* width+height !important: the icon SVGs have no intrinsic aspect (preserveAspectRatio="none",
   width/height="100%"), so if a later-loaded global img reset flips height to auto (as the RTL
   sheet does on AR), the SVG falls back to its 150px CSS default. Pin both, both directions. */
.rp-card-panel__chip img { width: 24px !important; height: 24px !important; display: block; }
.rp-card-panel__title { font-size: 18px; line-height: 26px; font-weight: 700; color: #021143; margin: 0 0 8px; text-align: start; }
.rp-card-panel__desc { font-size: 14px; line-height: 22px; color: #545454; margin: 0; text-align: start; }

/* RTL: cells/text align to start (right); the grid mirrors automatically under dir=rtl. */
[dir="rtl"] .rp-card-panel__cell,
[dir="rtl"] .rp-card-panel__title,
[dir="rtl"] .rp-card-panel__desc { text-align: right; }

@media (max-width: 991px) {
  .rp-card-panel { padding: 56px 20px; }
  .rp-card-panel__grid { grid-template-columns: 1fr 1fr; }
  .rp-card-panel__h { font-size: 28px; line-height: 36px; }
}
@media (max-width: 560px) {
  .rp-card-panel__grid { grid-template-columns: 1fr; }
}