/* Figma 1-1 match — agent b — 2026-06-02 */

/* ============ AWARDS (home-awards.html) ============ */
/* Eyebrow pill: "Award Winning Performance" */
body.home .fb-awards-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  margin:0 auto 24px;padding:8px 18px;
  border:1px solid rgba(255,255,255,.28);border-radius:999px;
  font-family:'Mulish',sans-serif;font-weight:600;font-size:15px;line-height:1;
  color:#fff;letter-spacing:.01em;text-transform:none !important;background:transparent;
}
body.home .fb-awards-eyebrow img{display:block;filter:brightness(0) invert(1);}

/* Flatten the animated component into Figma's clean dark section:
   remove white card behind text, kill scrolling track + radial mask +
   Capterra/Trustpilot notch, keep a single static G2 badge row. */
body.home .badges-trusted-new-design-main.badges-trusted-new-design-main-blue{
  background-image:none !important;
  padding:80px 24px 0 !important;
  width:100% !important;max-width:none !important;
}
body.home .new_landing_page_badges_new_g2 .trusted-badges-bg,
body.home .new_landing_page_badges_new_g2 .badges-trusted-new-design-mask,
body.home .new_landing_page_badges_new_g2 .badges-trusted-new-design-sub-container{
  display:none !important;
}
body.home .new_landing_page_badges_new_g2 .badges-trusted-new-design.badges-trusted-new-design-blue{
  background:#021143 !important;height:auto !important;padding-bottom:64px;
}
body.home .new_landing_page_badges_new_g2{height:auto !important;}

/* Static badge row — full-bleed, centered, no animation */
body.home .fb-awards-badge-row{
  width:100vw;max-width:1440px;margin:40px auto 0;overflow:hidden;
  display:flex;justify-content:center;
}
body.home .fb-awards-badge-row img{
  display:block;width:100%;height:auto;max-width:1440px;
}

/* Header colors — line1 gold, line2 white. Figma sentence case kept as authored. */
body.home .badges-trusted-new-design-main-header.fb-awards-h-gold{
  color:#F4B740 !important;text-transform:none !important;margin-bottom:2px;
  font-family:'Mulish',sans-serif;font-weight:700;font-size:40px;line-height:48px;
}
body.home .badges-trusted-new-design-main-header.fb-awards-h-white{
  color:#fff !important;text-transform:none !important;
  font-family:'Mulish',sans-serif;font-weight:700;font-size:40px;line-height:48px;
}

/* Rating pills row */
body.home .fb-awards-pills{
  display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin:24px auto 0;
}
body.home .fb-awards-pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 22px;border-radius:999px;
  font-family:'Mulish',sans-serif;font-weight:500;font-size:16px;line-height:1;
  color:#2A2A2A;background:#fff;border:1px solid #EFEFEF;
}
body.home .fb-awards-pill strong{font-weight:700;}
body.home .fb-awards-pill img{display:block;width:20px;height:20px;}
body.home .fb-awards-pill-g2{color:#FF492C;border-color:rgba(255,73,44,.35);}
body.home .fb-awards-pill-g2 strong,body.home .fb-awards-pill-g2 span{color:#FF492C;}
body.home .fb-awards-pill-capterra{color:#2A2A2A;}

/* ============ SUPPORT (home-support.html) ============ */
/* First header line near-black (Figma), keep blue span as-is */
body.home .fb-support-h{color:#151515 !important;}
body.home .fb-support-h .highlight-it-blue{color:#114EF7 !important;}

/* CTA reads "Learn More" — outlined light style per Figma */
body.home a.fb-support-learn.btn-2{
  background:#EEF2FE !important;border:1px solid #114EF7 !important;
  color:#114EF7 !important;font-weight:700;
}

/* Mohamed 2026-07-08: intro/pain text → 18px / 700 / 26px */
.rp-intro__text,
.rp-apis-pain__text,
.rp-bc-pain__text,
.rp-relo-pain .intname,
.rp-lp-pain .intname,
.rp-spend-features .div-block-36:first-of-type .intname {
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 26px !important;
}

/* Mohamed 2026-07-08: hide wpautop empty paragraphs on Super App (stray spacing). */
.rp-super-app p:empty { display: none !important; }

/* Mohamed 2026-07-08: hide wpautop empty paragraphs in hero double-section (global). */
.hero_double_section p:empty { display: none !important; }

/* Mohamed 2026-07-08: hero brands strip bottom spacing. */
.rp-hero-brands .new-listed-brands-sub-section { margin-bottom: 24px !important; }

/* Mohamed 2026-07-08: top padding on super-app/apple-pay hero container + teams landing brands. */
.rp-container.getguide-rp-container.super-app-hero-container.apple-pay-app-hero-container,
.rp-teams-landing-page.new_landing_page_brands.new_landing_page_brands_extra_styel.new_landing_page_brands_extra_styel_padding.new_landing_page_brands_blue_bg.pd-lr {
  padding-top: 40px !important;
}

/* Mohamed 2026-07-08: super-app/apple-pay hero container top padding 0 (overrides the 40px above). */
.rp-container.getguide-rp-container.super-app-hero-container.apple-pay-app-hero-container { padding-top: 40px !important; }

/* Mohamed 2026-07-08: teams-landing brands-bar-component top padding 0. */
.rp-teams-landing-page.new_landing_page_brands.new_landing_page_brands_extra_styel.new_landing_page_brands_extra_styel_padding.new_landing_page_brands_blue_bg.pd-lr.pd-top.brands-bar-component { padding-top: 0px !important; margin-top: -20px !important; }

/* Mohamed 2026-07-08: video modal — complete/working styling (theme had two conflicting
   .rp-video-modal defs; one left it display:none with no reliable .show). JS-injected on
   play (click thumbnail → data-yt-id → iframe), removed on close. */
.rp-video-modal { display: flex !important; position: fixed !important; inset: 0 !important; z-index: 9999 !important; justify-content: center; align-items: center; padding: 24px; }
.rp-video-modal-backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 53%); }
.rp-video-modal-content { position: relative; z-index: 2; width: min(90vw, 960px); aspect-ratio: 16 / 9; }
.rp-video-modal-player { position: relative; z-index: 1; width: 100% !important; height: 100% !important; border: 0; border-radius: 12px; display: block; }
.rp-video-modal-close { position: absolute; top: -40px; right: 0; width: 32px; height: 32px; background: none; border: 0; color: #fff; font-size: 32px; line-height: 1; cursor: pointer; z-index: 2; }

/* Mohamed 2026-07-08: hero video play button was 0×0 (only programmatic clicks worked;
   real user clicks missed it). Make it fill the video card so the whole poster is clickable. */
.double-section-hero-container-right { position: relative; }
.rp-hero-yt-play[data-yt-id] { position: absolute; inset: 0; cursor: pointer; z-index: 3; }

/* Mohamed 2026-07-09: local-payroll hero → mirror CoR. Same soft lavender image
   gradient background (qa-fixes-cor.css §G) + same responsive H1 sizing/colors
   (CoR #rp-typo rules), scoped to the local-payroll template. */
body.page-template-page-local-payroll .hero_double_section.new_rp_hero_double_section.new_rp_hero_double_section_bg.new_rp_hero_double_section_bg_extra_layer {
  background-color: #fff !important;
  background-image: linear-gradient(rgba(228, 235, 254, 0), rgb(228, 235, 254) 120px, rgb(228, 235, 254)) !important;
  background-position: 0 0 !important;
  background-repeat: repeat !important;
  background-size: auto !important;
  background-attachment: scroll !important;
  padding-top: 40px;
  padding-bottom: 24px;
}
/* The extra-layer/bg-light-blue chrome paints a SOLID lavender via ::before on top,
   hiding the fade. Give the ::before the same CoR top-fade gradient so it shows. */
body.page-template-page-local-payroll .hero_double_section.new_rp_hero_double_section.new_rp_hero_double_section_bg.new_rp_hero_double_section_bg_extra_layer::before {
  background-color: transparent !important;
  background-image: linear-gradient(rgba(228, 235, 254, 0), rgb(228, 235, 254) 120px, rgb(228, 235, 254)) !important;
}
/* Hero row layout → match CoR (the `width-flex-5-7` class forces column-gap:40px +
   left flex-basis:50%, which overflows: 40/40/-64 edge gaps. CoR uses gap:normal,
   left flex-basis:auto/shrink, right fixed 610/no-shrink → even ~5px edges). */
body.page-template-page-local-payroll .rp-local-payroll .security-trust-double-section-hero-container,
body.page-template-page-local-payroll .security-trust-double-section-hero-container {
  gap: 0px !important;
}
body.page-template-page-local-payroll .new_rp_hero_double_section_bg_extra_layer .double-section-hero-container-left {
  flex-basis: auto !important;
  flex-shrink: 1 !important;
}
body.page-template-page-local-payroll .double-section-hero-container-right.double-section-hero-container-right-extra-style.new-rp-double-section-hero-container-right-extra-style.double-section-hero-container-right-vertical {
  flex-basis: unset !important;
  flex-shrink: unset !important;
}
/* AR CoR: migration-rtl.min.css hid the hero brands slot (.rp-cor.rp-ar .rp-hero-brands
   {display:none}) back when AR CoR used the English brands bar. Now that ar-cor-body.html
   uses the proper ar-component-brands-bar, un-hide it. */
.rp-cor.rp-ar .rp-hero-brands { display: block !important; }

/* Kill the decorative white top overlay (linear-gradient transparent→white) that sits
   over the hero and creates a visible band/break against our lavender fade. */
body.page-template-page-local-payroll .new_rp_hero_double_section_bg_blured { display: none !important; }
body.page-template-page-local-payroll #rp-typo.double-slide-landing-page-left-main-header {
  font-size: 2.95rem !important;
  line-height: 56px !important;
  letter-spacing: 0 !important;
  color: #021143 !important;
}
body.page-template-page-local-payroll .double-slide-landing-page-left-main-header .highlight-it-blue {
  color: #114EF7 !important;
}
@media (min-width: 768px) and (max-width: 991px) {
  body.page-template-page-local-payroll #rp-typo.double-slide-landing-page-left-main-header {
    font-size: 2.25rem !important;
    line-height: 53px !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;
  }
}

/* ==========================================================================
   Mohamed 2026-07-11: relocation hero → SAME as SMBs/local-payroll. Relocation clones the LP
   hero markup (.rp-lp-hero, 5/7 split) but lacks the LP page-scoped treatment. Mirror it here,
   scoped to the relocation template. NB relocation H1 has no #rp-typo → target .double-slide-…-header.
   ========================================================================== */
body.page-template-page-relocation .hero_double_section.new_rp_hero_double_section.new_rp_hero_double_section_bg.new_rp_hero_double_section_bg_extra_layer {
  background-color: #fff !important;
  background-image: linear-gradient(rgba(228, 235, 254, 0), rgb(228, 235, 254) 120px, rgb(228, 235, 254)) !important;
  background-position: 0 0 !important;
  background-repeat: repeat !important;
  background-size: auto !important;
  background-attachment: scroll !important;
  padding-top: 40px;
  padding-bottom: 24px;
}
body.page-template-page-relocation .hero_double_section.new_rp_hero_double_section.new_rp_hero_double_section_bg.new_rp_hero_double_section_bg_extra_layer::before {
  background-color: transparent !important;
  background-image: linear-gradient(rgba(228, 235, 254, 0), rgb(228, 235, 254) 120px, rgb(228, 235, 254)) !important;
}
body.page-template-page-relocation .security-trust-double-section-hero-container {
  gap: 0px !important;
}
body.page-template-page-relocation .new_rp_hero_double_section_bg_extra_layer .double-section-hero-container-left {
  flex-basis: auto !important;
  flex-shrink: 1 !important;
}
body.page-template-page-relocation .double-section-hero-container-right.double-section-hero-container-right-extra-style.new-rp-double-section-hero-container-right-extra-style.double-section-hero-container-right-vertical {
  flex-basis: unset !important;
  flex-shrink: unset !important;
}
body.page-template-page-relocation .new_rp_hero_double_section_bg_blured { display: none !important; }
body.page-template-page-relocation .rp-relo-hero .double-slide-landing-page-left-main-header {
  font-size: 2.95rem !important;
  line-height: 56px !important;
  letter-spacing: 0 !important;
  color: #021143 !important;
}
body.page-template-page-relocation .rp-relo-hero .double-slide-landing-page-left-main-header .highlight-it-blue {
  color: #114EF7 !important;
}
@media (min-width: 768px) and (max-width: 991px) {
  body.page-template-page-relocation .rp-relo-hero .double-slide-landing-page-left-main-header {
    font-size: 2.25rem !important;
    line-height: 53px !important;
  }
  body.page-template-page-relocation .main-hero-section-img {
    width: 65% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    display: block !important;
  }
}
@media (max-width: 767px) {
  body.page-template-page-relocation .rp-relo-hero .double-slide-landing-page-left-main-header {
    font-size: 32px !important;
    line-height: 40px !important;
  }
  body.page-template-page-relocation .main-hero-section-img { width: 100% !important; }
}
/* Relocation "shuffled" feature sections → match SMBs .rp-feature-split typography + responsive.
   Relo uses LP feature markup (.rp-relo-features, .double-slide-…-header / -label). Title 36/44
   navy, body 18 gray, mock image 65% centered on tablet / 100% mobile. */
body.page-template-page-relocation .rp-relo-features .double-slide-landing-page-left-main-header {
  font-size: 36px !important;
  line-height: 44px !important;
  font-weight: 700 !important;
  color: #021143 !important;
}
body.page-template-page-relocation .rp-relo-features .double-slide-landing-page-left-label {
  font-size: 18px !important;
  line-height: 1.55 !important;
  color: #5A6378 !important;
}
@media (max-width: 767px) {
  body.page-template-page-relocation .rp-relo-features .double-slide-landing-page-left-main-header {
    font-size: 28px !important;
    line-height: 36px !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  body.page-template-page-relocation .rp-relo-features .double-section-img {
    width: 65% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }
}
@media (max-width: 767px) {
  body.page-template-page-relocation .rp-relo-features .double-section-img { width: 100% !important; }
}
/* Relocation section header (.new-rp-section-header chain) — tablet 75% / mobile 100%, centered. */
@media (min-width: 768px) and (max-width: 991px) {
  .rp-relocation .new_landing_page_payroll_header.new_landing_page_badge_header.new_landing_page_apple-pay_header.new_landing_page_apple-pay_add-header.new-rp-section-header {
    width: 75% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
@media (max-width: 767px) {
  .rp-relocation .new_landing_page_payroll_header.new_landing_page_badge_header.new_landing_page_apple-pay_header.new_landing_page_apple-pay_add-header.new-rp-section-header {
    width: 100% !important;
  }
}
/* Relocation brands (khero) — logos stay monochrome, no color-on-hover (EN + AR). */
.rp-relocation .rp-khero-brands .new-listed-brands-sub-section-img.blue-filter:hover {
  filter: invert(85%) !important;
}
.rp-relocation .new-listed-brands-sub-section-img.blue-filter {
  opacity: 1 !important;
}
/* Relocation pain cards (.int-item-card) → match SMBs intro cards: 32px padding, body 18px, 32 gap,
   responsive (3-col desktop → stack on mobile). */
.rp-relocation .rp-relo-pain .int-item-card {
  padding: 32px !important;
}
.rp-relocation .rp-relo-pain .grid-cols-3 {
  gap: 32px !important;
}
.rp-relocation .rp-relo-pain .int-item-card .intname,
.rp-relocation .rp-relo-pain .int-item-card p {
  font-size: 18px !important;
  line-height: 1.5 !important;
  /* 2026-07-14: red-✕ pain-card text was weight 400 / grey #2A2A2A; spec wants bold + navy.
     #4a5878 = the kit body navy (apis.css pain/benefit/how text). */
  font-weight: 700 !important;
  color: #4a5878 !important;
}
/* Icon → text gap = exactly 24px like SMBs intro cards. Relo stacks 3 margins (icon
   margin-bottom 14 + .expand growth + text margin-top 20); zero them all and use ONE 24px gap. */
.rp-relocation .rp-relo-pain .int-item-card .expand {
  flex-grow: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}
.rp-relocation .rp-relo-pain .int-item-card .int-item-img { margin-bottom: 0 !important; }
.rp-relocation .rp-relo-pain .int-item-card .mt5 { margin-top: 24px !important; }
.rp-relocation .rp-relo-pain .int-item-card .mt5 > * { margin-top: 0 !important; }
@media (max-width: 991px) {
  .rp-relocation .rp-relo-pain .grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
}

/* Relocation feature stats row (.relo-stats-row) — lay horizontally like the LP "One platform"
   feature-split stats (32px blue number, 14px gray label, 3 across) instead of stacking. */
.relo-stats-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  align-items: flex-start !important;
}
.relo-stats-row .lp-stat { display: flex !important; flex-direction: column !important; flex: 1 0 120px !important; }
.relo-stats-row .lp-stat-num {
  font-size: 32px !important; line-height: 1.1 !important; font-weight: 700 !important;
  color: #114EF7 !important; margin: 0 0 4px !important;
}
.relo-stats-row .lp-stat-label {
  font-size: 14px !important; line-height: 1.4 !important; color: #545454 !important;
}

/* Relocation brands → use the homepage khero-brands (added in body) instead of the old embedded
   hero brands. Hide the embedded strip, drop the hero's rounded bottom, and merge khero-brands
   into the hero lavender (same as SMBs). */
body.page-template-page-relocation .rp-relo-hero .rp-hero-brands { display: none !important; }
body.page-template-page-relocation .hero_double_section.new_rp_hero_double_section.new_rp_hero_double_section_bg.new_rp_hero_double_section_bg_extra_layer {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding-bottom: 0 !important;
}
.rp-relocation .rp-khero-brands {
  background-color: rgb(228, 235, 254) !important;
  border-bottom-left-radius: 48px !important;
  border-bottom-right-radius: 48px !important;
  margin-top: 0 !important;
  padding: 24px 24px 48px !important;
}
.rp-relocation .rp-khero-brands .new_landing_page_brands_header {
  text-align: center !important; font-size: 24px !important; line-height: 40px !important;
  font-weight: 700 !important; color: #021143 !important; margin: 0 0 20px !important; text-transform: none !important;
}
.rp-relocation .rp-khero-brands .new_landing_page_brands_header .highlight-it-blue { color: #114EF7 !important; }
.rp-relocation .rp-khero-brands .new-listed-brands-sub-section {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important;
  justify-content: center !important; gap: 16px 28px !important;
}
.rp-relocation .rp-khero-brands .new-listed-brands-sub-section-img { height: 36px !important; width: auto !important; }
.rp-relocation .rp-khero-brands .new-listed-brands-sub-section-img.blue-filter { filter: invert(85%) !important; }
@media (max-width: 991px) {
  .rp-relocation .rp-khero-brands .new-listed-brands-sub-section { flex-wrap: nowrap !important; gap: 8px !important; }
  .rp-relocation .rp-khero-brands .new-listed-brands-sub-section-img { min-width: 0 !important; }
}
@media (max-width: 767px) {
  .rp-relocation .rp-khero-brands .new-listed-brands-sub-section {
    display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
    justify-content: center !important; align-items: center !important;
    gap: 8px !important; grid-template-columns: none !important;
  }
}

/* Mohamed 2026-07-10: AR only — the twin-CTA row wrapper carries a 15px L/R padding
   (RTL stylesheet) that EN doesn't, insetting the yellow section. Remove it so the AR
   "Try RemotePass" section spans full width like EN. */
html[dir="rtl"] .kt-row-column-wrap.kt-has-1-columns:has(.new-footer-banner-container) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Mohamed 2026-07-10: twin-CTA "Try RemotePass" boxes stack (one under the other)
   starting from tablet (≤991), not just mobile. */
@media (max-width: 991px) {
  .new-footer-banner-container { flex-direction: column !important; align-items: stretch !important; }
  .new-footer-banner-container > * { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; }
}

/* Mohamed 2026-07-10: footer trust badge row — grouped into .rp-kf-g2group (5 G2)
   + .rp-kf-trustgroup (SOC+GDPR) by footer-badge-groups.js, for per-device layout.
   Desktop: everything on one line, left-aligned (app block stays right). */
.rp-kf-badgerow { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 16px !important; justify-content: flex-start !important; }
.rp-kf-g2group, .rp-kf-trustgroup { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 16px !important; }
.rp-kf-trustgroup { margin-block-start: 0px !important; }

/* Desktop (≥992): keep the footer 2-col grid side-by-side and let the badges column
   size to its content (so all badges stay on ONE line); app column takes the rest.
   The default fixed `604px 604px` grid needs ~1240px and stacks on narrower desktops. */
@media (min-width: 992px) {
  .kb-row-layout-idrpft .kt-row-column-wrap.kt-has-2-columns {
    grid-template-columns: max-content minmax(0, 1fr) !important;
  }
}

/* Tablet (768–991): 5 G2 + SOC + GDPR all on one line. */
@media (min-width: 768px) and (max-width: 991px) {
  .rp-kf-badgerow { flex-wrap: nowrap !important; justify-content: space-between !important; }
  .rp-kf-col-apps { margin-top: 24px !important; }
}

/* Mobile (≤767): G2 badges on one centered line, SOC+GDPR centered below,
   app block below that, aligned to start (left EN / right AR). */
@media (max-width: 767px) {
  .rp-kf-badgerow { flex-direction: column !important; align-items: center !important; }
  .rp-kf-g2group, .rp-kf-trustgroup { justify-content: center !important; flex-wrap: wrap !important; }
}
.rp-kf-badgerow img[src*="GDPR"] { width: 60px !important; height: 57px !important; object-fit: contain !important; }
/* 2026-07-27: DELETED a dead rule that matched `g2-summer2026-leader.png`. The badge has always
   been served as .svg, so the selector never matched and the rule never applied — it was noise
   that reads like live styling. Deliberately NOT re-pointed at the .svg: the rule wanted
   height:80px, while the badge actually renders 88x100 (computed height 99.72px) from Mohamed's
   2026-07-10 design, so "fixing" the selector would SHRINK it by ~20px. Badge sizing is his call
   and leadership's badge complaint is parked with Greg, so deleting is the change that makes the
   file honest without touching the render. */
/* Footer app column: keep the block (label + store buttons) hugging the end
   (right in EN / left in AR via margin-inline-start:auto), but shrink the column
   to the buttons' width and start-align the label so its text sits at the buttons'
   leading edge instead of riding the far right. Logical props → auto-mirrors in RTL. */
.rp-kf-col-apps .kt-inside-inner-col {
  width: fit-content !important;
  max-width: 100% !important;
  margin-inline-start: auto !important;
  align-items: stretch !important;
}
.rp-kf-col-apps .rp-kf-app-label { text-align: start !important; }
/* Tablet + mobile: app block aligns to start (left EN / right AR) instead of hugging
   the far edge. Placed after the desktop rule so it wins at ≤991px. */
@media (max-width: 991px) {
  .rp-kf-col-apps .kt-inside-inner-col { margin-inline-start: 0 !important; }
}

/* Mohamed 2026-07-10: testimonial header — 24px padding (desktop + tablet), 16px mobile;
   middle G2 badge taller (100px) than the two side badges (~88px). */
.rp-pt-head { padding: 24px !important; }
@media (max-width: 767px) { .rp-pt-head { padding: 16px !important; } }
.rp-pt-badges .rp-pt-badge:nth-of-type(2) { height: 100px !important; width: auto !important; }
.rp-ktestimonials .rp-pt-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 767px) {
  .rp-ktestimonials .rp-pt-badge:nth-child(n+2) { display: inline-block !important; }
}

/* Mohamed 2026-07-10: testimonial header "G2 Leaders in EMEA + MENA" label —
   drop the pill background, plain black text. (home rule body.home .rp-pt-g2 gave it
   a blue pill; this shared component now reads as a plain caption everywhere.) */
.rp-pt-g2 {
  background: none !important;
  color: #000 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 48px !important;
}

/* Mohamed 2026-07-10: the brands "Trusted by…" heading carries the global .dt-only
   utility (hidden <=991px), and there's no tablet/mobile twin — so it vanished on
   tablet. Re-show this specific heading at <=991px. */
@media screen and (max-width: 991px) {
  body.page-template-page-local-payroll .new_landing_page_brands_header.dt-only {
    display: block !important;
  }
}

/* Mohamed 2026-07-10: FAQ container max-width — global. CoR also centered. */
.faq-sub-container.faq-sub-container-extra-style {
  max-width: 1300px !important;
}
.rp-cor .faq-sub-container.faq-sub-container-extra-style {
  max-width: 1300px !important;
  margin: 0 auto !important;
}
/* Mohamed 2026-07-11: SMBs hero → match local-payroll design exactly (content kept).
   LP lavender top-fade gradient (not the flat linear), 48px rounded bottom, LP H1 sizing,
   LP image responsiveness, text centered on tablet. */
.rp-smbs .rp-ent-hero {
  background-color: #fff !important;
  background-image: linear-gradient(rgba(228, 235, 254, 0), rgb(228, 235, 254) 120px, rgb(228, 235, 254)) !important;
  /* bottom rounding moved to the brands bar below so the lavender continues through it (LP-style) */
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding-bottom: 0 !important;
  padding-top: 40px !important; /* desktop; tablet/mobile → 56px below */
}
@media (max-width: 991px) {
  .rp-smbs .rp-ent-hero { padding-top: 56px !important; }
}
/* Mohamed 2026-07-11: SMBs now uses the SAME brands cloud as the homepage hero (.rp-khero-brands,
   flex-wrap + hide_it_on_mobile). Replicate the home styling (home rules are scoped to .rp-khero)
   AND merge it into the SMBs hero lavender block (rounded bottom at the very end). */
.rp-smbs .rp-khero-brands {
  background-color: rgb(228, 235, 254) !important;
  border-bottom-left-radius: 48px !important;
  border-bottom-right-radius: 48px !important;
  margin-top: 0 !important;
  padding: 24px 24px 48px !important;
}
.rp-smbs .rp-khero-brands .new_landing_page_brands_header {
  text-align: center !important; font-size: 24px !important; line-height: 40px !important;
  font-weight: 700 !important; color: #021143 !important; margin: 0 0 20px !important; text-transform: none !important;
}
.rp-smbs .rp-khero-brands .new_landing_page_brands_header .highlight-it-blue { color: #114EF7 !important; }
.rp-smbs .rp-khero-brands .new-listed-brands-sub-section {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important;
  justify-content: center !important; gap: 16px 28px !important;
}
.rp-smbs .rp-khero-brands .new-listed-brands-sub-section-img { height: 36px !important; width: auto !important; }
.rp-smbs .rp-khero-brands .new-listed-brands-sub-section-img.blue-filter { filter: invert(85%) !important; }
/* NB: home does NOT hide any logo on mobile (the hide_it_on_mobile class is inert there — the only
   display:none rule is scoped to .rp-spend). So SMBs shows all 7 too, wrapping. No hide rule here. */
/* Match home's responsive logo-cloud spacing (home rules are .rp-khero-scoped):
   tablet ≤991 = single row nowrap gap 8; mobile ≤767 = wrap gap 8, centered, clear the
   responsive-global.min.css display:grid override. */
@media (max-width: 991px) {
  .rp-smbs .rp-khero-brands .new-listed-brands-sub-section { flex-wrap: nowrap !important; gap: 8px !important; }
  .rp-smbs .rp-khero-brands .new-listed-brands-sub-section-img { min-width: 0 !important; }
}
@media (max-width: 767px) {
  .rp-smbs .rp-khero-brands .new-listed-brands-sub-section {
    display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
    justify-content: center !important; align-items: center !important;
    gap: 8px !important; grid-template-columns: none !important;
  }
}
.rp-smbs .rp-ent-hero__h1 { font-size: 2.95rem !important; line-height: 56px !important; color: #021143 !important; }
/* CTA buttons → match LP hero .btn (radius 8, 16.25px/500, 15/32 pad, 57 tall). */
.rp-smbs .rp-ent-hero__cta { height: 57px !important; padding: 15px 32px !important; font-size: 16.25px !important; font-weight: 500 !important; border-radius: 8px !important; border: 1px solid #114ef7 !important; }
.rp-smbs .rp-ent-hero__cta--primary { background: #114ef7 !important; color: #fff !important; }
.rp-smbs .rp-ent-hero__cta--ghost { background: #fff !important; color: #114ef7 !important; }
/* Desktop: mirror LP row exactly — 1300 container with 24px inner padding (content 1252 like LP,
   so the col gap ≈ LP's), text left, space-between. */
@media (min-width: 992px) {
  .rp-smbs .rp-ent-hero__inner { max-width: 1300px !important; padding-left: 24px !important; padding-right: 24px !important; gap: 0 !important; justify-content: space-between !important; align-items: center !important; }
  .rp-smbs .rp-ent-hero__text { flex: 0 1 626px !important; max-width: 626px !important; text-align: start !important; }
  .rp-smbs .rp-ent-hero__text .rp-ent-hero__pills, .rp-smbs .rp-ent-hero__text .rp-ent-hero__ctas { justify-content: flex-start !important; }
  .rp-smbs .rp-ent-hero__media { flex: 0 1 610px !important; justify-content: center !important; }
}
/* Mohamed 2026-07-11: partner-program — revert-hero blue band → midnight-blue. */
.rp-partner-program .hero_double_section_2.hero_double_section_revert.bg-blue {
  background-color: var(--midnight-blue) !important;
}
/* Mohamed 2026-07-11: "Why Partner…" section header — smaller on mobile. */
@media (max-width: 767px) {
  .new_landing_page_payroll_header.new_landing_page_badge_header.new_landing_page_apple-pay_header.new_landing_page_apple-pay_add-header.new-rp-section-header.no-pt.mb.max-width {
    font-size: 1.75rem;
    line-height: 2.5rem;
  }
}

/* Mohamed 2026-07-11: trusted-badges sub-header (white variant) — white text + 24px top padding. */
.badges-trusted-new-design-main-sub-header.badges-trusted-new-design-main-sub-header-white.gray_text.text-medium.text-color-white.adjust-mx-py {
  color: white;
  padding-top: 24px;
  margin-top: 0px;
}

/* Mohamed 2026-07-11: partner-program step swipers init only ≤767 — zero the grid column gap
   ONLY there (so the swiper snaps centered). Desktop/tablet keep the 16px 3-column grid gap. */
@media (max-width: 767px) {
  .rp-partner-program .grid-3-steps {
    grid-column-gap: 0px !important;
    column-gap: 0px !important;
  }
  /* "Partner Types" swiper (.with-mx) adds 24px L/R margins on top of the container
     padding → asymmetric/overflow on mobile where the swiper is live. Zero them so the
     slide is centered like the "Why Partner" swiper. */
  .rp-partner-program .swiper-steps-with-img.with-mx {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Swiper step cards: keep text left (start = right in AR) and content justified to the top. */
  .rp-partner-program .swiper-steps .grid-step-card,
  .rp-partner-program .swiper-steps-with-img .grid-step-card {
    text-align: start !important;
    justify-content: flex-start !important;
  }
}

/* Mohamed 2026-07-11: partner-program step cards — top-justify content (all widths). */
.rp-partner-program .grid-step-card.grid-step-card-extra-style {
  justify-content: flex-start;
}
/* Card header text — left in EN / right in AR (logical start). !important beats
   qa-fixes-pages.min.css's center rule (same specificity, loads later). */
.rp-partner-program .grid-step-card-header {
  text-align: start !important;
}
/* Mohamed 2026-07-11: AR partner-program step swipers — migration-rtl.min.css forces the
   wrapper to display:flex; flex-direction:column (EN uses grid), which stacks the slides and
   breaks the carousel. Force grid like EN so AR behaves identically. */
html[dir="rtl"] .rp-partner-program .grid-3-steps {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  flex-direction: row !important;
}
/* AR step section padding = 24px like EN (migration-rtl shipped 16px). */
html[dir="rtl"] .rp-partner-program .hero_double_section_2.hero_double_section_revert {
  padding-left: 24px !important;
  padding-right: 24px !important;
}
/* Mohamed 2026-07-11: partner-program hero_double_section — no top margin (all devices). */
.rp-partner-program .hero_double_section {
  margin-top: 0px !important;
}
/* Tablet: hero row — no row gap. */
@media (min-width: 768px) and (max-width: 991px) {
  .rp-partner-program .double-section-hero-container.security-trust-double-section-hero-container {
    grid-row-gap: 0px;
  }
}

/* Chat-box sub-container full width from tablet down. */
@media screen and (max-width: 991px) {
  .rp-partner-program .chat-box-sub-container { max-width: 100% !important; }
}
/* .mw5 — full width, centered. */
.rp-partner-program .mw5 {
  max-width: 100% !important;
  margin-left: auto;
  margin-right: auto;
}

/* Mohamed 2026-07-11: partner-program hero image — tablet 75% centered, mobile 100%. */
@media (min-width: 768px) and (max-width: 991px) {
  .rp-partner-program .main-hero-section-img { width: 75% !important; margin: auto; }
}
@media (max-width: 767px) {
  .rp-partner-program .main-hero-section-img { width: 100% !important; margin: auto; }
}

/* Mohamed 2026-07-11: sync container (extra-style) — no L/R padding from tablet down (≤991). */
@media (max-width: 991px) {
  .rp-container.py10.new-rp-sync-container.new-rp-sync-container-extra-style {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}

/* Mohamed 2026-07-11: media centered (all widths), text/sub allowed full width. */
.rp-smbs .rp-ent-hero__media { justify-content: center !important; }
/* Match LP: sub 16px, H1 mb 16, pill 13px navy. */
.rp-smbs .rp-ent-hero__h1 { margin-bottom: 16px !important; }
.rp-smbs .rp-ent-hero__sub { font-size: 16px !important; line-height: 24px !important; color: rgb(84,84,84) !important; max-width: 100% !important; }
/* Rating pills → match the homepage hero pills exactly (home .g2_tags_v3): 12px, #044D80,
   no shadow, 16px gap between the two pills. */
.rp-smbs .rp-ent-hero__pill { font-size: 12px !important; color: #044D80 !important; box-shadow: none !important; }
.rp-smbs .rp-ent-hero__pills { gap: 16px !important; }
/* Tablet: mirror LP — stacked (image below), text hugs the side (LEFT in EN / RIGHT in AR — the
   base align-items:center was centering the whole text block), image 65% centered, H1 2.25/53.
   `start`/`flex-start` are logical → auto-mirror for AR. */
@media (max-width: 991px) {
  .rp-smbs .rp-ent-hero__text { max-width: 100% !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .rp-smbs .rp-ent-hero__inner { flex-direction: column !important; align-items: stretch !important; text-align: start !important; }
  .rp-smbs .rp-ent-hero__text { text-align: start !important; }
  .rp-smbs .rp-ent-hero__text .rp-ent-hero__pills, .rp-smbs .rp-ent-hero__text .rp-ent-hero__ctas { justify-content: flex-start !important; }
  .rp-smbs .rp-ent-hero__img { width: 65% !important; margin: auto !important; }
  .rp-smbs .rp-ent-hero__h1 { font-size: 2.25rem !important; line-height: 53px !important; }
}
/* Mobile: same — stacked, text LEFT (EN) / RIGHT (AR), image 100% centered, H1 32/40. */
@media (max-width: 767px) {
  .rp-smbs .rp-ent-hero__inner { flex-direction: column !important; align-items: stretch !important; text-align: start !important; }
  .rp-smbs .rp-ent-hero__text { text-align: start !important; }
  .rp-smbs .rp-ent-hero__text .rp-ent-hero__pills, .rp-smbs .rp-ent-hero__text .rp-ent-hero__ctas { justify-content: flex-start !important; }
  .rp-smbs .rp-ent-hero__img { width: 100% !important; margin: auto !important; }
  .rp-smbs .rp-ent-hero__h1 { font-size: 32px !important; line-height: 40px !important; }
}

/* ==========================================================================
   Mohamed 2026-07-11: hr-managers hero + brands → SAME treatment as SMBs (full match).
   Twin of the .rp-smbs hero block above, scoped to .rp-hr. Content kept (HR mock/copy).
   ========================================================================== */
.rp-hr .rp-ent-hero {
  background-color: #fff !important;
  background-image: linear-gradient(rgba(228, 235, 254, 0), rgb(228, 235, 254) 120px, rgb(228, 235, 254)) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding-bottom: 0 !important;
  padding-top: 40px !important;
}
@media (max-width: 991px) {
  .rp-hr .rp-ent-hero { padding-top: 56px !important; }
}
.rp-hr .rp-khero-brands {
  background-color: rgb(228, 235, 254) !important;
  border-bottom-left-radius: 48px !important;
  border-bottom-right-radius: 48px !important;
  margin-top: 0 !important;
  padding: 24px 24px 48px !important;
}
.rp-hr .rp-khero-brands .new_landing_page_brands_header {
  text-align: center !important; font-size: 24px !important; line-height: 40px !important;
  font-weight: 700 !important; color: #021143 !important; margin: 0 0 20px !important; text-transform: none !important;
}
.rp-hr .rp-khero-brands .new_landing_page_brands_header .highlight-it-blue { color: #114EF7 !important; }
.rp-hr .rp-khero-brands .new-listed-brands-sub-section {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important;
  justify-content: center !important; gap: 16px 28px !important;
}
.rp-hr .rp-khero-brands .new-listed-brands-sub-section-img { height: 36px !important; width: auto !important; }
.rp-hr .rp-khero-brands .new-listed-brands-sub-section-img.blue-filter { filter: invert(85%) !important; }
@media (max-width: 991px) {
  .rp-hr .rp-khero-brands .new-listed-brands-sub-section { flex-wrap: nowrap !important; gap: 8px !important; }
  .rp-hr .rp-khero-brands .new-listed-brands-sub-section-img { min-width: 0 !important; }
}
@media (max-width: 767px) {
  .rp-hr .rp-khero-brands .new-listed-brands-sub-section {
    display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
    justify-content: center !important; align-items: center !important;
    gap: 8px !important; grid-template-columns: none !important;
  }
}
/* ==========================================================================
   Mohamed 2026-07-11: legal-managers hero + brands → SAME treatment as hr-managers (2026-07-23, full match).
   Twin of the .rp-hr hero block above, scoped to .rp-legal. Content kept (legal mock/copy).
   ========================================================================== */
.rp-legal .rp-ent-hero {
  background-color: #fff !important;
  background-image: linear-gradient(rgba(228, 235, 254, 0), rgb(228, 235, 254) 120px, rgb(228, 235, 254)) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding-bottom: 0 !important;
  padding-top: 40px !important;
}
@media (max-width: 991px) {
  .rp-legal .rp-ent-hero { padding-top: 56px !important; }
}
.rp-legal .rp-khero-brands {
  background-color: rgb(228, 235, 254) !important;
  border-bottom-left-radius: 48px !important;
  border-bottom-right-radius: 48px !important;
  margin-top: 0 !important;
  padding: 24px 24px 48px !important;
}
.rp-legal .rp-khero-brands .new_landing_page_brands_header {
  text-align: center !important; font-size: 24px !important; line-height: 40px !important;
  font-weight: 700 !important; color: #021143 !important; margin: 0 0 20px !important; text-transform: none !important;
}
.rp-legal .rp-khero-brands .new_landing_page_brands_header .highlight-it-blue { color: #114EF7 !important; }
.rp-legal .rp-khero-brands .new-listed-brands-sub-section {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important;
  justify-content: center !important; gap: 16px 28px !important;
}
.rp-legal .rp-khero-brands .new-listed-brands-sub-section-img { height: 36px !important; width: auto !important; }
.rp-legal .rp-khero-brands .new-listed-brands-sub-section-img.blue-filter { filter: invert(85%) !important; }
@media (max-width: 991px) {
  .rp-legal .rp-khero-brands .new-listed-brands-sub-section { flex-wrap: nowrap !important; gap: 8px !important; }
  .rp-legal .rp-khero-brands .new-listed-brands-sub-section-img { min-width: 0 !important; }
}
@media (max-width: 767px) {
  .rp-legal .rp-khero-brands .new-listed-brands-sub-section {
    display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
    justify-content: center !important; align-items: center !important;
    gap: 8px !important; grid-template-columns: none !important;
  }
}
/* =========================================================================
   Finance Managers hero — pixel-matched to local-payroll / hr-managers (2026-07-22).
   Twin of the .rp-hr hero block above; content kept finance-specific.
   ========================================================================= */
.rp-finance .rp-ent-hero {
  background-color: #fff !important;
  background-image: linear-gradient(rgba(228, 235, 254, 0), rgb(228, 235, 254) 120px, rgb(228, 235, 254)) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding-bottom: 0 !important;
  padding-top: 40px !important;
}
@media (max-width: 991px) {
  .rp-finance .rp-ent-hero { padding-top: 56px !important; }
}
/* Finance Managers — khero-brands logo cloud (same block as HR/SMBs, scoped to .rp-finance) */
.rp-finance .rp-khero-brands {
  background-color: rgb(228, 235, 254) !important;
  border-bottom-left-radius: 48px !important;
  border-bottom-right-radius: 48px !important;
  margin-top: 0 !important;
  padding: 24px 24px 48px !important;
}
.rp-finance .rp-khero-brands .new_landing_page_brands_header {
  text-align: center !important; font-size: 24px !important; line-height: 40px !important;
  font-weight: 700 !important; color: #021143 !important; margin: 0 0 20px !important; text-transform: none !important;
}
.rp-finance .rp-khero-brands .new_landing_page_brands_header .highlight-it-blue { color: #114EF7 !important; }
.rp-finance .rp-khero-brands .new-listed-brands-sub-section {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important;
  justify-content: center !important; gap: 16px 28px !important;
}
.rp-finance .rp-khero-brands .new-listed-brands-sub-section-img { height: 36px !important; width: auto !important; }
.rp-finance .rp-khero-brands .new-listed-brands-sub-section-img.blue-filter { filter: invert(85%) !important; }
@media (max-width: 991px) {
  .rp-finance .rp-khero-brands .new-listed-brands-sub-section { flex-wrap: nowrap !important; gap: 8px !important; }
  .rp-finance .rp-khero-brands .new-listed-brands-sub-section-img { min-width: 0 !important; }
}
@media (max-width: 767px) {
  .rp-finance .rp-khero-brands .new-listed-brands-sub-section {
    display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
    justify-content: center !important; align-items: center !important;
    gap: 8px !important; grid-template-columns: none !important;
  }
}
/* Finance hero elements — LP pixel-match (2026-07-22) */
/* Desktop (≥992px) */
.rp-finance .rp-ent-hero__h1 { font-size: 2.95rem !important; line-height: 56px !important; color: #021143 !important; margin-bottom: 16px !important; }
.rp-finance .rp-ent-hero__sub { font-size: 16px !important; line-height: 24px !important; color: rgb(84,84,84) !important; max-width: 100% !important; margin-bottom: 16px !important; }
.rp-finance .rp-ent-hero__cta { height: 57px !important; padding: 15px 32px !important; font-size: 16.25px !important; font-weight: 500 !important; border-radius: 8px !important; border: 1px solid #114ef7 !important; white-space: nowrap !important; }
.rp-finance .rp-ent-hero__cta--primary { background: #114ef7 !important; color: #fff !important; }
.rp-finance .rp-ent-hero__cta--ghost { background: #fff !important; color: #114ef7 !important; }
.rp-finance .rp-ent-hero__ctas { flex-direction: row !important; flex-wrap: nowrap !important; gap: 16px !important; align-items: center !important; }
.rp-finance .rp-ent-hero__pill { font-size: 12px !important; color: #044D80 !important; box-shadow: none !important; }
.rp-finance .rp-ent-hero__pills { gap: 16px !important; }
.rp-finance .rp-ent-hero__media { justify-content: center !important; }
@media (min-width: 992px) {
  .rp-finance .rp-ent-hero__inner { max-width: 1300px !important; padding-left: 24px !important; padding-right: 24px !important; gap: 0 !important; justify-content: space-between !important; align-items: center !important; }
  .rp-finance .rp-ent-hero__text { flex: 0 1 626px !important; max-width: 626px !important; text-align: start !important; }
  .rp-finance .rp-ent-hero__text .rp-ent-hero__pills,
  .rp-finance .rp-ent-hero__text .rp-ent-hero__ctas { justify-content: flex-start !important; }
  .rp-finance .rp-ent-hero__media { flex: 0 1 610px !important; }
  .rp-finance .rp-ent-hero__img { width: 610px !important; max-width: 100% !important; }
  /* RTL desktop: row-reverse in RTL context = text LEFT image RIGHT (wrong).
     flex-direction:row in RTL flows right→left: text RIGHT, image LEFT ✓ */
  [dir="rtl"] .rp-finance .rp-ent-hero__inner { flex-direction: row !important; }
}
/* Tablet (≤991px): scale h1, CTAs side-by-side; text-align:start respects RTL automatically */
@media (max-width: 991px) {
  .rp-finance .rp-ent-hero__h1 { font-size: 36px !important; line-height: 40px !important; }
  .rp-finance .rp-ent-hero__sub { line-height: 25.6px !important; margin-bottom: 24px !important; }
  .rp-finance .rp-ent-hero__text { max-width: 100% !important; text-align: start !important; }
  .rp-finance .rp-ent-hero__inner { align-items: flex-start !important; }
  .rp-finance .rp-ent-hero__pills { justify-content: flex-start !important; }
  .rp-finance .rp-ent-hero__ctas { justify-content: flex-start !important; }
}
/* Tablet image: 65% centred */
@media (min-width: 768px) and (max-width: 991px) {
  .rp-finance .rp-ent-hero__img {
    width: 65% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    display: block !important;
  }
}
/* Mobile (≤767px): image full-width, h1 smaller */
@media (max-width: 767px) {
  .rp-finance .rp-ent-hero__img { width: 100% !important; display: block !important; }
}
@media (max-width: 480px) {
  .rp-finance .rp-ent-hero__h1 { font-size: 32px !important; line-height: 40px !important; }
}
.rp-hr .rp-ent-hero__h1 { font-size: 2.95rem !important; line-height: 56px !important; color: #021143 !important; margin-bottom: 16px !important; }
.rp-hr .rp-ent-hero__cta { height: 57px !important; padding: 15px 32px !important; font-size: 16.25px !important; font-weight: 500 !important; border-radius: 8px !important; border: 1px solid #114ef7 !important; }
.rp-hr .rp-ent-hero__cta--primary { background: #114ef7 !important; color: #fff !important; }
.rp-hr .rp-ent-hero__cta--ghost { background: #fff !important; color: #114ef7 !important; }
@media (min-width: 992px) {
  .rp-hr .rp-ent-hero__inner { max-width: 1300px !important; padding-left: 24px !important; padding-right: 24px !important; gap: 0 !important; justify-content: space-between !important; align-items: center !important; }
  .rp-hr .rp-ent-hero__text { flex: 0 1 626px !important; max-width: 626px !important; text-align: start !important; }
  .rp-hr .rp-ent-hero__text .rp-ent-hero__pills, .rp-hr .rp-ent-hero__text .rp-ent-hero__ctas { justify-content: flex-start !important; }
  .rp-hr .rp-ent-hero__media { flex: 0 1 610px !important; justify-content: center !important; }
}
.rp-hr .rp-ent-hero__media { justify-content: center !important; }
.rp-hr .rp-ent-hero__sub { font-size: 16px !important; line-height: 24px !important; color: rgb(84,84,84) !important; max-width: 100% !important; }
.rp-hr .rp-ent-hero__pill { font-size: 12px !important; color: #044D80 !important; box-shadow: none !important; }
.rp-hr .rp-ent-hero__pills { gap: 16px !important; }
@media (max-width: 991px) {
  .rp-hr .rp-ent-hero__text { max-width: 100% !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .rp-hr .rp-ent-hero__inner { flex-direction: column !important; align-items: stretch !important; text-align: start !important; }
  .rp-hr .rp-ent-hero__text { text-align: start !important; }
  .rp-hr .rp-ent-hero__text .rp-ent-hero__pills, .rp-hr .rp-ent-hero__text .rp-ent-hero__ctas { justify-content: flex-start !important; }
  .rp-hr .rp-ent-hero__img { width: 65% !important; margin: auto !important; }
  .rp-hr .rp-ent-hero__h1 { font-size: 2.25rem !important; line-height: 53px !important; }
}
@media (max-width: 767px) {
  .rp-hr .rp-ent-hero__inner { flex-direction: column !important; align-items: stretch !important; text-align: start !important; }
  .rp-hr .rp-ent-hero__text { text-align: start !important; }
  .rp-hr .rp-ent-hero__text .rp-ent-hero__pills, .rp-hr .rp-ent-hero__text .rp-ent-hero__ctas { justify-content: flex-start !important; }
  .rp-hr .rp-ent-hero__img { width: 100% !important; margin: auto !important; }
  .rp-hr .rp-ent-hero__h1 { font-size: 32px !important; line-height: 40px !important; }
}


/* legal-managers hero elements → SAME pixel-match as hr-managers, all 3 breakpoints
   (2026-07-23, clone of the .rp-hr block above). */
.rp-legal .rp-ent-hero__h1 { font-size: 2.95rem !important; line-height: 56px !important; color: #021143 !important; margin-bottom: 16px !important; }
.rp-legal .rp-ent-hero__cta { height: 57px !important; padding: 15px 32px !important; font-size: 16.25px !important; font-weight: 500 !important; border-radius: 8px !important; border: 1px solid #114ef7 !important; }
.rp-legal .rp-ent-hero__cta--primary { background: #114ef7 !important; color: #fff !important; }
.rp-legal .rp-ent-hero__cta--ghost { background: #fff !important; color: #114ef7 !important; }
@media (min-width: 992px) {
  .rp-legal .rp-ent-hero__inner { max-width: 1300px !important; padding-left: 24px !important; padding-right: 24px !important; gap: 0 !important; justify-content: space-between !important; align-items: center !important; }
  .rp-legal .rp-ent-hero__text { flex: 0 1 626px !important; max-width: 626px !important; text-align: start !important; }
  .rp-legal .rp-ent-hero__text .rp-ent-hero__pills, .rp-legal .rp-ent-hero__text .rp-ent-hero__ctas { justify-content: flex-start !important; }
  .rp-legal .rp-ent-hero__media { flex: 0 1 610px !important; justify-content: center !important; }
}
.rp-legal .rp-ent-hero__media { justify-content: center !important; }
.rp-legal .rp-ent-hero__sub { font-size: 16px !important; line-height: 24px !important; color: rgb(84,84,84) !important; max-width: 100% !important; }
.rp-legal .rp-ent-hero__pill { font-size: 12px !important; color: #044D80 !important; box-shadow: none !important; }
.rp-legal .rp-ent-hero__pills { gap: 16px !important; }
@media (max-width: 991px) {
  .rp-legal .rp-ent-hero__text { max-width: 100% !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .rp-legal .rp-ent-hero__inner { flex-direction: column !important; align-items: stretch !important; text-align: start !important; }
  .rp-legal .rp-ent-hero__text { text-align: start !important; }
  .rp-legal .rp-ent-hero__text .rp-ent-hero__pills, .rp-legal .rp-ent-hero__text .rp-ent-hero__ctas { justify-content: flex-start !important; }
  .rp-legal .rp-ent-hero__img { width: 65% !important; margin: auto !important; }
  .rp-legal .rp-ent-hero__h1 { font-size: 2.25rem !important; line-height: 53px !important; }
}
@media (max-width: 767px) {
  .rp-legal .rp-ent-hero__inner { flex-direction: column !important; align-items: stretch !important; text-align: start !important; }
  .rp-legal .rp-ent-hero__text { text-align: start !important; }
  .rp-legal .rp-ent-hero__text .rp-ent-hero__pills, .rp-legal .rp-ent-hero__text .rp-ent-hero__ctas { justify-content: flex-start !important; }
  .rp-legal .rp-ent-hero__img { width: 100% !important; margin: auto !important; }
  .rp-legal .rp-ent-hero__h1 { font-size: 32px !important; line-height: 40px !important; }
}


/* legal-managers AR desktop: image LEFT, text RIGHT (2026-07-23) — proper RTL mirror,
   same pattern as .rp-finance: in RTL, flex-direction:row flows right-to-left so the
   text (first child) lands on the RIGHT and the image on the LEFT. */
@media (min-width: 992px) {
  [dir="rtl"] .rp-legal .rp-ent-hero__inner { flex-direction: row !important; }
}

/* Mohamed 2026-07-11: SMBs CTA-band logo swapped to the RP white pin (118×125) — keep its
   aspect (the base .rp-ent-cta__icon forces 64×64 square, which would stretch it). */
.rp-smbs .rp-ent-cta__icon,
.rp-hr .rp-ent-cta__icon { width: auto !important; height: 64px !important; }

/* Mohamed 2026-07-11: .py10 container — drop the 7.3em bottom padding (was 7.3em).
   !important because migration-rtl.css re-declares 7.3em and loads after this on AR pages. */
.rp-section .rp-container.py10 { padding-bottom: 0px !important; }

/* Mohamed 2026-07-11: SMBs + hr-managers feature icons now full 48px SVG tiles (img) — drop the span's tile bg. */
.rp-smbs .rp-ent-features__icon,
.rp-hr .rp-ent-features__icon { background: transparent !important; }
.rp-smbs .rp-ent-features__icon img,
.rp-hr .rp-ent-features__icon img { width: 48px !important; height: 48px !important; }

/* Mohamed 2026-07-11: why-remotepass hero heading right-aligned in AR. */
html[dir="rtl"] .rp-hero-mb--light .rp-hero-mb__h { text-align: right !important; }

/* Mohamed 2026-07-11: why-remotepass feature-split media image — tablet 65% centered, mobile 100%. */
@media (min-width: 768px) and (max-width: 991px) {
  .rp-wrp-feature .rp-feature-split__media-img { width: 65% !important; margin: auto !important; display: block !important; }
}
@media (max-width: 767px) {
  .rp-wrp-feature .rp-feature-split__media-img { width: 100% !important; }
}

/* Mohamed 2026-07-11: .rp-hero-mb--light .rp-container side padding — 24px desktop/tablet, 16px mobile. */
.rp-hero-mb--light .rp-container { padding-left: 24px !important; padding-right: 24px !important; }
@media (max-width: 767px) {
  .rp-hero-mb--light .rp-container { padding-left: 16px !important; padding-right: 16px !important; }
}

/* Mohamed 2026-07-10: SpendCards banner row — padding-top 16px desktop/tablet, 0 mobile. */
.kb-row-layout-wrap.kb-row-layout-idspendb_row.alignnone.wp-block-kadence-rowlayout { padding-top: 16px !important; }
@media (max-width: 767px) {
  .kb-row-layout-wrap.kb-row-layout-idspendb_row.alignnone.wp-block-kadence-rowlayout { padding-top: 0px !important; }
}

/* Mohamed 2026-07-10: SpendCards blue banner — flags image spacing + mid-column tablet padding. */
@media (min-width: 768px) and (max-width: 991px) {
  .rp-kspendbanner .rp-spendb-flags { margin-bottom: 16px !important; }
  body.home .rp-kspendbanner .kadence-columnspendb_mid > .kt-inside-inner-col { padding-top: 24px !important; }
}
@media (max-width: 767px) {
  .rp-kspendbanner .rp-spendb-flags { margin-bottom: 8px !important; }
  body.home .rp-kspendbanner .kadence-columnspendb_mid > .kt-inside-inner-col {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}

/* Mohamed 2026-07-10: FAQ heading (الأسئلة الشائعة) right-aligned in AR, not centered. */
html[dir="rtl"] .guide_hiring_faq_h { text-align: right !important; }

/* Mohamed 2026-07-10: FAQ accordion question header — 20px desktop / 18px tablet / 16px mobile
   (EN + AR). Uses the .no-mb variant (2 classes) to beat an inline single-class 20px !important. */
.guide_hiring_faq_accordion_header_container_h.no-mb,
.guide_hiring_faq_accordion_header_container_h { font-size: 20px !important; }
@media (min-width: 768px) and (max-width: 991px) {
  .guide_hiring_faq_accordion_header_container_h.no-mb,
  .guide_hiring_faq_accordion_header_container_h { font-size: 18px !important; }
}
@media (max-width: 767px) {
  .guide_hiring_faq_accordion_header_container_h.no-mb,
  .guide_hiring_faq_accordion_header_container_h { font-size: 16px !important; }
}

/* Mohamed 2026-07-09: local-payroll hero image responsive (tablet 65% centered, mobile 100%). */
@media (min-width: 768px) and (max-width: 991px) {
  body.page-template-page-local-payroll .main-hero-section-img {
    width: 65% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    display: block !important;
  }
}
@media (max-width: 767px) {
  body.page-template-page-local-payroll .main-hero-section-img {
    width: 100% !important;
  }
}

/* Mohamed 2026-07-09: .rp-cm-cta top padding on tablet + mobile (<=991px). */
@media (max-width: 991px) {
  .rp-cm-cta { padding-top: 56px !important; }
}

/* Mohamed 2026-07-09: remove default browser focus/active outline on clickable
   elements globally (not part of the design). */
a:focus, a:active,
button:focus, button:active,
[role="button"]:focus, [role="button"]:active,
.btn:focus, .btn:active,
input:focus, select:focus, textarea:focus {
  outline: none !important;
}

/* ── Slack + Perks navy heroes (Greg decision 2026-07-09) ─────────────────────
   White → navy #021143 heroes per Figma (Slack 7747-162965 / Perks 1-89481).
   Scoped to each page's body class — the hero uses SHARED double-section classes,
   so an unscoped rule would leak to other pages. Navy is bounded to the hero band
   (the next section stays white). !important + body-class prefix so it also beats
   the AR RTL cascade. */

/* Slack (/slack-integration) */
body.page-template-page-slack-integration .new_rp_hero_double_section_bg { background: #021143 !important; }
/* base headline white; the .highlight-it-gold span keeps its own gold color */
body.page-template-page-slack-integration h1.double-slide-landing-page-left-main-header { color: #fff !important; }
/* "Try Now" flips from blue-bg/white-text → white-bg/blue-text (Figma) */
body.page-template-page-slack-integration a.new-rounded-btn-white { background: #fff !important; color: #114EF7 !important; }

/* Perks (/perks) — navy ONLY on the hero band, NOT .rp-perks (that wraps the white filter grid) */
body.page-template-page-perks .perks-double-slide-section { background: #021143 !important; }
body.page-template-page-perks h1.perks-double-slide-landing-page-main-header { color: #fff !important; }
body.page-template-page-perks .perks-double-slide-landing-page-label { color: #fff !important; }
/* Perks: the tiles column had a light dotted panel bg (rgb(239,242,247) + dot pattern) that showed as a
   light rectangle on the left half over the navy — the perks.svg tiles are transparent, so clear the
   container bg and let them float on the navy band (Figma: tiles float on navy, no white backing). */
body.page-template-page-perks .perks-double-slide-section-right { background: transparent !important; }

/* ============ BOOK A DEMO (/demo-request) — trusted-by strip missing its container (2026-07-14) ============ */
/* The shared rp-khero-brands part was placed in the demo-request template WITHOUT an .rp-container
   wrapper: every ancestor is full-width (measured: strip x=0, w=2017 at vw 2032; logos flush against
   both viewport edges; label "TRUSTED BY…" jammed at x=0). Live contains + centers this band.
   Fix = give the component the container geometry it lost, scoped to this page only.
   (Cowork, measured live on staging; nav-less header on this page is INTENTIONAL — live has no nav.) */
body.page-template-page-demo-request .rp-khero-brands {
  max-width: 1300px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}
@media (max-width: 767px) {
  body.page-template-page-demo-request .rp-khero-brands { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Visual QA Findings — items 1 / 3 / 7 / 18 (Adil values, 2026-07-15)
   Shared "Trusted by The World's Leading Companies" brands-header label:
   mobile (<=767px) must be font-size:16px / line-height:24px.
   Reproduced at 375 BEFORE fixing: Homepage 24/40, CoR 24/32, SMBs 24/40, Org Charts 24/40.
   LANDED HERE deliberately: figma-fixes-b.css is the winning !important layer on WP-rendered
   pages — the same cascade that kept components/*.css values from ever serving (see the
   items 6/9/10 audit). A rule written to the component file would be overridden identically.
   Desktop/tablet untouched. Static-served paid LPs don't load figma-fixes-b, so they're unaffected.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* SPECIFICITY NOTE (why this selector looks odd): figma-fixes-b already carries per-page blockers
     like `.rp-smbs .rp-khero-brands .new_landing_page_brands_header { font-size:24px !important }`
     at (0,3,0). When !important ties on both sides, SPECIFICITY decides — so a bare (0,1,0)
     !important rule loses even from the winning file (measured: still 24px/40px). Repeating the
     class reaches (0,4,0), which beats every per-page blocker without having to enumerate them
     (Home / CoR / SMBs / Org Charts each have their own). */
  .new_landing_page_brands_header.new_landing_page_brands_header.new_landing_page_brands_header.new_landing_page_brands_header {
    font-size: 16px !important;
    line-height: 24px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Visual QA Findings — items 4 / 5 (Spend, 2026-07-15)
   Reproduced at 375 BEFORE fixing:
     item 4  .rp-spend-pain .rp-intro__text   = 20px/26px  -> font-size 16px
     item 5  .rp-color-cards__title           = 24px/30px  -> 16px / line-height 24px
   PAGE-SCOPED to body.page-template-page-spend: .rp-intro__text and .rp-color-cards__title are
   SHARED component classes (the intro + colour-cards kits) — an unscoped rule would resize them
   on every page that uses those kits. Landed in figma-fixes-b (the winning !important layer).
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  body.page-template-page-spend .rp-spend-pain .rp-intro__text { font-size: 16px !important; }
  body.page-template-page-spend .rp-color-cards__title { font-size: 16px !important; line-height: 24px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Visual QA Findings — item 11 (/partner-program gold highlight, 2026-07-15)
   REPRODUCTION NOTE: the reviewer's "rogue brown rgb(138,107,0)" is NOT reproducible —
   measured 2026-07-17 the highlight computes rgb(244,197,66) = #F4C542 (canonical, but the
   WHITE-bg variant). It sits on the dark band rgb(21,17,59) = #15113B, so per Greg's AA ruling
   (dark -> #FFD544; white -> #F4C542, since #FFD544 is only 1.46:1 on white) the dark-band
   highlight must be #FFD544. Brown = STALE; canonical-colour delta = real, fixed here.
   ══════════════════════════════════════════════════════════════════════════════ */
body.page-template-page-partner-program .highlight-it-gold { color: #FFD544 !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   Visual QA Findings — item 13 (/relocation cards, 2026-07-15)
   Reproduced at 375: 9 x .int-item.int-item-card = bg rgb(255,255,255) with near-navy text
   rgb(21,17,59), plus an inner .intname at explicit rgb(74,88,120). Flipping ONLY the bg to
   #1B1B3A would make them unreadable (the contradiction flagged in the ticket), so the text is
   flipped in the SAME change. PAGE-SCOPED: .int-item* is the shared integrations-card kit.
   ══════════════════════════════════════════════════════════════════════════════ */
body.page-template-page-relocation .int-item.int-item-card { background-color: #1B1B3A !important; color: #ffffff !important; }
body.page-template-page-relocation .int-item.int-item-card .intname { color: rgba(255,255,255,0.72) !important; }
body.page-template-page-relocation .int-item.int-item-card h1,
body.page-template-page-relocation .int-item.int-item-card h2,
body.page-template-page-relocation .int-item.int-item-card h3,
body.page-template-page-relocation .int-item.int-item-card h4,
body.page-template-page-relocation .int-item.int-item-card p,
body.page-template-page-relocation .int-item.int-item-card div { color: inherit; }

/* ══════════════════════════════════════════════════════════════════════════════
   Visual QA Findings — item 2 (/eor country-guides section -> navy, 2026-07-15)
   STRUCTURE (reproduced 2026-07-17): the section `.rp-countries-cards.rp-eor-countries` is
   TRANSPARENT — the white the reviewer saw is painted by its child panel
   `.rp-countries-cards__heading` (rgb(255,255,255), h400). So navy goes on the PAINTING node.
   Its text is explicitly coloured and will NOT inherit, so it is flipped in the SAME change:
     h2 .rp-countries-cards__h   rgb(8,8,13)  -> #fff
     p  .rp-countries-cards__sub rgb(42,42,42)-> rgba(255,255,255,.78)
   The CTA `.rp-countries-cards__cta` is already #fff on #114EF7 (blue button) — reads fine on
   navy, left alone. Scoped body.page-template-page-eor + the .rp-eor-countries modifier because
   .rp-countries-cards is the SHARED country-cards kit.
   ══════════════════════════════════════════════════════════════════════════════ */
body.page-template-page-eor .rp-eor-countries .rp-countries-cards__heading { background-color: #021143 !important; }
body.page-template-page-eor .rp-eor-countries .rp-countries-cards__heading .rp-countries-cards__h { color: #ffffff !important; }
body.page-template-page-eor .rp-eor-countries .rp-countries-cards__heading .rp-countries-cards__sub { color: rgba(255,255,255,0.78) !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   /demo-request (Book A Demo) — Adil delta, 2026-07-15. Page WP-rendered (loads this file).
   Item 1: form header "Get a Demo" (.rp-h2.rp-keepcase) has pt/pb/mt/mb all 0 -> add 16px
           top+bottom padding. Repeat-class to (0,4,0) per the specificity lesson (figma-b
           carries per-page .rp-h2 blockers).
   Item 2: hero top spacing — staging logo->H1 gap measured 168px vs LIVE /demo-request 67px
           (live mechanism: hero margin-top 58.5 + h1 margin-top 16, no big offset). The page's
           `hero_double_section_pt adjust-pading-top` adds ~100px extra padding-top. Mirror live:
           trim the hero's top padding so the gap matches ~67px. Scoped to the page.
   ══════════════════════════════════════════════════════════════════════════════ */
body.page-template-page-demo-request .lets-chat .rp-h2.rp-keepcase.rp-keepcase.rp-keepcase.rp-keepcase {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}
/* Item 2: match live's hero top spacing (~67px logo->H1). The dead space is a STACK, not one
   layer (measured): hero padding-top 24 + .rp-container padding-top 40 + .double-slide-lleft-container
   padding-top 32 ~= 96px before the H1 (+ navbar/logo offset => 145). Trim all three to land ~67. */
body.page-template-page-demo-request .rp-demo-request .hero_double_section.adjust-pading-top { padding-top: 16px !important; }
body.page-template-page-demo-request .rp-demo-request .hero_double_section .rp-container.getguide-rp-container { padding-top: 0 !important; }
body.page-template-page-demo-request .rp-demo-request .double-slide-lleft-container { padding-top: 8px !important; }
@media (max-width: 767px) {
  body.page-template-page-demo-request .rp-demo-request .hero_double_section.adjust-pading-top { padding-top: 8px !important; }
  body.page-template-page-demo-request .rp-demo-request .double-slide-lleft-container { padding-top: 0 !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   AskAI /ai — Adil EN list (2026-07-15). Page WP-rendered (body.page-template-page-ai,
   loads this winning layer). All scoped to .rp-ai; specificity raised where the theme
   carries per-section blockers. Sister page /ar/ai reuses the same block classes; RTL-only
   items are handled separately. Neighbours safe: only WP /ai carries these body/class combos.
   ══════════════════════════════════════════════════════════════════════════════ */
/* item 1: hero background gradient (Adil verbatim) */
body.page-template-page-ai .rp-ai .rp-askai-hero.rp-askai-hero { background-image: linear-gradient(#ffffff, #e4d9e8 25%) !important; }
/* item 2: "What makes RemotePass Ask AI different?" heading + comparison-table copy centered
   (scoped to the compare section so the features "Why choose" header is untouched). */
body.page-template-page-ai .rp-askai-compare .new_landing_page_payroll_header,
body.page-template-page-ai .rp-askai-compare .comparison-table-td-container,
body.page-template-page-ai .rp-askai-compare .comparison-table-td-container * { text-align: center !important; }
/* item 4: "Ask AI, help me with..." Book-Demo button (.btn.mb-grow, already #783f8e) hover stays #783f8e */
body.page-template-page-ai .rp-ai .btn.mb-grow:hover { background-color: #783f8e !important; border-color: #783f8e !important; color: #fff !important; }
/* item 3: section main header width 80% at tablet (768-991), 100% at mobile (<=767) */
@media (min-width: 768px) and (max-width: 991px) {
  body.page-template-page-ai .rp-ai .new_landing_page_payroll_header { max-width: 80% !important; margin-left: auto !important; margin-right: auto !important; }
}
@media (max-width: 767px) {
  body.page-template-page-ai .rp-ai .new_landing_page_payroll_header { max-width: 100% !important; }
  /* item 5: remove H2 mobile side padding */
  body.page-template-page-ai .rp-ai h2.new_landing_page_payroll_header,
  body.page-template-page-ai .rp-ai .double-slide-landing-page-left-main-header { padding-left: 0 !important; padding-right: 0 !important; }
  /* item 6: "help me with..." 3 cards (grid-step-card swiper-slide) stack 1/row.
     They're swiper slides — neutralise the horizontal transform + make each full-width so all 3 show. */
  body.page-template-page-ai .rp-askai-compare .swiper-wrapper { flex-direction: column !important; transform: none !important; height: auto !important; }
  body.page-template-page-ai .rp-askai-compare .grid-step-card.swiper-slide { width: 100% !important; max-width: 100% !important; margin: 0 0 16px !important; }
}

/* AskAI /ar/ai — item 11 (RTL headings breaking one-word-per-line, 2026-07-15).
   Reproduced at 375: the section header renders 145px wide inside a 327px container (its own
   max-width is already 100% from item 3, so a narrower WIDTH is being forced on the AR wrapper).
   Force full container width so AR text wraps naturally. Scoped to .rp-ar so EN is untouched.
   item 12 (AR cards stack) is already served by the EN item-6 rule — same page-template-page-ai. */
@media (max-width: 767px) {
  body.page-template-page-ai .rp-ai.rp-ar .new_landing_page_payroll_header {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    word-break: normal !important; overflow-wrap: break-word !important;
  }
}

/* AskAI /ai hero video (item 7, 2026-07-15): poster + play button -> body-level hero-yt-modal
   (video IpcSOxNIpNw, harness already enqueued). EN block 7400 ONLY; the AR block 7404 keeps its
   own Arabic video untouched. Scoped to .rp-ai. */
body.page-template-page-ai .rp-ai .askai-hero-media.rp-askai-yt { position: relative; cursor: pointer; display: block; }
body.page-template-page-ai .rp-ai .askai-hero-media.rp-askai-yt .askai-hero-media-img { display: block; width: 100%; height: auto; border-radius: 16px; object-fit: cover; }
body.page-template-page-ai .rp-ai .rp-askai-yt-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 76px; height: 76px; border-radius: 50%; background: rgba(17,78,247,0.92);
  box-shadow: 0 8px 30px rgba(17,78,247,0.35);
  transition: transform .15s ease, background-color .15s ease; pointer-events: none;
}
body.page-template-page-ai .rp-ai .rp-askai-yt-play::after {
  content: ''; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent #fff;
}
body.page-template-page-ai .rp-ai .askai-hero-media.rp-askai-yt:hover .rp-askai-yt-play { background: #114EF7; transform: translate(-50%, -50%) scale(1.06); }

/* ══════════════════════════════════════════════════════════════════════════════
   /demo-request (Book A Demo) — canonical Figma frames 18474:242643 (desktop) /
   18474:242667 (mobile). Adil's frames = truth. Page WP-rendered (body.page-template-page-demo-request).
   ══════════════════════════════════════════════════════════════════════════════ */
/* form header "Book a Free Demo": "Book a" dark (inherits rp-h2), "Free Demo" blue */
body.page-template-page-demo-request .rp-dr-freedemo { color: #114EF7 !important; }
/* trusted-by band label CENTERED (frame item 9; was left-aligned) */
body.page-template-page-demo-request .rp-demo-request .new_landing_page_brands_header { text-align: center !important; }

/* ── 2026-07-20 Greg final pass (staging-vs-frame side-by-side) ─────────────────
   All rules page-scoped; shared component untouched elsewhere. Repeat-class where
   needed to out-specify this file's own per-page blockers (the (0,4,0) lesson). */
/* trusted-by label per frame: title case, ALL-NAVY (kills the uppercase+blue
   treatment on this page only — incl. the component's highlight-it-blue span), bold */
/* 2026-07-23: highlight-it-blue selector REMOVED from the all-navy group below —
   demo-request now mirrors the homepage label (dark + blue highlight). */
body.page-template-page-demo-request .rp-demo-request .rp-khero-brands .new_landing_page_brands_header,
body.page-template-page-demo-request .rp-demo-request .rp-khero-brands .new_landing_page_brands_header strong {
  color: #15113B !important;
  text-transform: none !important;
  font-size: 20px !important;
  line-height: 28px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
/* checklist per frame: bold title on its OWN LINE, description below */
body.page-template-page-demo-request .rp-demo-request .rp-khero-brands .new_landing_page_brands_header .highlight-it-blue,
body.page-template-page-demo-request .rp-demo-request .rp-khero-brands .new_landing_page_brands_header .highlight-it-blue strong {
  color: #114EF7 !important;
  text-transform: none !important;
  font-size: 20px !important;
  line-height: 28px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
body.page-template-page-demo-request .rp-demo-request .check-marks-list .rp-dr-check-title {
  display: block;
  margin-bottom: 2px;
}
/* trusted-by band as hero's last child: breathing room above, stays inside the
   rounded light container (full width comes from being a direct block child) */
body.page-template-page-demo-request .rp-demo-request .rp-dr-hero-brands {
  max-width: 1300px;
  margin: 24px auto 0;
  padding: 0 16px 32px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   /get-the-ebook — 2026-07-21 (Greg: "page looks broken"). The getebook-* layout
   CSS never migrated (migration.min.css has none of it), so the hero rendered as
   unwrapped full-bleed blocks and the ebook SVG blew up to 651px. Values measured
   from LIVE remotepass.com/get-the-ebook computed styles. Scoped by the page's own
   unique classes (getebook-*) so the /ar/ twin inherits; shared utilities (mw5,
   mt8) scoped under .getebook-left only.
   ══════════════════════════════════════════════════════════════════════════════ */
.getebook-container { display: flex; flex-wrap: wrap; padding-top: 91px; }
.getebook-left,
.getebook-right {
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #F5F7FA;
  padding-bottom: 56px;
}
.getebook-left { flex-direction: column; }
.getebook-left .mt8.flx-h-ctr {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  width: 585px; max-width: 100%; padding: 0 16px;
}
.getebook-left .circles-bg-download { width: 559px; max-width: 100%; }
.getebook-left .mw5.lets-chat {
  background: #fff; border-radius: 16px; padding: 36px; margin-top: 56px;
  box-shadow: 0 8px 32px rgba(2, 17, 67, 0.06);
}
.getebook-right .e-book-section-new-left-img {
  width: 487px; max-width: 80%; height: auto; margin: 0 auto; display: block;
}
@media (max-width: 991px) {
  .getebook-left, .getebook-right { flex: 0 0 100%; max-width: 100%; }
  .getebook-right { padding: 32px 16px 40px; }
  .getebook-container { padding-top: 48px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   /guides cards grid — 2026-07-21 (Greg: "layout looks terrible, why so much
   spacing"). Cause: all 18 cards live in ONE Webflow float row (.columns-5.w-row
   > 18 × .w-col-4 floats); unequal card heights (427–467px) made floats wrap
   into HOLES (rows starting at column 2) and ragged spacing. Real grid instead;
   float/width/gutter-padding neutralized on the children. Page-scoped.
   ══════════════════════════════════════════════════════════════════════════════ */
body.page-template-page-guides .columns-5.w-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  /* Frame 617:55143 measured: cell pitch 436.91, visible card 401.95, so the visual
     gutter is ~34.9 horizontal / ~35.6 vertical (cell 520.78 − card 485.19). 2026-07-25. */
  gap: 36px 35px !important;
  /* THE actual width constraint (2026-07-25): this row inherits ~158.4px of side padding,
     so its CONTENT box was 1003 (→ three 318.4 tracks) even though the container around it
     was already widened to 1320. Zeroing it here is what makes the cards frame-size; the
     2026-07-23 container widening alone did nothing. */
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.page-template-page-guides .columns-5.w-row::before,
body.page-template-page-guides .columns-5.w-row::after {
  display: none !important; /* Webflow clearfix pseudo-elements become grid items otherwise */
}
body.page-template-page-guides .columns-5.w-row > .w-col {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* equal-height cards within a row */
body.page-template-page-guides .columns-5.w-row > .w-col > a,
body.page-template-page-guides .columns-5.w-row > .w-col > div {
  height: 100%;
}
@media (max-width: 1023px) {
  body.page-template-page-guides .columns-5.w-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 767px) {
  body.page-template-page-guides .columns-5.w-row {
    grid-template-columns: 1fr !important;
  }
}
/* Frame 617:55143: card grid container = 1300 (List 1324 with Webflow's ±12 breakout),
   cell pitch 436.91, VISIBLE card 401.95 × 485.19, cover tile 399.95 × 303, text inset 16,
   title 367.95 × 52. To land the visible card at exactly 402 we need a 1276 content box
   (3 × 402 + 2 × 35 gutter) → max-width 1316 with the container's 20px side padding.
   (2026-07-23 set 1360/1320 aiming for 424; re-measured against the frame 2026-07-25 and
   corrected to the frame's real 402 card. The row's own padding — zeroed above — was the
   thing actually holding the cards at 318.) Per-ebook covers are mapped in
   inc/guides-index.php; uniform lavender tile per the frame. Page-scoped. */
body.page-template-page-guides .category-ebook-section .rp-container.getguide-rp-container {
  max-width: 1316px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}
body.page-template-page-guides .category-ebook-column-section-item.guide-ebook-column-section-item {
  width: 100% !important;
}
/* Frame card text block (618:46061) = 399.95 × 134.19 at y324: title 367.95 × 52 (18/26,
   2 lines) then desc at y62, 46.19 tall (14/23, 2 lines) — both CLAMPED to 2 lines so every
   card is the frame's uniform 485 tall regardless of copy length. Descriptions come from
   rp_guides_card_excerpt() (each page's own opening sentence). 2026-07-25. */
body.page-template-page-guides .guide-ebook-column-section-item-header,
body.page-template-page-guides .guide-ebook-column-section-item-p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.page-template-page-guides .guide-ebook-column-section-item-header { -webkit-line-clamp: 2; }
body.page-template-page-guides .guide-ebook-column-section-item-p {
  -webkit-line-clamp: 2;
  margin: 10px 0 0 !important;
  font-size: 14px !important;
  line-height: 23px !important;
  color: #5A6079 !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   §S. /guides EBOOK pages — visual-parity polish (2026-07-21, Cowork eyeball).
   The 7 migrated ebook pages (default template). Scoped via :has(.getguide-rp-container)
   — unique to these pages, env-agnostic, survives the concurrent form task.
   CONTENT edits (similar 3-card backfill/dedup, rp-keepcase title-case spans) are
   DEFERRED: task_51eb3ce6 is concurrently editing these pages' content (clobber risk).
   ══════════════════════════════════════════════════════════════════════════════ */
/* 1. Webflow form-state leak — "Thank you!" / "Oops!" both render visible under the stub */
body:has(.getguide-rp-container) .w-form-done,
body:has(.getguide-rp-container) .w-form-fail { display: none !important; }

/* 2a. Orphaned full-width template post-title H1 (live has NO hero H1). Keep for SEO,
   visually hide. FLAG: revert if a tight visible integrated H1 is preferred. */
body:has(.getguide-rp-container) .wp-block-post-title {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
/* 2b. Hero band: frame 617:68288 is a light LAVENDER band (#F0F4FE), not the grey
   #F5F7FA it was; and the form sits in a WHITE rounded card on that band (2026-07-23). */
body:has(.getguide-rp-container) .hero_double_section {
  background-color: #F0F4FE !important;
}
/* 2026-07-24 (Mo, verbatim): flat card — padding 0, shadow removed (was 36px + shadow). */
body:has(.getguide-rp-container) .lets-chat {
  background: #fff !important;
  border-radius: 16px !important;
  padding: 0px !important;
  box-shadow: unset !important;
}
/* 6. Hero headings: markup is title-case; a text-transform lowercases them on render.
   Reveal live's title case (rp-keepcase equivalent, scoped). */
body:has(.getguide-rp-container) .getguide-hero-h { text-transform: none !important; }

/* 3. Cover: live hides it on desktop (was a .hide variant); keep it on mobile.
   Also stops the injected cover from double-heighting the right column. */
@media (min-width: 992px) {
  body:has(.getguide-rp-container) .get-ebook-cover-img { display: none !important; }
}

/* 4. "Download the Guide": live = blue accent + title case; staging = gold + lowercased */
body:has(.getguide-rp-container) .rp-h2-guide { text-transform: none !important; }
body:has(.getguide-rp-container) .rp-h2-guide .yellow-line { color: #114EF7 !important; }

/* 5c. Similar Resources grid: cards sprawl full-width. The cards live in a floated
   .w-dyn-items (.w-row) inside .guide-grid-details — grid must go on THAT row. */
body:has(.getguide-rp-container) .guide-grid-details .w-dyn-items {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}
body:has(.getguide-rp-container) .guide-grid-details .w-dyn-items::before,
body:has(.getguide-rp-container) .guide-grid-details .w-dyn-items::after { display: none !important; }
body:has(.getguide-rp-container) .guide-grid-details .w-dyn-item {
  float: none !important; width: auto !important; max-width: none !important;
}
@media (max-width: 767px) {
  body:has(.getguide-rp-container) .guide-grid-details .w-dyn-items { grid-template-columns: 1fr !important; }
}
/* 4b. Similar-card typography: match live (dark title, grey desc, no link/underline styling) */
body:has(.getguide-rp-container) .guide-grid-details .category-ebook-column-section-item,
body:has(.getguide-rp-container) .guide-grid-details .guide-ebook-column-section-item-header {
  text-decoration: none !important;
}
body:has(.getguide-rp-container) .guide-grid-details .guide-ebook-column-section-item-header {
  color: #15113B !important;
  font-size: 20px !important;
  line-height: 26px !important;
  font-weight: 700 !important;
}
body:has(.getguide-rp-container) .guide-grid-details .guide-ebook-column-section-item-p {
  color: #5A6079 !important;
  text-decoration: none !important;
  font-size: 15px !important;
  line-height: 22px !important;
}

/* =========================================================================
   Background-check hero → SAME as local-payroll (2026-07-23). Twin of the
   .rp-hr/.rp-legal LP pixel-match blocks, mapped to the .rp-bc-hero kit:
   h1 2.95rem/56, sub 16/25.6, CTA 57px/16.25/radius 8, cols 626/610 (shrinkable),
   img 610; tablet stack h1 2.25rem/53 + img 65% centered; mobile h1 32/40 + img 100%.
   ========================================================================= */
.rp-bc-hero {
  background-color: #fff !important;
  background-image: linear-gradient(rgba(228, 235, 254, 0), rgb(228, 235, 254) 120px, rgb(228, 235, 254)) !important;
}
.rp-bc-hero .rp-bc-hero__text h1 { font-size: 2.95rem !important; line-height: 56px !important; color: #021143 !important; margin-bottom: 16px !important; }
.rp-bc-hero .rp-bc-hero__text p { font-size: 16px !important; line-height: 25.6px !important; color: rgb(84,84,84) !important; }
.rp-bc-hero .rp-bc-hero__text a[class*="cta"], .rp-bc-hero .rp-bc-hero__text a[class*="btn"] {
  height: 57px !important; padding: 15px 32px !important; font-size: 16.25px !important;
  font-weight: 500 !important; border-radius: 8px !important; border: 1px solid #114ef7 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
@media (min-width: 992px) {
  .rp-bc-hero .rp-bc-hero__inner { max-width: 1300px !important; margin: 0 auto !important; padding-left: 29px !important; padding-right: 29px !important; display: flex !important; gap: 0 !important; justify-content: space-between !important; align-items: center !important; }
  .rp-bc-hero .rp-bc-hero__text { flex: 0 1 626px !important; max-width: 626px !important; text-align: start !important; }
  .rp-bc-hero .rp-bc-hero__media { flex: 0 1 610px !important; max-width: 610px !important; justify-content: center !important; }
  .rp-bc-hero .rp-bc-hero__media img { width: 610px !important; max-width: 100% !important; height: auto !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .rp-bc-hero .rp-bc-hero__inner { flex-direction: column !important; align-items: stretch !important; text-align: start !important; padding-left: 40px !important; padding-right: 40px !important; }
  .rp-bc-hero .rp-bc-hero__text { text-align: start !important; max-width: 100% !important; }
  .rp-bc-hero .rp-bc-hero__pills, .rp-bc-hero .rp-bc-hero__ctas { justify-content: flex-start !important; }
  .rp-bc-hero .rp-bc-hero__media img { width: 65% !important; margin: auto !important; display: block !important; }
  .rp-bc-hero .rp-bc-hero__text h1 { font-size: 2.25rem !important; line-height: 53px !important; }
}
@media (max-width: 767px) {
  .rp-bc-hero .rp-bc-hero__inner { flex-direction: column !important; align-items: stretch !important; text-align: start !important; }
  .rp-bc-hero .rp-bc-hero__text { text-align: start !important; max-width: 100% !important; }
  .rp-bc-hero .rp-bc-hero__pills, .rp-bc-hero .rp-bc-hero__ctas { justify-content: flex-start !important; }
  .rp-bc-hero .rp-bc-hero__media img { width: 100% !important; margin: auto !important; display: block !important; }
  .rp-bc-hero .rp-bc-hero__text h1 { font-size: 32px !important; line-height: 40px !important; }
}

/* ============================================================
   HIRING-GUIDE DETAIL HEROES (/eor/difc + /eor/adgm) — frame parity
   2026-07-25 Cowork. Frames 1:50866 / 1:56139 (RP--Resources), specs MEASURED
   (Figma metadata blocked at transport: derived from the dated 1:1 exports +
   photo decomposition + headless-Chrome calibration; verified pixel-side-by-side):
   - H1 64px/76.8 Mulish 700 (frame ink width 625 vs rendered 626 → exact)
   - sub 22px/32 w700, letter-spacing .05em (line1 wraps after "with", 707 vs 704)
   - note letter-spacing .03em; note ink 526 into hero
   - hero band 637px; text block left 125 (container pad 24→57); H1 ink 275, sub 366
   - overlay: vertical BLACK linear 0.25→0.85 (decomposed vs raw hero photos,
     median residual 0.6/255; live rendering matches ±0.003). Replaces the old
     horizontal navy gradient which is an INLINE style in the wf templates →
     the !important below is required, do not "clean it up".
   KNOWN DEFERRED (copy scope, Adil ruling pending): ADGM frame moves the intro
   paragraph into the hero and lifts H1 to 180 into hero; body copy differs from
   frames on both pages. Both pages use the DIFC text placement until ruled.
   AR twins share these classes; RTL padding mirrored below.
============================================================ */
@media (min-width: 992px) {
  .hero_double_section.guide_hero_double_section.guide_hero_double_section_new_design { min-height: 637px !important; height: 637px !important; }
  .guide_hero_double_section .hero_double_section_mask { height: 637px !important; }
  .getguide-hero-h-p-container.hiring_guide_hero-h-p-container.hiring_guide_hero-h-p-container-new-design { margin-top: 260px !important; padding-left: 57px !important; }
  .getguide-hero-h-p-container.hiring_guide_hero-h-p-container.hiring_guide_hero-h-p-container-new-design.hiring_guide_hero-h-p-container-new-design-rtl { padding-left: 24px !important; padding-right: 57px !important; }
  .guide_hero_double_section .getguide-hero-h.guide-hero-h.guide-hero-h-white { font-size: 64px !important; line-height: 76.8px !important; font-weight: 700 !important; margin-bottom: 21px !important; }
  .guide_hero_double_section .getguide-hero-p.guide-hero-sub-title-white { font-family: Mulish, sans-serif !important; font-size: 22px !important; line-height: 32px !important; font-weight: 700 !important; letter-spacing: .05em !important; width: auto !important; max-width: 780px !important; }
  .guide_hero_double_section .guide-hero-note-white { margin-top: 72px !important; letter-spacing: .03em !important; }
}
.guide_hero_double_section .guide-hero-linear-bg { background-image: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.85)) !important; }