/* The site in another language (docs/i18n.md): loaded by a language's pages (es/..., built by tools/i18n/build-lang.mjs)
   and by an English-only page showing its header in the reader's language (the head's script), never by an English page
   otherwise. The globe, the language lists and the offer are site.css's (every page has them). */
:root:lang(zh-Hans), :root:lang(zh) { --font-display: "Montserrat", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif;
  --font-body: "Montserrat", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif; }
:lang(zh-Hans) h1, :lang(zh-Hans) h2, :lang(zh-Hans) h3 { letter-spacing: 0; }
:lang(zh-Hans) .eyebrow, :lang(zh-Hans) .mnav-label { letter-spacing: 0.08em; }
/* long words (German, Russian, Turkish) break inside a narrow card rather than spill out of it */
:root:lang(de), :root:lang(ru), :root:lang(tr), :root:lang(fr), :root:lang(es), :root:lang(pt-BR) { overflow-wrap: break-word; }
:lang(de) h1, :lang(de) h2, :lang(de) h3, :lang(ru) h1, :lang(ru) h2, :lang(ru) h3, :lang(tr) h1, :lang(tr) h2 { hyphens: auto; -webkit-hyphens: auto; }
.legal-note { margin: 0 0 28px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--fg) 4%, transparent); font-size: 0.9375rem; }
/* "Explain in my language": the button under an explanation, and the translation under the English */
.tr-wrap { margin-top: 12px; }
.tr-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: transparent; color: var(--fg-2); font: 600 0.8125rem/1.2 var(--font-body); cursor: pointer; transition: color .2s ease, background-color .2s ease; }
.tr-btn:hover, .tr-btn[aria-expanded="true"] { color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.tr-btn:disabled { opacity: .7; cursor: progress; }
.tr-box { margin-top: 10px; padding: 12px 14px; border-radius: 12px; border-left: 3px solid var(--ok); background: color-mix(in srgb, var(--fg) 4%, transparent); }
.tr-box p { margin: 6px 0 0; }
.tr-k { display: block; font: 600 0.6875rem/1.2 var(--font-data); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.tr-msg { margin: 8px 0 0; font-size: 0.8125rem; color: var(--muted); }
@media (pointer: coarse) { .tr-btn { min-height: 44px; } }
/* the top bar in another language (html.nav-long: a language page, or an English-only page with its bar in one): the
   menus' longer words need about 1,280 px, so below that the menu button takes over, as below 960 px in English; the
   globe shows its code only on the widest screens */
html.nav-long .lang-btn .lang-code { display: none; }
html.nav-long .lang-btn { padding: 0; width: 38px; justify-content: center; }
@media (min-width: 960px) and (max-width: 1279px) {
  html.nav-long .nav { display: none; }
  html.nav-long .menu-btn { display: inline-grid; }
  html.nav-long .header-actions { margin-left: auto; }
  html.nav-long .header-cta, html.nav-long .header-login, html.nav-long[data-me] .header-up { display: none; }
  html.nav-long .mobile-nav:not([hidden]) { display: block !important; }
  html.nav-long .mnav-more { display: block; }
}
/* the sign-up field's button in a longer language: the field and the button share the row, the button wraps under it
   when they can't */
html.nav-long .subscribe-field { flex-wrap: wrap; }
html.nav-long .subscribe-field input { min-width: 0; flex: 1 1 220px; }
html.nav-long .subscribe-field .btn { flex: 1 0 auto; }
/* a button whose words in another language are longer than the screen allows wraps to two lines rather than lose them */
@media (max-width: 640px) {
  html.nav-long .btn { white-space: normal; text-align: center; line-height: 1.25; padding-block: 0.55em; max-width: 100%; }
  html.nav-long .btn > span { min-width: 0; }
}
/* the plans' switch in a longer language: closer buttons, so its three choices stay inside the card */
html.nav-long .prem .pr-bill { max-width: 100%; }
html.nav-long .prem .pr-bill button { padding: 0 13px; gap: 6px; }
@media (max-width: 1100px) { html.nav-long .prem .pr-bill button { padding: 0 10px; font-size: 0.8125rem; } }
@media (max-width: 520px) {
  html.nav-long .prem .pr-bill button { padding: 0 8px; gap: 4px; font-size: 0.75rem; }
  html.nav-long .prem .pr-bill .pr-save-tr { display: none; }
}