@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Tajawal:wght@500;700;800&display=swap');

/* ---- Language switcher ---- */
.lang-switch{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid #ffffff1f;border-radius:8px;background:#ffffff08;flex-shrink:0}
.lang-switch button{border:0;background:none;color:#9fadbd;font-size:11px;font-weight:600;line-height:1;padding:6px 9px;border-radius:6px;transition:background .2s,color .2s;min-width:30px}
.lang-switch button:hover{color:#eaf4ff}
.lang-switch button[aria-pressed=true]{background:#ffffff14;color:#eaf4ff;box-shadow:inset 0 1px 0 #ffffff18}
.lang-switch button[lang=ar]{font-size:14px;font-family:'IBM Plex Sans Arabic','DM Sans',sans-serif}

/* ---- Arabic typography ---- */
:root:lang(ar),[dir=rtl]{font-family:'IBM Plex Sans Arabic','DM Sans',sans-serif}
/* Arabic letterforms join, so the tight negative tracking used for the Latin display type must be reset. */
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] h4,[dir=rtl] .brand,[dir=rtl] .contact h2,
[dir=rtl] .mini-site h4,[dir=rtl] .phone h4,[dir=rtl] .faq h2,[dir=rtl] .dashboard-stats strong{letter-spacing:normal}
/* Tajawal carries the Arabic display type: rounder, more open counters, and it holds up
   at the hero's size far better than the body face does. */
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] .contact h2,[dir=rtl] .faq h2{font-family:'Tajawal','IBM Plex Sans Arabic',sans-serif}
[dir=rtl] h1{line-height:1.3;font-weight:800}
[dir=rtl] h2{line-height:1.4;font-weight:700}
[dir=rtl] .brand{letter-spacing:-1px;font-family:'DM Sans',sans-serif}
[dir=rtl] .phone-calendar{word-spacing:normal}
[dir=rtl] .mini-toolbar span:last-child,[dir=rtl] .phone-event>span{direction:ltr;unicode-bidi:isolate}

/* ---- RTL layout mirroring ---- */
[dir=rtl] .skip{left:auto;right:10px}
[dir=rtl] .intro-pill .pill-arrow{margin-right:8px;margin-left:0;transform:scaleX(-1)}
[dir=rtl] .contact-reassurance .reassure-arrow{transform:scaleX(-1)}
[dir=rtl] .workspace,[dir=rtl] .float-label{text-align:right}
[dir=rtl] .workspace-sidebar{border-right:0;border-left:1px solid #ffffff08}
[dir=rtl] .float-left{left:auto;right:0;transform:rotate(6deg)}
[dir=rtl] .float-right{right:auto;left:-13px;transform:rotate(-5deg)}
[dir=rtl] .sun,[dir=rtl] .dashboard-stats strong small,[dir=rtl] .flow-node b,[dir=rtl] .flow-center b{margin-left:0}
[dir=rtl] .sun{margin-right:5px}
[dir=rtl] .dashboard-stats strong small{margin-right:7px}
[dir=rtl] .flow-node b{margin-right:22px}
[dir=rtl] .flow-center b{margin-right:6px}
[dir=rtl] .badge{margin-left:0;margin-right:auto}
[dir=rtl] .mini-browser{transform:perspective(600px) rotateY(9deg) rotateZ(4deg)}
[dir=rtl] .site-orb{right:auto;left:-20px;transform:rotate(35deg);box-shadow:inset 10px -10px 25px #183f6266}
[dir=rtl] .app-art{padding:25px 60px 0 0}
[dir=rtl] .phone{transform:rotate(-8deg);box-shadow:-8px 14px 25px #0006}
[dir=rtl] .phone-event{border-left:0;border-right:2px solid #a5b1f2}
[dir=rtl] .phone-event.second{border-right-color:#97cec1}
[dir=rtl] .app-float{right:auto;left:16px;transform:rotate(5deg)}
[dir=rtl] .step:after{background:linear-gradient(270deg,#344658,#202833)}
[dir=rtl] details p{margin:15px 0 0 24px}
[dir=rtl] footer>span{margin-left:0;margin-right:auto}
[dir=rtl] footer>a:last-child{margin-left:0;margin-right:20px}
[dir=rtl] footer .logo-mark{margin-right:0;margin-left:-4px}

@media(max-width:1000px){
  [dir=rtl] .app-art{padding-left:0;padding-right:30px}
}
@media(max-width:700px){
  .lang-switch{margin-left:auto}
  .header .small{margin-left:0}
  [dir=rtl] .lang-switch{margin-left:0;margin-right:auto}
  [dir=rtl] .header nav a:after{right:auto;left:4px}
  [dir=rtl] .app-art{padding-left:0;padding-right:calc(50% - 85px)}
  [dir=rtl] .app-float{left:40px;right:auto}
  [dir=rtl] .hero-art{left:auto;right:-30%}
  [dir=rtl] footer>a:last-child{grid-column:2;margin:0}
}