/* ==========================================================================
   Org Charts — Hero (rp-org-charts-hero, synced block 7588 EN / 7593 AR).
   MIRRORS local-payroll hero (measured live 2026-07-13): CoR lavender top-fade
   gradient on white + 48px rounded bottom; container 1300 + 24px padding →
   content 1252, columns 626 text / 610 image, space-between (gap 0); H1
   Mulish 700 47.2/56 (36/53 tablet, 32/40 mobile) navy #021143, ls 0; sub 20/28
   #545454; single blue CTA style (height 57, r8) + ghost variant kept. Trusted
   brands = homepage component-khero-brands embedded on the hero lavender (same as
   time-off / apis / remote-team). Structural scaffold by CC; Cowork owns fidelity.
   ========================================================================== */
.rp-org-charts-hero {
  background-color: #fff;
  background-image: linear-gradient(rgba(228, 235, 254, 0), rgb(228, 235, 254) 120px, rgb(228, 235, 254));
  border-bottom-left-radius: 48px;
  border-bottom-right-radius: 48px;
  overflow: clip;
}
.rp-org-charts-hero__inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 40px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
}
.rp-org-charts-hero__text { flex: 1 1 auto; max-width: 626px; min-width: 0; }
.rp-org-charts-hero__media { flex: 0 0 610px; min-width: 0; }
.rp-org-charts-hero__img { display: block; width: 100%; height: auto; aspect-ratio: auto; }

.rp-org-charts-hero__title {
  font-weight: 700;
  font-size: 2.95rem;
  line-height: 56px;
  letter-spacing: 0;
  color: #021143;
  margin: 0 0 16px;
}
/* Title→sub gap = 16px like time-off (migration zeroes the heading margin at higher
   specificity, so re-assert scoped with .rp-org-charts). 2026-07-13. */
.rp-org-charts .rp-org-charts-hero__title { margin-bottom: 16px !important; }

/* Scoped with .rp-org-charts (0,2,0) to beat migration's `.rp-org-charts p{margin-bottom:0}`
   (0,1,1) — the sub is a <p>. Sub→CTA spacing mirrors LP: 16px sub margin + 11px CTA offset
   ≈ LP's ~27px gap between subtitle and button. */
.rp-org-charts .rp-org-charts-hero__sub {
  font-size: 20px;
  line-height: 28px;
  color: #545454;
  max-width: 640px;
  margin: 0 0 27px; /* = LP's sub→button visual gap (LP sub mb 16 + 11px structural). Single
                       margin here (not sub-mb + ctas-mt) because adjacent vertical margins
                       collapse to the max, so a split 16+11 only yielded 16. */
}

.rp-org-charts-hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; }
.rp-org-charts-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 57px;
  background: #114EF7;
  color: #fff;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  padding: 0 32px;
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.rp-org-charts-hero__cta:hover { background: #0E45D6; color: #fff; }
.rp-org-charts-hero__cta--ghost {
  background: #fff;
  color: #114EF7;
  border: 1px solid #D6E0FB;
}
.rp-org-charts-hero__cta--ghost:hover { background: #F0F4FE; color: #114EF7; }

/* Tablet: image 65% centred (LP). */
@media (min-width: 768px) and (max-width: 991px) {
  .rp-org-charts-hero__img { width: 65%; margin-left: auto; margin-right: auto; }
}
@media (max-width: 991px) {
  /* Stack, columns full-width, content start-aligned (left EN / right AR) — same as LP.
     align-items:stretch so the text block spans full width and sits at the gutter (not centred). */
  .rp-org-charts-hero__inner { flex-direction: column; align-items: stretch; text-align: start; padding: 40px 24px; gap: 36px; }
  .rp-org-charts-hero__text { flex: 0 1 auto; max-width: 100%; width: 100%; }
  .rp-org-charts-hero__media { flex: 0 1 auto; }
  .rp-org-charts-hero__ctas { justify-content: flex-start; }
  .rp-org-charts-hero__title { font-size: 36px; line-height: 53px; }
}
@media (max-width: 767px) {
  .rp-org-charts-hero__title { font-size: 32px; line-height: 40px; letter-spacing: 0; }
  .rp-org-charts-hero__img { width: 100%; }
  .rp-org-charts-hero__cta { width: 100%; }
}

/* Trusted brands = homepage khero-brands, embedded on the hero lavender (same as
   time-off / apis / remote-team): hero goes flat-bottom, the brands band takes the
   lavender + 48px rounded bottom. 2026-07-13. */
body.page-template-page-org-charts .rp-org-charts-hero { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
body.page-template-page-org-charts .rp-khero-brands {
  background-color: rgb(228, 235, 254);
  border-bottom-left-radius: 48px;
  border-bottom-right-radius: 48px;
  margin-top: 0;
  padding: 24px max(24px, calc(50% - 620px)) 48px;
}
body.page-template-page-org-charts .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-org-charts .rp-khero-brands .new_landing_page_brands_header .highlight-it-blue { color: #114EF7 !important; }
body.page-template-page-org-charts .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-org-charts .rp-khero-brands .new-listed-brands-sub-section-img { height: 36px !important; width: auto !important; opacity: 1 !important; }
body.page-template-page-org-charts .rp-khero-brands .new-listed-brands-sub-section-img.blue-filter { filter: invert(85%) !important; }
@media (max-width: 991px) {
  body.page-template-page-org-charts .rp-khero-brands .new-listed-brands-sub-section { gap: 12px 20px !important; }
}

/* ==========================================================================
   Section headers + feature "shuffle" — SAME treatment as /time-off-policies
   (signed off there 2026-07-13). Scoped to /org-charts.
   ========================================================================== */
/* Shared section header = LP's header: navy #021143, max-width 720, 12px bottom, centred;
   sub 16/24 max-width 640 centred; feature-row titles navy. */
body.page-template-page-org-charts .new-rp-section-header {
  color: #021143 !important; max-width: 720px !important;
  margin-left: auto !important; margin-right: auto !important; margin-bottom: 12px !important;
}
body.page-template-page-org-charts .comparison-hero-subtitle {
  font-size: 16px !important; line-height: 24px !important; max-width: 640px !important;
  margin-left: auto !important; margin-right: auto !important;
}
body.page-template-page-org-charts .double-slide-landing-page-left-main-header-dim-gray,
body.page-template-page-org-charts .double-slide-landing-page-left-main-header { color: #021143 !important; }
/* Section header width — 80% tablet, 100% mobile (centred). */
@media (min-width: 768px) and (max-width: 991px) {
  body.page-template-page-org-charts .new-rp-section-header { width: 80% !important; }
}
@media (max-width: 767px) {
  body.page-template-page-org-charts .new-rp-section-header { width: 100% !important; }
}
/* Tablet + mobile: section header 28/36; feature-row titles 26/32.5 (out-specify the
   product-slide component's own responsive rule); header wrapper margin-bottom 16. */
@media (max-width: 991px) {
  body.page-template-page-org-charts .new-rp-section-header { font-size: 28px !important; line-height: 36px !important; }
  html body.page-template-page-org-charts .double-slide-lleft-container .double-slide-landing-page-left-main-header-dim-gray,
  html body.page-template-page-org-charts .double-slide-lleft-container .double-slide-landing-page-left-main-header { font-size: 26px !important; line-height: 32.5px !important; }
  .rp-org-charts .main-header-center { margin-bottom: 16px !important; }
}

/* Feature-section background shuffle (Mohamed 2026-07-13): START white, then alternate white /
   #fafbff. Across the 5 bands: white, #fafbff, white, #fafbff, white. Mapping: gray_bg bands →
   #fafbff; every other revert band → white. Both locales. */
.rp-org-charts .hero_double_section_gray_bg { background-color: #fafbff !important; }
.rp-org-charts .hero_double_section_revert:not(.hero_double_section_gray_bg) { background-color: #fff !important; }
/* The gray bands carry a base background-IMAGE gradient that paints over the color above —
   override it with a solid #FAFBFF gradient so the band is a flat #fafbff. */
.rp-org-charts .main-section-holder .hero_double_section_2.hero_double_section_revert.hero_double_section_gray_bg {
  background-image: linear-gradient(#FAFBFF, #FAFBFF) !important;
}

/* Feature image/text side must ALTERNATE (no two successive bands the same). The base pattern
   left bands 1–4 all row-reverse (image same side). Tie the layout to the shuffle class so it
   alternates: non-gray bands → row (image right in LTR), gray bands → row-reverse (image left)
   → R,L,R,L,R. Auto-mirrors in RTL (still alternating). Desktop only so ≤991 column-stack holds. */
@media (min-width: 992px) {
  .rp-org-charts .hero_double_section_revert:not(.hero_double_section_gray_bg) .double-section-hero-container { flex-direction: row !important; }
  .rp-org-charts .hero_double_section_gray_bg .double-section-hero-container { flex-direction: row-reverse !important; }
}

/* Uniform feature side padding tablet 24 / mobile 16 (both locales) — same as time-off. */
@media (max-width: 991px) {
  .rp-org-charts .main-section-holder .hero_double_section,
  .rp-org-charts .main-section-holder .hero_double_section_2 { padding-left: 24px !important; padding-right: 24px !important; }
}
@media (max-width: 767px) {
  /* Uniform padding on mobile — the base gives the plain rows padding-top:0, making the gaps
     between bands alternate 112/56 (uneven). Force 56px top+bottom (matching desktop/tablet)
     so every shuffled band shares the same spacing. */
  .rp-org-charts .main-section-holder .hero_double_section,
  .rp-org-charts .main-section-holder .hero_double_section_2 { padding: 56px 16px !important; }
}

/* Desktop feature images = 85% on BOTH locales (EN base is 85%; AR base gives some rows a
   fixed max-width:839px → renders wider (546 vs 519). Cap to 85% so AR mirrors EN. 2026-07-13. */
@media (min-width: 992px) {
  /* Pin the desktop feature image to a single width on BOTH locales. EN effectively renders
     75% (458px) while AR rendered 85% (518px) — same imgwrap + max-width, different flex result.
     Clamp to 75% so EN (unchanged) and AR are identical. 2026-07-13. */
  .rp-org-charts .main-section-holder .double-section-img.double-section-img-side-by-side-img { max-width: 75% !important; min-width: 75% !important; }
  /* Desktop side padding 24px on both locales — EN base gives 24, AR base gives 0 (content
     flush to the edge). Force 24 so AR matches EN. 2026-07-13. */
  .rp-org-charts .main-section-holder .hero_double_section,
  .rp-org-charts .main-section-holder .hero_double_section_2 { padding-left: 24px !important; padding-right: 24px !important; }
}

/* Feature "side-by-side" images (rev + non-rev): 65% centred on tablet, 100% on mobile
   (Mohamed 2026-07-13). The -rev variant needs the extra class to beat the base -rev rule. */
@media (min-width: 768px) and (max-width: 991px) {
  .rp-org-charts .main-section-holder .double-section-img.double-section-img-side-by-side-img,
  .rp-org-charts .main-section-holder .double-section-img.double-section-img-side-by-side-img.double-section-img-side-by-side-img-rev {
    min-width: 65% !important; max-width: 65% !important; margin: auto !important;
  }
}
@media (max-width: 767px) {
  .rp-org-charts .main-section-holder .double-section-img.double-section-img-side-by-side-img,
  .rp-org-charts .main-section-holder .double-section-img.double-section-img-side-by-side-img.double-section-img-side-by-side-img-rev {
    min-width: 100% !important; max-width: 100% !important;
  }
}

/* Button wrapper top margin on desktop (Mohamed 2026-07-13). */
@media (min-width: 992px) {
  .rp-org-charts .new-btn-wrapper-container-mt { margin-top: 32px !important; }
}
/* Links in these containers shouldn't inherit the parent text colour (Mohamed 2026-07-13) —
   drop the base `color: inherit`. Exclude buttons (also <a>) so their own colours are kept. */
.rp-org-charts .banner-container a:not([class*="btn"]):not(.w-button),
.rp-org-charts .hero_double_section a:not([class*="btn"]):not(.w-button),
.rp-org-charts .new-rp-section a:not([class*="btn"]):not(.w-button) { color: revert; }

/* Feature CTA label centring (same as time-off): the buttons render inline-flex with
   justify-content:normal, so in RTL the label sits at the start (right). Force centre. */
.rp-org-charts .btn-2,
.rp-org-charts a.w-button { justify-content: center !important; text-align: center !important; }

/* "Book A Demo" request-demo button label = white (Mohamed 2026-07-13). */
.rp-org-charts .btn.mb-grow.landing-page-request-demo { color: #fff !important; }

/* Stats grid vertical margin (Mohamed 2026-07-13). */
.rp-org-charts .grid-2-cols.grid-2-cols-no-gap { margin: 48px 0 !important; }

/* Feature CTA hover (Mohamed 2026-07-13): solid blue fill, darker-blue border, white text.
   Scoped .rp-org-charts + :hover (0,4,0) + !important to beat the global .btn-2.btn-gray:hover. */
.rp-org-charts .btn-2.btn-gray:hover {
  background-color: #114ef7 !important;
  border-color: #0d3cb8 !important;
  color: #fff !important;
}

/* Video facade in the vertical-border slider section: 40px top gap below the section header
   (mirrors time-off's slider-section spacing). Descendant selector — the facade sits inside
   SECTION.rp-container, not a direct child of the slider section. 2026-07-13. */
.rp-org-charts .new-rp-section-vertical-border-slider-section .rp-yt-facade { margin-top: 40px !important; }