/* ==========================================================================
   Bill Pay — Hero (rp-bill-pay-hero) · Figma 9989:3107 / Text 9989:3108
   Scope: .rp-bill-pay-hero. Structural scaffold by CC; Cowork owns visual fidelity.
   Hero scaffold (playbook): text column gets a flex floor so the sub (the wrap
   driver — H1 "Bill Pay" is short) lays out to Figma's 2 lines and the text col
   never loses the flex fight to the fixed-width art column.
   Tokens read from THIS page: H1 Mulish Bold 64/80 tracking -2px #021143 (single
   colour, NO accent) · sub Mulish Reg 20/28 #696969 · 2 CTAs · art 736px window.
   ========================================================================== */
.rp-bill-pay-hero {
  background: linear-gradient(180deg, #FBFCFF 0%, #EAF0FE 100%);
}
.rp-bill-pay-hero__inner {
  max-width: 1340px;
  margin: 0 auto;
  padding: 72px 24px;
  display: flex;
  align-items: center;
  gap: 48px;
}
/* Text wins the flex fight. Floor 520px; max 562 = Figma text width (the sub
   "Simplify account payables and automate your approval workflows…" wraps to the
   Figma 2 lines at 562). H1 "Bill Pay" is short and never drives the wrap. */
.rp-bill-pay-hero__text { flex: 1 0 520px; max-width: 562px; }
.rp-bill-pay-hero__media { flex: 0 1 700px; min-width: 0; }
.rp-bill-pay-hero__img { display: block; width: 736px; max-width: 100%; height: auto; }

.rp-bill-pay-hero__title {
  font-weight: 700;
  font-size: 64px;
  line-height: 80px;
  letter-spacing: -2px;
  color: #021143;
  margin: 0 0 8px;
}

.rp-bill-pay-hero__sub {
  font-size: 20px;
  line-height: 28px;
  color: #696969;
  margin: 0 0 40px;
}

.rp-bill-pay-hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; }
.rp-bill-pay-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 28px;
  border-radius: 4px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.rp-bill-pay-hero__cta:hover { background: #0E45D6; color: #fff; }
.rp-bill-pay-hero__cta--ghost {
  background: #fff;
  color: #114EF7;
  border: 1px solid #D6E0FB;
}
.rp-bill-pay-hero__cta--ghost:hover { background: #F0F4FE; color: #114EF7; }

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