/* Arabic: right-to-left layout and type. Loaded only on /ar/ pages, after styles.css. */
:root {
  --font-sans: "Noto Sans Arabic", "Inter Tight", "Inter", ui-sans-serif, system-ui, "Geeza Pro", Tahoma, sans-serif;
}
/* Arabic letters join; tracking (positive or negative) breaks them apart. */
body *:not(.brand-word):not(.brand-word *):not(.foot-word) { letter-spacing: 0 !important; }
.h-display-lg, .h-display, .h-lg, .h-md, .rule h3, .book h3, .shout q {
  font-family: "Noto Kufi Arabic", var(--font-sans); line-height: 1.35;
}
.statement, .poem, .quote-line { line-height: 1.6; }
.eyebrow, .btn, .text-link, .tag-upper { font-size: 13.5px; }

/* The logo, code samples, URLs and the giant footer word stay left to right. */
.brand, .foot-word, .file, .qlist p, .panel-url, .lang-switch, [dir="ltr"] { direction: ltr; }

/* Arrows */
.flip { transform: scaleX(-1); }
.btn:hover svg.flip, .text-link:hover svg.flip { transform: translateX(-3px) scaleX(-1); }
.btn:hover .go { transform: translateX(-3px); }
.tab-btn .arr { transform: translateX(4px) scaleX(-1); }
.tab-btn[aria-selected="true"] .arr { transform: scaleX(-1); }
#vprev svg, #vnext svg { transform: scaleX(-1); }

/* Physical offsets mirrored */
.skip { left: auto; right: 16px; }
.mobile-menu .sub a { padding-left: 2px; padding-right: 18px; }
.panel-url { margin-left: 0; margin-right: auto; }
.cursor { margin-left: 0; margin-right: 2px; }
.cluster { text-align: right; }
.dash { left: auto; right: 228px; }
.profile { left: auto; right: 0; }
.code { right: auto; left: 0; }
.feature::before { left: auto; right: 0; }
.stat { padding: 28px 0 0 24px; }
.stat b sup { margin-left: 0; margin-right: 2px; }
.quote-line { padding-left: 0; border-left: 0; padding-right: 20px; border-right: 2px solid var(--accent); }
.flow { left: auto; right: -32px; }
.process-step:not(:last-child)::after { right: auto; left: -16px; }
.tab-btn { text-align: right; }
.principle { padding: 32px 0 8px 32px; }
.industries { border-left: 0; border-right: 1px solid var(--mist); }
.industry { border-right: 0; border-left: 1px solid var(--mist); }
.progress { transform-origin: 100% 50%; }

@media (min-width: 641px) {
  .stat + .stat { padding-left: 0; border-left: 0; padding-right: 24px; border-right: 1px solid var(--mist); }
}
@media (max-width: 1100px) {
  .stat-note { border-right: 0 !important; }
}
@media (min-width: 901px) {
  .principle + .principle { padding-left: 0; border-left: 0; padding-right: 32px; border-right: 1px solid var(--mist); }
}
@media (max-width: 900px) {
  .flow { right: 16px; }
  .process-step:not(:last-child)::after { left: auto; right: 58px; }
}
@media (max-width: 1100px) {
  .cluster .panel { right: auto; }
}

/* Homepage */
.cluster-fit .dash { left: auto; right: 176px; }
.cluster-fit .profile { left: auto; right: 0; }
.cluster-fit .code { right: auto; left: 0; }
@media (max-width: 1100px) {
  .cluster-fit .panel { right: auto; left: auto; }
}
.w-side { right: auto; left: max(var(--gutter), calc((100vw - var(--page-max)) / 2 + var(--gutter))); }
.w-top { left: auto; right: max(var(--gutter), calc((100vw - var(--page-max)) / 2 + var(--gutter))); }
@media (max-width: 700px) { .w-side { left: var(--gutter); right: var(--gutter); } }
.varrows { right: auto; left: 1.2rem; }
.jfinal { left: auto; right: 1.2rem; }
.jreplay { right: auto; left: 1rem; }
.cc::before { right: auto; left: -40px; }
/* Scroll-driven word tracks move left to right in every language. */
.wmask, .pbword { direction: ltr; }