/* ==========================================================================
   Partner Referral / "Refer & Earn" — component CSS (rp-pr-*)
   Figma 13251:64994 (point of truth). Scope: .rp-pr. Presence-gated via
   inc/kadence-partner-referral.php (EN + AR), loaded after migration.css.
   Structural scaffold by CC; Cowork owns visual fidelity. RTL in
   partner-referral-rtl.css.
   Hero tokens (read from THIS page, Text Content 13251:71536):
     H1 Mulish Bold 48/56 #18181b, accent "free!" #114EF7 · sub Mulish Reg
     20/28 #696969 · single "Get Started Today" CTA · art 717px composite +
     award-badge cluster (336x138). Features/pricing render via migration.css
     Webflow classes (hero_double_section_2 / pricing_v2_0) — only light hooks here.
   ========================================================================== */

/* ---------- HERO ---------- */
.rp-pr-hero {
  background: linear-gradient(180deg, #FBFCFF 0%, #EEF2FE 100%);
}
.rp-pr-hero__inner {
  max-width: 1340px;
  margin: 0 auto;
  padding: 72px 24px;
  display: flex;
  align-items: center;
  gap: 48px;
}
/* Text wins the flex fight. Longest H1 line "and get your first month"
   measures 555px @48px Mulish Bold; floor 575 = 555 +20px (playbook) so the
   explicit <br> lines hold (Figma 3-line H1); media shrinks to fill the rest. */
.rp-pr-hero__text { flex: 1 0 575px; max-width: 600px; }
.rp-pr-hero__media { flex: 0 1 700px; min-width: 0; }
.rp-pr-hero__img { display: block; width: 717px; max-width: 100%; height: auto; }

.rp-pr-hero__title {
  font-weight: 700;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: 0;
  color: #18181b;
  margin: 0 0 16px;
}
.rp-pr-hero__accent { color: #114EF7; }

.rp-pr-hero__sub {
  font-size: 20px;
  line-height: 28px;
  color: #696969;
  margin: 0 0 32px;
  max-width: 540px;
}

.rp-pr-hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; }
.rp-pr-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #114EF7;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  line-height: 22px;
  padding: 15px 36px;
  border-radius: 4px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.rp-pr-hero__cta:hover { background: #0E45D6; color: #fff; }

.rp-pr-hero__badges {
  display: block;
  width: 336px;
  max-width: 100%;
  height: auto;
  margin: 36px 0 0;
}

@media (max-width: 991px) {
  .rp-pr-hero__inner { flex-direction: column; text-align: center; padding: 48px 20px; gap: 36px; }
  .rp-pr-hero__text { flex: 0 1 auto; max-width: 100%; }
  .rp-pr-hero__sub { max-width: 100%; }
  .rp-pr-hero__ctas { justify-content: center; }
  .rp-pr-hero__badges { margin-left: auto; margin-right: auto; }
  .rp-pr-hero__img { width: 560px; }
}
@media (max-width: 600px) {
  .rp-pr-hero__title { font-size: 36px; line-height: 44px; }
  .rp-pr-hero__cta { width: 100%; }
}

/* ---------- FEATURES (renders via migration.css; light caps only) ---------- */
.rp-pr-features .double-section-img-side-by-side-img {
  max-width: 540px;
  width: 100%;
  height: auto;
}

/* ---------- PRICING ----------
   Figma 13262:201927: centred 4-across grid of bordered white cards + blue
   buttons. The Webflow pricing_grid_stretch_4 / card-border styles live in the
   pricing-page stylesheet (not loaded on this template), so scope the layout here. */
.rp-pr-pricing .max-width-1300px { max-width: 1300px; margin: 0 auto; padding: 0 24px; }
.rp-pr-pricing .pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
}
.rp-pr-pricing .pricing-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #fff;
  border: 1px solid #E6E8F0;
  border-radius: 12px;
  padding: 24px;
}
.rp-pr-pricing .pricing_additional_services_flex .pricing-col {
  flex-direction: row;
  align-items: center;
  gap: 24px;
  max-width: 720px;
  margin: 24px auto 0;
}
/* Buttons: solid blue by default (EoR card), outline-blue variant for the rest.
   migration.css .dark-green-btn wins on specificity/!important, so force the
   Figma blue with !important under the page scope. */
.rp-pr-pricing .pricing-col .btn.pricing {
  background: #114EF7 !important;
  color: #fff !important;
  border: 1px solid #114EF7 !important;
  border-radius: 8px !important;
}
.rp-pr-pricing .pricing-col .btn.pricing:hover { background: #0E45D6 !important; border-color: #0E45D6 !important; color: #fff !important; }
.rp-pr-pricing .pricing-col .btn.pricing.outline-blue-btn {
  background: #fff !important;
  color: #114EF7 !important;
  border: 1px solid #C7D6FB !important;
}
.rp-pr-pricing .pricing-col .btn.pricing.outline-blue-btn:hover { background: #F0F4FE !important; color: #114EF7 !important; border-color: #114EF7 !important; }

@media (max-width: 991px) {
  .rp-pr-pricing .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .rp-pr-pricing .pricing_additional_services_flex .pricing-col { flex-direction: column; align-items: stretch; }
}
@media (max-width: 600px) {
  .rp-pr-pricing .pricing-grid { grid-template-columns: 1fr; }
}