/* ==========================================================================
   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-left: 8.33em;
  padding-right: 8.33em;
}

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

@media screen and (max-width: 767px) {
  .rp-why-remotepass .rp-container {
    padding-left: 16px;
    padding-right: 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;
  }
}

/* ==========================================================================
   #5/#14 (2026-07-05): Benefits ticks — OUTLINE style per Figma 1776-59928.
   The kit's base bullet tick (.rp-feature-split__bullets .ck) is a SOLID
   #16B364 circle with a white check; Figma's "Benefits that put people first"
   section wants an OUTLINE green circle + green check (no fill). Scope to the
   benefits section so no other page's ticks change; AR twin shares .rp-wrp-benefits.
   CSS `stroke` overrides the SVG's inline stroke="#fff" presentation attribute.
   ========================================================================== */
.rp-wrp-benefits .rp-feature-split__bullets .ck {
  background: transparent;
  border: 1.5px solid #16B364;
}
.rp-wrp-benefits .rp-feature-split__bullets .ck svg path {
  stroke: #16B364;
}

/* ==========================================================================
   #8 (2026-07-05): Feature-row image order — image-BELOW-text on mobile for
   every row (same decision as Homepage). The "global hiring" row authors media
   FIRST in the DOM (image-left on desktop), so at ≤767px it stacked image-ABOVE
   text. Pin text before media via flex order on all .rp-wrp-feature rows — a
   no-op for the text-first rows, and it flips the media-first row. EN + AR.
   ========================================================================== */
@media screen and (max-width: 767px) {
  .rp-wrp-feature .rp-feature-split__split { display: flex; flex-direction: column; }
  .rp-wrp-feature .rp-feature-split__split > .rp-feature-split__txt { order: 1; }
  .rp-wrp-feature .rp-feature-split__split > .rp-feature-split__media { order: 2; }
}