/* .rp-feature-split — generic 2-col feature row: heading/sub/bullets/quote + media.
   --rev alternates the media side. Extracted from CoR feature #7330. Reusable. */
.rp-feature-split{font-family:Mulish,-apple-system,sans-serif}
.rp-feature-split__sec{padding:80px 24px}
.rp-feature-split__inner{max-width:1136px;margin:0 auto}
.rp-feature-split--blue{background:#EEF3FF}
.rp-feature-split__h{font-size:40px;line-height:1.2;font-weight:700;color:#021143;margin:0 0 16px;text-align:center}
.rp-feature-split__h .hl{color:#114EF7}
.rp-feature-split__sub{font-size:18px;line-height:1.55;color:#5A6378;text-align:center;max-width:760px;margin:0 auto 56px}
.rp-feature-split__cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:32px}
.rp-feature-split__ph{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:4/3;background:#fff;border:1px dashed #C7D0E8;border-radius:16px;color:#8A93AB;font-size:13px;text-align:center;padding:12px;margin-bottom:24px}
.rp-feature-split__col h3{font-size:18px;font-weight:700;color:#021143;margin:0 0 10px}
.rp-feature-split__col p{font-size:15px;line-height:1.55;color:#5A6378;margin:0 0 12px}
.rp-feature-split__split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.rp-feature-split__split.is-rev .rp-feature-split__txt{order:2}
.rp-feature-split__txt .rp-feature-split__h,.rp-feature-split__txt .rp-feature-split__sub{text-align:left;margin-left:0;max-width:none}
.rp-feature-split__txt .rp-feature-split__sub{margin-bottom:24px}
.rp-feature-split__media-ph{display:flex;align-items:center;justify-content:center;width:100%;min-height:380px;background:rgba(255,255,255,.6);border:1px dashed #C7D0E8;border-radius:20px;color:#8A93AB;font-size:13px;text-align:center;padding:16px}
.rp-feature-split__img{width:100%;aspect-ratio:1/1;object-fit:contain;display:block;margin-bottom:24px}
.rp-feature-split__media-img{width:100%;height:auto;display:block}
/* RTL: the split grid mirrors automatically under dir=rtl; flip the text-block alignment (the centered section __h stays centered). Generic — applies to any RTL use. */
[dir="rtl"] .rp-feature-split__txt .rp-feature-split__h,[dir="rtl"] .rp-feature-split__txt .rp-feature-split__sub{text-align:right}

/* ── --navy --card variant (Figma 11999:240165 "Unmatched Benefits"): navy section,
   white section heading + yellow .hl, each row a white rounded card holding a navy media
   panel. Generic modifier — extends the component, no page fork. Use .rp-feature-split__card
   on each __split row. */
.rp-feature-split--navy{background:#021143}
.rp-feature-split--navy .rp-feature-split__inner{max-width:1200px}  /* Figma 240165 content width (vs the 1136 default) → media lands ~524 ≈ Figma 528 */
.rp-feature-split--navy .rp-feature-split__inner>.rp-feature-split__h{color:#fff}
.rp-feature-split--navy .rp-feature-split__inner>.rp-feature-split__h .hl{color:#FFC83A}
.rp-feature-split__card{background:#fff;border-radius:24px;padding:48px 56px;margin-bottom:24px;gap:40px;align-items:center}
.rp-feature-split__card:last-child{margin-bottom:0}
.rp-feature-split__card .rp-feature-split__h{font-size:32px;line-height:1.25;margin-bottom:12px;text-transform:none}
.rp-feature-split__card .rp-feature-split__sub{font-size:16px;margin-bottom:0}
.rp-feature-split__card .rp-feature-split__media-img{border-radius:16px}
@media(max-width:991px){.rp-feature-split__card{padding:28px 22px;gap:24px}.rp-feature-split__card .rp-feature-split__h{font-size:26px}}
.rp-feature-split__bullets{list-style:none;margin:0 0 32px;padding:0}
.rp-feature-split__bullets li{display:flex;gap:12px;font-size:16px;line-height:1.5;color:#1B2440;margin-bottom:18px}
.rp-feature-split__bullets .ck{flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:#16B364;display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.rp-feature-split__bullets .ck svg{width:12px;height:12px;display:block}
/* __bullets--icon — image check-circle icon variant (vs the kit's CSS .ck green circle).
   First used by Spend avoid-platform (Figma 15924:17973): 32×32 CheckCircle icon, 16 gap
   icon→text, 24 gap between bullets, text Mulish 400 16/24. Generic — reusable on any page. */
.rp-feature-split__bullets--icon{display:flex;flex-direction:column;gap:24px}
.rp-feature-split__bullets--icon li{gap:16px;margin:0;font-size:16px;line-height:24px;align-items:flex-start}
.rp-feature-split__bullets--icon .ico{flex:0 0 32px;width:32px;height:32px;display:block}
.rp-feature-split__quote{background:#F6F8FE;border-radius:16px;padding:28px}
.rp-feature-split__quote .q{font-size:16px;line-height:1.5;color:#1B2440;margin:0 0 18px;font-style:italic}
.rp-feature-split__quote .who{display:flex;align-items:center;gap:14px}
.rp-feature-split__quote .logo{width:44px;height:44px;border-radius:8px;flex:0 0 44px;display:block;object-fit:cover}
.rp-feature-split__quote .name{font-weight:700;color:#021143;font-size:15px}
.rp-feature-split__quote .role{color:#8A93AB;font-size:14px}

/* ── __stats — generic inline stats strip (big blue number + grey label). First used by
   Local Payroll "One platform" row (Figma 16779:23070). Numbers stay LTR inside RTL. */
.rp-feature-split__stats{display:flex;gap:48px;flex-wrap:wrap;margin-top:8px}
.rp-feature-split__stat{display:flex;flex-direction:column}
.rp-feature-split__stat .num{font-size:32px;line-height:1.2;font-weight:700;color:#114EF7;direction:ltr;unicode-bidi:isolate}
.rp-feature-split__stat .lbl{font-size:14px;line-height:1.4;color:#545454;margin-top:6px}
/* ── __btn — generic solid-blue text-block CTA (Figma "Talk to a payroll specialist"). */
.rp-feature-split__btn{display:inline-block;background:#114EF7;color:#fff !important;font-weight:700;font-size:16px;line-height:1;text-decoration:none;padding:16px 24px;border-radius:8px;margin-top:8px}
.rp-feature-split__btn:hover{background:#0d3fd0}

@media(max-width:991px){.rp-feature-split__cols,.rp-feature-split__split{grid-template-columns:1fr;gap:32px}.rp-feature-split__split.is-rev .rp-feature-split__txt{order:0}.rp-feature-split__h{font-size:28px}.rp-feature-split__sec{padding:48px 20px}.rp-feature-split__media-ph{min-height:260px}}
@media(max-width:600px){.rp-feature-split__stats{gap:28px}.rp-feature-split__stat .num{font-size:26px}}

/* ── .rp-lp-features (Local Payroll, Figma 16779:23032) — frame-scoped tuning of the
   shared component to the LP redesign. Preserves the Figma type scale (section 35/51,
   row 32/42, body 16.8/25.2 #696969) + 519 media + blue check bullets, rather than the
   kit defaults (40/40/18, green bullets). Layout: 1252 content, ~519 media column. */
.rp-lp-features .rp-feature-split__sec{padding:56px 24px}
.rp-lp-features .rp-feature-split__inner{max-width:1252px}
.rp-lp-features .rp-feature-split__inner>.rp-feature-split__h{font-size:35px;line-height:51px;margin-bottom:48px;font-weight:700}
.rp-lp-features .rp-feature-split__split{grid-template-columns:626px 519px;justify-content:space-between;gap:40px;align-items:center}
.rp-lp-features .rp-feature-split__split.is-rev{grid-template-columns:519px 626px}
.rp-lp-features .rp-feature-split__txt .rp-feature-split__h{font-size:32px;line-height:42px;font-weight:700;margin-bottom:16px}
.rp-lp-features .rp-feature-split__sub{font-size:16.8px;line-height:25.2px;color:#696969;margin-bottom:16px}
.rp-lp-features .rp-feature-split__media-img{max-width:519px;width:100%;aspect-ratio:auto;margin:0 0 0 auto}
.rp-lp-features .rp-feature-split__split.is-rev .rp-feature-split__media-img{margin:0 auto 0 0}
.rp-lp-features .rp-feature-split__bullets{margin-top:8px}
/* blue check circle (kit default is green) */
.rp-lp-features .rp-feature-split__bullets .ck{background:#114EF7}
.rp-lp-features .rp-feature-split__bullets li{color:#1B2440;font-size:16px}
@media(max-width:991px){
  .rp-lp-features .rp-feature-split__split,.rp-lp-features .rp-feature-split__split.is-rev{grid-template-columns:1fr}
  .rp-lp-features .rp-feature-split__inner>.rp-feature-split__h{font-size:28px;line-height:1.2;margin-bottom:32px}
  .rp-lp-features .rp-feature-split__txt .rp-feature-split__h{font-size:26px;line-height:1.25}
  .rp-lp-features .rp-feature-split__media-img,.rp-lp-features .rp-feature-split__split.is-rev .rp-feature-split__media-img{margin:0 auto;max-width:519px}
}
/* RTL: stats + button align to the start (right); media re-anchors handled by grid mirror. */
[dir="rtl"] .rp-lp-features .rp-feature-split__media-img{margin:0 auto 0 0}
[dir="rtl"] .rp-lp-features .rp-feature-split__split.is-rev .rp-feature-split__media-img{margin:0 0 0 auto}

/* ── __leadin — generic bold lead-in line above a bullet/point list (e.g. "It's perfect
   for companies that:" / "Here's how it works:"). First used by EOR §1.3 + §1.6. */
.rp-feature-split__leadin{font-family:Mulish,-apple-system,sans-serif;font-size:16px;line-height:24px;font-weight:700;color:#021143;margin:0 0 16px}

/* ── EOR §1.3 Legal employer (Figma 15233:19466) — FLAT NAVY section (#021143). Canonical is a
   flat navy band (NOT a white card): white section heading, leads/lead-in/bullets in WHITE on navy
   (text LEFT), persona mock (opaque navy-bg tile that blends seamlessly into the section) RIGHT,
   and a separate full-width WHITE testimonial card below. The persona tile's bg == section #021143
   so there is no visible tile edge (orchestrator blend gate). EOR rebuild §1.3 2026-06-29: the
   white `__card` wrapper was removed to match the canonical Figma + pass the blend gate. White
   section heading comes from the base --navy `__inner>__h` rule. */
/* Canonical §1.3 (node 15233:19467): H2 is LEFT-aligned at the TOP of the left column (not a
   centred full-width header). White on navy. Leads/lead-in/bullets follow in the left column. */
.rp-eor-legal .rp-feature-split__txt .rp-feature-split__h{font-size:40px;line-height:48px;text-align:left;color:#fff;max-width:none;margin:0 0 20px}
/* A5 (QA R1, AR): §1.3 legal heading stayed left in RTL — the rule above (0,3,0) ties the generic
   [dir=rtl] override (0,3,0) and wins on source order. RTL is the mirror of the EN left-at-start, so
   right-align in RTL. Out-specified (0,4,0), RTL-only. */
[dir="rtl"] .rp-eor-legal .rp-feature-split__txt .rp-feature-split__h{text-align:right}
.rp-eor-legal .rp-feature-split__sub{font-size:16px;line-height:24px;color:#D7DEF2;margin-bottom:16px}
.rp-eor-legal .rp-feature-split__leadin{color:#fff}
/* §1.3 bullets: thin WHITE check (no green circle) + BOLD lead-in (the <strong> in markup). */
/* FIX 2026-07-02: base li is display:flex, which splits <strong> and the trailing text node into
   SEPARATE flex columns (bold lead-in in one column, remainder in another — visibly broken).
   Figma flows them as ONE sentence after the check. Force block flow + hanging (absolute) check. */
.rp-eor-legal .rp-feature-split__bullets li{color:#EAF0FF;display:block;position:relative;padding-left:34px;gap:0;font-size:16px;line-height:24px;margin-bottom:16px}
.rp-eor-legal .rp-feature-split__bullets li .ck{position:absolute;left:0;top:2px}
.rp-eor-legal .rp-feature-split__bullets li strong{color:#fff;font-weight:700}
.rp-eor-legal .rp-feature-split__bullets .ck{background:none;flex:0 0 22px;width:22px;height:22px;margin-top:0}
.rp-eor-legal .rp-feature-split__bullets .ck svg{width:20px;height:20px}
.rp-eor-legal .rp-feature-split__bullets .ck svg path{stroke:#fff}
/* §1.3 testimonial card is NAVY (white@20% over the section) with WHITE text — Figma 15233:19522.
   Base rp-eor-tcard is the LIGHT (§1.4) style; override for the navy legal section only. */
.rp-eor-legal .rp-eor-tcard{background:rgba(255,255,255,0.2)!important;border-radius:24px}
.rp-eor-legal .rp-eor-tcard .q{color:#fff!important;font-weight:700!important;font-size:24px!important;line-height:28px!important;font-style:normal!important}
.rp-eor-legal .rp-eor-tcard .name{color:#fff!important}
.rp-eor-legal .rp-eor-tcard .role{color:#EAF0FF!important}
.rp-eor-legal .rp-eor-tcard__score{color:#fff!important}
@media(max-width:991px){
  .rp-eor-legal .rp-feature-split__txt .rp-feature-split__h{font-size:28px;line-height:36px}
}

/* ── EOR §1.4 Stay compliant (Figma 15233:19555) — FLAT LIGHT section (#F0F4FE). Canonical is a
   flat light band (NOT a white card): dashboard mock (opaque #F0F4FE-bg tile that blends into the
   section) LEFT, two-tone H2 (40/48, navy + blue .hl) + lead + bullets (dark text) RIGHT (is-rev —
   alternates with §1.3), and a separate full-width WHITE Cristian card below. Tile bg == section
   #F0F4FE → no visible tile edge. EOR rebuild §1.4 2026-06-29: white `__card` wrapper removed to
   match canonical + pass the blend gate. */
.rp-eor-compliant{background:#F0F4FE}
.rp-eor-compliant .rp-feature-split__txt .rp-feature-split__h{font-size:40px;line-height:48px;margin-bottom:16px}
.rp-eor-compliant .rp-feature-split__sub{font-size:16px;line-height:24px;color:#545454;margin-bottom:16px}
/* Canonical §1.4 testimonial = near-white card (#FAFBFF, sampled), dark text, full width below the
   split; Cristian photo (scalloped/petal cutout) left + small G2 badge + "Review on G2" button
   right are added when the photo asset lands. */
.rp-eor-compliant .rp-feature-split__quote{background:#FAFBFF;border-radius:16px;padding:28px 40px;max-width:1136px;margin:40px auto 0;box-shadow:0 8px 32px rgba(2,17,67,.06)}
/* §1.4 bullets: BOLD lead-in phrase (the <strong> in markup). */
.rp-eor-compliant .rp-feature-split__bullets li strong{color:#021143;font-weight:700}
/* FIX 2026-07-02: §1.4 checklist had (a) the same flex-column split bug as §1.3 (bold lead-in and
   trailing text in separate columns) and (b) GREEN check circles — Figma 15233:19555 uses thin BLUE
   checks with inline text. Force block flow + hanging blue check. */
.rp-eor-compliant .rp-feature-split__bullets li{display:block;position:relative;padding-left:32px;gap:0;font-size:16px;line-height:24px;color:#2A2A2A;margin-bottom:14px}
.rp-eor-compliant .rp-feature-split__bullets li .ck{position:absolute;left:0;top:2px;background:none;flex:0 0 22px;width:22px;height:22px;margin-top:0}
.rp-eor-compliant .rp-feature-split__bullets li .ck svg{width:18px;height:18px}
.rp-eor-compliant .rp-feature-split__bullets li .ck svg path{stroke:#114EF7}
/* RTL (AR): the hanging check must sit on the RIGHT (start of RTL reading), text padded on the right. */
[dir="rtl"] .rp-eor-legal .rp-feature-split__bullets li{padding-left:0;padding-right:34px}
[dir="rtl"] .rp-eor-legal .rp-feature-split__bullets li .ck{left:auto;right:0}
[dir="rtl"] .rp-eor-compliant .rp-feature-split__bullets li{padding-left:0;padding-right:32px}
[dir="rtl"] .rp-eor-compliant .rp-feature-split__bullets li .ck{left:auto;right:0}
@media(max-width:991px){
  .rp-eor-compliant .rp-feature-split__txt .rp-feature-split__h{font-size:28px;line-height:36px}
}

/* ── EOR testimonial card (Figma cards 15233:19524 navy / 15233:19589 light). Photo tile LEFT
   (opaque, bg already == card bg → blends) | content RIGHT: rating row (5 gold stars + optional
   "5/5" + G2 logo), quote, then a footer row [name/role | right-aligned "Review on G2" button].
   Shared layout; §1.3 (navy) + §1.4 (light) colours come from their existing __quote scopes. */
.rp-eor-tcard{display:flex;gap:36px;align-items:center}
.rp-eor-tcard__photo{flex:0 0 auto;width:210px;height:auto;display:block;align-self:center}
.rp-eor-tcard__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:16px}
.rp-eor-tcard__rate{display:flex;align-items:center;gap:10px}
.rp-eor-tcard__stars{color:#FFB800;font-size:20px;line-height:1;letter-spacing:2px}
.rp-eor-tcard__score{font-size:14px;font-weight:600;opacity:.85}
.rp-eor-tcard__g2{width:24px;height:24px;display:block;border-radius:50%}
.rp-eor-tcard .q{margin:0;font-size:20px;line-height:28px;font-weight:700;font-style:normal}
.rp-eor-tcard__foot{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:8px}
.rp-eor-tcard__foot .who{display:flex;flex-direction:column;gap:2px}
.rp-eor-tcard__btn{flex:0 0 auto;background:#fff;color:#021143;border-radius:10px;padding:15px 28px;font-weight:700;font-size:14px;line-height:1;text-decoration:none;white-space:nowrap}
.rp-eor-tcard__btn:hover{background:#F0F4FE;color:#021143}
/* §1.4 light card: outlined button + grey 5/5 omitted */
.rp-eor-compliant .rp-eor-tcard__btn{border:1px solid #E2E8F8}
@media(max-width:767px){
  .rp-eor-tcard{flex-direction:column;align-items:flex-start;gap:24px}
  .rp-eor-tcard__photo{width:160px}
  .rp-eor-tcard__foot{flex-direction:column;align-items:flex-start;gap:16px}
}

/* ── EOR §1.6 Pay in one click (Figma 15233:19654) — base .rp-feature-split (light), text
   LEFT / pay-dashboard mock RIGHT. H2 40/48 + lead + lead-in + a 2-col title+body points
   grid + closer line. FLAT LIGHT section (#F0F4FE) so the opaque #F0F4FE-bg pay mock blends with
   no visible tile edge. EOR rebuild §1.6 2026-06-29. */
.rp-eor-pay{background:#F0F4FE}
.rp-eor-pay .rp-feature-split__txt .rp-feature-split__h{font-size:40px;line-height:48px;color:#021143;margin:0 0 16px}
.rp-eor-pay .rp-feature-split__sub{font-size:18px;line-height:1.55;color:#545454;margin:0 0 20px}
.rp-eor-pay__points{display:grid;grid-template-columns:1fr 1fr;gap:24px 32px;margin:0 0 24px}
.rp-eor-pay__point{display:flex;flex-direction:column;gap:6px}
.rp-eor-pay__pticon{width:32px;height:32px;display:block;margin:0 0 2px} /* §1.6 duotone icons above each title — Figma 15233:19669/19672 (QA R1 #8) */
.rp-eor-pay__pttitle{font-family:Mulish,-apple-system,sans-serif;font-weight:700;font-size:18px;line-height:26px;color:#021143}
.rp-eor-pay__ptbody{font-family:Mulish,-apple-system,sans-serif;font-weight:400;font-size:16px;line-height:24px;color:#696969}
.rp-eor-pay__closer{font-family:Mulish,-apple-system,sans-serif;font-size:16px;line-height:24px;color:#696969;margin:0}
@media(max-width:991px){
  .rp-eor-pay .rp-feature-split__txt .rp-feature-split__h{font-size:28px;line-height:36px}
  .rp-eor-pay__points{grid-template-columns:1fr;gap:20px}
}
/* RTL: leadin + points start-align (right); the split grid + media re-anchor via the base mirror. */
[dir="rtl"] .rp-feature-split__leadin{text-align:right}
[dir="rtl"] .rp-eor-pay__point{text-align:right}

/* ── .rp-spend-avoid (Spend "Avoid adding yet another platform", Figma 15924:17921) —
   frame-scoped tuning of the shared component (same pattern as .rp-lp-features — section
   scope, NOT a page fork). Light section, media LEFT (is-rev) 712 / text RIGHT 440, 48 gap,
   1200 container (kit __sec 80px/24px padding already lands the 120 gutter at 1440 via
   inner margin-auto), single-tone #2A2A2A 40/48 heading (no .hl). Media-img + grid mirror +
   vertical-center are inherited from the base component. */
.rp-spend-avoid .rp-feature-split__inner{max-width:1200px}
.rp-spend-avoid .rp-feature-split__split{grid-template-columns:712px 440px;gap:48px}
.rp-spend-avoid .rp-feature-split__txt .rp-feature-split__h{font-size:40px;line-height:48px;font-weight:700;color:#2A2A2A;margin:0 0 32px}
@media(max-width:991px){
  .rp-spend-avoid .rp-feature-split__split{grid-template-columns:1fr;gap:32px}
  .rp-spend-avoid .rp-feature-split__txt .rp-feature-split__h{font-size:28px;line-height:36px;margin-bottom:24px}
}

/* __eyebrow — generic uppercase kicker above a feature-split heading (Mulish SemiBold, tracked).
   First used by Why RemotePass feature rows (Figma 1776:59928); reusable on any feature-split. */
.rp-feature-split__eyebrow{font-family:Mulish,-apple-system,sans-serif;font-size:12px;font-weight:600;line-height:1;letter-spacing:1.8px;text-transform:uppercase;color:#7e7e7e;margin:0 0 16px}
[dir="rtl"] .rp-feature-split__txt .rp-feature-split__eyebrow{text-align:right}

/* __bullets--rich — each bullet = green check + bold TITLE + body paragraph (vs the plain
   single-line __bullets). Title is an <hN> so the sentence-case engine lowers it per house style.
   First used by Why RemotePass "Benefits that put people first." — reusable on any feature-split. */
.rp-feature-split__bullets--rich{display:flex;flex-direction:column;gap:24px;margin:0}
.rp-feature-split__bullets--rich li{align-items:flex-start;margin:0;color:inherit}
.rp-feature-split__bullets--rich .ck{margin-top:2px}
.rp-feature-split__bulltext{display:flex;flex-direction:column;gap:4px}
.rp-feature-split__bulltitle{font-family:Mulish,-apple-system,sans-serif;font-weight:700;font-size:18px;line-height:1.35;color:#15113b;margin:0}
.rp-feature-split__bullbody{font-family:Mulish,-apple-system,sans-serif;font-weight:400;font-size:16px;line-height:1.5;color:#67687f;margin:0}
[dir="rtl"] .rp-feature-split__bullets--rich .rp-feature-split__bulltext{text-align:right}