/* mena-hr-payroll-hub — Wave-2 Figma-aligned synced patterns (frame 13433:19788).
   Page-wide component CSS, all rules scoped under .rp-mena. Loads after migration.css.
   Sections: hero · platform (12-card carousel) · features (11 alt rows) · faq · pricing · cta.
   Shared parts (brands-bar, home-integrations, trust-badges, home-footer) bring their own CSS. */

.rp-mena{font-family:"Mulish",sans-serif;}
.rp-mena *{box-sizing:border-box;}
.rp-mena .rp-mena-accent{color:#114ef7;}

/* ============================ HERO ============================ */
.rp-mena-hero{background:linear-gradient(180deg,#fbfcff 0%,#eaf0fe 100%);padding:72px 24px 80px;}
.rp-mena-hero__inner{max-width:1340px;margin:0 auto;display:flex;align-items:center;gap:48px;}
/* Cowork fix (wave-2 sweep): min-width:0 here defeated the 560px flex floor — the col collapsed to ~520px and the H1 wrapped 3 lines vs Figma's 2. min-width belongs on __media only. */
.rp-mena-hero__text{flex:1 0 600px;max-width:624px;}
.rp-mena-hero__pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;}
.rp-mena-hero__pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:40px;padding:8px 12px;font-size:12px;line-height:20px;font-weight:700;color:#044d80;box-shadow:0 1px 2px rgba(2,17,67,.06);}
.rp-mena-hero__pill-icon{width:20px;height:20px;display:block;}
.rp-mena-hero__title{font-size:64px;line-height:72px;font-weight:700;color:#021143;letter-spacing:0;margin:0 0 16px;}
.rp-mena-hero__sub{font-size:20px;line-height:28px;font-weight:400;color:#3f3f3f;margin:0 0 24px;max-width:600px;}
.rp-mena-hero__flags{display:flex;align-items:center;margin:0 0 24px;}
.rp-mena-hero__flag{width:35px;height:35px;border-radius:50%;border:2px solid #fff;object-fit:cover;box-shadow:0 30px 30px rgba(0,0,0,.08);margin-left:-9px;}
.rp-mena-hero__flag:first-child{margin-left:0;}
.rp-mena-hero__ctas{display:flex;gap:16px;flex-wrap:wrap;}
.rp-mena-hero__cta{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:16px 24px;border-radius:4px;background:#114ef7;color:#fff;font-size:14px;line-height:22px;font-weight:700;text-decoration:none;transition:filter .15s;}
.rp-mena-hero__cta:hover{filter:brightness(.94);}
.rp-mena-hero__media{flex:0 1 680px;min-width:0;display:flex;justify-content:center;}
.rp-mena-hero__img{width:680px;max-width:100%;height:auto;display:block;}

/* shared centered section header */
.rp-mena-head{max-width:860px;margin:0 auto 48px;text-align:center;}
.rp-mena-head__h2{font-size:48px;line-height:56px;font-weight:700;color:#021143;margin:0 0 12px;}
.rp-mena-head__sub{font-size:18px;line-height:28px;color:#696969;margin:0;}

/* ====================== PLATFORM CAROUSEL ====================== */
.rp-mena-platform{background:#fff;padding:80px 24px;}
.rp-mena-platform__h2{font-size:48px;line-height:56px;font-weight:700;color:#2a2a2a;text-align:center;margin:0 auto 48px;max-width:860px;}
.rp-mena-platform__track{display:flex;gap:32px;max-width:1200px;margin:0 auto;overflow-x:auto;padding:4px 4px 20px;scroll-snap-type:x mandatory;scrollbar-width:thin;}
.rp-mena-platform__card{flex:0 0 288px;height:384px;background:#e4ebfe;border-radius:8px;padding:24px;scroll-snap-align:start;display:flex;flex-direction:column;}
.rp-mena-platform__card--blue{background:#114ef7;border:1px solid #adc2fc;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);}
.rp-mena-platform__icon{width:113px;height:113px;border-radius:16px;display:block;margin:0 0 48px;}
.rp-mena-platform__name{font-size:24px;line-height:32px;font-weight:700;color:#2a2a2a;margin:0 0 7px;}
.rp-mena-platform__desc{font-size:16px;line-height:24px;color:#696969;margin:0;}
.rp-mena-platform__card--blue .rp-mena-platform__name{color:#fff;}
.rp-mena-platform__card--blue .rp-mena-platform__desc{color:#e7e7e7;}

/* ========================== FEATURES ========================== */
.rp-mena-features{background:#fff;padding:40px 24px 80px;}
.rp-mena-features__head{max-width:980px;margin:0 auto 56px;text-align:center;}
.rp-mena-features__h2{font-size:40px;line-height:50px;font-weight:700;color:#021143;margin:0;}
.rp-mena-feat{max-width:1160px;margin:0 auto;display:flex;align-items:center;gap:64px;padding:32px 0;}
.rp-mena-feat--img-left{flex-direction:row-reverse;}
.rp-mena-feat__text{flex:1 1 50%;min-width:0;}
.rp-mena-feat__eyebrow{display:inline-block;font-size:12px;line-height:20px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#114ef7;margin:0 0 10px;}
.rp-mena-feat__title{font-size:40px;line-height:48px;font-weight:700;color:#021143;margin:0 0 16px;}
.rp-mena-feat__body{font-size:18px;line-height:28px;color:#696969;margin:0 0 16px;}
.rp-mena-feat__bullets{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:10px 20px;}
.rp-mena-feat__bullets li{display:flex;align-items:center;gap:8px;font-size:15px;line-height:22px;font-weight:600;color:#021143;}
.rp-mena-feat__bullets li::before{content:"";width:18px;height:18px;border-radius:50%;background:#e4ebfe url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3.4' stroke='%23114EF7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;flex:0 0 auto;}
.rp-mena-feat__cta{display:inline-flex;align-items:center;gap:8px;font-size:16px;line-height:24px;font-weight:700;color:#114ef7;text-decoration:none;}
.rp-mena-feat__cta::after{content:"\2192";font-size:18px;}
.rp-mena-feat__cta:hover{text-decoration:underline;}
.rp-mena-feat__media{flex:1 1 50%;min-width:0;display:flex;justify-content:center;}
.rp-mena-feat__img{max-width:540px;width:100%;height:auto;display:block;}

/* ============================ FAQ ============================ */
.rp-mena-faq{background:#f6f8ff;padding:80px 24px;}
.rp-mena-faq__inner{max-width:860px;margin:0 auto;}
.rp-mena-faq__title{font-size:48px;line-height:56px;font-weight:700;color:#021143;text-align:center;margin:0 0 8px;}
.rp-mena-faq__lead{font-size:18px;line-height:28px;color:#696969;text-align:center;margin:0 0 40px;}
.rp-mena-faq__list{display:flex;flex-direction:column;gap:16px;}
.rp-mena-faq__item{background:#fff;border:1px solid #e6ebf5;border-radius:12px;padding:20px 24px;}
.rp-mena-faq__q{font-size:18px;line-height:26px;font-weight:700;color:#021143;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;}
.rp-mena-faq__q::-webkit-details-marker{display:none;}
.rp-mena-faq__q::after{content:"";width:20px;height:20px;flex:0 0 auto;margin-top:3px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%23114EF7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s;}
.rp-mena-faq__item[open] .rp-mena-faq__q::after{transform:rotate(180deg);}
.rp-mena-faq__a{font-size:16px;line-height:26px;color:#4a5878;margin:14px 0 0;white-space:pre-line;}

/* ========================== PRICING ========================== */
.rp-mena-pricing{background:#fff;padding:80px 24px;}
.rp-mena-pricing__h2{font-size:48px;line-height:56px;font-weight:700;color:#021143;text-align:center;margin:0 auto 48px;}
.rp-mena-pricing__grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.rp-mena-pricing__card{background:#fff;border:1px solid #e6ebf5;border-radius:16px;padding:28px 24px;display:flex;flex-direction:column;box-shadow:0 6px 24px rgba(2,17,67,.05);}
.rp-mena-pricing__name{font-size:18px;line-height:26px;font-weight:700;color:#021143;margin:0 0 12px;}
.rp-mena-pricing__note{font-size:11px;line-height:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9aa3b5;margin:0 0 4px;}
.rp-mena-pricing__price{font-size:36px;line-height:42px;font-weight:700;color:#114ef7;margin:0 0 14px;}
.rp-mena-pricing__desc{font-size:14px;line-height:22px;color:#696969;margin:0 0 24px;flex:1 0 auto;}
.rp-mena-pricing__cta{display:inline-flex;align-items:center;justify-content:center;height:48px;border-radius:4px;background:#114ef7;color:#fff;font-size:14px;line-height:22px;font-weight:700;text-decoration:none;transition:filter .15s;}
.rp-mena-pricing__cta:hover{filter:brightness(.94);}

/* ======================== STATS / CTA ======================== */
.rp-mena-cta{background:#fff;padding:24px 24px 88px;}
.rp-mena-cta__inner{max-width:1040px;margin:0 auto;background:linear-gradient(180deg,#f3f6ff 0%,#e9f0fe 100%);border-radius:24px;padding:56px 40px;text-align:center;}
.rp-mena-cta__h2{font-size:36px;line-height:46px;font-weight:700;color:#021143;margin:0 auto 40px;max-width:820px;}
.rp-mena-cta__stats{display:flex;justify-content:center;gap:0;margin:0 0 40px;flex-wrap:wrap;}
.rp-mena-cta__stat{padding:0 48px;position:relative;}
.rp-mena-cta__stat + .rp-mena-cta__stat::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);height:56px;width:1px;background:#c9d6f5;}
.rp-mena-cta__num{font-size:48px;line-height:56px;font-weight:700;color:#114ef7;display:block;}
.rp-mena-cta__lbl{font-size:16px;line-height:24px;color:#696969;display:block;margin-top:4px;}
.rp-mena-cta__btn{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:16px 32px;border-radius:4px;background:#114ef7;color:#fff;font-size:14px;line-height:22px;font-weight:700;text-decoration:none;transition:filter .15s;}
.rp-mena-cta__btn:hover{filter:brightness(.94);}

/* ========================= RESPONSIVE ========================= */
@media (max-width:991px){
  .rp-mena-hero__inner{flex-direction:column;text-align:center;gap:32px;}
  .rp-mena-hero__text{flex:1 1 auto;max-width:640px;}
  .rp-mena-hero__pills,.rp-mena-hero__flags,.rp-mena-hero__ctas{justify-content:center;}
  .rp-mena-hero__sub{margin-left:auto;margin-right:auto;}
  .rp-mena-hero__title{font-size:44px;line-height:52px;}
  .rp-mena-head__h2,.rp-mena-platform__h2,.rp-mena-faq__title,.rp-mena-pricing__h2{font-size:34px;line-height:42px;}
  .rp-mena-feat,.rp-mena-feat--img-left{flex-direction:column;gap:28px;text-align:center;}
  .rp-mena-feat__bullets{justify-content:center;}
  .rp-mena-feat__title{font-size:30px;line-height:38px;}
  .rp-mena-features__h2{font-size:30px;line-height:40px;}
  .rp-mena-pricing__grid{grid-template-columns:repeat(2,1fr);}
  .rp-mena-cta__h2{font-size:28px;line-height:38px;}
}
@media (max-width:600px){
  .rp-mena-hero__title{font-size:36px;line-height:44px;}
  .rp-mena-pricing__grid{grid-template-columns:1fr;}
  .rp-mena-cta__stat{padding:0 28px;}
  .rp-mena-cta__num{font-size:38px;line-height:44px;}
}