/* Arabic pages only (<html lang="ar" dir="rtl">), loaded after every other stylesheet.
   English pages never load this file, so nothing here can change the English site.
   Spec: Experience Design AR-SHELL-SPEC v1 and RTL-AUDIT (1 Nov 2026). Each block below mirrors the
   physical left/right rules the audit found; symmetric rules (left:0;right:0, inset, translateX(-50%)
   centring) need nothing. Flex and grid rows mirror by themselves under dir="rtl". */

/* ---- Font: IBM Plex Sans Arabic isn't self-hosted yet (Mo's font OK is open), so Arabic uses the system font. Add the @font-face rules back with the files. ---- */
:root:lang(ar){--font-body:"IBM Plex Sans Arabic","IBM Plex Sans",sans-serif;--font-display:"IBM Plex Sans Arabic","IBM Plex Sans",sans-serif}
body:lang(ar){font-family:var(--font-body)}

/* ---- Type: Arabic letters join, so no tracking, no uppercase, no italics; taller headings so the
   marks above and below the letters aren't clipped ---- */
:lang(ar) *{letter-spacing:0!important;font-style:normal}
:lang(ar) .eyebrow,:lang(ar) .sc-kicker,:lang(ar) .sc-call small,:lang(ar) .pd-eyebrow,:lang(ar) .pd-pricing-flag{font-family:var(--font-body);text-transform:none}
:lang(ar) h1,:lang(ar) h2,:lang(ar) h3,:lang(ar) h4,:lang(ar) .h1,:lang(ar) .h2,:lang(ar) .h3,:lang(ar) .sc-h1{line-height:1.3}
:lang(ar) .section p,:lang(ar) .sc-sub,:lang(ar) .lead{line-height:1.8}
/* URLs and code keep the mono font. Other Latin runs (product names, numbers) sit in <bdi dir="ltr">,
   added by tools/ar-build.py, which keeps their order but not a different font. */
:lang(ar) .url,:lang(ar) code{font-family:var(--font-mono)}

/* ---- Doesn't flip: the Mantle logo and mark, screenshots, video, charts, code ---- */
[dir="rtl"] .nav-logo,[dir="rtl"] .mui-logo{direction:ltr}

/* ---- Hero: mirror the photo so the subject sits opposite the text.
   Photos with text, a logo, a watch or writing in them get class="no-flip". ---- */
/* The flip already mirrors the crop, so object-position stays as the base rules set it */
[dir="rtl"] .sc-hero__scene img{transform:scaleX(-1)}
[dir="rtl"] .sc-hero__scene img.no-flip{transform:none}
/* The shade for the text sits on the right in RTL, so the subject (now on the left) stays visible */
[dir="rtl"] .sc-hero::before{background:linear-gradient(270deg,rgba(14,14,20,.96) 0%,rgba(14,14,20,.82) 34%,rgba(14,14,20,.25) 62%,rgba(14,14,20,0) 80%),linear-gradient(0deg,rgba(14,14,20,.9) 0%,rgba(14,14,20,0) 22%)}
@media (max-width:900px){[dir="rtl"] .sc-hero::before{background:linear-gradient(0deg,#0E0E14 0%,rgba(14,14,20,0) 30%)}}
/* Callouts: mirror their positions without touching the inline left:% values, then un-mirror each card */
[dir="rtl"] .sc-callouts{transform:scaleX(-1)}
[dir="rtl"] .sc-callouts .sc-call{transform:scaleX(-1)}
[dir="rtl"] .sc-call.to-right::after{left:auto;right:100%;transform:scaleX(-1)}
[dir="rtl"] .sc-call.to-left::after{right:auto;left:100%;transform:none}
[dir="rtl"] .sc-call .big{margin-right:0;margin-left:8px}
[dir="rtl"] .sc-illus{right:auto;left:24px}
@media (max-width:600px){[dir="rtl"] .sc-hero .sc-ctas{padding-right:0;padding-left:68px}}
[dir="rtl"] body.sc-inner .hero-inner{text-align:right}

/* ---- Arrows point the reading direction ---- */
[dir="rtl"] .arrow{display:inline-block;transform:scaleX(-1)}
[dir="rtl"] .btn:hover .arrow{transform:scaleX(-1) translateX(3px)}
[dir="rtl"] .row-chev{margin-left:0;margin-right:auto;transform:scaleX(-1)}
[dir="rtl"] .member-row:hover .row-chev{transform:scaleX(-1) translateX(4px)}
[dir="rtl"] .member-row:hover{padding-left:0;padding-right:6px}
[dir="rtl"] .row-tag{margin-left:0;margin-right:.4em}
html.js-reveal-ready [dir="rtl"] .area-card.reveal:not(.is-visible) .member-row,
html.js-reveal-ready[dir="rtl"] .area-card.reveal:not(.is-visible) .member-row{transform:translateX(8px)}

/* ---- Numbers that stand alone keep left-to-right order ---- */
[dir="rtl"] .sc-live .num,[dir="rtl"] a[href^="tel:"],[dir="rtl"] .num{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .outcome-stat-unit{margin-left:0;margin-right:.1em}
/* Email, phone and web addresses are typed left to right */
[dir="rtl"] input[type="email"],[dir="rtl"] input[type="tel"],[dir="rtl"] input[type="url"]{direction:ltr;text-align:right}

/* ---- Steps: numbering runs right to left; on phone the line and dots move to the right edge ---- */
[dir="rtl"] .sc-steps::before{background:linear-gradient(270deg,#00C8E0,#7F26FD)}
@media (max-width:900px){
  [dir="rtl"] .sc-steps::before{left:auto;right:15px;background:linear-gradient(180deg,#00C8E0,#7F26FD)}
  [dir="rtl"] .sc-steps li{padding-left:0;padding-right:48px}
  [dir="rtl"] .sc-steps li i{left:auto;right:0}
}

/* ---- Lists with a bullet drawn on the left ---- */
[dir="rtl"] .bullet-list li{padding-left:0;padding-right:1.5rem}
[dir="rtl"] .bullet-list li::before{left:auto;right:0}
[dir="rtl"] .pd-feature-list li{padding-left:0;padding-right:1.4rem}
[dir="rtl"] .pd-feature-list li::before{left:auto;right:0}

/* ---- Headers, cards and banners ---- */
[dir="rtl"] .hero .lead{border-left:0;border-right:3px solid}
[dir="rtl"] .pd-hero-inner{text-align:right}
[dir="rtl"] .pd-pricing-flag{left:auto;right:24px}
[dir="rtl"] .area-card .area-anim{right:auto;left:var(--space-5)}
[dir="rtl"] .nav-logo .nav-wordmark{margin-left:0;margin-right:2px}
[dir="rtl"] .nav-logo .nav-wordmark-text{margin-left:0;margin-right:.15rem}
[dir="rtl"] .dt-banner a{margin-left:0;margin-right:8px}

/* ---- Decorative light (mesh blobs, orbit mark): mirrored so the light falls from the reading side ---- */
[dir="rtl"] .hero-mesh::before{left:auto;right:-15%}
[dir="rtl"] .hero-mesh::after{right:auto;left:-20%}
[dir="rtl"] .hero-orbit{right:auto;left:-8%}
@media (max-width:900px){[dir="rtl"] .hero-orbit{right:auto;left:-25%}}
[dir="rtl"] .hero-orbit:not(.hero-orbit-video){right:auto!important;left:4%!important}
[dir="rtl"] .pd-hero-mesh::before{left:auto;right:-15%}
[dir="rtl"] .pd-hero-mesh::after{right:auto;left:-15%}
[dir="rtl"] .viz-mesh::before{left:auto;right:-15%}
[dir="rtl"] .viz-mesh::after{right:auto;left:-10%}

/* Email addresses stay in reading order: the build wraps "sales" and "mantlenow.com" separately, so the @ was reordering them */
[dir="rtl"] a[href^="mailto:"]{direction:ltr;unicode-bidi:isolate;text-align:right}
/* Phone field: the flag and dial code sit on the right here, so the room for them goes on the right too; the number no longer sits on the dial code */
html[dir="rtl"] .iti input.iti__tel-input[type="tel"]{padding-left:16px!important;padding-right:76px!important;text-align:right}
[dir="rtl"] .iti__selected-dial-code{direction:ltr;unicode-bidi:isolate}