/* rp-howitworks — numbered steps. Scope: .rp-howitworks
   Structural layout by CC; Cowork refines to the CoR Figma (illustrations, spacing). */
.rp-howitworks { padding: 72px 24px; }
.rp-hiw__heading {
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 40px; line-height: 1.2; font-weight: 700; color: #0F1035;
  text-align: center; max-width: 760px; margin: 0 auto 48px;
}
.rp-hiw__steps {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1100px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.rp-hiw__step {
  background: #fff; border: 1px solid #E3E8F1; border-radius: 16px; padding: 32px;
  display: flex; flex-direction: column; gap: 16px;
}
.rp-hiw__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: #114EF7; color: #fff; font-size: 22px; font-weight: 700; font-family: Mulish, sans-serif;
}
.rp-hiw__title {
  font-family: Mulish, sans-serif; font-size: 22px; line-height: 1.3; font-weight: 700; color: #0F1035; margin: 0;
}
.rp-hiw__text {
  font-family: Mulish, sans-serif; font-size: 16px; line-height: 1.55; font-weight: 400; color: #2A2A2A; margin: 0;
}
@media (max-width: 991px) { .rp-hiw__steps { grid-template-columns: 1fr; } .rp-hiw__heading { font-size: 28px; } }

/* --navy variant RTL (Spend "How it works"). The flex row + flex step rows
   mirror automatically under dir=rtl (media → right, text → left; icon → right
   of its step). Only the heading alignment + connector side need explicit flips. */
.rp-howitworks--navy .rp-hiw__heading { text-align: right; }
.rp-howitworks--navy .rp-hiw__steps::before { left: auto; right: 18.5px; }