/* rp-cta — closing CTA band. Scope: .rp-cta
   Reuses Webflow .centred-banner styling (migration.css); thin scoped layer for refinement. */
.rp-cta { padding: 64px 24px; }
.rp-cta .centred-banner { text-align: center; }
.rp-cta .hero-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
/* Subtitle markup carries an erroneous .blue-text class (forces #1E5EFF). The class
   set also says "dim-gray" — the intended colour. Override to the neutral grey.
   CC: remove the .blue-text class from the cor-cta synced pattern subtitle. */
.rp-cta .double-slide-landing-page-left-label.blue-text,
.rp-cta p.blue-text { color: #3F3F3F !important; }

/* ============================================================================
   Contractors CTA — rp-cm-cta. Figma 17699:259757 (desktop) / 15643:20909 (mobile).
   Royal-blue card with a wavy-masked photo + heading / sub / single button. Scoped to
   .rp-cm-cta so other .rp-cta variants are untouched. EN + AR (RTL flips photo/text order).
   NOTE: the gold (#FFC83A) and the wavy mask shape are approximations — get_design_context
   timed out, so refine against Figma if the exact values matter.
   ============================================================================ */
.rp-cm-cta { padding: 48px 24px; }
.rp-cm-cta__card {
  max-width: 1200px;
  margin: 0 auto;
  background-color: #114EF7;
  border-radius: 24px;
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 40px 64px;
  overflow: hidden;
}
.rp-cm-cta__media { flex: 0 0 45%; max-width: 45%; }
/* the photo (imagesss.webp) is pre-masked — the wavy edges + transparency are baked
   into the webp, so no CSS mask is needed; just display it. */
.rp-cm-cta__photo { display: block; width: 100%; height: auto; }
.rp-cm-cta__body { flex: 1 1 auto; }
.rp-cm-cta__title {
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 16px;
}
.rp-cm-cta__accent { color: #FFC83A; }
.rp-cm-cta__sub {
  font-family: Mulish, sans-serif;
  font-size: 20px;
  line-height: 28px;
  color: #ffffff;
  margin: 0 0 32px;
}
.rp-cm-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #021143;
  font-family: Mulish, sans-serif;
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
  padding: 17px 40px;
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s ease;
}
.rp-cm-cta__btn:hover { background: #F0F4FE; }

@media (max-width: 991px) {
  .rp-cm-cta { padding: 32px 16px; }
  .rp-cm-cta__card {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 28px;
    padding: 28px 24px 32px;
    border-radius: 20px;
  }
  .rp-cm-cta__media { flex: none; max-width: 300px; margin: 0 auto; }
  .rp-cm-cta__title { font-size: 28px; line-height: 36px; margin-bottom: 12px; }
  .rp-cm-cta__sub { font-size: 16px; line-height: 24px; margin-bottom: 24px; }
  .rp-cm-cta__btn { width: 100%; }
}

/* ---- multi-page reuse of the contractors CTA card: cor / local-payroll / relocation /
   background-check / apis. Same card; each page keeps its own copy + buttons. ---- */
/* the heading's highlighted word(s) render gold on the blue card (the default
   .highlight-it-blue would be near-invisible on blue) */
.rp-cm-cta__title .highlight-it-blue { color: #FFC83A !important; }
/* button row + a ghost secondary button for CTAs that keep two buttons (e.g. cor) */
.rp-cm-cta__btns { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.rp-cm-cta__btn--ghost {
  background: transparent;
  color: #ffffff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.65);
}
.rp-cm-cta__btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }
@media (max-width: 991px) {
  .rp-cm-cta__btns { flex-direction: column; width: 100%; }
}

/* ============================================================================
   Spend Cards CTA — .rp-spend-cta frame scope. Figma 15924:33867 (card 15924:33869 /
   media 15924:33870 / text 15924:33873 / button). Section scope, NOT a page fork — same
   play as .rp-spend-avoid (feature-split), .rp-spend-howitworks, .rp-spend-integrations.
   Reuses the kit .rp-cm-cta card; overrides only the geometry to Figma's flush-left
   wave-masked media (545px, pre-masked talk_to_an_expert_gm_optimized.webp — the organic
   wave cut-out is baked into the webp transparency, exactly like the kit cm-cta-photo.webp;
   at 545w the asset is naturally 608h = the card height) + a 478px text column, plus the
   button to fixed 255×56 / radius 4 / capitalize (Figma renders "Speak To An Expert").
   Card radius 32 = the Spend big-card language (color-cards + howitworks navy card both 32);
   Figma notes "24 or 32" — FLAGGED for Greg's Figma eyes. EN + AR: the flex row auto-flips
   order in dir=rtl (media → right, text → left), so no explicit RTL rule is needed. */
.rp-spend-cta .rp-cm-cta__btn {
  border-radius: 4px;
  text-transform: capitalize;
}
@media (min-width: 992px) {
  .rp-spend-cta .rp-cm-cta__card {
    padding: 0;
    gap: 44.5px;            /* media right edge 545 → text left x=589.5 */
    align-items: stretch;   /* media column fills the full card height */
    min-height: 608px;
    border-radius: 32px;
  }
  .rp-spend-cta .rp-cm-cta__media { flex: 0 0 545px; max-width: 545px; }
  .rp-spend-cta .rp-cm-cta__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;            /* ratio-matched (545:608 ≈ natural 1635:1824) → no crop */
    object-position: top center;
  }
  .rp-spend-cta .rp-cm-cta__body { flex: 0 0 478px; max-width: 478px; align-self: center; }
  .rp-spend-cta .rp-cm-cta__btns { justify-content: flex-start; }   /* 478 row, single btn left */
  .rp-spend-cta .rp-cm-cta__btn {
    width: 255px;
    height: 56px;
    padding: 16px 24px;
    box-sizing: border-box;
  }
}