/* ==========================================================================
   qa-fixes-remote-teams.css
   Remote Teams (For Contractors) — page body, FULL REBUILD 2026-07-07.
   Figma node 15503-211335 ("Teams"). Scope: .rp-remote-team.
   Parts styled here (all component-based via parts/*):
     - parts/remote-team-hero.html      (sec 1 HERO, light lavender)
     - parts/component-brands-bar.html  (sec 2, shared — light bg override)
     - parts/remote-team-features.html  (sec 3 Mobile App, sec 4 navy Card,
                                          sec 5 Super App 5-card carousel)
   Testimonials + twin-CTA + footer come from home-footer (NOT styled here).
   Design tokens (from Figma 15504:29023/29024 + brand navy #021143):
     navy #021143 · blue #114EF7 · sub #3F3F3F · pill text #044D80
   RTL overrides live in qa-fixes-remote-teams-rtl.css.
   ========================================================================== */

/* ---- shared container + primitives ------------------------------------- */
.rp-remote-team .rt-container { max-width: 1340px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.rp-remote-team .rt-hl { color: #114EF7; }
.rp-remote-team .rt-eyebrow {
  margin: 0 0 12px;
  font-weight: 700;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15, 16, 53, 0.70);
}
.rp-remote-team .rt-eyebrow--onDark { color: #fff; }
.rp-remote-team .rt-h2 {
  margin: 0 0 20px;
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  color: #021143;
}
.rp-remote-team .rt-h2--onDark { color: #fff; }
.rp-remote-team .rt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  line-height: 22px;
  padding: 15px 28px;
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.rp-remote-team .rt-btn--blue { background: #114EF7; color: #fff; }
.rp-remote-team .rt-btn--blue:hover { background: #0E45D6; color: #fff; }

/* ---- SECTION 1 — HERO --------------------------------------------------- */
/* Hero = same treatment as local-payroll: cor-style lavender gradient (15% stop) on white
   + 56px rounded bottom. 2026-07-12. */
.rp-remote-team .rt-hero {
  background-color: #fff;
  background-image: linear-gradient(rgba(228, 235, 254, 0), rgb(228, 235, 254) 15%, rgb(228, 235, 254));
  border-bottom-left-radius: 56px;
  border-bottom-right-radius: 56px;
  overflow: clip;
}
.rp-remote-team .rt-hero__inner {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-top: 64px;
  padding-bottom: 64px;
}
.rp-remote-team .rt-hero__text { flex: 1 0 560px; max-width: 591px; }
.rp-remote-team .rt-hero__visual { flex: 0 1 704px; min-width: 0; text-align: center; }
.rp-remote-team .rt-hero__visual img { display: block; width: 100%; max-width: 704px; height: auto; margin: 0 auto; }

.rp-remote-team .rt-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.rp-remote-team .rt-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #044D80;
  font-weight: 600;
  font-size: 12px;
  line-height: 20px;
  padding: 8px 12px;
  border-radius: 40px;
  box-shadow: 0 2px 8px rgba(2, 17, 67, .06);
}
.rp-remote-team .rt-pill strong { font-weight: 800; }
.rp-remote-team .rt-pill img { display: block; width: 20px; height: 20px; }

.rp-remote-team .rt-hero__title {
  margin: 0 0 16px;
  font-weight: 700;
  font-size: 47.2px;
  line-height: 56px;
  color: #021143;
}
.rp-remote-team .rt-hero__sub {
  margin: 0 0 40px;
  font-size: 20px;
  line-height: 28px;
  color: #3F3F3F;
}

/* ============================================================
   HERO = mirror local-payroll (2026-07-12). The LIVE remote-team hero is the shared
   component-product-hero (NOT the old .rt-hero fork above), so these rules mirror the
   local-payroll page-scoped hero CSS (figma-fixes-b.css) exactly: CoR lavender gradient
   on the wrapper + ::before, CoR row layout, #rp-typo H1 sizing/colours, hide blur overlay,
   responsive image. Both pages use the same component → identical hero.
   ============================================================ */
body.page-template-page-remote-team .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 !important;
  background-image: linear-gradient(rgba(228, 235, 254, 0), rgb(228, 235, 254) 120px, rgb(228, 235, 254)) !important;
  background-position: 0 0 !important; background-repeat: repeat !important; background-size: auto !important; background-attachment: scroll !important;
  padding-top: 40px; padding-bottom: 24px;
}
body.page-template-page-remote-team .hero_double_section.new_rp_hero_double_section.new_rp_hero_double_section_bg.new_rp_hero_double_section_bg_extra_layer::before {
  background-color: transparent !important;
  background-image: linear-gradient(rgba(228, 235, 254, 0), rgb(228, 235, 254) 120px, rgb(228, 235, 254)) !important;
}
body.page-template-page-remote-team .rp-remote-team .security-trust-double-section-hero-container,
body.page-template-page-remote-team .security-trust-double-section-hero-container { gap: 0px !important; }
body.page-template-page-remote-team .new_rp_hero_double_section_bg_extra_layer .double-section-hero-container-left { flex-basis: auto !important; flex-shrink: 1 !important; }
body.page-template-page-remote-team .double-section-hero-container-right.double-section-hero-container-right-extra-style.new-rp-double-section-hero-container-right-extra-style.double-section-hero-container-right-vertical { flex-basis: unset !important; flex-shrink: unset !important; }
body.page-template-page-remote-team .new_rp_hero_double_section_bg_blured { display: none !important; }
body.page-template-page-remote-team #rp-typo.double-slide-landing-page-left-main-header {
  font-size: 2.95rem !important; line-height: 56px !important; letter-spacing: 0 !important; color: #021143 !important;
}
body.page-template-page-remote-team .double-slide-landing-page-left-main-header .highlight-it-blue { color: #114EF7 !important; }
@media (min-width: 768px) and (max-width: 991px) {
  body.page-template-page-remote-team #rp-typo.double-slide-landing-page-left-main-header { font-size: 2.25rem !important; line-height: 53px !important; }
  body.page-template-page-remote-team .main-hero-section-img { width: 65% !important; margin-left: auto !important; margin-right: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; display: block !important; }
  /* App + Card section images: 65% centered on tablet. */
  .rp-remote-team .rt-app__visual img, .rp-remote-team .rt-card__visual img { width: 65% !important; margin: auto !important; }
}
@media (max-width: 767px) {
  body.page-template-page-remote-team #rp-typo.double-slide-landing-page-left-main-header { font-size: 32px !important; line-height: 40px !important; }
  body.page-template-page-remote-team .main-hero-section-img { width: 100% !important; }
  /* App + Card section images: full width on mobile. */
  .rp-remote-team .rt-app__visual img, .rp-remote-team .rt-card__visual img { width: 100% !important; }
}

/* Trusted brands = homepage khero-brands, embedded on the hero lavender (same as homepage/apis):
   hero goes flat-bottom, the brands band takes the lavender + 56px rounded bottom so hero + brands
   read as one block. 2026-07-12. */
body.page-template-page-remote-team .hero_double_section.new_rp_hero_double_section.new_rp_hero_double_section_bg.new_rp_hero_double_section_bg_extra_layer {
  border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding-bottom: 0 !important;
}
body.page-template-page-remote-team .rp-khero-brands {
  background-color: rgb(228, 235, 254);
  border-bottom-left-radius: 56px; border-bottom-right-radius: 56px;
  margin-top: 0; padding: 24px max(24px, calc(50% - 620px)) 48px;
}
body.page-template-page-remote-team .rp-khero-brands .new_landing_page_brands_header {
  text-align: center !important; font-size: 24px !important; line-height: 40px !important;
  font-weight: 700 !important; color: #021143 !important; margin: 0 0 20px !important; text-transform: none !important;
}
body.page-template-page-remote-team .rp-khero-brands .new_landing_page_brands_header .highlight-it-blue { color: #114EF7 !important; }
body.page-template-page-remote-team .rp-khero-brands .new-listed-brands-sub-section {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 16px 28px !important;
}
body.page-template-page-remote-team .rp-khero-brands .new-listed-brands-sub-section-img { height: 36px !important; width: auto !important; }
body.page-template-page-remote-team .rp-khero-brands .new-listed-brands-sub-section-img.blue-filter { filter: invert(85%) !important; opacity: 1 !important; }
@media (max-width: 991px) {
  body.page-template-page-remote-team .rp-khero-brands .new-listed-brands-sub-section { gap: 12px 20px !important; }
}

/* ---- SECTION 2 — BRANDS BAR (shared component, light-bg on this page) --- */
/* The shared bar ships a blue background; the Figma "Teams" frame shows it on
   the page's white/lavender field, so neutralise the blue band here only. */
.rp-remote-team .brands-bar-component.new_landing_page_brands_blue_bg { background: transparent; }
.rp-remote-team .brands-bar-component .new_landing_page_brands_header_white_color { color: #6B7280; }
.rp-remote-team .brands-bar-component .new_landing_page_brands_header_white_color .highlight-it-blue { color: #021143; }
/* recolour the white-filtered logos to a neutral grey for the light band */
.rp-remote-team .brands-bar-component .blue-filter { filter: none; opacity: .55; }

/* ---- SECTION 3 — MOBILE APP (white) ------------------------------------ */
.rp-remote-team .rt-app { background: #fff; }
/* Balanced 2-col grid matching the SMBs .rp-feature-split display (1fr/1fr, 56 gap,
   1136 centered, vertically centred). */
.rp-remote-team .rt-app__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 56px;
  max-width: 1136px;
  margin: 0 auto;
  padding: 80px 24px;
}
.rp-remote-team .rt-app__visual { min-width: 0; }
.rp-remote-team .rt-app__visual img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
.rp-remote-team .rt-app__text { width: 100%; }
.rp-remote-team .rt-checklist {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
}
.rp-remote-team .rt-checklist li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 16px;
  font-size: 17px;
  line-height: 26px;
  color: #16181D;
}
.rp-remote-team .rt-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 28px;
  height: 28px;
  background: no-repeat center / 28px 28px url("/wp-content/themes/rp/assets/images/check-gray.svg");
}
.rp-remote-team .rt-stores { display: flex; flex-wrap: wrap; gap: 16px; }
.rp-remote-team .rt-stores img { display: block; height: 48px; width: auto; }

/* ---- SECTION 4 — REMOTEPASS CARD (navy) -------------------------------- */
.rp-remote-team .rt-card { background: #021143; }
/* Balanced 2-col grid matching the SMBs .rp-feature-split display. */
.rp-remote-team .rt-card__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 56px;
  max-width: 1136px;
  margin: 0 auto;
  padding: 80px 24px;
}
.rp-remote-team .rt-card__text { width: 100%; }
.rp-remote-team .rt-card__body {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  color: #fff;
  max-width: 460px;
}
.rp-remote-team .rt-card__visual { min-width: 0; }
.rp-remote-team .rt-card__visual img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }

/* ---- SECTION 5 — THE SUPER APP (white) — 5-card carousel --------------- */
.rp-remote-team .rt-superapp { background: #fff; padding-top: 80px; padding-bottom: 96px; }
.rp-remote-team .rt-superapp__title { text-align: center; margin-bottom: 12px; }
.rp-remote-team .rt-superapp__sub {
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
  font-size: 18px;
  line-height: 28px;
  color: #3F3F3F;
}
.rp-remote-team .rt-superapp__track {
  display: flex;
  align-items: center;
  /* safe center = centre when the cards fit, fall back to start when they overflow
     (plain `center` + overflow clips the first cards and makes them unreachable). */
  justify-content: safe center;
  gap: 24px;
  max-width: 1340px;
  margin: 0 auto;
  /* vertical padding so the lifted/elevated active card + its shadow aren't cropped
     by the horizontal overflow. */
  padding: 44px 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.rp-remote-team .rt-superapp__track.is-grabbing { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.rp-remote-team .rt-superapp__track::-webkit-scrollbar { display: none; }
.rp-remote-team .rt-superapp__track { scrollbar-width: none; }
.rp-remote-team .rt-scard {
  flex: 0 0 240px;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  background: #fff;
  border: 1px solid #E6EAF3;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(2, 17, 67, .04);
}
.rp-remote-team .rt-scard__media {
  margin-bottom: 20px;
  border-radius: 12px;
  overflow: hidden;
}
.rp-remote-team .rt-scard__media img { display: block; width: 100%; height: auto; }
.rp-remote-team .rt-scard__title {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 20px;
  line-height: 26px;
  color: #021143;
}
.rp-remote-team .rt-scard__desc {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  color: #5A6072;
}
/* All Super-App cards share the SAME white design at rest; the navy look is HOVER-ONLY.
   The featured card no longer forces navy/lift — it matches the others by default. */
.rp-remote-team .rt-scard { transition: background .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease; }
.rp-remote-team .rt-scard--featured {
  flex: 0 0 240px;
  background: #fff;
  border-color: #E6EAF3;
  padding: 24px;
  transform: none;
  box-shadow: 0 8px 24px rgba(2, 17, 67, .04);
}
/* The featured card's --onDark text reads dark on the white card. Scoped to .rt-scard so
   the navy rt-card section's own --onDark eyebrow (white) is unaffected. */
.rp-remote-team .rt-scard .rt-eyebrow--onDark { color: rgba(15, 16, 53, 0.70); }
.rp-remote-team .rt-scard__title--onDark { color: #021143; }
.rp-remote-team .rt-scard__desc--onDark { color: #5A6072; }
/* Hover = navy card + light text (applies to ANY card). */
.rp-remote-team .rt-scard:hover {
  background: #021143;
  border-color: #021143;
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(2, 17, 67, .28);
}
.rp-remote-team .rt-scard:hover .rt-eyebrow,
.rp-remote-team .rt-scard:hover .rt-eyebrow--onDark { color: #7FA0FF; }
.rp-remote-team .rt-scard:hover .rt-scard__title,
.rp-remote-team .rt-scard:hover .rt-scard__title--onDark { color: #fff; }
.rp-remote-team .rt-scard:hover .rt-scard__desc,
.rp-remote-team .rt-scard:hover .rt-scard__desc--onDark { color: #C7D2F0; }

.rp-remote-team .rt-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}
.rp-remote-team .rt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D3D9E6;
}
.rp-remote-team .rt-dot.is-active { background: #114EF7; width: 24px; border-radius: 4px; }
/* Adil QA (2026-07-15): the super-app carousel is not scrollable at ≥992px (all cards fit), so the
   pagination dots are pure decoration on desktop — hide them there. Mobile/tablet keep them (grab-scroll). */
@media (min-width: 992px) { .rp-remote-team .rt-dots { display: none; } }

/* ---- RESPONSIVE -------------------------------------------------------- */
@media (max-width: 991px) {
  .rp-remote-team .rt-hero__inner { flex-direction: column; text-align: center; padding-top: 40px; padding-bottom: 40px; gap: 32px; }
  .rp-remote-team .rt-hero__text { flex: 0 1 auto; max-width: 100%; }
  .rp-remote-team .rt-pills { justify-content: center; }
  .rp-remote-team .rt-hero__title { font-size: 36px; line-height: 53px; }
  .rp-remote-team .rt-hero__sub { margin-bottom: 28px; }

  /* Card + Mobile-App: single-column stack (grid) with content aligned to start (left EN / right AR). */
  .rp-remote-team .rt-app__inner { grid-template-columns: 1fr; text-align: start; gap: 40px; padding-top: 56px; padding-bottom: 56px; }
  .rp-remote-team .rt-checklist { display: block; text-align: start; }
  .rp-remote-team .rt-stores { justify-content: flex-start; }

  .rp-remote-team .rt-card__inner { grid-template-columns: 1fr; text-align: start; gap: 40px; padding-top: 56px; padding-bottom: 56px; }
  .rp-remote-team .rt-card__body { max-width: none; }
  /* Tablet: full-width text blocks with 24px side padding. */
  .rp-remote-team .rt-app__text, .rp-remote-team .rt-card__text { padding: 0 24px; }
  .rp-remote-team .rt-card__visual img { margin: 0 auto; }

  .rp-remote-team .rt-h2 { font-size: 32px; line-height: 40px; }
  .rp-remote-team .rt-superapp__track { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .rp-remote-team .rt-hero__title { font-size: 32px; line-height: 40px; }
  .rp-remote-team .rt-hero__sub { font-size: 18px; }
  .rp-remote-team .rt-btn { width: 100%; }
  .rp-remote-team .rt-scard { flex-basis: 82vw; }
  .rp-remote-team .rt-scard--featured { flex-basis: 82vw; transform: none; }
  /* Mobile: tighter 16px side padding. */
  .rp-remote-team .rt-app__text, .rp-remote-team .rt-card__text { padding: 0 16px; }
}