/* ==========================================================================
   Arabic pages only (/ar/...): right-to-left layout and the Arabic font.
   Linked by includes/header.php (wr_i18n_style_tags) and by lang.php's 404 page
   after the page's own stylesheets, so it wins ties. English pages never load it,
   except English-only pages read by an Arabic visitor (cookie wr_lang), where only
   <header> and <footer> carry lang="ar" dir="rtl" (section 7, 90-*.css).
   Notes: build/notes/layout-ar.md (strings), build/notes/ar-rtl-*.md (mirroring).

   Conventions in this file
   - :lang(ar)   script rules (font, tracking, case, slant, line height). They hold
                 in either direction, so the mirror check can flip dir and compare.
   - [dir=rtl]   direction rules (mirroring, isolation). Rules for the shared chrome
                 must not need <html dir=rtl>: on English-only pages only the
                 header and footer are right to left.
   - Everything is mirrored, product mocks included (MG, 31 Oct; build/AR-RTL.md).
     Code, URLs, emails, numbers and brand marks stay left to right inside their
     mirrored boxes.
   ========================================================================== */

/* ---- 1. Font --------------------------------------------------------------
   Noto Sans Arabic (Google Fonts, OFL; the Arabic subset Google serves, variable
   weight), self-hosted like the site's own fonts. It is added to the families the
   site already names, with the same style and weight descriptors, so every font
   stack on every page picks it up for Arabic letters only (unicode-range) and
   Latin text keeps Inter, Instrument Serif and JetBrains Mono. Same descriptors
   matter: browsers choose one face group per family and weight, so a different
   weight range would leave Arabic on a system font. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/i18n/fonts/noto-sans-arabic-v33-arabic-wght.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/i18n/fonts/noto-sans-arabic-v33-arabic-wght.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/i18n/fonts/noto-sans-arabic-v33-arabic-wght.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(/assets/i18n/fonts/noto-sans-arabic-v33-arabic-wght.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
/* The same file under a family of its own, for stacks that name none of the three
   brand fonts (the site's mono chips and logs, section 2). Written first in such a
   stack it takes the Arabic letters only; every other character falls through to
   the stack as before, and line metrics still come from the stack's Latin font
   (the face has no space glyph in its range). */
@font-face{font-family:'WR Arabic';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/i18n/fonts/noto-sans-arabic-v33-arabic-wght.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

/* ---- 2. Arabic typography ---------------------------------------------------
   Arabic letters join: any tracking pulls them apart, and the site tracks many
   labels, eyebrows and headlines (footer column titles 0.1em, drawer label
   0.06em, home hero -0.052em, mock labels). Case and slant mean nothing in Arabic;
   uppercase would only shout the Latin names inside a label, and a slant is a fake
   oblique. */
:lang(ar) body, :lang(ar) body *, :lang(ar) body *::before, :lang(ar) body *::after { letter-spacing: 0 !important; text-transform: none !important; }
/* The wordmark too. It is Arabic here (MG, 1 Nov: WebRun in Arabic letters, the
   "Run" part in orange), and the English logo's tracking (-0.02em in the header,
   -0.04em in the footer's giant logo) would pull its letters apart. Named on its
   own so it also holds where only the header and footer are Arabic (section 7). */
:lang(ar) :is(.logo, .logo-word, .giant-logo-text, .footer-minimal-brand),
:lang(ar) :is(.logo, .giant-logo-text, .footer-minimal-brand) * { letter-spacing: 0 !important; }
:lang(ar) body * { font-style: normal !important; }

/* Arabic needs taller lines than the Latin headlines were tuned for (1.0 to 1.1). */
:lang(ar) h1, :lang(ar) h2 { line-height: 1.3; }
:lang(ar) h3, :lang(ar) h4 { line-height: 1.4; }
:lang(ar) .page-home .hero h1 { line-height: 1.25; }

/* Arabic in a sans runs wider than the condensed Latin display serif, so more
   headlines take two lines, and several left one word alone on the last line
   (phones above all). Balanced headlines and "pretty" paragraphs avoid that in
   current browsers (Chrome 114/117, Safari 17.5, Firefox 121 for balance); older
   ones wrap as before. */
:lang(ar) :is(h1, h2, h3) { text-wrap: balance; }
:lang(ar) p { text-wrap: pretty; }

/* Headlines: one sans voice. Arabic letters are Noto Sans Arabic in either family,
   so the serif only ever reached the Latin words, and "WebRun", "API" or "Gmail" in
   the Latin display serif looked pasted into an Arabic sans line. Product mocks
   (section 4) keep their own fonts. */
:lang(ar) :is(h1, h2, h3, h4):not(:is(.bizf-demo, .wrs-sim, .suyp-demo, .tgp, .dual-panel, .race-container, .env-vignette, .dvh-vis, .cap-illustration, .step-illustration, .wf-hero-vis, .wf-board, .wf-kr, .wf-cc-win, .wf-ov, .wf-sf-vis, .pt-ap, .pt-rp, .pt-lg, .ap-cap-preview, .ap-rules-mockup, .ap-audit-mockup, .env-dash-wrapper, .env-quadrant, .env-zoom-track) *) {
  font-family: 'Inter', 'Inter Fallback', 'Inter Fallback Android', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* The colour word: in English the serif/sans contrast and the colour carry it; in
   one Arabic face it is the colour plus a real bold. Inter's Arabic face is variable
   (400 to 700); the serif family's is 400 only, so a bold there was synthesised. */
:lang(ar) :is(h1, h2, h3):not(:is(.bizf-demo, .wrs-sim, .suyp-demo, .tgp, .dual-panel, .race-container, .env-vignette, .dvh-vis, .cap-illustration, .step-illustration, .wf-hero-vis, .wf-board, .wf-kr, .wf-cc-win, .wf-ov, .wf-sf-vis, .pt-ap, .pt-rp, .pt-lg, .ap-cap-preview, .ap-rules-mockup, .ap-audit-mockup, .env-dash-wrapper, .env-quadrant, .env-zoom-track) *) :is(em, b, strong, .serif),
:lang(ar) .hero-hl {
  font-family: 'Inter', 'Inter Fallback', 'Inter Fallback Android', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 700;
}

/* Buttons and form fields that set no font of their own fall back to the browser's
   control font, which has no Arabic on macOS (the FAQ questions on /privacy and
   /tos, the form buttons on /contact and /partnership). :where() keeps this below
   every site rule that does name a font. */
:where(:lang(ar)) :is(button, input, select, textarea) { font-family: inherit; }

/* The site's own mono chips, logs and code labels name no brand font, so Arabic in
   them fell back to a system face. 'WR Arabic' first takes the Arabic letters;
   Latin keeps each original stack. Third-party mocks (Stripe, Google Drive,
   Amazon, Telegram) keep their system fonts, as those products would. */
:lang(ar) :is(.flow-badge, .flow-param, .flow-match, .policy-result, .ap-flow-status, .ap-propose-action,
  .ap-rule-check, .rule-dim, .ap-enforce-val, .ap-rule-badge, .ap-rule-entry-param, .ap-rule-match-text,
  .ap-role-instruction-content, .log-label, .log-blocked, .log-guardrail, .log-allowed, .ap-cap-log-line span,
  .ap-audit-rule code, .hl-str, .article-body code) {
  font-family: 'WR Arabic', 'SF Mono', 'Fira Code', 'Consolas', monospace;
}
:lang(ar) :is(.env-pol-badge, .env-zoom-terminal-lines) { font-family: 'WR Arabic', 'SF Mono', 'Fira Code', monospace; }
:lang(ar) .mono { font-family: 'WR Arabic', 'SF Mono', 'Consolas', monospace; }
:lang(ar) .env-code-str { font-family: 'WR Arabic', monospace; }

/* ---- 3. Shared chrome -------------------------------------------------------- */
/* Logo lockups are mirrored, as an Arabic product shows them (MG, 31 Oct): the
   icon at the right, the word to its left, in the header, the footer's giant logo
   and the slim footer. The flex rows reverse by themselves.
   The word is Arabic (MG, 1 Nov: menus.brand.word in lang/parts/ar/menus.json), so
   it reads right to left with the page and needs no isolation. Its last two letters
   are the .logo-run span, in the English "Run" orange from style.css. A zero-width
   joiner (U+200D) on each side of the colour boundary keeps the letters on either
   side of it joined across the two spans in every browser. */
/* Same size and line as "WebRun". At the English size the Arabic letters' bodies are
   only as tall as the Latin x-height (the word has no tall letters to match the
   capitals), and Inter's line box, which sets the baseline, puts their ink centre
   0.19em below the icon's centre (measured in the header and the giant logo), where
   the English capitals sit exactly on it. So the Arabic word is set 10% larger, on a
   line box kept at the English height, and lifted 0.16em: its letters then sit
   centred on the icon. The slim footer's word is a bare text node there, so its icon
   moves down instead. That footer is a flex row, so its text and the .logo-run span
   are two flex items: its 0.5rem gap (go/go.css) would split the word between the
   joined letters, so here the space goes on the icon's far side instead. */
:lang(ar) .logo-word { font-size: 1.1em; line-height: 1.455; position: relative; top: -0.16em; }   /* 1.455 = 1.6 / 1.1: the 32 px box */
:lang(ar) .giant-logo-text { font-size: calc(1.1 * clamp(3.5rem, 10vw, 8rem)); line-height: 0.91; position: relative; top: -0.16em; }
@media (max-width: 768px) { :lang(ar) .giant-logo-text { font-size: 4.4rem; } }
:lang(ar) .footer-minimal-brand { font-size: 1.1em; gap: 0; }
:lang(ar) .footer-minimal-brand svg { position: relative; top: 0.16em; margin-inline-end: 0.5rem; }

/* Nav underline grows from the reading start. */
[dir=rtl] .nav-links a::after { left: auto; right: 0; }

/* Solutions menu and Industries mega-menu: the hover bar sits on the start side. */
[dir=rtl] .dropdown-item, [dir=rtl] .uc-grid-link { border-left: 0; border-right: 2px solid transparent; }
[dir=rtl] .dropdown-item:hover, [dir=rtl] .uc-grid-link:hover, [dir=rtl] .uc-grid-link:focus-visible { border-right-color: var(--forest); }
/* The Workflows item's icon is a checklist: its ticks sit at the right of the lines,
   as a list does in Arabic. Object icons (megaphone, cart, plane...) keep their
   drawing, as in Arabic products. */
[dir=rtl] .dropdown-item[href$="/workflows"] .dropdown-icon svg { transform: scaleX(-1); }

/* Phone drawer (business pages): it slides in from the side opposite the burger,
   as in English, so from the right here. */
[dir=rtl] .mobile-drawer { left: auto; right: 0; transform: translateX(100%); box-shadow: -2px 0 28px rgba(0, 0, 0, 0.14); }
[dir=rtl] body.drawer-open .mobile-drawer, body.drawer-open [dir=rtl] .mobile-drawer { transform: translateX(0); }

/* Arrow icons point the way the page reads. */
[dir=rtl] svg.btn-arrow-icon { transform: scaleX(-1); }
[dir=rtl] .btn-arrow:hover svg.btn-arrow-icon, [dir=rtl] .pricing-cta:hover svg.btn-arrow-icon { transform: scaleX(-1) translateX(4px); }

/* Footer legal line: the copyright and the US address are Latin units; without
   isolation the period of "WebRun Inc." and the street number jump ends.
   The language line: each language name is its own unit, so the list keeps its
   order (English first, at the right). */
[dir=rtl] .footer-bottom > span > .footer-nw:first-child,
[dir=rtl] .footer-bottom .footer-addr { unicode-bidi: isolate; direction: ltr; }
[dir=rtl] .footer-bottom [lang] { unicode-bidi: isolate; }

/* ---- 4. Code, and the product mock windows ---------------------------------
   Code, keyboard keys and sample output stay left to right everywhere. The product
   mock windows are handled page by page in the files after this one (build/ar-css/10-*.css
   and on); build/ar-css/build.sh joins them into this stylesheet. */
[dir=rtl] pre, [dir=rtl] code, [dir=rtl] kbd, [dir=rtl] samp { direction: ltr; unicode-bidi: isolate; text-align: left; }
[dir=rtl] svg { direction: ltr; }
[dir=rtl] svg, [dir=rtl] svg * { unicode-bidi: normal; }

/* Bulleted and numbered lists indent on the start side. */
[dir=rtl] .accordion-body ul { padding-left: 0; padding-right: 1.5rem; }

/* ---- 5. Page fixes --------------------------------------------------------- */
/* Form honeypots sit 10,000 px off the start side; on the left they made the page
   scroll sideways (/partnership by about 9,800 px, /contact by 10,000 px). */
[dir=rtl] .pt-hp { left: auto; right: -10000px; }
[dir=rtl] .contact-hp { left: auto; right: -9999px; }

/* Text the site aligns left on purpose aligns to the reading start here. */
[dir=rtl] .accordion-header, [dir=rtl] .proof-pillar,
[dir=rtl] .suyp-copy .section-label, [dir=rtl] .suyp-copy h2, [dir=rtl] .suyp-copy .section-description,
[dir=rtl] .compare-table thead th.compare-feat, [dir=rtl] .compare-table tbody td.compare-feat,
[dir=rtl] .blog-byline, [dir=rtl] .article-body th, [dir=rtl] button.contact-channel { text-align: right; }
@media (min-width: 901px) {
  [dir=rtl] .demo-sidebar .section-header, [dir=rtl] .capabilities-sticky-header, [dir=rtl] .integrate-section .section-label,
  [dir=rtl] .phone-pitch-copy .section-header { text-align: right; }
}
@media (max-width: 900px) { [dir=rtl] .phone-points { text-align: right; } }
[dir=rtl] .phone-channel { padding: .45rem .6rem .45rem .9rem; }

/* Arrows that mean "next" or "go" point the way the page reads (the arrow glyph in
   "Learn more", the policy flow on /environments). */
[dir=rtl] .governance .section-cta a .arrow { display: inline-block; transform: scaleX(-1); }
[dir=rtl] .env-pol-flow-arrow svg { transform: scaleX(-1); }

/* Latin units in right-to-left text: domain chips, code-like actions, file sizes
   and pixel sizes. Each takes its direction from its own first letter, so
   "*.bank.com" no longer reads "bank.com.*", "7 KB" no longer "KB 7", and
   "2540 x 1520" keeps its order; an Arabic chip still reads right to left. (Not
   the film's line on /press: it mixes Arabic words into the list and reads right
   to left as it is.) */
[dir=rtl] :is(.env-pol-badge, .ap-propose-action, .rule-dim, body.page-press .pr-files .pr-meta, body.page-press .pr-nw) { unicode-bidi: plaintext; }


/* /press */
[dir=rtl] body.page-press .pr-tx ol { padding-left: 0; padding-right: 1.9em; }
[dir=rtl] body.page-press .pr-desc-text ul { padding-left: 0; padding-right: 1.25em; }
[dir=rtl] body.page-press .pr-copy { margin-right: 0; margin-left: -6px; }
@media (max-width: 600px) { [dir=rtl] body.page-press .pr-copy { margin: 8px -6px -12px 0; } }
[dir=rtl] body.page-press .pr-i-arrow { transform: scaleX(-1); }
[dir=rtl] body.page-press .pr-links a:hover .pr-i-arrow { transform: scaleX(-1) translateX(3px); }

/* /contact: the chat channel's speech bubble keeps its tail on the speaker's side,
   which is the right in Arabic chat (the brief: the assistant at the right). */
[dir=rtl] #wr-open-chat .contact-channel-ico svg { transform: scaleX(-1); }

/* /pricing: plan boards and the two tables (first column on the start side, sticky
   there when the table scrolls on phones) */
[dir=rtl] .plan-per { margin-left: 0; margin-right: .15rem; }
[dir=rtl] .pp-side-cell + .pp-side-cell { border-left: 0; border-right: 1px solid var(--cream-dark); }
[dir=rtl] .pp-jobs-t thead th:first-child, [dir=rtl] .pp-jobs-t tbody th, [dir=rtl] .pp-jobs-t tfoot th { text-align: right; padding-left: 1.25rem; padding-right: 1.5rem; }
[dir=rtl] .pp-cmp-t thead .pp-cmp-lh { text-align: right; padding: 1.35rem 1.25rem 1.15rem 1rem; }
[dir=rtl] .pp-g th { text-align: right; }
[dir=rtl] .pp-gw { left: auto; right: 1.25rem; }
[dir=rtl] .pp-r th { text-align: right; padding: .68rem 1.25rem .68rem 1rem; }
[dir=rtl] .pp-buy th { text-align: right; padding-left: 1rem; padding-right: 1.25rem; }
/* Three row icons are directional; each of their shapes is flipped across the icon's
   centre line (x = 12 of its 24-unit box): the policies checklist (ticks at the
   right), the extra-usage trend line (rises toward the left, as a chart over time
   runs from the right) and the workflows flow (from the box at the top right to the
   box at the bottom left). Object icons (card, video, flag, gauge) keep their
   drawing, as in Arabic products. */
[dir=rtl] .pp-ico :is(path[d^="M10 6h11"], path[d^="m3 6 1.5"], path[d^="M3 17l6-6"], path[d^="M15 7h6v6"], path[d^="M6.5 10v3a4"], rect[width="7"][height="7"]) { transform: matrix(-1, 0, 0, 1, 24, 0); }
@media (max-width: 920px) {
  [dir=rtl] .pp-side-cell + .pp-side-cell { border-right: 0; }
  [dir=rtl] .pp-jobs-t thead th, [dir=rtl] .pp-jobs-t tbody th, [dir=rtl] .pp-jobs-t tbody td, [dir=rtl] .pp-jobs-t tfoot th, [dir=rtl] .pp-jobs-t tfoot td { padding-left: .7rem; padding-right: .7rem; }
  [dir=rtl] .pp-jobs-t thead th:first-child, [dir=rtl] .pp-jobs-t tbody th, [dir=rtl] .pp-jobs-t tfoot th { padding-right: 1rem; }
  [dir=rtl] .pp-r th { padding-left: 1rem; padding-right: 1rem; }
  [dir=rtl] .pp-cmp-t thead .pp-cmp-lh { padding-left: 1rem; padding-right: 1rem; }
  [dir=rtl] .pp-r th, [dir=rtl] .pp-buy th, [dir=rtl] .pp-cmp-t thead .pp-cmp-lh { left: auto; right: 0; }
}
@media (max-width: 600px) {
  [dir=rtl] .pp-jobs-t thead th + th, [dir=rtl] .pp-jobs-t td { padding-left: .4rem; padding-right: .4rem; }
}


/* Blog posts: list indent, the byline divider, quotes and note boxes on the start
   side. Code blocks stay left to right with their copy button at the top right. */
/* "Back to all posts": back points right in Arabic. */
[dir=rtl] .article-page .back-link svg { transform: scaleX(-1); }
[dir=rtl] .article-body ul { margin: 0 1.5rem 1.5rem 0; }
[dir=rtl] .article-body dd { margin-left: 0; margin-right: 1.5rem; }
[dir=rtl] .blog-byline-meta { padding-left: 0; padding-right: 0.7rem; border-left: 0; border-right: 1px solid var(--border); }
@media (max-width: 480px) { [dir=rtl] .blog-byline-meta { padding-right: 0; border-right: 0; } }
[dir=rtl] .article-body blockquote { border-left: 0; border-right: 4px solid var(--orange); border-radius: 0.5rem 0 0 0.5rem; }
[dir=rtl] .article-body :is(.note, .info, .warning, .tip) { border-left: 0; border-right-width: 4px; border-right-style: solid; }
[dir=rtl] .article-body :is(.note, .info) { border-right-color: #0969da; }
[dir=rtl] .article-body .warning { border-right-color: #d4a72c; }
[dir=rtl] .article-body .tip { border-right-color: #1a7f37; }


/* ---- 6. Forms ---------------------------------------------------------------
   Email, web and phone values are typed left to right; the Arabic placeholder
   still reads right to left until the field has text. */
[dir=rtl] input[type=email], [dir=rtl] input[type=url], [dir=rtl] input[type=tel] { direction: ltr; text-align: right; }
[dir=rtl] input[type=email]:placeholder-shown, [dir=rtl] input[type=url]:placeholder-shown, [dir=rtl] input[type=tel]:placeholder-shown { direction: rtl; }

/* ---- Home (/ar/): every product mock mirrored ------------------------------
   MG, 31 Oct 22:40: product screens must read like a native Arabic app. The mocks
   inherit right to left from the page (the first pass's left-to-right islands are
   gone); the rules below flip what physical CSS pins to one side. Scripts that
   place cursors with hard-coded x offsets are corrected in build/ar-js/10-home.js.
   Shared components are mirrored on every Arabic page that shows them: the speed
   race and the governance panels (also /ar/developer; the panels also open
   /ar/automation-policies), the environment rail (also /ar/developer).
   Kept left to right inside mirrored boxes: URLs, emails, amounts, file sizes,
   IDs, policy patterns and the key cap. Not mirrored: brand marks and logos, the
   cursor glyph, play, media controls, check marks, the phone's hardware keys and
   wallpaper. Notes: build/notes/ar-rtl-home.md. */

/* ---- Hero flow slides (Gmail, Tradify, Telegram; QuickBooks, Slack; LinkedIn, HubSpot) */
[dir=rtl] .bizf-wr-text { text-align: right; }
[dir=rtl] .bizf-check { right: auto; left: -9px; }
[dir=rtl] .bizf-arrow svg { transform: scaleX(-1); }             /* step 1 at the right, arrows point left */
[dir=rtl] .bizf-fan { transform: scaleX(-1); }                   /* the first branch drawn runs to step 1 */
[dir=rtl] .bizf-demo .hero-film-btn { padding: .38rem .4rem .38rem 1.05rem; }

/* ---- The app window (.wrs-sim): rail and chat list at the right, user bubble at the left */
[dir=rtl] .wrs-sim { text-align: right; }
[dir=rtl] .wrs-rail { border-right: 0; border-left: 1px solid var(--line); }
[dir=rtl] .wrs-chats { border-right: 0; border-left: 1px solid var(--line); }
[dir=rtl] .wrs-chat-group { padding-left: 0; padding-right: 8px; }
[dir=rtl] .wrs-chat-row { -webkit-mask-image: linear-gradient(270deg, #000 82%, transparent 99%); mask-image: linear-gradient(270deg, #000 82%, transparent 99%); }
[dir=rtl] .wrs-chat-dot { margin-left: 0; margin-right: auto; }
[dir=rtl] .wrs-rail-collapse svg, [dir=rtl] .wrs-main-top svg { transform: scaleX(-1); }   /* sidebar icon: the panel is on the right */
[dir=rtl] .wrs-caret { margin-left: 0; margin-right: 1px; }
[dir=rtl] .wrs-spacer { margin-left: 0; margin-right: auto; }    /* attach at the right, mic and send at the left */
[dir=rtl] .wrs-record-btn { margin-left: 0; margin-right: auto; }
[dir=rtl] .wrs-time { text-align: left; }                        /* under the user's bubble, now at the left */
[dir=rtl] .wrs-done svg { transform: scaleX(-1); }               /* "Worked for 1s" chevron */
@media (prefers-reduced-motion: no-preference) { [dir=rtl] .wrs-shim { animation-name: wrs-ar-shim; } }   /* the shine runs the reading way */
@keyframes wrs-ar-shim { 0% { background-position: -20% 0; } 100% { background-position: 220% 0; } }
[dir=rtl] .wrs-card-btn, [dir=rtl] .wrs-card-ok { margin-left: 0; margin-right: auto; }  /* Connect Gmail: button at the left */
[dir=rtl] .wrs-wf-menu { margin-left: 0; margin-right: auto; }
[dir=rtl] .wrs-modal-pos { left: 0; right: 332px; }               /* the dialog centres on the chat column */
[dir=rtl] .wrs-is-compact .wrs-modal-pos { right: 0; }
[dir=rtl] .wrs-modal-x { right: auto; left: 16px; }
[dir=rtl] .wrs-cursor { transform: translate(220px, 430px); }
[dir=rtl] .wrs-ring { left: auto; right: 0; margin: -17px -17px 0 0; }
/* the click aim the script reads for the two composers (build/ar-js/10-home.js) */
[dir=rtl] .wrs-composer { position: relative; }
[dir=rtl] .wrs-composer > .wrs-ar-aim { position: absolute; top: 16px; left: calc(50% + 340px); width: 0; height: 23px; min-height: 0; visibility: hidden; pointer-events: none; }
/* the step bar under the window: step 1 at the right, its bar fills from the right */
[dir=rtl] .wrs-step { text-align: right; }
[dir=rtl] .wrs-step .wrs-bar { left: auto; right: 0; }

/* ---- Integrations marquee: chips run from the right, rows move the other way */
[dir=rtl] .wstack-chip { margin-right: 0; margin-left: .7rem; }
@media (prefers-reduced-motion: no-preference) {   /* reduced motion keeps English's still rows */
  [dir=rtl] .wstack-track-1 { animation-name: wstack-ar-l; }
  [dir=rtl] .wstack-track-2 { animation-name: wstack-ar-r; }
}
@keyframes wstack-ar-l { from { transform: translateX(0); } to { transform: translateX(50%); } }
@keyframes wstack-ar-r { from { transform: translateX(50%); } to { transform: translateX(0); } }

/* ---- Show-us demo (.suyp-demo): recorded browser, Stripe, Xero, the built workflow */
[dir=rtl] .suyp-intro-cur { right: auto; left: 65px; }
[dir=rtl] .suyp-burl-text { direction: ltr; }
[dir=rtl] .suyp-sp-live { margin-left: 0; margin-right: auto; }
[dir=rtl] .suyp-sp-row.is-new { box-shadow: inset -2px 0 0 #635BFF; }
[dir=rtl] .suyp-sp-amt { direction: ltr; text-align: right; }
[dir=rtl] .suyp-sp-cust i { direction: ltr; text-align: right; }
[dir=rtl] .suyp-sp-date { text-align: left; }
[dir=rtl] .suyp-xr-input { direction: ltr; justify-content: flex-end; }   /* typed values and IDs left to right, at the start */
[dir=rtl] .suyp-xr-tag { direction: rtl; }
[dir=rtl] .suyp-attach-ok { margin-left: 0; margin-right: auto; }
[dir=rtl] .suyp-demo .appchip { padding: .24rem .4rem .24rem .55rem; }
[dir=rtl] .suyp-live-tag { margin-left: 0; margin-right: .1rem; }

/* ---- Departments and workflow cards (.wfx) */
@media (max-width: 820px) { [dir=rtl] .wfx-tab { padding: 4px 4px 4px 14px; } }
[dir=rtl] .wfx-node { padding: 5px 5px 5px 13px; }               /* lockup: icon at the right of WebRun */
[dir=rtl] .wfx-ok { right: auto; left: -9px; }
[dir=rtl] .wfx-fan { transform: scaleX(-1); }                    /* the first branch runs to app 1, now at the right */

/* ---- Telegram on the phone (.tgp): Telegram for iOS in Arabic */
[dir=rtl] .tgp { text-align: right; }
[dir=rtl] .tgp-sb-time { left: auto; right: calc(2*var(--u)); }
[dir=rtl] .tgp-sb-r { right: auto; left: calc(2*var(--u)); }
[dir=rtl] .tgp-back { left: auto; right: calc(16*var(--u)); }
[dir=rtl] .tgp-back svg { margin-left: 0; margin-right: calc(-1.5*var(--u)); transform: scaleX(-1); }
[dir=rtl] .tgp-ava { right: auto; left: calc(16*var(--u)); }
[dir=rtl] .tgp-btn--l { left: auto; right: calc(8*var(--u)); }    /* attach at the right */
[dir=rtl] .tgp-btn--r { right: auto; left: calc(8*var(--u)); }    /* mic at the left */
[dir=rtl] .tgp-field { padding: 0 calc(15*var(--u)) 0 calc(9*var(--u)); }
[dir=rtl] .tgp-msg { margin: calc(8*var(--u)) calc(14*var(--u)) 0 0; }          /* the bot at the right */
[dir=rtl] .tgp-msg.tgp-out { margin: calc(8*var(--u)) 0 0 calc(14*var(--u)); }  /* the user at the left */
[dir=rtl] .tgp-msg.tgp-g2 { margin-top: calc(2*var(--u)); }
[dir=rtl] .tgp-b { border-radius: calc(16*var(--u)) calc(16*var(--u)) 0 calc(16*var(--u)); }
[dir=rtl] .tgp-out .tgp-b { border-radius: calc(16*var(--u)) calc(16*var(--u)) calc(16*var(--u)) 0; }
[dir=rtl] .tgp-g1 .tgp-b { border-radius: calc(16*var(--u)) calc(16*var(--u)) calc(6*var(--u)) calc(16*var(--u)); }
[dir=rtl] .tgp-g2 .tgp-b { border-radius: calc(16*var(--u)) calc(6*var(--u)) 0 calc(16*var(--u)); }
[dir=rtl] .tgp-meta { right: auto; left: calc(9.5*var(--u)); }
[dir=rtl] .tgp-out .tgp-meta { right: auto; left: calc(7*var(--u)); }
[dir=rtl] .tgp-tail { left: auto; right: calc(-7*var(--u)); transform: scaleX(-1); }
[dir=rtl] .tgp-out .tgp-tail { right: auto; left: calc(-7*var(--u)); transform: none; }

/* ---- Governance panels (.dual-panel: /, /developer, /automation-policies) */
[dir=rtl] .browser-url { direction: ltr; text-align: right; }
[dir=rtl] .crm-table th { text-align: right; }
[dir=rtl] .feed-live-dot { margin-right: 0; margin-left: 6px; }
[dir=rtl] .policy-rules::before { left: auto; right: 24px; }
[dir=rtl] .flow-card { border-left: 0; border-right: 3px solid transparent; margin-left: 0; margin-right: 18px; transition: opacity .4s, border-right-color .4s, background .4s; }
[dir=rtl] .flow-card.triggered { border-right-color: var(--coral); }
[dir=rtl] .flow-card::before { left: auto; right: -24px; }
[dir=rtl] .flow-card::after { left: auto; right: -17px; }
[dir=rtl] .flow-arrow { display: inline-block; transform: scaleX(-1); }
[dir=rtl] .policy-result { text-align: left; }

/* ---- Environment rail (/, /developer): starts at the right and scrolls left */
[dir=rtl] .env-rail { scroll-padding-left: 0; scroll-padding-right: max(40px, calc((100% - 1200px) / 2 + 40px)); }
@media (max-width: 1024px) { [dir=rtl] .env-rail { scroll-padding-right: 32px; } }
@media (max-width: 768px) { [dir=rtl] .env-rail { scroll-padding-right: 20px; } }
[dir=rtl] .env-rail-fade-start { left: auto; right: 0; background: linear-gradient(to left, var(--env-white), rgba(255, 255, 255, 0)); }
[dir=rtl] .env-rail-fade-end { right: auto; left: 0; background: linear-gradient(to right, var(--env-white), rgba(255, 255, 255, 0)); }
[dir=rtl] .env-rail-progress { transform: scaleX(-1); }          /* the script places the fill from the left */
[dir=rtl] .env-rail-nav svg { transform: scaleX(-1); }
[dir=rtl] .env-cta-button svg { transform: scaleX(-1); }
[dir=rtl] .env-cta-button:hover svg { transform: scaleX(-1) translateX(2px); }
[dir=rtl] .env-rail .env-file-size { direction: ltr; }
[dir=rtl] .env-rail .env-quota-label { direction: ltr; text-align: left; }
[dir=rtl] .env-rail .env-memory-line::before { margin-right: 0; margin-left: 6px; }
[dir=rtl] .env-rail .env-skill-toggle::after { left: auto; right: 2px; }
[dir=rtl] .env-rail .env-skill-toggle.active::after { transform: translateX(-12px); }   /* on: the knob at the left */
[dir=rtl] .env-rail .env-desktop-window.env-window-files { left: auto; right: 12px; }
[dir=rtl] .env-rail .env-desktop-window.env-window-browser { right: auto; left: 12px; }
[dir=rtl] .env-rail .env-window-title { margin-left: 0; margin-right: 4px; }
[dir=rtl] .env-rail .env-files-sidebar { border-right: 0; border-left: 1px solid var(--env-cream-dark); }
[dir=rtl] .env-rail .env-addressbar-nav svg { transform: scaleX(-1); }
[dir=rtl] .env-rail .env-addressbar-url { margin-left: 0; margin-right: 2px; }
[dir=rtl] .env-rail .env-addressbar-lock { margin-right: 0; margin-left: 2px; }
[dir=rtl] .env-rail .env-addressbar-url-text { direction: ltr; }

/* ---- Speed race (.race-container: /, /developer): browser at the right, panels at the left */
[dir=rtl] .rc-browser-tab .rc-tab-close { margin-left: 0; margin-right: 4px; }
[dir=rtl] .rc-browser-tab-add { margin-left: 0; margin-right: 2px; }
[dir=rtl] .rc-browser-url-bar .rc-url-text { direction: ltr; }
[dir=rtl] .rc-page-load-fill { border-radius: 1px 0 0 1px; background: linear-gradient(270deg, #1a73e8, #4da3ff); }
[dir=rtl] .rc-drag-ghost { transform: translateX(-100%); }        /* the dragged file trails the cursor to the left */
[dir=rtl] .rc-drag-ghost-cursor { left: 100%; }
[dir=rtl] .rc-flying-download-size, [dir=rtl] .rc-file-item .rc-file-size { direction: ltr; }
[dir=rtl] .rc-rule-pattern { direction: ltr; text-align: right; }
[dir=rtl] .rc-rule-arrow { transform: scaleX(-1); }
[dir=rtl] .rc-telemetry-stat:not(:last-child) { border-right: 0; border-left: 1px solid var(--cream-dark); }
/* Stripe dashboard (payouts) */
[dir=rtl] #scene-gov.stripe .stp-main { border-left: 0; border-right: 1px solid #E3E8EE; }
[dir=rtl] #scene-gov.stripe .stp-kbd { direction: ltr; }
[dir=rtl] #scene-gov.stripe .stp-nav-item.is-sub { padding-left: 6px; padding-right: 26px; }
[dir=rtl] #scene-gov.stripe .stp-avatar { margin-left: 0; margin-right: 5px; }
[dir=rtl] #scene-gov.stripe .stp-sum-link { margin-left: 0; margin-right: auto; }
[dir=rtl] #scene-gov.stripe .stp-sum-v { direction: ltr; text-align: right; }
[dir=rtl] #scene-gov.stripe .stp-amt { direction: ltr; text-align: right; }
[dir=rtl] #scene-gov.stripe .stp-bank span { direction: ltr; }
[dir=rtl] #scene-gov.stripe .stp-row.selected { box-shadow: inset -2px 0 0 #635BFF; }
[dir=rtl] #scene-gov.stripe .stp-badge.is-transit svg { transform: scaleX(-1); }
[dir=rtl] #scene-gov.stripe .stp-hint { margin-right: 0; margin-left: auto; }
@media (max-width: 768px) { [dir=rtl] #scene-gov.stripe .stp-nav-item.is-sub { padding-right: 0; padding-left: 0; } }
/* Google Drive */
[dir=rtl] #scene-drive .rc-drive-topbar-icons { margin-left: 0; margin-right: auto; }
[dir=rtl] #scene-drive .rc-drive-topbar-avatar { margin-left: 0; margin-right: 5px; }
[dir=rtl] #scene-drive .rc-drive-new-btn { padding: 0 13px 0 17px; margin: 5px 4px 12px 0; }
[dir=rtl] #scene-drive .rc-drive-nav-item { border-radius: 100px 0 0 100px; margin-right: 0; margin-left: 5px; }
[dir=rtl] #scene-drive .rc-drive-main-inner { border-top-left-radius: 0; border-top-right-radius: 14px; }
[dir=rtl] #scene-drive .rc-drive-main-bar { padding: 15px 18px 11px 16px; }
[dir=rtl] #scene-drive .rc-drive-viewtoggle { margin-left: 0; margin-right: 6px; }
[dir=rtl] #scene-drive .rc-drive-viewtoggle .rc-drive-iconbtn:first-child svg { transform: scaleX(-1); }   /* list view: bullets at the right */
[dir=rtl] #scene-drive .rc-drive-folder-chip { padding: 0 13px 0 6px; }
[dir=rtl] #scene-drive .rc-drive-file-card-header { padding: 9px 12px 7px 6px; }
[dir=rtl] #scene-drive .rc-drive-file-card-footer { padding: 8px 12px 9px 10px; }
[dir=rtl] #scene-drive .rc-thumb-sheet .rc-xls-colhead i, [dir=rtl] #scene-drive .rc-thumb-sheet .rc-xls-row b, [dir=rtl] #scene-drive .rc-thumb-sheet .rc-xls-row span { border-right: 0; border-left: 1px solid #e3e5e8; }
[dir=rtl] #scene-drive .rc-thumb-sheet .rc-xls-row span { border-left-color: #eef0f2; }
[dir=rtl] #scene-drive .rc-thumb-sheet .rc-xls-row span::after { left: 4px; right: 3px; }
[dir=rtl] #scene-drive .rc-thumb-sheet .rc-xls-row span.num::after { left: auto; right: 3px; }
[dir=rtl] #scene-drive .rc-drive-upload-toast { right: auto; left: 13px; }
[dir=rtl] #scene-drive .rc-drive-upload-toast-header { padding: 0 14px 0 7px; }
@media (max-width: 767px) {
  [dir=rtl] #scene-drive .rc-drive-main-inner { border-top-right-radius: 0; }
  [dir=rtl] #scene-drive .rc-drive-upload-toast { left: 10px; right: 10px; }
}

/* ---- The film window and the demo dialog: close button at the top left */
[dir=rtl] .modal-film .modal-close { right: auto; left: 0; }
[dir=rtl] #demoModal .modal-close { right: auto; left: 1rem; }

/* ---- /ar/developer: every product screen mirrored (31 Oct 2026, 23:10) ------------
   MG, 31 Oct 22:40: the mocks must look like a native Arabic product. They now inherit
   right to left; this part corrects what the page's CSS places by hand (left, right,
   margins, paddings, borders, radii, gradients, transforms).
   1. The hero browser (.dvh-vis: developer-hero.css, developer-hero.js).
   2. The Stripe to Google Drive run (#speed .race-container) and 3. the governance panel
      with its approval dialog (.dual-panel): the same blocks as on the home page, so
      these rules are scoped to this page (.dvh ~ section; .dvh is the developer hero)
      and leave the home group's rules alone.
   4. The capability and step illustrations (SVG): the drawing is mirrored; its text,
      code panels, prices, check marks and cursor glyphs are turned back so they read
      normally.
   Script positions a stylesheet cannot mirror: ar-js/20-developer.js.
   Notes and checks: build/notes/ar-rtl-developer.md. */

/* ---- 1. Hero: the browser window ------------------------------------------------ */
/* The canvas (.dvh-pc) keeps its left origin: developer-hero.js measures every target
   with getBoundingClientRect from that edge, so the cursor and the phone camera find
   the mirrored targets where they now are. */
[dir=rtl] .dvh-view { text-align: right; }
/* Desktop files at the top left, the window at the right. */
[dir=rtl] .dvh-desk { right: auto; left: 0; }
[dir=rtl] .dvh-win { left: auto; right: calc(var(--u)*20); }
/* Chrome in Arabic: window buttons at the top right (close outermost), tabs from the
   right, the new-tab button after the last tab, the tab title fading at its end. */
[dir=rtl] .dvh-tabs { padding-left: 0; padding-right: calc(var(--u)*68); }
[dir=rtl] .dvh-lights { left: auto; right: calc(var(--u)*13); }
[dir=rtl] .dvh-tab { padding: 0 calc(var(--u)*10) 0 calc(var(--u)*7); }
[dir=rtl] .dvh-tab+.dvh-tab::before { left: auto; right: calc(var(--u)*-1); }
[dir=rtl] .dvh-tt {
  margin-left: 0; margin-right: calc(var(--u)*7);
  -webkit-mask-image: linear-gradient(270deg,#000 calc(100% - var(--u)*22),transparent);
  mask-image: linear-gradient(270deg,#000 calc(100% - var(--u)*22),transparent);
}
[dir=rtl] .dvh-new { margin: 0 calc(var(--u)*6) calc(var(--u)*-6) 0; }
/* Toolbar: back and forward at the right, pointing the reading way; the menu at the left. */
[dir=rtl] .dvh-bar > .dvh-b:nth-child(-n+2) > svg { transform: scaleX(-1); }
[dir=rtl] .dvh-omni { margin: 0 calc(var(--u)*4) 0 calc(var(--u)*6); }
/* The address stays left to right; a short one sits next to the site icon. */
[dir=rtl] .dvh-url { margin: 0 calc(var(--u)*8) 0 calc(var(--u)*4); direction: ltr; unicode-bidi: isolate; text-align: right; }
/* The download bubble hangs under the download button, now at the left. */
[dir=rtl] .dvh-dlb { right: auto; left: calc(var(--u)*62); }

/* Amazon in Arabic: logo at the right; the department box at the right of the search
   field and the search button at its left; account and cart at the left. */
[dir=rtl] .dvh-az-cat { border-right: 0; border-left: 1px solid #CDCDCD; }
[dir=rtl] .dvh-az-qt { border-right: 0; border-left: calc(var(--u)*1.5) solid transparent; }
[dir=rtl] .dvh-az-s.dvh-typ .dvh-az-qt { border-left-color: #0F1111; }
[dir=rtl] .dvh-az-cart svg { transform: scaleX(-1); }
[dir=rtl] .dvh-az-info { padding: 0 calc(var(--u)*12) 0 calc(var(--u)*10); }
/* The sort menu opens from the sort button, now at the left. */
[dir=rtl] .dvh-az-sl { right: auto; left: calc(var(--u)*10); transform-origin: 0 0; }
/* Filters on the right, results from the right. */
[dir=rtl] .dvh-az-body { padding: calc(var(--u)*12) 0 0 calc(var(--u)*12); }
[dir=rtl] .dvh-az-side { padding: 0 calc(var(--u)*12) 0 calc(var(--u)*8); }
/* Star ratings fill from the right, the half star too. */
[dir=rtl] .dvh-st svg { transform: scaleX(-1); }
/* A price is a number: it keeps its order, at the start of the card. */
[dir=rtl] .dvh-az-p { direction: ltr; justify-content: flex-end; }

/* Airbnb in Arabic: logo at the right, menu at the left, filters and listings from the
   right, the map at the left (the map itself, a picture of a place, is not mirrored). */
[dir=rtl] .dvh-ab-logo { left: auto; right: calc(var(--u)*16); }
[dir=rtl] .dvh-ab-go { margin: 0 auto 0 calc(var(--u)*5); }
[dir=rtl] .dvh-ab-mn { right: auto; left: calc(var(--u)*16); }
[dir=rtl] .dvh-ab-fl::after { right: auto; left: 0; background: linear-gradient(270deg,rgba(255,255,255,0),#fff); }
[dir=rtl] .dvh-ab-h2, [dir=rtl] .dvh-ab-list { left: auto; right: calc(var(--u)*16); }
[dir=rtl] .dvh-ab-bd { left: auto; right: calc(var(--u)*8); }
[dir=rtl] .dvh-ab-ph > svg { right: auto; left: calc(var(--u)*8); }
[dir=rtl] .dvh-ab-map { left: auto; right: calc(var(--u)*384); direction: ltr; }
[dir=rtl] .dvh-ab-cal { left: auto; right: calc(var(--u)*158); }
/* Calendar: the week runs from the right; "previous" at the right points right. */
[dir=rtl] .dvh-ab-ch svg:first-child { transform: none; }
[dir=rtl] .dvh-ab-ch svg:last-child { transform: scaleX(-1); }

/* The supplier portal: folder list at the right, its legend and select mirrored, the
   statement table's first column at the right and its amounts at the end side. */
[dir=rtl] .dvh-hs-nav { left: auto; right: 0; border-right: 0; border-left: 1px solid #C9CED6; }
[dir=rtl] .dvh-hs-main { left: 0; right: calc(var(--u)*132); }
[dir=rtl] .dvh-hs-lg { left: auto; right: calc(var(--u)*8); }
[dir=rtl] .dvh-hs-sel { padding-left: 0; padding-right: calc(var(--u)*5); }
[dir=rtl] .dvh-hs th, [dir=rtl] .dvh-hs td { text-align: right; }
[dir=rtl] .dvh-hs .dvh-n { text-align: left; }

/* The task result card floats over the window's other side; the JSON stays left to right. */
[dir=rtl] .dvh-res { left: auto; right: calc(var(--u)*480); }
[dir=rtl] .dvh-res[data-s="1"], [dir=rtl] .dvh-res[data-s="2"] { left: auto; right: calc(var(--u)*456); }
@media (min-width: 1200px) {
  [dir=rtl] .dvh-res, [dir=rtl] .dvh-res[data-s="1"], [dir=rtl] .dvh-res[data-s="2"] { right: auto; left: calc(var(--u)*8); }
}

/* The first frame before the script runs, and the still frame with reduced motion:
   the cursor and the phone camera at the mirrored points (developer-hero.css places them
   at 458.5,182 on desktop; at 236,311 with the camera at 144,54 on phones). */
@media (min-width: 700px) {
  [dir=rtl] .dvh-view.dvh-cold .dvh-cur { transform: translate(calc(var(--u)*279.5), calc(var(--u)*182)); }
}

/* Page text under the window: the task line, and the pause button at its end. */
[dir=rtl] .dvh-task { text-align: right; }
[dir=rtl] .dvh-pause { margin: 0 auto 0 0; }

@media (max-width: 699px) {
  [dir=rtl] .dvh-res, [dir=rtl] .dvh-res[data-s="1"], [dir=rtl] .dvh-res[data-s="2"] { left: 50%; right: auto; }
  [dir=rtl] .dvh-view:not(.dvh-run) .dvh-pc { transform: translateX(calc(50vw - 17px - var(--u)*424)); }
  [dir=rtl] .dvh-vis .dvh-view.dvh-cold .dvh-pc { transform: translate(calc(100vw - 34px - var(--u)*596), calc(var(--u)*-54)); }
  [dir=rtl] .dvh-view.dvh-cold .dvh-cur { transform: translate(calc(var(--u)*502), calc(var(--u)*311)); }
  [dir=rtl] .dvh-pause { margin: 0 auto 0 -8px; }
}

/* ---- 2. Speed race and 3. governance panels ---------------------------------------
   The Stripe to Google Drive run (#speed .race-container: Stripe Dashboard, Google Drive,
   the telemetry, files and automation policy panels) and the governance panel with its
   approval dialog (.dual-panel) are the home page's blocks, shared: the home group
   mirrors them on every page that shows them (ar-css/10-home.css, ar-js/10-home.js).
   Only what this page still needed is added here, scoped to it (.dvh is the developer
   hero, so .dvh ~ section is this page only). */
/* "Northwind Co." keeps its period at its end; the account name stays next to its logo. */
[dir=rtl] .dvh ~ #speed #scene-gov.stripe .stp-acct-name { direction: ltr; text-align: right; }
/* A rule's pattern reads left to right when it is code or a domain, right to left when
   it is an Arabic phrase (contains «delete»). */
[dir=rtl] .dvh ~ .governance .flow-param { unicode-bidi: plaintext; }
/* Paths and rule names in the approval dialog keep their order. */
[dir=rtl] .dvh ~ .governance .dialog-rule .mono { direction: ltr; unicode-bidi: isolate; }

/* ---- 4. Capability and step illustrations (SVG) ---------------------------------- */
/* The drawing is mirrored as a whole: windows, tabs, sidebars, tables, calendars, the
   chart's time axis, arrows, and the scripted cursor and zoom (their coordinates are in
   the drawing, so they follow). The step illustrations (#how) are hidden in every
   language (style.css: .how-section display none); their rule is ready if they return. */
[dir=rtl] .cap-illustration > svg, [dir=rtl] .step-illustration > svg { transform: scaleX(-1); }
/* Each text is turned back on its own box, so it reads normally and keeps its mirrored
   place. It reads right to left (an Arabic label with a Latin name in it keeps its
   order); "end" with right to left anchors it as "start" did, so its box is unchanged. */
[dir=rtl] .cap-illustration svg text {
  direction: rtl; text-anchor: end;
  transform-box: fill-box; transform-origin: center; transform: scaleX(-1);
}
[dir=rtl] .cap-illustration svg text[text-anchor="middle"],
[dir=rtl] .cap-illustration svg [text-anchor="middle"] text { text-anchor: middle; }
/* Latin-only labels that start with a dot (".csv") read left to right. */
[dir=rtl] .cap-illustration #extract-data-table text[font-family*="Mono"] { direction: ltr; }
/* Code panels and the split price ($ 142 .87) are not mirrored: the whole group is turned
   back on its own box (the script wraps the code panels, which the page script moves, in
   .ar-ltr), and its texts are left as they are. */
[dir=rtl] .cap-illustration svg .ar-ltr,
[dir=rtl] .cap-illustration svg #act-price-group { transform-box: fill-box; transform-origin: center; transform: scaleX(-1); }
[dir=rtl] .cap-illustration svg .ar-ltr text,
[dir=rtl] .cap-illustration svg #act-price-group text { direction: ltr; text-anchor: start; transform: none; }
[dir=rtl] .cap-illustration svg .ar-ltr text[text-anchor="middle"],
[dir=rtl] .cap-illustration svg .ar-ltr [text-anchor="middle"] text { text-anchor: middle; }
/* A text the page script moves itself (the transact address) is turned back by a
   wrapper the script adds (.ar-txt), not on its own element. */
[dir=rtl] .cap-illustration svg .ar-txt { transform-box: fill-box; transform-origin: center; transform: scaleX(-1); }
[dir=rtl] .cap-illustration svg .ar-txt > text { transform: none; }
/* Check marks and the mouse pointer are not mirrored (the pointer turns on its tip). */
[dir=rtl] .cap-illustration svg :is(#extract-success, #transact-success-modal, #transact-success-compact, #transact-download-bar) path,
[dir=rtl] .cap-illustration svg #act-success-check { transform-box: fill-box; transform-origin: center; transform: scaleX(-1); }
[dir=rtl] .cap-illustration svg [id$="-cursor"] > path { transform: scaleX(-1); }

/* ---- 5. Integrations and the video tabs ------------------------------------------ */
/* The label sits centred over the centred heading, as in English (00-base aligns the
   section's label to the right for a layout this section no longer uses). */
[dir=rtl] .integrate-section .section-header .section-label { text-align: center; }

/* The capability tabs next to the demo video mark the active one on the start side. */
@media (min-width: 901px) {
  [dir=rtl] .capability-card { border-left: 1px solid rgba(255, 255, 255, 0.08); border-right: 3px solid transparent; }
  [dir=rtl] .capability-card:hover { border-left-color: rgba(255, 255, 255, 0.08); border-right-color: rgba(255, 255, 255, 0.3); }
  [dir=rtl] .capability-card.active { border-left-color: rgba(255, 255, 255, 0.08); border-right-color: #E85D4C; }
}

/* ---- /ar/workflows and /ar/partnership ------------------------------------ */
/* Every product mock on these two pages is mirrored like a native Arabic app (MG, 31 Oct
   22:40): rails, lists and panels run from the right, flows start on the right and
   point left, bars fill from the right, directional icons (arrows, back and disclosure
   chevrons, send, trending charts, log-in) point the reading way. Not mirrored: brand
   logos, the mouse pointer glyph, play, clocks, check marks, search, code, URLs,
   times and amounts. Text inside the mocks is never flipped. Script part:
   ar-js/30-workflows-partnership.js (the hero's link line, the numbered-list icon).
   Notes and checks: notes/ar-rtl-workflows-partnership.md. */

/* ======================= /partnership ======================= */
[dir=rtl] body.page-partnership .pt-perk { text-align: right; }
[dir=rtl] body.page-partnership .pt-perk-price { padding: 28px 36px 28px 40px; border-right: 0; border-left: 1px solid var(--pt-hair); }
[dir=rtl] body.page-partnership .pt-proof li:first-child a { padding-left: 18px; padding-right: 0; }
/* Links: the arrow points the reading way, and nudges that way on hover. */
[dir=rtl] body.page-partnership .pt-links a .pt-i { transform: scaleX(-1); }
[dir=rtl] body.page-partnership .pt-links a:hover .pt-i { transform: scaleX(-1) translateX(3px); }
/* The flow card: connectors and badges on the right, the WebRun node's icon at the right
   of its name. */
[dir=rtl] body.page-partnership .pt-fl + .pt-fl::before { left: auto; right: 22px; border-left: 0; border-right: 1.5px dashed #1a3a32cc; }
html.pt-motion[dir=rtl] body.page-partnership .pt-fl + .pt-fl::before { border-right-color: #1a3a3266; }
html.pt-motion[dir=rtl] body.page-partnership .pt-fl + .pt-fl.is-lit::before { border-right-color: #1a3a32cc; }
[dir=rtl] body.page-partnership .pt-fl-trig { padding: 0 17px 0 14px; }
[dir=rtl] body.page-partnership .pt-fl-node { padding: 8px 9px 8px 12px; }
[dir=rtl] body.page-partnership .pt-fl-ok .pt-i { left: auto; right: 4px; }
[dir=rtl] body.page-partnership .pt-dhead p { text-align: left; }
[dir=rtl] body.page-partnership .pt-job { padding-left: 0; padding-right: 18px; }
[dir=rtl] body.page-partnership .pt-job::before { left: auto; right: 0; }
[dir=rtl] body.page-partnership .pt-psteps li:not(:last-child)::after { left: -32px; right: 52px; }
[dir=rtl] body.page-partnership .pt-faq-g { text-align: right; }
/* Department names sit in a 244 px column (210 px at 1100 to 1199) sized for the
   condensed Latin serif; at 34 px "المبيعات والتسويق" needs 259 px. One size step
   down keeps it on one line, as in English. */
@media (min-width: 1200px) { :lang(ar) body.page-partnership .pt-dept-h { font-size: 30px; } }
@media (max-width: 1199px) and (min-width: 1100px) { :lang(ar) body.page-partnership .pt-dept-h { font-size: 26px; } }
/* Departments: the line through the icons and the rule between rows start on the
   icon side, now the right. The Sales chart icon rises to the left (time runs from
   the right). */
[dir=rtl] body.page-partnership .pt-dept::before { left: auto; right: 27px; border-left: 0; border-right: 1.5px solid #E85D4C52; }
[dir=rtl] body.page-partnership .pt-dept + .pt-dept::after { left: 0; right: 28px; }
[dir=rtl] body.page-partnership .pt-i :is(path[d="M22 7 13.5 15.5 8.5 10.5 2 17"], path[d="M16 7h6v6"]) { transform: scaleX(-1); transform-box: view-box; transform-origin: 50% 50%; }
/* "Who you will work with": the company name and the US address are Latin units;
   on their own in a right-to-left line, "Inc." lost its period to the far end and
   the street number jumped behind the city. */
[dir=rtl] body.page-partnership .pt-who-list > div:nth-child(1) > dd,
[dir=rtl] body.page-partnership .pt-who-list > div:nth-child(3) > dd { unicode-bidi: plaintext; text-align: right; }
[dir=rtl] body.page-partnership .pt-field select { padding-right: 14px; padding-left: 40px; background-position: left 14px center; }

/* The control cards (.pt-ap policy and guardrail, .pt-rp replay, .pt-lg logins). */
[dir=rtl] body.page-partnership .pt-ap-pol-h span { margin-left: 0; margin-right: auto; }
[dir=rtl] body.page-partnership .pt-ap-dlg { margin: -8px 22px 0 0; }
[dir=rtl] body.page-partnership .pt-ap-btns .is-go { margin-left: 0; margin-right: auto; }
/* Replay: traffic lights at the top right, the URL (left to right) after them; the
   rows' columns, the pointer's target, the progress and its knob from the right. The
   pointer glyph is not mirrored: its tip lands on the mirrored point (58% in English). */
[dir=rtl] body.page-partnership .pt-rp-url { margin-left: 0; margin-right: 8px; direction: ltr; unicode-bidi: isolate; }
[dir=rtl] body.page-partnership .pt-rp-n { margin-left: 0; margin-right: auto; }
[dir=rtl] body.page-partnership .pt-rp-cur { left: calc(42% - 6.3px); }
[dir=rtl] body.page-partnership .pt-rp-fill { left: auto; right: 0; }
[dir=rtl] body.page-partnership .pt-rp-knob { left: auto; right: 23%; margin: -6px -6px 0 0; }
[dir=rtl] body.page-partnership .pt-rp-tick { transform: translateX(-100%); }
[dir=rtl] body.page-partnership .pt-rp-time { direction: ltr; unicode-bidi: isolate; }
[dir=rtl] body.page-partnership .pt-lg-dots { margin-left: 0; margin-right: auto; }
/* The password dots are not Arabic: they keep their tracking (00-base zeroes it). */
:lang(ar) body.page-partnership .pt-lg-dots, :lang(ar) body.page-workflows .wf-sf-lg-dots { letter-spacing: 1.5px !important; }

@media (max-width: 1099px) {
  [dir=rtl] body.page-partnership .pt-dept::before { right: 25px; }
  [dir=rtl] body.page-partnership .pt-dept + .pt-dept::after { right: 26px; }
}
@media (max-width: 900px) {
  [dir=rtl] body.page-partnership .pt-dhead p { text-align: right; }
}
@media (max-width: 900px) and (min-width: 721px) {
  [dir=rtl] body.page-partnership .pt-job { padding-left: 0; padding-right: 16px; }
}
@media (max-width: 720px) {
  [dir=rtl] body.page-partnership .pt-perk-price { padding: 24px; border-left: 0; }
  [dir=rtl] body.page-partnership .pt-dept::before { right: 21px; }
  [dir=rtl] body.page-partnership .pt-dept + .pt-dept::after { right: 22px; }
}
@media (max-width: 600px) {
  [dir=rtl] body.page-partnership .pt-proof li:first-child a { padding-left: 12px; }
  [dir=rtl] body.page-partnership .pt-fl + .pt-fl::before { right: 20px; }
  [dir=rtl] body.page-partnership .pt-fl-node { padding-left: 12px; padding-right: 7px; }
  [dir=rtl] body.page-partnership .pt-fl-trig { padding-left: 14px; padding-right: 15px; }
  [dir=rtl] body.page-partnership .pt-ap-dlg { margin-left: 0; margin-right: 16px; }
}
@media (max-width: 400px) {
  [dir=rtl] body.page-partnership .pt-ap-dlg { margin-right: 8px; }
  [dir=rtl] body.page-partnership .pt-lg-ok { margin-left: 0; margin-right: auto; }
}
@media (max-width: 360px) {
  [dir=rtl] body.page-partnership .pt-fl + .pt-fl::before { right: 18px; }
  [dir=rtl] body.page-partnership .pt-fl-ok .pt-i { right: 3px; }
}


/* ======================= /workflows ======================= */
[dir=rtl] body.page-workflows .wf-proof li + li { border-left: 0; border-right: 1px solid rgba(26, 58, 50, .18); }
[dir=rtl] body.page-workflows .wf-links a:hover .wf-i { transform: translateX(-3px); }
[dir=rtl] body.page-workflows .wf-mode + .wf-mode::before { left: auto; right: -32px; border-left: 0; border-right: 1px solid var(--wf-hair); }
[dir=rtl] body.page-workflows .wf-app { padding: 4px 8px 4px 14px; }
[dir=rtl] body.page-workflows .wf-app::after { right: auto; left: 5px; transform: rotate(135deg); }

/* Directional icons in the sprite: arrows, the back and disclosure chevrons, send, the
   trending charts, the Tasks tab's pulse line (a chart: time runs from the right), log-in
   and the form field (its text cursor at the start, now the right) point the reading way.
   The symbol is mirrored where it is used, inside its own 1em box. Not mirrored: repeat,
   history and the loader (circular), play, skip, volume, video, deploy (up), the wand. */
[dir=rtl] body.page-workflows use:is([href="#wfi-arrow-right"], [href="#wfi-chevron-right"], [href="#wfi-chevron-left"], [href="#wfi-send"], [href="#wfi-trending-up"], [href="#wfi-trending-down"], [href="#wfi-activity"], [href="#wfi-log-in"], [href="#wfi-form"]) {
  transform: scaleX(-1); transform-box: view-box; transform-origin: 50% 50%;
}

/* Mock windows read from the right. Latin sample names (a company, a florist) keep their
   own order, so "Co." keeps its full stop at the end. */
[dir=rtl] body.page-workflows :is(.wf-hero-vis, .wf-win, .wf-panel, .wf-kr-list, .wf-kr-ch, .wf-cc, .wf-ov) { text-align: right; }
[dir=rtl] body.page-workflows :is(.wf-m-static .wf-it-t, .wf-m-static .wf-sum-n, .wf-m-static .wf-row-t, .wf-kr-n b, .wf-kr-cap b) { unicode-bidi: plaintext; }
[dir=rtl] body.page-workflows :is(.wf-m-static .wf-it-t, .wf-m-static .wf-sum-n) .wf-sw > span { unicode-bidi: plaintext; text-align: right; }

/* ---- 1. Hero: the Workflows screen with the flow card over its left side ---- */
[dir=rtl] body.page-workflows .wf-depts-wrap { border-right: 0; border-left: 1px solid #ECEAE6; }
[dir=rtl] body.page-workflows .wf-dept { text-align: right; }
[dir=rtl] body.page-workflows .wf-main::after { left: 14px; right: 0; }
[dir=rtl] body.page-workflows .wf-search .wf-i { left: auto; right: 12px; }
[dir=rtl] body.page-workflows .wf-search-ph, [dir=rtl] body.page-workflows .wf-search input { padding: 0 36px 0 12px; }
[dir=rtl] body.page-workflows .wf-card-apps .wf-logo + .wf-logo { margin-left: 0; margin-right: -4px; }
/* The flow card: step 1 on the right, the arrows between steps point left, the check
   badges on the top left; the branch to step 1 draws first. */
[dir=rtl] body.page-workflows .wf-flow-wr { padding: 0 5px 0 11px; }
[dir=rtl] body.page-workflows .wf-flow-fan { transform: scaleX(-1); }
[dir=rtl] body.page-workflows .wf-flow-st + .wf-flow-st::before { left: auto; right: -16px; }
[dir=rtl] body.page-workflows .wf-flow-st + .wf-flow-st::after { left: auto; right: -8px; border-right: 0; border-left: 1.5px solid var(--forest); transform: rotate(-45deg); }
[dir=rtl] body.page-workflows .wf-flow-ok, [dir=rtl] body.page-workflows .wf-flow-spin { right: auto; left: -7px; }
/* The link from the previewed card to the flow card: its dot runs from the flow (left)
   back to the card (right). Its position and width are set by the script part. */
[dir=rtl] body.page-workflows .wf-link-dot { left: auto; right: -4px; }
@keyframes wf-ar-h-back { 0% { opacity: 1; transform: translateX(calc(-1 * var(--wf-lw, 73px))); } 89% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes wf-ar-h-draw { from { clip-path: inset(-8px -8px -8px calc(100% + 8px)); } to { clip-path: inset(-8px -8px -8px -8px); } }
@media (min-width: 1280px) {
  [dir=rtl] body.page-workflows .wf-hero-vis .wf-win { margin-right: 0; margin-left: 48px; }
  [dir=rtl] body.page-workflows .wf-flow { right: auto; left: 0; transform-origin: 100% var(--wf-h-oy, 50%); }
  [dir=rtl] body.page-workflows .wf-link { left: 412px; }
}
@media screen and (prefers-reduced-motion: no-preference) {
  html.wf-motion[dir=rtl] body.page-workflows .wf-hero-vis.is-run .wf-link-dot { animation-name: wf-ar-h-back; }
}
@media screen and (prefers-reduced-motion: no-preference) and (min-width: 1280px) {
  html.wf-motion[dir=rtl] body.page-workflows .wf-hero-vis:not(.is-run):not(.is-done) .wf-link { clip-path: inset(-8px -8px -8px calc(100% + 8px)); }
  html.wf-motion[dir=rtl] body.page-workflows .wf-hero-vis.is-run .wf-link { animation-name: wf-ar-h-draw; }
}
@media (max-width: 720px) {
  [dir=rtl] body.page-workflows .wf-depts-wrap { border-left: 0; }
  [dir=rtl] body.page-workflows .wf-depts-wrap::after { right: auto; left: 0; background: linear-gradient(270deg, rgba(250, 248, 246, 0), #FAF8F6); }
  [dir=rtl] body.page-workflows .wf-depts { padding: 10px 12px 10px 28px; }
}
@media (max-width: 440px) {
  [dir=rtl] body.page-workflows .wf-flow-st { padding: 9px 14px 9px 40px; text-align: right; }
  [dir=rtl] body.page-workflows .wf-flow-n { left: auto; right: -9px; }
  [dir=rtl] body.page-workflows .wf-flow-ok, [dir=rtl] body.page-workflows .wf-flow-spin { left: 12px; }
  [dir=rtl] body.page-workflows .wf-flow-st + .wf-flow-st::before { left: 50%; right: auto; }
}

/* ---- 2. Worklist: tabs, the panel (rail on the right) and the side callouts ---- */
[dir=rtl] body.page-workflows .wf-tab-prog { transform-origin: right center; }
[dir=rtl] body.page-workflows .wf-notes.is-l .wf-cn { text-align: left; padding-right: 0; padding-left: 16px; }
[dir=rtl] body.page-workflows .wf-notes.is-r .wf-cn { text-align: right; padding-left: 0; padding-right: 16px; }
[dir=rtl] body.page-workflows .wf-notes.is-l .wf-cn::before { right: auto; left: -4px; }
[dir=rtl] body.page-workflows .wf-notes.is-r .wf-cn::before { left: auto; right: -4px; }
[dir=rtl] body.page-workflows .wf-notes.is-l .wf-cn::after { right: auto; left: -34px; }
[dir=rtl] body.page-workflows .wf-notes.is-r .wf-cn::after { left: auto; right: -34px; }
[dir=rtl] body.page-workflows .wf-ph-r { padding-left: 0; padding-right: .3em; }
[dir=rtl] body.page-workflows .wf-ph .wf-pill { margin-left: 0; margin-right: 16px; }
[dir=rtl] body.page-workflows .wf-rail { border-right: 0; border-left: 1px solid var(--wf-line); }
[dir=rtl] body.page-workflows .wf-gl-c { margin: 0 -2px 0 4px; }
[dir=rtl] body.page-workflows .wf-bar > i, [dir=rtl] body.page-workflows .wf-segs > i::after { transform-origin: right center; }
@media (max-width: 720px) {
  [dir=rtl] body.page-workflows .wf-ph-r { padding-right: 0; }
}

/* ---- 3. Every lead: the list on the right, the funnel and the route chart mirrored ----
   The chart is 332 px wide: its lines (SVG, no text) flip in place, and each node and
   label moves to 332 - x. The script draws the route on the flipped SVG, so it runs
   from the right too. */
[dir=rtl] body.page-workflows .wf-kr-fun { transform: scaleX(-1); }
[dir=rtl] body.page-workflows .wf-kr-e { transform: scaleX(-1); }
[dir=rtl] body.page-workflows .wf-kr-nd[data-n="S"], [dir=rtl] body.page-workflows .wf-kr-lb[data-l="S"],
[dir=rtl] body.page-workflows .wf-kr-nd[data-n="X"], [dir=rtl] body.page-workflows .wf-kr-lb[data-l="X"] { left: 308px !important; }
[dir=rtl] body.page-workflows .wf-kr-nd[data-n="F"], [dir=rtl] body.page-workflows .wf-kr-lb[data-l="F"] { left: 236px !important; }
[dir=rtl] body.page-workflows .wf-kr-nd[data-n="L"], [dir=rtl] body.page-workflows .wf-kr-lb[data-l="L"] { left: 166px !important; }
[dir=rtl] body.page-workflows .wf-kr-nd[data-n="E"], [dir=rtl] body.page-workflows .wf-kr-lb[data-l="E"] { left: 96px !important; }
[dir=rtl] body.page-workflows .wf-kr-nd[data-n="N"], [dir=rtl] body.page-workflows .wf-kr-lb[data-l="N"] { left: 26px !important; }
[dir=rtl] body.page-workflows .wf-kr-nd[data-n="O1"], [dir=rtl] body.page-workflows .wf-kr-lb[data-l="O1"] { left: 200px !important; }
[dir=rtl] body.page-workflows .wf-kr-nd[data-n="O2"], [dir=rtl] body.page-workflows .wf-kr-lb[data-l="O2"] { left: 130px !important; }
[dir=rtl] body.page-workflows .wf-kr-nd[data-n="O3"], [dir=rtl] body.page-workflows .wf-kr-lb[data-l="O3"] { left: 60px !important; }
[dir=rtl] body.page-workflows .wf-kr-bd { right: auto; left: -5px; }
[dir=rtl] body.page-workflows .wf-kr-cw > .wf-pause { right: auto; left: 0; }

/* ---- 5. Capability cards ---- */
[dir=rtl] body.page-workflows .wf-run-col > .wf-pause { right: auto; left: 0; }
[dir=rtl] body.page-workflows .wf-cf-logos .wf-logo + .wf-logo { margin-left: 0; margin-right: -6px; }
[dir=rtl] body.page-workflows .wf-cf-bar { margin-left: 0; margin-right: 6px; }
[dir=rtl] body.page-workflows .wf-cf-bar::after { left: auto; right: 0; }
[dir=rtl] body.page-workflows .wf-cf-shot::before, [dir=rtl] body.page-workflows .wf-cf-shot::after { left: auto; right: 6px; }
/* The pointer on Send: the glyph is not mirrored; its tip lands 7 px inside the button's
   lower-left corner, as it does inside the lower-right one in English. */
[dir=rtl] body.page-workflows .wf-cf-cur { right: auto; left: 4.4px; }
[dir=rtl] body.page-workflows .wf-cf-refine { padding: 0 3px 0 12px; }
[dir=rtl] body.page-workflows .wf-cf-refine > .wf-i { margin-left: 0; margin-right: 4px; }
@media (max-width: 720px) {
  [dir=rtl] body.page-workflows .wf-cc-t { padding-right: 0; padding-left: 44px; }
}
@media (max-width: 400px) {
  [dir=rtl] body.page-workflows .wf-cf-refine { padding-right: 12px; }
}

/* ---- 6. The Overview tab: the cost card crosses the window's left edge ---- */
[dir=rtl] body.page-workflows .wf-ov { margin-right: 0; margin-left: 64px; }
[dir=rtl] body.page-workflows .wf-ov-cost { margin-right: 0; margin-left: -84px; }
[dir=rtl] body.page-workflows .wf-ov-big { margin-right: 0; margin-left: auto; }
[dir=rtl] body.page-workflows .wf-ov-bar > i { left: auto; right: 0; }
@media (max-width: 720px) {
  [dir=rtl] body.page-workflows .wf-ov, [dir=rtl] body.page-workflows .wf-ov-cost { margin-left: 0; }
  [dir=rtl] body.page-workflows .wf-ov-tabs { -webkit-mask-image: linear-gradient(270deg, #000 85%, transparent); mask-image: linear-gradient(270deg, #000 85%, transparent); }
}

/* ---- 8. Control cards (as /partnership's) ---- */
[dir=rtl] body.page-workflows .wf-sf-pol-h span { margin-left: 0; margin-right: auto; }
[dir=rtl] body.page-workflows .wf-sf-dlg { margin: -8px 22px 0 0; }
[dir=rtl] body.page-workflows .wf-sf-btns .is-go { margin-left: 0; margin-right: auto; }
[dir=rtl] body.page-workflows .wf-sf-url { margin-left: 0; margin-right: 8px; direction: ltr; unicode-bidi: isolate; }
[dir=rtl] body.page-workflows .wf-sf-n { margin-left: 0; margin-right: auto; }
[dir=rtl] body.page-workflows .wf-sf-cur { left: calc(42% - 6.3px); }
[dir=rtl] body.page-workflows .wf-sf-fill { left: auto; right: 0; }
[dir=rtl] body.page-workflows .wf-sf-knob { left: auto; right: 23%; margin: -6px -6px 0 0; }
[dir=rtl] body.page-workflows .wf-sf-tick { transform: translateX(-100%); }
[dir=rtl] body.page-workflows .wf-sf-time { direction: ltr; unicode-bidi: isolate; }
[dir=rtl] body.page-workflows .wf-sf-lg-dots { margin-left: 0; margin-right: auto; }
@media (max-width: 600px) {
  [dir=rtl] body.page-workflows .wf-sf-dlg { margin-left: 0; margin-right: 16px; }
}
@media (max-width: 400px) {
  [dir=rtl] body.page-workflows .wf-sf-dlg { margin-right: 8px; }
  [dir=rtl] body.page-workflows .wf-sf-lg-ok { margin-left: 0; margin-right: auto; }
}

@media (max-width: 1100px) { [dir=rtl] body.page-workflows .wf-mode + .wf-mode::before { right: -24px; } }
@media (max-width: 900px) { [dir=rtl] body.page-workflows .wf-mode + .wf-mode::before { left: 0; right: 0; border-right: 0; } }

/* ---- /ar/automation-policies and /ar/environments ------------------------- */
/* MG, 31 Oct 22:40: every product screen is mirrored, as in a native Arabic product.
   The mocks inherit right to left (the first pass's left-to-right islands are gone);
   the rules below swap what the pages set physically (left/right offsets, margins,
   borders, text-align, slide directions) and turn the arrows that mean "next".
   Not mirrored on purpose: code and terminal text (left to right), URLs, file names,
   IDs, regexes and sizes (left to right, isolated), non-directional icons, the mouse
   cursor glyph. Notes and checks: build/notes/ar-rtl-policies-environments.md. */

/* Code-like values inside right-to-left rows read in their own direction: a regex,
   a path or an ID that starts with Latin stays left to right ("\b\d{3}..." no longer
   loses its first backslash to the far end), an Arabic value reads right to left. */
[dir=rtl] :is(.ap-rule-entry-param, .ap-audit-detail-item span, .env-dash-id, .env-dash-meta,
  .env-dash-panel-meta, .env-dash-wrapper .env-file-size) { unicode-bidi: plaintext; }

/* Arabic sentences in these mocks that start with a Latin name read right to left. */
[dir=rtl] :is(.env-zoom-memory-line, .env-dash-memory-line, .ap-cap-log-line > span:not([class])) { unicode-bidi: isolate; direction: rtl; }


/* ======================= /automation-policies ======================= */

/* The problem: Agent -> (Policy Engine ->) Browser, step 1 at the right. */
[dir=rtl] .ap-flow-arrow svg { transform: scaleX(-1); }

/* How it works: the three-step pipeline (1 at the right, arrows pointing left) and
   the proposal timeline inside step 1 (rail and injected branch on the right). */
[dir=rtl] .ap-pipeline-arrow svg { transform: scaleX(-1); }
[dir=rtl] .ap-propose-timeline { padding-left: 0; padding-right: 3px; }
[dir=rtl] .ap-propose-timeline::before { left: auto; right: 6px; }
[dir=rtl] .ap-propose-branch { margin-left: 0; margin-right: 4px; padding: 5px 12px 2px 0; }
[dir=rtl] .ap-propose-branch::before { left: auto; right: 0; border-left: 0; border-right: 1px solid #FECACA; border-bottom-left-radius: 0; border-bottom-right-radius: 4px; }
/* The injected call navigate("bank.com/transfer") does not wrap and may run past its
   column into the card's padding, as in English. Where the card is too narrow for it
   (about 1024 px wide; English loses its closing bracket under the card's edge) it
   would lose its first letters here, so it is cut at its own end with an ellipsis,
   8 px before the card's edge. */
[dir=rtl] .ap-propose-detail { min-width: 0; margin-left: -16px; }
[dir=rtl] .ap-propose-branch .ap-propose-action { min-width: 0; overflow: hidden; text-overflow: ellipsis; direction: ltr; text-align: right; }

/* Capability and action panels: icon at the right, the Allow / Block / Guardrail
   switch at the left (Allow first, from the right). */
[dir=rtl] .ap-cap-row-info { margin-left: 0; margin-right: 12px; }
[dir=rtl] .ap-cap-toggle-group { margin-left: 0; margin-right: auto; }

/* Enforcement log: the page prints the upload line's detail itself, as
   "contacts.csv → drive.google.com" (one left-to-right run, so its arrow kept
   pointing right while the Arabic lines around it use ←). Here it reads from the
   right, "drive.google.com ← contacts.csv": the page's text stays in place, unseen,
   for screen readers and selection, with the mirrored line drawn over it (same
   characters, so the same width); the file names stay left to right. */
[dir=rtl] .ap-cap-preview > .ap-cap-log-line:nth-child(5) > span:not([class]) { position: relative; color: transparent !important; }
[dir=rtl] .ap-cap-preview > .ap-cap-log-line:nth-child(5) > span:not([class])::after {
  content: "drive.google.com \2190  contacts.csv"; content: "drive.google.com \2190  contacts.csv" / "";
  position: absolute; top: 0; right: 0; white-space: nowrap; direction: ltr; unicode-bidi: isolate;
  color: rgba(255, 255, 255, 0.3);
}

/* Rules editor ("Action Rules"): the match bar on the right; the arrow between a
   pattern and its result points the reading way. */
[dir=rtl] .ap-rule-entry { border-left: 0; border-right: 3px solid transparent; }
[dir=rtl] .ap-rule-entry.match { border-right-color: var(--coral); }
[dir=rtl] .ap-rule-entry-arrow { display: inline-block; transform: scaleX(-1); }

/* LLM role: tabs with their bar on the right; the character count is a number
   (left to right) at the end side. The session log's entries slide in from the
   left (the script slides them from 8 px right in English). */
[dir=rtl] .ap-role-tab { text-align: right; border-left: 0; border-right: 3px solid transparent; }
[dir=rtl] .ap-role-tab.active { border-right-color: var(--coral); }
[dir=rtl] .ap-role-char-count { text-align: left; direction: ltr; }
[dir=rtl] .ap-log-entry[style*="translateX(8px)"] { transform: translateX(-8px) !important; }

/* Comparison table: first column at the right. */
[dir=rtl] .ap-comparison-card th { text-align: right; }


/* ======================= /environments ======================= */

/* Hero buttons: the arrow keeps pointing the reading way on hover. */
[dir=rtl] .env-hero-ctas .btn-primary:hover .btn-arrow-icon { transform: scaleX(-1) translateX(4px); }

/* Hero dashboard (.env-dash-wrapper). The notes that sit left of the dashboard in
   English (browser, memory, schedule) sit right of it here, their dots and leader
   lines on the dashboard side. */
[dir=rtl] .env-annotation.left { text-align: left; padding-right: 0; padding-left: 16px; }
[dir=rtl] .env-annotation.left .env-annotation-dot { right: auto; left: -4px; }
[dir=rtl] .env-annotation.left .env-annotation-dot::after { left: auto; right: 100%; }
[dir=rtl] .env-annotation.right { text-align: right; padding-left: 0; padding-right: 16px; }
[dir=rtl] .env-annotation.right .env-annotation-dot { left: auto; right: -4px; }
[dir=rtl] .env-annotation.right .env-annotation-dot::after { right: auto; left: 100%; }

/* The English dashboard is as wide as its English text needs: the upper-case
   stat labels (291 px column) and the unbroken memory lines (516 px column) make it
   871 px at 1440 instead of the 720 px track, and set the two columns at 1024.
   The Arabic text is narrower, so the Arabic dashboard took the 720 px track and
   wrapped its header. These minimums give it the English geometry, mirrored, and
   make it independent of the Arabic text's length (the lines end in an ellipsis). */
[dir=rtl] .env-dash-grid { grid-template-columns: minmax(291px, 1fr) minmax(516px, 1fr); }

/* Header, panel headers, task row: the items pushed to the far end in English
   (actions, sizes, buttons, status) go to the left. */
[dir=rtl] :is(.env-dash-actions, .env-dash-panel-meta, .env-dash-panel-action, .env-dash-memory-toggle, .env-dash-task-status) { margin-left: 0; margin-right: auto; }
[dir=rtl] .env-tasks .env-dash-panel-action { margin-left: 0 !important; }   /* the page sets margin-left inline */
/* The browser panel's icon is a small window: its dots go to the top right, where
   a right-to-left system puts a window's buttons. */
[dir=rtl] .env-dash-grid > .env-dash-panel:first-child .env-dash-panel-icon svg { transform: scaleX(-1); }
/* The memory switch is on: its knob sits at the left in right to left. */
[dir=rtl] .env-dash-toggle-thumb { right: auto; left: 2px; }
/* The task's run and skip buttons are playback controls: they keep their left-to-right
   order and glyphs (Material: media controls follow the tape, not the reading way). */
[dir=rtl] .env-dash-task-controls { direction: ltr; }
/* File names are left to right, at the right next to their icon; a long one is cut
   at its end. */
[dir=rtl] .env-dash-wrapper .env-file-name { direction: ltr; text-align: right; }   /* (.env-file-* also name the home rail's files) */

/* Market quadrant: the ephemeral-to-stateful axis runs right to left, so WebRun
   (managed, stateful) sits top left. The diagram is flipped as a whole and each
   label is turned back, so the dots keep their places from the page's inline
   left values without a copy of them here. */
[dir=rtl] .env-quadrant { transform: scaleX(-1); }
[dir=rtl] .env-quadrant-item { transform: translate(-50%, -50%) scaleX(-1); }
[dir=rtl] .env-quadrant-label.top, [dir=rtl] .env-quadrant-label.bottom { transform: translateX(-50%) scaleX(-1); }
[dir=rtl] .env-quadrant-label.left { transform: translateY(-50%) rotate(-90deg) translateX(100%) scaleX(-1); }   /* turned back inside its own box: */
[dir=rtl] .env-quadrant-label.right { transform: translateY(-50%) rotate(90deg) translateX(-100%) scaleX(-1); }  /* above the axis, tops outward */

/* Beyond the browser: the zoom-out desktop. Windows, badges and the agent's dot
   change sides; titlebars, the browser bar, Finder (sidebar on the right) and the
   taskbar (clock at the left) follow the direction. The terminal's text stays left
   to right. */
[dir=rtl] .env-zoom-win-title { margin-left: 0; margin-right: 6px; }
[dir=rtl] .env-zoom-browser-nav svg { transform: scaleX(-1); }          /* back points right, forward left */
[dir=rtl] .env-zoom-browser-lock { margin-right: 0; margin-left: 4px; }
[dir=rtl] .env-zoom-agent-cursor { left: auto; right: 35%; }
[dir=rtl] .env-zoom-win.files { left: auto; right: 2%; }
[dir=rtl] .env-zoom-win.terminal { left: auto; right: 2%; }
[dir=rtl] .env-zoom-win.spreadsheet { right: auto; left: 2%; }
[dir=rtl] .env-zoom-win.memory { right: auto; left: 2%; }
[dir=rtl] .env-zoom-files-sidebar { border-right: 0; border-left: 1px solid #EDE8E0; }
[dir=rtl] .env-zoom-terminal-lines { direction: ltr; text-align: left; }
[dir=rtl] .env-zoom-terminal-lines > div { unicode-bidi: plaintext; text-align: left; }
[dir=rtl] .env-zoom-memory-line::before { margin-right: 0; margin-left: 4px; }
[dir=rtl] .env-zoom-taskbar-clock { margin-left: 0; margin-right: auto; }
/* "Traditional agents -> WebRun": the strike grows from the right, the arrow points left. */
[dir=rtl] .env-zoom-transform-old::after { left: auto; right: 0; }
[dir=rtl] .env-zoom-transform-arrow { transform: scaleX(-1); margin-left: 0; margin-right: calc(var(--label-shift, 0) * 10px); }
[dir=rtl] .env-zoom-transform-new { margin-left: 0; margin-right: calc(var(--label-shift, 0) * 10px); }
[dir=rtl] .env-zoom-badge.b-filesystem { left: auto; right: 22%; }
[dir=rtl] .env-zoom-badge.b-terminal { left: auto; right: 24%; }
[dir=rtl] .env-zoom-badge.b-nativeapps { right: auto; left: 22%; }
[dir=rtl] .env-zoom-badge.b-memory { right: auto; left: 22%; }
[dir=rtl] .env-zoom-badge.c-filesystem { left: auto; right: 2%; }
[dir=rtl] .env-zoom-badge.c-terminal { left: auto; right: 2%; }
[dir=rtl] .env-zoom-badge.c-nativeapps { right: auto; left: 2%; }
[dir=rtl] .env-zoom-badge.c-memory { right: auto; left: 2%; }

/* Build vs buy timeline: two lanes either side of a spine (self-hosted on the right,
   WebRun on the left); one lane on a rail at the right on phones. */
[dir=rtl] .env-tl-lane-label.self-hosted { margin-right: 0; margin-left: 6px; }
[dir=rtl] .env-tl-lane-label.managed { margin-left: 0; margin-right: 6px; }
[dir=rtl] .env-tl-card { border-left: 0; border-right: 3px solid transparent; }
/* the accent bar on the right, the card's 1 px outline on the left */
[dir=rtl] .env-tl-card.pain { margin-right: 0; margin-left: 6px; border-left: 1px solid #EDE8E0; border-right: 3px solid #E0C8C4; }
[dir=rtl] .env-tl-card.ease { margin-left: 0; margin-right: 6px; border-left: 1px solid rgba(30,57,50,0.08); border-right: 3px solid var(--forest, #1E3932); }
[dir=rtl] .env-tl-done { margin-left: 0; margin-right: 6px; }
[dir=rtl] .env-tl-ongoing { margin-right: 0; margin-left: 6px; }
[dir=rtl] .env-tl-cost.pain { text-align: left; margin-right: 0; margin-left: 6px; }
[dir=rtl] .env-tl-cost.ease { text-align: right; margin-left: 0; margin-right: 6px; }

/* Code window: traffic lights at the right, the code left to right (and scrolled
   from its start on phones). */
[dir=rtl] .env-code-lang { margin-left: 0; margin-right: 6px; }
[dir=rtl] .env-code-body { direction: ltr; }

/* Arrows on the "learn more" and start buttons point the reading way. */
[dir=rtl] :is(.env-policies-link, .env-cta-coral, .env-text-link) svg { transform: scaleX(-1); }
[dir=rtl] .env-cta-coral:hover svg { transform: scaleX(-1) translateX(2px); }

@media (max-width: 768px) {
  [dir=rtl] .env-dash-grid { grid-template-columns: 1fr; }
  [dir=rtl] .env-tl::before { left: auto; right: 16px; }
  [dir=rtl] .env-tl-labels, [dir=rtl] .env-tl-costs { padding-left: 0; padding-right: 40px; }
  [dir=rtl] .env-tl-lane-label.self-hosted, [dir=rtl] .env-tl-lane-label.managed { margin-left: 0; margin-right: 0; }
  [dir=rtl] .env-tl-card { margin-left: 0 !important; margin-right: 0 !important; }
  [dir=rtl] .env-tl-cost { text-align: right !important; }
  [dir=rtl] .env-tl-done, [dir=rtl] .env-tl-ongoing { margin-left: 0; margin-right: 0; }
}

/* ---- 60. The template library and app index, read by an Arabic visitor ----------
   /automate/, /automate/groups/<slug>, /automate/categories/<slug> and /automate/apps/ stay
   English pages at one URL. With the cookie wr_lang=ar their own text comes in Arabic inside
   regions that carry lang="ar" dir="rtl" (build/notes/automate-convert.md):
     library, industry and category pages: section.agl-hero, div.agl-browse, div.agl-empty,
       nav.agl-pagination, section.cta-band;
     app index: section.wra-hero, div.wra-dir-browse, div.agl-empty, nav.agl-pagination,
       div.wra-az-foot, section.cta-band.
   The template cards (.agl-grid) and the app rows (.wra-dir-list) carry no lang: they stay
   English and left to right, so nothing here reaches them. Every rule hangs off a region's own
   [lang=ar] or [dir=rtl], so pages without the cookie never match.

   1. Script resets. <body> is English on these pages, so the ":lang(ar) body" resets of
      section 2 miss the regions (section 7 repeats them for the header and footer only).
      Arabic letters join: tracking pulls them apart, and case and slant mean nothing. The
      eyebrow (0.14em, uppercase), the A to Z label and the phone menu's group names are
      tracked, and the headline's colour word is italic. */
:is(.agl-hero, .agl-browse, .agl-empty, .agl-pagination, .cta-band, .wra-hero, .wra-dir-browse, .wra-az-foot)[lang=ar],
:is(.agl-hero, .agl-browse, .agl-empty, .agl-pagination, .cta-band, .wra-hero, .wra-dir-browse, .wra-az-foot)[lang=ar] *,
:is(.agl-hero, .agl-browse, .agl-empty, .agl-pagination, .cta-band, .wra-hero, .wra-dir-browse, .wra-az-foot)[lang=ar] *::before,
:is(.agl-hero, .agl-browse, .agl-empty, .agl-pagination, .cta-band, .wra-hero, .wra-dir-browse, .wra-az-foot)[lang=ar] *::after { letter-spacing: 0 !important; text-transform: none !important; font-style: normal !important; }
/* The two small labels were sized for tracked Latin capitals; Arabic at 0.72 to 0.74rem
   reads a size smaller, so give it the size the capitals looked. */
.agl-hero[lang=ar] .adp-eyebrow { font-size: 0.86rem; }
.wra-az-foot[lang=ar] .wra-az-label { font-size: 0.84rem; }
@media (max-width: 680px) { .agl-browse[lang=ar] .agl-mega-group-link { font-size: 0.8rem; } }   /* the phone menu's group labels (0.72rem capitals in English) */
/* The Search button sets no line height, and "normal" takes the Arabic face's tall
   metrics: the button grew from 38 to 51 px and the whole pill (and the filter button
   stretched beside it) from 52 to 64 px. Inter's own "normal" (1.21) keeps English's size. */
:is(.agl-browse, .wra-dir-browse)[lang=ar] .agl-search-btn { line-height: 1.21; }

/* 2. Mirroring. The flex rows already follow dir=rtl: the search icon moves to the right,
      the Search button to the left, the filter button ends the row on the left, the
      pagination runs right to left, and the menu's groups sit on the right of their
      sub-list. What follows are the physical sides those rows were written with. */
/* Search pill (library and app index): the wider padding goes with the icon, now on the right. */
:is(.agl-browse, .wra-dir-browse)[dir=rtl] .agl-search { padding: 0.35rem 1.05rem 0.35rem 0.4rem; }
/* Filter button: the wider padding goes with the label, now on the right; the chevron ends on the left. */
.agl-browse[dir=rtl] .agl-filter-btn { padding: 0.55rem 1.15rem 0.55rem 0.85rem; }
/* Phone menu: the sub-list indents from the reading side. */
.agl-browse[dir=rtl] .agl-mega-sub { padding: 0 0.7rem 0.55rem 0; }
@media (min-width: 681px) {
  /* The panel hangs from the button's outer edge: the right edge in English, where the
     button ends the row; the left edge here, so it opens across the search bar and never
     past the left of the screen. */
  .agl-browse[dir=rtl] .agl-filter-panel { right: auto; left: 0; }
  /* Two panes: the groups column (232px) on the right, the sub-list to its left, with
     the divider on the sub-list's right edge. */
  .agl-browse[dir=rtl] .agl-mega-sub { left: 0; right: 232px; padding: 0 1.1rem 0 0.2rem; border-left: 0; border-right: 1px solid rgba(0, 0, 0, 0.08); }
  /* A group's caret points at its sub-list: left here. */
  .agl-browse[dir=rtl] .agl-mega-caret { transform: scaleX(-1); }
}
/* Prev and Next arrows point the reading way: Prev (on the right) to the right. */
.agl-pagination[dir=rtl] .agl-page-nav svg { transform: scaleX(-1); }
/* Breadcrumb chevrons on the app index: Home > Templates > Apps reads right to left. */
.wra-hero[dir=rtl] .wra-crumb svg { transform: scaleX(-1); }
/* Button arrows ("Deploy your first workflow", "Start free") flip through section 3
   ([dir=rtl] svg.btn-arrow-icon), which reaches inside these regions already. */

/* The category menu's first link, "كل {name}", wraps onto a second line instead of ending
   in "…" when the industry name is long (رعاية كبار السن والرعاية المنزلية والتلطيفية). */
.agl-browse[lang=ar] .agl-mega-sub-all { white-space: normal; }

/* ---- 7. English-only pages read by an Arabic visitor ------------------------
   A template, app guide, the template library or an untranslated post opened by a visitor who
   reads the site in Arabic (cookie wr_lang): only its <header> and <footer> carry lang="ar"
   dir="rtl" (includes/header.php, includes/footer.php); the page itself stays English and left
   to right. The [dir=rtl] rules above already reach inside those two landmarks; the script rules
   of section 2 hang off :lang(ar) body, so they are repeated here for the landmarks alone. */
:is(header, footer)[lang=ar], :is(header, footer)[lang=ar] *, :is(header, footer)[lang=ar] *::before, :is(header, footer)[lang=ar] *::after { letter-spacing: 0 !important; text-transform: none !important; font-style: normal !important; }
:is(header, footer)[lang=ar] :is(.logo, .logo-word, .logo-run, .giant-logo-text, .footer-minimal-brand) { letter-spacing: 0 !important; }   /* the Arabic wordmark takes no tracking (00-base.css, sections 2 and 3) */
:where(:is(header, footer)[lang=ar]) :is(button, input, select, textarea) { font-family: inherit; }

/* ---- 8. Fixes after the mirroring pass (main session, 1 Nov) ---------------
   The Stripe to Google Drive race: mirrored, the dragged file trails the cursor to the left
   (10-home.css), and while it crosses to Drive it can pass the screen's left edge (37 px at
   1440, 125 px at 390 on /ar/developer), which let the whole page scroll sideways for a moment.
   Clip the section sideways only: nothing in it is meant to show beyond its edges. */
[dir=rtl] #speed { overflow-x: clip; }