/* AUTO-GENERATED from qa-fixes-paid-landing.css via rtlcss. Do not edit by hand. Loaded only on AR pages by inc/i18n-setup.php. */ /* ────────────────────────────────────────────────────────────────── * qa-fixes-paid-landing.css — 2026-05-07 fidelity pass. * Loads AFTER the self-hosted Webflow CSS at * /wp-content/themes/rp/assets/webflow/css/remotepass-v2.webflow.shared..min.css. * Provides: * 1. Full-bleed layout — undo theme.json contentSize constraint * 2. Webflow container width — 1200px max, centered * 3. HubSpot form container glue * 4. Hide elements stripped from rendering (Webflow utility classes) * ────────────────────────────────────────────────────────────────── */ /* ── 1. Full-bleed paid landing — undo theme.json contentSize ── */ .rp-paid-landing, body.page-template-page-paid-landing main.rp-paid-landing, body.page-template-page-paid-landing main.rp-paid-landing > * { max-width: none !important; width: 100% !important; margin-right: 0 !important; margin-left: 0 !important; padding-right: 0 !important; padding-left: 0 !important; } /* WP block-theme leaves a `.wp-block-post-content` wrapper inside
; strip its width too so post_content renders edge-to-edge. */ .rp-paid-landing .wp-block-post-content, .rp-paid-landing .wp-block-post-content > * { max-width: none !important; width: auto; margin-right: 0; margin-left: 0; } /* ── 2. Webflow's container divs control inner width ── */ /* These are the Webflow class chains that limit inner content to readable widths. Don't override max-width on them — they're sized intentionally per design. */ .rp-paid-landing .rp-container, .rp-paid-landing .w-container, .rp-paid-landing .container, .rp-paid-landing .container-default { width: 100%; max-width: 1200px; margin-right: auto; margin-left: auto; padding-right: 16px; padding-left: 16px; box-sizing: border-box; } @media (min-width: 992px) { .rp-paid-landing .rp-container, .rp-paid-landing .w-container, .rp-paid-landing .container, .rp-paid-landing .container-default { padding-right: 32px; padding-left: 32px; } } /* ── 3. HubSpot form container ── */ .rp-paid-landing .hbspt-form, .hbspt-form, .hbspt-form iframe { width: 100% !important; max-width: 480px; margin: 0 auto; } .rp-paid-landing .hbspt-form-loading { text-align: center; padding: 20px; color: #666; font-size: 14px; } /* HubSpot replaces .hbspt-form's contents with a real form. Style the form container so it sits naturally inside Webflow's "Let's Chat" card. */ .rp-paid-landing .lets-chat .hbspt-form, .rp-paid-landing .lets-chat-v2 .hbspt-form, .rp-paid-landing .chat-box-sub-container .hbspt-form { background: transparent; box-shadow: none; padding: 0; } /* ── 4. Hide Webflow utility classes used for visual scaffolding ── */ .rp-paid-landing .hide, .rp-paid-landing .hide_it, .rp-paid-landing .hidepopup, .rp-paid-landing .w-form-done, .rp-paid-landing .w-form-fail { display: none !important; } /* ── 5. Header/footer collision avoidance ── */ /* Our local FSE header + footer wrap the post_content. The imported Webflow body has its OWN header/footer references for nav/CTA chrome. Hide any imported nav/footer markup that clashes with the local chrome. The import step (Phase 6 in handover) strips the `rp-navbar` div via depth-counted close, so this CSS is just defensive. */ .rp-paid-landing > .rp-navbar, .rp-paid-landing > footer.rp-footer, .rp-paid-landing > .footer-section { display: none; } /* ── 6. Image fallback — keep aspect ratio for missing image refs ── */ .rp-paid-landing img { max-width: 100%; height: auto; } /* ── 7. RTL adjustments for AR landing pages ── */ [dir="rtl"] .rp-paid-landing .double-section-hero-container { direction: ltr; } /* ────────────────────────────────────────────────────────────────── * 8. Visual fidelity fixes — 2026-05-07 manual visual pass * Brings paid landing pages closer to live's appearance: * a) Strip the full mega-menu nav → minimal Login + Book a Demo * b) Restore Webflow blue on .yellow-line.small (overrides accessibility * gold-on-white from responsive-global.css) * c) Pull
flush against the slim nav (kill the 35px gap) * d) Suppress the .rp-nav-container vertical padding stack so the * header is ~80px tall (matches live), not ~120px * ────────────────────────────────────────────────────────────────── */ /* a) Hide mega-menu + language switcher on paid landing pages */ body.page-template-page-paid-landing .rp-navbar .rp-nav-menu, body.page-template-page-paid-landing .rp-navbar .w-dropdown { display: none !important; } /* b) Restore Webflow blue on .yellow-line.small (was forced gold by responsive-global.css for accessibility on white BGs; on the teal landing-page hero, blue is the brand color and matches live) */ body.page-template-page-paid-landing .yellow-line.small, body.page-template-page-paid-landing .yellow-line, body.page-template-page-paid-landing .highlight-it-gold { color: #114ef7 !important; } /* c+d) Pull
flush against nav, slim the header to ~80px */ body.page-template-page-paid-landing main.rp-paid-landing { margin-top: 0 !important; padding-top: 0 !important; } body.page-template-page-paid-landing .rp-navbar { min-height: 80px; padding-top: 8px; padding-bottom: 8px; } /* Push the desktop button group (Login + Book a Demo) to the right edge to balance against the logo on the left, like live */ body.page-template-page-paid-landing .rp-navbar .rp-container.rp-nav-container { display: flex; align-items: center; justify-content: space-between; } body.page-template-page-paid-landing .rp-navbar .nav-btn-group { margin-right: auto; } /* Mobile / drawer overlay clutter — hide on paid landings since we stripped the menu they target */ body.page-template-page-paid-landing .rp-drawer-overlay, body.page-template-page-paid-landing .menu-button.w-nav-button { display: none !important; } /* Hide announcement banner on paid landings (conversion focus) */ body.page-template-page-paid-landing .announcement-banner, body.page-template-page-paid-landing [class*="announcement"]:not(.hbspt-form):not(.hbspt-form *) { display: none !important; } /* ────────────────────────────────────────────────────────────────── * §11 — Match live's tighter

spacing. * WP block theme injects margin-bottom: 24px on

; live uses 10px. * Across many cards/sections this stacks up to ~1100px of dead space. * Override only the

rule — leave heading + flex/flow gaps alone * (they're handled by Webflow's own CSS that we self-host). * ────────────────────────────────────────────────────────────────── */ body.page-template-page-paid-landing .rp-paid-landing p { margin-block-start: 0 !important; margin-block-end: 10px !important; margin-top: 0 !important; margin-bottom: 10px !important; } /* ────────────────────────────────────────────────────────────────── * §12 — Force Webflow heading typography on imported HTML. * The imported live HTML uses

and similar mixed * patterns. WP block theme + UA defaults give

sizes of 56-72px * which makes pricing card titles wrap to 2 lines + double the card * height vs live (where .rp-h3 = 1.9em ~30px). * * Webflow's intended values (from remotepass-v2.webflow.shared CSS): * .rp-h1 → see below * .rp-h2 → 3em, line-height 1.2 * .rp-h3 → 1.9em, line-height 1.3, font-weight 600 * .rp-h4 → see below * .text-capitalized → uppercase, -1.5px letter-spacing, weight 700 * .new_pricing_style_rp_h2_bold → 30px, weight 600 * * Force these to win regardless of which HTML tag carries the class. * ────────────────────────────────────────────────────────────────── */ /* .rp-h1 — generic Webflow h1 size */ body.page-template-page-paid-landing .rp-paid-landing .rp-h1, body.page-template-page-paid-landing .rp-paid-landing h1.rp-h1, body.page-template-page-paid-landing .rp-paid-landing h2.rp-h1 { font-size: 3.5em !important; line-height: 1.1 !important; font-weight: 700 !important; margin-top: 0 !important; } /* .rp-h2 — section headers + price area */ body.page-template-page-paid-landing .rp-paid-landing .rp-h2, body.page-template-page-paid-landing .rp-paid-landing h2.rp-h2, body.page-template-page-paid-landing .rp-paid-landing h1.rp-h2, body.page-template-page-paid-landing .rp-paid-landing h3.rp-h2 { font-size: 3em !important; line-height: 1.2 !important; letter-spacing: -.045em !important; margin-top: 0 !important; } /* .rp-h3 — pricing card titles + section sub-heads */ body.page-template-page-paid-landing .rp-paid-landing .rp-h3, body.page-template-page-paid-landing .rp-paid-landing h1.rp-h3, body.page-template-page-paid-landing .rp-paid-landing h2.rp-h3, body.page-template-page-paid-landing .rp-paid-landing h3.rp-h3, body.page-template-page-paid-landing .rp-paid-landing h4.rp-h3 { font-size: 1.9em !important; line-height: 1.3 !important; font-weight: 600 !important; text-align: right !important; margin-top: 0 !important; margin-bottom: 16px !important; } /* .text-capitalized — adds uppercase + tighter letter-spacing on top of rp-h3. Pricing card titles use this combo:

. */ body.page-template-page-paid-landing .rp-paid-landing .text-capitalized { color: #151515 !important; letter-spacing: -1.5px !important; text-transform: uppercase !important; font-weight: 700 !important; } /* Pricing-specific: the price "$350/mo" span inside h2.rp-h2.price-value. Webflow size is 30px; without override the h2.rp-h2 wins (=3em ~48px) and the spans inherit weird typography. */ body.page-template-page-paid-landing .rp-paid-landing .new_pricing_style_rp_h2_bold { font-size: 30px !important; font-weight: 600 !important; color: #2a2a2a !important; } body.page-template-page-paid-landing .rp-paid-landing .new_pricing_style_rp_h2_sub_text { font-size: 14px !important; font-weight: 400 !important; color: #6b7280 !important; letter-spacing: 0 !important; } /* Pricing card title wrapper (.flx-h-ctr.away.mb-trigger.new_pricing_style_h_accordion) */ body.page-template-page-paid-landing .rp-paid-landing .new_pricing_style_h { text-align: right !important; } /* Card body text — "Hire full-time employees in 150+ countries..." */ body.page-template-page-paid-landing .rp-paid-landing .new_pricing_style_rp_p_col-subheader, body.page-template-page-paid-landing .rp-paid-landing .new_pricing_style_rp_p { font-size: 14px !important; line-height: 1.5 !important; color: #6b7280 !important; margin-bottom: 0 !important; } /* Pricing benifit list items — "Remote Employees", "Automated Onboarding" etc. */ body.page-template-page-paid-landing .rp-paid-landing .pricing-benifit { margin-bottom: 4px !important; padding-bottom: 4px !important; } body.page-template-page-paid-landing .rp-paid-landing .new_pricing_style_f16, body.page-template-page-paid-landing .rp-paid-landing .f16 { font-size: 14px !important; line-height: 1.5 !important; } /* "What do you get?" toggle inside cards */ body.page-template-page-paid-landing .rp-paid-landing .new_pricing_style_rp_p20 { font-size: 14px !important; margin-bottom: 0 !important; } /* Pricing CTA buttons — green/teal Talk To Our Team / Contact Sales */ body.page-template-page-paid-landing .rp-paid-landing .btn.dark-green-btn, body.page-template-page-paid-landing .rp-paid-landing .btn.light-green-btn { font-size: 14px !important; padding: 12px 24px !important; line-height: 1.5 !important; } /* e) Pull the hero gradient flush against the nav. The first visible .rp-section has 19px margin-top + 56px padding-top, plus the inner .hero_double_section has another 98px margin-top — total ~173px of empty space between nav and the teal gradient. Strip it so the hero hugs the nav like live. */ body.page-template-page-paid-landing .rp-paid-landing .rp-section:first-child, body.page-template-page-paid-landing .rp-paid-landing .rp-section:nth-of-type(2), body.page-template-page-paid-landing .rp-paid-landing > .wp-block-post-content > .rp-section:not(.hide):first-of-type { margin-top: 0 !important; padding-top: 0 !important; } body.page-template-page-paid-landing .rp-paid-landing .hero_double_section, body.page-template-page-paid-landing .rp-paid-landing .hero_double_section.guide_hero_double_section, body.page-template-page-paid-landing .rp-paid-landing .new_landing_hero_double_section_bg_reverse { margin-top: 0 !important; padding-top: 0 !important; } /* The .double-section-hero-container has its own 56px padding for the text/form layout — keep that, just kill the wrapper margins above it */ body.page-template-page-paid-landing .rp-paid-landing .double-section-hero-container { margin-top: 0 !important; } /* ────────────────────────────────────────────────────────────────── * §9 — Carousel safety net (2026-05-07 carousel + cleanup pass) * Page heights were 2.5x live (18,965px vs 7,551px) because review-card * carousels stacked vertically without Swiper. Self-hosted Swiper 12.1.4 * now initialises them via inc/hubspot-form-shortcode.php → enqueue + * assets/webflow/swiper/rp-paid-carousel-init.js. This block is the * visual safety net for the cases where init silently fails. * ────────────────────────────────────────────────────────────────── */ /* When Swiper successfully initialises, it adds .swiper-initialized to the container. If init didn't run, fall back to clamping height + showing only the first 3 slides as graceful degradation. */ body.page-template-page-paid-landing .slider.swiper-container:not(.swiper-initialized), body.page-template-page-paid-landing .swiper-badges-container:not(.swiper-initialized), body.page-template-page-paid-landing .pricing-swiper:not(.swiper-initialized), body.page-template-page-paid-landing .swiper-steps:not(.swiper-initialized) { max-height: 600px; overflow: hidden; position: relative; } body.page-template-page-paid-landing .slider.swiper-container:not(.swiper-initialized) .swiper-slide:nth-child(n+4), body.page-template-page-paid-landing .swiper-badges-container:not(.swiper-initialized) .swiper-slide:nth-child(n+9), body.page-template-page-paid-landing .pricing-swiper:not(.swiper-initialized) .swiper-slide:nth-child(n+3), body.page-template-page-paid-landing .swiper-steps:not(.swiper-initialized) .swiper-slide:nth-child(n+4) { display: none !important; } /* Hide form-loader spinner / close icons / w-form-done / w-form-fail regardless of JS — they're only shown via Webflow JS during submit */ body.page-template-page-paid-landing .landing-page-form-loader, body.page-template-page-paid-landing .landing-page-form-close, body.page-template-page-paid-landing .w-form-done, body.page-template-page-paid-landing .w-form-fail { display: none !important; } /* Webflow's CSS may override Swiper's flex on .swiper-wrapper. Re-assert after Swiper has initialised so layout is horizontal not vertical. */ body.page-template-page-paid-landing .swiper-container.swiper-initialized .swiper-wrapper, body.page-template-page-paid-landing .swiper.swiper-initialized .swiper-wrapper { display: flex !important; flex-wrap: nowrap; } /* The dark-blue/orange awards section's gradient stretches with content height. After Swiper collapses the reviews to ~700px, the section shrinks naturally — but cap as belt-and-suspenders against any future regression. Tightened to 1100px (was 1400) — matches live more closely. Some pages (visa-sponsorship) have multiple stacked awards sections; the cap on each keeps them under control. */ body.page-template-page-paid-landing .rp-section.dark-blue-bg.new-footer-awards-orange, body.page-template-page-paid-landing .new-footer-awards-orange { max-height: 1100px; overflow: hidden; } /* Once Swiper IS initialised, allow the container to size naturally */ body.page-template-page-paid-landing .swiper-container.swiper-initialized, body.page-template-page-paid-landing .swiper.swiper-initialized { max-height: none; overflow: visible; } /* ────────────────────────────────────────────────────────────────── * §10 — Suppress Webflow IX2 page-load fade overlays (2026-05-07) * Two anonymous full-viewport
elements at z-index ~2 billion * are injected by webflow.schunk*.js as page-load fade overlays. * They're meant to fade out via the IX2 timeline once initialised, * but our sanitised post_content lacks the page-level data-w-id the * timeline targets, so they stick at full opacity forever — covering * everything below the fold with a white sheet. * JS kill loop in rp-paid-carousel-init.js is the runtime safety * net; this CSS is the static guard. The :not([id]) clause keeps * Greg's local Chrome extension overlay (#claude-agent-glow-border) * visible. * ────────────────────────────────────────────────────────────────── */ body.page-template-page-paid-landing div[style*="z-index: 2000000000"], body.page-template-page-paid-landing div[style*="z-index:2000000000"], body.page-template-page-paid-landing div[style*="z-index: 2147483646"]:empty, body.page-template-page-paid-landing > div:empty:not([class]):not([id])[style*="position: fixed"], body.page-template-page-paid-landing > div:empty:not([class]):not([id])[style*="position:fixed"] { display: none !important; } /* ────────────────────────────────────────────────────────────────── * §11 — Suppress duplicate testimonial/awards sections (2026-05-07) * The home-footer FSE template-part already renders the testimonials * carousel + awards-orange section after
. The Webflow import * ALSO embedded those sections inline in post_content (because the * original Webflow body markup carried them inside the page body, not * in a global footer). Result: the user sees the same review carousel * and orange awards section twice. * * Hide the post_content copy by scoping to `main.rp-paid-landing` * (the home-footer template-part lives OUTSIDE
per * templates/page-paid-landing.html, so this scoping is safe). * * eor-india: drops the 1809px in-content review section. * Other pages: drops whatever subset of these classes appears inline. * ────────────────────────────────────────────────────────────────── */ body.page-template-page-paid-landing main.rp-paid-landing .div-block-15, body.page-template-page-paid-landing main.rp-paid-landing .reviews-sym, body.page-template-page-paid-landing main.rp-paid-landing .rp-section.new-footer-awards-orange, body.page-template-page-paid-landing main.rp-paid-landing > .wp-block-post-content > .new-footer-awards-orange { display: none !important; } /* Last-resort review-card overflow hide — if a single review carousel's .swiper-wrapper still renders >5 slides visible (Swiper init mis-sizing), hide the overflow. Swiper's transform shifts slides off-screen, so this only kicks in for failed-init edge cases. */ body.page-template-page-paid-landing .swiper-container:not(.swiper-initialized) .swiper-wrapper .review-card.swiper-slide:nth-child(n+6) { display: none !important; }