/* =========================================================================
   .rp-feature-cards — generic asymmetric feature-card grid with illustrations.
   GENERIC, self-contained, block-scoped. Reusable. Figma 11999:239072
   ("Onboard Contractors in 150+ countries"). 5 lavender cards in a 3-col
   grid-template-areas layout — the asymmetry is intentional (not normalized):
     row1: [ doc  doc  flex ]
     row2: [ esig smart flex ]
     row3: [ nda  nda  nda  ]
   ========================================================================= */
.rp-feature-cards { background: #fff; padding: 80px 24px; font-family: Mulish, -apple-system, sans-serif; }
.rp-feature-cards__inner { max-width: 1200px; margin: 0 auto; }
.rp-feature-cards__h { text-align: center; font-size: 40px; line-height: 1.2; font-weight: 700; color: #021143; margin: 0 0 49px; }
.rp-feature-cards__h .hl { color: #114EF7; }

.rp-feature-cards__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  grid-template-areas:
    "doc   doc   flex"
    "esign smart flex"
    "nda   nda   nda";
}
.rp-feature-cards__card { background: #EEF3FF; border-radius: 24px; padding: 32px; overflow: hidden; }
.rp-feature-cards__card--doc   { grid-area: doc;   min-height: 224px; }
.rp-feature-cards__card--flex  { grid-area: flex; }
.rp-feature-cards__card--esign { grid-area: esign; min-height: 369px; }
.rp-feature-cards__card--smart { grid-area: smart; min-height: 369px; }
.rp-feature-cards__card--nda   { grid-area: nda;   min-height: 259px; }

.rp-feature-cards__title { font-size: 24px; line-height: 1.25; font-weight: 700; color: #021143; margin: 0 0 8px; }
.rp-feature-cards__body  { font-size: 16px; line-height: 1.5; color: #5A6378; margin: 0; }
.rp-feature-cards__illo  { display: block; max-width: 100%; height: auto; }

/* Horizontal cards (doc, nda): illustration FULL-BLEED to the card edge (flush top/bottom +
   outer side), only the text is inset — so the card height = the illustration height (Figma
   224 / 259), not illo + doubled padding. */
.rp-feature-cards__card--h { display: flex; align-items: center; gap: 0; padding: 0; }
.rp-feature-cards__card--h .rp-feature-cards__illo { flex: 0 0 auto; display: block; }
.rp-feature-cards__card--h .rp-feature-cards__txt { padding: 32px; flex: 1 1 auto; }
/* NDA: Figma keeps ~16px breathing around its illo (227 illo → 259 card). */
.rp-feature-cards__card--nda { padding: 16px 0; }
/* Vertical-illustration-top (esign, smart): illo on top, text below. (Pixel-exact — unchanged.) */
.rp-feature-cards__card--vtop { display: flex; flex-direction: column; }
.rp-feature-cards__card--vtop .rp-feature-cards__illo { margin: 0 auto 24px; }
.rp-feature-cards__card--vtop .rp-feature-cards__txt { margin-top: auto; }
/* Text-top (flex): heading + body on top (inset), illustration full-bleed to the bottom + sides. */
.rp-feature-cards__card--ttop { display: flex; flex-direction: column; padding: 32px 0 0; }
.rp-feature-cards__card--ttop .rp-feature-cards__txt { padding: 0 32px; }
.rp-feature-cards__card--ttop .rp-feature-cards__illo { width: 100%; margin-top: 16px; }

/* RTL: flip the horizontal cards; lavender grid mirrors automatically. */
[dir="rtl"] .rp-feature-cards__card--h { flex-direction: row-reverse; }
[dir="rtl"] .rp-feature-cards__title,
[dir="rtl"] .rp-feature-cards__body { text-align: right; }

@media (max-width: 991px) {
  .rp-feature-cards { padding: 48px 20px; }
  .rp-feature-cards__grid { grid-template-columns: 1fr; grid-template-areas: "doc" "flex" "esign" "smart" "nda"; }
  .rp-feature-cards__card--doc, .rp-feature-cards__card--esign, .rp-feature-cards__card--smart, .rp-feature-cards__card--nda { min-height: 0; }
  .rp-feature-cards__card--h { flex-direction: column; align-items: stretch; gap: 20px; }
  [dir="rtl"] .rp-feature-cards__card--h { flex-direction: column; }
  .rp-feature-cards__h { font-size: 28px; margin-bottom: 32px; }
}