/* MASAR homepage refinement. This sheet is intentionally isolated from internal pages and ERP. */
html body #wrapwrap .masar-pay:not(.masar-page){
  --home-line:rgba(4,43,89,.12);
  --home-shadow:0 8px 28px rgba(4,43,89,.065);
}
html body #wrapwrap .masar-pay:not(.masar-page) .masar-section-head__title{
  font-size:clamp(2rem,3.2vw,2.65rem)!important;line-height:1.25!important;
  max-width:23ch;text-wrap:balance;
}
html body #wrapwrap .masar-pay:not(.masar-page)>.masar-services-showcase{padding-block:64px!important}
html body #wrapwrap .masar-pay:not(.masar-page) .masar-section-head{margin-bottom:28px!important}
html body #wrapwrap .masar-pay:not(.masar-page) .masar-service-card{
  border:1px solid var(--home-line)!important;border-radius:20px!important;
  box-shadow:var(--home-shadow)!important;
}
html body #wrapwrap .masar-pay:not(.masar-page) .masar-service-card__content,
html body #wrapwrap .masar-pay:not(.masar-page) .masar-service-card__body{
  display:flex!important;flex-direction:column!important;align-items:stretch!important;
  width:100%!important;min-width:0;padding:20px!important;gap:12px;box-sizing:border-box;
}
html body #wrapwrap .masar-pay:not(.masar-page) .masar-service-card__content .masar-service-card__body{
  padding:0!important;gap:0!important;flex:0 0 auto!important;
}
html body #wrapwrap .masar-pay:not(.masar-page) .masar-service-card__header,
html body #wrapwrap .masar-pay:not(.masar-page) .masar-service-card__heading{
  display:flex!important;flex-direction:row!important;align-items:center!important;
  justify-content:flex-start!important;gap:12px;width:100%!important;min-width:0;
  flex:0 0 auto!important;align-self:stretch!important;
}
html body #wrapwrap .masar-pay:not(.masar-page) .masar-service-card__icon{flex:none;width:40px;height:40px;border-radius:12px}
html body #wrapwrap .masar-pay:not(.masar-page) .masar-service-card__title{
  flex:1 1 auto;min-width:0;margin:0!important;
  white-space:normal!important;overflow:visible!important;text-overflow:clip!important;
  font-size:1.125rem!important;line-height:1.35!important;font-weight:800!important;
}
html body #wrapwrap .masar-pay:not(.masar-page) .masar-service-card__text{
  display:block!important;width:100%!important;max-width:100%!important;
  overflow:visible!important;-webkit-line-clamp:unset!important;-webkit-box-orient:initial!important;
  font-size:.975rem!important;line-height:1.7!important;margin:0!important;
}
html body #wrapwrap .masar-pay:not(.masar-page) .masar-service-carousel__bar{gap:12px;align-items:center;margin-top:18px}
html body #wrapwrap .masar-pay:not(.masar-page) .masar-service-carousel__nav{
  width:46px!important;height:46px!important;min-width:46px;border:1px solid var(--home-line);
  box-shadow:none;
}
html body #wrapwrap .masar-pay:not(.masar-page) .masar-service-carousel__dots{gap:0!important}
html body #wrapwrap .masar-pay:not(.masar-page) .masar-service-carousel__dot{
  display:grid;place-items:center;width:28px!important;height:32px!important;
  min-width:28px;padding:0!important;background:transparent!important;border:0!important;border-radius:8px;
}
html body #wrapwrap .masar-pay:not(.masar-page) .masar-service-carousel__dot::before{
  content:"";display:block;width:7px;height:7px;border-radius:99px;background:#acb9c8;
  transition:width .2s ease,background-color .2s ease;
}
html body #wrapwrap .masar-pay:not(.masar-page) .masar-service-carousel__dot.is-active::before{width:20px;background:#ff6b1a}
html body #wrapwrap .masar-pay:not(.masar-page)>.masar-audience-band{padding-block:16px 56px!important}
html body #wrapwrap .masar-pay:not(.masar-page) .masar-audience{gap:24px!important}
html body #wrapwrap .masar-pay:not(.masar-page) .masar-audience__card{
  min-height:460px!important;padding:36px!important;border-radius:22px!important;
  box-shadow:var(--home-shadow)!important;
}
html body #wrapwrap .masar-pay:not(.masar-page) .masar-audience__title{
  font-size:clamp(1.65rem,2.5vw,2.2rem)!important;line-height:1.3!important;
  margin-bottom:20px!important;text-wrap:balance;
}
html body #wrapwrap .masar-pay:not(.masar-page) .masar-points{gap:10px!important;margin-bottom:28px!important}
html body #wrapwrap .masar-pay:not(.masar-page)>#about{padding-block:56px!important}
html body #wrapwrap .masar-pay:not(.masar-page) .masar-principle{
  padding:24px!important;min-height:0!important;border-radius:20px!important;
  box-shadow:var(--home-shadow)!important;
}
html body #wrapwrap .masar-pay:not(.masar-page) .masar-principle__header,
html body #wrapwrap .masar-pay:not(.masar-page) .masar-principle__heading{display:flex!important;flex-direction:row!important;align-items:center!important;width:100%;gap:12px;margin-bottom:16px}
html body #wrapwrap .masar-pay:not(.masar-page) .masar-principle__body{display:block;width:100%}
html body #wrapwrap .masar-pay:not(.masar-page) .masar-principle__icon{width:44px;height:44px;border-radius:13px;flex:none}
html body #wrapwrap .masar-pay:not(.masar-page) .masar-principle__text{margin-bottom:0;line-height:1.75!important}
html body #wrapwrap .masar-pay:not(.masar-page)>.masar-opportunity{
  padding-block:36px!important;border-bottom:1px solid rgba(255,255,255,.13);
}
html body #wrapwrap .masar-pay:not(.masar-page) .masar-opportunity__inner{gap:24px}
html body #wrapwrap .masar-pay:not(.masar-page) .masar-opportunity__title{
  font-size:clamp(1.8rem,3vw,2.5rem)!important;line-height:1.3!important;margin:0!important;
}
html body #wrapwrap .masar-pay:not(.masar-page) .masar-opportunity .masar-lockup{width:220px!important;max-width:100%}
html body #wrapwrap .masar-pay:not(.masar-page)>.masar-closing{padding-block:52px!important}
html body #wrapwrap .masar-pay:not(.masar-page) .masar-closing__title{
  font-size:clamp(1.7rem,3vw,2.5rem)!important;line-height:1.3!important;text-wrap:balance;
}
html body #wrapwrap .masar-pay:not(.masar-page) .masar-closing__lead{max-width:54ch;margin:16px auto 24px!important;line-height:1.75!important}
html body #wrapwrap .masar-pay:not(.masar-page) .masar-closing__actions [hidden]{display:none!important}
@media(min-width:768px){
  html body #wrapwrap .masar-pay:not(.masar-page)>.masar-hero--home .masar-hero__copy{max-width:600px!important}
  html body #wrapwrap .masar-pay:not(.masar-page)>.masar-hero--home .masar-hero__title{font-size:clamp(3.2rem,5vw,4.75rem)!important;line-height:1.1!important}
}
@media(max-width:767.98px){
  /* Full photograph for every phone width, including narrow landscape layouts. */
  html body #wrapwrap .masar-pay:not(.masar-page)>.masar-hero--home{
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    height:auto!important;min-height:0!important;padding:28px 0 0!important;gap:24px;background:#021d3e!important;
  }
  html body #wrapwrap .masar-pay:not(.masar-page)>.masar-hero--home::before{display:none!important}
  html body #wrapwrap .masar-pay:not(.masar-page)>.masar-hero--home::after{
    content:"";display:block!important;position:relative!important;inset:auto!important;width:100%;
    height:auto!important;aspect-ratio:16/9;flex:none;z-index:0;
    background:url("/masar_website/static/src/img/hero-fintech-yemen-v2.webp?v=card-payment-20260928") center/contain no-repeat!important;
  }
  html body #wrapwrap .masar-pay:not(.masar-page)>.masar-hero--home .masar-hero__top{
    position:relative;z-index:1;width:100%!important;max-width:none!important;margin:0!important;
    padding:0 22px!important;height:auto!important;min-height:0!important;flex:none!important;
  }
  html body #wrapwrap .masar-pay:not(.masar-page)>.masar-hero--home .masar-hero__copy{max-width:100%!important;width:100%}
  html body #wrapwrap .masar-pay:not(.masar-page)>.masar-hero--home .masar-hero__title{
    font-size:clamp(2.15rem,8.5vw,3.15rem)!important;line-height:1.2!important;margin-bottom:18px!important;
  }
  html body #wrapwrap .masar-pay:not(.masar-page)>.masar-hero--home .masar-hero__lead{font-size:1rem!important;line-height:1.7!important}
  html body #wrapwrap .masar-pay:not(.masar-page)>.masar-trust-band{margin-top:0!important}
  html body #wrapwrap .masar-pay:not(.masar-page)>.masar-services-showcase{padding-block:44px!important}
  html body #wrapwrap .masar-pay:not(.masar-page) .masar-section-head__title{font-size:clamp(1.75rem,7vw,2.2rem)!important;max-width:18ch;line-height:1.35!important}
  html body #wrapwrap .masar-pay:not(.masar-page) .masar-section-head__lead{line-height:1.75!important}
  html body #wrapwrap .masar-pay:not(.masar-page) .masar-service-card__content,
  html body #wrapwrap .masar-pay:not(.masar-page) .masar-service-card__body{padding:18px!important;gap:10px}
  html body #wrapwrap .masar-pay:not(.masar-page) .masar-service-card__content .masar-service-card__body{padding:0!important;gap:0!important}
  html body #wrapwrap .masar-pay:not(.masar-page)>.masar-audience-band{padding-block:0 40px!important}
  html body #wrapwrap .masar-pay:not(.masar-page) .masar-audience{gap:18px!important}
  html body #wrapwrap .masar-pay:not(.masar-page) .masar-audience__card{min-height:410px!important;padding:28px 24px!important}
  html body #wrapwrap .masar-pay:not(.masar-page) .masar-audience__title{font-size:1.65rem!important;line-height:1.4!important}
  html body #wrapwrap .masar-pay:not(.masar-page)>#about{padding-block:40px!important}
  html body #wrapwrap .masar-pay:not(.masar-page) .masar-principles{gap:14px!important}
  html body #wrapwrap .masar-pay:not(.masar-page) .masar-principle{padding:22px!important}
  html body #wrapwrap .masar-pay:not(.masar-page) .masar-principle__lines{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px!important}
  html body #wrapwrap .masar-pay:not(.masar-page) .masar-principle__line{
    padding:8px 10px;background:#f5f7fa;border-radius:10px;font-size:.925rem!important;line-height:1.5!important;
  }
  html body #wrapwrap .masar-pay:not(.masar-page)>.masar-opportunity{padding-block:32px!important}
  html body #wrapwrap .masar-pay:not(.masar-page) .masar-opportunity__inner{gap:20px!important}
  html body #wrapwrap .masar-pay:not(.masar-page) .masar-opportunity__title{font-size:1.7rem!important}
  html body #wrapwrap .masar-pay:not(.masar-page) .masar-opportunity .masar-lockup{width:180px!important}
  html body #wrapwrap .masar-pay:not(.masar-page)>.masar-closing{padding-block:38px!important}
  html body #wrapwrap .masar-pay:not(.masar-page) .masar-closing__title{font-size:1.75rem!important}
  html body #wrapwrap .masar-pay:not(.masar-page) .masar-closing__lead{max-width:34ch;font-size:1rem!important}
  html body #wrapwrap .masar-pay:not(.masar-page) .masar-closing__actions{gap:0!important}
}
@media(prefers-reduced-motion:reduce){
  html body #wrapwrap .masar-pay:not(.masar-page) .masar-service-carousel__dot::before{transition:none}
}

@media(max-width:1180px){
  html body #wrapwrap .masar-pay:not(.masar-page) .masar-principles{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(min-width:1181px){
  html body #wrapwrap .masar-pay:not(.masar-page) .masar-principles{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(max-width:360px){html body #wrapwrap .masar-pay:not(.masar-page) .masar-service-carousel__bar{gap:8px}}