/* rp-intro — pain-point value section. Scope: .rp-intro
   QA'd to CoR Figma node 16303:98677 (section 1440x518; container pad 80;
   3 cards 378.67x198, 32px gap; icon 36; text 318/16-24). */
.rp-intro.rp-section { padding: 80px 24px; text-align: center; }
.rp-intro .rp-intro__heading {
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 32px; line-height: 40px; font-weight: 700; color: #021143;
  max-width: 720px; margin: 0 auto 64px;
  /* Stay centered even when page-scoped .new-rp-section-header rules force margin:0 */
  text-align: center !important; margin-left: auto !important; margin-right: auto !important;
}
/* Contractors page forces .new-rp-section-header to 3rem; keep the Figma 40/48 here too */
body.page-template-page-contractors .rp-intro__heading { font-size: 32px; line-height: 40px; }
.rp-intro__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  max-width: 1200px; margin: 0 auto;
}
/* White cards + rounded-square red X icon — matches the standard "RP Pain Points (3-up)". */
.rp-intro__item {
  background: #FFFFFF; border: 1px solid #ECEFF3; border-radius: 16px; padding: 32px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 24px; text-align: left;
}
.rp-intro__x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: #FCEAEA; color: #DE2626; font-size: 18px; font-weight: 700; flex: 0 0 auto;
}
.rp-intro__text {
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 16px; line-height: 24px; font-weight: 400; color: #2A2A2A; margin: 0;
}
@media (max-width: 991px) {
  .rp-intro.rp-section { padding: 56px 20px; }
  .rp-intro__grid { grid-template-columns: 1fr; gap: 16px; }
  .rp-intro .rp-intro__heading { font-size: 28px; line-height: 36px; margin-bottom: 40px; }
}

/* ── .rp-lp-pain (Local Payroll, Figma 16779:23032) — frame-scoped tuning of the shared
   .rp-intro to the LP redesign: heading 35/51 (matches the LP section-header scale used by
   the features section), a centered sub-paragraph between heading and grid (kit intro has
   none), grid gap 16 + card padding 24/24/40. Card text/icon/radius already match the kit. */
.rp-lp-pain .rp-intro__heading { font-size: 35px; line-height: 51px; margin-bottom: 12px; }
/* Force the blue span onto its own (first) line WITHOUT a <br> — a <br> would make the
   sentence-case engine capitalise the following "just" (Figma keeps it lowercase). */
.rp-lp-pain .rp-intro__heading .highlight-it-blue { display: block; }
.rp-lp-pain__sub {
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 16px; line-height: 24px; color: #696969;
  text-align: center; max-width: 640px; margin: 0 auto 48px;
}
.rp-lp-pain .rp-intro__grid { gap: 16px; max-width: 1252px; }  /* LP content width (= features), cards land 407 */
.rp-lp-pain .rp-intro__item { padding: 24px 24px 40px; }
@media (max-width: 991px) {
  .rp-lp-pain .rp-intro__heading { font-size: 28px; line-height: 36px; margin-bottom: 12px; }
  .rp-lp-pain__sub { margin-bottom: 32px; }
}
/* B-S8: Spend "Managing expenses…" heading wrapped to 4 lines at the shared
   28/36 mobile scale. Drop to 22/30 (Spend-pain scoped) so the "shouldn't be
   this complicated" clause fits one line → 3 lines total. */
@media (max-width: 767px) {
  .rp-spend-pain .rp-intro__heading { font-size: 22px; line-height: 30px; }
}
/* RTL: sub stays centered; card body flips to start (right). */
[dir="rtl"] .rp-lp-pain .rp-intro__item { text-align: right; }

/* ── .rp-spend-pain (Spend Cards, Figma 15916:13214 "Managing expenses…") — frame-scoped
   tuning of .rp-intro: heading 35/51 (#2A2A2A base, blue .hl) on its own first line via
   display:block (no <br>); cards radius 8 + text 20/26 #08080D (vs the kit 16/24); icon is
   the kit pink-box ✕ (x-icon-red.svg = the same #FCEAEA/#DE2626). No sub-paragraph. Lifted
   from spend-inline-legacy.css (the bundled rp-spend-features pain rules) on migration. */
.rp-spend-pain .rp-intro__heading { font-size: 35px; line-height: 51px; color: #2A2A2A; margin: 0 auto 40px; }
.rp-spend-pain .rp-intro__heading .hl { display: block; color: #114EF7; }
.rp-spend-pain .rp-intro__grid { gap: 16px; max-width: 1224px; }  /* cards land ~396 (3-col) */
/* !important + the .rp-spend-pain prefix (0,2,0!) beats the custom_css "rp-intro-standard"
   rules `.rp-intro__item{border-radius:16px!important}` + `.rp-intro__text{16px!important}` (0,1,0!). */
.rp-spend-pain .rp-intro__item { padding: 24px 24px 40px; border-radius: 8px !important; }
.rp-spend-pain .rp-intro__text { font-size: 20px !important; line-height: 26px !important; color: #08080D !important; }
@media (max-width: 991px) {
  .rp-spend-pain .rp-intro__heading { font-size: 28px; line-height: 36px; }
}
[dir="rtl"] .rp-spend-pain .rp-intro__item { text-align: right; }

/* ── .rp-intro--bullets (EOR §1.2 pain, Figma 15233:19428) — new modifier turning the
   centered card-grid into a 2-col SPLIT: media (flags illustration) left, heading + lead +
   lead-in + a vertical checklist (title + body per item) right. Scoped to .rp-eor-pain so it
   never affects the base .rp-intro pages. Markup: parts/eor-pain.html. The §1.2 checklist
   uses __bullet/__bullettext (NOT __item/__text), so the custom_css "rp-intro-standard"
   !important rules on __item/__text don't apply here. */
.rp-intro.rp-intro--bullets.rp-section {
  display: flex; gap: 64px; align-items: center; text-align: left;
  max-width: 1252px; margin: 0 auto;
}
.rp-eor-pain .rp-intro__media { flex: 0 0 500px; max-width: 500px; }
.rp-eor-pain .rp-intro__media img { width: 100%; height: auto; display: block; }
.rp-eor-pain .rp-intro__col { flex: 1 1 auto; min-width: 0; }
/* Override the centered base heading (text-align:center!important + margin auto!important).
   The base `.rp-intro .rp-intro__heading` is (0,2,0)!important and gets inlined as critical
   CSS, so this override carries TWO scope classes (.rp-intro--bullets.rp-eor-pain → 0,3,0!important)
   to win regardless of source order. */
.rp-intro--bullets.rp-eor-pain .rp-intro__heading {
  text-align: left !important; margin: 0 0 16px 0 !important;
  max-width: 560px; font-size: 40px; line-height: 48px;
}
.rp-eor-pain .rp-intro__lead {
  font-family: Mulish, -apple-system, sans-serif; font-size: 16px; line-height: 24px;
  color: #696969; max-width: 600px; margin: 0 0 24px;
}
.rp-eor-pain .rp-intro__leadin {
  font-family: Mulish, -apple-system, sans-serif; font-size: 16px; line-height: 24px;
  font-weight: 700; color: #021143; margin: 0 0 24px;
}
.rp-eor-pain .rp-intro__bullets {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px;
}
.rp-eor-pain .rp-intro__bullet { display: flex; gap: 16px; align-items: flex-start; }
.rp-eor-pain .rp-intro__check {
  /* Match Figma 15233:19442 — thin blue check, NO box (was a #EAF0FE rounded box; QA R1). */
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; color: #114EF7;
  font-size: 20px; font-weight: 700; line-height: 1; margin-top: 2px;
}
.rp-eor-pain .rp-intro__bullettext { display: flex; flex-direction: column; gap: 2px; }
.rp-eor-pain .rp-intro__bullettitle {
  font-family: Mulish, -apple-system, sans-serif; font-weight: 700;
  font-size: 18px; line-height: 26px; color: #021143;
}
.rp-eor-pain .rp-intro__bulletbody {
  font-family: Mulish, -apple-system, sans-serif; font-weight: 400;
  font-size: 16px; line-height: 24px; color: #696969;
}
@media (max-width: 991px) {
  .rp-intro.rp-intro--bullets.rp-section { flex-direction: column; gap: 32px; align-items: stretch; }
  .rp-eor-pain .rp-intro__media { flex-basis: auto; max-width: 360px; margin: 0 auto; }
  .rp-eor-pain .rp-intro__heading { font-size: 28px; line-height: 36px; }
}
/* RTL: swap columns (media right) + start-align text (precedent: .rp-lp-pain above). */
[dir="rtl"] .rp-intro.rp-intro--bullets.rp-section { flex-direction: row-reverse; }
[dir="rtl"] .rp-eor-pain .rp-intro__heading { text-align: right !important; }
[dir="rtl"] .rp-eor-pain .rp-intro__lead,
[dir="rtl"] .rp-eor-pain .rp-intro__leadin,
[dir="rtl"] .rp-eor-pain .rp-intro__bullettext { text-align: right; }
/* NOTE 2026-07-02: removed a corrupt truncated fragment here (`@media (max-width:991px){ [dir="rtl"`
   with no selector body or closing brace) that had shipped in HEAD — it left the stylesheet with an
   unbalanced brace, so the browser dropped EVERY rule below it (the whole .rp-eor-pain grid), and
   product-hero.css's duplicate grid rules drove the layout instead. That's why the earlier ≤991
   pain-stack fix silently did nothing on staging. */
/* ── .rp-eor-pain 2×2 GRID (EOR §1.2, Figma 15233:19428) — QA content-audit relayout 2026-07-02.
   Row1: heading (left 500) | lead+lead-in (right 660). Row2: illustration (left) | checklist (right).
   Supersedes the old .rp-intro--bullets split (markup dropped that class, so those rules are inert). */
.rp-eor-pain.rp-section {
  display: grid !important;
  grid-template-columns: 500px minmax(0, 660px);
  grid-template-rows: auto auto;
  column-gap: 40px; row-gap: 64px;
  max-width: 1200px; margin: 0 auto; text-align: left;
  align-items: start; padding: 80px 24px;
}
.rp-eor-pain .rp-eor-pain__head { grid-column: 1; grid-row: 1; }
.rp-eor-pain .rp-eor-pain__intro { grid-column: 2; grid-row: 1; }
.rp-eor-pain .rp-intro__media { grid-column: 1; grid-row: 2; max-width: 500px; flex: none; }
.rp-eor-pain .rp-eor-pain__list { grid-column: 2; grid-row: 2; }
.rp-eor-pain .rp-intro__media img { width: 100%; height: auto; display: block; }
.rp-eor-pain .rp-intro__heading {
  font-size: 40px !important; line-height: 48px !important; font-weight: 700; color: #021143;
  margin: 0 !important; text-align: left !important; max-width: 520px;
}
.rp-eor-pain .rp-intro__heading .highlight-it-blue { color: #114EF7 !important; }
.rp-eor-pain .rp-intro__lead { font-family: Mulish, sans-serif; font-size: 16px; line-height: 24px; color: #696969; margin: 0 0 16px; max-width: 600px; }
.rp-eor-pain .rp-intro__leadin { font-family: Mulish, sans-serif; font-size: 16px; line-height: 24px; font-weight: 700; color: #021143; margin: 0; }
@media (max-width: 991px) {
  .rp-eor-pain.rp-section { grid-template-columns: 1fr; row-gap: 32px; }
  .rp-eor-pain .rp-eor-pain__head, .rp-eor-pain .rp-eor-pain__intro,
  .rp-eor-pain .rp-intro__media, .rp-eor-pain .rp-eor-pain__list { grid-column: 1; }
  .rp-eor-pain .rp-intro__heading { font-size: 28px !important; line-height: 36px !important; }
}
[dir="rtl"] .rp-eor-pain .rp-intro__heading { text-align: right !important; }
/* A5 (QA R1, AR): the pain heading kept text-align:left in RTL because the grid rule's
   `.rp-eor-pain .rp-intro__heading{text-align:left!important}` (0,2,0) tied/beat the plain
   `[dir=rtl]` override in the cascade. Out-specify with html[dir=rtl]+body scope (0,4,0),
   RTL-only so LTR is untouched. */
html[dir="rtl"] body.page-template-page-eor .rp-eor-pain .rp-intro__heading { text-align: right !important; }
/* escalate: a later same-specificity rule kept display:block — pin the grid with body scope. 2026-07-02 */
body.page-template-page-eor .rp-intro.rp-eor-pain.rp-section {
  display: grid !important;
  grid-template-columns: 500px minmax(0, 660px) !important;
  grid-template-rows: auto auto !important;
  column-gap: 40px !important; row-gap: 64px !important;
  max-width: 1200px !important; margin: 0 auto !important; align-items: start !important;
}
/* RESPONSIVE FIX (2026-07-02, QA R1 M3/AM1): the body-scoped !important grid above had NO mobile
   override, so at ≤991px it kept the 2-col track AND the children kept their explicit grid-row
   (head+intro both row1, media+list both row2) → text/image OVERLAP on EN + AR mobile/tablet.
   Switch the container to FLEX-COLUMN at ≤991: flex ignores the children's grid-row/grid-column
   entirely, so the 4 blocks stack in source order (head → intro → media → list) with no
   grid-placement to fight. (Resetting grid-row on the children didn't win the cascade in practice.) */
@media (max-width: 991px) {
  /* specificity bumped with html + .rp-container (0,6,2) to beat the stack of equal-specificity
     `display:grid !important` / child `grid-row !important` rules across intro.css + product-hero.css
     (both 0,4,1) — source-order ties across those files weren't resolving reliably. Flex container +
     out-specifying wins definitively; flex also makes the children's grid-row/grid-column inert. */
  html body.page-template-page-eor .rp-intro.rp-eor-pain.rp-section.rp-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    padding: 48px 20px !important;
    max-width: 100% !important;
  }
  html body.page-template-page-eor .rp-eor-pain.rp-section .rp-eor-pain__head,
  html body.page-template-page-eor .rp-eor-pain.rp-section .rp-eor-pain__intro,
  html body.page-template-page-eor .rp-eor-pain.rp-section .rp-eor-pain__list {
    width: 100% !important; max-width: 100% !important;
  }
  html body.page-template-page-eor .rp-eor-pain.rp-section .rp-intro__media {
    max-width: 360px !important; margin: 0 auto !important; flex: none !important;
  }
}