/* Shared product-hero refinements (cor / contractors / relocation / ai / spend).
   Overrides frozen migration.min rules at the COMPONENT level — no per-page forks. */

/* X11 desktop media-column width → Figma 610 (was .double-section-hero-container-right
   flex 0 0 41.6667% + max-width 550px = 522). Doubled class beats the frozen (0,1,0) rule.
   Reset to full-width when the hero stacks (≤991) so it never overflows mobile. */
/* (0,3,0)+!important beats the 5/7-layout rule
   `.double-section-hero-container.width-flex-5-7 .double-section-hero-container-right{41.6667%}`
   (in qa-fixes-global + duplicated inline in custom_css #7797) AND the default layout. */
.double-section-hero-container .double-section-hero-container-right.double-section-hero-container-right {
  flex: 0 0 610px !important;
  max-width: 610px !important;
}
@media (max-width: 991px) {
  .double-section-hero-container .double-section-hero-container-right.double-section-hero-container-right {
    flex: 0 0 auto !important;
    max-width: 100% !important;
  }
}

/* D — RTL text column. EN's left (text) column is content-driven (flex 0 1 auto)
   and the English copy happens to fill ≈ 626. The Arabic copy is naturally
   narrower (max-content 514), and RTL also injects a 32px column-gap (EN has 0),
   so with grow:0 the column collapses to 514 and leaves dead space. Let the RTL
   column GROW to fill its row share (= container − media 610), and zero the
   anomalous RTL gap so it lands at EN's width. Desktop-only (≥992); the stacked
   mobile layout keeps the normal column flow below. The columns are w-col-6
   (50/50); EN's 626 is effectively half the 1252 container, so pin the RTL text
   column to 50% (responsive, lands on EN's 626) rather than grow-filling to the
   642 remainder. Zero the anomalous RTL gap so it matches EN's spacing. */
@media (min-width: 992px) {
  [dir="rtl"] .double-section-hero-container .double-section-hero-container-left {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  [dir="rtl"] .double-section-hero-container {
    column-gap: 0 !important;
  }
}

/* ── Per-page hero H1 size (the #rp-typo opt-out beats migration's frozen 54px cap).
   Sizes differ per page, so each is body-template-scoped here — NOT a `.rp-contractors`
   restyle of the shared hero. Contractors redesign 11999:238702 → 64/80, tracking -2px,
   navy #021143 (blue split via .highlight-it-blue). No mobile Figma frame exists, so the
   ≤767 size is responsive-proportional (36/44). */
body.page-template-page-contractors #rp-typo.double-slide-landing-page-left-main-header {
  font-size: 64px !important;
  line-height: 80px !important;
  letter-spacing: -2px !important;
  color: #021143 !important;
}
@media (max-width: 767px) {
  body.page-template-page-contractors #rp-typo.double-slide-landing-page-left-main-header {
    font-size: 36px !important;
    line-height: 44px !important;
    letter-spacing: -1px !important;
  }
}
/* Local Payroll (frame 16779:23032) → 54/62, tracking -2px (matches the pre-migration
   lp-hero render, which was Figma-matched). Migrated to product-hero 2026-06-27. */
body.page-template-page-local-payroll #rp-typo.double-slide-landing-page-left-main-header {
  font-size: 54px !important;
  line-height: 62px !important;
  letter-spacing: -2px !important;
  color: #021143 !important;
}
@media (max-width: 767px) {
  body.page-template-page-local-payroll #rp-typo.double-slide-landing-page-left-main-header {
    font-size: 32px !important;
    line-height: 40px !important;
    letter-spacing: -1px !important;
  }
}
/* Spend Cards (frame 15916:13214) → 44/56, tracking -2px, #18181B. From the page's
   documented hero spec (the inline-DB style targeting Figma); the pre-migration bespoke
   hero wrongly rendered 54 because a legacy rule beat that spec. Migrated 2026-06-28.
   (H1 size flagged for Figma confirm — 44/56 is the documented value, not 54.) */
body.page-template-page-spend #rp-typo.double-slide-landing-page-left-main-header {
  font-size: 44px !important;
  line-height: 56px !important;
  letter-spacing: -2px !important;
  color: #18181B !important;
}
@media (max-width: 767px) {
  body.page-template-page-spend #rp-typo.double-slide-landing-page-left-main-header {
    font-size: 30px !important;
    line-height: 38px !important;
    letter-spacing: -1px !important;
  }
}
/* Spend hero media framing (r40, Figma 15916:13214) — 2026-06-30. The hero illustration
   (spend-hero-dashboard.webp = canon-cropped tablet + Mark-Williams card) must bleed toward the
   right page edge (canon media right ≈1419) and run a touch larger than the shared 610 column;
   widening the spend media column to 700 also narrows the text column so the H1 wraps to canon's
   3 lines, and the more compact (top-padding-free) crop lifts the text column ~63px to canon's y.
   (0,4,0)+!important beats the shared 610 rule above. Gated ≥1200 so the 992–1199 range keeps the
   proven 610 layout (a 700 media would crush the text column there); ≤991 stacks full-width. */
@media (min-width: 1200px) {
  body.page-template-page-spend .double-section-hero-container .double-section-hero-container-right.double-section-hero-container-right {
    /* GO-LIVE 2026-07-14 (designer QA): "hero image oversized → mirror Local-Payroll".
       Was 700px + right-bleed (prior Spend-canon build); dropped to the LP 610px so the
       hero matches the LP reference. Flag: re-confirm against the current Spend Figma frame. */
    flex: 0 0 610px !important;
    max-width: 610px !important;
  }
  /* let the media overflow the container's right edge toward the page edge (canon bleeds to ≈1419,
     21px shy of 1440 → no horizontal scroll). Scoped to spend so no other hero is affected. */
  body.page-template-page-spend .double-section-hero-container { overflow: visible !important; }
  body.page-template-page-spend .double-section-hero-container-right {
    overflow: visible !important;
    position: relative;
  }
  body.page-template-page-spend .double-section-hero-container-right .main-hero-section-img {
    width: 610px !important; /* GO-LIVE: mirror LP 610 (was 700 + right-bleed) */
    max-width: 100% !important;
    position: relative;
    right: 0; /* drop the right-bleed so the hero sits contained like Local-Payroll */
  }
  /* RTL mirror — the media sits on the LEFT in AR, so bleed toward the LEFT page edge instead.
     `right` is a physical property, so override it (else the AR tablet shifts toward centre). */
  [dir="rtl"] body.page-template-page-spend .double-section-hero-container-right .main-hero-section-img {
    right: auto; /* drop the physical right-shift; the RTL layout already seats the media's left bleed */
    left: 0;
  }
}
/* EOR canonical (frame 15233:19425 / hero node 15241:25611 / H1 node 15241:25636) → 64/72,
   tracking -2px, navy #021143 (blue split via .highlight-it-blue → #114EF7). Re-tune from
   the migration default ~54px to the canonical Latin/Headlines/Bold/H1 token. Inline two-tone
   span (NOT own-line `.hl` pattern). Mobile responsive-proportional 36/44 until a mobile
   Figma frame is pulled. EOR rebuild §1 hero — 2026-06-29. */
body.page-template-page-eor #rp-typo.double-slide-landing-page-left-main-header {
  font-size: 64px !important;
  line-height: 72px !important;
  letter-spacing: 0 !important; /* canonical Latin/Headlines/Bold/H1 token = ls 0 (was -2; Cowork 2026-06-29) */
  color: #021143 !important;
}
/* Figma parity 2026-06-29: canonical H1 is 2 lines — blue "Expand your team worldwide" (line 1) /
   navy "with our Employer of Record" (line 2). Live flowed to 3 lines because the blue phrase
   sat ~mid-line-2. Force the blue tone onto its own non-wrapping line so the split matches Figma. */
body.page-template-page-eor #rp-typo.double-slide-landing-page-left-main-header .highlight-it-blue {
  display: block;
}
/* nowrap ONLY on desktop (forces the canonical 2-line Figma split). Below 992 the blue phrase
   must wrap, else "Expand your team worldwide" (64px) overflows and clips at tablet/mobile.
   QA responsive pass 2026-07-02. */
@media (min-width: 992px) {
  body.page-template-page-eor #rp-typo.double-slide-landing-page-left-main-header .highlight-it-blue {
    white-space: nowrap;
  }
}
/* Tablet (768–991): scale the 64px H1 down so it fits the viewport without clipping. */
@media (min-width: 768px) and (max-width: 991px) {
  body.page-template-page-eor #rp-typo.double-slide-landing-page-left-main-header {
    font-size: 48px !important;
    line-height: 56px !important;
    letter-spacing: 0 !important;
  }
}
@media (max-width: 767px) {
  body.page-template-page-eor #rp-typo.double-slide-landing-page-left-main-header {
    font-size: 36px !important;
    line-height: 44px !important;
    letter-spacing: 0 !important; /* match canonical ls 0 (was -1; Cowork 2026-06-29) */
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   EOR canonical CENTRED hero (Figma 15233:19425 / hero node 15241:25611).
   Flips the shared 2-column product-hero into a single centred 934-wide column
   with a world-map globe behind + 6 floating avatar bubbles. Scoped to /eor only
   (body.page-template-page-eor) — no fork of the shared shortcode/part. The deco
   markup is emitted by rp_eor_hero_deco() in inc/hero-content-bindings.php.
   EOR rebuild §1.1 hero centred-flip — 2026-06-29.
   ════════════════════════════════════════════════════════════════════════════ */

/* Hero wrapper: positioning context for the deco layer + clip avatars that sit
   near the 1440-frame edges so they never trigger horizontal scroll. */
body.page-template-page-eor .new_rp_hero_double_section.rp-hero-embedded {
  position: relative;
  overflow: hidden;
}

/* Desktop (≥992): centre the row, retire the right (image) column, and pin the
   text column to the canonical 934 width, centred. */
@media (min-width: 992px) {
  body.page-template-page-eor .double-section-hero-container {
    justify-content: center;
    position: relative;
    z-index: 1; /* above the globe/avatar deco (z-index 0) */
  }
  body.page-template-page-eor .double-section-hero-container .double-section-hero-container-right.double-section-hero-container-right {
    display: none !important; /* image retired — globe+avatars replace it */
  }
  body.page-template-page-eor .double-section-hero-container-left.double-section-hero-container-left {
    flex: 0 1 934px !important;
    max-width: 934px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
  }
  body.page-template-page-eor .double-slide-lleft-container {
    align-items: center;
    text-align: center;
  }
}

/* Rating pills row centred (both pills kept — canonical). */
body.page-template-page-eor .g2_header_tags_container-hero .g2_header_tags_container {
  justify-content: center;
}

/* Lead-in: repurpose the eyebrow slot as a 40/48 navy Bold heading — strip the
   pill chrome (background/border/padding) so it reads as a heading, not a tag. */
body.page-template-page-eor .rp-hero-eyebrow {
  text-align: center;
}
body.page-template-page-eor .rp-hero-eyebrow .rp-hero-eyebrow__pill {
  display: inline;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  font-family: "Mulish", sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  color: #021143;
}

/* Sub: Mulish Regular 20/28 #696969, max-width 636, centred. */
body.page-template-page-eor .double-slide-landing-page-left-label {
  max-width: 636px;
  margin-left: auto;
  margin-right: auto;
  color: #696969;
  font-size: 20px;
  line-height: 28px;
  text-align: center;
}

/* CTA row centred. */
body.page-template-page-eor .hero-btns {
  justify-content: center;
}

/* ── Decoration layer: globe behind + 6 floating avatars (desktop only) ──
   The mobile hero is text-only, so the deco is hidden ≤991. */
body.page-template-page-eor .rp-eor-herodeco { display: none; }
@media (min-width: 992px) {
  body.page-template-page-eor .rp-eor-herodeco {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none; /* never intercept CTA clicks */
  }
  /* World-map globe (Group 427322263) = two faint dashed CONCENTRIC rings on the hero
     bg, NOT a filled image. The exported hero-globe.png baked in an opaque light-blue
     fill (slightly off #e4ebfe) that only covered the centre → read as a tinted block.
     Render the decoration as transparent CSS rings instead so the hero bg stays uniform.
     Cowork 2026-06-29 (replaces the opaque raster). */
  body.page-template-page-eor .rp-eor-herodeco__globe { display: none; }
  body.page-template-page-eor .rp-eor-herodeco::before,
  body.page-template-page-eor .rp-eor-herodeco::after {
    content: "";
    position: absolute;
    left: 50%;
    border-radius: 50%;
    border: 1.5px dashed rgba(120, 140, 200, 0.28);
    transform: translateX(-50%);
    pointer-events: none;
  }
  body.page-template-page-eor .rp-eor-herodeco::after  { width: 1378px; height: 1378px; top: -200px; } /* outer ring (Oval Copy 5) */
  body.page-template-page-eor .rp-eor-herodeco::before { width: 1174px; height: 1174px; top: -98px; }  /* inner ring (Oval Copy 4) */
  /* Avatar bubbles: --x/--y are the element's left/top within the 1440 frame,
     mapped onto a centred 1440 box (50% − 720 + x). */
  body.page-template-page-eor .rp-eor-herodeco__avatar {
    position: absolute;
    left: calc(50% - 720px + var(--x));
    top: var(--y);
    max-width: none;
    height: auto;
  }
  /* Finished tile composites re-exported from Figma "Hero elements 0N" at 3x (D1, 2026-07-11):
     each PNG is the complete two-tone rounded tile + cover-cropped person + flag badge baked in
     (was previously a cutout+blob that read as "not seated"). Files are 287–343px wide; pin
     display width to the Figma tile size (height:auto keeps aspect) so layout is unchanged while
     the render stays crisp on 2x/3x displays. src carries ?v=3 to bust the CDN on same-filename swap. */
  body.page-template-page-eor .rp-eor-herodeco__avatar--1 { width: 96px; }
  body.page-template-page-eor .rp-eor-herodeco__avatar--2 { width: 101px; }
  body.page-template-page-eor .rp-eor-herodeco__avatar--3 { width: 115px; }
  body.page-template-page-eor .rp-eor-herodeco__avatar--4 { width: 105px; }
  body.page-template-page-eor .rp-eor-herodeco__avatar--5 { width: 96px; }
  body.page-template-page-eor .rp-eor-herodeco__avatar--6 { width: 107px; }
  /* QA R2 (2026-07-09, Greg D1/D2): the 180px brands clearance below pushed the embedded "Trusted by"
     bar to docTop ~847 — it fell below the fold on a 1440x800 laptop and left a ~469px dead gap under
     the CTA, which also made the avatar bubbles read as "not seated" against the top-loaded content.
     Fix: reseat the mid + bottom avatar rows higher so they still frame the (unchanged) centred
     content, and drop the clearance. The bar now lands at docTop ~699 — above the fold at 1440x800
     (verified via injection on staging) with a 63px gap clear of the lowest avatar. The avatar
     inline --x/--y stay at their Figma-frame reference values; this ≥992 layer applies the vertical
     compression only (top-only overrides → RTL-safe, mobile deco is hidden ≤991 so it's untouched). */
  body.page-template-page-eor .rp-eor-herodeco__avatar--1,
  body.page-template-page-eor .rp-eor-herodeco__avatar--3 { top: 300px !important; } /* mid row  (was --y 363) */
  body.page-template-page-eor .rp-eor-herodeco__avatar--2,
  body.page-template-page-eor .rp-eor-herodeco__avatar--5 { top: 448px !important; } /* bottom row (was --y 621) */
  body.page-template-page-eor .rp-hero-brands { margin-top: 32px; }
}

/* ── AR (RTL) hero — header, subhead, and eyebrow must be right-aligned (start), not
   centered (Mohamed). Shared across every product-hero AR page; LTR is unaffected. */
[dir="rtl"] .hero_double_section .double-slide-lleft-container,
[dir="rtl"] .hero_double_section .double-slide-landing-page-left-main-header,
[dir="rtl"] .hero_double_section .double-slide-landing-page-left-label,
[dir="rtl"] .hero_double_section .rp-hero-eyebrow {
  text-align: right !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   WHY REMOTEPASS hero — media-below navy variant (Figma RP:Resources 1776:59928 /
   hero node 1776:57730). Flat navy section; left-aligned text block on top; full-width
   dashboard tile (all corners #021143) below, edge-free. Reuses the shared product-hero
   sub-shortcodes via the media-below branch in hero-content-bindings.php — a real variant,
   not bespoke markup. EOR-style tile bg-match: tile #021143 == section #021143.
   ════════════════════════════════════════════════════════════════════════════ */
/* Flat navy fill — (0,2,0) beats migration's `.new_rp_hero_double_section_bg` (0,1,0); also kill
   any gradient background-image the base bg class carries. No `_blured` overlay in media-below. */
.new_rp_hero_double_section.rp-hero--navy { background: #021143 !important; background-image: none !important; }
.rp-hero-mb-wrap .rp-container { padding: 72px 24px 0; }
.rp-hero-mb { display: flex; flex-direction: column; gap: 48px; max-width: 1240px; margin: 0 auto; }
.rp-hero-mb__text { max-width: 720px; }
.rp-hero-mb__media { width: 100%; }
.rp-hero-mb__media .main-hero-section-img { width: 100%; height: auto; display: block; }
/* H1: Mulish Bold 57.7 / -2.6px tracking, WHITE, left. id-specificity beats migration's 54px cap. */
body.page-template-page-why-remotepass #rp-typo.double-slide-landing-page-left-main-header {
  font-size: 57.7px !important;
  line-height: 1.05 !important;
  letter-spacing: -2.6px !important;
  color: #ffffff !important;
  text-align: left;
  margin: 0 0 16px;
}
/* Subtitle: white ~19.5px; .hl forces the canonical 2-line wrap (no <br>, so sentence-case sees one sentence). */
.rp-hero--navy .double-slide-landing-page-left-label { color: #ffffff !important; font-size: 19.5px; line-height: 1.4; margin: 0 0 32px; }
.rp-hero-mb__text .hl { display: block; }
/* CTA: blue #114ef7 pill, white, Mulish Medium 16.3, rounded 4, padding 15/69 (Figma). */
.rp-hero-mb__text .btn { background: #114ef7; color: #fff; border-radius: 4px; font-size: 16.3px; font-weight: 500; padding: 15px 69px; }
.rp-hero-mb__text .btn:hover { background: #0d3fd0; color: #fff; }
@media (max-width: 991px) {
  body.page-template-page-why-remotepass #rp-typo.double-slide-landing-page-left-main-header { font-size: 40px !important; letter-spacing: -1.5px !important; }
  .rp-hero-mb-wrap .rp-container { padding-top: 48px; }
  .rp-hero-mb { gap: 32px; }
  .rp-hero-mb__text .btn { padding: 14px 40px; }
}
/* RTL: text block right-aligned (mirrors the shared hero RTL rule). */
[dir="rtl"] .rp-hero-mb__text,
[dir="rtl"] body.page-template-page-why-remotepass #rp-typo.double-slide-landing-page-left-main-header { text-align: right; }

/* T6 Finance hero — WHITE media-below variant (Why RemotePass 1776:57830). Mirrors hero 1's
   media-below layout (reuses .rp-hero-mb / .rp-hero-mb-wrap) but light: #fff bg, #0f1035 text.
   Built INLINE (mid-page 2nd hero, not the page-meta shortcode) with an <h2> (one <h1>/page). */
.rp-hero-mb--light{background:#fff}
/* Finance media is ~975px native (1951/2) — cap it so it doesn't upscale to the 1240 container
   (matches canonical ~975 + keeps it sharp). */
.rp-hero-mb--light .rp-hero-mb__media{max-width:1000px;margin:0 auto}
.rp-hero-mb--light .rp-hero-mb__h{font-family:Mulish,-apple-system,sans-serif;font-weight:700;font-size:57.7px;line-height:1.05;letter-spacing:-2.6px;color:#0f1035;text-align:left;margin:0 0 16px}
.rp-hero-mb--light .rp-hero-mb__sub{font-family:Mulish,-apple-system,sans-serif;font-size:19.5px;line-height:1.4;color:#0f1035;margin:0 0 32px}
.rp-hero-mb--light .rp-hero-mb__cta{display:inline-block;background:#114ef7;color:#fff;border-radius:4px;font-size:16.3px;font-weight:500;line-height:1;padding:15px 69px;text-decoration:none}
.rp-hero-mb--light .rp-hero-mb__cta:hover{background:#0d3fd0;color:#fff}
@media(max-width:991px){
  .rp-hero-mb--light .rp-hero-mb__h{font-size:40px;letter-spacing:-1.5px}
  .rp-hero-mb--light .rp-hero-mb__cta{padding:14px 40px}
}
[dir="rtl"] .rp-hero-mb--light .rp-hero-mb__text{text-align:right}
@media (max-width: 767px) {
  /* A6 / B-W3: the light (finance) hero variant lost the 16px edge gutter the
     primary navy .rp-hero-mb carries, so heading/sub/CTA + the dashboard grid
     sat flush to both screen edges. Restore the 16px inline gutter on mobile. */
  .rp-hero-mb--light .rp-hero-mb { padding-inline: 16px; }
}
/* ── EOR §1.1 hero content-audit parity — Figma 15241:25617 (2026-07-02):
   sub = 20/28 #696969 (was 16/24 #545454); CTA "Start Today" = 18px, 272×49 (was 16.25px, 327×57);
   gap sub→CTA = 56px (was 27). Scoped to the EOR hero. */
body.page-template-page-eor .hero_double_section .double-slide-landing-page-left-label {
  font-size: 20px !important; line-height: 28px !important; color: #696969 !important;
}
body.page-template-page-eor .hero_double_section a.btn.w-button {
  font-size: 18px !important; width: 272px !important; height: 49px !important;
  padding: 5px 33px !important; display: inline-flex !important; align-items: center !important;
  justify-content: center !important; line-height: 1 !important; box-sizing: border-box !important;
}
body.page-template-page-eor .hero_double_section .hero-btns { margin-top: 56px !important; }
/* higher-specificity re-assert (a later custom_css/qa rule was winning): chain the sub's dim-gray class,
   and pin the CTA width against the flex parent stretching it. EOR hero, 2026-07-02. */
body.page-template-page-eor .hero_double_section .double-slide-landing-page-left-label.double-slide-landing-page-left-label-dim-gray {
  font-size: 20px !important; line-height: 28px !important; color: #696969 !important;
}
body.page-template-page-eor .hero_double_section .hero-btns a.btn.w-button {
  width: 272px !important; max-width: 272px !important; flex: 0 0 auto !important; align-self: center !important;
}
body.page-template-page-eor .hero_double_section .hero-btns a.btn.w-button { min-width: 272px !important; }

/* ── AR twin hero desktop trim (QA R2 2026-07-09): the longer 3-line Arabic H1 makes /ar/eor's hero
   taller than EN's 2-line H1, so the compression above left the embedded brand bar ~27px below the
   800 fold with a large dead gap over it. Tighten the sub→CTA gap and seat the bottom avatars lower
   to frame the taller content — brands then lands at ~795 (above the fold at 1440x800; verified via
   injection on staging). LTR is untouched. The .hero_double_section chain keeps this ahead of the
   56px rule above regardless of source order; gated ≥992 so mobile AR keeps the shared rhythm. */
@media (min-width: 992px) {
  [dir="rtl"] body.page-template-page-eor .hero_double_section .hero-btns { margin-top: 24px !important; }
  [dir="rtl"] body.page-template-page-eor .rp-eor-herodeco__avatar--2,
  [dir="rtl"] body.page-template-page-eor .rp-eor-herodeco__avatar--5 { top: 540px !important; }
}

/* ── EOR §1.2 PAIN 2×2 grid (Figma 15233:19428) — placed here because product-hero.css reliably
   cache-busts on EOR; intro.css was serving stale. Row1: heading | lead+lead-in. Row2: illustration | checklist. 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; text-align: left !important;
}
body.page-template-page-eor .rp-eor-pain .rp-eor-pain__head { grid-column: 1 !important; grid-row: 1 !important; }
body.page-template-page-eor .rp-eor-pain .rp-eor-pain__intro { grid-column: 2 !important; grid-row: 1 !important; }
body.page-template-page-eor .rp-eor-pain .rp-intro__media { grid-column: 1 !important; grid-row: 2 !important; max-width: 500px !important; }
body.page-template-page-eor .rp-eor-pain .rp-eor-pain__list { grid-column: 2 !important; grid-row: 2 !important; }
@media (max-width: 991px) {
  body.page-template-page-eor .rp-intro.rp-eor-pain.rp-section { grid-template-columns: 1fr !important; row-gap: 32px !important; }
  body.page-template-page-eor .rp-eor-pain .rp-eor-pain__head, body.page-template-page-eor .rp-eor-pain .rp-eor-pain__intro,
  body.page-template-page-eor .rp-eor-pain .rp-intro__media, body.page-template-page-eor .rp-eor-pain .rp-eor-pain__list { grid-column: 1 !important; }
}
/* pain heading = left-aligned (base .rp-intro heading forces center). EOR §1.2, 2026-07-02 */
body.page-template-page-eor .rp-eor-pain .rp-intro__heading { text-align: left !important; margin: 0 !important; max-width: 500px; }
/* pain heading size = Figma 40/48 (build shipped 32/40). EOR §1.2 visual-parity fix 2026-07-02 */
body.page-template-page-eor .rp-eor-pain .rp-intro__heading { font-size: 40px !important; line-height: 48px !important; }
/* pain checklist (Figma 15233:19439): titles 24/28 bold #2A2A2A, body 16/24 #000,
   1px rgba(0,0,0,.2) bottom dividers between items, 16px vertical padding, 16px icon gap. */
body.page-template-page-eor .rp-eor-pain .rp-intro__bullets { gap: 0 !important; }
body.page-template-page-eor .rp-eor-pain .rp-intro__bullet {
  padding: 16px 0 !important; gap: 16px !important; align-items: flex-start !important;
  border-bottom: 1px solid rgba(0,0,0,0.2) !important;
}
body.page-template-page-eor .rp-eor-pain .rp-intro__bullet:last-child { border-bottom: 0 !important; }
body.page-template-page-eor .rp-eor-pain .rp-intro__bullettext { gap: 8px !important; }
body.page-template-page-eor .rp-eor-pain .rp-intro__bullettitle { font-size: 24px !important; line-height: 28px !important; color: #2A2A2A !important; }
body.page-template-page-eor .rp-eor-pain .rp-intro__bulletbody { color: #000 !important; }
/* EOR §1.3 legal-employer navy section — Figma 15233:19466 rounded-tl/tr 56px (build was square). 2026-07-02 */
body.page-template-page-eor .rp-feature-split--navy { border-radius: 56px 56px 0 0 !important; overflow: hidden; }