@import url('/fonts.css');
/* Manrope includes Cyrillic; keep the same weight and geometry across languages. */
html[lang="ru"] { font-family: 'Manrope', sans-serif; }
.language-switcher { display: flex; gap: 14px; align-items: center; }
.site-header .language-switcher a { position: static; width: auto; height: auto; padding: 10px 0; margin: 0; font-size: 14px; font-weight: 600; line-height: 1.3; text-decoration: none; }
.language-switcher a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }
.comp-frame .language-switcher { position: absolute; right: 5.5%; top: 2.5%; z-index: 4; color: #080e3d; background: #faf7ef; padding: 0 12px; border-radius: 999px; }
html:not([lang="en"]) .r-headline { font-size: calc(70 * var(--scale)); line-height: 1.05; }
html[lang="ru"] .r-nav-how { width: 15%; }
html[lang="ru"] .r-nav-questions { left: 36%; width: 10%; }
html[lang="ru"] .r-requirements { font-size: max(12px, calc(13 * var(--scale))); }
html[lang="ru"] .r-description span { display: inline; }
html[lang="ru"] .r-next-heading { font-size: calc(58 * var(--scale)); }
.comp-frame .language-switcher a { color: #080e3d; }
.r-headline { text-wrap: balance; }
@media (min-width: 1201px) {
  .hero-copy { position: absolute; left: 5.53%; top: 9.7%; width: 40%; }
  .hero-copy .r-headline, .hero-copy .r-description { position: static; width: auto; }
  .hero-copy .r-description { max-width: 33ch; margin-top: 24px; }
}
@media (max-width: 1200px) { .hero-copy { display: contents; } }
@media (max-width: 1200px) {
  .comp-frame .site-header { flex-wrap: wrap; gap: 10px 18px; }
  .comp-frame .language-switcher { position: static; order: 1; margin-left: auto; gap: 12px; }
  .comp-frame .site-header > nav:not(.language-switcher) { order: 2; width: 100%; }
  html:not([lang="en"]) .r-headline { font-size: clamp(35px, 9.5vw, 64px); }
  html:not([lang="en"]) .site-header nav a { width: auto; }
  html[lang="ru"] .r-next-heading { font-size: clamp(30px, 7vw, 50px); }
  .comp-frame .language-switcher a { color: #080e3d; }
}
@media (max-width: 600px) {
  .site-header.wrap { height: auto; min-height: 100px; flex-wrap: wrap; padding-block: 18px; gap: 12px; }
  .site-header.wrap .language-switcher { width: 100%; justify-content: flex-start; }
  .comp-frame .site-header { padding-inline: 18px; }
  .site-header .language-switcher a { font-size: 13px; }
  .comp-frame .language-switcher { gap: 10px; }
  .demo-tabs { flex-wrap: wrap; }
}