/* AUTO-GENERATED from qa-fixes-ai.css via rtlcss. Do not edit by hand.
   Loaded only on AR pages by inc/i18n-setup.php.
*/
/* ==========================================================================
   qa-fixes-ai.css — /ai/ page parity overrides
   --------------------------------------------------------------------------
   Created 2026-05-01 from compare-page.mjs results on ai (22 mismatches
   in baseline). Each rule is scoped to `.rp-ai` or
   `body.page-template-page-ai`. Reference: qa-fixes-cor.css.

   Pre-flight items resolved by markup edits:
   - 4× H2 → H1 promotion on product slide headings
   - Ellipsis escape (`...` → `...`) on "Ask AI, help me with..."
     to bypass WP wptexturize converting `...` → `…`
   - Removed duplicate home-testimonials + home-try-rp includes
     (RECURRING-ISSUES.md #1)
   - Added "Let's Chat" + waitlist popup markup (matches live's hidden
     `.landing-page-form-container.hidepopup` containers; auto-hidden by
     qa-fixes-global.css §18)

   PHP edits:
   - Added 'ai' to $soft_gradient_slugs in inc/hero-content-bindings.php
     so hero emits `_bg_extra_layer` (without rounded-bottom). Gradient
     color is page-specific — set below in §B.
   ========================================================================== */

/* ============ §A. WHITE-BG-MASK — KEEP VISIBLE on ai ====================
   2026-05-03: structured-diff Run 2 reported live whiteBgMaskHidden=false,
   local=true. Same correction as /cor/, /local-payroll/. Live keeps the
   bottom mask visible — hiding it produced the inverse mismatch.
   ========================================================================== */

/* ============ §B. HERO SOFT-GRADIENT — match live's PURPLE top-fade =======
   Live ai's hero gradient: `linear-gradient(rgb(255,255,255), rgb(228,217,232) 75%)`
   — a purple/lavender top-fade. Different from cor's lavender-blue.
   PHP shortcode emits `_bg_extra_layer` for ai (via soft-gradient
   variant); this rule provides the page-specific gradient color.
   ========================================================================== */
.rp-ai .hero_double_section.new_rp_hero_double_section.new_rp_hero_double_section_bg.new_rp_hero_double_section_bg_extra_layer {
  background-color: #fff;
  background-image: linear-gradient(rgb(255, 255, 255), rgb(228, 217, 232) 75%);
  background-position: 100% 0;
  background-repeat: repeat;
  background-size: auto;
  background-attachment: scroll;
  padding-top: 40px;
  padding-bottom: 24px;
}

/* ============ §C. HERO H1 SIZE — match live's 47.2 px ====================
   Live: H1 47.2px / 56px on "Your smartest workforce insights are now
   just a question away".
   Local was rendering 53.6px / 64px (the home-hero size). Cap to live's
   value. The H1 is rendered by the `[rp_product_hero]` shortcode and has
   class `double-slide-landing-page-left-main-header` and probably the
   home-hero font-size cascade kicks in unless we override.
   ========================================================================== */
.rp-ai .double-slide-landing-page-left-main-header {
  font-size: 47.2px;
  line-height: 56px;
}

/* ============ §D. FAQs HEADING — match live's 36 px ======================
   Live: H2 36px / 38px. Local: 28px / 36.4px. Same as cor §D /
   local-payroll §E.
   ========================================================================== */
.rp-ai .guide_hiring_faq_h,
.rp-ai .guide_hiring_faq_h.guide_hiring_faq_h_gray {
  font-size: 36px;
  line-height: 38px;
}

/* ============ §E. "Ask AI, help me with..." HEADING line-height ==========
   Live: H2 35.2px / 48px on the dark-bg "Ask AI, help me with..."
   section heading. Local was rendering 35.2px / 51.2px.
   v2 (2026-05-01): the v1 selector at specificity 0,4,1 was outranked
   by an existing 5-class chain rule
   (`.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 { line-height: 3.2rem }` = 51.2px).
   Bumping specificity by including `.new_landing_page_payroll_header`
   in the chain so my rule reaches 0,5,1 and wins.
   ========================================================================== */
.rp-ai h2.new_landing_page_payroll_header.new-rp-section-header.no-pt.text-color-white {
  line-height: 48px;
}

/* ============ §H. HERO IMAGE — cap to live's 706px =====================
   Run 3 reported imgRenderedW 706 (live) vs 730 (local). Same fix as
   /cor/ §H. */
.rp-ai .main-hero-section-img {
  max-width: 706px;
  width: 100%;
  height: auto;
}

/* ============ §G. "Ask AI, help me with..." H2 — match 16px =============
   migration.css:1316 ships padding-top: 56px on the long compound header.
   Live ai overrides to 16px on the "Ask AI, help me with..." H2 (the
   section header inside the demo-cards section, line 89 of ai-body.html
   carries `.no-pt.text-color-white`). The "Why choose Ask AI?" header
   keeps the 56px on live. Override here.
   ========================================================================== */
.rp-ai .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.text-color-white {
  padding-top: 16px;
}

/* ============ §F. "Let's Chat" POPUP H2 sizes match live =================
   Live: H2 39px / 46.8px on the "Let's Chat" popup form headings (both
   the standard popup and the waitlist variant). Local was rendering
   32px / 41.6px (default `.rp-h2`). Override scoped to the popup
   container so other `.rp-h2` headings on the page (e.g., pricing
   cards on other product pages) aren't affected.
   ========================================================================== */
.rp-ai .landing-page-form-container.hidepopup .lets-chat h2.rp-h2 {
  font-size: 39px;
  line-height: 46.8px;
}

/* ==========================================================================
   §G. ASK AI INTERACTIVE-DEMO SECTION — port grid-3-steps + card layout
   --------------------------------------------------------------------------
   2026-05-01: User-reported and visual-pass-confirmed regression on the
   "Ask AI, Help Me With..." section. Live renders 3 cards horizontally on
   a dark-purple background with a star pattern. Local rendered as a
   single column on white background, with only the first card's image
   visible (the others wrapping below).

   Cause: migration.css lines 14073-14156 define the .grid-3-steps,
   .grid-step-card-* and related rules ONLY scoped to .rp-partner-program.
   Never extended to .rp-ai. Without these rules, the swiper-steps
   container has no grid layout (defaults to block), the card-text-label
   has no font sizing, etc.

   Plus: live's `.hero_double_section_revert-with-bg` carries a Webflow
   CDN bg-image (dark purple with star pattern). No CSS rule for that
   modifier exists in migration.css at all.

   Fix: port the rules from migration.css scoped to .rp-ai. Bg-image
   referenced from Webflow CDN (matches live exactly without copying
   the asset locally — same approach as Talent Pool country thumbnails).
   ========================================================================== */

/* Dark-bg wrapper — matches live's CDN bg-image */
.rp-ai .hero_double_section_2.hero_double_section_revert.hero_double_section_revert-with-bg {
  background-color: #fff;
  background-image: url("https://cdn.prod.website-files.com/60e6dc45a4d62517ed5a669f/68c0ba01a611265ca0d6c4c3_ai-agent-bg_gm_optimized.webp");
  background-position: 100% 0;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 56px 24px;
}

/* 3-up grid layout — ported from .rp-partner-program rules */
.rp-ai .grid-3-steps {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-bottom: 0;
  margin-right: 24px;
  margin-left: 24px;
  display: grid;
}

.rp-ai .grid-step-card {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  display: flex;
}

.rp-ai .grid-step-card.grid-step-card-extra-style {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  cursor: pointer;
  border: 1px solid #e0e3eb;
  border-radius: 16px;
  justify-content: space-between;
  overflow: hidden;
}

.rp-ai .grid-step-card-header {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  border-radius: 16px;
  flex-flow: column;
  align-items: flex-start;
  padding: 16px 24px;
  display: flex;
}

.rp-ai .grid-step-card-header.grid-step-card-header-reverted {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  padding-top: 8px;
  padding-bottom: 32px;
}

.rp-ai .grid-step-card-footer-img {
  max-width: 100.5%;
  margin-right: -.25%;
}

.rp-ai .grid-step-card-footer-img.grid-step-card-header-img {
  object-fit: cover;
  max-width: 100.5%;
  margin-right: -.25%;
  padding-right: 0;
}

.rp-ai .card-text-label {
  max-width: 65%;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
}

.rp-ai .card-text-label.text-black {
  color: #000;
}

.rp-ai .card-text-label.text-black.text-box {
  max-width: 100%;
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}

.rp-ai .card-text-label.text-black.text-box.no-px {
  margin-bottom: 0;
  font-size: 20px;
  line-height: 28px;
}

.rp-ai .card-text-label.text-black.text-box.no-px.text-color-white {
  color: #fff;
}

.rp-ai .rp-container-1200.centred.swiper.swiper-steps {
  width: 100%;
}

/* Hide swiper pagination on desktop (mobile-only carousel) */
.rp-ai .steps-swiper-pagination,
.rp-ai .swiper-pagination-container {
  display: none;
}

/* CTA below the cards */
.rp-ai .centered-content {
  justify-content: center;
  align-items: center;
  display: flex;
}

.rp-ai .centered-content.mg-top {
  margin-top: 48px;
}

/* ==========================================================================
   §H. COWORK AUDIT FIXES (2026-05-01)
   --------------------------------------------------------------------------
   Cowork visual audit (live vs local /ai/) flagged 14 distinct issues.
   Fixes below address each one. Numbers reference the audit's section/
   issue. See documents/cowork-ai-audit-2026-05-01.md for the full report.
   ========================================================================== */

/* §H.1 — Hero CTA: live uses brand-purple variant; local was rendering
         default brand-blue. Override hero CTA classes via CSS rather
         than touching the [rp_hero_cta] shortcode (would affect other
         pages). Also fix the size delta (live 214×50, local 183×52).
         Live's classes: .btn.mb-grow.btn-small-text.btn-bold.btn-purple
         Migration source for color: webflow CSS line 11346.
*/
.rp-ai .hero-btns .btn.mb-grow {
  background-color: #783f8e;
  border-color: #783f8e;
  font-size: 16px;
  font-weight: 700;
  padding: 14.82px 8px;
  min-width: 214px;
  text-transform: none;
}

/* §H.2 — `.highlight-it-purple` brand color: live uses #783F8E (RP digital
          plum); local was rendering #7C3AED (Tailwind violet). */
.rp-ai .highlight-it-purple {
  color: rgb(120, 63, 142);
}

/* §H.3 — Hero section padding: live `24px 24px 56px`, local was inverted
          to `40px 24px 24px`. Fix by overriding the soft-gradient padding
          in §B (which set `padding: 40px 24px` symmetrically). */
.rp-ai .hero_double_section.new_rp_hero_double_section.new_rp_hero_double_section_bg.new_rp_hero_double_section_bg_extra_layer {
  padding-top: 24px;
  padding-bottom: 56px;
}

/* §H.8 — "Ask AI, Help Me With..." section H2: contrast fix.
          Live: white text on dark purple bg. Local: dark gray (default
          h2 color) on dark purple — barely visible. The H2 has class
          `text-color-white` which should set white but no rule exists.
          Adding it scoped to .rp-ai. */
/* v2 (2026-05-01): user reported the cards' label + subhead text was
   white on local but should be dark (live uses #301939 for the label
   and #000 for the subhead). My v1 rule was too broad — `.text-color-
   white !important` applied to ANY element with that class, overriding
   live's dark-purple/black on the cards. Scope to the section H2 only,
   using a 4-class chain for precision so card descendants aren't hit. */
.rp-ai .hero_double_section_2.hero_double_section_revert.hero_double_section_revert-with-bg > h2.new-rp-section-header {
  color: #fff;
}

/* §H.9 — Wand icon at top of "Ask AI" section: was missing/clipped.
          Webflow CSS (remotepass-v2.webflow.css line 36409) sets
          width: 120px + margin: 0 auto 16px + display: block. Port. */
.rp-ai .hero_double_section_2_centred-img {
  width: 120px;
  margin-bottom: 16px;
  margin-right: auto;
  margin-left: auto;
  display: block;
}

/* §H.10/11 — The 3 cards in the "Ask AI, Help Me With..." section had
              no card chrome on local. Live's `.grid-step-card-with-bg`
              gets a Modal_gm_optimized.webp bg + border-radius 8px from
              webflow CSS line 35003. Port it (local now has a copy of
              the asset at /wp-content/themes/rp/assets/images/). */
.rp-ai .grid-step-card.swiper-slide.grid-step-card-with-bg {
  background-image: url("/wp-content/themes/rp/assets/images/Modal_gm_optimized.webp");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 8px;
}

/* §H.14 — "What Makes RemotePass Ask AI Different?" heading alignment.
           Live: left-aligned (sits flush with table's left edge).
           Local: center-aligned. The heading carries `.text-align-left`
           modifier per the markup but the same 5-class chain rule from
           migration.css was overriding text-align to center. Fix
           specificity by chaining 5 of the heading's classes (matching
           the §E specificity-bump pattern from RECURRING-ISSUES.md §26). */
.rp-ai h2.new_landing_page_payroll_header.new-rp-section-header.adjust-mt.no-mx.text-align-left {
  text-align: right;
}

/* §H.15 — Comparison table: live renders as 4-col grid, local renders
           as vertical stack. Port `.comparison-table-row` (display:
           flex; justify-content: space-between) and `.comparison-table-
           td` (width: 33.33%; padding: 16px 12px) from Webflow CSS
           lines 23433-23507. The `.comparison-accordion-content`
           wrapper styles also needed (line 23640-23664). */
.rp-ai .comparison-table-row {
  border: 1px #f0f0f0;
  border-bottom-style: solid;
  justify-content: space-between;
  width: 100%;
  display: flex;
}
.rp-ai .comparison-table-row.comparison-table-row-no-border-bottom {
  border-bottom-width: 0;
}
.rp-ai .comparison-table-row.pricing-comparison-table-row {
  border-right-width: 0;
}
.rp-ai .comparison-table-td {
  border: 0 solid #000;
  align-self: auto;
  width: 33.33%;
  padding: 16px 12px;
  text-decoration: none;
}
.rp-ai .comparison-table-td.comparison-table-td-value {
  border-width: 0;
  justify-content: center;
  width: 50%;
  display: flex;
}
.rp-ai .comparison-table-td.comparison-table-td-value.comparison-table-td-value-checks {
  align-items: center;
}
.rp-ai .comparison-table-td.comparison-table-td-value.comparison-table-td-value-checks.adjust-padding {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  justify-content: flex-start;
  padding: 16px;
}
.rp-ai .comparison-table-td.comparison-table-td-value.comparison-table-td-value-checks.adjust-padding.comparison-table-td-bg-gray {
  background-color: #f6f6f6;
}
.rp-ai .comparison-table-td.comparison-table-td-value.comparison-table-td-value-checks.adjust-padding.comparison-table-td-bg-gray.comparison-table-td-highlighted-first {
  background-color: #f6eaf2;
}
.rp-ai .comparison-table-td.pricing-comparison-table-td-label {
  text-align: right;
}
.rp-ai .comparison-table-td-container {
  display: flex;
  width: 70%;
}
.rp-ai .comparison-table-td-container.comparison-table-td-container-70 {
  width: 70%;
}
.rp-ai .comaprison-accordion {
  background-color: transparent;
  border-bottom: 1px solid #f0f0f0;
  border-radius: 0 0 8px 8px;
  margin-bottom: 32px;
  display: block;
}
.rp-ai .comaprison-accordion.pricing-comaprison-accordion {
  border-radius: 0;
  margin-top: 32px;
}
.rp-ai .comaprison-accordion.pricing-comaprison-accordion.no-border {
  border-bottom-width: 0;
}
.rp-ai .comparison-accordion-content {
  border: 1px solid #f0f0f0;
  border-bottom: 0 #f0f0f0;
  border-radius: 0 0 8px 8px;
}
.rp-ai .comparison-accordion-content.pricing-comparison-accordion-content {
  border-right-width: 0;
  border-left-width: 0;
  border-radius: 0;
  overflow: hidden;
}
.rp-ai .comparison-accordion-content.pricing-comparison-accordion-content.pricing-comparison-accordion-content-with-boder {
  border-style: solid;
  border-width: 1px;
  border-radius: 16px;
}
.rp-ai .comparison-accordion-content.pricing-comparison-accordion-content.pricing-comparison-accordion-content-with-boder.comparison-accordion-content-bg-white {
  background-color: #fff;
  border-color: #adc2fc;
}

/* §H.16 — Ask AI section grid container width cap.
           User reported cards rendering at 448px wide on local vs ~389px
           on live. Cards stretched edge-to-edge because the parent
           `.rp-container-1200.centred.swiper.swiper-steps` wrapper had
           no max-width on local — Webflow CSS line 34430 sets
           `max-width: 1200px` on `.rp-container-1200`, but that rule was
           only ported to .country_guide_v2 / .rp-partner-program in
           migration.css. Never extended to .rp-ai.
           Live: section 1440 - container 1200 = 240px slack ÷ 2 = 120px
           gutter on each side → cards start at x=120, render at 389×3.
           Local was: section 1423, no max-width → cards start at x=48,
           render at 448×3.
           Fix: cap container + center via auto margins. The `.centred`
           modifier is just a visual hint; centering is via margin auto. */
.rp-ai .rp-container-1200 {
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
}

/* §H.17 — Ask AI card label + subhead text colors.
           User reported the dark-purple card text was rendering white on
           local. Cause: my §H.8 v1 rule (`.text-color-white !important`)
           was too broad and overrode the cards' actual color modifiers.
           Live uses two specific Webflow rules (CSS lines 12499, 34383)
           that were never ported to migration.css for .rp-ai:

             .card-text-label.text-black.text-box.no-px.text-color-white.
               text-small.text-dark-purple { color: #301939 }
             .rp-p.mbf20.new_pricing_style_rp_p.new_pricing_style_rp_p_
               col-subheader.no-fixed-hight.text-color-white.text-color-
               white-small.text-color-black { color: #000 }

           §H.8 v2 narrowed scope to just the section H2 (above), so
           these rules can now provide the cards' dark text colors
           without the !important fight. */
.rp-ai .card-text-label.text-black.text-box.no-px.text-color-white.text-small.text-dark-purple {
  color: #301939;
}
.rp-ai .rp-p.mbf20.new_pricing_style_rp_p.new_pricing_style_rp_p_col-subheader.no-fixed-hight.text-color-white.text-color-white-small.text-color-black {
  color: #000;
}

/* §H.18 — "What Makes RemotePass Ask AI Different?" table container width.
           User reported the table is larger on local than live. Probe:
           live tableContainerWidth=1252px, local=1300px (48px wider).
           Local's `.rp-container` rule caps at 1300, but live further
           caps the table's specific container modifier (`.no-pt.no-pd`)
           at 1252. The visual effect: local table extends 24px further
           on each side than live, making it look bigger.
           Fix: cap to 1252px scoped to the table's container chain. */
.rp-ai .hero_double_section_2.hero_double_section_revert.hero_double_section_gray_bg .rp-container.getguide-rp-container.no-pt.no-pd {
  max-width: 1252px !important;
}

/* §H.19 — FAQs section padding match.
           User reported FAQ section is "larger than the others". Probe:
           live padding=0px 32px, local padding=56px 24px. Local has 56px
           top+bottom padding live doesn't have. Match live exactly. */
.rp-ai .rp-section.rp-container.rp-container-extra-style {
  padding: 0 32px;
}