/* ar.css (owner AR, PRODUCT_V2 6.3 + R-AR §4, binding): every Arabic typography rule of DN Edit lives here.
   Loaded on every page AFTER base.css, ds/*.css and the page stylesheet, so equal-specificity rules here win.
   - IBM Plex Sans Arabic 400/500/600 for all Arabic text and UI (self-hosted, OFL: fonts/OFL-ibm-plex-sans-arabic.txt).
   - Noto Kufi Arabic 700 for H1/H2/big titles only (never 800/900).
   - Plex Mono only inside dir=ltr runs (timecodes, ids); Arabic labels never use a mono face.
   - Never on Arabic: letter-spacing, uppercase, italic, synthetic bold, justify, kashida, text below 13px.
   Other modules never write :lang(ar) / html[lang=ar] rules; they send AR a CR (docs/v2/cr/). */

/* ---------- fonts ---------- */
/* Widths measured in Chromium against the shipped Arabic strings and Tahoma. Vertical metrics come from each
   font's hhea table. These fallbacks keep the line box stable while the preloaded web fonts arrive. */
@font-face{font-family:"Plex Arabic Fallback";src:local("Tahoma");font-weight:400;size-adjust:91.03065%;ascent-override:119.19064%;descent-override:45.58904%;line-gap-override:0%;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"Plex Arabic Fallback";src:local("Tahoma");font-weight:500;size-adjust:93.76034%;ascent-override:115.72057%;descent-override:44.26179%;line-gap-override:0%;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"Plex Arabic Fallback";src:local("Tahoma");font-weight:600;size-adjust:95.48148%;ascent-override:113.63460%;descent-override:43.46392%;line-gap-override:0%;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"Kufi Arabic Fallback";src:local("Tahoma Bold");font-weight:700;size-adjust:96.51703%;ascent-override:132.82630%;descent-override:63.71933%;line-gap-override:0%;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/assets/fonts/plex-sans-arabic-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-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:"IBM Plex Sans Arabic";src:url("/assets/fonts/plex-sans-arabic-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-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:"IBM Plex Sans Arabic";src:url("/assets/fonts/plex-sans-arabic-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-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}
/* Plex Sans Arabic's own Latin (matched to its Arabic): spaces, punctuation, «», digits and brand words in Arabic lines */
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/assets/fonts/plex-sans-arabic-latin-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-200B,U+2012-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/assets/fonts/plex-sans-arabic-latin-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-200B,U+2012-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/assets/fonts/plex-sans-arabic-latin-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-200B,U+2012-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Noto Kufi Arabic 700, Latin punctuation and digits: an Arabic headline's "." "," "!" "?" «» and digits come from Kufi
   too, so one headline uses one face (CR DS-to-AR-02 #3). Same family as base.css's Arabic Kufi face, no overlapping range;
   fontsource's Kufi latin-700 subset (OFL: fonts/OFL-noto-kufi-arabic.txt). */
@font-face{font-family:"Noto Kufi Arabic";src:url("/assets/fonts/noto-kufi-arabic-latin-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0021-0040,U+00AB,U+00BB,U+2013-2014,U+2018-201D,U+2026}

/* ---------- stacks: the Arabic face first on Arabic pages ---------- */
html[lang=ar]{
  --text:"IBM Plex Sans Arabic","Plex Arabic Fallback","Inter Tight",ui-sans-serif,system-ui,sans-serif;
  --display:"Noto Kufi Arabic","Kufi Arabic Fallback","IBM Plex Sans Arabic","Cabinet",ui-sans-serif,system-ui,sans-serif;
  --mono:"IBM Plex Sans Arabic","Plex Mono",ui-monospace,monospace;
}
/* mono only inside left-to-right runs (timecodes, order ids, file sizes) */
html[lang=ar] [dir=ltr]{--mono:"Plex Mono",ui-monospace,monospace}
/* Arabic inside an English page (language switch, mixed kicker): Arabic face, Arabic metrics */
html:not([lang=ar]) [lang=ar]{font-family:"IBM Plex Sans Arabic","Noto Kufi Arabic",var(--text)}
html[lang=ar] input,html[lang=ar] textarea,html[lang=ar] select,html[lang=ar] button{font-family:var(--text)}

/* ---------- the reset: never letter-spacing, uppercase, italic or synthetic bold on Arabic ---------- */
:lang(ar){letter-spacing:0!important;text-transform:none!important;font-style:normal!important;font-synthesis:none}
:lang(ar) :is(em,i,cite,dfn,var,address){font-style:normal!important}
html[lang=ar] :is(.kicker,.pc-k,.lab,.mono-tag,.status-dot,.crumbs,.dm-top){text-transform:none;letter-spacing:0}
html[lang=ar] :is(p,li,dd,td,blockquote,.prose p){text-align:start;text-justify:none}

/* ---------- display: Noto Kufi Arabic 700 for headlines only ---------- */
html[lang=ar] :is(h1,h2,.h1,.lp-h1,.lp-h2){font-family:"Noto Kufi Arabic","Kufi Arabic Fallback","IBM Plex Sans Arabic","Cabinet",ui-sans-serif,system-ui,sans-serif;font-weight:700;letter-spacing:0;text-wrap:balance}
html[lang=ar] :is(h1,h2,.h1,.lp-h1,.lp-h2) [lang=en]{font-family:"Cabinet","Cabinet Fallback",sans-serif;font-weight:800}
/* home H1: clamp(34px,5.2vw,72px) lh 1.3, max 2 lines desktop / 3 mobile */
/* a client's own Latin title on an Arabic page (dir=auto resolves LTR): Latin display face, not Kufi (CR DS-to-AR-01) */
html[lang=ar] :is(h1,h2,h3)[dir=auto]:dir(ltr){font-family:"Cabinet","Inter Tight",ui-sans-serif,system-ui,sans-serif;font-weight:800}
html[lang=ar] .h1{font-size:clamp(34px,5.2vw,72px);line-height:1.3}
html[lang=ar] .h1 .line{padding-block:.12em}
/* landing H1: clamp(30px,4.2vw,56px) lh 1.35 */
html[lang=ar] .lp-h1{font-size:clamp(30px,4.2vw,56px);line-height:1.35}
/* in the two-column hero the copy column is narrow: size the H1 to its column (still 30-56px) so it stays on 2 lines */
html[lang=ar] .lp-copy{container-type:inline-size}
html[lang=ar] .lp-copy .lp-h1,html[lang=ar] .pub-hero .lp-copy .lp-h1{font-size:clamp(30px,7.6cqi,56px)}
/* H2: clamp(26px,3vw,40px) lh 1.45 */
html[lang=ar] .lp-h2,html[lang=ar] main h2:not([class]){font-size:clamp(26px,3vw,40px);line-height:1.45}
/* legal and help prose: its own H2 size wins over the generic main h2 rule above (0,2,3 beat 0,2,2: audit #6) */
html[lang=ar] main.prose h2:not([class]),html[lang=ar] main .prose h2:not([class]),html[lang=ar] .prose h2{font-size:clamp(22px,2.2vw,28px);line-height:1.55;font-weight:700}
/* H3 / card titles: Plex 600 20px lh 1.6 (Kufi stays for H1/H2) */
html[lang=ar] :is(h3,.steps h3,.fc h3,.rel b,.dm-l3 b){font-family:var(--text);font-weight:600;line-height:1.6;letter-spacing:0}
html[lang=ar] :is(h3,.steps h3,.fc h3){font-size:20px}
html[lang=ar] .faq summary{font-family:var(--text);font-weight:600;line-height:1.7}
html[lang=ar] .pc b{font-family:var(--display);font-weight:700;line-height:1.5}
/* big price numbers keep Cabinet 800 inside their left-to-right run */
html[lang=ar] .pc b bdi,html[lang=ar] .price bdi,html[lang=ar] .bar bdi{font-family:"Cabinet",var(--text);font-weight:800}

/* ---------- text and UI sizes ---------- */
html[lang=ar] body{line-height:1.8}
html[lang=ar] :is(.lp-lede,.sub){font-size:17px;line-height:1.85;max-width:34em}
html[lang=ar] .prose p,html[lang=ar] .prose li{font-size:16px;line-height:1.8}
@media (min-width:900px){
  html[lang=ar] :is(.lp-lede,.sub){font-size:19px}
  html[lang=ar] .prose p,html[lang=ar] .prose li{font-size:17px}
}
html[lang=ar] :is(button,.btn,.mini,.chip,.fchip){line-height:1.2}
/* nothing below 13px in Arabic; 14px for anything interactive */
html[lang=ar] :is(.mono-tag,.lab,.status-dot,.crumbs,.kicker,.pc-k,.dm-top,.dm-chaps li span,.dm-wave .mk em,.dm-l3 small,.rel span){font-size:13px;line-height:1.5}
html[lang=ar] .dm-tl .ln b{font-size:13px;line-height:1.3}
html[lang=ar] .dm-log{font-size:13px;line-height:1.9}
html[lang=ar] .lp-from{font-size:14px;line-height:1.6}
html[lang=ar] :is(.fchip small,.chip small){font-size:13px}
html[lang=ar] :is(.lang,.mini){font-size:14px}
/* Kufi ascenders and descenders inside clipped boxes */
html[lang=ar] :is(.h1 .line,.dm-chapter,.dm-l3,.mono-tag,.kicker){padding-block:.12em}

/* ---------- keep together ---------- */
.nw{white-space:nowrap}
html[lang=ar] bdi{unicode-bidi:isolate}

/* ---------- inputs: Arabic placeholders right-aligned; empty free-text boxes start right-to-left (A4) ---------- */
html[lang=ar] :is(input[type=email],input[type=url],input[inputmode=numeric],input[autocomplete=one-time-code],input[dir=ltr],textarea[dir=ltr])::placeholder{direction:rtl;text-align:right}
html[lang=ar] textarea:placeholder-shown,html[lang=ar] textarea[dir=auto]:placeholder-shown{direction:rtl;text-align:right}
html[lang=ar] input[type=text]:placeholder-shown,html[lang=ar] input[type=search]:placeholder-shown,html[lang=ar] input:not([type]):placeholder-shown{direction:rtl;text-align:right}

/* ---------- mirroring: arrows, chevrons, send and steps mirror; media never does ---------- */
html[dir=rtl] :is(.arr,.chev,.ico-next,.ico-back,.ico-send,.crumbs .sep){transform:scaleX(-1)}
html[dir=rtl] :is(.dm-tl,.dm-prog,.dm-chaps,.dm-wave,.player,.timeline,.waveform,.scrub,.tc){direction:ltr}
html[dir=rtl] .dm-chaps li{text-align:left}
html[lang=ar] .dm-chaps li{font-size:13px}

/* ---------- demos ---------- */
/* A25: Arabic caption words without tracked-out padding; A5: the name super never sits on the caption */
html[lang=ar] .dm-cc span{padding-inline:2px}
html[lang=ar] .dm-cap{font-family:var(--text);font-weight:600;line-height:1.6}
/* small titles inside demo cards are UI text, not display */
html[lang=ar] .demo :is(b,strong,.dm-chapter span):not(bdi *){font-family:"IBM Plex Sans Arabic",var(--text);font-weight:600}
@media (max-width:520px){html[lang=ar] .dm-l3{bottom:auto;top:9%}}
/* A29: with reduced motion the demo log is shown, not left at opacity 0 (both languages) */
@media (prefers-reduced-motion:reduce){.dm-log p{opacity:1!important;animation:none!important;transform:none!important}}

/* ---------- print (the bilingual strings PDF and printed legal pages) ---------- */
@media print{html[lang=ar] body{line-height:1.7}}
html[lang=ar] :is(small,.small,.req){font-size:13px}