/* AUTO-GENERATED from qa-fixes-global.css via rtlcss. Do not edit by hand.
   Loaded only on AR pages by inc/i18n-setup.php.
*/

/* ── 2026-07-22: Mobile/tablet header — nav-menu float fix + logo next to burger
   .rp-nav-menu has float:left (Webflow default). In RTL this sits at the
   physical left edge and pushes the .mb-flx-h bar ~36px inward, creating
   a gap before the CTA buttons. Float right so it clears the left side.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  /* .rp-nav-container is justify-content:space-between. In RTL the flex axis
     reverses so the bar (first child) lands at the physical RIGHT (~61px from
     left edge) instead of the left. Force the container itself to lay out as
     LTR so the bar's first-child position matches EN (physical left = 25px).
     Restore direction:rtl on direct children so inner content stays Arabic. */
  .rp-navbar .rp-nav-container {
    direction: ltr;
  }
  .rp-navbar .rp-nav-container > * {
    direction: rtl;
  }
}

/* ── 2026-07-22: Mobile/tablet header — logo sits next to burger in RTL ──────
   mega-menu.css sets margin-right:auto on .w-nav-brand (LTR: pushes CTA/login
   to the far right). In RTL that same auto margin creates a gap between the
   logo and the hamburger. Zero it out so logo stays flush beside the burger.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .rp-navbar .w-nav-brand {
    margin-right: 0;   /* remove LTR auto margin that gaps logo from burger */
    margin-left: auto; /* push CTA/login to the physical left */
  }
}

/* ── 2026-07-22: Mega-menu column divider — RTL fix ─────────────────────────
   mega-menu.css sets border-right on .rp-mega-col (EN: divider on right of
   each col). In RTL the divider must be on the left so it sits between columns.
   Also swap first-child / last-child padding + border sides.
   ─────────────────────────────────────────────────────────────────────────── */
.rp-mega-col {
  border-right: 0;
  border-left: 1px solid #E6E6EA;
}
.rp-mega-col:first-child { padding-right: 4px; padding-left: 20px; }
.rp-mega-col:last-child  { padding-left: 4px; border-left: 0; }

/* ── 2026-07-22: Mega-menu items — explicit direction:rtl (belt-and-braces) ──
   body[dir=rtl] normally provides direction:rtl via inheritance. But if any
   ancestor resets direction (e.g. an inline style, a Webflow snapshot with
   html[dir=ltr], or the direction:ltr we set on .rp-nav-container at ≤991px),
   icons would flip to the left side. Setting direction:rtl explicitly here
   guarantees icon-right / text-left layout on all AR pages at all breakpoints.
   ─────────────────────────────────────────────────────────────────────────── */
.rp-mega-panel,
.rp-mega-inner,
.rp-mega-col,
.rp-mega-link {
  direction: rtl;
}

/* ── 2026-07-22: Mega-menu text alignment — RTL fix (desktop + mobile) ───────
   .rp-navbar.rp-nav-container-align in Webflow CSS sets text-align:left which
   cascades into all mega-menu children. Even with direction:rtl set, inherited
   text-align:left overrides RTL text flow. Override every text-bearing element
   to text-align:right (reading-direction start for Arabic).
   ─────────────────────────────────────────────────────────────────────────── */
.rp-mega-col-heading,
.rp-mega-link-title,
.rp-mega-link-sub {
  text-align: right;
}

/* ── 2026-07-22: Mega-menu accordion at tablet/mobile — RTL alignment ────────
   mega-menu.min.css sets text-align:left on .rp-mega-col-heading at ≤991px;
   in RTL that should be text-align:right (reading-direction start).
   Also kill the desktop column divider + padding overrides — not needed in
   the stacked accordion view. ── */
@media (max-width: 991px) {
  .rp-mega-col-heading {
    text-align: right;
  }
  .rp-mega-col {
    border-left: 0 !important;
  }
  .rp-mega-col:first-child {
    padding-right: 0;
    padding-left: 0;
  }
  .rp-mega-col:last-child {
    padding-left: 0;
  }
}

/* ==========================================================================
   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-right: 20px;
  padding-left: 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-right: 16px;
  padding-left: 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-right: 16px;
  padding-left: 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-right: 24px;
  padding-left: 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-left-radius: 48px;
  border-bottom-right-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-right: 16px;
    padding-left: 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 {
  background-color: #fff; /* no hover — static rating badges. Mohamed 2026-07-08 */
}

.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-right: auto;
  margin-left: 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: right;
  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-right: 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;
  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-left: 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-right: 24px;
  padding-left: 24px;
}

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

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

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

  .rp-container {
    padding-right: 16px;
    padding-left: 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;
  right: 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;
  left: 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%;
  right: 50%;
  margin-right: -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%;
  right: 50%;
  margin-right: -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;
  right: 125%;
  margin-right: 0;
  margin-top: -25px;
}

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

/* 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-right: -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 — at ≤991px mega-menu.min.css needs position:absolute
   for the full-width drop-down drawer. 2026-07-22: was unscoped, blocked tablet/mobile. ── */
@media (min-width: 992px) {
  .rp-navbar .rp-nav-menu {
    position: static;
  }
}

/* ── Drawer vertical position — AR (RTL) override ────────────────────────────
   qa-fixes-global.css sets top:0 on .rp-nav-menu at ≤991px, which is correct
   for EN: Webflow creates a .w-nav-overlay (height = full-page) inside the
   navbar, the menu lives inside it at top:0 → positions just below the navbar.

   In AR, Webflow detects html[dir=rtl] and SKIPS overlay creation. The menu
   remains a direct child of .rp-navbar (position:fixed, height ≈ 112px).
   With top:0 the menu is at viewport y:0 — fully hidden behind the navbar.

   Fix: override top:0 → top:100% here (AR-only file, loads after global).
   top:100% relative to .rp-navbar = 100% of its height ≈ 112px → drawer
   starts exactly at the bottom of the fixed navbar bar. 2026-07-22. ── */
@media (max-width: 991px) {
  .rp-navbar .rp-nav-menu {
    top: 100%;
  }
}

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

.rp-cookie-bar {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 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;
  right: 0;
  left: 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;
  left: 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 {
    left: 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;
  right: 0;
  left: 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 {
  right: auto;
  left: 60px;
}

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

.swiper-pagination.case-studies-pagination {
  bottom: -60px;
  text-align: right;
  padding-right: 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;
  right: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(-135deg, #e8eef7 0%, #d5dff0 100%);
}

.ebook-card-thumbnail-img {
  position: absolute;
  top: 50%;
  right: 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: right;
  font-weight: 600;
  color: #15113b;
  border-left: 1px solid #e0e5f0;
}

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

.rp-pricing-details-table th.rp-pricing-details-feature {
  min-width: 200px;
  border-left: 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-left: 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-left: 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-left: 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-right: 24px;
  padding-left: 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). */
.highlight-it-gold {
  color: rgb(244, 197, 66) !important;
}
.yellow-line.small {
  color: #ffd02f !important;
}

.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): duplicate chevron — the shared mega-menu markup
   ships an inline svg.rp-mega-chevron in every toggle. See qa-fixes-global.css EX23. */
.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-right: 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;
  right: 0;
  left: 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: right;
}

/* 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: 100% 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-right: 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
   ============================================================================= */
body.page-template-page-finance-managers .reviews-band,
body.page-template-page-hr-managers .reviews-band,
body.page-template-page-hr-managers .home-try-rp-section {
    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 */
[fs-cc="banner"], .fs-cc-banner_component, .cookies-root { display: none !important; }  /* Finsweet (fs-cc) cookie banner */

/* 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-right:auto;margin-left: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}
.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;
  right: 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-right: 10px;
  padding-left: 10px;
  margin-bottom: 20px;
}

/* ── 2026-06-30 Onboarding AR: 3-col video-card grid to match canon 617:20385 (was 2-col flex;
   canon shows 3-col in EN + AR/RTL). This RTL file loads AFTER qa-fixes-global.css, so the grid fix
   must live here too for AR. grid_step{flex-column} (header on top) comes from qa-fixes-global.css. ── */
.rp-ar.rp-onboarding .grid_step .collection-list-4.w-dyn-items,
.rp-ar.rp-onboarding .grid_step .collection-list-5.w-dyn-items,
.rp-ar.rp-onboarding .grid_step .collection-list.w-dyn-items {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px 16px !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}
.rp-ar.rp-onboarding .grid_step .collection-list-4.w-dyn-items::before,
.rp-ar.rp-onboarding .grid_step .collection-list-4.w-dyn-items::after,
.rp-ar.rp-onboarding .grid_step .collection-list-5.w-dyn-items::before,
.rp-ar.rp-onboarding .grid_step .collection-list-5.w-dyn-items::after,
.rp-ar.rp-onboarding .grid_step .collection-list.w-dyn-items::before,
.rp-ar.rp-onboarding .grid_step .collection-list.w-dyn-items::after { display: none !important; }
.rp-ar.rp-onboarding .grid_step .video-item-container.w-col.w-col-6 {
  float: none !important;
  width: 100% !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}
@media (max-width: 991px) {
  .rp-ar.rp-onboarding .grid_step .collection-list-4.w-dyn-items,
  .rp-ar.rp-onboarding .grid_step .collection-list-5.w-dyn-items,
  .rp-ar.rp-onboarding .grid_step .collection-list.w-dyn-items { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .rp-ar.rp-onboarding .grid_step .collection-list-4.w-dyn-items,
  .rp-ar.rp-onboarding .grid_step .collection-list-5.w-dyn-items,
  .rp-ar.rp-onboarding .grid_step .collection-list.w-dyn-items { grid-template-columns: 1fr !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;
}