/* Languages: the language switcher (every page), the "app is in English" note, and right-to-left layout (Hebrew, Arabic). */

/* ---- language switcher ---- */
.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line-2); color: var(--text-2); font: 600 13px/1 var(--f-sans); }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover, .lang[open] summary { color: var(--text); border-color: rgba(255,255,255,.28); }
.lang .flag { width: 22px; height: 15px; border-radius: 3px; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.lang summary .chev { width: 12px; height: 12px; opacity: .7; transition: transform var(--t-fast); }
.lang[open] summary .chev { transform: rotate(180deg); }
.lang li a { display: flex; align-items: center; gap: 10px; }
.foot-langs a { display: inline-flex; align-items: center; gap: 8px; }
.foot-langs .flag { width: 20px; height: 14px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.lang ul { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 120; list-style: none; margin: 0; padding: 6px; min-width: 170px; background: #141317; border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--sh-2); }
.lang li a { padding: 10px 12px; border-radius: 10px; color: var(--text-2); font-size: 15px; }
.lang li a:hover, .lang li a[aria-current="true"] { background: rgba(255,255,255,.06); color: var(--text); }
.lang li a[aria-current="true"]::after { content: " ✓"; color: var(--gold); }
.foot-langs { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 14px; }
.foot-langs a { color: var(--text-2); } .foot-langs a[aria-current="true"] { color: var(--text); font-weight: 600; }
@media (max-width: 1100px) { .nav-cta .lang summary span { display: none; } .nav-cta .lang summary { padding: 0 10px; } }
.lang-note { background: rgba(242,181,68,.08); border-bottom: 1px solid rgba(242,181,68,.25); color: var(--text-2); font-size: 14px; text-align: center; padding: 8px 16px; }
.lang-note b { color: var(--text); }

/* ---- fonts for Hebrew and Arabic (Archivo has no Hebrew or Arabic letters) ---- */
:root:lang(he) { --f-sans: "Heebo", "Archivo", system-ui, sans-serif; --f-mono: "Heebo", "JetBrains Mono", monospace; }
:root:lang(ar) { --f-sans: "IBM Plex Sans Arabic", "Archivo", system-ui, sans-serif; --f-mono: "IBM Plex Sans Arabic", "JetBrains Mono", monospace; }
/* Arabic letters join: any letter-spacing breaks the words apart, and wide stretch/tight tracking looks wrong */
:lang(ar) * { letter-spacing: 0 !important; font-stretch: 100% !important; }
:lang(he) .eyebrow, :lang(he) .hero-kicker, :lang(he) .mono { letter-spacing: .04em; }
:lang(he) h1, :lang(he) h2, :lang(he) h3, :lang(he) .statement, :lang(he) .d1, :lang(he) .d2 { letter-spacing: -0.01em; font-stretch: 100%; }
:lang(ar) h1, :lang(ar) h2, :lang(ar) .d1, :lang(ar) .d2, :lang(ar) .statement, :lang(ar) .hero-h1 { line-height: 1.3; }
:lang(he) .hero-h1, :lang(he) .d1, :lang(he) .d2 { line-height: 1.12; }

/* ---- right to left ---- */
[dir="rtl"] .skip { left: auto; right: 16px; }
[dir="rtl"] .prose ul, [dir="rtl"] .prose ol, [dir="rtl"] .os ol { padding-left: 0; padding-right: 1.3em; }
[dir="rtl"] .link-arrow::after, [dir="rtl"] .mobile-menu .big a::after { content: "‹"; }
[dir="rtl"] .subnav ul { margin-left: 0; margin-right: auto; }
@media (max-width: 1100px) { [dir="rtl"] .nav-cta { margin-left: 0; margin-right: auto; } }
@media (max-width: 820px) { [dir="rtl"] .subnav ul { margin-right: 0; } }
[dir="rtl"] .crumbs li + li::before { margin-right: 0; margin-left: 6px; }
[dir="rtl"] ul.ticks li { padding-left: 0; padding-right: 28px; }
[dir="rtl"] ul.ticks li::before { left: auto; right: 2px; }
[dir="rtl"] .tile .tile-img { padding: 24px 28px 0 0; }
[dir="rtl"] .tile .tile-img img { border-radius: 0 14px 0 0; border-right: 1px solid var(--line-2); border-left: 0; }
[dir="rtl"] .bleed.shade-left::before { background: linear-gradient(270deg, rgba(5,5,6,.92) 0%, rgba(5,5,6,.6) 34%, rgba(5,5,6,0) 62%); }
[dir="rtl"] .search .icon { left: auto; right: 16px; }
[dir="rtl"] .search input { padding: 0 46px 0 18px; }
[dir="rtl"] .guide-nav a.next { text-align: left; }
[dir="rtl"] .plan .ribbon { left: auto; right: 28px; }
[dir="rtl"] .compare th, [dir="rtl"] .compare td { text-align: right; }
[dir="rtl"] .faq-item summary { padding: 20px 0 20px 44px; }
[dir="rtl"] .faq-item summary::after { right: auto; left: 6px; }
[dir="rtl"] .player .t { text-align: left; }
[dir="rtl"] .hscroll-ctrl .icon, [dir="rtl"] .link-arrow .icon, [dir="rtl"] .btn .icon-dir { transform: scaleX(-1); }
/* the app screenshots, prices, codes and English product names stay left to right inside Hebrew/Arabic text */
[dir="rtl"] .code, [dir="rtl"] code, [dir="rtl"] .price .amt, [dir="rtl"] .code-box { direction: ltr; unicode-bidi: isolate; }
.footer-bottom .foot-langs { flex-basis: 100%; margin-top: 0; }
[dir="rtl"] .hp { left: auto !important; right: -9999px !important; }
.lang-note { position: relative; z-index: 6; }
.lang li a[aria-current="true"]::after { margin-inline-start: auto; }

/* The language button lives in the far corner of the screen, not in the header (Adam, 2026-10-21):
   computers: top corner, in the margin beside the header; phones and tablets: floating in the bottom corner */
.lang-corner { position: fixed; z-index: 110; top: 14px; inset-inline-end: 10px; }
.lang-corner summary { width: 36px; height: 36px; padding: 0; justify-content: center; background: rgba(20,19,23,.85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lang-corner summary span, .lang-corner summary .chev { display: none; }
.lang-corner .lang summary .flag { width: 20px; height: 14px; }
@media (max-width: 1100px) {
  .lang-corner { top: auto; bottom: 16px; inset-inline-end: 16px; }
  .lang-corner summary { width: 46px; height: 46px; box-shadow: 0 8px 28px rgba(0,0,0,.55); border-color: rgba(255,255,255,.22); }
  .lang-corner .lang summary .flag { width: 24px; height: 16px; }
  .lang-corner .lang ul { top: auto; bottom: calc(100% + 8px); }
}

/* ---- Japanese, Chinese (Simplified), Korean ---- */
:root:lang(ja) { --f-sans: "Archivo", "Noto Sans JP", system-ui, sans-serif; --f-mono: "JetBrains Mono", "Noto Sans JP", monospace; }
:root:lang(zh) { --f-sans: "Archivo", "Noto Sans SC", system-ui, sans-serif; --f-mono: "JetBrains Mono", "Noto Sans SC", monospace; }
:root:lang(ko) { --f-sans: "Archivo", "Noto Sans KR", system-ui, sans-serif; --f-mono: "JetBrains Mono", "Noto Sans KR", monospace; }
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3, :lang(ja) .statement, :lang(ja) .d1, :lang(ja) .d2, :lang(ja) .hero-h1,
:lang(zh) h1, :lang(zh) h2, :lang(zh) h3, :lang(zh) .statement, :lang(zh) .d1, :lang(zh) .d2, :lang(zh) .hero-h1,
:lang(ko) h1, :lang(ko) h2, :lang(ko) h3, :lang(ko) .statement, :lang(ko) .d1, :lang(ko) .d2, :lang(ko) .hero-h1 { letter-spacing: 0; font-stretch: 100%; line-height: 1.25; }
:lang(ja) .eyebrow, :lang(zh) .eyebrow, :lang(ko) .eyebrow, :lang(ja) .hero-kicker, :lang(zh) .hero-kicker, :lang(ko) .hero-kicker { letter-spacing: .08em; }
:lang(ja) body, :lang(zh) body { line-break: strict; } /* no small kana or closing punctuation at the start of a line */
:lang(ja) p, :lang(zh) p, :lang(ja) li, :lang(zh) li { line-height: 1.8; }
:lang(ko) { word-break: keep-all; } /* Korean wraps between words, not inside them */
:lang(ko) p, :lang(ko) li { line-height: 1.75; }
/* German and French run longer: let big headings break long words */
:lang(de) h1, :lang(de) h2, :lang(de) .d1, :lang(de) .d2, :lang(de) .hero-h1, :lang(de) .statement { hyphens: auto; overflow-wrap: anywhere; }
:lang(ja) .eyebrow, :lang(zh) .eyebrow, :lang(ko) .eyebrow, :lang(ja) .hero-kicker, :lang(zh) .hero-kicker, :lang(ko) .hero-kicker, :lang(ja) .mono, :lang(zh) .mono, :lang(ko) .mono { font-family: var(--f-sans); }