/* Sfere About v5, Arabic: right-to-left layer over _page/page.css (the shared page, sections 02 to the footer).
   Hero rules live in lens.css (h1-lens) and h2.css (h2-lifetime).
   One family for Arabic and Latin (IBM Plex Sans Arabic, as on the live Arabic site), no tracking,
   taller lines for Arabic letterforms, and every directional rule mirrored.
   page.css and hero.css set some of these inside media queries, so the same breakpoints are restated here. */

html[lang|="ar"] *,html[lang|="ar"] *::before,html[lang|="ar"] *::after{font-family:'IBM Plex Sans Arabic',system-ui,sans-serif !important;letter-spacing:0 !important;text-transform:none !important}
body{font-size:17.5px;line-height:1.75}

/* Type: Arabic needs more room above and below the line than the Latin display face */
h1,h2,h3{line-height:1.32;font-weight:700}
h1{line-height:1.28}
.w{padding:.16em .06em .34em;margin:-.16em -.06em -.34em}
.lede{line-height:1.8}
.ask-q{line-height:1.4}
.one-n{line-height:1.2}
.bk-id b{line-height:1.35}
.bk-bio{line-height:1.7 !important}
.tw-cap{line-height:1.5}

/* Skip link, progress, nav */
.skip{left:auto;right:-999px}
.skip:focus{right:12px}
.progress i{transform-origin:right;background:linear-gradient(270deg,var(--l1),var(--p))}
.links{margin-left:0;margin-right:auto}
.menu{margin-left:0;margin-right:auto}

/* The gap */
.size{left:auto;right:50px}
.wa-t{padding-left:0;padding-right:2px}
.wa-b{border-radius:14px 4px 14px 14px}

/* Today: incoming messages sit on the right in an Arabic chat */
.srcs li{padding:0 9px 0 16px}
.srcs li>i{margin-left:0;margin-right:auto}
.ph-in{border-radius:16px 4px 16px 16px}
.ph-out{border-radius:4px 16px 16px 16px}
.ph-ord b{margin-left:0;margin-right:3px}
.d-tag{left:auto;right:clamp(22px,3.4vw,52px)}
.tw-tag{left:auto;right:clamp(22px,3.6vw,52px)}

/* Weekly working session */
.tile figcaption{left:auto;right:8px}
.eq{right:auto;left:9px}
.agenda{margin-left:0;margin-right:6px}
.sh-l span,.sh-v{margin-left:0;margin-right:auto}
.sh-row{padding:8px 8px 8px 10px}

/* Six weeks: bars run from the right */
.tl-row strong{text-align:left}
.tl-track{background-image:linear-gradient(270deg,rgba(65,51,106,.12) 1px,transparent 1px);background-position:right top}
.bar,.pin,.rep{left:auto;right:calc(var(--s) / 6 * 100%)}
.bar.big{background:linear-gradient(270deg,var(--p2),var(--p))}
.pin{margin:-12px -12px 0 0}
.wk{left:auto;right:calc(var(--s) / 6 * 100% + 4px)}
html.js:not(.still) .stage.in .bar,html.js:not(.still) .stage.in .wk{transform-origin:right}

/* One number */
.one{margin:-20px clamp(-44px,-2.8vw,-10px) 0 0;rotate:2deg}
.one-n .ic{rotate:-135deg}
.spark{transform:scaleX(-1)}

/* Vision */
.caret::after{left:auto;right:2px}
.task{padding:12px 12px 12px 16px}
.wall{direction:ltr}
.mb{direction:rtl;text-align:right}

/* What we believe */
.bf svg{margin-left:0;margin-right:-9px}
.bf svg:first-child{margin-right:0}
.vio{background:linear-gradient(270deg,var(--p2),var(--p))}
.vio.base{background:linear-gradient(270deg,#5B34E0,var(--p))}
.t-ads .amb{background:linear-gradient(270deg,#F2AE55,#E0902F)}
.t-ads .stack>:first-child::after{content:"إعلانات مدفوعة"}
.blk.add::before{left:auto;right:-14px;translate:100% -50%}

/* Team badges */
.holder{text-align:right}
.bd-turn{right:auto;left:12px}
@keyframes peek{40%{transform:rotateY(34deg)}}

/* CTA and footer */
.cta-panel::before{right:auto;left:-12%}
.deliver li:nth-child(2){margin-left:0;margin-right:clamp(0px,3vw,44px)}
.deliver li:nth-child(3){margin-left:0;margin-right:clamp(0px,6vw,88px)}
.fine{text-align:left}

@media (max-width:980px){
  .menu{margin-right:0}
  .nav-cta{margin-left:0;margin-right:auto}
  .one{margin-left:auto;margin-right:auto}
  .deliver li:nth-child(n){margin-right:0}
  .fine{text-align:right}
}
@media (max-width:640px){
  .size{right:40px}
  .task{padding:10px 10px 10px 12px}
  .blk.add::before{right:-8px}
  .bd-turn{left:9px}
}
@media (max-width:380px){
  .menu{margin-right:auto}
}
@media (max-width:370px){
  #gap h2{font-size:31px}  /* keeps «جزء من الصورة» together on the second line */
}

/* Sfere About v5, Arabic: the lens hero (h1-lens) right to left, loaded after h1-lens/hero.css and ar.css.
   The stage keeps the English layout, so hero.js draws the same strands and beams, and is mirrored as a
   whole: sources on the right, outcomes on the left. Every label is turned back so it reads normally.
   The `scale` property is used so the reveal and drift animations on `transform` still run. */

.hx-lens{background:
    radial-gradient(46% 62% at 28% 48%,rgba(120,80,248,.42),rgba(120,80,248,0) 70%),
    radial-gradient(40% 55% at 96% 104%,rgba(224,144,47,.2),rgba(224,144,47,0) 70%),
    linear-gradient(180deg,#171226 0%,#211939 55%,#2B2245 100%)}
.lx-dots{-webkit-mask-image:radial-gradient(58% 62% at 30% 48%,#000,transparent);mask-image:radial-gradient(58% 62% at 30% 48%,#000,transparent)}

.lx-in{direction:ltr;scale:-1 1}
.lx-src li,.lx-out li,.sn,.lx-ring,.lx-team,.lx-tag,.lx-steps{scale:-1 1}
.lx-src li,.lx-out li,.sn,.lx-team,.lx-tag,.lx-steps{direction:rtl}
.lx-src li{padding:calc(var(--u)*5) calc(var(--u)*5) calc(var(--u)*5) calc(var(--u)*14)}
.lx-out li{padding:calc(var(--u)*8) calc(var(--u)*8) calc(var(--u)*8) calc(var(--u)*14)}
.sn{padding:4px 8px 4px 10px}
.lx-ring .arc{font-size:20px;font-weight:500;stroke-width:4px}
.lx-out b{line-height:1.3}
.lx-out small{line-height:1.3}
/* the snippets drift toward the sphere, which now sits to their left */
@keyframes lxsnip{0%{opacity:0;transform:translateX(14px)}10%{opacity:1}62%{opacity:1}78%,100%{opacity:0;transform:translateX(-26px)}}

@container lx (max-width:559px){
  .lx-src li{padding:4px 4px 4px 10px}
  .lx-out li{padding:7px 7px 7px 12px}
  .lx-out small{text-align:left}
}

/* HTML preserves Arabic joining and bidi order in Safari, unlike SVG textPath. */
.lx-arc-label{position:absolute;left:50%;top:-2%;translate:-50% 0;scale:-1 1;direction:rtl;white-space:nowrap;font-size:clamp(12px,2.7cqw,19px);font-weight:500;line-height:1.6;color:#D8CCFF;text-shadow:0 1px 4px #1D1533}
@container lx (max-width:559px){.lx-arc-label{display:none}}