/* rtl.css: the Arabic page (ar/index.html, dir=rtl). Cairo for Arabic text, no letter-spacing
 * (it breaks Arabic letter joining), taller line heights, and mirrored positions where the
 * shared CSS uses left/right. Code, the try-it editor, the camera demo and the screenshots stay LTR. */
[lang=ar] { --display: 'Cairo', 'Fredoka', system-ui, sans-serif; --body: 'Cairo', 'Nunito', system-ui, sans-serif; }
[lang=ar] body { font-family: var(--body); }
[lang=ar] *:not(pre):not(code):not(.pane):not(.pane *) { letter-spacing: 0 !important; }
[lang=ar] .eyebrow, [lang=ar] .tile-cat, [lang=ar] .sys-for, [lang=ar] .t-n, [lang=ar] .ph-n, [lang=ar] .band, [lang=ar] .vs-tag, [lang=ar] .shift-tag,
[lang=ar] .trust-lead, [lang=ar] .ai-cards-lead, [lang=ar] .foot-cols b, [lang=ar] .soon-badge, [lang=ar] .stage-label b, [lang=ar] .bar span { text-transform: none; }
[lang=ar] .eyebrow { font-size: 15px; }
[lang=ar] .shero-title { line-height: 1.4; font-weight: 800; }
[lang=ar] .sec-title { line-height: 1.3; font-weight: 800; }
[lang=ar] .sec-title.sm, [lang=ar] .cta-title { line-height: 1.35; font-weight: 800; }
[lang=ar] .sub-title, [lang=ar] .tile h3, [lang=ar] .phase h3, [lang=ar] .t-card h3, [lang=ar] .mk h3, [lang=ar] .step h3, [lang=ar] summary { line-height: 1.4; font-weight: 800; }
[lang=ar] .hero-facts b { line-height: 1.3; }
[lang=ar] .film-note { font-family: var(--body); font-weight: 700; }
[lang=ar] .stage-label b, [lang=ar] .bar span { font-family: var(--body); }

/* mirror the layout pieces that the shared CSS places with left/right */
[dir=rtl] .skip { left: auto; right: 12px; }
[dir=rtl] .nav-in { padding: 0 18px 0 12px; }
[dir=rtl] .nav-cta { margin-left: 0; margin-right: auto; }
[dir=rtl] .rail { right: auto; left: 18px; }
[dir=rtl] .rail span { transform: translateX(-8px); }
[dir=rtl] .btn:hover .arr { transform: translateX(-4px); }
[dir=rtl] .ach b { margin-left: 0; margin-right: 2px; }
[dir=rtl] .ach { padding: 10px 10px 10px 14px; }
[dir=rtl] .shot-frame.tilt { transform: perspective(2000px) rotateY(9deg) rotateX(3deg); }
/* the Arabic shot has its stage on the left, so the hero's floating pieces change sides as well */
[dir=rtl] .hero-art .shot-frame { left: 2%; }
[dir=rtl] .hero-art .st-leap { left: auto; right: -9%; transform: rotate(10deg) scaleX(-1); }
[dir=rtl] .ach.a1 { right: auto; left: -3%; }
[dir=rtl] .ach.a2 { left: auto; right: -7%; }
[dir=rtl] .ach.a3 { right: auto; left: 16%; }
[dir=rtl] .hero-art .seal { right: auto; left: -6%; }
[dir=rtl] .think::after { transform-origin: 100% 50%; }
[dir=rtl] .js .vs-list li { transform: translateX(12px); }
[dir=rtl] .js .vs.in .vs-list li { transform: none; }
[dir=rtl] .shift-col li { padding-left: 0; padding-right: 30px; }
[dir=rtl] .shift-col.old li::before, [dir=rtl] .shift-col.new li::before { left: auto; right: 0; }
[dir=rtl] .lay:hover { transform: translateX(-4px); }
[dir=rtl] div.lay:hover { transform: none; }
[dir=rtl] a.lay[href^="tools/"]::after { content: '←'; }
[dir=rtl] .ai-list button:hover { transform: translateX(-4px); }
[dir=rtl] .path-svg { transform: scaleX(-1); }
[dir=rtl] .tile-art { right: auto; left: 12px; }
[dir=rtl] .tile:not(.big):not(.wide) .tile-art { right: auto; left: 12px; }
[dir=rtl] .tile-shot { border-radius: 0 14px 0 0; }
[dir=rtl] .tile.wide.shot .tile-shot { right: auto; left: 0; }
[dir=rtl] .tile.big.shot .tile-shot { left: 22px; right: 22px; }
[dir=rtl] .tile.big.shot .tile-shot img { object-position: left center; }
[dir=rtl] .mk.soon .soon-badge { left: auto; right: 30px; }
[dir=rtl] .hw-logo { margin: 14px -6px 0 0; }
[dir=rtl] .hw-feats li { padding-left: 0; padding-right: 26px; }
[dir=rtl] .hw-feats li::before { left: auto; right: 0; }
[dir=rtl] .hw-board { transform: perspective(1800px) rotateY(8deg) rotateX(4deg); }
[dir=rtl] .hw-art:hover .hw-board { transform: perspective(1800px) rotateY(2deg) rotateX(1deg); }
[dir=rtl] .pd li { padding: 12px 52px 12px 14px; }
[dir=rtl] .pd li::before { left: auto; right: 12px; }
[dir=rtl] .t-ticks li { padding: 11px 44px 11px 14px; }
[dir=rtl] .t-ticks li::before { left: auto; right: 12px; }
[dir=rtl] .trust-creds li { padding: 8px 8px 8px 14px; }
[dir=rtl] .cta-qubi { right: auto; left: clamp(8px, 6vw, 130px); }
[dir=rtl] .film-play svg { margin-left: 6px; }
[dir=rtl] .ai-card { text-align: right; }

@media (max-width: 1100px) {
    [dir=rtl] .nav-in { padding: 0 18px 0 12px; }
}
@media (max-width: 960px) {
    [dir=rtl] .hw-board, [dir=rtl] .hw-art:hover .hw-board { transform: none; }
    [dir=rtl] .vs-arrow, [dir=rtl] .shift-arrow { transform: rotate(-90deg); }
}
@media (max-width: 600px) {
    [dir=rtl] .nav-in { padding: 0 12px 0 8px; }
    [dir=rtl] .ach { padding: 6px 6px 6px 9px; }
    [dir=rtl] .tile.big.shot .tile-shot { left: auto; right: auto; }
    [dir=rtl] .hero-art .st-leap { left: auto; right: -1%; }
    [lang=ar] .shero-title { font-size: 29px; line-height: 1.45; }
    [lang=ar] .sec-title { font-size: 31px; line-height: 1.35; }
    [lang=ar] .sec-title.sm { font-size: 28px; }
    [lang=ar] .cta-title { font-size: 29px; }
    [dir=rtl] .tile:not(.shot) .tile-art, [dir=rtl] .tile:not(.big):not(.wide):not(.shot) .tile-art { right: auto; left: 14px; }
    [dir=rtl] .tile.shot .tile-shot, [dir=rtl] .tile.big.shot .tile-shot, [dir=rtl] .tile.wide.shot .tile-shot { margin: 16px 0 0 -22px; }
}

/* the split (2026-10-17) */
[dir=rtl] .tg-h { text-transform: none; }
[lang=ar] .page-title { line-height: 1.3; font-weight: 800; }
[lang=ar] .th b, [lang=ar] .tg li b { line-height: 1.4; }
@media (max-width: 600px) { [lang=ar] .page-title { font-size: 32px; line-height: 1.4; } }