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

   Pre-flight items resolved by markup edits in why-remotepass-body.html:
   - 9× H2 → H3 demotion on feature/card titles (Hire globally, Farewell
     spreadsheets, Give everyone the attention, Benefits that put people
     first, Fund payroll, We'll take care of all of it for you, Expense
     reports done for you, Invoicing without number-crunching, Help is
     here. Whenever and however you need it.)
   - Removed `.benifits` 3-card block inside the Customized Benefits row
     ("Kiss the Stacks of Paperwork" / "Stop wasting time" / "One tool
     means less chaos") — page-specific copy not in Webflow source,
     surfaced 3 LOCAL-ONLY heading mismatches
   - Removed duplicate `home-testimonials` + `home-try-rp` includes
     (RECURRING-ISSUES #1)
   ========================================================================== */

/* ============ §A. WHITE-BG-MASK — KEEP VISIBLE on why-remotepass ========
   2026-05-03: structured-diff reported live whiteBgMaskHidden=false,
   local=true. Same correction as /cor/, /local-payroll/, /ai/.
   The earlier "TRAP" comment was misread — live actually keeps the mask.
   ========================================================================== */

/* ============ §B. H1 LINE-HEIGHT — match live's 66.378px ================
   Both H1s ("Built for people leaders." in the dark-blue hero +
   "Built for finance leaders." in the white finance section) render
   at 69.264px line-height on local but live ships 66.378px. Tiny
   ~3px delta but flagged on both. Page-scoped override.
   ========================================================================== */
.rp-why-remotepass h1.rp-h1,
.rp-why-remotepass h1.rp-h1.white-txt {
  line-height: 66.378px;
}

/* ============ §C. H1 "Built for finance leaders" font-size 57.72 =========
   The white-txt hero H1 renders at 57.72px on both sides ✓. The plain
   `.rp-h1` (finance section) renders at 56px on local vs 57.72 on live.
   Bump page-scoped.
   2026-05-02: also lock the dark H1 color to live's `dark-blue-2`
   (#0f1035 / rgb(15,16,53)). Local was inheriting `brand-ink`
   (#15113b / rgb(21,17,59)) — a different navy, subtle but wrong.
   ========================================================================== */
.rp-why-remotepass h1.rp-h1 {
  font-size: 57.72px;
}
.rp-why-remotepass h1.rp-h1:not(.white-txt) {
  color: #0f1035;
}

/* ============ §D. .RP-H3 SECTION HEADINGS — match live's 24.7/32.11 =====
   The 9 feature/card headings (now properly H3 after body demotion)
   share class `.rp-h3`. Live ships 24.7px / 32.11px. Local default
   `.rp-h3` rule produces 24px / 33.6px. Page-scoped override matches
   live's exact values.
   ========================================================================== */
.rp-why-remotepass h3.rp-h3,
.rp-why-remotepass h3.rp-h3._w-semi {
  font-size: 24.7px;
  line-height: 32.11px;
}

/* ============ §E. RP-CONTAINER — restore 8.33em horizontal padding =======
   Phase 2-why-remotepass (2026-05-02): same root cause as integrations §E.
   Live's `.rp-container.hero-container.why-remote`, `.rp-container.py16`,
   and bare `.rp-container` all render at L/R padding 108.29px (= 8.33em
   at 13px container font). Local was rendering 24px because
   `qa-fixes-global.css:783-786` flattens `.rp-container` to 24px and
   loads after migration.css's canonical 8.33em rule.
   Page-scoped override at specificity (0,2,0) wins on cascade. Multi-class
   chains like `.rp-container.rp-container-hr` (0,2,0) and
   `.rp-container.reviews.new-footer-rp-container` (0,3,0) keep their own
   values — they're already correct on live (24px / 0px respectively).
   See RECURRING-ISSUES §33.
   ========================================================================== */
.rp-why-remotepass .rp-container {
  padding-right: 8.33em;
  padding-left: 8.33em;
}

@media screen and (max-width: 991px) {
  .rp-why-remotepass .rp-container {
    padding-right: 16px;
    padding-left: 16px;
  }
}

@media screen and (max-width: 767px) {
  .rp-why-remotepass .rp-container {
    padding-right: 16px;
    padding-left: 16px;
  }
}

/* ============ §F. HERO SECTION — drop 56px padding to 0 =================
   Phase 2-why-remotepass (2026-05-02): the dark-blue hero section
   `.rp-section.dark-blue-2` renders with `padding: 56px 0` on local
   (from `qa-fixes-global.css:19` which adds `.rp-section { padding-top:
   56px; padding-bottom: 56px }` globally). Live's same section uses
   `padding: 0` — the hero pulls all of its vertical rhythm from the
   inner `.rp-container.hero-container.why-remote`'s own padding.
   Result: local hero is 112px taller than it should be.
   ========================================================================== */
.rp-why-remotepass .rp-section.dark-blue-2 {
  padding-top: 0;
  padding-bottom: 0;
}

/* ============ §G. DT-BR — desktop line break in hero sub-copy ===========
   The hero sub-copy "A single platform to save HR teams<dt-br>loads of time."
   contains a `<span class="dt-br">` that should become a desktop line
   break. Live renders it `display: block`; local renders `display: inline`
   per migration.css:13451 which sets `.rp-why-remotepass .dt-br
   { display: inline }` (polarity inverted, same bug as integrations §F).
   See RECURRING-ISSUES §34.
   ========================================================================== */
.rp-why-remotepass .dt-br {
  display: block !important;
}

@media screen and (max-width: 767px) {
  .rp-why-remotepass .dt-br {
    display: inline !important;
  }
}