/* ==========================================================================
   QA FIXES - Global Component Standardization
   This file contains CSS overrides for standardizing components across
   all RemotePass pages. Load AFTER migration.css.
   ========================================================================== */

/* ==========================================================================
   §0a. WHITE-BG-MASK GLOBAL KILL — never render this stripe anywhere
   --------------------------------------------------------------------------
   2026-05-03: Greg flagged a recurring white horizontal stripe bisecting
   hero/CTA sections across many pages. The source div lives in
   `parts/home-footer.html` (now removed) but Webflow markup elsewhere
   on the live site uses the same `.white-bg-mask` /
   `.new-footer-white-bg-mask` / `.pricing-bg-mask` classes for the same
   layered-fade artifact. Live ships these visible — we are intentionally
   diverging because the masks are a visual bug, not a feature.

   Belt-and-braces: hide globally so any future inline include or
   structured-diff "match live" pass can't reintroduce the stripe.
   The per-page hide rules in qa-fixes-*.css become harmless no-ops.
   ========================================================================== */
.white-bg-mask,
.new-footer-white-bg-mask,
.white-bg-mask.new-footer-white-bg-mask,
.pricing-bg-mask {
  display: none !important;
}

/* ==========================================================================
   §0b. HEADER LANGUAGE SWITCHER — fix hover-gap + unify hover/click look
   --------------------------------------------------------------------------
   2026-05-05: Greg flagged the EN/AR language dropdown in the header
   was unclickable and looked like an "unstyled gray box" on hover but
   styled correctly on click. Two compounding bugs:

   (1) HOVER GAP. The dropdown reveals via :hover on .w-dropdown
       (migration.css §rp-lang-switcher-no-js). The dropdown-list is
       offset with `transform: translate(0%, 20px)` (migration.css line
       570), creating a 20px visual gap between the toggle and the
       list. As the cursor traverses that gap it's over neither
       element, :hover drops, the dropdown collapses before the user
       can reach the link.

       Fix: extend the toggle's hit area downward with padding-bottom
       (and offset with negative margin so the visible toggle position
       doesn't change). The :hover area now bridges the gap.

   (2) HOVER STATE ≠ CLICK STATE. The hover rule only sets
       `display: block`; the full open-state styling (white bg, rounded
       corners, shadow, padding) is on `.w--open` which Webflow's JS
       only applies on click. So hover-only users saw an unstyled
       dropdown; click users saw the polished one.

       Fix: replicate the open-state styling on the :hover/:focus-within
       branch so both interaction modes look identical.

   Also: subtle hover background on the toggle so it visibly responds
   to interaction, and rounded-radius transitions on the link items.
   ========================================================================== */
.dropdown-language-menu.new-rp-dropdown-language-menu.w-dropdown-toggle {
  padding-bottom: 20px;
  margin-bottom: -20px;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color .15s ease;
}
.w-dropdown:has(.dropdown-language-menu):hover .dropdown-language-menu,
.dropdown-language-menu.new-rp-dropdown-language-menu.w-dropdown-toggle:hover,
.dropdown-language-menu.new-rp-dropdown-language-menu.w-dropdown-toggle:focus-visible {
  background-color: rgba(15, 16, 53, .04);
}
/* Mirror the .w--open open-state styling to the :hover and :focus-within
   branches so the dropdown looks the same whether revealed by hover or
   click. The `.w--open` rule lives at migration.css lines 556-565. */
.w-dropdown:has(.dropdown-language-menu):hover .dropdown-list-4,
.w-dropdown:has(.dropdown-language-menu):focus-within .dropdown-list-4 {
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 10px;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  transform: translate(0%, 20px);
  box-shadow: 3px 3px 14px #0f103533;
}
/* Polish the dropdown-link hover state — feel like a button, not a flat row. */
.f16.dropdown-link.dropdown-link-bg.dropdown-link-bg-ar,
.f16.dropdown-link.dropdown-link-bg.dropdown-link-bg-en {
  border-radius: 6px;
  transition: background-color .15s ease;
}
.f16.dropdown-link.dropdown-link-bg.dropdown-link-bg-ar:hover,
.f16.dropdown-link.dropdown-link-bg.dropdown-link-bg-en:hover {
  background-color: rgba(15, 16, 53, .06);
}

/* ==========================================================================
   0. MOBILE VIEWPORT CONTAINMENT — prevents horizontal overflow bug
   --------------------------------------------------------------------------
   Bug: On real iPhone/Android devices (and Playwright device emulation),
   swiper carousels (.swiper-wrapper) lay their slides out horizontally
   past the device width (slides at left: 3000+px). When no ancestor
   clips that overflow, Chromium auto-expands the layout viewport
   (innerWidth) from 393px → 772px to contain the content. The side
   effect is that window.innerWidth == 772 on a 393px phone, which
   means:
     • every `width: 100%` element (navbar, drawer, cookie bar, etc.)
       resolves to 772px instead of 393px
     • @media queries still match correctly (they evaluate against
       visualViewport), but layout widths are wrong
     • desktop-sized typography + controls render inside a 390px phone

   Fix: clip horizontal overflow at the document root so the layout
   viewport stays pinned to device-width. Any content that's genuinely
   wider than the viewport (runaway sliders) is clipped to the edge
   instead of corrupting the whole layout. Individual sliders should
   still be fixed to respect their container width, but this is the
   bulletproof safety net.

   Discovered 2026-04-16 via Playwright device-QA harness; see
   `/mnt/work/scripts/device-qa.js` and `/mnt/work/qa-screenshots/`.
   ========================================================================== */
html,
body {
  overflow-x: hidden;
  /* Guard against programmatic width changes that could reintroduce
     horizontal scroll (e.g. third-party widgets). max-width caps the
     box to viewport regardless of any explicit width rule. */
  max-width: 100%;
}

/* Re-assert safe overflow on the common carousel wrappers so slides
   are clipped at the carousel, not at the document. This is the clean
   fix; the html/body clamp above is just a safety net. */
.swiper,
.w-slider,
.new-rp-country-slider,
.new-rp-section-vertical-border-slider-section {
  overflow: hidden;
  max-width: 100%;
}

/* Override: when .rp-container-1200 is also a swiper/slider,
   enforce the 1200px cap after the swiper max-width:100% rule. */
.rp-container-1200 {
  max-width: 1200px !important;
}

/* ==========================================================================
   1. FOOTER - Consistent Footer Component
   ========================================================================== */
.rp-section.footer {
  background-color: #fff;
  padding-top: 5.56em;
  padding-bottom: 3.13em;
  overflow: visible;
}

.rp-section.footer.new-footer {
  background-color: #fff;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 5.56em;
  padding-bottom: 3.13em;
  font-family: Mulish, sans-serif;
}

.footer-links {
  grid-template-rows: auto;
  grid-template-columns: .8fr 1fr 1fr 1fr .8fr;
  padding-left: 16px;
  padding-right: 16px;
  display: grid;
}

.rp-footer-link {
  color: rgba(15, 16, 53, 0.7);
  font-size: 14px;
  line-height: 2;
  text-decoration: none;
  display: block;
  transition: all 0.3s;
}

.rp-footer-link:hover {
  color: #114ef7;
}

/* ==========================================================================
   2. TRUSTED BRANDS - Consistent Component Design
   ========================================================================== */
.badges-trusted-new-design {
  background-color: #f0f4fe;
  justify-content: center;
  align-items: center;
  min-height: 500px;
  padding-top: 48px;
  padding-bottom: 40px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.badges-trusted-new-design.badges-trusted-new-design-blue {
  background-color: #021143;
  padding-top: 48px;
}

.badges-trusted-new-design-main {
  z-index: 5;
  text-align: center;
  background-image: url('../images/Vector_badges_white.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  min-height: 500px;
  padding: 48px 32px;
  display: flex;
  position: relative;
  overflow: visible;
}

.badges-trusted-new-design-main.badges-trusted-new-design-main-blue {
  background-size: contain;
  justify-content: center;
  align-items: center;
  min-height: 460px;
  padding: 48px 32px;
  overflow: visible;
}

/* Trusted Brands Header — Responsive rem units
   2026-05-03 polish-batch-2: live ships 2rem / 3rem on the trusted-customers
   heading (matches migration.css:2064 base rule). The 1.35rem / 1.2 override
   below was DOWN-SIZING vs live, causing P4 mismatches on 5 pages
   (ksa-payroll-software, local-payroll-ksa, uae-local-payroll,
   uae-payroll-software, partner-referral). Removed the font-size and
   line-height to let migration.css's 2rem / 3rem win on desktop.
   The mobile breakpoint at line 195 still scopes down to 1.5rem / 1.2
   for narrow viewports if needed. */
.badges-trusted-new-design-main-header {
  text-align: center;
  width: 100%;
  font-family: Mulish, sans-serif;
  font-weight: 700;
  margin-bottom: 16px;
}

.badges-trusted-new-design-main-header.badges-trusted-new-design-main-header-white {
  color: #fff;
  text-align: center;
}

.badges-trusted-new-design-main-header.badges-trusted-new-design-main-header-white.black_text {
  color: #000;
  margin-bottom: 2px;
}

/* Trusted Brands Sub-header */
.badges-trusted-new-design-main-sub-header {
  color: #545454;
  width: 100%;
  font-size: 1rem;
  line-height: 1.5;
}

.badges-trusted-new-design-main-sub-header.badges-trusted-new-design-main-sub-header-white {
  color: #fff;
  text-align: center;
}

.badges-trusted-new-design-main-sub-header.badges-trusted-new-design-main-sub-header-white.gray_text {
  color: #545454;
}

/* Badge Icons Container - flex space-between */
.badges-trusted-new-design-sub-container {
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  width: 100%;
  display: flex;
  position: relative;
  flex-wrap: wrap;
}

.badges-trusted-new-design-sub-container-img-medium {
  display: block;
}

/* Mobile: Responsive header sizing */
@media screen and (max-width: 767px) {
  .badges-trusted-new-design-main-header {
    font-size: 1.1rem;
  }

  .badges-trusted-new-design-main-sub-header {
    font-size: 0.9rem;
  }

  .badges-trusted-new-design-sub-container {
    justify-content: center;
    gap: 12px;
  }
}

/* ==========================================================================
   3. HERO SECTION - Standardized Light Blue Hero Component
   ========================================================================== */
.hero_double_section {
  color: #15113b;
  background-color: #fff;
  background-image: none;
  margin-top: 0;
  padding-top: 56px;
  padding-left: 24px;
  padding-right: 24px;
  position: relative;
}

.hero_double_section.new_rp_hero_double_section.new_rp_hero_double_section_bg {
  padding-top: 56px;
}

.hero_double_section.new_rp_hero_double_section.new_rp_hero_double_section_bg.new_rp_hero_double_section_bg_extra_layer {
  padding-bottom: 40px;
}

.rounded-bottom.bg-light-blue {
  background-color: transparent;
  background-image: linear-gradient(to bottom, transparent 0%, #e3ebfd 40%);
  border-bottom-right-radius: 48px;
  border-bottom-left-radius: 48px;
  overflow: hidden;
}

.hero_double_section.new_rp_hero_double_section.new_rp_hero_double_section_bg.new_rp_hero_double_section_bg_extra_layer.rounded-bottom.bg-light-blue.adjust-padding {
  background-color: #fff;
  background-image: linear-gradient(#e4ebfe00, #e4ebfe 15%, #e4ebfe);
  padding-top: 56px;
  padding-bottom: 56px;
}

/* Hero content container */
.double-section-hero-container {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
}

/* Hero headings - responsive rem units */
.hero_double_section h1,
.double-slide-landing-page-left-main-header {
  color: #15113b;
  font-family: Mulish, sans-serif;
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 24px;
}

.double-slide-landing-page-left-sub-header {
  color: #15113b;
  font-family: Mulish, sans-serif;
  font-size: 1.25rem;
  line-height: 1.5;
  margin-bottom: 24px;
}

.hero_double_section p {
  color: #15113b;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 24px;
}

/* Mobile responsive: Hero section */
@media screen and (max-width: 991px) {
  .hero_double_section {
    padding-top: 40px;
  }

  .hero_double_section h1,
  .double-slide-landing-page-left-main-header {
    font-size: 2.5rem;
  }
}

@media screen and (max-width: 767px) {
  .hero_double_section {
    padding-top: 32px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero_double_section h1,
  .double-slide-landing-page-left-main-header {
    font-size: 1.75rem;
  }

  .double-slide-landing-page-left-sub-header {
    font-size: 1.05rem;
  }
}

/* ==========================================================================
   4. G2 SLIDER - Standardized G2 Component (Match Home Page)
   ========================================================================== */

/* Dark variant (blue background) */
.g2_tags {
  background-color: #fff;
  border: 1px solid #ff492c4d;
  border-radius: 8px;
  justify-content: flex-start;
  align-items: center;
  padding: 8px;
  display: inline-flex;
  gap: 8px;
  transition: all 0.3s;
}

.g2_tags.g2_tags_v3 {
  background-color: #fff;
  border-color: #fff;
  border-radius: 40px;
  padding: 8px 12px;
}

.g2_tags.g2_tags_v3:hover {
  /* no hover — these are static rating badges, not interactive. Mohamed 2026-07-08.
     (was background-color: #f5f7ff;) */
  background-color: #fff;
}

.g2_tags_img {
  width: auto;
  height: auto;
}

.g2_tags_text {
  color: #ff492c;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
}

.g2_tags_text.g2_tags_text_v3 {
  color: #044d80;
}

.g2_tags.g2_tags_v3.bg-golden {
  background-color: #f5a623;
  border-color: #f5a623;
}

.g2_tags_text.g2_tags_text_v3.text-capitalized.text-color-dark {
  /* Phase 2F-HP-5 (2026-04-21): was #044d80 on #f5a623 (golden bg) giving
   * contrast 4.35:1 — failed WCAG AA for text-size 9pt / 12px. The HP-3
   * a11y=100 single-run happened to not sample this element. Switching to
   * the brand dark-blue token (#021143, already used in .rp-spend scoped
   * rules) gives 9.45:1 on the golden bg — well above AA. */
  color: #021143;
}

/* Review cards - consistent hover state */
.review-card {
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 16px;
  /* Phase 2F-HP-4 (2026-04-21): was `transition: all 0.3s`, which turned every
   * Swiper-driven `width`/`margin-right` update on each of the 15 review-card
   * siblings into a non-composited animation (Lighthouse flagged all 15).
   * Narrow the transition to the two properties the :hover state actually
   * animates so the PerformanceObserver no longer counts width/margin-right
   * as animated properties. */
  transition: background-color 0.3s, box-shadow 0.3s;
}

.review-card:hover {
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   5. FAQ ACCORDION - Full Width & Consistent Styling
   ========================================================================== */

.faq-sub-container {
  width: 100%;
  max-width: 100%;
  margin-top: 56px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

.faq-sub-container.faq-sub-container-extra-style {
  margin-top: 0;
  padding: 24px 0 56px;
  width: 100%;
}

.faq-sub-container.faq-sub-container-extra-style.faq-sub-container-extra-style-collapsed {
  background-color: #f5f7fa;
  padding: 32px 24px 56px 24px;
  width: 100%;
}

.faq-sub-container.faq-sub-container-extra-style.faq-sub-container-full-width {
  width: 100%;
  padding: 24px 0 56px 0;
}

/* FAQ Accordion Items */
.faq_container_item_holder {
  width: 100%;
  border-bottom: 1px solid #e8e8e8;
  padding: 24px 0;
}

.faq_container_item_holder_header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  cursor: pointer;
  transition: all 0.3s;
}

.faq_container_item_holder_header h3 {
  text-align: left;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
  color: #15113b;
}

.faq_header_plus_icon_container {
  display: flex;
  width: 24px;
  height: 24px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin-left: 16px;
}

.faq_header_plus_icon_horizontal,
.faq_header_plus_icon_vertical {
  background-color: #114ef7;
  position: absolute;
}

.faq_header_plus_icon_horizontal {
  width: 12px;
  height: 2px;
}

.faq_header_plus_icon_vertical {
  width: 2px;
  height: 12px;
}

.faq_container_item_holder.open .faq_header_plus_icon_vertical {
  display: none;
}

/* FAQ content */
.faq_container_item_holder_description {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.faq_container_item_holder.open .faq_container_item_holder_description {
  max-height: 1000px;
  overflow: visible;
}

.faq_container_item_holder_description p {
  font-size: 1rem;
  line-height: 1.6;
  color: #666;
  margin: 16px 0 0 0;
}

.faq_container_item_holder_description a {
  color: #114ef7;
  text-decoration: none;
  transition: all 0.3s;
}

.faq_container_item_holder_description a:hover {
  text-decoration: underline;
}

/* Mobile FAQ */
@media screen and (max-width: 767px) {
  .faq-sub-container.faq-sub-container-extra-style.faq-sub-container-extra-style-collapsed {
    padding: 16px 16px 32px 16px;
  }

  .faq_container_item_holder_header h3 {
    font-size: 1rem;
  }
}

/* ==========================================================================
   6. CTA BUTTONS - Standardized Button Styles
   ========================================================================== */

/* PRIMARY BUTTON - Blue background, white text */
.btn {
  border: 1px solid #114ef7;
  background-color: #114ef7;
  text-align: center;
  text-transform: capitalize;
  border-radius: 4px;
  padding: 1em 3.13em;
  font-size: 1.25em;
  font-weight: 500;
  transition: all 0.3s;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.btn:hover {
  background-color: #0d3cb8;
  border-color: #0d3cb8;
}

/* SECONDARY BUTTON - Light blue bg + blue border */
.btn-2 {
  border: 2px solid #114ef7;
  background-color: #e3ebfd;
  text-align: center;
  text-transform: capitalize;
  border-radius: 4px;
  padding: 1em 3.13em;
  font-size: 1.25em;
  font-weight: 500;
  transition: all 0.3s;
  color: #114ef7;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.btn-2:hover {
  background-color: #d0dff9;
  border-color: #0d3cb8;
  color: #0d3cb8;
}

/* Alternative secondary (light blue variant) */
.btn-2.btn-gray {
  background-color: #e3ebfd;
  border-color: #114ef7;
  color: #114ef7;
}

.btn-2.btn-gray:hover {
  background-color: #d0dff9;
  border-color: #0d3cb8;
  color: #0d3cb8;
}

.btn-2.btn-gray.btn-light-blue {
  background-color: #e3ebfd;
  border-color: #114ef7;
  color: #114ef7;
}

.btn-2.btn-gray.btn-light-blue:hover {
  background-color: #d0dff9;
  border-color: #0d3cb8;
  color: #0d3cb8;
}

/* OUTLINE BUTTON - White bg + border, dark text */
.btn.outline-btn {
  color: #15113b;
  background-color: #fff;
  border-color: #15113b;
}

.btn.outline-btn:hover {
  background-color: #f5f5f5;
  color: #114ef7 !important;   /* !important: a higher-specificity nav rule was forcing white text on hover (Login btn). Mohamed 2026-07-07 */
  border-color: #114ef7;
}

/* White button variant */
.btn.wider.btn-white {
  color: #15113b;
  background-color: #fff;
  border-color: #fff;
}

.btn.wider.btn-white:hover {
  background-color: #e8e8e8;
  border-color: #e8e8e8;
  color: #15113b;
}

/* Nav button styles */
.btn.nav-btn {
  align-items: center;
  padding: 0.75em;
  font-family: Mulish, sans-serif;
  font-size: 14px;
  letter-spacing: normal;
  display: inline-flex;
}

.btn.nav-btn.outline-btn {
  margin-right: 0;
}

/* Button in hero section override */
.hero_double_section .btn {
  background-color: #114ef7;
  border-color: #114ef7;
  color: #fff;
}

.hero_double_section .btn:hover {
  background-color: #0d3cb8;
  border-color: #0d3cb8;
}

.hero_double_section .btn-2.btn-gray {
  background-color: #e3ebfd;
  border-color: #114ef7;
  color: #114ef7;
}

.hero_double_section .btn-2.btn-gray:hover {
  background-color: #d0dff9;
  border-color: #0d3cb8;
  color: #0d3cb8;
}

/* Mobile button sizing */
@media screen and (max-width: 767px) {
  .btn,
  .btn-2 {
    padding: 0.85em 2em;
    font-size: 1rem;
  }
}

/* ==========================================================================
   7. RESPONSIVE TYPOGRAPHY - Header & Subheader rem Units
   ========================================================================== */

/* All h1 elements */
h1,
.rp-h1 {
  font-family: Mulish, sans-serif;
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 24px;
  color: #15113b;
}

/* All h2 elements */
h2,
.rp-h2 {
  font-family: Mulish, sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 16px;
  color: #15113b;
}

/* All h3 elements */
h3,
.rp-h3 {
  font-family: Mulish, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 12px;
  color: #15113b;
}

/* Paragraph text */
p,
.rp-p {
  font-family: Mulish, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: #666;
}

/* White text variants */
h1.white-txt,
.rp-h1.white-txt {
  color: #fff;
}

h2.white-txt,
.rp-h2.white-txt {
  color: #fff;
}

p.rp-p-white {
  color: #fff;
}

/* Tablet responsive */
@media screen and (max-width: 991px) {
  h1,
  .rp-h1 {
    font-size: 2.5rem;
  }

  h2,
  .rp-h2 {
    font-size: 1.75rem;
  }

  h3,
  .rp-h3 {
    font-size: 1.25rem;
  }
}

/* Mobile responsive */
@media screen and (max-width: 767px) {
  h1,
  .rp-h1 {
    font-size: 1.75rem;
  }

  h2,
  .rp-h2 {
    font-size: 1.35rem;
  }

  h3,
  .rp-h3 {
    font-size: 1.1rem;
  }

  p,
  .rp-p {
    font-size: 0.95rem;
  }
}

/* ==========================================================================
   8. SPACING - Standardized Padding & Margins
   ========================================================================== */

/* Section spacing */
.rp-section {
  padding-top: 56px;
  padding-bottom: 56px;
}

.rp-section.hero_double_section {
  padding-top: 56px;
  padding-bottom: 56px;
}

/* ============ Pattern P2 — per-page section padding overrides ===========
   Polish-batch-3 (2026-05-03): the global `.rp-section { padding: 56px 0 }`
   rule above is correct for most product pages, but the per-page diff
   reports flagged 6 pages where live ships different padding values.
   Page-scoped overrides per the POLISH-REPORT-2026-05-03.md.
   ========================================================================== */

/* KSA + UAE Employer of Record — live ships 8px 0px 0px on `.rp-container.rp-container-extra-style` sections.
   These pages use the `.rp-<slug>` body wrapper convention (NOT
   `.page-template-page-<slug>` body class — those pages are on
   `page-template-default`). */
.rp-ksa-employer-of-record .rp-section.rp-container.rp-container-extra-style,
.rp-uae-employer-of-record .rp-section.rp-container.rp-container-extra-style {
  padding-top: 8px;
  padding-bottom: 0;
}

/* Local Payroll KSA + MENA HR Payroll Hub — live ships 0 padding on `.rp-container.rp-container-extra-style` sections */
.rp-local-payroll-ksa .rp-section.rp-container.rp-container-extra-style,
.rp-mena-hr-payroll-hub .rp-section.rp-container.rp-container-extra-style {
  padding-top: 0;
  padding-bottom: 0;
}

/* Remote Hiring Report — live ships 32px 0 0 on `.rp-container.rp-container-extra-style` sections */
.rp-remote-hiring-report .rp-section.rp-container.rp-container-extra-style {
  padding-top: 32px;
  padding-bottom: 0;
}

/* ============ Polish-batch-5 — hero H1 sizing on KSA/UAE/MENA pages =====
   Per the per-page diff reports, live ships 47.2/56 (KSA/UAE payroll-software)
   and 53.6/64 (uae-local-payroll), 47.2/56 (mena-hr-payroll-hub) on the hero
   H1 — local was rendering 32/42 (TT5 default for page-template-default).
   Page-scoped overrides via the `.rp-<slug>` body wrapper convention.

   2026-05-03 CORRECTION: original v1 selectors (h1.double-slide-landing-page-
   left-main-header) hit BOTH hero AND product-slide H1s, regressing product
   slides which live ships at 32/42. The hero H1 is distinguishable by the
   `.font-2-6rem` modifier class. Scope to that. */
.rp-ksa-payroll-software h1.double-slide-landing-page-left-main-header.font-2-6rem,
.rp-uae-payroll-software h1.double-slide-landing-page-left-main-header.font-2-6rem {
  font-size: 47.2px !important;
  line-height: 56px !important;
}

.rp-uae-local-payroll h1.double-slide-landing-page-left-main-header.font-2-6rem {
  font-size: 53.6px !important;
  line-height: 64px !important;
}

/* Polish-batch-V2-E (2026-05-03): uae-local-payroll's hero H1 doesn't
   carry .font-2-6rem (unlike ksa/uae-payroll-software/mena pages), so the
   .font-2-6rem rule above misses entirely. Use the hero_double_section
   parent as discriminator — product slides are inside .double-section-hero-container
   directly (no .hero_double_section ancestor) so this targets only the hero. */
.rp-uae-local-payroll .hero_double_section.new_rp_hero_double_section.new_rp_hero_double_section_bg h1.double-slide-landing-page-left-main-header {
  font-size: 53.6px !important;
  line-height: 64px !important;
}

.rp-mena-hr-payroll-hub h1.double-slide-landing-page-left-main-header.font-2-6rem {
  font-size: 47.2px;
  line-height: 56px;
}

/* uae-local-payroll hero CTA "Book a Demo" H2 — live ships 39/46.8, local was 20/30.
   2026-05-03 V2-F correction: original selector
   `h2.double-slide-landing-page-left-main-header` didn't match — actual
   element has only `.rp-h2` class inside `.lets-chat` parent.
   Verified via DOM probe. */
.rp-uae-local-payroll .lets-chat h2.rp-h2 {
  font-size: 39px;
  line-height: 46.8px;
}

/* local-payroll-ksa "Integrate with Your Tech Stack" H1 — live 40/47, local 32/42. */
.rp-local-payroll-ksa h1.new_landing_page_payroll_header,
.rp-local-payroll-ksa h1.new-rp-section-header {
  font-size: 40px;
  line-height: 47px;
}

/* mena-hr-payroll-hub section H2s line-height 48 (live) vs 51.2 (local). */
.rp-mena-hr-payroll-hub h2.new-rp-section-header,
.rp-mena-hr-payroll-hub h2.new_landing_page_payroll_header {
  line-height: 48px;
}

/* "Manual payroll in the KSA / UAE? There's a smarter way" H3 — small section banner.
   Live ships 24/32 H3, local was missing. The H3 may already exist in markup
   but at a different size, OR this is structural (Bucket E). Apply size fix
   if the element exists; harmless no-op if not. */
.rp-ksa-payroll-software h3.manual-payroll-banner,
.rp-uae-payroll-software h3.manual-payroll-banner {
  font-size: 24px;
  line-height: 32px;
}

/* ============ Polish-batch-6 — remote-hiring-report stats cards ========
   Stats cards (458%, 266%, #1, 4x, Plus…) render as H3@32/41.6 on local
   but live ships H1 at 48/42 (text-bigger variant) or 32/42 (no text-bigger).
   CSS-only fix: re-style the H3 to match live's H1 sizing without changing
   the markup tag. */
/* 2026-05-03 polish-batch-11: tags swapped from H3 to H1/H2 in markup
   to match live's actual heading hierarchy. Selectors updated to match
   the new tags; H3 fallbacks kept for any markup that wasn't swapped. */
.rp-remote-hiring-report h1.double-slide-landing-page-left-main-header.security-trust-double-slide-left-grow,
.rp-remote-hiring-report h3.double-slide-landing-page-left-main-header.security-trust-double-slide-left-grow {
  font-size: 32px !important;
  line-height: 42px !important;
}
.rp-remote-hiring-report h1.double-slide-landing-page-left-main-header.security-trust-double-slide-left-grow.text-bigger,
.rp-remote-hiring-report h3.double-slide-landing-page-left-main-header.security-trust-double-slide-left-grow.text-bigger {
  font-size: 48px !important;
  line-height: 42px !important;
}

/* Sub-headings on stats cards — local now H2 (was H3); 20/30 from live. */
.rp-remote-hiring-report h2.double-slide-landing-page-left-main-header.small-font-24,
.rp-remote-hiring-report h3.double-slide-landing-page-left-main-header.small-font-24 {
  font-size: 20px !important;
  line-height: 30px !important;
}

/* "Get salary benchmarks..." H1 (was H2; tag-swapped) — live ships 32/42,
   local was rendering 56/67 (TT5 page-template-default H1 default). */
.rp-remote-hiring-report h1.double-slide-landing-page-left-main-header.full-width {
  font-size: 32px !important;
  line-height: 42px !important;
}

/* Hide local-only "Hear what teams love" testimonials block — live doesn't show
   testimonials on /remote-hiring-report/. Same recurring fix as
   /finance-managers/ Try-RP twin hide. */
.rp-remote-hiring-report ~ * .reviews-band,
.page-template-page-remote-hiring-report .reviews-band {
  display: none !important;
}

/* ============ Polish-batch-7 — mena-hr-payroll-hub card grid ===========
   Cards rendering 1252×45 (full-width thin Swiper-flex slides) on local
   instead of live's 407×244 (3-col grid). Override Swiper layout to
   3-col grid with the canonical 18.07px bottom margin (= 1.39em at 13px). */
.rp-mena-hr-payroll-hub .swiper-wrapper:has(> a.tab_link.swiper-slide) {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  transform: none !important;
}
.rp-mena-hr-payroll-hub a.tab_link.swiper-slide {
  width: auto !important;
  height: auto !important;
  margin-bottom: 18.07px;
  display: flex !important;
  flex-direction: column;
}

/* ============ Polish-batch-V2-A — width-flex-5-7 hero column split ======
   ksa-payroll-software, uae-payroll-software hero rows render 249/1003
   (extreme 20/80) instead of live's 522/730 (5/7 = 41.66/58.33%).
   Same root cause as /finance-managers/ §E — TT5 default flex on
   `.w-col-5` / `.w-col-7` doesn't constrain widths. Force the flex-basis
   for these pages. Same pattern; just extending the scope. */
.rp-ksa-payroll-software .double-section-hero-container.width-flex-5-7 .w-col-5,
.rp-uae-payroll-software .double-section-hero-container.width-flex-5-7 .w-col-5 {
  flex: 0 0 41.6667%;
  width: 41.6667%;
  max-width: 41.6667%;
}
.rp-ksa-payroll-software .double-section-hero-container.width-flex-5-7 .w-col-7,
.rp-uae-payroll-software .double-section-hero-container.width-flex-5-7 .w-col-7 {
  flex: 0 0 58.3333%;
  width: 58.3333%;
  max-width: 58.3333%;
}

/* ============ Polish-batch-V2-B — KSA/UAE EOR row-reverse direction ====
   "Compliant KSA Onboarding" / "Rapid & Compliant Onboarding" rows are
   marked `.security-trust-double-section-hero-container-revert` on both
   live and local but local renders flexDirection: row instead of
   row-reverse. Same pattern as /cor/ §B and finance-managers §D — port
   to KSA/UAE EOR scopes. */
.rp-ksa-employer-of-record .double-section-hero-container.security-trust-double-section-hero-container-revert,
.rp-uae-employer-of-record .double-section-hero-container.security-trust-double-section-hero-container-revert {
  flex-direction: row-reverse;
}

/* ============ Polish-batch-V2-C — uae-local-payroll product slides =====
   4 product slides on /uae-local-payroll/ (Time Off Management, Approval
   Workflows, Organization Chart, Analytics & Reports) carry
   `.security-trust-double-section-hero-container-revert.double-section-hero-container-rev`
   meaning "revert the revert" = row. Local renders row-reverse instead.
   Same chain-cancel pattern as finance-managers §D — port to scope. */
.rp-uae-local-payroll .double-section-hero-container.security-trust-double-section-hero-container.security-trust-double-section-hero-container-revert.double-section-hero-container-rev {
  flex-direction: row;
}

/* Container spacing */
.rp-container {
  padding-left: 24px;
  padding-right: 24px;
}

@media screen and (max-width: 991px) {
  .rp-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .rp-container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media screen and (max-width: 767px) {
  .rp-section {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .rp-container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ==========================================================================
   9. VIDEO PLAYER - Autoplay with Mute CSS Preparation
   ========================================================================== */

/* Player container is an overlay on top of the thumbnail image. It should
   be transparent (with the subtle gradient from migration.css showing the
   thumbnail through) and host the red play-button icon centered within it.
   DO NOT set background-color here — it will cover the thumbnail. */
.main-hero-section-player-container.video-player {
  background-color: transparent;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
}

.main-hero-section-player-container.video-player:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Play-button SVG keeps its intrinsic size; do not stretch to container. */
.video-player-btn {
  width: auto;
  height: auto;
  cursor: pointer;
}

.rp-video-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.rp-video-modal.show {
  display: flex;
}

.rp-video-modal-backdrop {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1;
}

.rp-video-modal-content {
  position: relative;
  z-index: 2;
  width: 90%;
  max-width: 960px;
  aspect-ratio: 16/9;
  margin: auto;
}

.rp-video-modal-close {
  position: absolute;
  top: -40px;
  right: 0;
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  background: none;
  border: none;
  z-index: 3;
}

.rp-video-modal-close:hover {
  color: #ccc;
}

.rp-video-modal-player {
  width: 100%;
  height: 100%;
}

.w-embed-youtubevideo,
.w-embed-youtubevideo iframe {
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   10. TOOLTIP TEXT OVERLAY - Consistent Tooltip Styling
   ========================================================================== */

/* Tooltip base styling */
.rp-tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
  border-bottom: 1px dotted #114ef7;
}

.rp-tooltip .rp-tooltip-text {
  visibility: hidden;
  width: 250px;
  background-color: #15113b;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 12px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -125px;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 0.85rem;
  line-height: 1.4;
  white-space: normal;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Arrow pointing down */
.rp-tooltip .rp-tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #15113b transparent transparent transparent;
}

.rp-tooltip:hover .rp-tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* Right-side tooltip variant */
.rp-tooltip.rp-tooltip-right .rp-tooltip-text {
  bottom: auto;
  left: 125%;
  margin-left: 0;
  margin-top: -25px;
}

.rp-tooltip.rp-tooltip-right .rp-tooltip-text::after {
  top: auto;
  bottom: 50%;
  left: auto;
  right: 100%;
  margin-top: 0;
  margin-right: -5px;
  border-color: transparent #15113b transparent transparent;
}

/* Tooltip text container - ensure text wraps properly */
.tooltip-text-overlay {
  display: inline-block;
  max-width: 300px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Mobile: Tooltip adjustments */
@media screen and (max-width: 767px) {
  .rp-tooltip .rp-tooltip-text {
    width: 200px;
    margin-left: -100px;
    font-size: 0.8rem;
    padding: 6px 10px;
  }
}

/* ==========================================================================
   Global Hover States & Transitions
   ========================================================================== */

/* Ensure all interactive elements have consistent transitions */
a,
button,
.btn,
.btn-2,
.rp-footer-link {
  transition: all 0.3s ease;
}

/* Card hover state - initial dark, hover shows all white */
.card-component,
.rp-card {
  background-color: #f5f5f5;
  transition: all 0.3s ease;
  border-radius: 8px;
  padding: 24px;
}

.card-component:hover,
.rp-card:hover {
  background-color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Link color override for consistency */
a {
  color: #114ef7;
}

a:hover {
  color: #0d3cb8;
}

/* ==========================================================================
   11. Mega-Menu Navigation — MOVED to assets/css/mega-menu.css (responsive-v1)
   The prior inline mega-menu rules here conflicted with the Figma-spec rewrite:
   specifically `.rp-mega-panel { display: none }` + `.rp-mega-panel.is-open { display: block }`
   no longer match the current JS model (which toggles `.is-open` on the DROPDOWN,
   not the panel). That hid the panel on hover at all viewports. The full rewrite
   (tokens, accordion, drawer, RTL, reduced motion) lives in mega-menu.css v1.1.0.
   ========================================================================== */

/* ── Keep: .w-nav-menu position override (migration.css overrides this to relative,
   which would constrain absolutely-positioned mega-panels to the nav-menu's width).
   Scoped to desktop only (min-width: 992px) — at ≤991px mega-menu.min.css needs
   position:absolute on the nav-menu to render the full-width drop-down drawer.
   2026-07-22: was unscoped, blocked the tablet/mobile absolute-position drawer. ── */
@media (min-width: 992px) {
  .rp-navbar .rp-nav-menu {
    position: static;
  }
}

/* ── Drawer vertical position fix (≤991px) ─────────────────────────────────────
   mega-menu.min.css sets top:100% on .rp-nav-menu at ≤991px. With position:static
   that was harmless (top has no effect). After scoping position:static to desktop
   (above), position:absolute is now active at ≤991px — and top:100% resolves to
   100% of the .w-nav-overlay height (= full page height, e.g. 8399px), pushing the
   drawer far off-screen. Webflow wraps the nav-menu inside .w-nav-overlay which
   itself starts just below the navbar, so top:0 places the drawer exactly where it
   should be. 2026-07-22. ── */
@media (max-width: 991px) {
  .rp-navbar .rp-nav-menu {
    top: 0;
  }
}

/* ==========================================================================
   12. COOKIE BAR - GDPR-Compliant Cookie Consent Bar
   ========================================================================== */

.rp-cookie-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-top: 1px solid #e8e8e8;
  padding: 24px;
  z-index: 999;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
  animation: slideUp 0.4s ease-out;
}

.rp-cookie-bar-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.rp-cookie-bar-text {
  flex: 1;
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #666;
  font-family: Mulish, sans-serif;
}

.rp-cookie-bar-link {
  color: #114ef7;
  text-decoration: none;
  transition: color 0.3s ease;
}

.rp-cookie-bar-link:hover {
  text-decoration: underline;
  color: #0d3cb8;
}

.rp-cookie-bar-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}


.rp-cookie-bar-actions .outline-btn {
  padding: 0.75em 1.5em;
  font-size: 0.95rem;
  white-space: nowrap;
}

/* Cookie bar hide animation */
.rp-cookie-bar.hide {
  animation: slideDown 0.4s ease-out forwards;
}

/* Mobile: Stack vertically */
@media screen and (max-width: 767px) {
  .rp-cookie-bar {
    padding: 16px;
  }

  .rp-cookie-bar-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .rp-cookie-bar-text {
    font-size: 0.95rem;
  }

  .rp-cookie-bar-actions {
    width: 100%;
    flex-direction: column;
  }

  
  .rp-cookie-bar-actions .outline-btn {
    width: 100%;
  }
}

/* ==========================================================================
   13. ANNOUNCEMENT BANNER - Top-of-Page Promotional Banner
   ========================================================================== */

.rp-announcement-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #114ef7;
  padding: 12px 24px;
  z-index: 998;
  animation: slideDown 0.4s ease-out;
}

.rp-announcement-bar-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  position: relative;
}

.rp-announcement-bar-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  color: #fff;
  font-family: Mulish, sans-serif;
  font-weight: 500;
  text-align: center;
}

.rp-announcement-bar-link {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.3s ease;
  white-space: nowrap;
}

.rp-announcement-bar-link:hover {
  opacity: 0.8;
}

.rp-announcement-close {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}

.rp-announcement-close:hover {
  opacity: 0.8;
}

/* When announcement bar is visible, push navbar down so it doesn't overlap.
   The .rp-navbar is position:fixed; top:0 in migration.css, so we have to
   override its top to clear the announcement banner.

   Phase 2F-HP-6b-prereq (2026-04-21): rules now gate on the <html> class set
   synchronously by rp_banner_class_inline() in functions.php (wp_head priority
   0) rather than on the old body.rp-announcement-visible class that JS added
   at DOMContentLoaded. Reason: the body-class flip happened after first paint
   under real-network throttle, producing a 48 px CLS (PSI mobile 0.094). The
   html-class flag is available to CSS before any stylesheet parses, so first
   paint already has the final geometry — zero shift. Backwards-compat: JS
   still toggles body.rp-announcement-visible so any third-party code that
   watched for it (analytics, etc.) continues to work, but the layout rules
   no longer care. */
html.rp-banner-shown body {
  padding-top: 52px;
}
html.rp-banner-shown .rp-navbar {
  top: 52px;
}
html.rp-banner-dismissed #rp-announcement-bar {
  display: none;
}

/* Announcement bar hide animation */
.rp-announcement-bar.hide {
  animation: slideUp 0.4s ease-out forwards;
}

/* Mobile: More compact */
@media screen and (max-width: 767px) {
  .rp-announcement-bar {
    padding: 12px 16px;
  }

  .rp-announcement-bar-content {
    gap: 12px;
  }

  .rp-announcement-bar-text {
    font-size: 0.9rem;
  }

  .rp-announcement-close {
    right: 16px;
    font-size: 20px;
  }

  html.rp-banner-shown body {
    padding-top: 48px;
  }
  html.rp-banner-shown .rp-navbar {
    top: 48px;
  }
}

/* ==========================================================================
   14. GLOBAL ANIMATIONS - Slide Up/Down Transitions
   ========================================================================== */

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Hide animations */
@keyframes slideDownHide {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

@keyframes slideUpHide {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

/* ==========================================================================
   15. FIXED CTA BANNER - Sticky Bottom Promotion Component
   ========================================================================== */

.floating-main-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 901;
  background: linear-gradient(135deg, #114ef7 0%, #0a3db8 100%);
  color: white;
  padding: 16px 24px;
  box-shadow: 0 -2px 12px rgba(17, 78, 247, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
  transition: all 0.3s ease-in-out;
}

.floating-main-container.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.floating-banner-content {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.floating-banner-left {
  flex: 1;
  min-width: 200px;
}

.floating-banner-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  font-family: Mulish, sans-serif;
  line-height: 1.3;
  color: white;
}

.floating-banner-subtitle {
  margin: 8px 0 0 0;
  font-size: 0.938rem;
  font-family: Mulish, sans-serif;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
}

.floating-banner-right {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.floating-banner-btn {
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 0.938rem;
  font-weight: 600;
  font-family: Mulish, sans-serif;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.floating-banner-btn-primary {
  background-color: white;
  color: #114ef7;
}

.floating-banner-btn-primary:hover {
  background-color: rgba(255, 255, 255, 0.95);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.floating-banner-btn-secondary {
  background-color: transparent;
  color: white;
  border: 2px solid white;
}

.floating-banner-btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.floating-banner-close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: white;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.floating-banner-close:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.floating-banner-close svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
}

/* Responsive adjustments for tablet and mobile */
@media (max-width: 991px) {
  .floating-banner-content {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .floating-banner-left {
    width: 100%;
  }

  .floating-banner-right {
    width: 100%;
    justify-content: space-between;
  }

  .floating-banner-btn {
    flex: 1;
    min-width: 140px;
  }
}

@media (max-width: 767px) {
  .floating-main-container {
    padding: 12px 16px;
  }

  .floating-banner-title {
    font-size: 1rem;
  }

  .floating-banner-subtitle {
    font-size: 0.875rem;
  }

  .floating-banner-btn {
    padding: 10px 16px;
    font-size: 0.875rem;
    min-width: 100px;
  }

  .floating-banner-close {
    width: 36px;
    height: 36px;
  }

  .floating-banner-close svg {
    width: 20px;
    height: 20px;
  }
}

/* Prevent body scroll adjustment when banner is visible */
body.rp-fixed-cta-visible {
  padding-bottom: 0;
}

/* ==========================================================================
   Section 16: Case Studies Slider (Swiper Carousel)
   ========================================================================== */
.case-studies-slider-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
  background-color: #fff;
}

.case-studies-swiper {
  margin-top: 2.5rem;
}

.case-studies-slide {
  height: auto;
  display: flex;
}

.case-studies-card {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  background-color: #f8f9fa;
  border-radius: 12px;
  transition: all 0.3s ease;
  text-decoration: none;
  color: inherit;
  border: 1px solid #e0e0e0;
  transform: rotate(6.36deg);
}

.case-studies-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: rotate(6.36deg) translateY(-4px);
}

.case-studies-card-logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  margin-bottom: 1.5rem;
}

.case-studies-card-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.case-studies-card-desc {
  flex-grow: 1;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #333;
  margin-bottom: 1.5rem;
}

.case-studies-card-cta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #114ef7;
  font-weight: 600;
  transition: gap 0.3s ease;
}

.case-studies-card-cta:hover {
  gap: 0.75rem;
}

.case-studies-card-arrow {
  width: 16px;
  height: 16px;
}

/* Swiper Navigation */
.swiper-button-prev.case-studies-button-prev,
.swiper-button-next.case-studies-button-next {
  width: 48px;
  height: 48px;
  background-color: #114ef7;
  border-radius: 50%;
  color: white;
  top: auto;
  bottom: -70px;
}

.swiper-button-prev.case-studies-button-prev::after,
.swiper-button-next.case-studies-button-next::after {
  font-size: 20px;
}

.swiper-button-prev.case-studies-button-prev {
  left: auto;
  right: 60px;
}

.swiper-button-next.case-studies-button-next {
  right: 0;
}

.swiper-pagination.case-studies-pagination {
  bottom: -60px;
  text-align: left;
  padding-left: 0;
}

.swiper-pagination-bullet.case-studies-pagination .swiper-pagination-bullet {
  background-color: #d0d0d0;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #114ef7;
}

/* Desktop: 2 columns, 52px gap */
@media (min-width: 992px) {
  .case-studies-swiper {
    --swiper-slides-per-view: 2;
    gap: 52px;
  }
}

/* Tablet: 2 columns */
@media (max-width: 991px) and (min-width: 768px) {
  .case-studies-swiper {
    --swiper-slides-per-view: 2;
    gap: 30px;
  }

  .case-studies-card {
    padding: 1.5rem;
  }
}

/* Mobile: 1 column */
@media (max-width: 767px) {
  .case-studies-slider-section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .case-studies-swiper {
    --swiper-slides-per-view: 1;
    gap: 20px;
  }

  .case-studies-card {
    padding: 1.5rem;
    transform: rotate(0deg);
  }

  .case-studies-card:hover {
    transform: rotate(0deg) translateY(-2px);
  }

  .swiper-button-prev.case-studies-button-prev,
  .swiper-button-next.case-studies-button-next {
    width: 40px;
    height: 40px;
    bottom: -60px;
  }
}

/* ==========================================================================
   Section 17: Case Studies Grid (3-Column Layout)
   ========================================================================== */
.case-studies-grid-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
  background-color: #f8f9fa;
}

.case-studies-grid-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.case-studies-grid-header h2 {
  margin: 0;
}

.rp-link-arrow {
  color: #114ef7;
  text-decoration: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: gap 0.3s ease;
}

.rp-link-arrow:hover {
  gap: 0.75rem;
}

.case-studies-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.case-studies-grid-item {
  width: 100%;
}

/* Tablet: 2 columns */
@media (max-width: 991px) and (min-width: 768px) {
  .case-studies-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

/* Mobile: 1 column */
@media (max-width: 767px) {
  .case-studies-grid-section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .case-studies-grid-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .case-studies-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ==========================================================================
   Section 18: Ebook Grid (3-Column Layout with Thumbnails)
   ========================================================================== */
.ebook-grid-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
  background-color: #fff;
}

.ebook-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2.5rem;
}

.ebook-grid-item {
  width: 100%;
}

.ebook-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  background-color: #f8f9fa;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  text-decoration: none;
  color: inherit;
  border: 1px solid #e0e0e0;
}

.ebook-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

.ebook-card-thumbnail {
  position: relative;
  width: 100%;
  padding-bottom: 66.67%;
  overflow: hidden;
  background-color: #e8eef7;
}

.ebook-card-thumbnail-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e8eef7 0%, #d5dff0 100%);
}

.ebook-card-thumbnail-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
  z-index: 1;
}

.ebook-card-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 1.5rem;
}

.ebook-card-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #0f1035;
  margin: 0 0 0.5rem 0;
  line-height: 1.4;
}

.ebook-card-subtitle {
  font-size: 0.85rem;
  color: #114ef7;
  font-weight: 600;
  margin: 0 0 1rem 0;
}

.ebook-card-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #666;
  margin: 0 0 1.5rem 0;
  flex-grow: 1;
}

.ebook-card-cta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #114ef7;
  font-weight: 600;
  transition: gap 0.3s ease;
  margin-top: auto;
}

.ebook-card-cta:hover {
  gap: 0.75rem;
}

.ebook-card-arrow {
  width: 16px;
  height: 16px;
}

/* Tablet: 2 columns */
@media (max-width: 991px) and (min-width: 768px) {
  .ebook-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

/* Mobile: 1 column */
@media (max-width: 767px) {
  .ebook-grid-section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .ebook-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .ebook-card-content {
    padding: 1.25rem;
  }

  .ebook-card-title {
    font-size: 1rem;
  }
}

/* ==========================================================================
   11. BLOG TOPICS - Category Filter Section
   ========================================================================== */
.rp-blog-topics-section {
  background-color: #f8fafb;
  padding-top: 48px;
  padding-bottom: 48px;
  margin-top: 32px;
}

.rp-blog-topics-heading {
  font-size: 1.75rem;
  font-weight: 700;
  color: #15113b;
  margin-bottom: 16px;
  text-align: center;
}

.rp-blog-topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-wrap, minmax(150px, 1fr));
  gap: 12px;
  justify-items: center;
  flex-wrap: wrap;
}

.rp-topic-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  background-color: #fff;
  border: 1px solid #e0e5f0;
  border-radius: 24px;
  text-decoration: none;
  color: #15113b;
  transition: all 0.3s ease;
  text-align: center;
  min-width: 140px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.rp-topic-pill:hover {
  background-color: #114ef7;
  color: #fff;
  border-color: #114ef7;
  box-shadow: 0 4px 12px rgba(17, 78, 247, 0.15);
}

.rp-topic-name {
  font-weight: 600;
  font-size: 0.95rem;
}

.rp-topic-count {
  font-size: 0.8rem;
  opacity: 0.7;
  margin-top: 4px;
}

@media screen and (max-width: 767px) {
  .rp-blog-topics-heading {
    font-size: 1.35rem;
  }

  .rp-blog-topics-grid {
    grid-template-columns: repeat(auto-wrap, minmax(120px, 1fr));
    gap: 10px;
  }

  .rp-topic-pill {
    padding: 12px 16px;
    min-width: 120px;
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   12. BLOG POPULAR ARTICLES - Grid Section
   ========================================================================== */
.rp-blog-popular-section {
  padding-top: 48px;
  padding-bottom: 48px;
  background-color: #fff;
}

.rp-blog-popular-heading {
  font-size: 1.75rem;
  font-weight: 700;
  color: #15113b;
  margin-bottom: 32px;
  text-align: center;
}

.rp-blog-popular-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.rp-popular-article-card {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid #e0e5f0;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
  height: 100%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.rp-popular-article-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

.rp-popular-thumb {
  width: 100%;
  height: 200px;
  background-size: cover;
  background-position: center;
  background-color: #f0f4fe;
}

.rp-popular-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.rp-popular-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #15113b;
  margin-bottom: 12px;
  line-height: 1.4;
}

.rp-popular-excerpt {
  font-size: 0.95rem;
  color: #545454;
  line-height: 1.5;
  margin-bottom: 12px;
  flex-grow: 1;
}

.rp-popular-category {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #114ef7;
  background-color: #f0f4fe;
  padding: 4px 12px;
  border-radius: 16px;
  width: fit-content;
}

@media screen and (max-width: 767px) {
  .rp-blog-popular-heading {
    font-size: 1.35rem;
  }

  .rp-blog-popular-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .rp-popular-thumb {
    height: 160px;
  }

  .rp-popular-content {
    padding: 16px;
  }
}

/* ==========================================================================
   13. BLOG EBOOKS - Free Resources Section
   ========================================================================== */
.rp-blog-ebooks-section {
  background: linear-gradient(135deg, #f0f4fe 0%, #f8fafb 100%);
  padding-top: 56px;
  padding-bottom: 56px;
  margin-top: 32px;
  border-top: 1px solid #e0e5f0;
}

.rp-blog-ebooks-heading {
  font-size: 1.75rem;
  font-weight: 700;
  color: #15113b;
  margin-bottom: 8px;
  text-align: center;
}

.rp-blog-ebooks-subheading {
  font-size: 1rem;
  color: #545454;
  text-align: center;
  margin-bottom: 32px;
}

.rp-blog-ebooks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.rp-ebook-card {
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.rp-ebook-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

.rp-ebook-thumbnail {
  width: 100%;
  height: 200px;
  background-size: cover;
  background-position: center;
  background-color: #e3ebfd;
}

.rp-ebook-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.rp-ebook-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #15113b;
  margin-bottom: 12px;
  line-height: 1.4;
}

.rp-ebook-description {
  font-size: 0.95rem;
  color: #545454;
  line-height: 1.5;
  margin-bottom: 16px;
  flex-grow: 1;
}

.rp-ebook-download-btn {
  display: inline-block;
  padding: 10px 16px;
  background-color: #114ef7;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.rp-ebook-download-btn:hover {
  background-color: #0940d4;
  box-shadow: 0 4px 12px rgba(17, 78, 247, 0.25);
}

@media screen and (max-width: 767px) {
  .rp-blog-ebooks-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .rp-blog-ebooks-heading {
    font-size: 1.35rem;
  }

  .rp-blog-ebooks-subheading {
    font-size: 0.95rem;
    margin-bottom: 24px;
  }

  .rp-blog-ebooks-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .rp-ebook-thumbnail {
    height: 160px;
  }

  .rp-ebook-content {
    padding: 16px;
  }
}

/* ==========================================================================
   14. PRICING DETAILS - Feature Comparison Table
   ========================================================================== */
.rp-pricing-details-section {
  background-color: #fff;
  padding-top: 56px;
  padding-bottom: 56px;
  border-top: 1px solid #e0e5f0;
}

.rp-pricing-details-heading {
  font-size: 1.75rem;
  font-weight: 700;
  color: #15113b;
  margin-bottom: 40px;
  text-align: center;
}

.rp-pricing-details-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.rp-pricing-details-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.rp-pricing-details-table thead {
  background-color: #f8fafb;
  border-bottom: 2px solid #e0e5f0;
}

.rp-pricing-details-table th {
  padding: 20px 16px;
  text-align: left;
  font-weight: 600;
  color: #15113b;
  border-right: 1px solid #e0e5f0;
}

.rp-pricing-details-table th:last-child {
  border-right: none;
}

.rp-pricing-details-table th.rp-pricing-details-feature {
  min-width: 200px;
  border-right: 1px solid #e0e5f0;
}

.rp-pricing-details-table th.rp-pricing-details-col {
  text-align: center;
  min-width: 140px;
}

.rp-pricing-details-price {
  display: block;
  font-size: 0.85rem;
  color: #114ef7;
  font-weight: 700;
  margin-top: 4px;
}

.rp-pricing-details-table tbody tr {
  border-bottom: 1px solid #e0e5f0;
}

.rp-pricing-details-table tbody tr:hover {
  background-color: #f8fafb;
}

.rp-pricing-details-table td {
  padding: 16px;
  color: #545454;
}

.rp-pricing-details-table td.rp-pricing-details-feature {
  font-weight: 500;
  color: #15113b;
  min-width: 200px;
  border-right: 1px solid #e0e5f0;
}

.rp-pricing-details-table td.rp-pricing-details-check,
.rp-pricing-details-table td.rp-pricing-details-empty {
  text-align: center;
  border-right: 1px solid #e0e5f0;
}

.rp-pricing-details-table td.rp-pricing-details-check:last-child,
.rp-pricing-details-table td.rp-pricing-details-empty:last-child {
  border-right: none;
}

.rp-pricing-details-table td.rp-pricing-details-check svg {
  display: inline-block;
  vertical-align: middle;
}

.rp-pricing-details-table td.rp-pricing-details-empty {
  color: #999;
  font-weight: 500;
}

.rp-pricing-details-section-header {
  background-color: #f0f4fe;
  font-weight: 700;
  color: #15113b;
}

.rp-pricing-details-section-header td {
  padding: 12px 16px;
  font-size: 0.95rem;
}

/* Responsive Pricing Details Table */
@media screen and (max-width: 1024px) {
  .rp-pricing-details-table {
    font-size: 0.9rem;
  }

  .rp-pricing-details-table th,
  .rp-pricing-details-table td {
    padding: 12px;
  }

  .rp-pricing-details-table th.rp-pricing-details-feature,
  .rp-pricing-details-table td.rp-pricing-details-feature {
    min-width: 160px;
  }

  .rp-pricing-details-table th.rp-pricing-details-col {
    min-width: 110px;
  }
}

@media screen and (max-width: 767px) {
  .rp-pricing-details-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .rp-pricing-details-heading {
    font-size: 1.35rem;
    margin-bottom: 32px;
  }

  .rp-pricing-details-table-wrapper {
    margin: 0 -16px;
    padding: 0 16px;
  }

  .rp-pricing-details-table {
    font-size: 0.8rem;
  }

  .rp-pricing-details-table th,
  .rp-pricing-details-table td {
    padding: 10px 8px;
  }

  .rp-pricing-details-table th.rp-pricing-details-feature,
  .rp-pricing-details-table td.rp-pricing-details-feature {
    min-width: 140px;
  }

  .rp-pricing-details-table th.rp-pricing-details-col {
    min-width: 90px;
  }

  .rp-pricing-details-price {
    font-size: 0.75rem;
    margin-top: 2px;
  }

  .rp-pricing-details-section-header td {
    padding: 10px 8px;
    font-size: 0.85rem;
  }
}

/* ==========================================================================
   14. REPORT BANNER — subtitle sentence case (match live)
   Global h6 rule applies text-transform: uppercase. Override for this subhead.
   ========================================================================== */
.banner-container-left-content-subheader {
  text-transform: none !important;
}

/* ==========================================================================
   15. COUNTRY SLIDER — "Hire from the Global Talent Pool" / similar
   --------------------------------------------------------------------------
   Used on home (.rp-home-countries wrapper) AND on product-page bodies that
   render the same Talent Pool block (EOR, Relocation, etc.) inside a
   page-level wrapper such as .rp-eor.

   Phase 2-eor (2026-05-01): originally scoped to .rp-home-countries only;
   the EOR Talent Pool section was at 98.30% mismatch on the visual harness
   because none of these rules applied. Generalized the parent selector to
   `:is(.rp-home-countries, .rp-eor, .rp-relocation)` so the navy bg, landscape aspect-ratio,
   and slider sizing land on EOR (and any future product page using the
   same component) without duplicating the rule block.

   Card = relative container; on home it carries an absolute full-bleed
   skyline image plus a flag/name overlay. On EOR the markup currently
   omits the absolute skyline image — the rule still works (the card falls
   back to the flat navy fill) and we can add per-page skyline assets later.
   ========================================================================== */
:is(.rp-home-countries, .rp-eor, .rp-relocation) .new-rp-section-vertical-scroll-container {
  max-width: 1300px;
  margin: 0 auto;
  overflow: hidden;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

/* Force the unnamed wrapper divs between container and swiper to respect
   container width (Webflow's w-dyn-list wrappers otherwise grow to fit content).
   2026-05-02: added `:not(.swiper-wrapper)` to the grandchild selector. The
   integrations carousel is structured as
   `.new-rp-section-vertical-scroll-container > .swiper > .swiper-wrapper`,
   so the grandchild matched the swiper-wrapper and clipped its slides past
   the visible 1236px viewport (overflow:hidden on the wrapper hid every
   slide Swiper translated outside its box). The countries carousel on
   home/eor/relocation uses a w-dyn-list wrapper that's NOT .swiper-wrapper,
   so the exclusion keeps the original fix intact. */
:is(.rp-home-countries, .rp-eor, .rp-relocation) .new-rp-section-vertical-scroll-container > div:not(.swiper),
:is(.rp-home-countries, .rp-eor, .rp-relocation) .new-rp-section-vertical-scroll-container > div > div:not(.swiper-wrapper) {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

:is(.rp-home-countries, .rp-eor, .rp-relocation) .swiper.swiper-countries-slider {
  opacity: 1;
  padding: 8px 0 32px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Let Swiper size the slides; kill any Webflow float/100% inheritance */
:is(.rp-home-countries, .rp-eor, .rp-relocation) .rp-country-item {
  display: block;
  text-decoration: none;
  padding-bottom: 0;
}

/* Section background — live's Talent Pool section is navy, local was
   rendering white because new-rp-section-blue-bg has no base rule. The
   parent scope (.rp-home-countries / .rp-eor) ensures we don't affect
   country sliders on pages that use different bg treatments. Heading text
   is already white via .new-rp-section-header-white. */
.new-rp-section.rp-home-countries,
.rp-home-countries.new-rp-section.new-rp-section-blue-bg,
.rp-eor .new-rp-section.new-rp-section-vertical-border-slider-section.new-rp-section-blue-bg {
  background-color: #021143 !important;
  padding-top: 56px;
  padding-bottom: 56px;
}
/* Heading + accent color rules — restricted to the Talent Pool's navy
   section so other section headings on the page (e.g. relocation's
   "Get Relocated In Three Simple Steps" which uses the same
   `.new-rp-section-header` class) don't go white. */
:is(.rp-home-countries, .rp-eor, .rp-relocation) .new-rp-section.new-rp-section-blue-bg .new-rp-section-header,
:is(.rp-home-countries, .rp-eor, .rp-relocation) .new-rp-section.new-rp-section-blue-bg .new-rp-section-header-white,
.rp-home-countries .new-rp-section-header,
.rp-home-countries .new-rp-section-header-white {
  color: #ffffff !important;
}
:is(.rp-home-countries, .rp-eor, .rp-relocation) .new-rp-section.new-rp-section-blue-bg .highlight-it-gold,
.rp-home-countries .highlight-it-gold {
  color: #ffd02f !important;
}

/* EX29 (2026-05-07 designer review): canonical .highlight-it-gold color
   sitewide. Overrides critical-home.repaired.css's #f4c542 (dark olive)
   which the designer flagged as wrong. Target: #ffd02f.
   .yellow-line.small combined here so both get gold; standalone rule below
   overrides .yellow-line.small to blue (#114ef7). */
/* Mohamed 2026-07-11: .highlight-it-gold must be GOLD, not the #f4c542 olive that critical-home.*
   forces with !important — so this needs !important to win. Value per Mohamed: rgb(244,197,66). */
.highlight-it-gold {
  color: rgb(244, 197, 66) !important;
}
.yellow-line.small {
  color: #ffd02f;
}

.yellow-line.small {
  color: #114ef7 !important;
}

/* EX23 (2026-05-07 designer review): nav dropdown items (Solutions /
   Who we serve / Content hub) were missing the chevron icon visible on
   live. Live wraps each dropdown item in a `<div class="rp-dropdown-toggle">`
   bundling link text + an <img class="drop-dir"> chevron. On local the
   dropdown trigger is a `<button class="rp-mega-toggle">` (no chevron
   markup). Append the chevron via CSS pseudo-element on the button.
   ── RETIRED 2026-07-14 (Cowork): the shared mega-menu markup now ships an
   inline <svg class="rp-mega-chevron"> inside every .rp-mega-toggle, so this
   pseudo-element rendered a SECOND chevron next to it ("double menu icons",
   Mo's note — reproduced on Pricing). Neutralised, not deleted, for the
   record. If a toggle ever lacks the svg again, fix the markup, not this. */
.rp-navbar .rp-mega-toggle::after {
  content: none !important;
  display: none !important;
}

/* EX27 (2026-05-07 designer review): blog search input was missing border.
   Live's blog uses .rp-nav-menu-with-filter-search; local uses
   .blog-search-input. Cover both selectors so future markup variants stay
   styled. */
input.blog-search-input,
input.rp-nav-menu-with-filter-search,
.rp-blog-listing input[type="search"],
.rp-blog-listing input[type="text"][placeholder*="earch"] {
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 12px 16px;
  background-color: #fff;
  transition: border-color 0.15s ease;
}
input.blog-search-input:focus,
input.rp-nav-menu-with-filter-search:focus {
  border-color: #114ef7;
  outline: none;
}

/* 2026-06-18 (Greg): blog filter bar fixes.
   (1) The border rule above set `padding: 12px 16px`, which flattened the search
   input's left padding and let the magnifier icon (position:absolute; left:14px)
   overlap the placeholder text. Restore the left padding so text clears the icon.
   (2) With ~12 categories now, the tabs row (overflow-x:auto) clipped the list.
   Let it wrap so every category shows and the search box no longer cuts it off. */
.rp-blog-listing .blog-filter-bar input.blog-search-input,
.rp-blog-listing .blog-filter-bar input[type="text"][placeholder*="earch"] {
  padding-left: 44px;
}
.rp-blog-listing .blog-filter-bar .blog-category-tabs {
  overflow-x: visible;
  flex-wrap: wrap;
  justify-content: center; /* centre wrapped rows so the partial bottom row aligns nicely */
}

:is(.rp-home-countries, .rp-eor, .rp-relocation) .thumb-wrap.countries-wrapper.thumb-wrap-relative {
  position: relative;
  width: 100%;
  /* 2026-05-01 v3: Cowork visual audit confirmed live cards on BOTH home
     and EOR are portrait 302×336 (ratio 0.90, taller-than-wide), NOT
     landscape 1.42:1. The earlier landscape rule was a wrong-direction
     fix made when the aspect-ratio property's effect was misread. Card
     bg is transparent on live too — the country photograph (placed via
     `.thumb-wrap-absolute-img.thumb-wrap-absolute-img-v3` filling 100%)
     covers the entire card; the navy comes from the section, not the
     card itself. Mobile rule below caps to 260 px for narrower viewports. */
  height: 336px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 0;
  margin: 0 0 16px;
  background-color: transparent;
}

:is(.rp-home-countries, .rp-eor, .rp-relocation) .thumb-wrap-absolute-img.thumb-wrap-absolute-img-v3 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  border-radius: 8px;
}

/* Readability gradient under the country tag */
:is(.rp-home-countries, .rp-eor, .rp-relocation) .thumb-wrap.countries-wrapper.thumb-wrap-relative::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  background: linear-gradient(to top, rgba(10, 31, 92, 0.75) 0%, rgba(10, 31, 92, 0) 100%);
  z-index: 2;
  pointer-events: none;
}

:is(.rp-home-countries, .rp-eor, .rp-relocation) .country-tag-container.country-tag-container-v3 {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 0 16px 16px;
  padding: 0;
  background-color: transparent;
  border: none;
  width: auto;
  height: auto;
  border-radius: 0;
}

:is(.rp-home-countries, .rp-eor, .rp-relocation) .thumb-wrap-img.thumb-wrap-img-v3 {
  width: 32px;
  height: 20px;
  object-fit: cover;
  border-radius: 2px;
  margin: 0;
  flex-shrink: 0;
}

:is(.rp-home-countries, .rp-eor, .rp-relocation) .thumb-wrap-p.thumb-wrap-p-v3 {
  color: #fff;
  font-family: "Mulish", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  padding: 0;
  margin: 0;
  text-align: left;
}

/* Responsive: smaller cards on mobile */
@media (max-width: 767px) {
  :is(.rp-home-countries, .rp-eor, .rp-relocation) .thumb-wrap.countries-wrapper.thumb-wrap-relative {
    height: 260px;
  }
  :is(.rp-home-countries, .rp-eor, .rp-relocation) .thumb-wrap-p.thumb-wrap-p-v3 {
    font-size: 14px;
  }
}

/* ==========================================================================
   16. HOME PRACTICAL GUIDES — 3-card blog grid
   ========================================================================== */
.rp-home-practical-guides-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 40px;
}

.rp-home-practical-guides .rp-blog-item.rp-blog-item-border {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  padding: 0;
  background: transparent;
}

.rp-home-practical-guides .thumb-wrap.thumb-wrap-relative {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  background-color: #f0f4fe;
}

.rp-home-practical-guides .thumb-wrap-absolute-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.rp-home-practical-guides .rp-blog-item:hover .thumb-wrap-absolute-img {
  transform: scale(1.03);
}

.rp-home-practical-guides .rp-h3.blog-new-rp-h3 {
  font-family: "Mulish", sans-serif;
  /* 2026-05-01: live remotepass.com/ Practical Guides cards use H3 18px / 26px.
     Was 22px / 1.3 (28.6px) which the structured diff flagged. */
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  color: #0a1f5c;
  margin: 0 0 8px;
}

.rp-home-practical-guides .rp-p.blog-new-rp-p {
  font-family: "Mulish", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #5a6883;
  margin: 0;
}

.rp-home-practical-guides .catagory-tag {
  display: inline-block;
  font-family: "Mulish", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #0a1f5c;
  background-color: #eaf0ff;
  padding: 6px 12px;
  border-radius: 999px;
  line-height: 1;
}

/* ==========================================================================
   TESTIMONIALS + TRY-RP CONTINUOUS CREAM BAND
   --------------------------------------------------------------------------
   Live remotepass.com nests both the testimonials swiper AND the Try-RP
   twin-CTA banner inside ONE shared `.rp-section.dark-blue-bg
   .new-footer-awards-orange` wrapper, producing a single continuous
   white-to-cream gradient band.

   Locally we keep them as TWO sibling template parts (home-testimonials.html
   + home-try-rp.html), each carrying its own `.rp-section.dark-blue-bg
   .new-footer-awards-orange.no-v3-pattern` wrapper. That makes the gradient
   restart from #fff at the top of the Try-RP section, creating a hard
   visual break between two cream bands.

   Fix without restructuring template parts (home-try-rp is reused on 100+
   pages and is always preceded by home-testimonials in home-footer.html):
   replace the gradient on `.home-try-rp-section` with a solid #ffe797
   (the colour the testimonials gradient resolves to at its bottom edge),
   strip the testimonials section's bottom padding, and pull the Try-RP
   section flush against it. The two wrappers visually merge into one
   continuous cream band that matches live.
   ========================================================================== */
.rp-section.dark-blue-bg.new-footer-awards-orange.no-v3-pattern.home-try-rp-section {
  background-image: none;
  background-color: #ffe797;
  padding-top: 0;
  margin-top: 0;
}
/* Remove the 40px bottom padding the testimonials section adds, so the
   yellow continues directly into the Try-RP section with no gap. */
.rp-section.dark-blue-bg.new-footer-awards-orange.no-v3-pattern:has(+ .home-try-rp-section),
.rp-section.dark-blue-bg.new-footer-awards-orange.no-v3-pattern.reviews-band {
  padding-bottom: 0;
}

@media (max-width: 991px) {
  .rp-home-practical-guides-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 639px) {
  .rp-home-practical-guides-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .rp-home-practical-guides .rp-h3.blog-new-rp-h3 {
    font-size: 20px;
  }
}

/* ==========================================================================
   End QA Fixes
   ========================================================================== */

/* Try-RP twin CTA — Contractors card global brand-blue background.
   Live remotepass.com uses #114ef7 on the contractors card across all
   pages. Was only applied scoped to .rp-hr-managers in migration.css,
   leaving home + other core landing pages with the parent-inherited
   navy. Apply globally so home matches live. */
.try-box.new-footer-try-box.new-rp-footer-try-box.new-rp-footer-try-box-contractors {
  background-color: #114ef7 !important;
}

/* ==========================================================================
   Home product slides — force alternation matching live: R, L, R, L, R, L
   2026-05-01 v2: SCOPED to body.home. Originally unscoped, which forced
   the home alternation pattern onto every page with .main-section-holder
   (caused cor's L/R to invert when its body was checked Phase 2-cor).
   Live's alternation pattern is per-page — cor uses L, R, L, R, L (the
   opposite of home), so a global rule can't be right for both.
   ========================================================================== */
body.home .main-section-holder .hero_double_section_2:nth-of-type(1) .double-section-hero-container,
body.home .main-section-holder .hero_double_section_2:nth-of-type(3) .double-section-hero-container,
body.home .main-section-holder .hero_double_section_2:nth-of-type(5) .double-section-hero-container {
  flex-direction: row !important;       /* image-RIGHT (markup is [text, image] → row keeps order) */
}
body.home .main-section-holder .hero_double_section_2:nth-of-type(2) .double-section-hero-container,
body.home .main-section-holder .hero_double_section_2:nth-of-type(4) .double-section-hero-container,
body.home .main-section-holder .hero_double_section_2:nth-of-type(6) .double-section-hero-container {
  flex-direction: row-reverse !important; /* image-LEFT (reverses [text, image] to [image, text]) */
}

/* ==========================================================================
   17. EOR / RELOCATION TRUST BADGES
   --------------------------------------------------------------------------
   2026-05-01 update: removed earlier lavender override. The reference for
   trust-badge styling is the home page's canonical navy variant (#021143
   via .badges-trusted-new-design-blue in migration.css). Live's EOR uses
   a separate `-gray` variant the migration consolidated away, but matching
   home's navy is the desired target. Letting the canonical rule win means
   no override is needed here.
   ========================================================================== */

/* ==========================================================================
   18. EXIT-INTENT LEAVE-MODAL — hidden by default
   --------------------------------------------------------------------------
   2026-05-01: User-reported regression on /contractors/ — the "Before You
   Go: Is Contractor Management Holding You Back?" heading was rendering
   as an inline section in the page flow. Live hides the same markup via
   Webflow CSS (remotepass-v2.webflow.css:24315-24333) but those rules
   were never ported to the theme. Porting them here so every page using
   the .leave-modal-toggle pattern (contractors, relocation, ai, etc.)
   gets the modal hidden by default. The Webflow JS toggles `.shopopup`
   on exit-intent to reveal it.
   ========================================================================== */
.landing-page-form-container.landing-page-form-container-exit {
  position: fixed;
  inset: 0%;
}

.landing-page-form-container.hidepopup {
  z-index: -1;
  opacity: 0;
}

.landing-page-form-container.hidepopup.shopopup {
  z-index: 1000;
  opacity: 1;
}

.landing-page-form-container.landing-page-form-container-exit.hidepopup.hide {
  display: none;
}

/* Leave-modal H3 line-height — live uses 32 px (1.333 ratio), local was
   defaulting to 33.6 px (1.4 ratio). Fix globally since every page using
   the leave-modal pattern has the same H3 markup. Ported from cor §Q
   (was scoped to .rp-cor) to be cross-page. */
.landing-page-sub-container-exit-h3 {
  line-height: 32px;
}

/* ==========================================================================
   19. DOUBLE-SECTION-EXTRA-BG HIDE MODIFIER — port from Webflow
   --------------------------------------------------------------------------
   2026-05-01: User-reported regression on /contractors/ — the "Our
   customers love us! / Recognized Excellence of RemotePass" banner was
   visible on local but not on live. Webflow CSS at
   remotepass-v2.webflow.css:24878 sets `display: none` on any
   .hero_double_section.security-trust-hero_double_section.double_section-extra-bg
   that also has the `.double_section-extra-bg-hide` modifier — the
   convention is that the `-hide` suffix means "don't render this".
   Local's body markup carries the same modifier (correctly copied from
   Webflow source) but the rule was missing from the theme cascade, so
   the section rendered instead of being hidden. Porting the rule here.
   Applies to any page using the security-trust-hero_double_section
   pattern — currently contractors, likely future product pages too.
   ========================================================================== */
.hero_double_section.security-trust-hero_double_section.double_section-extra-bg.double_section-extra-bg-hide,
.hero_double_section.security-trust-hero_double_section.double_section-extra-bg.new-rp-hero_double_section-footer.hide {
  display: none;
}

/* ============ SOFT-GRADIENT HEROES — bare _bg_extra_layer chain ==========
   Polish-batch-1 (2026-05-03): the 6 pages newly added to
   `$soft_gradient_slugs` in inc/hero-content-bindings.php
   (ksa-payroll-software, local-payroll-ksa, uae-local-payroll,
   uae-payroll-software, mena-hr-payroll-hub, remote-hiring-report) now
   emit `_bg_extra_layer` on the hero, but migration.css only ships the
   15%-stop gradient for the FULL chain (with rounded-bottom +
   bg-light-blue + adjust-padding helpers). The bare `_bg_extra_layer`
   variant has only `padding-bottom: 40px` from migration.css line 744
   and no gradient.
   This rule restores the same lavender 15%-stop gradient that the other
   soft-gradient pages get via their per-page qa-fixes-<slug>.css §B
   rules (cor, ai, relocation, apis, partner-program, finance-managers,
   hr-managers all use the same selector + values). Targeting the bare
   chain (no helper modifiers) so the FULL-chain pages don't double-fire.
   ========================================================================== */
.hero_double_section.new_rp_hero_double_section.new_rp_hero_double_section_bg.new_rp_hero_double_section_bg_extra_layer:not(.rounded-bottom):not(.bg-light-blue):not(.adjust-padding) {
  background-color: #fff;
  background-image: linear-gradient(rgba(228, 235, 254, 0), rgb(228, 235, 254) 15%, rgb(228, 235, 254));
  background-position: 0 0;
  background-repeat: repeat;
  background-size: auto;
  background-attachment: scroll;
  padding-top: 40px;
  padding-bottom: 24px;
}

/* ============ Polish-batch-9 (Cowork V2 follow-up) ============================
   Three Cowork-V2-blocked items resolved here using local diff-harness data.
   ========================================================================== */

/* (1) KSA/UAE Employer of Record — section-header H2 padding 56→16
       The "Why Choose RemotePass" + "Why Choose for KSA/UAE EOR" H2s on these
       pages render with migration.css:1316 default padding-top:56. Live ships
       16. Both H2s carry `.adjust-mt` modifier — scope to that. */
.rp-ksa-employer-of-record h2.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.adjust-mt,
.rp-uae-employer-of-record h2.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.adjust-mt {
  padding-top: 16px;
}

/* (2) /remote-hiring-report/ hero — force 6/6 layout (live ships 626/626)
       Local body has `.width-flex-5-7` which gives 522/730 cols. Live's hero
       on this page is 6/6 (no 5/7 class). CSS-only fix overrides the 5/7
       basis; markup unchanged. */
.rp-remote-hiring-report .double-section-hero-container.width-flex-5-7 > .w-col-5,
.rp-remote-hiring-report .double-section-hero-container.width-flex-5-7 > .w-col-7 {
  width: 626px;
  max-width: 626px;
  flex: 0 0 626px;
}

/* (3) /remote-hiring-report/ "Get salary benchmarks" row — flex-direction
       row-reverse + 6/6 cols. Force row-reverse on the security-trust
       container; cap col widths to 626 to match live. */
.rp-remote-hiring-report .hero_double_section_2 .double-section-hero-container.security-trust-double-section-hero-container-revert {
  flex-direction: row-reverse;
}
.rp-remote-hiring-report .hero_double_section_2 .double-section-hero-container > .w-col-6 {
  width: 626px;
  max-width: 626px;
  flex: 0 0 626px;
}

/* ============ Polish-batch-10 — local-payroll-ksa residuals =================
   Hero H1 size + Transparent Pricing line-height. */

/* Hero H1 — shortcode emits without `.font-2-6rem` modifier; force size. */
.rp-local-payroll-ksa h1.double-slide-landing-page-left-main-header.double-slide-landing-page-left-main-header-dark-blue {
  font-size: 47.2px;
  line-height: 56px;
}

/* "Transparent Pricing" H2 line-height 51.2 → 48 (live). The H2 has
   `.no-pt.no-mt.no-padding` modifier — enough to win specificity. */
.rp-local-payroll-ksa h2.new-rp-section-header.no-pt.no-mt.no-padding {
  line-height: 48px;
}

/* "RemotePass automates payroll" section bg — local rgb(245,247,250),
   live rgb(255,255,255). Force white on the relevant section. */
.rp-local-payroll-ksa .new-rp-section.new-rp-section-vertical-border-slider-section.no-bg.light-blue-new {
  background-color: #ffffff;
}

/* ============ Polish-batch-12 — mena-hr-payroll-hub section padding =====
   4 H2 section headers ("Key Services", "Hiring & Expansion", "Payroll &
   Compliance", "How to Use") have `.no-pt.no-mt` modifier in markup, but
   migration.css doesn't define those utilities, so they inherit the
   compound selector's padding-top:56. Live ships padding-top:0. */
.rp-mena-hr-payroll-hub h2.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 {
  padding-top: 0;
}

/* =============================================================================
   Designer Review 2 — 2026-05-08
   Items EX2, EX3, EX4, EX24, EX25 (re-flagged post-launch promoted to launch)
   Items EX31, EX32, EX33, EX35 (new pre-launch additions)
   ============================================================================= */

/* EX2 — Super App download buttons alignment (homepage) */
.super-app-download-buttons,
.new-footer-app-google-play-link,
[class*="super-app"] .double-slide-landing-page-left-button-container,
[class*="app-store"] .double-slide-landing-page-left-button-container {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.super-app-download-buttons img,
.new-footer-app-google-play-link img {
    height: 48px;
    width: auto;
}

/* EX3 — decorative blue band above footer (sitewide) — hide if present */
.pre-footer-band,
.footer-blue-band,
.footer-decorative-band,
[class*="footer-band"]:not([class*="brand"]) {
    display: none !important;
}

/* EX4 — logo cloud header letter-spacing 0.5em → 0 (sitewide) */
.new_landing_page_brands_header,
.new_landing_page_brands_header strong,
.trusted-by-header,
.logo-cloud-title,
[class*="brands_header"] strong {
    letter-spacing: 0 !important;
}

/* EX24 — blog cards unnecessary top padding (/blog/) */
.blog-card,
.blog-listing-card,
.blog-listing-grid .card,
.rp-blog-listing .blog-card,
.collection-item-3 .rp-blog-item,
.collection-item-4 .rp-blog-item {
    padding-top: 0 !important;
}

/* EX25 — ebook + popular sections background full-width (/blog/) */
.blog-ebook-cta,
.blog-popular-posts,
[class*="ebook-section"],
[class*="popular-posts"],
.rp-blog-listing .ebook-cta-section,
.rp-blog-listing .popular-posts-section {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    box-sizing: border-box;
}

/* EX31 — Trust bar dark-blue bg on /finance-managers/.
   Mirrors the working .rp-global-payroll rule at #021143. */
.page-template-page-finance-managers .new_landing_page_brands.bg-blue,
.page-template-page-finance-managers .rp-teams-landing-page.bg-blue,
.page-template-page-finance-managers .new_landing_page_brands.new_landing_page_brands_blue_bg {
    background-color: #021143 !important;
}
.page-template-page-finance-managers .new_landing_page_brands.bg-blue .new_landing_page_brands_header,
.page-template-page-finance-managers .new_landing_page_brands.bg-blue .new_landing_page_brands_header strong {
    color: #ffffff !important;
}
.page-template-page-finance-managers .new_landing_page_brands.bg-blue .new-listed-brands-sub-section-img {
    filter: brightness(0) invert(1);
}

/* EX32 — remove extra top padding on G2 awards / rating carousel (sitewide) */
.g2-awards-carousel,
[class*="g2-awards"],
.new_landing_page_g2,
.rating-trusted-security,
.new-footer-awards-orange.no-py + .rp-section,
.new_landing_page_badges.no-pt {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* EX33 — testimonial carousel default white background (sitewide) */
.testimonial-carousel,
.home-testimonials .new-footer-awards-orange,
.slider.swiper-container[class*="testimonial"],
[class*="testimonials"] .swiper-slide:not(.dark-blue-bg) {
    background-color: #ffffff;
}
/* EX33 — but keep testimonial sections with explicit dark-blue-bg class dark */
[class*="testimonials"] .swiper-slide.dark-blue-bg {
    background-color: #021143;
}

/* EX35 — /cor/ feature sections alternating bg white/light blue.
   The cor body's main double-section blocks live under .rp-cor.
   Scope to the page so we don't affect other landings. */
body.page-template-page-cor .rp-section:nth-of-type(odd),
body.page-template-page-cor .new-rp-section:nth-of-type(odd) {
    background-color: #ffffff;
}
body.page-template-page-cor .rp-section:nth-of-type(even),
body.page-template-page-cor .new-rp-section:nth-of-type(even) {
    background-color: #f0f4ff;
}

/* =============================================================================
   Visual audit 2026-05-08 — finance-managers + hr-managers duplicate footer
   sections.
   home-footer.html injects home-testimonials + home-try-rp on every page.
   These two pages already have their own page-specific equivalents
   ("What Other Finance Managers Have to Say" + Try-RP cards in body)
   so the footer chain duplicates them. Live's finance-managers shows only
   the page-specific testimonial. Hide the home-footer's injected
   testimonials + try-rp on these two pages only.
   Outer wrappers:
     home-testimonials.html → .reviews-band
     home-try-rp.html        → .home-try-rp-section
   ============================================================================= */
/* Mohamed 2026-07-11: hr-managers NOW shows testimonials + twin-CTA (same as SMBs) — removed
   from this hide list. 2026-07-14: finance-managers twin-CTA also now shown (S1-extend) — the
   `.home-try-rp-section` selector is dropped; only the legacy `.reviews-band` stays hidden
   (finance uses the Kadence testimonials carousel, not the home-footer review band). */
body.page-template-page-finance-managers .reviews-band {
    display: none !important;
}

/* ===== QA (Greg, 2026-06): remove deprecated promo popups SITE-WIDE =====
   The SpendCards cross-sell popup + the legacy custom cookie bar are baked into
   several minified Webflow body parts (EN + AR) that can't be safely hand-edited.
   Suppress their specific classes here = reliable site-wide removal. The CookieYes
   (cookie-law-info) plugin banner is the sanctioned consent UI and is untouched.
   The Report promo banner is intentionally kept (blog-only). */
.spendcard-banner-main-container { display: none !important; }
#rp-cookie-bar { display: none !important; }

/* ===== "Kill all banners" (Greg, 2026-06) — suppress EVERY promo/legacy banner site-wide.
   KEEPS the CookieYes (cookie-law-info) plugin = the sanctioned GDPR cookie-consent UI. ===== */
.banner-main-container { display: none !important; }                           /* SpendCards + Report promos */
#rp-announcement-bar, .rp-announcement-bar { display: none !important; }       /* "RemotePass AI" announcement bar */
/* 2026-07-28: Finsweet (fs-cc) is now the active consent manager (see
   inc/webflow-embeds.php); CookieYes is disabled. The old hide rule
   ([fs-cc="banner"], .fs-cc-banner_component, .cookies-root { display:none })
   was removed so the Finsweet banner/manager/preferences can render. */

/* QA (Greg, 2026-06): old static integration carousels (e.g. /cor/ and other un-converted
   Webflow body parts) get stuck at opacity:0 — the Webflow reveal script doesn't fire after the
   swiper inits, leaving a big empty gap where the logo cards should be. Force them visible.
   (The homepage uses the fixed `rp-kintegrations` synced pattern, already opacity:1 — no-op there.) */
.swiper-integration-slider { opacity: 1 !important; }

/* Hero eyebrow pill (CC added the rp_hero_eyebrow shortcode/markup; this is the style).
   Figma "AI Button Header" (15643:19263) = a rounded pill above the H1. On-brand: light-blue
   pill, blue text, full radius. */
/* higher specificity to win over the earlier duplicate; white pill stands out on the
   light-blue hero (matches the hero's white G2 rating pills) */
.rp-hero-eyebrow .rp-hero-eyebrow__pill {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content;
  background: #FFFFFF; color: #114EF7;
  font-family: Mulish, -apple-system, sans-serif; font-size: 14px; font-weight: 600; line-height: 20px;
  padding: 7px 16px; border-radius: 100px; margin-bottom: 16px;
  border: 1px solid #E4EBFE; box-shadow: 0 2px 8px rgba(17,78,247,.06);
}
/* QA (Greg, 2026-06): single-row fix for the same un-converted static carousels.
   The Webflow class `.integ-ration-grid.mt4.swiper-wrapper` (migration.css:2697) forces
   `display:grid` (8–10 cols, grid-template-rows reserves a 2nd row) onto the swiper wrapper,
   which (a) leaves a large empty band below the single visible card row and (b) breaks Swiper's
   loop (no clones built → "runs out"). Forcing flex lets Swiper own one continuous row + clone
   for a seamless loop. Site-wide so it covers every un-converted page; no-op on the homepage
   (its fixed `rp-kintegrations` pattern already overrides this in components/integrations.css).
   `!important` beats the non-important Webflow grid rule at any load order. Each page's permanent
   fix arrives when it's converted to blocks (reusing the fixed integrations pattern). */
.swiper-integration-slider .swiper-wrapper { display: flex !important; }

/* Hero eyebrow pill (CC 2026-06-03): optional "Introducing Ask AI"-style pill above the hero H1,
   driven by _rp_hero_eyebrow_html meta on component-product-hero. Cowork refines to exact Figma. */
.rp-hero-eyebrow { margin-bottom: 16px; }
.rp-hero-eyebrow__pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px; border-radius: 999px;
  background: #EAF0FF; color: #114EF7;
  font-family: Mulish, -apple-system, sans-serif; font-size: 14px; font-weight: 700; line-height: 1;
}

/* Footer reviews container: add a bottom padding to match its 5.56em top
   (migration.css:2856 sets only padding-top). Global footer element. */
.rp-container.reviews.new-footer-rp-container {
  padding-bottom: 5.56em;
}

/* .rp-container-1200 global fix: enforce max-width and width:100% so the
   1200px cap always wins regardless of page-scoped or flex/grid overrides. */
.rp-container-1200 {
  width: 100%;
  max-width: 1200px !important;
}

.rp-container-1200.centred {
  max-width: 1200px !important;
}

.new_pricing_style_rp_20_border,
.new_pricing_style_rp_p20 {
  color: #67687f !important;
}

.new_pricing_style_rp_p20 {
  color: #67687f !important;
}
.new_pricing_style_rp_20_border {
  color: #67687f !important;
}

/* Pricing buttons display fixes */
a.btn.full-w.pricing.dark-green-btn.btn-extra-padding.dark-blue-btn.outline-blue-btn.w-button {
  color: #114ef7 !important;
  cursor: pointer;
  background-color: #f0f4fe !important;
  border-color: #114ef7 !important;
}

a.btn.full-w.pricing.dark-green-btn.btn-extra-padding.dark-blue-btn.w-button {
  background: #114ef7 !important;
  color: #fff !important;
}

a.btn.full-w.pricing.dark-green-btn.btn-extra-padding.dark-blue-btn.outline-blue-btn.w-button:hover {
  color: #fff !important;
  background-color: #114ef7 !important;
}

a.btn.full-w.pricing.dark-green-btn.btn-extra-padding.dark-blue-btn.w-button:hover {
  background-color: #1344cd !important;
  border-color: #1344cd !important;
}

/* Old pricing 2-3 grid cols display fixes */
.rp-p.mbf20.new_pricing_style_rp_p20.new_pricing_style_rp_20_border.text_center.new_pricing_link.text-light-green-color {
  color: #21cc51 !important;
  font-size: 1.35em;
}

a.btn.full-w.pricing.dark-green-btn.btn-extra-padding.w-button {
  color: #fff;
}

a.btn.full-w.outline-btn.pricing.light-green-btn.btn-extra-padding.w-button {
  padding-top: 1.05em;
  padding-bottom: 1.05em;
  font-size: 1.25em;
  color: #fff !important;
  background-color: #21cc51 !important;
  border-color: #21cc51 !important;
}

/* FAQ subtitle ("Got Questions? Find Answers Here") — left-aligned (was centered by the
   per-page .rp-*.faq-main-container-p rules). Shared pattern fix → all FAQ pages.
   `start` = left in LTR, right in RTL (so AR aligns to its reading start). */
.faq-main-container-p { text-align: start !important; }

/* Hero column ratio: width-flex-5-7 → 7/5 (design review 2026-06-21).
   On .double-section-hero-container.width-flex-5-7 the CONTENT column (.w-col-5 —
   carries eyebrow/headline/subtitle/buttons) becomes the wider 7 (58.33%); the
   VISUAL column (.w-col-7) becomes the narrower 5 (41.66%) and never exceeds 550px.
   Desktop only — mobile keeps its single-column stack. !important + 3-class
   specificity beats both the per-page .w-col rules and the 51/49 hero
   standardization. EN + AR (both carry these classes; the swap is direction-agnostic). */
@media (min-width: 992px) {
  .double-section-hero-container.width-flex-5-7 .w-col-5 {
    flex: 0 0 58.3333% !important;
    width: 58.3333% !important;
    max-width: 58.3333% !important;
  }
  .double-section-hero-container.width-flex-5-7 .w-col-7 {
    flex: 0 0 41.6667% !important;
    width: 41.6667% !important;
    max-width: 550px !important;
  }
  .double-section-hero-container.width-flex-5-7 .w-col-7 img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* Hero vertical spacing (design review 2026-06-21): drop the top padding on the
   light-blue .adjust-padding hero shell (lp / relo / eor / contractors / spend), and
   add 40px below the hero row (.width-flex-5-7 .w-row). All viewports. */
.hero_double_section.new_rp_hero_double_section.new_rp_hero_double_section_bg.new_rp_hero_double_section_bg_extra_layer.rounded-bottom.bg-light-blue.adjust-padding {
  padding-top: 0 !important;
}
.double-section-hero-container.security-trust-double-section-hero-container.width-flex-5-7.w-row {
  padding-bottom: 40px !important;
}


/* ===== FAQ accordion — GLOBAL design (Figma 16779:23836). Light-blue rounded cards
   applied site-wide to every guide_hiring_faq accordion (un-scoped from lp-faq.css).
   Toggle stays JS-driven (inline height + .rotate/.rotated on the icon). ===== */
.faq-sub-container{max-width:1200px;margin-left:auto;margin-right:auto}
.guide_hiring_faq_h{font-size:40px!important;line-height:48px!important;font-weight:700!important;color:#021143!important;margin:0 0 8px!important}
.ebook-slider-main-container-p.faq-main-container-p{font-size:16px!important;line-height:24px!important;font-weight:500!important;color:#3f3f3f!important;margin:0 0 32px!important}
.guide_hiring_faq_accordion{background-color:#F0F4FE!important;border-radius:16px!important;margin-bottom:8px!important;overflow:hidden!important}
.guide_hiring_faq_accordion:last-child{margin-bottom:0!important}
.guide_hiring_faq_accordion_header_container{background-color:transparent!important;border-top:0!important;padding:24px!important;gap:32px;transition:padding .25s ease}
.guide_hiring_faq_accordion_header_container_h{width:auto!important;flex:1 1 auto;font-size:20px!important;line-height:28px!important;font-weight:600!important;color:#021143!important;margin:0!important;letter-spacing:normal!important}
.guide_hiring_faq_accordion_header_container_icon{width:24px!important;height:24px!important;flex-shrink:0}
.guide_hiring_faq_accordion_header_container_icon.rotate,.guide_hiring_faq_accordion_header_container_icon.rotated{transform:rotate(180deg)!important}
.guide_hiring_faq_accordion_content_container{background-color:transparent!important;padding:0 24px!important;max-height:none!important;transition:height .25s ease}
.n_pew_landing_page_faqs_container_header{font-size:16px!important;line-height:24px!important;color:#545454!important;margin:0 0 16px!important}
.guide_hiring_faq_accordion:has(.guide_hiring_faq_accordion_header_container_icon.rotate) .guide_hiring_faq_accordion_header_container,.guide_hiring_faq_accordion:has(.guide_hiring_faq_accordion_header_container_icon.rotated) .guide_hiring_faq_accordion_header_container{padding:16px 24px 8px!important}
.guide_hiring_faq_accordion:has(.guide_hiring_faq_accordion_header_container_icon.rotate) .guide_hiring_faq_accordion_content_container,.guide_hiring_faq_accordion:has(.guide_hiring_faq_accordion_header_container_icon.rotated) .guide_hiring_faq_accordion_content_container{height:auto!important;max-height:none!important}

/* Pricing text color overrides (2026-06-22) */
.rp-p.mbf20.new_pricing_style_rp_p20.dark_gray_text {
  color: #000 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
p.rp-p.mbf20.new_pricing_style_rp_p20.new_pricing_style_rp_20_border {
  color: #67687f !important;
}

/* ── 2026-06-24 Onboarding video modal: fix iframe sizing (migration.css sets .youtube height:8vh) ── */
.rp-onboarding .video-modal-container .container-3 {
  width: 80vw;
  max-width: 900px;
}
.rp-onboarding .video-modal-container .w-embed-youtubevideo.youtube {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  padding-top: 0 !important;
  position: relative !important;
}
.rp-onboarding .video-modal-container .w-embed-youtubevideo.youtube iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

/* ── 2026-06-24 Onboarding: fix squashed thumbnails ── */
.rp-onboarding .video-div-block-2.video-container {
  aspect-ratio: 16 / 9;
  height: auto !important;
}
.rp-onboarding .image-4.video-thumbnail {
  object-fit: fill !important;
}

/* ── 2026-06-24 Onboarding: fix integration section horizontal overflow ── */
.rp-onboarding .div-block-14.intergrations-container {
  overflow: hidden;
}
.rp-onboarding .collection-list-2.integration_collection_list {
  overflow: hidden;
}
.rp-onboarding .collection-item-3.integration_item {
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 20px;
}

/* ── 2026-06-24 Onboarding AR: fix RTL grid layout for video cards ── */
.rp-ar.rp-onboarding .collection-list-4.w-dyn-items,
.rp-ar.rp-onboarding .collection-list-5.w-dyn-items,
.rp-ar.rp-onboarding .collection-list.w-dyn-items {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  gap: 20px;
}
.rp-ar.rp-onboarding .video-item-container.w-col.w-col-6 {
  float: none !important;
  width: calc(50% - 10px) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ── 2026-06-24 Onboarding v2: clip w-row negative margin overflow on video lists ── */
.rp-onboarding .collection-list-wrapper-3,
.rp-onboarding .collection-list-wrapper-4,
.rp-onboarding .collection-list-wrapper-5,
.rp-onboarding .w-dyn-list {
  overflow: hidden;
}

/* ── 2026-06-24 Onboarding v2: fix AR integration card text wrapping ── */
/* Clamp description to 3 lines max so cards don't stretch vertically */
.rp-onboarding .setup-section-item-link-summary {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}

/* Make integration cards full-width in the AR context (one per row = cleaner for RTL) */
.rp-ar.rp-onboarding .collection-item-3.integration_item.w-col.w-col-6 {
  width: 100% !important;
  float: none !important;
}

/* ── 2026-06-24 Onboarding v3: fix CSS Grid min-width overflow ── */
.rp-onboarding .grid_step > * {
  min-width: 0;
}

/* ── 2026-06-25 hero-yt-modal: iframe player sizing (migration-rtl.css has no height/aspect-ratio) ── */
iframe.rp-video-modal-player {
  width: 100%;
  max-width: 900px;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 8px;
}

/* ── Keep-case section headers (2026-06-30) — feature-page family casing sweep.
   Webflow-migrated section headings (.new-rp-section-header chain) are stored in correct canon
   Title Case (Figma), but two layers mangled them at render: inc/sentence-case.php sentence-cased
   them and the frozen migration.css chain text-transform:capitalize re-capped every word (over-
   capping small words: "in"→"In", "with"→"With"). Adding `rp-keepcase` to a heading makes
   sentence-case.php skip it (preserving the stored Title Case); this rule cancels the capitalize
   chain for those same headings. Matches ONLY headings carrying BOTH classes — i.e. exactly the
   ones intentionally tagged — so it is page-agnostic and zero-risk to untagged headings. Covers
   Automations + Org Charts/Slack/Calendar/Wafeq/Bulk Actions/Time Off. (0,2,0)+!important beats the
   chain's (0,5,0) non-important rule. */
.new-rp-section-header.rp-keepcase { text-transform: none !important; }

/* Perks grid padding (2026-06-30, Mohamed audit "grid runs too tall"): the perks card grid container
   inherits the shared .py10 utility (7.3em ≈ 117px top+bottom) — too much after the hero. Trim it,
   scoped to /perks so .py10 is untouched elsewhere. (0,2,0) beats the .py10 (0,1,0) utility. */
.rp-perks .perks-container { padding-top: 40px; padding-bottom: 56px; }
@media (max-width: 600px) { .rp-perks .perks-container { padding-top: 24px; padding-bottom: 32px; } }

/* Book A Demo — gold→blue "demo" CASCADE FIX (2026-06-30). The 2026-06-28 pass set
   `.rp-demo-request .yellow-line.small{color:#114EF7}` (migration.css, 0,3,0 non-important) + the
   global `.yellow-line.small{color:#114ef7!important}` above, but the word still rendered gold
   (a contested cascade with the gold `.highlight-it-gold,.yellow-line.small{#ffd02f!important}`).
   This (0,3,0)+!important rule, last in the override layer, wins decisively. Scoped to /demo-request. */
.rp-demo-request .yellow-line.small { color: #114EF7 !important; }

/* Org Charts — 3-stat band (Figma 6877:21767, 2026-06-30). The stats grid was 2 cols (150+/24-7);
   canon shows 3 (150+ Countries · 7+ Payout Methods · 24/7 Support). The block now carries the
   `grid-2-cols grid-2-cols-no-gap grid-3-cols` triple (matching local-payroll/direct-employee), but
   migration.css has no `.rp-org-charts ....grid-3-cols` rule, so add the 3-col template here (frozen
   migration.css untouched). (0,4,0) beats the page's 2-col `.grid-2-cols.grid-2-cols-no-gap` (0,3,0);
   mobile stacks automatically via the existing ≤768 flex-column rule (display:flex wins → columns ignored). */
.rp-org-charts .grid-2-cols.grid-2-cols-no-gap.grid-3-cols { grid-template-columns: repeat(3, 1fr); }

/* Book A Demo — hero badge row, 5 G2 Summer-2026 pennants (Figma 17827:276819, 2026-06-30).
   The AR-only migration-rtl.css sets `.rp-demo-request .new-footer-badges-container{display:grid;
   grid-template-columns:repeat(3,auto)}` (tuned for the old 3-badge trio) → 5 badges wrap 3+2 on /ar/.
   Force a single flex row; (0,3,0) beats that (0,2,0) grid rule regardless of load order, and switching
   to display:flex makes migration-rtl's mobile nth-child grid-column rules (for 3 badges) inert.
   No-op on EN (already a base flex row; no .rp-demo-request grid rule there). */
.rp-demo-request .new-footer-badges-container.new-badges-hero-container-top {
  display: flex; flex-flow: row nowrap; gap: 10px; justify-content: flex-start;
  grid-template-columns: none; margin-top: 16px;
}
.rp-demo-request .new-footer-badges-container.new-badges-hero-container-top .rating-brand-img {
  max-height: none; width: 72px; min-width: 72px; height: auto;
}
/* Mobile: 5×72px overflows a ~358px content width → wrap + center (migration-rtl's mobile
   nth-child grid sizing is already inert under display:flex). */
@media screen and (max-width: 600px) {
  .rp-demo-request .new-footer-badges-container.new-badges-hero-container-top {
    flex-wrap: wrap; justify-content: center; gap: 10px 7px; padding: 0 4px;
  }
  .rp-demo-request .new-footer-badges-container.new-badges-hero-container-top .rating-brand-img {
    width: 50px; min-width: 50px;
  }
}

/* Wafeq Integration — integrations logo row (Figma 12028:50921, 2026-06-30). The shared
   `.swiper-integration-slider` Swiper mis-initialises on /wafeq-integration (slidesPerView≈1) →
   the 10 logo cards collapse to one full-width card; canon shows a single clipped row of ~5 cards
   (Wafeq/Okta/Google Workplace/BambooHR/Sapling…). Calendar uses the same component but renders a row,
   so this is page-specific. Force a static flex row (cards at the canon ~244px), clipped by the
   `.swiper{overflow:hidden}` ancestor. Scoped to the Wafeq template — Calendar/others untouched.
   !important beats Swiper's inline transform/width (which carry no !important). */
.page-template-page-wafeq-integration .integ-ration-grid.swiper-wrapper.integration-wrapper {
  display: flex !important; flex-wrap: nowrap !important; gap: 20px !important;
  transform: none !important; grid-template-columns: none !important;
}
.page-template-page-wafeq-integration .swiper-integration-slider .int-item.swiper-slide {
  flex: 0 0 244px !important; width: 244px !important; min-width: 244px !important;
}

/* Onboarding — video-card grid (Figma 617:20385, RP: Resources, 2026-06-30). migration.css frozen
   `.rp-onboarding .grid_step{grid-template-columns:0.75fr 1fr}` lays the section header LEFT + cards RIGHT;
   the cards are `w-col-6` (50%) so inside the ~55% right column they squish to a narrow misaligned strip with
   cut-off titles. Canon = section header FULL-WIDTH on top, then a 3-col card grid below. Force that:
   stack the grid_step children (flex-column), make the card list a 3-col grid, reset the w-col-6 width.
   Scoped to .rp-onboarding.
   AR note: the page uses 3 list-class variants (collection-list, -4, -5) across sections, and a 2026-06-24 AR
   block forced 2-col (calc(50%) at specificity 0,5,0). Canon shows 3-col in BOTH EN and AR/RTL, so this block
   covers all three variants and supersedes the old AR width (0,6,0 selector below). */
/* Single-column grid (NOT flex): the card sections are Webflow grids whose children carry w-node
   `grid-column` assignments (block_info→col1, card-wrapper→col2) — display:flex didn't reliably override
   those, so the header stayed in a left column. Force a 1-col grid and span every child across it →
   header full-width on top, card wrapper full-width below (then the card list becomes its own 3-col grid). */
.rp-onboarding .grid_step { display: grid !important; grid-template-columns: 1fr !important; grid-auto-flow: row !important; }
.rp-onboarding .grid_step > * { grid-column: 1 / -1 !important; width: 100% !important; max-width: 100% !important; }
.rp-onboarding .grid_step .collection-list.w-dyn-items,
.rp-onboarding .grid_step .collection-list-4.w-dyn-items,
.rp-onboarding .grid_step .collection-list-5.w-dyn-items {
  display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 28px 16px !important;
  margin: 0 !important;
}
.rp-onboarding .grid_step .collection-list.w-dyn-items::before,
.rp-onboarding .grid_step .collection-list.w-dyn-items::after,
.rp-onboarding .grid_step .collection-list-4.w-dyn-items::before,
.rp-onboarding .grid_step .collection-list-4.w-dyn-items::after,
.rp-onboarding .grid_step .collection-list-5.w-dyn-items::before,
.rp-onboarding .grid_step .collection-list-5.w-dyn-items::after { display: none !important; }
/* (0,6,0) for AR / (0,5,0) for EN — beats the old 2026-06-24 `.rp-ar.rp-onboarding .video-item-container.w-col.w-col-6` (0,5,0) */
.rp-ar.rp-onboarding .grid_step .video-item-container.w-col.w-col-6,
.rp-onboarding .grid_step .video-item-container.w-col.w-col-6,
.rp-onboarding .grid_step .video-item-container.w-col {
  width: 100% !important; float: none !important; left: auto !important; right: auto !important; padding: 0 !important;
}
@media (max-width: 991px) {
  .rp-onboarding .grid_step .collection-list.w-dyn-items,
  .rp-onboarding .grid_step .collection-list-4.w-dyn-items,
  .rp-onboarding .grid_step .collection-list-5.w-dyn-items { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .rp-onboarding .grid_step .collection-list.w-dyn-items,
  .rp-onboarding .grid_step .collection-list-4.w-dyn-items,
  .rp-onboarding .grid_step .collection-list-5.w-dyn-items { grid-template-columns: 1fr !important; }
}

/* Partners (/partners) — hero empty-space fix (Figma 617:41629, 2026-06-30). migration.css frozen
   `.rp-partners .hero-container{padding-top:13.89em (~222px)}` left a large empty band above the hero heading
   (tracker flag "hero empty space"). Canon shows the heading near the top. Trim to modest padding; (0,3,0) +
   source-order beats the frozen rule. Bottom kept moderate. */
.rp-partners .rp-container.hero-container { padding-top: 2em !important; padding-bottom: 4.5em !important; }
@media (max-width: 767px) { .rp-partners .rp-container.hero-container { padding-top: 1em !important; padding-bottom: 2.5em !important; } }

/* S4/#6 (2026-07-04): primary blue .btn must keep white text on hover. It's an <a>, so a
   generic link-hover blue was leaking onto nav "Book a Demo" / "Get Started" (blue-on-blue,
   illegible); hero buttons already stay white via the .hero_double_section scope. Secondary
   .btn-2 (light bg) is unaffected. */
.btn:hover, .btn:focus-visible { color: #fff !important; }

/* ============================================================================
   Adil QA batch 4 (2026-07-16) — page-scoped fixes
   ============================================================================ */
/* SLACK (/slack-integration) — (a) main hero header 80% width on tablet, 100% on mobile;
   (b) highlighted gold text → #FFD544 (Adil). Scoped to this page: the sitewide
   .highlight-it-gold stays #f4c542 (chosen for WCAG AA on WHITE bg — responsive-global.css);
   on Slack the highlight sits on the navy hero (rgb 2,17,67) where #FFD544 is high-contrast.
   Body-class + higher specificity beats the global .highlight-it-gold{...!important}. */
body.page-template-page-slack-integration .highlight-it-gold { color: #FFD544 !important; }
@media (min-width: 768px) and (max-width: 991px) {
  body.page-template-page-slack-integration h1.double-slide-landing-page-left-main-header { max-width: 80% !important; }
}
@media (max-width: 767px) {
  body.page-template-page-slack-integration h1.double-slide-landing-page-left-main-header { max-width: 100% !important; }
}

/* ============================================================================
   Adil QA batch 5 (2026-07-16) — page-scoped fixes
   ============================================================================ */
/* Main hero header 80% width on tablet (768-991), 100% on mobile (<=767). Each
   rebuilt page uses its OWN title class (reproduced 100% @768 on all three — target
   is 80%). Same pattern as Slack; !important beats the component hero CSS. */
@media (min-width: 768px) and (max-width: 991px) {
  body.page-template-page-bulk-actions .rp-bulk-actions-hero__title { max-width: 80% !important; }
  body.page-template-page-automations .rp-automations-hero__title   { max-width: 80% !important; }
  body.page-template-page-wafeq-integration .rp-wafeq-hero__title    { max-width: 80% !important; }
}
@media (max-width: 767px) {
  body.page-template-page-bulk-actions .rp-bulk-actions-hero__title { max-width: 100% !important; }
  body.page-template-page-automations .rp-automations-hero__title   { max-width: 100% !important; }
  body.page-template-page-wafeq-integration .rp-wafeq-hero__title    { max-width: 100% !important; }
}

/* ============================================================================
   Adil QA b6 — Automations shuffled feature band (2026-07-15).
   SHARED migration classes -> scoped to body.page-template-page-automations AND
   the 7 unique .hero_double_section_revert band rows (verified live: exactly 7,
   the hero carries none, no other section touched). The rows live in a synced DB
   block with NON-UNIFORM DOM order (rows 0-4 = [text,img]; rows 5-6 = [img,text])
   and are NOT clean nth-child siblings, so bg + side alternation key off each
   row's distinguishing class combo (hero_double_section_2 / _gray_bg / _sticky).
   All 7 rows' rendered bg + image-side verified live. NOTE: the side alternation
   depends on the block's current per-row DOM order — re-verify if the block is
   re-saved.
   ========================================================================== */
/* (a) Backgrounds: start white, alternate white / #FAFBFF. The _gray_bg rows are
   the even positions (0,2,4,6) -> white (kill the lavender gradient); the rest
   (odd 1,3,5) -> #FAFBFF. */
body.page-template-page-automations .hero_double_section_revert.hero_double_section_gray_bg {
  background-color: #ffffff !important;
  background-image: none !important;
}
body.page-template-page-automations .hero_double_section_revert:not(.hero_double_section_gray_bg) {
  background-color: #FAFBFF !important;
  background-image: none !important;
}
/* (b) Alternate image sides: even rows image-RIGHT, odd rows image-LEFT. Each
   rule's flex-direction is chosen for that row group's DOM order. */
body.page-template-page-automations .hero_double_section_revert.hero_double_section_sticky:not(.hero_double_section_gray_bg) .double-section-hero-container {
  flex-direction: row-reverse !important; /* rows 1,3 (DOM text,img) -> img-LEFT */
}
body.page-template-page-automations .hero_double_section_revert:not(.hero_double_section_sticky):not(.hero_double_section_gray_bg) .double-section-hero-container {
  flex-direction: row !important; /* row 5 (DOM img,text) -> img-LEFT */
}
body.page-template-page-automations .hero_double_section_revert.hero_double_section_gray_bg:not(.hero_double_section_sticky) .double-section-hero-container {
  flex-direction: row-reverse !important; /* row 6 (DOM img,text) -> img-RIGHT */
}

/* Adil QA b6 — Wafeq "Transform Your Payroll and Accounting Workflow…" shuffled
   band: same bg treatment (start white, alternate white / #FAFBFF). Different row
   classes than Automations (odd rows carry `bg-grey`; row5 is a bare `hds`; row6
   is `_gray_bg` #F5F7FA). Scoped to page + the 7 unique revert rows; all 7 bgs
   verified live. (No side-alternation requested for Wafeq.) */
body.page-template-page-wafeq-integration .hero_double_section_revert.bg-grey,
body.page-template-page-wafeq-integration .hero_double_section_revert:not(.hero_double_section_2):not(.hero_double_section_gray_bg) {
  background-color: #FAFBFF !important;
  background-image: none !important;
}
body.page-template-page-wafeq-integration .hero_double_section_revert.hero_double_section_gray_bg {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* Adil QA b6 — Integrations hero: the CTA sat flush under the subtext (measured
   gap 0px; the .rp-int-hero__sub 32px margin was overridden to 0), inconsistent
   with other pages. Match /local-payroll's hero subtext->CTA gap (measured 27px). */
body.page-template-page-integrations .rp-int-hero__sub {
  margin-bottom: 27px !important;
}

/* 2026-07-17: hide Series B announcement banner site-wide. */
.heaer-banner-announcement.bg-blue { display: none !important; }

/* 2026-07-17: demo-request hero spacing — remove theme 32px margin-top to match live positioning. */
.page-template-page-demo-request .rp-demo-request { margin-top: 0 !important; }

/* 2026-07-17: AR demo-request — migration-rtl.min.css adds margin-top:6.5em to
   .rp-demo-request .hero_double_section, creating a ~85px white gap above the AR hero.
   Override to 0 to match EN layout. */
.page-template-page-demo-request .rp-ar .hero_double_section { margin-top: 0 !important; }

/* 2026-07-17: AR demo-request — migration-rtl.min.css adds padding-top:56px to
   .rp-demo-request .double-section-hero-container, pushing hero content down vs EN (0px).
   Zero it out so AR hero columns match EN vertical alignment. */
.rp-ar.rp-demo-request .double-section-hero-container { padding-top: 0 !important; }

/* 2026-07-17: AR demo-request — migration-rtl.min.css shrinks checkmark icons to 20px
   (.rp-demo-request .check-marks-list-checked). Restore to 32px to match EN and live. */
.rp-ar.rp-demo-request .check-marks-list-checked { width: 32px !important; height: 32px !important; }

/* 2026-07-17: demo-request hero bottom padding — restore to 60px (qa-fixes line 3164 sets 24px globally,
   overriding migration.css 40px; demo-request needs more room below form card to match live). */
.page-template-page-demo-request .hero_double_section.new_rp_hero_double_section { padding-bottom: 60px !important; }

/* ============================================================================
   Paid LP footer fixes (2026-07-20) — body.rp-body scoped
   Applies only to paid LPs (EN body.rp-body / AR body.rp-body.dir-rtl).
   ============================================================================ */

/* 1. Footer column headers — text-align left EN, right AR.
      Webflow LP footer uses .f16-semi; Kadence WP footer uses h3.rp-kf-title.
      Both need left-align (text-align:center comes from Kadence block CSS). */
body.rp-body .new-footer .f16-semi { text-align: left !important; }
body.rp-body.dir-rtl .new-footer .f16-semi { text-align: right !important; }
/* text-align:start is direction-aware: left in LTR, right in RTL.
   Paid LPs use body.dir-rtl (not html[dir="rtl"]) so start is the correct approach. */
#rp-lp-wpfoot .rp-kf-title { text-align: start !important; }

/* 2. Try-box banner container horizontal padding — tablet 24px, mobile 16px.
      migration.css base has 16px at all widths; tablet override to 24px. */
@media (min-width: 768px) and (max-width: 991px) {
  body.rp-body .new-footer-banner-container.new-rp-footer-banner-container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}
@media (max-width: 767px) {
  body.rp-body .new-footer-banner-container.new-rp-footer-banner-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 40px !important;
  }
}

/* 3. "Download our Super App" section — align left EN, right AR on tablet + mobile.
      .new-footer-pre-footer stacks vertically below ~991px; align-self controls
      horizontal position of .new-footer-apps within that column. */
@media (max-width: 991px) {
  body.rp-body .new-footer-apps {
    align-self: flex-start;
    text-align: left;
  }
  body.rp-body .new-footer-apps .new-footer-app-label {
    text-align: left;
  }
  body.rp-body .new-footer-apps .div-block-20 {
    justify-content: flex-start;
  }

  body.rp-body.dir-rtl .new-footer-apps {
    align-self: flex-end;
    text-align: right;
  }
  body.rp-body.dir-rtl .new-footer-apps .new-footer-app-label {
    text-align: right;
  }
  body.rp-body.dir-rtl .new-footer-apps .div-block-20 {
    justify-content: flex-end;
  }
}

/* 4a. AR paid LP testimonials slider: nav container is direction:ltr so buttons
       sit left=prev / right=next. testimonials-rtl.css applies scaleX(-1) to the
       arrow SVGs which makes them look flipped ("> on left, < on right"). Counter
       that here so the icons match the physical LTR button positions. */
body.rp-body.dir-rtl .rp-ktestimonials .rp-pt-navbtn svg {
  transform: none !important;
}

/* 4. SOC and GDPR badges — equalise to 60×60px (all pages).
      Two migration.css bugs on WP-rendered pages (no body.rp-body scope needed here):
        • .rating-brand-img-soc { min-width: 65px } → SOC 8% wider than GDPR
        • .rating-container-center-50 { max-height: 48px } → GDPR squished small
      Apply globally (no body.rp-body scope) so this also fires on WP-rendered
      EOR/KSA/UAE/Hiring-Guide page templates where the pre-footer is visible.
      Also covers the Kadence-block injected WP footer on paid LPs: those images are
      plain <img> inside figure.rp-kf-trust (no rating-brand-img class) with baked
      width/height attributes (SOC 60×57, GDPR 41×63) → override below. */
.rating-brand-img.rating-brand-img-soc,
.rating-brand-img.rating-container-center-50,
figure.rp-kf-trust img {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  height: 60px !important;
  max-height: 60px !important;
  object-fit: contain !important;
}

/* 2026-07-20: Video player button hover override. */
.btn-2.btn-gray.btn-light-blue.no-py.video-player:hover {
  background: #0d3cb8 !important;
  color: white !important;
}

/* 2026-07-20: LP hero eyebrow label — mobile line-height + margin fix.
   .double-slide-landing-page-left-label (and its -dim-gray variant) inside .btn-white heroes
   rendered with excess margin-bottom and tight line-height on ≤767px. */
@media screen and (max-width: 767px) {
  .btn-white .double-slide-landing-page-left-label,
  .double-slide-landing-page-left-label.double-slide-landing-page-left-label-dim-gray {
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
  }
}

/* 2026-07-21: Case study detail page — enforce brand fonts.
   WP single post view adds .case_study-template-default to <body>.
   EN: Mulish; AR: Almarai (scoped via html[dir="rtl"] — standard WP/Polylang RTL). */
.case_study-template-default * { font-family: Mulish !important; }
html[dir="rtl"] .case_study-template-default * { font-family: Almarai !important; }

/* 2026-07-22: Drawer nav link full-width — ensure toggle links and direct nav links
   fill the full available width inside the mobile drawer. mega-menu.min.css (frozen)
   may apply a narrower max-width on these elements at ≤991px. */
@media (max-width: 991px) {
  .rp-mega-toggle .rp-nav-link,
  .rp-navbar .rp-nav-menu > a.rp-nav-link {
    max-width: 100% !important;
  }
}

/* 2026-07-22: Testimonials section head padding — horizontal only.
   figma-fixes-b.css sets padding:24px (all sides) on .rp-pt-head globally;
   override to 0 top/bottom, 24px sides on desktop+tablet, 16px on mobile. */
.rp-ktestimonials .rp-pt-head {
  padding: 0 24px !important;
}
@media (max-width: 767px) {
  .rp-ktestimonials .rp-pt-head {
    padding: 0 16px !important;
  }
}

/* demo-request hero — match homepage hero bottom: white base, lavender gradient,
   48px rounded bottom corners, clipped (2026-07-23) */
.rp-demo-request .hero_double_section.rounded-bottom.bg-light-blue {
  background-color: #fff !important;
  background-image: linear-gradient(to bottom, transparent 0%, #e3ebfd 40%) !important;
  border-bottom-left-radius: 48px !important;
  border-bottom-right-radius: 48px !important;
  overflow: hidden !important;
}

/* demo-request only: home-try-rp band white instead of yellow (2026-07-23) */
body.page-template-page-demo-request .home-try-rp-section { background: #fff !important; }

/* demo-request only: hide navbar menu buttons (hamburger + Login/CTA) on tablet & mobile (2026-07-23) */
@media (max-width: 991px) {
  body.page-template-page-demo-request .rp-navbar .w-nav-button,
  body.page-template-page-demo-request .rp-navbar .rp-mb-login,
  body.page-template-page-demo-request .rp-navbar .rp-mb-cta { display: none !important; }
}

/* demo-request only: kill the DUPLICATE try-RP band that arrives via the footer chain's
   twin-cta DB block (Kadence-row wrapped) — the template's own home-try-rp (direct
   wp-block-template-part child) stays. Seen on AR (block 7296); harmless guard on EN (2026-07-23) */
body.page-template-page-demo-request .kb-row-layout-wrap .home-try-rp-section { display: none !important; }
body.page-template-page-demo-request .kb-row-layout-wrap:has(> .kt-row-column-wrap .home-try-rp-section) { display: none !important; }

/* demo-request: khero-brands logos must render dark (invert of white _live.svg artwork).
   AR migration-rtl lacks the base .blue-filter invert rule (left logos white @ 0.6 opacity);
   same per-page pattern as .rp-smbs/.rp-hr/.rp-finance in figma-fixes-b.css (2026-07-23) */
body.page-template-page-demo-request .rp-khero-brands .new-listed-brands-sub-section-img.blue-filter {
  filter: invert(85%) !important;
  opacity: 1 !important;
}

/* why-remotepass (EN + AR) only: hero background navy #0f1035 (2026-07-23) */
body.page-template-page-why-remotepass .hero_double_section.new_rp_hero_double_section.new_rp_hero_double_section_bg {
  background: #0f1035 !important;
}

/* Ask AI hero: hide the blue overlay play button — the new dark poster has its own
   play icon baked in; click-to-open modal still works on the whole [data-askai-video] (2026-07-23) */
div.askai-hero-media[data-askai-video] .rp-askai-yt-play { display: none !important; }
/* AR (2026-07-23): same treatment — poster swapped via functions.php filter; the play
   BUTTON is the click target there, so stretch it invisibly over the whole poster
   instead of display:none (keeps the modal logic working). */
.rp-askai-hero .askai-hero-media { position: relative !important; }
.rp-askai-hero .askai-hero-media > button[data-askai-video] {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  opacity: 0 !important; cursor: pointer !important;
  transform: none !important; /* base .askai-hero-play translate(-50%,-50%) was shifting the stretched button off the image */
  z-index: 2 !important; /* 2026-07-23: img painted above the button — clicks never reached the modal handler */
}

/* Ask AI only: hero padding-top 0 (2026-07-23) */
body.page-template-page-ai .hero_double_section.new_rp_hero_double_section.new_rp_hero_double_section_bg { padding-top: 0 !important; }

/* Ask AI only: video thumbnail sized like /cor (610px) on desktop (2026-07-23) */
@media (min-width: 992px) {
  body.page-template-page-ai .rp-ai .rp-askai-hero .askai-hero-media,
  body.page-template-page-ai .rp-ai .rp-askai-hero .askai-hero-media img { width: 610px !important; max-width: 100% !important; height: auto !important; }
}

/* Ask AI only: hero CONTENT column matched to /cor on desktop (2026-07-23):
   h1 2.95rem/56px (6-class repeat selector beats the inline shared 54px rule),
   sub 20px/28px, text col 626px. Thumbnail rule above; background untouched. */
@media (min-width: 992px) {
  body.page-template-page-ai .rp-ai .rp-askai-hero .double-slide-lleft-container h1.double-slide-landing-page-left-main-header.double-slide-landing-page-left-main-header.double-slide-landing-page-left-main-header { font-size: 2.95rem !important; line-height: 56px !important; }
  body.page-template-page-ai .rp-ai .rp-askai-hero .double-slide-lleft-container { max-width: 626px !important; }
  /* column division = /cor: left 626 / right 610 (media fills its column, no overflow) */
  body.page-template-page-ai .rp-ai .rp-askai-hero .double-section-hero-container-left { flex: 0 1 626px !important; width: auto !important; max-width: 626px !important; }
  body.page-template-page-ai .rp-ai .rp-askai-hero .double-section-hero-container-right { flex: 0 1 610px !important; width: auto !important; max-width: 610px !important; }
  body.page-template-page-ai .rp-ai .rp-askai-hero .double-slide-lleft-container .askai-hero-sub.askai-hero-sub.askai-hero-sub { font-size: 20px !important; line-height: 28px !important; }
}

/* Ask AI hero tablet/mobile → same as /cor (2026-07-23):
   cor tablet: h1 2.25rem/53px, media 706px centered; cor mobile: h1 32px/40px, media 100%. */
@media (min-width: 768px) and (max-width: 991px) {
  body.page-template-page-ai .rp-ai .rp-askai-hero .double-slide-lleft-container h1.double-slide-landing-page-left-main-header.double-slide-landing-page-left-main-header.double-slide-landing-page-left-main-header { font-size: 2.25rem !important; line-height: 53px !important; }
  body.page-template-page-ai .rp-ai .rp-askai-hero .askai-hero-media { width: 706px !important; max-width: 100% !important; margin: 0 auto !important; }
}
@media (max-width: 767px) {
  body.page-template-page-ai .rp-ai .rp-askai-hero .double-slide-lleft-container h1.double-slide-landing-page-left-main-header.double-slide-landing-page-left-main-header.double-slide-landing-page-left-main-header { font-size: 32px !important; line-height: 40px !important; }
  body.page-template-page-ai .rp-ai .rp-askai-hero .askai-hero-media { width: 100% !important; margin: 0 auto !important; }
}

/* ── Onboarding Portal hero → local-payroll look (2026-07-24, Mo) ─────────────
   Was: navy band + white text + Lottie map. Now: white bg + lavender gradient,
   LP typography (h1 2.95rem/56 #021143, sub 16/25.6 #545454), new hero image
   right. Same breakpoint pattern as the LP-family heroes. EN + AR (shared classes). */
/* EXCEPTION (Mo): the onboarding hero KEEPS the navy #021143 band — LP typography
   sizes only, white text for contrast on navy. */
.rp-onboarding .glossary-list-main-container.dark {
  background-color: #021143 !important;
}
.rp-onboarding .glossary-list-main-container.dark .onboarding-hero-header {
  color: #fff !important; font-size: 3rem !important; line-height: 60px !important; margin-bottom: 16px !important; width: 90%;
}
.rp-onboarding .glossary-list-main-container.dark .section-sub-header {
  color: rgba(255, 255, 255, 0.85) !important; font-size: 16px !important; line-height: 25.6px !important;
}
.rp-onboarding .glossary-list-main-container.dark .onboarding-grid {
  align-items: center !important;
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}
.rp-onboarding .rp-onboarding-hero-img { width: 80%; max-width: 100%; height: auto; display: block; margin: 0 auto; }
@media (min-width: 768px) and (max-width: 991px) {
  .rp-onboarding .glossary-list-main-container.dark .onboarding-hero-header { font-size: 2.25rem !important; line-height: 53px !important; }
  .rp-onboarding .rp-onboarding-hero-img { width: 65%; }
}
@media (max-width: 767px) {
  .rp-onboarding .glossary-list-main-container.dark .onboarding-hero-header { font-size: 32px !important; line-height: 40px !important; }
  /* 2026-07-24 (Mo): hero image hidden on mobile */
  .rp-onboarding .rp-onboarding-hero-img { display: none; }
}

/* 2026-07-24 (Mo): onboarding nav pills — centered, .75rem gap, no padding */
.rp-onboarding .feature_inner {
  text-align: center;
  gap: .75rem;
  padding: 0rem !important;
}

/* 2026-07-24 (Mo): onboarding step grids top spacing */
.rp-onboarding .grid_step { padding-top: 56px !important; }
.rp-onboarding .block_info { margin-top: 24px; }
.rp-onboarding .btn-container { margin-top: 24px; }
@media screen and (max-width: 767px) {
  .rp-onboarding .grid_step { margin-top: 0px; padding-top: 0; }
}

/* ── Onboarding "Setup Integrations" cards per mock (2026-07-24, Mo):
   2-per-row white bordered cards, logo top-left, "Accounting" chip top-right,
   title + full summary (was a broken 6-col grid of 86px truncated slivers). */
.rp-onboarding .integration_collection_list {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
}
/* Webflow clearfix ::before/::after (content:" ") become grid ITEMS and eat the
   first cell (Zoho pushed to col 2 with an empty slot). Kill them. */
.rp-onboarding .integration_collection_list::before,
.rp-onboarding .integration_collection_list::after { content: none !important; display: none !important; }
.rp-onboarding .integration_item { width: 100% !important; padding: 0 !important; }
.rp-onboarding .setup-section-item {
  background: #fff !important; border: 1px solid #e5e7eb !important; border-radius: 16px !important; height: 100%;
}
.rp-onboarding .setup-section-item-link {
  display: block; position: relative; padding: 28px 24px !important; text-decoration: none;
}
.rp-onboarding .rp-onb-integ-logo {
  width: 48px; height: 48px; object-fit: contain; display: block; margin-bottom: 20px;
}
.rp-onboarding .setup-section-item-link-title {
  font-size: 20px !important; line-height: 26px !important; color: #021143 !important; margin: 0 0 12px !important; text-align: left;
}
.rp-onboarding .setup-section-item-link-sub-title {
  position: absolute; top: 24px; right: 24px;
  background: #f3f4f6; color: #545454; border-radius: 8px;
  padding: 6px 14px; font-size: 14px; line-height: 20px;
}
.rp-onboarding .setup-section-item-link-summary {
  color: #545454 !important; font-size: 16px !important; line-height: 24px !important; margin: 0 !important;
}
@media (max-width: 767px) {
  .rp-onboarding .integration_collection_list { grid-template-columns: 1fr !important; }
}
/* RTL mirror (AR onboarding): title/summary right-aligned, chip top-LEFT */
html[dir="rtl"] .rp-onboarding .setup-section-item-link-title { text-align: right; }
html[dir="rtl"] .rp-onboarding .setup-section-item-link-summary { text-align: right; }
html[dir="rtl"] .rp-onboarding .setup-section-item-link-sub-title { right: auto; left: 24px; }

/* 2026-07-24 (Mo): onboarding video thumbnails fill their frame */
.rp-onboarding .image-4.video-thumbnail { object-fit: fill !important; }

/* 2026-07-24 (Mo): org-charts + automations pages — AWARDS/badges-slider band bg
   #f0f4fe (was navy). Scoped inside the awards row wrap (kb-row-layout-idaw_o) —
   the same kt-row-column-wrap class combo exists in the FOOTER, which must stay navy. */
body.page-template-page-org-charts .kb-row-layout-idaw_o .kt-row-column-wrap.kt-has-1-columns.kt-row-layout-equal.kt-tab-layout-inherit.kt-mobile-layout-row.kt-row-valign-top,
body.page-template-page-org-charts .kb-row-layout-idaw_o.kb-row-layout-wrap,
body.page-template-page-automations .kb-row-layout-idaw_o .kt-row-column-wrap.kt-has-1-columns.kt-row-layout-equal.kt-tab-layout-inherit.kt-mobile-layout-row.kt-row-valign-top,
body.page-template-page-automations .kb-row-layout-idaw_o.kb-row-layout-wrap {
  background: #f0f4fe;
}

/* 2026-07-24 (Mo): slack-integration LP only — hero band navy per mock (white h1 +
   gold highlights + white Try Now were sitting on a light bg, unreadable). */
body.page-template-page-slack-integration .hero_double_section.new_rp_hero_double_section.new_rp_hero_double_section_bg {
  background: #021143 !important;
}

/* 2026-07-24 (Mo): slack-integration hero per mock — Try Now + small badge trio on one
   row; duplicate large badge set hidden. */
body.page-template-page-slack-integration .badges-trusted-new-design-sub-container-hero { display: none !important; }
body.page-template-page-slack-integration .button-badges-section {
  display: flex !important; align-items: center !important; gap: 48px !important; flex-wrap: wrap !important;
}
body.page-template-page-slack-integration .button-badges-section .center-flex-container { margin: 0 !important; }

/* 2026-07-24 (Mo): slack-integration trusted-by band per mock — navy continuation,
   white label, white (un-inverted) logos. */
body.page-template-page-slack-integration .rp-teams-landing-page.new_landing_page_brands {
  background: #021143 !important;
  background-image: none !important;
}
body.page-template-page-slack-integration .new_landing_page_brands_header,
body.page-template-page-slack-integration .new_landing_page_brands_header strong,
body.page-template-page-slack-integration .new_landing_page_brands_header .highlight-it-blue {
  color: #fff !important;
}
body.page-template-page-slack-integration .new-listed-brands-sub-section-img.blue-filter {
  /* force WHITE marks on navy regardless of source artwork color */
  filter: brightness(0) invert(1) !important;
}
/* 2026-07-24 (Mo): adopt local-payroll hero metrics on the Slack LP —
   top padding 0, navy flow ends with LP's 48px rounded bottom corners (on the
   trusted band, the last navy element), brands sizing/spacing = LP/khero spec. */
body.page-template-page-slack-integration .hero_double_section.new_rp_hero_double_section.new_rp_hero_double_section_bg {
  padding-top: 0 !important;
}
body.page-template-page-slack-integration .rp-teams-landing-page.new_landing_page_brands {
  border-bottom-left-radius: 48px !important;
  border-bottom-right-radius: 48px !important;
  overflow: hidden !important;
  padding-bottom: 48px !important;
}
body.page-template-page-slack-integration .new_landing_page_brands_header {
  text-align: center !important; font-size: 24px !important; line-height: 40px !important;
  font-weight: 700 !important; margin: 0 0 20px !important; text-transform: none !important;
}
body.page-template-page-slack-integration .new-listed-brands-sub-section {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important;
  justify-content: center !important; gap: 16px 28px !important; margin-top: 0 !important;
}
body.page-template-page-slack-integration .new-listed-brands-sub-section-img {
  height: 36px !important; width: auto !important; max-width: none !important; margin: 0 !important;
}
@media (max-width: 991px) {
  body.page-template-page-slack-integration .new-listed-brands-sub-section { flex-wrap: nowrap !important; gap: 8px !important; }
  body.page-template-page-slack-integration .new-listed-brands-sub-section-img { min-width: 0 !important; height: 28px !important; }
}
@media (max-width: 767px) {
  body.page-template-page-slack-integration .new-listed-brands-sub-section {
    flex-direction: row !important; flex-wrap: wrap !important;
    justify-content: center !important; align-items: center !important; gap: 8px !important;
  }
}

/* 2026-07-24 (Mo): slack LP — LP-parity spacing pass. Image->brands-label gap 28px
   (was 81: 40px section margin + 40px inner pd-top), text column top-aligned like LP. */
body.page-template-page-slack-integration .new_landing_page_brands .new-listed-brands-section { margin-top: 0 !important; }
body.page-template-page-slack-integration .new_landing_page_brands .new-listed-brands-section .pd-top { padding-top: 28px !important; }
/* 2026-07-24 (Mo): content↕image alignment = local-payroll. LP centers the left
   column against the image (row align-items:center, left pt 0) — the earlier
   flex-start + 13px offset hack is REMOVED (it predated the G2/Capterra pills;
   with pills present, plain centering is the exact LP behavior). */

/* 2026-07-24 (Mo): slack LP — content + image EXACTLY local-payroll (pixel QA pass):
   h1 2.95rem/56 normal-tracking (was 53/64 -2px), sub 16/25.6 mb24 no max-width
   (was 16.8/25.2 mb16 500px), CTA height 57px (was 52.4), image box 610x556
   (art object-fit:contain, undistorted; was 610x650).
   RESPONSIVE pass (Mo): desktop sizes now scoped ≥992 — they were bleeding into
   tablet/mobile. Tablet 768–991 = LP: h1 36px/53px, img 65% centered, h auto.
   Mobile ≤767 = LP: h1 32px/40px, img 100%, h auto. */
@media (min-width: 992px) {
  body.page-template-page-slack-integration .double-slide-lleft-container h1.double-slide-landing-page-left-main-header.double-slide-landing-page-left-main-header.double-slide-landing-page-left-main-header {
    font-size: 2.95rem !important; line-height: 56px !important; letter-spacing: normal !important; margin-bottom: 16px !important;
  }
  body.page-template-page-slack-integration .double-section-hero-container-right img,
  body.page-template-page-slack-integration img[src*="Frame-34661"] {
    width: 610px !important; height: 556px !important; max-width: 100% !important; object-fit: contain !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  body.page-template-page-slack-integration .double-slide-lleft-container h1.double-slide-landing-page-left-main-header.double-slide-landing-page-left-main-header.double-slide-landing-page-left-main-header {
    font-size: 36px !important; line-height: 53px !important; letter-spacing: normal !important; margin-bottom: 16px !important;
  }
  body.page-template-page-slack-integration .double-section-hero-container-right img,
  body.page-template-page-slack-integration img[src*="Frame-34661"] {
    width: 65% !important; height: auto !important; margin: 0 auto !important; object-fit: contain !important;
  }
}
@media (max-width: 767px) {
  body.page-template-page-slack-integration .double-slide-lleft-container h1.double-slide-landing-page-left-main-header.double-slide-landing-page-left-main-header.double-slide-landing-page-left-main-header {
    font-size: 32px !important; line-height: 40px !important; letter-spacing: normal !important; margin-bottom: 16px !important;
  }
  body.page-template-page-slack-integration .double-section-hero-container-right img,
  body.page-template-page-slack-integration img[src*="Frame-34661"] {
    width: 100% !important; height: auto !important; object-fit: contain !important;
  }
}
body.page-template-page-slack-integration .double-slide-lleft-container p.double-slide-landing-page-left-label.double-slide-landing-page-left-label.double-slide-landing-page-left-label {
  font-size: 16px !important; line-height: 25.6px !important; margin-bottom: 24px !important; max-width: none !important;
}
body.page-template-page-slack-integration .button-badges-section a.btn,
body.page-template-page-slack-integration .double-section-hero-container-left a[class*="btn"] {
  height: 57px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
}

/* 2026-07-24 (Mo): "Introducing Slack integration" video section = org-charts
   "Introducing organization chart" section, pixel-matched (source of truth:
   migration.css .rp-org-charts video-section rules + components/org-charts-hero.css
   header rules). (a) bg-pattern.svg top-right 25% + blue fade gradient (tablet/mobile
   gradient variant like org); (b) section header: navy #021143, max-width 720
   centred, mb 12 (was #2a2a2a / 1300 / 32); tablet 80% + 28/36, mobile 100% + 28/36.
   Scoped to the page's ONLY -linear section (verified: 1 match) — other slack
   headers untouched. */
body.page-template-page-slack-integration .new-rp-section.new-rp-section-gray-bg.new-rp-section-vertical-border-slider-section.new-rp-section-vertical-border-slider-section-linear {
  background-image: url('/wp-content/themes/rp/assets/images/bg-pattern.svg'), linear-gradient(rgba(228, 235, 254, 0.5) 50%, rgba(228, 235, 254, 0) 76%, #fff 85%) !important;
  background-position: 100% 0, 0 0 !important;
  background-repeat: no-repeat, repeat !important;
  background-size: 25%, auto !important;
}
/* 2026-07-24 (Mo follow-up): also the "Connect Slack…" band header — the page's
   only OTHER .new-rp-section-header (2 total, verified) — same style + responsiveness
   as the video-section header, so the rules below target both. */
body.page-template-page-slack-integration .new-rp-section-vertical-border-slider-section-linear .new-rp-section-header,
body.page-template-page-slack-integration .rp-slack-integration .main-section-holder .new-rp-section-header {
  color: #021143 !important; max-width: 720px !important;
  margin-left: auto !important; margin-right: auto !important; margin-bottom: 12px !important;
}
@media screen and (max-width: 991px) {
  body.page-template-page-slack-integration .new-rp-section.new-rp-section-gray-bg.new-rp-section-vertical-border-slider-section.new-rp-section-vertical-border-slider-section-linear {
    background-image: url('/wp-content/themes/rp/assets/images/bg-pattern.svg'), linear-gradient(#e4ebfe 95%, #fff 100%, #fff) !important;
  }
  body.page-template-page-slack-integration .new-rp-section-vertical-border-slider-section-linear .new-rp-section-header,
  body.page-template-page-slack-integration .rp-slack-integration .main-section-holder .new-rp-section-header {
    font-size: 28px !important; line-height: 36px !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  body.page-template-page-slack-integration .new-rp-section-vertical-border-slider-section-linear .new-rp-section-header,
  body.page-template-page-slack-integration .rp-slack-integration .main-section-holder .new-rp-section-header { width: 80% !important; }
}
@media (max-width: 767px) {
  body.page-template-page-slack-integration .new-rp-section-vertical-border-slider-section-linear .new-rp-section-header,
  body.page-template-page-slack-integration .rp-slack-integration .main-section-holder .new-rp-section-header { width: 100% !important; }
}
/* 2026-07-24 (Mo): header→video gap = org (40px). Org's .rp-yt-facade carries
   margin-top:40 (collapses with the h2's 12 → 40); slack's .rp-hero-yt-play had 0
   (gap was 12). Same mechanism, same value. */
body.page-template-page-slack-integration .new-rp-section-vertical-border-slider-section-linear .rp-hero-yt-play,
body.page-template-page-slack-integration .new-rp-section-vertical-border-slider-section-linear .rp-yt-facade,
body.page-template-page-slack-integration .new-rp-section-vertical-border-slider-section-linear .rp-container > img {
  margin-top: 40px !important;
}
/* 2026-07-24 (Mo): slack video plays INLINE (rp-yt-facade, EN+AR via render
   filter) — size the facade so the swapped-in absolute iframe has a box. */
body.page-template-page-slack-integration .new-rp-section-vertical-border-slider-section-linear .rp-yt-facade {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
}
body.page-template-page-slack-integration .new-rp-section-vertical-border-slider-section-linear .rp-yt-facade img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}
/* 2026-07-24 (Mo, AR-parity QA sweep): two stale RTL-layer paddings made AR
   differ from EN. (a) tablet: AR hero band side padding 24 vs EN 16 → hero img
   455 vs 465 (65% of a narrower container); (b) mobile: AR video .rp-container
   16 vs EN 12 → video img 290 vs 298. Pin both to the EN values, RTL only. */
@media (min-width: 768px) and (max-width: 991px) {
  html[dir="rtl"] body.page-template-page-slack-integration .hero_double_section.new_rp_hero_double_section {
    padding-left: 16px !important; padding-right: 16px !important;
  }
}
@media (max-width: 767px) {
  html[dir="rtl"] body.page-template-page-slack-integration .new-rp-section-vertical-border-slider-section-linear .rp-container {
    padding-left: 12px !important; padding-right: 12px !important;
  }
}

/* 2026-07-24 (Mo): feature bands below the video = org-charts background SHUFFLE
   (copied from components/org-charts-hero.css, re-scoped). Slack's 3 bands were
   white / #f0f4fe / #f0f4fe with two successive row-reverse; org pattern: START
   white, alternate white/#fafbff → white, #fafbff, white; image side ties to the
   shuffle (non-gray → row, gray → row-reverse) → R,L,R. The gray band's base
   background-IMAGE gradient painted over the color — overridden with a flat
   #FAFBFF gradient, same as org. Shuffle covers the bands up to the brand/awards
   slider and STOPS there (slider + everything after untouched). */
body.page-template-page-slack-integration .rp-slack-integration .hero_double_section_gray_bg {
  background-color: #fafbff !important;
}
body.page-template-page-slack-integration .rp-slack-integration .hero_double_section_revert:not(.hero_double_section_gray_bg) {
  background-color: #fff !important;
}
body.page-template-page-slack-integration .rp-slack-integration .hero_double_section_2.hero_double_section_revert.hero_double_section_gray_bg,
body.page-template-page-slack-integration .rp-slack-integration .hero_double_section.hero_double_section_revert.hero_double_section_gray_bg {
  background-image: linear-gradient(#FAFBFF, #FAFBFF) !important;
}
@media (min-width: 992px) {
  body.page-template-page-slack-integration .rp-slack-integration .hero_double_section_revert:not(.hero_double_section_gray_bg) .double-section-hero-container {
    flex-direction: row !important;
  }
  body.page-template-page-slack-integration .rp-slack-integration .hero_double_section_gray_bg .double-section-hero-container {
    flex-direction: row-reverse !important;
  }
}

/* 2026-07-24 (Mo): AUTOMATIONS — replicate the slack/org video-section + shuffle
   treatment (same design family). Already OK from migration.css: bg-pattern on the
   video section (incl. ≤991 gradient variant) and band color alternation. Missing
   bits applied here: (a) both section headers (2 on page, like slack) → navy
   #021143, max-width 720 centred, mb 12; ≤991 28/36; tablet 80% / mobile 100%;
   (b) header→video gap 40 (was 32) via the page's .rp-yt-facade; (c) tie image
   side to the shuffle like org (non-gray → row, gray → row-reverse) — last two
   bands ran row,row-reverse (two same sides in a row); desktop-only. */
body.page-template-page-automations .new-rp-section-header,
body.page-template-page-bulk-actions .new-rp-section-header,
body.page-template-page-wafeq-integration .new-rp-section-header,
body.page-template-page-calendar .new-rp-section-header {
  color: #021143 !important; max-width: 720px !important;
  margin-left: auto !important; margin-right: auto !important; margin-bottom: 12px !important;
}
@media screen and (max-width: 991px) {
  body.page-template-page-automations .new-rp-section-header,
  body.page-template-page-bulk-actions .new-rp-section-header,
  body.page-template-page-wafeq-integration .new-rp-section-header,
  body.page-template-page-calendar .new-rp-section-header { font-size: 28px !important; line-height: 36px !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
  body.page-template-page-automations .new-rp-section-header,
  body.page-template-page-bulk-actions .new-rp-section-header,
  body.page-template-page-wafeq-integration .new-rp-section-header,
  body.page-template-page-calendar .new-rp-section-header { width: 80% !important; }
}
@media (max-width: 767px) {
  body.page-template-page-automations .new-rp-section-header,
  body.page-template-page-bulk-actions .new-rp-section-header,
  body.page-template-page-wafeq-integration .new-rp-section-header,
  body.page-template-page-calendar .new-rp-section-header { width: 100% !important; }
}
body.page-template-page-automations .new-rp-section-vertical-border-slider-section-linear .rp-yt-facade,
body.page-template-page-bulk-actions .new-rp-section-vertical-border-slider-section-linear .rp-yt-facade,
body.page-template-page-wafeq-integration .new-rp-section-vertical-border-slider-section-linear .rp-yt-facade,
body.page-template-page-calendar .new-rp-section-vertical-border-slider-section-linear .rp-yt-facade {
  margin-top: 40px !important;
}
/* QA deep-diff vs org (Mo): section padding was 56px 0 (vs org 0 32px 56px —
   doubled the space above the header and killed the side gutters) and the
   header weight was 700 vs org 600. Pin both to org. */
body.page-template-page-automations .new-rp-section.new-rp-section-gray-bg.new-rp-section-vertical-border-slider-section.new-rp-section-vertical-border-slider-section-linear,
body.page-template-page-bulk-actions .new-rp-section.new-rp-section-gray-bg.new-rp-section-vertical-border-slider-section.new-rp-section-vertical-border-slider-section-linear,
body.page-template-page-wafeq-integration .new-rp-section.new-rp-section-gray-bg.new-rp-section-vertical-border-slider-section.new-rp-section-vertical-border-slider-section-linear,
body.page-template-page-calendar .new-rp-section.new-rp-section-gray-bg.new-rp-section-vertical-border-slider-section.new-rp-section-vertical-border-slider-section-linear {
  padding: 0 32px 56px !important;
}
body.page-template-page-automations .new-rp-section-header,
body.page-template-page-bulk-actions .new-rp-section-header,
body.page-template-page-wafeq-integration .new-rp-section-header,
body.page-template-page-calendar .new-rp-section-header {
  font-weight: 600 !important;
}
/* Empty layout-noise <p>s around the facade carry mb 16 here (org zeroes them) —
   they pushed video→section-bottom to 72 vs org 56. */
body.page-template-page-automations .new-rp-section-vertical-border-slider-section-linear .rp-container > p,
body.page-template-page-bulk-actions .new-rp-section-vertical-border-slider-section-linear .rp-container > p,
body.page-template-page-wafeq-integration .new-rp-section-vertical-border-slider-section-linear .rp-container > p,
body.page-template-page-calendar .new-rp-section-vertical-border-slider-section-linear .rp-container > p {
  margin: 0 !important;
}
/* Mobile: org narrows the video-section side gutters to 16 (was pinned 32 here). */
@media (max-width: 767px) {
  body.page-template-page-automations .new-rp-section.new-rp-section-gray-bg.new-rp-section-vertical-border-slider-section.new-rp-section-vertical-border-slider-section-linear,
  body.page-template-page-bulk-actions .new-rp-section.new-rp-section-gray-bg.new-rp-section-vertical-border-slider-section.new-rp-section-vertical-border-slider-section-linear,
  body.page-template-page-wafeq-integration .new-rp-section.new-rp-section-gray-bg.new-rp-section-vertical-border-slider-section.new-rp-section-vertical-border-slider-section-linear,
  body.page-template-page-calendar .new-rp-section.new-rp-section-gray-bg.new-rp-section-vertical-border-slider-section.new-rp-section-vertical-border-slider-section-linear {
    padding: 0 16px 56px !important;
  }
}
body.page-template-page-automations .new-rp-section-vertical-border-slider-section-linear .rp-container > img,
body.page-template-page-bulk-actions .new-rp-section-vertical-border-slider-section-linear .rp-container > img,
body.page-template-page-wafeq-integration .new-rp-section-vertical-border-slider-section-linear .rp-container > img,
body.page-template-page-calendar .new-rp-section-vertical-border-slider-section-linear .rp-container > img {
  margin-top: 40px !important; /* AR twin safety: bare-img structure like slack AR */
}
/* 2026-07-24 (Mo): hero band = LP — the trusted-brands bar visually JOINS the
   hero (LP nests brands inside the rounded hero band; automations has it as a
   separate part). Hero carries LP's gradient (component CSS); the brands bar
   continues it: solid #e4ebfe, 48px rounded bottom, LP spacing (label 28 below
   hero art region, logos→band-bottom 40). */
/* LP spacing math: img→label 28 = container pt 40 + brands mt -20 + label mt 8.
   Automations had +28 hero pb and +40 section mt on top (img→label 88) — zeroed,
   label gets LP's 8. */
body.page-template-page-automations .rp-automations-hero__inner { padding-bottom: 0; }
body.page-template-page-automations .new_landing_page_brands .new-listed-brands-section { margin-top: 0 !important; }
body.page-template-page-automations .new_landing_page_brands_header { margin-top: 8px !important; margin-bottom: 24px !important; } /* LP label→logos 24 */
body.page-template-page-automations .rp-teams-landing-page.new_landing_page_brands {
  background: #e4ebfe !important;
  border-bottom-left-radius: 48px !important;
  border-bottom-right-radius: 48px !important;
  overflow: hidden !important;
  padding-bottom: 40px !important;
}





/* 2026-07-24 (Mo): WAFEQ video section bg = org/automations pattern (the page
   had NO pattern at all): bg-pattern.svg top-right 25% + blue fade; <=991
   gradient variant like org. Header/gap/padding/empty-p rules shared with the
   automations/bulk-actions selector groups above. */
body.page-template-page-wafeq-integration .new-rp-section.new-rp-section-gray-bg.new-rp-section-vertical-border-slider-section.new-rp-section-vertical-border-slider-section-linear,
body.page-template-page-calendar .new-rp-section.new-rp-section-gray-bg.new-rp-section-vertical-border-slider-section.new-rp-section-vertical-border-slider-section-linear {
  background-image: url('/wp-content/themes/rp/assets/images/bg-pattern.svg'), linear-gradient(rgba(228, 235, 254, 0.5) 50%, rgba(228, 235, 254, 0) 76%, #fff 85%) !important;
  background-position: 100% 0, 0 0 !important;
  background-repeat: no-repeat, repeat !important;
  background-size: 25%, auto !important;
}
@media screen and (max-width: 991px) {
  body.page-template-page-wafeq-integration .new-rp-section.new-rp-section-gray-bg.new-rp-section-vertical-border-slider-section.new-rp-section-vertical-border-slider-section-linear,
  body.page-template-page-calendar .new-rp-section.new-rp-section-gray-bg.new-rp-section-vertical-border-slider-section.new-rp-section-vertical-border-slider-section-linear {
    background-image: url('/wp-content/themes/rp/assets/images/bg-pattern.svg'), linear-gradient(#e4ebfe 95%, #fff 100%, #fff) !important;
  }
}

/* 2026-07-24 (Mo): CALENDAR feature bands = org/slack SHUFFLE. Calendar's
   gray_bg sits on the EVEN bands (like slack/org, NOT inverted): all 6 bands
   rendered flat #f0f4fe with broken side alternation (R,L,R,L,L,R). Mapping:
   non-gray -> white/row, gray -> #fafbff/flat-gradient/row-reverse -> W,F
   alternating with R,L,R,L,R,L; desktop-only sides, <=991 all stack column. */
body.page-template-page-calendar .rp-calendar .hero_double_section_gray_bg {
  background-color: #fafbff !important;
  background-image: linear-gradient(#FAFBFF, #FAFBFF) !important;
}
body.page-template-page-calendar .rp-calendar .hero_double_section_revert:not(.hero_double_section_gray_bg) {
  background-color: #fff !important;
  background-image: linear-gradient(#fff, #fff) !important;
}
@media (min-width: 992px) {
  body.page-template-page-calendar .rp-calendar .hero_double_section_revert:not(.hero_double_section_gray_bg) .double-section-hero-container.double-section-hero-container.double-section-hero-container {
    flex-direction: row !important;
  }
  body.page-template-page-calendar .rp-calendar .hero_double_section_gray_bg .double-section-hero-container.double-section-hero-container.double-section-hero-container {
    flex-direction: row-reverse !important;
  }
}
@media (max-width: 991px) {
  body.page-template-page-calendar .rp-calendar .hero_double_section_revert .double-section-hero-container.double-section-hero-container.double-section-hero-container {
    flex-direction: column !important;
  }
}

/* 2026-07-25 (Mo, verbatim): integrations containers — zero vertical padding on
   .py16 containers, zero side padding on all .rp-container in .rp-integrations. */
.rp-integrations .rp-container.py16 {
  padding-top: 0px !important;   /* !important: an RTL-layer py16 rule (144px) beat the plain decl on AR */
  padding-bottom: 0px !important;
}
.rp-integrations .rp-container {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

/* 2026-07-25 (Mo): INTEGRATIONS "Made for every workflow." = automations
   feature-band spec (band pad 56 24; h2 32/42 700 #2a2a2a w/ blue span; sub
   16.8/25.2 #696969 maxW 500 — was near-invisible rgba(254,255,255,.7) on
   white; cols 626/610, img 85% of col; org responsive: <=991 stack, img 65%
   centred; <=767 img 100%). Art swapped to the orbit webp via render filter. */
body.page-template-page-integrations .rp-int-workflow { padding: 56px 24px !important; background: #fff !important; }
body.page-template-page-integrations .rp-int-workflow__row {
  max-width: 1236px !important; margin: 0 auto !important; /* automations band content box is 1236 (not 1300): rp-container 1300 minus its own 32 side padding */
  display: flex !important; align-items: center !important; gap: 0 !important; /* automations cols 626+610 have no gap */
}
body.page-template-page-integrations .rp-int-workflow__row > *:first-child { flex: 0 1 626px !important; max-width: 626px !important; }
body.page-template-page-integrations .rp-int-workflow__row > *:last-child { flex: 0 1 610px !important; min-width: 0 !important; }
body.page-template-page-integrations .rp-int-workflow .rp-h2 {
  font-size: 32px !important; line-height: 42px !important; font-weight: 700 !important;
  color: #2a2a2a !important; margin: 0 0 16px !important;
}
body.page-template-page-integrations .rp-int-workflow .rp-h2 + * {
  font-size: 16.8px !important; line-height: 25.2px !important; color: #696969 !important; max-width: 500px !important;
}
body.page-template-page-integrations .rp-int-workflow img {
  max-width: 75% !important; min-width: 75% !important; height: auto !important; display: block !important;
  margin: 0 !important; margin-inline: 60px 92px !important; /* automations img offsets in its 610 col: 60 start / 92 end (not centered); logical so AR mirrors */
}
@media (max-width: 991px) {
  body.page-template-page-integrations .rp-int-workflow__row { flex-direction: column !important; align-items: flex-start !important; }
  body.page-template-page-integrations .rp-int-workflow__row > *:first-child,
  body.page-template-page-integrations .rp-int-workflow__row > *:last-child { flex: 0 1 auto !important; max-width: 100% !important; width: 100% !important; }
  body.page-template-page-integrations .rp-int-workflow img { max-width: 65% !important; min-width: 65% !important; margin: 0 auto !important; }
  body.page-template-page-integrations .rp-int-workflow .rp-h2 { font-size: 26px !important; line-height: 32.5px !important; }
}
@media (max-width: 767px) {
  body.page-template-page-integrations .rp-int-workflow img { max-width: 100% !important; min-width: 100% !important; margin: 0 !important; }
}

/* 2026-07-25 (Mo): "All Your Favorite Tools Are Here." on ONE line — the h2
   carries a .dt-br desktop-break span; neutralize it here. */
body.page-template-page-integrations .rp-h2 .dt-br { display: inline !important; }

/* 2026-07-25 (Mo, mock): INTEGRATIONS "All Your Favorite Tools Are Here." —
   centered header, horizontal pill tab bar (active = blue pill), 3-col compact
   white cards: icon top-left, name+category beside it, description full-width
   below (tool-content flattened via display:contents so the desc can span). */
/* header = automations VIDEO-SECTION header + its section rhythm (pt 56 via
   header, section pb 56); header->pills gap 40 like org header->video. */
body.page-template-page-integrations .rp-section:has(.tabs.w-tabs) {
  padding: 0 32px 56px !important;
  margin: auto;
  max-width: 1300px;
}
body.page-template-page-integrations .rp-section .rp-h2.text-capitalize {
  text-align: center !important;
  font-size: 35.2px !important; line-height: 51.2px !important; font-weight: 600 !important;
  color: #021143 !important; letter-spacing: normal !important;
  max-width: 720px !important; margin: 0 auto 12px !important; padding-top: 56px !important;
}
@media (max-width: 991px) {
  body.page-template-page-integrations .rp-section .rp-h2.text-capitalize { font-size: 28px !important; line-height: 36px !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
  body.page-template-page-integrations .rp-section .rp-h2.text-capitalize { width: 80% !important; }
}
@media (max-width: 767px) {
  body.page-template-page-integrations .rp-section .rp-h2.text-capitalize { width: 100% !important; }
}
body.page-template-page-integrations .tabs.w-tabs { display: block !important; margin-top: 0 !important; } /* .tabs carried mt ~108 — the header→pills gap is the menu's own mt 40 */
body.page-template-page-integrations .tab-btns-wrap.w-tab-menu {
  display: flex !important; flex-direction: row !important; justify-content: center !important;
  width: fit-content !important; margin: 28px auto 32px !important; /* +h2 mb 12 (non-collapsing) = 40 total, like org header→content */
  background: #fff !important; border: 1px solid #eef0f6 !important; border-radius: 999px !important;
  padding: 6px !important; gap: 4px !important; box-shadow: 0 2px 10px rgba(2,17,67,0.05) !important;
}
body.page-template-page-integrations .tab-btn.w-tab-link {
  border: 0 !important; border-radius: 999px !important; padding: 8px 16px !important;
  font-size: 12px !important; line-height: 18px !important; color: #0f1035 !important;
  background: transparent !important; margin: 0 !important;
}
@media (min-width: 768px) and (max-width: 991px) {
  body.page-template-page-integrations .tab-btn.w-tab-link { font-size: 12px !important; padding: 7px 14px !important; }
}
@media (max-width: 767px) {
  body.page-template-page-integrations .tab-btn.w-tab-link { font-size: 11px !important; padding: 6px 12px !important; }
}
body.page-template-page-integrations .tab-btn.w-tab-link.w--current {
  background: #114ef7 !important; color: #fff !important;
}
/* cards = onboarding "Setup Integrations" card spec: 2-col, white, r16,
   1px #e5e7eb, pad 28x24 (was 3-col r10 pad 20). */
body.page-template-page-integrations .fav-tools-grid {
  grid-template-columns: 1fr 1fr 1fr !important; gap: 24px !important;
}
body.page-template-page-integrations .fav-tool-wrap {
  display: grid !important; grid-template-columns: auto 1fr !important;
  column-gap: 14px !important; align-items: center !important;
  background: #fff !important; border: 1px solid #e5e7eb !important;
  border-radius: 16px !important; padding: 28px 24px !important;
}
body.page-template-page-integrations .fav-tool-wrap .rp-integration-icon {
  grid-column: 1; grid-row: 1 / 3; width: 54px !important; height: 54px !important; min-height: 0 !important;
}
body.page-template-page-integrations .fav-tool-wrap .tool-content { display: contents !important; }
body.page-template-page-integrations .fav-tool-wrap .tool-content .f20semi {
  grid-column: 2; font-size: 20px !important; line-height: 26px !important; font-weight: 600 !important; color: #0f1035 !important;
}
body.page-template-page-integrations .fav-tool-wrap .tool-content .mt1 {
  grid-column: 2; margin-top: 2px !important;
}
body.page-template-page-integrations .fav-tool-wrap .tool-content .mt1 .int-type,
body.page-template-page-integrations .fav-tool-wrap .int-type {
  font-size: 15px !important; line-height: 20px !important; color: rgba(15,16,53,0.6) !important;
}
body.page-template-page-integrations .fav-tool-wrap .tool-content .mt3 {
  grid-column: 1 / -1; margin-top: 16px !important;
}
body.page-template-page-integrations .fav-tool-wrap .tool-content .mt3 .f16 {
  font-size: 16px !important; line-height: 28px !important; color: #1a1a1a !important; margin: 0 !important;
}
@media (max-width: 991px) {
  body.page-template-page-integrations .fav-tools-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
}
/* (cards 3 -> 2 -> 1; mobile rule below sets 1fr) */
@media (max-width: 767px) {
  body.page-template-page-integrations .fav-tools-grid { grid-template-columns: 1fr !important; }
  body.page-template-page-integrations .tab-btns-wrap.w-tab-menu { max-width: 100%; flex-wrap: wrap !important; justify-content: center !important; border-radius: 20px !important; }
}

/* 2026-07-24 (Mo): INTEGRATIONS hero = LP, same playbook (components/
   integrations-hero.css rewritten from the LP template + original __pills row
   hidden there; injected pills refs 7552/7553). Brands bar joins the band. */
body.page-template-page-integrations .new_landing_page_brands .new-listed-brands-section { margin-top: 0 !important; }
body.page-template-page-integrations .new_landing_page_brands_header { margin-top: 8px !important; margin-bottom: 24px !important; }
/* logos→band-bottom was 80 vs LP 40: logos mb 24 + inner wrapper pb 16 zeroed
   (band's own pb 40 = the LP spacing). */
body.page-template-page-integrations .new_landing_page_brands .new-listed-brands-sub-section { margin-bottom: 0 !important; }
body.page-template-page-integrations .new_landing_page_brands .new-listed-brands-sub-section { }
body.page-template-page-integrations .new_landing_page_brands .rp-container.pd-top,
body.page-template-page-integrations .new_landing_page_brands .new-listed-brands-sub-section { padding-bottom: 0 !important; }
body.page-template-page-integrations .rp-teams-landing-page.new_landing_page_brands {
  background: #e4ebfe !important;
  border-bottom-left-radius: 48px !important;
  border-bottom-right-radius: 48px !important;
  overflow: hidden !important;
  padding-bottom: 40px !important;
}
/* The brands band lives INSIDE section.rp-int-hero, whose gradient painted
   behind the band's rounded corners (rounding invisible). Round + clip the
   section itself so the corners cut against the white page like LP. */
body.page-template-page-integrations .rp-int-hero {
  border-bottom-left-radius: 48px !important;
  border-bottom-right-radius: 48px !important;
  overflow: hidden !important;
}

/* 2026-07-24 (Mo): CALENDAR hero = LP, same playbook (components/calendar-hero.css
   rewritten + -rtl regenerated; pills refs 7564/7565). Brands bar joins the band. */
body.page-template-page-calendar .new_landing_page_brands .new-listed-brands-section { margin-top: 0 !important; }
body.page-template-page-calendar .new_landing_page_brands_header { margin-top: 8px !important; margin-bottom: 24px !important; }
body.page-template-page-calendar .rp-teams-landing-page.new_landing_page_brands {
  background: #e4ebfe !important;
  border-bottom-left-radius: 48px !important;
  border-bottom-right-radius: 48px !important;
  overflow: hidden !important;
  padding-bottom: 40px !important;
}

/* 2026-07-24 (Mo): BULK-ACTIONS "All in one" slider — two visibility bugs:
   (a) hover turned the card icon into a white box: base rule
   .card-light-blue-bg:hover .int-item-img-left { filter:brightness(10) } blows
   the icon art to pure white (it was designed for tile-less white icons). Keep
   the icon as-is on hover. (b) nav arrows invisible: base .slider-arrow uses
   the WHITE arrow-cirlce svgs (dark-bg art) on this light section — swap to
   the dark _1 variants (same art the footer-awards slider uses). */
body.page-template-page-bulk-actions .rp-bulk-actions .card-light-blue-bg:hover .int-item-img-left,
body.page-template-page-bulk-actions .rp-bulk-actions .card-light-blue-bg:hover .int-item-img-right {
  filter: none !important;
}
body.page-template-page-bulk-actions .rp-bulk-actions .slider-arrow.left {
  background-image: url('../images/arrow-cirlce-left_1.svg') !important;
}
body.page-template-page-bulk-actions .rp-bulk-actions .slider-arrow.sl-right {
  background-image: url('../images/arrow-cirlce-right_1.svg') !important;
}
/* Desktop: hide the bottom-center nav pair (the side prev/next arrows remain).
   ≤991 the base hides BOTH the side arrows AND this pair (no navigation at all)
   — force the bottom pair visible there so tablet/mobile can navigate. */
@media (min-width: 992px) {
  body.page-template-page-bulk-actions .rp-bulk-actions .allinone-navigation-footer {
    display: none !important;
  }
}
@media (max-width: 991px) {
  body.page-template-page-bulk-actions .rp-bulk-actions .allinone-navigation-footer {
    display: flex !important;
    justify-content: center !important;
    gap: 32px !important;
    padding-top: 16px !important;
  }
  body.page-template-page-bulk-actions .rp-bulk-actions .allinone-navigation-footer .slider-arrow {
    display: block !important;
    position: static !important;
    width: 40px !important;
    height: 40px !important;
  }
}
/* AR (2026-07-25, Mo): in RTL the pair's DOM order AND the side-clone
   placements mirror, so chevrons pointed the wrong way (› ‹). Swap the art on
   ALL bulk slider arrows on RTL — bottom pair and desktop in-slide clones. */
html[dir="rtl"] body.page-template-page-bulk-actions .rp-bulk-actions .slider-arrow.left {
  background-image: url('../images/arrow-cirlce-right_1.svg') !important;
}
html[dir="rtl"] body.page-template-page-bulk-actions .rp-bulk-actions .slider-arrow.sl-right {
  background-image: url('../images/arrow-cirlce-left_1.svg') !important;
}

/* 2026-07-24 (Mo): BULK-ACTIONS "Bulk Management for Large Teams" 2-col cards —
   card titles carried the HERO header class at 56px/67 (mock: ~24px card title
   over a 16px gray sub). Scoped to the cards grid only; hero/section headers
   untouched. */
body.page-template-page-bulk-actions .grid-2-rows-2-cols-card h2.double-slide-landing-page-left-main-header {
  font-size: 24px !important;
  line-height: 32px !important;
  letter-spacing: normal !important;
  margin-bottom: 8px !important;
  color: #2a2a2a !important; /* AR-reference pass: EN was #15113b */
}
/* 2026-07-24 (Mo): AR→EN parity pass — this time AR is the reference. EN diffs
   fixed to AR's card design: sub lh 25.6 mb 0 (was 24/16); Learn More button
   full-width borderless pill h52 r8 #e4ebfe 16px (EN had inline 225px w,
   2px blue border, h59, r6). Values already native on AR — rules are
   locale-neutral so both render identically. */
body.page-template-page-bulk-actions .grid-2-rows-2-cols-card p {
  line-height: 25.6px !important;
  margin-top: 0 !important;   /* EN had mt 16 → title→sub gap 16 vs AR 8 */
  margin-bottom: 0 !important;
}
/* Laser pass: card image→title gap — AR's .grid-2-rows-2-cols-card-img carries
   mb 24 from the RTL layer, EN had 0 (title stuck to the image). Pin 24 both. */
body.page-template-page-bulk-actions .grid-2-rows-2-cols-card .grid-2-rows-2-cols-card-img {
  margin-bottom: 24px !important;
}
body.page-template-page-bulk-actions .grid-2-rows-2-cols-card a[class*="btn"],
body.page-template-page-bulk-actions .grid-2-rows-2-cols-card .w-button {
  font-size: 16px !important;
  height: 52px !important;
  width: 100% !important;
  background: #e4ebfe !important;
  border: 0 !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 2026-07-24 (Mo): BULK-ACTIONS hero = LP, same treatment as automations
   (components/bulk-actions-hero.css rewritten to LP values + -rtl regenerated;
   pills via the shared render_block filter, refs 7580/7581). Brands bar joins
   the hero band like LP: solid #e4ebfe, 48px rounded bottom, LP spacing. */
body.page-template-page-bulk-actions .new_landing_page_brands .new-listed-brands-section { margin-top: 0 !important; }
body.page-template-page-bulk-actions .new_landing_page_brands_header { margin-top: 8px !important; margin-bottom: 24px !important; }
body.page-template-page-bulk-actions .rp-teams-landing-page.new_landing_page_brands {
  background: #e4ebfe !important;
  border-bottom-left-radius: 48px !important;
  border-bottom-right-radius: 48px !important;
  overflow: hidden !important;
  padding-bottom: 40px !important;
}

/* 2026-07-24 (Mo): WAFEQ-INTEGRATION hero = LP, same treatment as automations/
   bulk-actions (components/wafeq-hero.css rewritten to LP values + -rtl
   regenerated; pills via the shared render_block filter, refs 7556/7557).
   Brands bar joins the hero band like LP. */
/* The block carries its own single-Capterra pill (.rp-wafeq-hero__pills) above
   the injected LP pill pair — hide it (both locales). */
body.page-template-page-wafeq-integration .rp-wafeq-hero__pills { display: none !important; }
body.page-template-page-wafeq-integration .new_landing_page_brands .new-listed-brands-section { margin-top: 0 !important; }
body.page-template-page-wafeq-integration .new_landing_page_brands_header { margin-top: 8px !important; margin-bottom: 24px !important; }
body.page-template-page-wafeq-integration .rp-teams-landing-page.new_landing_page_brands {
  background: #e4ebfe !important;
  border-bottom-left-radius: 48px !important;
  border-bottom-right-radius: 48px !important;
  overflow: hidden !important;
  padding-bottom: 40px !important;
}



/* 2026-07-25 (Mo): the shared mb-12 header rule above is meant for the VIDEO
   sections (their facade carries mt 40); on plain sections the content sits
   only 12px under the header. Non-video section headers get mb 40. Applies to
   all four LP-family pages. */
body.page-template-page-automations .new-rp-section-header:not(.new-rp-section-vertical-border-slider-section-linear *),
body.page-template-page-bulk-actions .new-rp-section-header:not(.new-rp-section-vertical-border-slider-section-linear *),
body.page-template-page-wafeq-integration .new-rp-section-header:not(.new-rp-section-vertical-border-slider-section-linear *),
body.page-template-page-calendar .new-rp-section-header:not(.new-rp-section-vertical-border-slider-section-linear *) {
  margin-bottom: 40px !important;
}

/* NOTE: automations' band classes are INVERTED vs org/slack — gray_bg sits on the
   odd (1st,3rd,…) bands. Map gray_bg → WHITE and non-gray → #fafbff so the visual
   result matches org/slack exactly: START white, alternate, image sides R,L,R,… */
body.page-template-page-automations .rp-automations .hero_double_section_gray_bg {
  background-color: #fff !important;
  background-image: linear-gradient(#fff, #fff) !important;
}
body.page-template-page-automations .rp-automations .hero_double_section_revert:not(.hero_double_section_gray_bg) {
  background-color: #fafbff !important;
  background-image: linear-gradient(#FAFBFF, #FAFBFF) !important;
}
@media (min-width: 992px) {
  body.page-template-page-automations .rp-automations .hero_double_section_gray_bg .double-section-hero-container.double-section-hero-container.double-section-hero-container {
    flex-direction: row !important;
  }
  body.page-template-page-automations .rp-automations .hero_double_section_revert:not(.hero_double_section_gray_bg) .double-section-hero-container.double-section-hero-container.double-section-hero-container {
    flex-direction: row-reverse !important;
  }
}
/* ≤991: ALL bands stack to column like org/slack (base left some automations
   bands in row/row-reverse at tablet). */
@media (max-width: 991px) {
  body.page-template-page-automations .rp-automations .hero_double_section_revert .double-section-hero-container.double-section-hero-container.double-section-hero-container {
    flex-direction: column !important;
  }
}

/* 2026-07-25 (Mo, verbatim): perks page — drop the double-slide section's top
   margin (flex-direction change was requested then withdrawn). */
.rp-perks .double-slide-section.perks-double-slide-section {
  margin-top: 0px !important;
}
/* 2026-07-25 Mo: hero image on the RIGHT on EN, desktop AND tablet (base was
   row-reverse = image left); RTL auto-mirrors (image left on AR). ≥768 so the
   base mobile stacking is untouched (image hidden ≤767 anyway). */
@media (min-width: 768px) {
  .rp-perks .double-slide-section.perks-double-slide-section {
    flex-direction: row !important;
  }
}
/* 2026-07-25 (Mo): perks hero — (a) hide the hero art on mobile (like the
   onboarding hero); (b) content rhythm: the CTA sat FLUSH under the sub
   (gap 0) — LP-family spacing: h1 mb 16, sub mb 27 before the CTA. */
.rp-perks .perks-double-slide-section-left .double-slide-landing-page-left-main-header {
  margin-bottom: 16px !important;
}
.rp-perks .perks-double-slide-section-left .double-slide-landing-page-left-label {
  margin-bottom: 27px !important;
}
.rp-perks .perks-double-slide-section-left .btn {
  margin-top: 0 !important; /* AR RTL layer added mt 16 → sub→CTA 43 vs EN 27 */
}
/* 2026-07-25 (Mo): perks hero content + image = ONBOARDING hero, 3 breakpoints
   (measured onboarding: h1 48/60 700 white mb16 → 36/53 tablet → 32/40 mobile;
   sub 16/25.6 rgba(255,255,255,.85); img 80% desktop / 65% tablet / hidden
   mobile). Locale-neutral; overrides the earlier EN-pin typography below. */
.rp-perks .perks-double-slide-section-left .double-slide-landing-page-left-main-header {
  font-size: 48px !important; line-height: 60px !important;
}
.rp-perks .perks-double-slide-section-left .double-slide-landing-page-left-label {
  font-size: 16px !important; line-height: 25.6px !important; color: rgba(255,255,255,0.85) !important;
}
/* definite column width first (the col was shrink-to-fit around the img, so
   the img's % had no base — circular): 50/50 like onboarding's split. */
@media (min-width: 768px) {
  .rp-perks .perks-double-slide-section-right { flex: 0 0 50% !important; max-width: 50% !important; min-width: 0 !important; }
  .rp-perks .perks-double-slide-section-left { flex: 0 0 50% !important; max-width: 50% !important; min-width: 0 !important; }
}
.rp-perks .perks-double-slide-image.perks-double-slide-image.perks-double-slide-image {
  width: 80% !important; max-width: 80% !important; height: auto !important; margin: 0 auto !important; display: block;
}
@media (min-width: 768px) and (max-width: 991px) {
  .rp-perks .perks-double-slide-section-left .double-slide-landing-page-left-main-header {
    font-size: 36px !important; line-height: 53px !important;
  }
  .rp-perks .perks-double-slide-image.perks-double-slide-image.perks-double-slide-image { width: 65% !important; max-width: 65% !important; }
}
@media (max-width: 767px) {
  .rp-perks .perks-double-slide-section-left .double-slide-landing-page-left-main-header {
    font-size: 32px !important; line-height: 40px !important;
  }
}

/* AR hero typography = EN (RTL layer had h1 44/52.8, sub 18.4/27.6, CTA 55/16/r6). */
/* (h1/sub RTL pins superseded by the onboarding-match block above — its rules
   are locale-neutral, so AR inherits the same 48/60→36/53→32/40 + 16/25.6.) */
html[dir="rtl"] .rp-perks .perks-double-slide-section-left .btn {
  font-size: 16.25px !important; border-radius: 4px !important; height: 54px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
@media (max-width: 767px) {
  .rp-perks .perks-double-slide-image { display: none !important; }
}

/* 2026-07-25 (Mo, perks AR audit): (a) RTL layer set BOTH left:24 AND right:24
   on the absolute .perk-item-label chip → it stretched full-width over the
   mirrored card image; pin to the physical LEFT in RTL (image sits right).
   (b) English offer strings scrambled under dir:rtl ("off all plans… 50%") —
   unicode-bidi:plaintext renders each offer by its own first-strong character
   (English LTR, Arabic RTL), placement stays right-aligned. */
html[dir="rtl"] .rp-perks .perk-item-label {
  left: 24px !important; right: auto !important; width: fit-content !important;
}
html[dir="rtl"] .rp-perks .perk-item-percentage {
  unicode-bidi: plaintext !important; text-align: right !important;
}

/* 2026-07-25 (Mo, verbatim): partner-program form card bg. */
body.page-template-page-partner-program .mw5.lets-chat.no-px.lets-chat-v2 {
  background: #f0f4fe !important;
}

/* 2026-07-25 (Mo): enterprise page only — center the "Plugs into the systems"
   integrations header block (was left-aligned in its column). */
body.page-template-page-enterprise .rp-section.blue-bg .mw5.pb-8 {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* 2026-07-25 (Mo): enterprise hero = LP — trusted-brands bar joins the hero
   band below text+image with a 48px rounded bottom (bar is a separate
   template-part sibling; same #e4ebfe continues the hero gradient). */
body.page-template-page-enterprise .new_landing_page_brands .new-listed-brands-section { margin-top: 0 !important; }
body.page-template-page-enterprise .new_landing_page_brands_header { margin-top: 8px !important; margin-bottom: 24px !important; }
body.page-template-page-enterprise .rp-teams-landing-page.new_landing_page_brands.new_landing_page_brands.new_landing_page_brands {
  background: #e4ebfe !important;
  border-bottom-left-radius: 48px !important;
  border-bottom-right-radius: 48px !important;
  overflow: hidden !important;
  padding-bottom: 40px !important;
  margin-top: 0 !important;
}

/* 2026-07-27 (Mo): Ask AI (/ai) comparison table — mobile/tablet fix. Two bugs:
   (1) the single 1250px scroll container had overflow-x:hidden → "Others" column
   clipped with no way to reach it; (2) below 992px the theme let each cell shrink
   to its own content, so header cells and body cells no longer lined up (e.g.
   header 118/118/108 vs body 76/76/75) — the columns stopped reading as a table.
   Fix: make the container horizontally scrollable, keep the 30% label / 70% values
   split, force the 3 value columns to equal thirds, and give each row a min-width
   so the whole table stays aligned under its headers and scrolls as one unit.
   Page-scoped to body.page-template-page-ai. */
@media (max-width: 991px) {
  body.page-template-page-ai .rp-askai-compare .pricing-comparison-accordion-content {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  body.page-template-page-ai .rp-askai-compare .comparison-table-row {
    min-width: 640px;
  }
  body.page-template-page-ai .rp-askai-compare .comparison-table-row > .comparison-table-td {
    flex: 0 0 30% !important;
  }
  body.page-template-page-ai .rp-askai-compare .comparison-table-row > .comparison-table-td-container-70 {
    flex: 0 0 70% !important;
  }
  body.page-template-page-ai .rp-askai-compare .comparison-table-td-container-70 > .comparison-table-td-value {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
  }
}

/* 2026-07-27 (Mo): Perks — filter/search sticky bar slid UNDER the fixed navbar
   on scroll. The navbar is position:fixed, 112px tall, z-index 1000; the sticky
   filter bars parked at top:80px (mobile/tablet .perks-mobile-container) and
   top:110px (desktop .perks_filter_container), both < 112px, so the navbar
   covered their top edge. Pin the sticky top to the navbar height so the bar
   parks flush below it (EN + AR — non-directional). */
.rp-perks .perks-mobile-container { top: 112px !important; }
.rp-perks .perks_filter_container { top: 112px !important; }

/* 2026-07-28 (Mo): Ask AI (/ai) comparison table — value + header cells
   vertically middle AND text-centred; the first column (Feature labels) stays
   left-aligned in EN / right-aligned in AR. All breakpoints. */
body.page-template-page-ai .rp-askai-compare .comparison-table-td-value {
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}
body.page-template-page-ai .rp-askai-compare .comparison-table-row > .comparison-table-td:first-child {
  display: flex !important;
  align-items: center !important;            /* vertical middle */
  justify-content: flex-start !important;    /* direction-aware: left in EN, right in AR */
  text-align: start !important;              /* direction-aware: left in EN, right in AR */
}
/* The label/header text (.comparison-td-label) carries margin-bottom:16px which,
   under align-items:center, pushes text up (~8px) and breaks vertical centering.
   Zero it so header + label cells sit truly in the middle. */
body.page-template-page-ai .rp-askai-compare .comparison-td-label { margin-bottom: 0 !important; }

/* 2026-07-28 (Mo): Pricing page hero only — padding-top 8em. Scoped via the
   pricing-specific .pricing-page class so other pages' .rp-container.hero-container
   are unaffected. */
.rp-container.hero-container.pricing-page { padding-top: 8em !important; }

/* Tablet/mobile: 8em is font-relative and shrinks (~72px) below the 112px fixed
   navbar, so the pricing hero heading clipped behind it. Use a fixed clearance. */
@media (max-width: 991px) {
  .rp-container.hero-container.pricing-page { padding-top: 9rem !important; }
}

/* 2026-07-28 (Mo): Mobile/tablet nav drawer leaked a ~20px sliver of the first
   menu item below the navbar (EN + AR) — .new-rp-nav-menu-mobile keeps
   padding-top:20px which survives the closed-state max-height:0. Zero it when
   closed; restore when the drawer is open (body.rp-drawer-open). ≤991 only so
   the desktop nav is untouched. */
@media (max-width: 991px) {
  .rp-navbar .rp-nav-menu.new-rp-nav-menu-mobile { padding-top: 0 !important; padding-bottom: 0 !important; }
  body.rp-drawer-open .rp-navbar .rp-nav-menu.new-rp-nav-menu-mobile { padding-top: 20px !important; padding-bottom: 20px !important; }
}

/* ============================================================================
   STALE MAY-WEBINAR BANNER — suppress sitewide (leadership launch QA 2026-07-25)
   ---------------------------------------------------------------------------
   Leadership flagged "Webinar is popping up for our old may webinar" on
   /country/uae, /country/saudi-arabia, /country/egypt. The banner promotes a
   past event ("FREE LIVE WEBINAR | the global passport — Employing abroad in
   days, not months").

   MEASURED FACTS (Cowork, headless Chrome @1440, three separate runs):
   - The markup IS in the served HTML of all three country pages
     (/FREE LIVE WEBINAR/ matches documentElement.innerHTML on each).
   - Rendering is INTERMITTENT: one run measured the wrapper visible at 213px
     tall; later runs measured zero visible banner wrappers. The inline
     Webflow banner JS decides visibility at runtime, so a "not visible right
     now" observation does NOT mean it cannot appear — which is exactly how
     leadership saw it and a later spot-check did not.
   - The CTA anchor href="/webinar/global-expansion" is NOT in the live DOM
     (the banner JS rewrites/strips it), so probing a[href*="webinar"] returns
     empty even while the banner element exists. Do not use that as an
     existence test — it is a false negative.
   - Serving path is the untracked wf country snapshots (wp-content/wf/country/,
     88 files), NOT DB post_content — so a CSS suppression is the correct
     mechanism: it covers all 88 snapshots, touches no untracked file, and is
     reversible in one line.

   SELECTOR: `.with-bg-stripped` is unique to this banner — 1 match on
   /country/uae, 0 on /eor and / (verified). Wrapper hidden via :has() so no
   empty spacer remains; inner container also hidden as a belt-and-braces
   fallback for engines without :has().
   REMOVE THIS RULE when a current webinar is promoted through the same banner.
   ============================================================================ */
.banner-container-wrapper:has(.banner-container.with-bg-stripped) { display: none !important; }
.banner-container.with-bg-stripped { display: none !important; }