/* ZainMed — Arabic / right-to-left overrides (loaded only on Arabic pages) */
:root{--f:"Tajawal","Montserrat",system-ui,sans-serif}
body{font-family:var(--f);line-height:1.8}
h1,h2,h3,h4,.slide .h1{letter-spacing:0;line-height:1.3}
.slide h1,.slide .h1{line-height:1.25}
.btn,.chip,.badge,.menu>a,.menu .dd>button,.hstep .n{letter-spacing:0}

/* arrows and directional icons point the other way */
.btn svg,.more svg,.hero-arrow svg,.arrows svg{transform:scaleX(-1)}
.btn:hover svg,.more:hover svg{transform:scaleX(-1) translate(3px,-3px)}

/* header */
.pill{padding:0 30px 0 14px}
.mega{left:auto;right:-30px}
.icon-btn.lang{width:auto;padding:0 14px;font-weight:800;font-size:.85rem;font-family:"Montserrat",sans-serif}
.zm-ar .icon-btn.lang{font-family:"Tajawal",sans-serif}

/* hero layers: copy sits on the right, device on the left */
.ly-word{justify-content:flex-start;padding-right:0;padding-left:3vw}
.ly-mid,.ly-fg{-webkit-mask:linear-gradient(270deg,transparent 0,transparent 38%,rgba(0,0,0,.6) 50%,#000 64%);mask:linear-gradient(270deg,transparent 0,transparent 38%,rgba(0,0,0,.6) 50%,#000 64%)}
.slide:not(.dark) .ly-bg.has-img::after{background:linear-gradient(270deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.45) 35%,transparent 62%)}
.slide.dark .ly-bg::after{background:linear-gradient(270deg,rgba(30,18,46,.92) 0%,rgba(46,31,66,.75) 38%,rgba(46,31,66,.15) 70%,rgba(46,31,66,.35) 100%)}
.orb.o1{right:auto;left:38%}.orb.o2{right:auto;left:8%}
.rings{right:auto;left:12%}
.hero-ctrl .count{margin-left:0;margin-right:auto}
.dots{margin-left:0;margin-right:8px}
.dots button.on i{transform-origin:right}
.slide .dev .float{transform:scaleX(-1)}

/* product page hero */
.pp-device,.pp-floor,.pp-ring{left:40%}
.pp-copy{left:auto;right:max(16px,calc((100vw - var(--wrap))/2))}
.pp-badges{right:auto;left:max(16px,calc((100vw - var(--wrap))/2))}
.pp-sticky::after{background:linear-gradient(270deg,rgba(255,255,255,.8) 0%,rgba(255,255,255,.45) 32%,transparent 55%)}
.pp-ly.mid,.pp-ly.fg{-webkit-mask:linear-gradient(270deg,transparent 0,transparent 34%,rgba(0,0,0,.6) 46%,#000 60%);mask:linear-gradient(270deg,transparent 0,transparent 34%,rgba(0,0,0,.6) 46%,#000 60%)}
.callout.l{flex-direction:row-reverse}.callout:not(.l){flex-direction:row}

/* sections */
.hsteps .rail{padding-left:0;padding-right:max(16px,calc((100vw - var(--wrap))/2))}
.hsteps .sec-head{text-align:right!important;margin-right:0!important}
.svc-ic{right:auto;left:14px}
.badge{left:auto;right:14px}
.ph::after{left:auto;right:12px}
.video-card .yt{left:auto;right:18px}
.tc.feature .pill-tag{right:auto;left:16px}
.tc.rating .bar i{margin-right:0}
.tt-bars,.journey{direction:rtl}
.journey::before,.journey .fill{left:auto;right:0}
.jstep::before{left:auto;right:0}
.specs th,.specs td{text-align:right}
.ticks li::before{margin-top:6px}
.faq summary{text-align:right}
.ftr::before{right:auto;left:-120px}
.cta::after{right:auto;left:-60px}
.wa-float{right:auto;left:20px}
.marq .row{animation-name:marq-rtl}
@keyframes marq-rtl{to{transform:translateX(50%)}}
.form label i{margin-right:2px}
@media (max-width:860px){
  .pp-device,.pp-floor,.pp-ring{left:50%}
  .pp-copy{left:auto;right:auto}
  .ly-mid,.ly-fg,.pp-ly.mid,.pp-ly.fg{-webkit-mask:linear-gradient(180deg,transparent 0,transparent 40%,#000 62%);mask:linear-gradient(180deg,transparent 0,transparent 40%,#000 62%)}
  .slide:not(.dark) .ly-bg.has-img::after{background:linear-gradient(180deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.5) 38%,transparent 60%)}
  .slide.dark .ly-bg::after{background:linear-gradient(180deg,rgba(30,18,46,.92) 0%,rgba(46,31,66,.7) 40%,rgba(46,31,66,.2) 70%)}
  .pp-sticky::after{background:linear-gradient(180deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.5) 34%,transparent 55%)}
  .hero-ctrl .count{margin-right:auto;margin-left:70px}
}
.mnav a.sub{padding-left:0;padding-right:16px}.mnav a{text-transform:none}
