/* The language menu, the footer language links and the one-time language notice.
   Logical properties only, so the same rules serve left-to-right and right-to-left
   pages; the generator makes no .rtl.css for this file. */
.lang-menu { position:relative; flex-shrink:0; }
.lang-menu summary { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding-inline:13px 15px; border:1px solid #ffffff60; border-radius:22px; background:#ffffff14; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); font-size:12px; font-weight:500; line-height:1; white-space:nowrap; cursor:pointer; list-style:none; user-select:none; transition:background .2s, color .2s, border-radius .45s var(--press-spring, ease), scale .45s var(--press-spring, ease); }
.lang-menu summary::-webkit-details-marker { display:none; }
.lang-menu summary:hover, .lang-menu[open] summary { background:#ffffff1f; }
.lang-menu summary svg { width:18px; height:18px; }
.lang-hint { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.lang-list { position:absolute; inset-block-start:calc(100% + 10px); inset-inline-end:0; z-index:30; min-width:184px; margin:0; padding:6px; list-style:none; background:#fff; color:#18121f; border-radius:20px; box-shadow:0 18px 50px #12052b40, 0 0 0 1px #18121f0f; animation:lang-list-in .18s ease-out both; }
.lang-list a { display:flex; align-items:center; min-height:44px; padding-inline:16px; border-radius:14px; font-size:14px; }
.lang-list a:hover { background:#f2edfb; }
.lang-list a[aria-current] { background:#efe8ff; color:#31136b; font-weight:600; }
@keyframes lang-list-in { from { opacity:0; translate:0 -6px; } }

.footer-lang { max-width:1296px; margin:14px auto 0; display:flex; flex-wrap:wrap; align-items:center; gap:4px 20px; font-size:12px; }
.footer-lang a { display:inline-flex; align-items:center; min-height:32px; }
.footer-lang a:hover { text-decoration:underline; text-underline-offset:4px; }
.footer-lang a[aria-current] { font-weight:600; text-decoration:underline; text-underline-offset:4px; }

.lang-notice { position:fixed; inset-inline:16px; inset-block-end:16px; z-index:60; max-width:520px; margin-inline:auto; padding-block:18px; padding-inline:22px 60px; background:#171022f2; color:#fff; border:1px solid #ffffff1f; border-radius:26px; box-shadow:0 22px 60px #12052b59; backdrop-filter:blur(22px); animation:lang-notice-in .4s cubic-bezier(.2,.8,.2,1) both; }
.lang-notice p { margin:0; font-size:14px; line-height:1.55; }
.lang-options { display:flex; flex-wrap:wrap; gap:8px; margin-block-start:14px; }
.lang-options :is(a, button) { display:inline-flex; align-items:center; min-height:44px; padding-inline:16px; border:1px solid #ffffff40; border-radius:22px; color:inherit; background:none; font:inherit; font-size:13px; cursor:pointer; transition:background .2s, border-radius .45s var(--press-spring, ease), scale .45s var(--press-spring, ease); }
.lang-options a:hover { background:#ffffff1a; }
.lang-options [aria-pressed="true"] { background:var(--lime, #d0ff57); border-color:transparent; color:#1d1233; font-weight:600; }
.lang-notice-close { position:absolute; inset-block-start:8px; inset-inline-end:8px; width:44px; height:44px; border-radius:50%; color:inherit; background:none; font-size:22px; line-height:1; cursor:pointer; }
.lang-notice-close:hover { background:#ffffff1a; }
/* Pressed, the language controls change shape and spring back, as the page's
   buttons do (expressive.css). */
.lang-menu summary:active, .lang-options :is(a, button):active, .mobile-nav .mobile-lang a:active { border-radius:12px; scale:.96; transition-duration:.12s; transition-timing-function:cubic-bezier(.2,0,0,1); }
.lang-notice :focus-visible { outline:2px solid var(--lime, #d0ff57); outline-offset:2px; }
@keyframes lang-notice-in { from { opacity:0; translate:0 14px; } }

@media (max-width:899px) {
  .lang-menu summary { min-height:40px; }
}
/* On phones the header keeps the logo, the download button and the menu button,
   and the languages move into the menu. */
.mobile-lang { display:none; }
@media (max-width:649px) {
  .header .lang-menu { display:none; }
  .mobile-nav .mobile-lang { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-block-start:8px; padding-block-start:12px; border-block-start:1px solid var(--line, #18121f1a); }
  .mobile-lang-label { flex-basis:100%; padding-inline:10px; font-size:12px; color:#6f6878; }
  .mobile-nav .mobile-lang a { display:inline-flex; align-items:center; min-height:44px; padding-block:0; padding-inline:14px; border-radius:22px; font-size:15px; transition:background .2s, border-radius .45s var(--press-spring, ease), scale .45s var(--press-spring, ease); }
  .mobile-nav .mobile-lang a[aria-current] { background:#efe8ff; color:#31136b; font-weight:600; }
}
/* The narrowest phones drop the download icon, as the business header does, so the
   longer translated labels fit beside the logo. */
@media (max-width:359px) {
  .header .nav-end .button.small svg { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .lang-list, .lang-notice { animation:none; }
  .lang-menu summary:active, .lang-options :is(a, button):active, .mobile-nav .mobile-lang a:active { scale:none; }
}

/* Arabic and Farsi letters rise and fall further than Latin: give the tight
   display headings room so no stroke is cut by their reveal masks. */
:root:is(:lang(ar),:lang(fa)) :is(h1, h2, h3, h4, .title-line, .footer-big) { line-height:1.25; }

/* Arabic and Farsi have no capitals and their letters sit smaller than Latin
   capitals, so the small labels set in capitals elsewhere are larger here. */
:root:is(:lang(ar),:lang(fa)) :is(.hero-copy, .section-heading, .download-heading, .faq-section, .business-heading, .paths-heading, .connection-copy, .vault-copy, .detail-dialog, .qr-dialog) .eyebrow { font-size:14px; line-height:20px; }
:root:is(:lang(ar),:lang(fa)) .feature-copy .feature-kicker { font-size:14px; line-height:20px; }
:root:is(:lang(ar),:lang(fa)) .expressive :is(.scope-label, .panel-number) { font-size:14px; line-height:20px; }
:root:is(:lang(ar),:lang(fa)) .expressive :is(.hero-scroll, .soon-badge, .art-tag, .drag-hint, .gallery-foot, .art-example, .filter span, .download-button small) { font-size:13px; }
:root:is(:lang(ar),:lang(fa)) .expressive .hero-caption { font-size:14px; }
:root:is(:lang(ar),:lang(fa)) .expressive .marquee-track>span { font-size:14px; }
:root:is(:lang(ar),:lang(fa)) .expressive .product-preview-label { font-size:clamp(10px, 9.4px + .12vw, 11px); }
:root:is(:lang(ar),:lang(fa)) .expressive .orbit-label { font-size:clamp(9px, 7.3px + .33vw, 12px); }
:root:is(:lang(ar),:lang(fa)) .expressive .pass-caption { font-size:9px; }
:root:is(:lang(ar),:lang(fa)) .biz-invoice .eyebrow { font-size:10px; }
:root:is(:lang(ar),:lang(fa)) .expressive :is(.footer-note, .footer-bottom) { font-size:14px; line-height:24px; }
/* The address and phone number stay in English in every language, so they read left
   to right, while still sitting on the right with the rest of the page. */
:root:is(:lang(ar),:lang(fa)) .footer-contact :is(address, a[href^="tel:"]) { direction:ltr; unicode-bidi:isolate; text-align:end; }
/* The hero headline sits tighter, so it still fits a laptop screen: its masks
   reach further above and below instead (the tail of "ي", the marks over
   "أ"), and the margins take that room back so the layout does not grow. */
:root:is(:lang(ar),:lang(fa)) .hero .title-line { line-height:1.05; padding-block:.3em .35em; margin-block:-.27em -.45em; }
:root:is(:lang(ar),:lang(fa)) .hero .title-line:last-child { margin-block-end:-.25em; }

/* The hero artwork turns with the page, so its light falls behind the words.
   A scene drawn for right-to-left pages (data-rtl-src) is already composed that
   way and keeps the brand mark the right way round, so only the others turn;
   on phones its crop moves to the side where its artwork sits. */
[dir="rtl"] .hero-scene img:not([data-rtl-src]) { scale:-1 1; }
[dir="rtl"] .hero-glints { transform:scaleX(-1); }
@media (max-width:767px) {
  [dir="rtl"] .hero-scene img[data-rtl-src] { object-position:26% center; }
}

/* Arrows point the way the reader reads. */
[dir="rtl"] use[href="#i-arrow"] { transform:scaleX(-1); transform-origin:50% 50%; transform-box:view-box; }