/* Right to left: Arabic, Hebrew, Persian and Urdu (founder, 2026-11-02: the website in every
   language the setup screens speak). Only the pages in those languages load this file
   (<html dir="rtl">, written by scripts/build-locales.mjs); the English pages and the
   left-to-right languages never see it.

   The direction mirrors the flex and grid rows by itself. What the site's styles place by physical
   sides (margins, paddings, borders, positions, text-align) the build mirrors: those pages load
   mirrored copies of the stylesheets (css/rtl/<file>, from css/<file>) and their own styles come
   mirrored. This file holds the few rules that are not a mirror.

   The animated blocks and the charts keep the English layout, exactly (founder rule: animations
   untouched): the build marks them dir="ltr" (the strips of real builds, the wall, the payoff
   chart, the numbers chart, the live demo's stage, the Everything included animations, the
   hosting share chart), leaves their rules unmirrored, and every @keyframes, transition and
   transform is the English one. The only thing said about them here: the words inside read in
   their own direction (unicode-bidi: plaintext), so an Arabic label's full stop stays at its end. */

/* Inside a left-to-right block, each run of words takes the direction of its own letters. */
html[dir="rtl"] [dir="ltr"] :is(p, li, span, a, b, strong, em, small, button, label, h1, h2, h3, h4, h5, h6, figcaption, dt, dd, td, th, text, tspan) {
  unicode-bidi: plaintext;
}

/* The role names in the What your team does cards are drawn in an SVG after the icon (x=40): they
   read from that point on, so they never run back over the icon. */
html[dir="rtl"] .impact-card-logo text { direction: ltr; }

/* Arrows the styles draw point the way the reader reads. */
html[dir="rtl"] .impact-card-link::after { content: "\2190"; }
html[dir="rtl"] .land-report li.next::before { content: "\2190"; }
html[dir="rtl"] .cs .link-arrow::after { content: "\2190"; }
html[dir="rtl"] .evr-foot a::after { content: " \2190"; }
/* The describe box's start button: its arrow (an SVG) points the reading way. */
html[dir="rtl"] .hero-submit svg { transform: scaleX(-1); }