/* Arabic pages (ar/). The shared stylesheets write left/right as logical properties, so dir="rtl" flips the
   layout by itself; this file swaps in the Arabic faces (guideline website-ar.html B04, app-ar.html A06.2) and the
   few movements on the x-axis. Load it last.
   The rule is the English design, not a second one: the same sizes and the same weights. Readex Pro stands in for
   Bricolage Grotesque (titles, figures), Noto Sans Arabic for Manrope (everything else). Readex Pro stops at
   700, so the English 800 renders at 700 on its own; Noto Sans Arabic is hosted at 400–700, so 800 lands on 700 too. What changes for
   Arabic is only what the script needs: taller lines, no letter spacing, no capitals, a gradient that starts
   where the line starts. */
@font-face{font-family:"Readex Pro";src:url('../assets/fonts/ReadexPro-Arabic.woff2') format('woff2');font-style:normal;font-weight:160 700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"Noto Sans Arabic";src:url('../assets/fonts/NotoSansArabic-Arabic.woff2') format('woff2');font-style:normal;font-weight:400 700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}

/* Two roles, as in English. Latin words inside Arabic (CIB, THNDR) keep Bricolage Grotesque and Manrope. */
html[dir=rtl]{--display:"Bricolage Grotesque","Readex Pro","Segoe UI",system-ui,sans-serif;--body:Manrope,"Noto Sans Arabic","Segoe UI",system-ui,sans-serif;font-synthesis:none}
html[dir=rtl] .sb{font-family:var(--body)}
html[dir=rtl] .sb h2{font-family:var(--display)}

/* The hero punch line and every vivid fill start green where an Arabic line starts: on the right. */
html[dir=rtl]{--punch:linear-gradient(270deg,#00995C 0%,#0B6DD6 100%);--vivid:linear-gradient(225deg,#00995C 0%,#0B6DD6 100%)}
html[dir=rtl][data-theme="dark"]{--punch:linear-gradient(270deg,#3FE0A3 0%,#5AA9FF 100%)}

/* Arabic letters join, and Arabic has no capitals: never space them out or uppercase them. */
html[dir=rtl] *{letter-spacing:normal!important}
html[dir=rtl] .label{text-transform:none;word-spacing:normal}

/* Taller lines for the dots and descenders; sizes and weights stay the English ones. */
html[dir=rtl] body{line-height:1.75}
html[dir=rtl] .d-hero h1{line-height:1.25}
html[dir=rtl] .d-hero h1 span{padding-bottom:.12em}
html[dir=rtl] :is(.d-hero-line,.d-head p,.card p,.c-steps p,.d-faq p){line-height:1.75}
html[dir=rtl] .d-head h2{line-height:1.3}
html[dir=rtl] :is(.chead h3,.card h3,.c-steps h3){line-height:1.4}
html[dir=rtl] .l-sign p{line-height:1.3}
html[dir=rtl] .d-faq summary{line-height:1.5}

/* Dates read yyyy-mm-dd, left to right, inside the Arabic line (A06.2): <bdo dir="ltr">. */
html[dir=rtl] bdo[dir=ltr]{unicode-bidi:isolate-override}

/* A table header centres unless its table names a side. */
html[dir=rtl] .status-table{text-align:right}

/* Movements along the x-axis go the other way. */
html[dir=rtl] .theme-toggle[aria-checked="true"] .theme-toggle__thumb{transform:translateX(-28px)}
html[dir=rtl] .t-wire i{animation-name:t-to-phone-rtl}
html[dir=rtl] .t-wire i+i{animation-name:t-to-pc-rtl}
@keyframes t-to-phone-rtl{0%{transform:translateX(0);opacity:0}15%,85%{opacity:1}100%{transform:translateX(-100px);opacity:0}}
@keyframes t-to-pc-rtl{0%{transform:translateX(-100px);opacity:0}15%,85%{opacity:1}100%{transform:translateX(0);opacity:0}}
html[dir=rtl] .trio:hover .trio-left{transform:translate(10px,-40px)}
html[dir=rtl] .trio:hover .trio-right{transform:translate(-10px,-40px)}

/* How It Works: the setup list pads its start side (the English rule pads the left), and counts in Arabic-Indic digits. */
html[dir=rtl] .hw-setup li{padding:16px 52px 16px 16px}
html[dir=rtl] .hw-setup li::before{content:counter(s,arabic-indic)}
html[dir=rtl] .status-setup li::before{content:counter(setup,arabic-indic)}
/* Arabic tails (ي، ر، ة) reach below the line: give the gradient clip room so none are cut off */
html[dir=rtl] .d-hero h1 span{padding-bottom:.32em;margin-bottom:-.2em}
html[dir=rtl] .l-sign span{padding-bottom:.25em}