/* Arabic layer: the English design, mirrored. Generated by rtl.py. */
html[dir="rtl"] { direction: rtl; --body-ar: 'IBM Plex Sans Arabic', 'Figtree', Tahoma, Arial, sans-serif; --display-ar: 'IBM Plex Sans Arabic', 'Bricolage Grotesque', Tahoma, Arial, sans-serif; }
html[dir="rtl"] body { overflow-x: clip; }
html[dir="rtl"] .vis-scale, html[dir="rtl"] .stage, html[dir="rtl"] .marquee, html[dir="rtl"] .clients, html[dir="rtl"] .shot { overflow: hidden; }
html[dir="rtl"] body { font-family: var(--body-ar); }
html[dir="rtl"] .h1, html[dir="rtl"] .h2, html[dir="rtl"] .h3, html[dir="rtl"] .h4 { font-family: var(--display-ar); letter-spacing: 0; line-height: 1.25; }
html[dir="rtl"] .lede, html[dir="rtl"] p { line-height: 1.75; }
html[dir="rtl"] .link-arrow svg, html[dir="rtl"] .btn svg { transform: scaleX(-1); }
html[dir="rtl"] .link-arrow:hover svg { transform: scaleX(-1) translateX(4px); }
html[dir="rtl"] .marquee-track { animation-direction: reverse; }
html[dir="rtl"] .hero-toast { z-index: 4; }
html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="tel"], html[dir="rtl"] input[type="url"] { direction: ltr; text-align: right; }
html[dir="rtl"] .glow { left: 0; right: 0; }
html[dir="rtl"] .btn-ink::after { right: -60%; left: auto; }
html[dir="rtl"] .link-arrow:hover svg { transform: translateX(-4px); }
html[dir="rtl"] .hero-browser { right: 6%; left: auto; }
html[dir="rtl"] .hero-phone { right: -4%; left: auto; }
html[dir="rtl"] .hero-quote { left: -2%; right: auto; }
html[dir="rtl"] .hero-toast { left: 0; right: auto; }
html[dir="rtl"] .marquee-group { padding-left: 44px; padding-right: 0; }
html[dir="rtl"] .clients { padding: 22px 30px 22px 0; }
html[dir="rtl"] .closing .big { padding-left: 36px; padding-right: 0; }
html[dir="rtl"] .services-marquee .marquee-group { padding-left: 32px; padding-right: 0; }
html[dir="rtl"] .hp { right: -9999px; left: auto; }
html[dir="rtl"] from { transform: translateX(-0); }
html[dir="rtl"] to { transform: translateX(50%); }
html[dir="rtl"] 0%, html[dir="rtl"] 55% { right: -60%; left: auto; }
html[dir="rtl"] 100% { right: 140%; left: auto; }
html[dir="rtl"] .demo-chip { right: 18px; left: auto; }
html[dir="rtl"] .hero-browser .demo-chip { right: 16px; left: auto; }
html[dir="rtl"] .work-card .demo-chip { right: 16px; left: auto; }
html[dir="rtl"] .why-phone { border-radius: 16px 0 0 16px; }
html[dir="rtl"] .crow > span:first-child { text-align: right; }
html[dir="rtl"] .reel-card { margin-left: 24px; margin-right: 0; }
html[dir="rtl"] .project .stage .browser { right: 7%; left: auto; }
html[dir="rtl"] .project .stage .phone-pos { left: 5%; right: auto; }
html[dir="rtl"] .demo-badge { right: 20px; left: auto; }
html[dir="rtl"] .featured .stage .browser { right: 5%; left: auto; }
html[dir="rtl"] .featured .stage .phone-pos { left: 4%; right: auto; }
html[dir="rtl"] .timeline .line { right: 17px; left: auto; }
html[dir="rtl"] .timeline .fillline { right: 17px; left: auto; }
html[dir="rtl"] .opt { text-align: right; }
html[dir="rtl"] .showcase .browser { right: 50%; left: auto; transform: translateX(58%); }
html[dir="rtl"] .showcase .phone-pos { left: 6%; right: auto; }
html[dir="rtl"] figcaption { padding-right: 4px; padding-left: 0; }
html[dir="rtl"] .legal-block .body { padding-right: clamp(0px, 4vw, 40px); padding-left: 0; }
html[dir="rtl"] .lost { left: 2%; right: auto; }
@media (max-width: 1080px) {
  html[dir="rtl"] .hero-browser { right: 0; left: auto; }
  html[dir="rtl"] .hero-phone { left: 4%; right: auto; }
  html[dir="rtl"] .hero-quote { left: auto; right: 0; }
  html[dir="rtl"] .showcase .browser { transform: translateX(50%); }
}
@media (max-width: 760px) {
  html[dir="rtl"] .nav.open .nav-links { left: 0; right: 0; }
  html[dir="rtl"] .hero-toast { left: 0; right: auto; }
  html[dir="rtl"] .clients { padding: 20px 20px 20px 0; }
  html[dir="rtl"] .dock { left: 12px; right: 12px; padding: 10px 18px 10px 10px; }
  html[dir="rtl"] .project .stage .browser { right: 6%; left: auto; }
}
@media (min-width: 0px) {
  html[dir="rtl"] .faq-item.folded > h3::after { border-left: 2px solid var(--faint); border-right: 0; }
}