/* FICAVO — Arabic edition (ar/). Loaded after ficavo.css on pages with <html lang="ar" dir="rtl">.
   Latin words keep NeueMontreal / Satoshi; Arabic glyphs fall through to Almarai.
   The italic serif accent becomes Almarai Light, a quiet contrast to the bold headings. Only direction-dependent rules are overridden here. */

/* Latin words inside Arabic headings (client names like Truck.sa, Arcofintech) keep the English site's
   NeueMontreal Medium even where the Arabic is bold: a Latin-only alias family where every heavy weight maps to Medium. */
@font-face { font-family: "NM Latin"; src: url("../fonts/NeueMontreal-Regular.woff2") format("woff2"); font-weight: 100 449; font-display: swap; unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "NM Latin"; src: url("../fonts/NeueMontreal-Medium.woff2") format("woff2"); font-weight: 450 1000; font-display: swap; unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2122; }

:root {
  --font-main: "NM Latin", "Almarai", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Satoshi", "Almarai", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Almarai", Georgia, serif;
}

/* Arabic is cursive: tracking breaks the joins, and the glyphs need taller lines */
[dir="rtl"] body, [dir="rtl"] body * { letter-spacing: 0 !important; }
/* ...except Latin words in headings / titles (wrapped in .lat by build_ar.py): same tracking as the English site */
[dir="rtl"] body .lat { letter-spacing: -0.02em !important; }
[dir="rtl"] body .t-display .lat, [dir="rtl"] body .t-h1 .lat, [dir="rtl"] body h1 .lat { letter-spacing: -0.04em !important; }
[dir="rtl"] body .t-h2 .lat, [dir="rtl"] body h2 .lat { letter-spacing: -0.03em !important; }
[dir="rtl"] body { line-height: 1.75; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { line-height: 1.3; font-weight: 700; }
[dir="rtl"] .t-display { line-height: 1.22; }
[dir="rtl"] .t-h1, [dir="rtl"] .t-h2 { line-height: 1.25; }
[dir="rtl"] .ser { font-style: normal; font-weight: 300; font-size: 1em; line-height: 1; padding-right: 0; padding-left: .04em; }
[dir="rtl"] .t-lead, [dir="rtl"] p { line-height: 1.8; }

/* rotating hero word: anchored on the right, a little taller for Arabic */
[dir="rtl"] .rot { height: 1.5em; }
[dir="rtl"] .rot__w { left: auto; right: 0; line-height: 1.5em; padding: 0 .02em 0 .07em; }
[dir="rtl"] .rotwrap { vertical-align: -0.42em; }
[dir="rtl"] .hrot__anim { font-weight: 800; }

/* arrows and chevrons point the reading direction */
[dir="rtl"] svg:has(> path[d="M1 8h13M9 3l5 5-5 5"]),
[dir="rtl"] svg:has(> path[d="M15 18l-6-6 6-6"]),
[dir="rtl"] svg:has(> path[d="M9 6l6 6-6 6"]) { transform: scaleX(-1); }
[dir="rtl"] .btn:hover svg:has(> path[d="M1 8h13M9 3l5 5-5 5"]),
[dir="rtl"] .svc__more:hover svg { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .menu__links a:hover { transform: translateX(-10px); }
[dir="rtl"] .prow:hover .prow__name { transform: translateX(-8px); }
[dir="rtl"] .prow:hover .prow__go { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .pick__tab:hover { transform: translateX(-4px); }
@media (max-width: 1040px) {
  [dir="rtl"] .menu__links a::after { transform: rotate(-135deg); margin-right: 0; margin-left: 4px; }
}
[dir="rtl"] .pick__tl li:not(:last-child)::after { right: auto; left: -10px; transform: rotate(-135deg); }

/* text alignment */
[dir="rtl"] .person, [dir="rtl"] .byline, [dir="rtl"] .svc-facts div,
[dir="rtl"] .cmp th, [dir="rtl"] .cmp td, [dir="rtl"] .pick__tab { text-align: right; }

/* lines, borders and paddings that sit on one side */
[dir="rtl"] .article blockquote { padding: 30px 64px 30px 32px; border-right: 0; }
[dir="rtl"] .article blockquote::before { left: auto; right: 18px; content: "«"; }
[dir="rtl"] .svc-facts div + div { border-left: 0; border-right: 1px solid var(--line); }
@media (max-width: 700px) { [dir="rtl"] .svc-facts div + div { border-right: 0; } }
[dir="rtl"] .founder__note { padding-left: 0; border-left: 0; padding-right: 40px; border-right: 1px solid var(--line); }
@media (max-width: 960px) { [dir="rtl"] .founder__note { padding-right: 0; border-right: 0; } }
[dir="rtl"] .letter__sig .btn { margin-left: 0; margin-right: auto; }
@media (max-width: 900px) { [dir="rtl"] .letter__sig .btn { margin-right: 0; } }
[dir="rtl"] .car__ctrl .btn { margin-left: 0; margin-right: 8px; }
[dir="rtl"] .car__ctrl--bottom .btn { margin-right: 0; }
[dir="rtl"] .share > span { margin-right: 0; margin-left: 6px; }
[dir="rtl"] .plan__price small { margin-left: 0; margin-right: 4px; }
[dir="rtl"] .mmt__price small { margin-right: 0; margin-left: 3px; }
[dir="rtl"] .cmp__y { margin-right: 0; margin-left: 4px; }
[dir="rtl"] .avs { margin-right: 0; margin-left: 4px; }
[dir="rtl"] .avs img { margin-left: 0; margin-right: -8px; }
[dir="rtl"] .avs img:first-child { margin-right: 0; }
[dir="rtl"] .tile__label strong::before { margin-right: 0; margin-left: 8px; }
[dir="rtl"] .wa__hic { margin-left: 0; margin-right: 14px; }

/* little floating labels */
[dir="rtl"] .frame__hint { right: auto; left: 14px; }
[dir="rtl"] .tile__label { left: auto; right: 14px; }
[dir="rtl"] .sw__role { left: auto; right: 22px; }
[dir="rtl"] .sw--hero .sw__role { left: auto; right: 32px; }
[dir="rtl"] .sw__copy { right: auto; left: 20px; }
[dir="rtl"] .sw--hero .sw__copy { right: auto; left: 28px; }
[dir="rtl"] .sw { align-items: flex-start; }
[dir="rtl"] .progress span { transform-origin: right; }
[dir="rtl"] .wa-float { right: auto; left: 20px; }

/* search field: icon on the left */
[dir="rtl"] .jsearch svg { right: auto; left: 14px; }
[dir="rtl"] .jsearch input { padding: 0 18px 0 42px; }

/* things that are always left-to-right */
[dir="rtl"] input[type="email"], [dir="rtl"] input[type="url"], [dir="rtl"] input[type="tel"],
[dir="rtl"] .hiw-live__url, [dir="rtl"] code { direction: ltr; text-align: right; }
[dir="rtl"] .hiw-live__url { margin-left: 0; margin-right: 8px; }

/* WhatsApp chat: mirrored like WhatsApp in Arabic */
[dir="rtl"] .wa__b { border-top-left-radius: 8px; border-top-right-radius: 0; padding: 7px 10px 8px 9px; }
[dir="rtl"] .wa__b::before { left: auto; right: -8px; clip-path: polygon(0 0, 100% 0, 0 100%); }
[dir="rtl"] .wa__b--me { border-top-right-radius: 8px; border-top-left-radius: 0; }
[dir="rtl"] .wa__b--me::before { right: auto; left: -8px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
[dir="rtl"] .wa__meta { float: left; margin: 8px 12px -4px 0; }
[dir="rtl"] .wa__opts { padding-right: 0; padding-left: 12px; }

/* language switch reads in English on the Arabic site */
[dir="rtl"] .hd__lang { font-family: var(--font-main); }

/* numbers like 120+ and 100% stay in their English order */
[dir="rtl"] .ps__n, [dir="rtl"] .stat b { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .stat b, [dir="rtl"] .ps__n { display: inline-block; }
[dir="rtl"] .sw__hex, [dir="rtl"] .sw__rgb { direction: ltr; unicode-bidi: isolate; }

/* currency switch (AED / SAR): a sliding segmented control, added by ficavo.js next to the prices */
.curx { --i: 0; display: flex; align-items: center; justify-content: center; gap: 12px; margin: 18px 0 0; }
.curx:has(+ .pkgs) { margin: 0 0 28px; }
.curx__seg { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 4px; border-radius: 999px;
  background: color-mix(in oklab, var(--violet) 7%, #f1f1f4); box-shadow: inset 0 1px 2px rgba(17, 17, 40, .08), inset 0 0 0 1px color-mix(in oklab, var(--violet) 14%, #e2e3e9); }
.curx__thumb { position: absolute; top: 4px; bottom: 4px; right: 4px; width: calc((100% - 8px) / 3); border-radius: 999px; background: var(--ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 4px 12px -4px rgba(17, 17, 40, .45);
  transform: translateX(calc(var(--i) * -100%)); transition: transform .45s cubic-bezier(.3, 1.3, .5, 1); }
.curx button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 128px; height: 40px; padding: 0 16px; line-height: 1;
  border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: inherit; cursor: pointer; transition: color .3s; }
.curx button b, .curx button small { display: block; line-height: 1; }
.curx button b { font-family: var(--font-main); font-size: 14.5px; font-weight: 600; padding-top: 1px; }
.curx button small { font-size: 12px; opacity: .75; }
.curx button:hover { color: var(--ink); }
.curx button[aria-pressed="true"] { color: var(--bg); }
.curx button:focus-visible { outline: 2px solid var(--violet-ink); outline-offset: 2px; }
@media (max-width: 480px) { .curx button { min-width: 0; padding: 0 12px; } .curx button small { display: none; } }
@media (prefers-reduced-motion: reduce) { .curx__thumb { transition: none; } }

/* price blocks: currency code and "one-time" sit on the correct sides in RTL */
[dir="rtl"] .pkg__cur { font-size: 20px; margin: 12px 8px 0 0; }
[dir="rtl"] .pkg__once { margin: 0 10px 8px 0; }

/* hero "Software" scene: the </> chip stays left-to-right; the Arabic build tag uses Almarai, not the mono font */
[dir="rtl"] .dsoft__chip { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .dsoft__tag { font-family: "Almarai", sans-serif; font-size: 13px; direction: rtl; }
[dir="rtl"] .dsoft__caret { right: auto; left: -.02em; }
[dir="rtl"] .dsoft__tag { right: auto; left: -.5em; }
[dir="rtl"] .dsoft__chip { left: auto; right: -.42em; }
@media (max-width: 700px) { [dir="rtl"] .dsoft__tag { right: auto; left: -.2em; } [dir="rtl"] .dsoft__chip { left: auto; right: -.62em; } }

/* Services mega menu: Arabic service names are longer, so keep the package boxes as wide as on the English site */
@media (min-width: 1041px) {
  [dir="rtl"] .mm__in { grid-template-columns: auto minmax(620px, 1fr); column-gap: clamp(40px, 4vw, 72px); }
  [dir="rtl"] .mm__col--main a { font-size: clamp(18px, 1.45vw, 21px); padding: 5px 0; }
  [dir="rtl"] .mm__svc { column-gap: clamp(24px, 2.4vw, 40px); }
}
[dir="rtl"] .mmt__name { font-size: 12.5px; line-height: 1.35; }
[dir="rtl"] .mmt__price { display: flex; align-items: baseline; gap: 4px; font-size: 19px; white-space: nowrap; }
[dir="rtl"] .mmt__price small { margin: 0; }
[dir="rtl"] .mm__col--main a { white-space: nowrap; }
@media (min-width: 1041px) and (max-width: 1280px) { [dir="rtl"] .mm__in { grid-template-columns: auto minmax(480px, 1fr); } [dir="rtl"] .mm__col--main a { font-size: 17px; } }