/* AUTO-GENERATED from qa-fixes-pages.css via rtlcss. Do not edit by hand.
   Loaded only on AR pages by inc/i18n-setup.php.
*/
/* ==========================================================================
   RemotePass QA Fixes - Page-Specific CSS
   CSS-only fixes for design issues identified in QA review.
   Pages: HOME, CONTRACTORS, EOR, COR, LOCAL PAYROLL, SPEND, BLOG,
   FINANCE MANAGERS, HR MANAGERS, and lighter fixes for remaining pages.
   ========================================================================== */

/* ==========================================================================
   HOME PAGE
   ========================================================================== */

/* HOME: Solution Cards (Item 1) - Hover state: header responsive colors */
@media (max-width: 991px) {
  
  .rp-home .intname {
    font-size: 1.125rem;
    font-weight: 600;
  }
}

@media (max-width: 479px) {
  
  .rp-home .intname {
    font-size: 1rem;
    font-weight: 600;
  }
}

/* Announcement banner: button fit content, vertical spacing, capitalize subtext */
.rp-home .announcement-banner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.rp-home .announcement-banner .banner-btn {
  width: fit-content;
  align-self: flex-start;
}

.rp-home .announcement-banner .tag {
  text-transform: capitalize;
}

.rp-home .announcement-banner .subcontent {
  text-transform: capitalize;
}

/* Section Light and Gray: shuffle image/content display (alternating sides) */
.rp-home .section-light .content-wrapper {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.rp-home .section-light .content-wrapper:nth-child(even) {
  flex-direction: row-reverse;
}

.rp-home .section-gray .content-wrapper {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.rp-home .section-gray .content-wrapper:nth-child(even) {
  flex-direction: row-reverse;
}

/* HOME: Vertical Cards (Item 2) - Go Global section layout */
.rp-home .vertical-cards-container {
  text-align: center;
  padding: 1.5rem;
}

.rp-home .vertical-cards-container-img {
  margin-bottom: 1rem;
}

.rp-home .vertical-card-content-header {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 1rem;
}

@media (max-width: 991px) {
  .rp-home .vertical-card-content-header {
    font-size: 1.125rem;
  }
}

@media (max-width: 479px) {
  .rp-home .vertical-card-content-header {
    font-size: 1rem;
  }
}

/* HOME: All-In-One Solution section (Item 3) - Hero layout fix */
/* Support/Privacy sections responsive */
@media (max-width: 991px) {
  .rp-home .support-section,
  .rp-home .privacy-section {
    display: flex;
    flex-direction: column;
  }

  .rp-home .support-section .header,
  .rp-home .privacy-section .header {
    font-size: 1.5rem;
  }
}

/* ==========================================================================
   CONTRACTORS PAGE
   ========================================================================== */

/* Mosaic card display: fix header and image alignment */
.rp-contractors .grid-mosaic-item {
  display: flex;
  flex-direction: column;
}

.rp-contractors .grid-mosaic-item .flex-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Video player section: header same style as centered header */
/* Dark blue section: fix header color, cards design */
.rp-contractors .dark-blue-section {
  background-color: #15113b;
  color: #ffffff;
  padding: 3rem 1.5rem;
}

.rp-contractors .dark-blue-section .card {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 1.5rem;
  border-radius: 0.5rem;
}

.rp-contractors .dark-blue-section .card:hover {
  background-color: rgba(17, 78, 247, 0.1);
  border-color: #114ef7;
}

/* Dark blue section: card padding responsive */
@media (max-width: 991px) {
  .rp-contractors .dark-blue-section .card {
    padding: 1.5rem;
  }
}

@media (max-width: 640px) {
  .rp-contractors .dark-blue-section .card {
    padding: 1rem;
  }
}

/* G2 Dark slider: use same component as home page */
.rp-contractors .g2-dark-slider {
  background-color: #15113b;
  color: #ffffff;
  padding: 2rem;
}

/* ==========================================================================
   EOR PAGE
   ========================================================================== */

/* Hero CTA: blue instead of green */
/* Global Talent Pool section: redesign (requires HTML template work) */
/* NOTE: HTML TEMPLATE NEEDED - "Global Talent Pool" section needs structural redesign
   to match production design. This is a component-level redesign, not just CSS. */

/* FAQ: full width, left-aligned */
.rp-eor .faq-section {
  width: 100%;
  max-width: 100%;
}

.rp-eor .faq-item {
  text-align: right;
}

/* Shuffled section: same component, adjust header, second button centered with blue bg */
.rp-eor .shuffled-section .section-header {
  text-align: center;
}

/* ==========================================================================
   COR PAGE
   ========================================================================== */

/* Hero: same as contractors style (5/7 layout with dark blue header) */
/* Video: same as contractors */
/* Global Hiring Section: light blue bg with border, radius, same CTA design */
.rp-cor .global-hiring-section {
  background-color: #f0f7ff;
  border: 1px solid #c3d9ff;
  border-radius: 0.75rem;
  padding: 2rem;
}

/* Mosaic: same issues as contractors */
.rp-cor .grid-mosaic-item {
  display: flex;
  flex-direction: column;
}

.rp-cor .grid-mosaic-item .flex-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ==========================================================================
   LOCAL PAYROLL PAGE
   ========================================================================== */

/* LOCAL PAYROLL: Feature slider (Item 1) - Card layout and spacing */
.rp-local-payroll .swiper {
  position: relative;
}

.rp-local-payroll .int-item-img-left {
  align-self: flex-start;
  margin-bottom: 0.5rem;
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

.rp-local-payroll .intname {
  font-weight: 700;
  font-size: 1.125rem;
}

.rp-local-payroll .int-type {
  font-weight: 500;
  line-height: 1.5;
  color: #4a5568;
}

/* LOCAL PAYROLL: Centred section (Item 2) - Header styling */
.rp-local-payroll .new_landing_page_payroll_header {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
}

/* LOCAL PAYROLL: G2 Dark slider (Item 3) - Dark background styling */
.rp-local-payroll .g2-dark-slider {
  background-color: #15113b;
  color: #ffffff;
  padding: 2rem;
  border-radius: 0.75rem;
}

/* LOCAL PAYROLL: Pricing cards (Item 4) - Header/sub-header font, title uppercase, price bolder */
.rp-local-payroll .pricing-card {
  border-top: none;
  padding: 1.5rem;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.rp-local-payroll .pricing-card .price {
  font-weight: 700;
  font-size: 2.5rem;
  color: #114ef7;
  margin-bottom: 1rem;
}

.rp-local-payroll .pricing-card .price-label {
  font-size: 0.875rem;
  color: #6b7280;
}

/* LOCAL PAYROLL: Analytics section (Item 5) - Font size adjustments */
.rp-local-payroll .analytics-section {
  font-size: 0.95rem;
}

@media (max-width: 991px) {
  .rp-local-payroll .intname {
    font-size: 1rem;
  }

  .rp-local-payroll .new_landing_page_payroll_header {
    font-size: 1.75rem;
  }

  .rp-local-payroll .pricing-card .price {
    font-size: 2rem;
  }
}

@media (max-width: 479px) {
  .rp-local-payroll .intname {
    font-size: 0.9375rem;
  }

  .rp-local-payroll .new_landing_page_payroll_header {
    font-size: 1.5rem;
  }

  .rp-local-payroll .pricing-card {
    padding: 1.25rem;
    min-height: 260px;
  }

  .rp-local-payroll .pricing-card .price {
    font-size: 1.75rem;
  }

  }

/* ==========================================================================
   SPEND PAGE
   ========================================================================== */

/* SPEND: Hero headers (2026-04-14 correction)
   Live reference: hero title is dark (rgb(24,24,27)) on a light background,
   label is dim gray (rgb(84,84,84)). The prior patch forced white, which was
   illegible on the light hero. Let the existing .double-slide-landing-page-*-dark-blue
   variant class and .double-slide-landing-page-left-label-dim-gray take effect.
   We still left-align to match the intended layout. */
/* SPEND: Trusted brands logos (2026-04-14 correction)
   migration.css line ~14346 forces height:28px; width:auto which collapses
   SVG width to 0 for SVGs without intrinsic aspect ratio. Match live sizing:
   use max-width percentage and natural auto height. */
/* SPEND: Blue "Centered section with header" (row 62) (2026-04-14)
   Live: h2 + p are white on the rgb(17,78,247) / rgb(2,17,67) blue sections.
   Local was inheriting dark h2 color. Force white on bg-blue containers.
   Uses !important to override the 5-class Webflow .new-rp-section-header rule. */

.rp-spend [class*="bg-blue"] .new-rp-section-header {
  color: #ffffff !important;
}

.rp-spend .bg-blue p:not(.int-type):not(.intname),
.rp-spend .bg-light-blue p:not(.int-type):not(.intname) {
  color: rgba(255, 255, 255, 0.85);
}

/* SPEND: bg-light-blue should render vibrant blue matching live (rgb 17,78,247)
   Local migration.css has no matching .bg-light-blue rule for the
   .adjust-radius-padding variant so it inherits a pale gradient elsewhere. */
.rp-spend .rp-container.bg-blue.adjust-radius-padding.bg-light-blue {
  background-color: #114ef7;
  background-image: none;
}

/* SPEND: Card grid sections - Fixed heights and styling */

.rp-spend .card {
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.rp-spend .intname {
  font-weight: 700;
  font-size: 1.125rem;
}

.rp-spend .int-type {
  font-weight: 500;
  line-height: 1.5;
}

.rp-spend .int-item-img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

/* SPEND: Centered section left header: white text, left-aligned, image fit */
.rp-spend .centered-section-left {
  text-align: right;
}


.rp-spend .centered-section-left p {
  color: #ffffff;
}

.rp-spend .centered-section-left .section-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

@media (max-width: 991px) {
  
  .rp-spend .card {
    min-height: 200px;
  }

  .rp-spend .intname {
    font-size: 1rem;
  }
}

@media (max-width: 479px) {
  
  .rp-spend .card {
    min-height: 180px;
  }

  .rp-spend .intname {
    font-size: 0.9375rem;
  }

  .rp-spend .int-item-img {
    width: 2rem;
    height: 2rem;
  }
}

/* Step design fix: progress on top of step icons */
.rp-spend .vertical-links-with-image {
  position: relative;
}

.rp-spend .vertical-links-with-image-linker {
  position: absolute;
  top: 0;
  right: 50%;
  width: 2px;
  height: calc(100% - 2rem);
  background-color: #114ef7;
  transform: translateX(50%);
  z-index: 0;
}

.rp-spend .vertical-links-with-image-img {
  position: relative;
  z-index: 1;
}

/* Card sections: fix height, full width content, bold text, icon size */
.rp-spend .card-section .card {
  height: auto;
}

.rp-spend .card-section .card-content {
  width: 100%;
}

.rp-spend .card-section .card-text {
  font-weight: 600;
}

.rp-spend .card-section .card-icon {
  width: 2.5rem;
  height: 2.5rem;
}

/* Blue section: header/subheader white, cards light blue bg, card text white */
.rp-spend .blue-section {
  background-color: #114ef7;
}


.rp-spend .blue-section p {
  color: #ffffff;
}

.rp-spend .blue-section .card {
  background-color: #f0f7ff;
  color: #15113b;
}

.rp-spend .blue-section .card-content {
  color: #ffffff;
}

.rp-spend .blue-section .card-img {
  text-align: center;
}

/* Image+text sections: image left/text right desktop, text top/image bottom tablet/mobile */
@media (min-width: 992px) {
  .rp-spend .image-text-section {
    display: flex;
    align-items: center;
    gap: 2rem;
  }

  .rp-spend .image-text-section .img-wrapper {
    order: -1;
    flex: 0 0 40%;
  }

  .rp-spend .image-text-section .text-wrapper {
    flex: 1;
  }
}

@media (max-width: 991px) {
  .rp-spend .image-text-section {
    display: flex;
    flex-direction: column;
  }

  .rp-spend .image-text-section .img-wrapper {
    order: 1;
  }

  .rp-spend .image-text-section .text-wrapper {
    order: 0;
  }
}

/* ==========================================================================
   ONBOARDING PAGE
   ========================================================================== */

/* ONBOARDING: Content width and nav alignment */
.rp-onboarding .glossary-collection-list-container {
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
}

/* Nav pills spacing: same width constraint as content, proper spacing */
.rp-onboarding .nav-pills-sub-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* Video container spacing and layout */
.rp-onboarding .video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin-bottom: 1.5rem;
  background-color: #f0f0f0;
  border-radius: 0.5rem;
}

.rp-onboarding .video-container iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/* Video cards grid: 2 column on desktop, 1 on mobile */
.rp-onboarding .collection-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (max-width: 991px) {
  .rp-onboarding .collection-list {
    grid-template-columns: 1fr;
  }

  .rp-onboarding .nav-pills-sub-container {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1rem;
  }
}

@media (max-width: 640px) {
  .rp-onboarding .collection-list {
    gap: 1rem;
  }

  .rp-onboarding .nav-pills-sub-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Section spacing and borders */
.rp-onboarding .grid_step {
  padding-bottom: 2.5rem;
  border-bottom: 1px solid #e0e0e0;
}

.rp-onboarding .grid_step:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.rp-onboarding .block_info {
  margin-bottom: 2rem;
}

/* Integration items grid */
.rp-onboarding .intergrations-container {
  margin-top: 1.5rem;
}

.rp-onboarding .integration_collection_list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
}

@media (max-width: 640px) {
  .rp-onboarding .integration_collection_list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   BLOG PAGE
   ========================================================================== */

/* Nav bar: same as prod with filters */
/* NOTE: HTML TEMPLATE NEEDED - Blog nav bar needs filters implementation
   to match production design. This requires JS/HTML changes, not just CSS. */

/* Hero: 3 post slider, post images hidden on slider for tablet/mobile */
@media (max-width: 991px) {
  .rp-blog .hero-slider .post-image {
    display: none;
  }
}

/* Listing: post images hidden, header max-width 900px, responsive grid */
.rp-blog .blog-listing .post-image {
  display: none;
}

.rp-blog .blog-listing .post-grid {
  display: grid;
  gap: 2rem;
}

/* Blog listing heading constraint */
.rp-blog .heading-75 {
  max-width: 900px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 992px) {
  .rp-blog .blog-listing .post-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .rp-blog .blog-listing .post-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .rp-blog .blog-listing .post-grid {
    grid-template-columns: 1fr;
  }
}

/* Ebook/Topic/Popular Articles sections: MISSING */
/* NOTE: HTML TEMPLATE NEEDED - "Ebook Listings", "Topic Listings", and
   "Popular Articles" sections are missing entirely from the blog template.
   These need to be implemented as new sections. */

/* Blue banner: REMOVE */
.rp-blog .blue-banner {
  display: none !important;
}

/* Blog details: MISSING OR NEEDS REDESIGN */
/* NOTE: HTML TEMPLATE NEEDED - Blog details page needs complete redesign
   to match production. This is a structural change beyond CSS. */

/* ==========================================================================
   FINANCE MANAGERS PAGE
   ========================================================================== */

/* Case studies slider: MISSING */
/* NOTE: HTML TEMPLATE NEEDED - "Case Studies Slider" section is missing
   from the finance managers template. Needs implementation. */

/* Case studies 3 grid listing: MISSING */
/* NOTE: HTML TEMPLATE NEEDED - "Case Studies Grid" (3 columns) section is missing.
   Needs implementation. */

/* Ebook 3 grid listing: MISSING */
/* NOTE: HTML TEMPLATE NEEDED - "Ebook Grid" (3 columns) section is missing.
   Needs implementation. */

/* Footer without review: MISSING */
/* NOTE: HTML TEMPLATE NEEDED - Custom footer section (without review text)
   is missing from finance managers page. Needs implementation. */

/* Fixed banner with CTAs: MISSING */
/* NOTE: HTML TEMPLATE NEEDED - Fixed/sticky banner with CTAs at bottom
   is missing from finance managers page. Needs implementation. */

/* ==========================================================================
   HR MANAGERS PAGE
   ========================================================================== */

/* Case studies slider: MISSING */
/* NOTE: HTML TEMPLATE NEEDED - "Case Studies Slider" section is missing
   from the HR managers template. Needs implementation. */

/* Case studies 3 grid listing: MISSING */
/* NOTE: HTML TEMPLATE NEEDED - "Case Studies Grid" (3 columns) section is missing.
   Needs implementation. */

/* Ebook 3 grid listing: MISSING */
/* NOTE: HTML TEMPLATE NEEDED - "Ebook Grid" (3 columns) section is missing.
   Needs implementation. */

/* Footer without review: MISSING */
/* NOTE: HTML TEMPLATE NEEDED - Custom footer section (without review text)
   is missing from HR managers page. Needs implementation. */

/* Fixed banner with CTAs: MISSING */
/* NOTE: HTML TEMPLATE NEEDED - Fixed/sticky banner with CTAs at bottom
   is missing from HR managers page. Needs implementation. */

/* ==========================================================================
   REMAINING PAGES - LIGHTER CSS FIXES
   ========================================================================== */

/* RELOCATION PAGE */
.rp-relocation .centred-section {
  text-align: center;
}

@media (max-width: 991px) {
  .rp-relocation .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .rp-relocation .card-grid {
    grid-template-columns: 1fr;
  }

  .rp-relocation .step-arrows {
    flex-direction: column;
  }
}

/* ==========================================================================
   REMOTE-TEAM PAGE
   ========================================================================== */

/* REMOTE-TEAM: All in one app section (Item 1) - Spacing between image/content */
.rp-remote-team .all-in-one-app-section {
  gap: 2.5rem;
  align-items: center;
}

.rp-remote-team .all-in-one-app-section .hw-box {
  width: 100%;
}

.rp-remote-team .all-in-one-app-section .hw-img-wrap {
  flex-shrink: 0;
}

/* REMOTE-TEAM: Custom Shuffled section (Item 2) - Spacing and header size */
.rp-remote-team .custom-shuffled-section {
  gap: 2.5rem;
  align-items: center;
}

.rp-remote-team .custom-shuffled-section .rp-h3 {
  font-size: 1.5rem;
  font-weight: 700;
}

@media (max-width: 991px) {
  .rp-remote-team .all-in-one-app-section,
  .rp-remote-team .custom-shuffled-section {
    flex-direction: column;
    gap: 1.5rem;
  }

  
  .rp-remote-team .custom-shuffled-section .rp-h3 {
    font-size: 1.25rem;
  }
}

@media (max-width: 479px) {
  .rp-remote-team .all-in-one-app-section,
  .rp-remote-team .custom-shuffled-section {
    gap: 1.25rem;
  }

  
  .rp-remote-team .custom-shuffled-section .rp-h3 {
    font-size: 1.125rem;
  }
}

/* Referral typeform: MISSING */
/* NOTE: HTML TEMPLATE NEEDED - Referral typeform section is missing
   from remote-team page. Needs implementation. */

/* INTEGRATIONS PAGE */
@media (min-width: 992px) {
  .rp-integrations .filter-cards-wrapper {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
  }

  .rp-integrations .filter-wrapper {
    flex: 0 0 auto;
  }

  .rp-integrations .cards-wrapper {
    flex: 1;
  }
}

@media (max-width: 991px) {
  .rp-integrations .filter-wrapper {
    position: fixed;
    top: 2rem;
    right: 1rem;
    z-index: 10;
  }

  .rp-integrations .cards-wrapper {
    width: 100%;
  }
}

/* PRICING PAGE */
/* Hero completely different from prod: MISSING */
/* NOTE: HTML TEMPLATE NEEDED - Pricing hero needs complete redesign
   to match production. Structural change required. */

/* Pricing details section: MISSING */
/* NOTE: HTML TEMPLATE NEEDED - "Pricing Details" section is missing.
   Needs implementation. */

/* ==========================================================================
   COUNTRY GUIDE PAGE
   ========================================================================== */

/* COUNTRY-GUIDE: Light blue banner (Item 1) - Header/subheader/CTA styling */
.rp-country-guide .light-blue-banner {
  background-color: #f0f7ff;
  padding: 2rem 1.5rem;
  border-radius: 0.75rem;
}

.rp-country-guide .light-blue-banner p {
  font-size: 0.95rem;
  color: #4a5568;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.rp-country-guide .light-blue-banner .banner-cta {
  color: #114ef7;
  font-weight: 600;
  text-decoration: none;
}

.rp-country-guide .light-blue-banner .banner-icon {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
  margin-left: 0.5rem;
}

@media (max-width: 991px) {
  .rp-country-guide .light-blue-banner {
    padding: 1.5rem 1.25rem;
  }

  }

@media (max-width: 479px) {
  .rp-country-guide .light-blue-banner {
    padding: 1.25rem 1rem;
  }

  .rp-country-guide .light-blue-banner p {
    font-size: 0.875rem;
  }
}

/* ==========================================================================
   HIRING-GUIDE PAGE
   ========================================================================== */

/* HIRING-GUIDE: Guide listing (Item 1) - Card alignment and header styling */
.rp-hiring-guide .rp-hirigin-guide-item {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.rp-hiring-guide .hiring-guide-new-rp-h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #15113b;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.rp-hiring-guide .hiring-guide-new-rp-p {
  font-size: 0.95rem;
  color: #6b7280;
  line-height: 1.6;
}

.rp-hiring-guide .hiring-guide-new-rp-p-margin-top {
  margin-top: 0.5rem;
}

.rp-hiring-guide .thumb-wrap {
  height: 200px;
  background-size: cover;
  background-position: center;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

.rp-hiring-guide .hiring-guide-ltr-2grids {
  display: grid;
  gap: 1.5rem;
  padding: 0 1rem;
}

@media (min-width: 992px) {
  .rp-hiring-guide .hiring-guide-ltr-2grids {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .rp-hiring-guide .hiring-guide-ltr-2grids {
    grid-template-columns: 1fr;
  }

  .rp-hiring-guide .hiring-guide-new-rp-h3 {
    font-size: 1.125rem;
  }

  .rp-hiring-guide .thumb-wrap {
    height: 180px;
  }
}

@media (max-width: 479px) {
  .rp-hiring-guide .hiring-guide-ltr-2grids {
    padding: 0;
  }

  .rp-hiring-guide .hiring-guide-new-rp-h3 {
    font-size: 1rem;
  }

  .rp-hiring-guide .hiring-guide-new-rp-p {
    font-size: 0.875rem;
  }

  .rp-hiring-guide .thumb-wrap {
    height: 160px;
  }
}

/* ==========================================================================
   CASE STUDIES PAGE
   ========================================================================== */
.rp-case-studies .listing-cards {
  display: grid;
  gap: 2rem;
}

@media (min-width: 992px) {
  .rp-case-studies .listing-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 641px) and (max-width: 991px) {
  .rp-case-studies .listing-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .rp-case-studies .listing-cards {
    grid-template-columns: 1fr;
  }
}

.rp-case-studies .section-header {
  text-align: center;
  margin-bottom: 2rem;
  font-size: clamp(1.5rem, 5vw, 2.5rem);
}

/* ==========================================================================
   ONBOARDING PAGE
   ========================================================================== */

/* ONBOARDING: Pills Navigation (Item 1) - Center image and label */
.rp-onboarding .spacing-section {
  margin-top: calc(var(--nav-width, 96px) + 2rem);
}

.rp-onboarding .pills-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.rp-onboarding .feature_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.75rem;
  padding: 1rem;
}

.rp-onboarding .feature_img {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  margin-bottom: 0.25rem;
}

.rp-onboarding .feature_label {
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: #15113b;
}

.rp-onboarding .nav-pills-sub-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1.5rem;
  width: 100%;
}

@media (max-width: 991px) {
  .rp-onboarding .nav-pills-sub-container {
    grid-template-columns: repeat(4, 1fr);
  }

  .rp-onboarding .feature_img {
    width: 2.5rem;
    height: 2.5rem;
  }

  .rp-onboarding .feature_label {
    font-size: 0.875rem;
  }
}

@media (max-width: 640px) {
  .rp-onboarding .nav-pills-sub-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

  .rp-onboarding .feature_inner {
    padding: 0.75rem;
  }

  .rp-onboarding .feature_img {
    width: 2rem;
    height: 2rem;
  }

  .rp-onboarding .feature_label {
    font-size: 0.8125rem;
  }

  .rp-onboarding .pills-section .image-label {
    display: none;
  }
}

/* Videos/Integration missing: MISSING */
/* NOTE: HTML TEMPLATE NEEDED - "Videos" and "Integration" sections
   are missing from onboarding page. Needs implementation. */

/* ==========================================================================
   PERKS PAGE
   ========================================================================== */

/* PERKS: Blue slider section (Item 1) - Align slider, padding, header styling */
.rp-perks .blue-slider {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding-bottom: 3rem;
  padding-top: 2rem;
}

.rp-perks .blue-slider .swiper {
  width: 100%;
  max-width: 1000px;
}

.rp-perks .section-header {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.5rem;
}

.rp-perks .section-subheader {
  font-size: clamp(1rem, 3vw, 1.25rem);
  color: #6b7280;
  text-align: center;
  margin-bottom: 2rem;
}

@media (max-width: 991px) {
  .rp-perks .blue-slider {
    padding-bottom: 2rem;
    gap: 1.5rem;
  }

  .rp-perks .section-header {
    margin-bottom: 1.25rem;
  }
}

@media (max-width: 479px) {
  .rp-perks .blue-slider {
    padding-bottom: 1.5rem;
    gap: 1rem;
  }
}

/* ==========================================================================
   PARTNER PROGRAM PAGE
   ========================================================================== */

/* PARTNER-PROGRAM: Why partner cards (Item 1) - Card title sizing */

.rp-partner-program .grid-step-card-header .card-text-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: #15113b;
}

.rp-partner-program .card img {
  object-fit: cover;
  width: 100%;
  height: auto;
}

/* PARTNER-PROGRAM: Partner types center section (Item 2) - Card spacing */
.rp-partner-program .centred {
  display: flex;
  justify-content: center;
}

.rp-partner-program .grid-step-card {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 1.5rem;
  padding: 1.5rem;
}

.rp-partner-program .grid-step-card-content-container {
  flex: 1;
}

.rp-partner-program .grid-step-card-header {
  text-align: center;
}

/* PARTNER-PROGRAM: Demo request form (Item 3) - Responsive header */
.rp-partner-program .booking-form {
  margin-top: 1.5rem;
}

@media (max-width: 991px) {
  .rp-partner-program .grid-step-card {
    padding: 1.25rem;
  }

  
  .rp-partner-program .grid-step-card-header .card-text-label {
    font-size: 0.875rem;
  }

  }

@media (max-width: 479px) {
  .rp-partner-program .grid-step-card {
    padding: 1rem;
    gap: 1rem;
  }

  
  .rp-partner-program .grid-step-card-header .card-text-label {
    font-size: 0.8125rem;
  }

  }

/* SECURITY PAGE */
.rp-security .card {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
}

.rp-security .section-header {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
}

@media (min-width: 992px) {
  .rp-security .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .rp-security .card-grid {
    grid-template-columns: 1fr;
  }
}

/* BULK ACTIONS PAGE */
.rp-bulk-actions {
  /* Same as automations/calendar pattern - see AUTOMATIONS below */
}

/* TIME OFF PAGE */
.rp-time-off {
  /* Same as automations/calendar pattern - see AUTOMATIONS below */
}

/* ORG CHARTS PAGE */
.rp-org-charts .list-item {
  text-align: right;
}

.rp-org-charts .list-item .close-icon {
  display: none;
}

.rp-org-charts .list {
  text-align: right;
}

.rp-org-charts .shuffled-section {
  /* Use same component pattern as other pages */
}

/* AUTOMATIONS PAGE - Standard pattern fixes */
.rp-automations .section {
  margin-bottom: 2rem;
}

.rp-automations .section-header {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
}

/* CALENDAR PAGE - Standard pattern fixes */
.rp-calendar .section {
  margin-bottom: 2rem;
}

.rp-calendar .section-header {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
}

/* APIS PAGE - Standard pattern fixes */
.rp-apis .section {
  margin-bottom: 2rem;
}

.rp-apis .section-header {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
}

/* DEMO REQUEST PAGE */
.rp-demo-request {
  margin-top: 2rem;
}

.rp-demo-request .g2-badges {
  /* Use same G2 badges component as home page */
}

.rp-demo-request .form-header {
  border-bottom: 3px solid #114ef7;
  padding-bottom: 1rem;
}

/* TERMS / PRIVACY / COOKIE PAGES */
/* NOTE: Content differs from prod - this is content/template issue, not CSS.
   CSS is styling correctly but page content needs to be updated to match production. */

/* ==========================================================================
   Responsive Media Queries - General Patterns
   ========================================================================== */

@media (max-width: 991px) {
  .rp-home .section-light .content-wrapper,
  .rp-home .section-gray .content-wrapper,
  .rp-contractors .grid-mosaic-item,
  .rp-cor .grid-mosaic-item {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .rp-home .section-light .content-wrapper,
  .rp-home .section-gray .content-wrapper,
  .rp-contractors .grid-mosaic-item,
  .rp-cor .grid-mosaic-item {
    flex-direction: column;
  }
}

/* ==========================================================================
   PATTERN 1: CARDS CTAs - Light Blue Secondary Button Style
   Pages: Bulk-actions, Time-off-policies, Automations, Calendar, APIs
   These pages have feature cards whose CTA buttons need consistent styling
   ========================================================================== */

/* Primary CTA: Learn More links in centered section cards */
/* Container with hover state matching design */
/* ==========================================================================
   PATTERN 2: SHUFFLED SECTION - Alternating Image/Text Layout
   Pages: Contractors, EOR, COR, Relocation, Finance-managers, Org-charts
   Image left/text right on desktop, swap on alternating rows
   ========================================================================== */

/* Contractors Page - alternating shuffle pattern */
.rp-contractors .shuffled-section .content-wrapper {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.rp-contractors .shuffled-section .content-wrapper:nth-child(even) {
  flex-direction: row-reverse;
}

.rp-contractors .shuffled-section .image-col {
  flex: 0 0 45%;
}

.rp-contractors .shuffled-section .text-col {
  flex: 1;
}

/* EOR Page - shuffled section */
.rp-eor .shuffled-section .content-wrapper {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.rp-eor .shuffled-section .content-wrapper:nth-child(even) {
  flex-direction: row-reverse;
}

.rp-eor .shuffled-section .image-col {
  flex: 0 0 45%;
}

.rp-eor .shuffled-section .text-col {
  flex: 1;
}

/* COR Page - shuffled section */
.rp-cor .shuffled-section .content-wrapper {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.rp-cor .shuffled-section .content-wrapper:nth-child(even) {
  flex-direction: row-reverse;
}

.rp-cor .shuffled-section .image-col {
  flex: 0 0 45%;
}

.rp-cor .shuffled-section .text-col {
  flex: 1;
}

/* Relocation Page - shuffled section */
.rp-relocation .shuffled-section .content-wrapper {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.rp-relocation .shuffled-section .content-wrapper:nth-child(even) {
  flex-direction: row-reverse;
}

.rp-relocation .shuffled-section .image-col {
  flex: 0 0 45%;
}

.rp-relocation .shuffled-section .text-col {
  flex: 1;
}

/* Finance Managers Page - shuffled section */
.rp-finance-managers .shuffled-section .content-wrapper {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.rp-finance-managers .shuffled-section .content-wrapper:nth-child(even) {
  flex-direction: row-reverse;
}

.rp-finance-managers .shuffled-section .image-col {
  flex: 0 0 45%;
}

.rp-finance-managers .shuffled-section .text-col {
  flex: 1;
}

/* Org Charts Page - shuffled section */
.rp-org-charts .shuffled-section .content-wrapper {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.rp-org-charts .shuffled-section .content-wrapper:nth-child(even) {
  flex-direction: row-reverse;
}

.rp-org-charts .shuffled-section .image-col {
  flex: 0 0 45%;
}

.rp-org-charts .shuffled-section .text-col {
  flex: 1;
}

/* Responsive: Stack on tablet/mobile */
@media (max-width: 991px) {
  .rp-contractors .shuffled-section .content-wrapper,
  .rp-eor .shuffled-section .content-wrapper,
  .rp-cor .shuffled-section .content-wrapper,
  .rp-relocation .shuffled-section .content-wrapper,
  .rp-finance-managers .shuffled-section .content-wrapper,
  .rp-org-charts .shuffled-section .content-wrapper {
    flex-direction: column;
  }

  .rp-contractors .shuffled-section .content-wrapper:nth-child(even),
  .rp-eor .shuffled-section .content-wrapper:nth-child(even),
  .rp-cor .shuffled-section .content-wrapper:nth-child(even),
  .rp-relocation .shuffled-section .content-wrapper:nth-child(even),
  .rp-finance-managers .shuffled-section .content-wrapper:nth-child(even),
  .rp-org-charts .shuffled-section .content-wrapper:nth-child(even) {
    flex-direction: column;
  }

  .rp-contractors .shuffled-section .image-col,
  .rp-eor .shuffled-section .image-col,
  .rp-cor .shuffled-section .image-col,
  .rp-relocation .shuffled-section .image-col,
  .rp-finance-managers .shuffled-section .image-col,
  .rp-org-charts .shuffled-section .image-col {
    flex: 1;
    width: 100%;
  }

  .rp-contractors .shuffled-section .text-col,
  .rp-eor .shuffled-section .text-col,
  .rp-cor .shuffled-section .text-col,
  .rp-relocation .shuffled-section .text-col,
  .rp-finance-managers .shuffled-section .text-col,
  .rp-org-charts .shuffled-section .text-col {
    width: 100%;
  }
}

/* ==========================================================================
   PATTERN 3: MOSAIC CARD DISPLAY - Feature Card Grid
   Pages: Contractors, COR
   Cards header and images adjusted for proper sizing and alignment
   ========================================================================== */

/* Contractors Page - additional mosaic refinements */
.rp-contractors .grid-mosaic-container {
  display: grid;
  gap: 1.5rem;
}

.rp-contractors .grid-mosaic-item .card-header,
.rp-cor .grid-mosaic-item .card-header {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.rp-contractors .grid-mosaic-item .card-image,
.rp-cor .grid-mosaic-item .card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

.rp-contractors .grid-mosaic-item .card-content,
.rp-cor .grid-mosaic-item .card-content {
  padding: 0;
}

.rp-contractors .grid-mosaic-item .card-text,
.rp-cor .grid-mosaic-item .card-text {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #545454;
  margin-bottom: 1rem;
}

/* COR Page - mosaic adjustments */
.rp-cor .grid-mosaic-container {
  display: grid;
  gap: 1.5rem;
}

/* Responsive: Single column on mobile */
@media (max-width: 991px) {
  .rp-contractors .grid-mosaic-container,
  .rp-cor .grid-mosaic-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .rp-contractors .grid-mosaic-item .card-image,
  .rp-cor .grid-mosaic-item .card-image {
    height: 150px;
  }

  .rp-contractors .grid-mosaic-item .card-header,
  .rp-cor .grid-mosaic-item .card-header {
    font-size: 1rem;
  }
}

/* ==========================================================================
   PATTERN 4: RESPONSIVE HEADERS - Adaptive Font Sizing
   Pages: Integrations, Security-and-trust, Case-studies, Partner-program
   Headers should be responsive with clamp for fluid scaling
   ========================================================================== */

/* Integrations Page */
.rp-integrations .section-header {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 2rem;
}

.rp-integrations .section-subheader {
  font-size: clamp(0.95rem, 3vw, 1.125rem);
  line-height: 1.5;
  color: #545454;
}

/* Security and Trust Page */
.rp-security .section-header {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 2rem;
}

.rp-security .section-subheader {
  font-size: clamp(0.95rem, 3vw, 1.125rem);
  line-height: 1.5;
  color: #545454;
}

/* Case Studies Page - already has clamp, ensuring consistency */
.rp-case-studies .section-header {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 2rem;
}

.rp-case-studies .section-subheader {
  font-size: clamp(0.95rem, 3vw, 1.125rem);
  line-height: 1.5;
  color: #545454;
}

/* Partner Program Page */
.rp-partner-program .section-header {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 2rem;
}

.rp-partner-program .section-subheader {
  font-size: clamp(0.95rem, 3vw, 1.125rem);
  line-height: 1.5;
  color: #545454;
}

/* ==========================================================================
   PATTERN 5: CASE STUDIES CARDS - 3-Column Grid with Centered Analytics
   Pages: Case-studies
   Cards aligned 3 per row, analytics cards centered
   ========================================================================== */

/* Case Studies listing cards - ensure 3 column layout desktop */
.rp-case-studies .listing-cards {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(3, 1fr);
}

.rp-case-studies .listing-cards .card {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 0.75rem;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.rp-case-studies .listing-cards .card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #114ef7;
}

.rp-case-studies .listing-cards .card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

.rp-case-studies .listing-cards .card p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #545454;
  margin-bottom: 1rem;
}

/* Analytics cards - centered layout */
.rp-case-studies .analytics-section {
  margin-top: 3rem;
  padding: 2rem;
  background-color: #f9f9f9;
  border-radius: 0.75rem;
}

.rp-case-studies .analytics-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.rp-case-studies .analytics-card {
  padding: 1.5rem;
}

.rp-case-studies .analytics-card .number {
  font-size: 2.5rem;
  font-weight: 700;
  color: #114ef7;
  margin-bottom: 0.5rem;
}

.rp-case-studies .analytics-card .label {
  font-size: 1rem;
  color: #545454;
  font-weight: 600;
}

/* Responsive: 2 columns tablet, 1 column mobile */
@media (max-width: 991px) {
  .rp-case-studies .listing-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .rp-case-studies .listing-cards {
    grid-template-columns: 1fr;
  }

  .rp-case-studies .analytics-cards {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   PATTERN 6: GLOBAL HIRING SECTION - Light Blue Box with Styling
   Pages: COR, Relocation
   Background light blue, border, radius, with primary/secondary CTA design
   ========================================================================== */

/* COR Page - Global Hiring Section (already exists, enhance) */
.rp-cor .global-hiring-section {
  background-color: #f0f7ff;
  border: 1px solid #c3d9ff;
  border-radius: 0.75rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.rp-cor .global-hiring-section p {
  font-size: 1rem;
  line-height: 1.5;
  color: #545454;
  margin: 0;
}

.rp-cor .global-hiring-section .btn-primary {
  background-color: #114ef7;
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  width: fit-content;
  transition: all 0.25s ease;
}

.rp-cor .global-hiring-section .btn-primary:hover {
  background-color: #0b3ebd;
  box-shadow: 0 2px 8px rgba(17, 78, 247, 0.3);
}

.rp-cor .global-hiring-section .btn-secondary {
  background-color: #f0f7ff;
  color: #114ef7;
  border: 1px solid #114ef7;
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  width: fit-content;
  transition: all 0.25s ease;
}

.rp-cor .global-hiring-section .btn-secondary:hover {
  background-color: #114ef7;
  color: #ffffff;
}

/* Relocation Page - Global Hiring Section */
.rp-relocation .global-hiring-section {
  background-color: #f0f7ff;
  border: 1px solid #c3d9ff;
  border-radius: 0.75rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.rp-relocation .global-hiring-section p {
  font-size: 1rem;
  line-height: 1.5;
  color: #545454;
  margin: 0;
}

.rp-relocation .global-hiring-section .btn-primary {
  background-color: #114ef7;
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  width: fit-content;
  transition: all 0.25s ease;
}

.rp-relocation .global-hiring-section .btn-primary:hover {
  background-color: #0b3ebd;
  box-shadow: 0 2px 8px rgba(17, 78, 247, 0.3);
}

.rp-relocation .global-hiring-section .btn-secondary {
  background-color: #f0f7ff;
  color: #114ef7;
  border: 1px solid #114ef7;
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  width: fit-content;
  transition: all 0.25s ease;
}

.rp-relocation .global-hiring-section .btn-secondary:hover {
  background-color: #114ef7;
  color: #ffffff;
}

/* Responsive: Full-width buttons on mobile */
@media (max-width: 640px) {
  .rp-cor .global-hiring-section,
  .rp-relocation .global-hiring-section {
    padding: 1.5rem;
  }

  .rp-cor .global-hiring-section .btn-primary,
  .rp-cor .global-hiring-section .btn-secondary,
  .rp-relocation .global-hiring-section .btn-primary,
  .rp-relocation .global-hiring-section .btn-secondary {
    width: 100%;
    text-align: center;
  }
}

/* ==========================================================================
   BLOG DETAIL PAGE (Single.html)
   ========================================================================== */

/* Blog article wrapper: proper max-width and spacing */
.rp-blog-article {
  max-width: 850px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

/* Blog article featured image: full-width with rounded corners and shadow */
.rp-blog-article .featured-image {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: cover;
  border-radius: 0.75rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Blog article meta bar: date and reading time */
.rp-blog-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e0e0e0;
  font-size: 0.95rem;
  color: #6b7280;
}

.rp-blog-meta .rp-blog-date {
  font-weight: 500;
  color: #4a5568;
}

.rp-blog-meta .rp-blog-separator {
  color: #c0c0c0;
}

.rp-blog-meta .rp-blog-reading-time {
  color: #6b7280;
}

/* Blog breadcrumbs styling */
.rp-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  color: #6b7280;
}

.rp-breadcrumbs a {
  color: #114ef7;
  text-decoration: none;
  transition: color 0.2s ease;
}

.rp-breadcrumbs a:hover {
  color: #0b3ebd;
  text-decoration: underline;
}

.rp-breadcrumb-sep {
  color: #c0c0c0;
}

.rp-breadcrumb-current {
  color: #4a5568;
  font-weight: 500;
}

/* Blog article title: larger, bolder */

.wp-block-group h1 {
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.3;
  color: #15113b;
  margin-bottom: 1rem;
  margin-top: 0;
}

/* Blog article content: proper typography */
.rp-blog-article p,
.wp-block-group p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #4a5568;
  margin-bottom: 1.5rem;
}


.wp-block-group h2 {
  font-size: 1.75rem;
  font-weight: 700;
  color: #15113b;
  margin-top: 2rem;
  margin-bottom: 1rem;
  line-height: 1.4;
}


.wp-block-group h3 {
  font-size: 1.375rem;
  font-weight: 600;
  color: #15113b;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.rp-blog-article ul,
.rp-blog-article ol {
  margin-bottom: 1.5rem;
  padding-right: 2rem;
}

.rp-blog-article li {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #4a5568;
  margin-bottom: 0.75rem;
}

/* Code blocks styling */
.rp-blog-article code,
.rp-blog-article pre {
  background-color: #f5f5f5;
  border-radius: 0.375rem;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
}

.rp-blog-article pre {
  padding: 1rem;
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

.rp-blog-article code {
  padding: 0.2rem 0.4rem;
  color: #d63384;
}

/* Blog disclaimer section */
.rp-disclaimer {
  background-color: #f9f9f9;
  border-right: 4px solid #114ef7;
  padding: 1.5rem;
  margin: 2rem 0;
  border-radius: 0.375rem;
  font-size: 0.95rem;
  color: #4a5568;
}

.rp-disclaimer strong {
  color: #15113b;
}

.rp-disclaimer .rp-last-updated {
  color: #6b7280;
  font-style: italic;
  margin-top: 0.75rem;
}

/* Related compliance section */
.rp-compliance-section {
  margin-top: 3rem;
  padding: 2rem;
  background-color: #f0f7ff;
  border-radius: 0.75rem;
}

.rp-compliance-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: #15113b;
  margin-bottom: 1.5rem;
}

.rp-compliance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.rp-compliance-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background-color: #ffffff;
  border: 1px solid #c3d9ff;
  border-radius: 0.5rem;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}

.rp-compliance-card:hover {
  background-color: #ffffff;
  border-color: #114ef7;
  box-shadow: 0 4px 12px rgba(17, 78, 247, 0.15);
  transform: translateY(-2px);
}

.rp-card-title {
  font-weight: 600;
  font-size: 1.0625rem;
  color: #15113b;
  margin-bottom: 0.5rem;
}

.rp-card-country {
  font-size: 0.875rem;
  color: #6b7280;
}

/* Parent link section */
.rp-parent-link {
  background-color: #f0f7ff;
  border-right: 4px solid #114ef7;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  border-radius: 0.375rem;
  font-size: 0.95rem;
  color: #4a5568;
}

.rp-parent-link a {
  color: #114ef7;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.rp-parent-link a:hover {
  color: #0b3ebd;
  text-decoration: underline;
}

/* Responsive: adjust for tablets/mobile */
@media (max-width: 991px) {
  .rp-blog-article {
    padding: 2rem 1rem;
  }

  
  .wp-block-group h1 {
    font-size: 2rem;
  }

  
  .wp-block-group h2 {
    font-size: 1.5rem;
  }

  .rp-compliance-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .rp-blog-article {
    padding: 1.5rem 1rem;
  }

  
  .wp-block-group h1 {
    font-size: 1.5rem;
  }

  
  .wp-block-group h2 {
    font-size: 1.25rem;
  }

  .rp-blog-article p,
  .wp-block-group p {
    font-size: 1rem;
  }

  .rp-blog-meta {
    flex-wrap: wrap;
  }

  .rp-compliance-grid,
  .rp-blog-article ul,
  .rp-blog-article ol {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   EOR PAGE - REDESIGN ITEMS
   ========================================================================== */

/* EOR: Global Talent Pool section - carousel card layout */
.rp-eor .rp-country-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 0.75rem;
  overflow: hidden;
  transition: all 0.3s ease;
}

.rp-eor .rp-country-item:hover {
  border-color: #114ef7;
  box-shadow: 0 8px 24px rgba(17, 78, 247, 0.12);
  transform: translateY(-4px);
}

.rp-eor .countries-wrapper {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f7ff;
}

.rp-eor .country-tag-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
  padding: 1.5rem;
}

.rp-eor .thumb-wrap-img {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
}

.rp-eor .thumb-wrap-p {
  font-weight: 600;
  font-size: 1.0625rem;
  color: #15113b;
}

/* ==========================================================================
   HIRING GUIDE & OTHER PAGES - REDESIGN ITEMS
   ========================================================================== */

/* Hiring guide pages: proper content width and spacing */
.rp-hiring-guide,
.rp-hiring-guide-detail {
  --max-content-width: 900px;
}

.rp-hiring-guide .rp-container,
.rp-hiring-guide-detail .rp-container {
  max-width: var(--max-content-width);
}

/* Hiring guide detail: content styling */
.rp-hiring-guide-detail .guide-header {
  max-width: var(--max-content-width);
  margin: 0 auto 3rem;
  text-align: right;
}

.rp-hiring-guide-detail .guide-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  color: #15113b;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.rp-hiring-guide-detail .guide-intro {
  font-size: 1.125rem;
  line-height: 1.6;
  color: #4a5568;
  max-width: 800px;
}

.rp-hiring-guide-detail .guide-content {
  max-width: var(--max-content-width);
  margin: 0 auto;
}

.rp-hiring-guide-detail .guide-section {
  padding: 2rem 0;
  border-bottom: 1px solid #e0e0e0;
}

.rp-hiring-guide-detail .guide-section:last-child {
  border-bottom: none;
}

/* UAE Employer of Record & Payroll specific styling */
.rp-uae-eor,
.rp-uae-payroll {
  --brand-primary: #114ef7;
}

/* ==========================================================================
   HOMEPAGE TALENT POOL - SECTION POLISH
   Scoped to .rp-home-countries so it doesn't blow up EOR/Relocation/etc.
   The unscoped versions caused .swiper-slide widths to balloon to 2^23 px
   on /product/eor/ (display:flex on the parent + .w-col-4 33.33% feedback
   loop), making the page 5.25M px tall and uncapturable.
   ========================================================================== */

.rp-home-countries .new-rp-section-vertical-scroll-container {
  display: flex;
  gap: 2rem;
  padding: 2rem 0;
  overflow-x: auto;
}

.rp-home-countries .swiper-countries-slider {
  width: 100%;
}

.rp-home-countries .thumb-wrap-relative {
  position: relative;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  border-radius: 0.75rem;
  overflow: hidden;
}

.rp-home-countries .country-tag-container-v3 {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  background: linear-gradient(-180deg, transparent 0%, rgba(0, 0, 0, 0.6) 100%);
  padding: 1.5rem;
  display: flex;
  align-items: flex-end;
  gap: 1rem;
}

.rp-home-countries .thumb-wrap-img-v3 {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.25rem;
}

.rp-home-countries .thumb-wrap-p-v3 {
  color: #ffffff;
  font-weight: 600;
  font-size: 1.0625rem;
}

/* End of qa-fixes-pages.css */