/* Адаптив «Сообщество mobile» — 376–687px (iPhone 12 Pro 390px и др.), после responsive-768.css */

@media (max-width: 687px) {
  :root {
    --container-padding: clamp(15px, calc(15px + (100vw - 375px) * 9 / 312), 24px);
    --header-height: 60px;
  }

  .site-header__lang {
    display: none !important;
  }

  /* =====================================================
     МОБИЛЬНЫЙ ХЕДЕР 375 — Figma
     ===================================================== */

  .site-header:not(.site-header--over-hero) .site-header__bar {
    background: var(--header-bg);
    border-bottom: 1px solid transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  .site-header.site-header--over-hero:not(.is-scrolled):not(:hover):not(.is-menu-open) .site-header__bar {
    background: transparent;
    border-bottom-color: transparent;
  }

  /* Прокрутили / страница без hero — белая шапка, тёмное меню */
  .site-header.is-scrolled:not(:hover):not(.is-menu-open) .site-header__bar,
  .site-header.site-header--always-light:not(:hover):not(.is-menu-open) .site-header__bar {
    background: #ffffff;
    border-bottom-color: rgb(33 33 35 / 10%);
  }

  .site-header.is-scrolled:not(:hover):not(.is-menu-open) .site-header__logo-img--light,
  .site-header.site-header--always-light:not(:hover):not(.is-menu-open) .site-header__logo-img--light {
    opacity: 0;
  }

  .site-header.is-scrolled:not(:hover):not(.is-menu-open) .site-header__logo-img--dark,
  .site-header.site-header--always-light:not(:hover):not(.is-menu-open) .site-header__logo-img--dark {
    opacity: 1;
  }

  .site-header.is-scrolled:not(:hover):not(.is-menu-open) .site-header__menu-toggle,
  .site-header.is-scrolled:not(:hover):not(.is-menu-open) .site-header__menu-toggle-label,
  .site-header.is-scrolled:not(:hover):not(.is-menu-open) .site-header__menu-toggle-open,
  .site-header.is-scrolled:not(:hover):not(.is-menu-open) .site-header__menu-toggle-close,
  .site-header.site-header--always-light:not(:hover):not(.is-menu-open) .site-header__menu-toggle,
  .site-header.site-header--always-light:not(:hover):not(.is-menu-open) .site-header__menu-toggle-label,
  .site-header.site-header--always-light:not(:hover):not(.is-menu-open) .site-header__menu-toggle-open,
  .site-header.site-header--always-light:not(:hover):not(.is-menu-open) .site-header__menu-toggle-close {
    color: var(--Primary-text, #212123);
  }

  .site-header.is-scrolled:not(:hover):not(.is-menu-open) .site-header__menu-toggle-icon-glyph,
  .site-header.site-header--always-light:not(:hover):not(.is-menu-open) .site-header__menu-toggle-icon-glyph {
    background: var(--Primary-text, #212123);
  }

  /* Hover — синяя шапка на страницах без hero; на главной поверх hero — прозрачная */
  .site-header:not(.site-header--over-hero):hover .site-header__bar,
  .site-header.site-header--over-hero.is-scrolled:hover .site-header__bar {
    background: var(--header-bg);
    border-bottom-color: transparent;
  }

  .site-header.site-header--over-hero:not(.is-scrolled):not(.is-menu-open):hover .site-header__bar {
    background: transparent;
    border-bottom-color: transparent;
  }

  .site-header:hover .site-header__logo-img--light {
    opacity: 1;
  }

  .site-header:hover .site-header__logo-img--dark {
    opacity: 0;
  }

  .site-header:hover .site-header__menu-toggle,
  .site-header:hover .site-header__menu-toggle-open,
  .site-header:hover .site-header__menu-toggle-close {
    color: #ffffff;
  }

  .site-header:hover .site-header__menu-toggle-icon-glyph {
    background-color: #ffffff;
  }

  /* Hero без скролла — синяя шапка, белое меню (кроме always-light) */
  .site-header:not(.is-scrolled):not(:hover):not(.is-menu-open):not(.site-header--always-light) .site-header__menu-toggle,
  .site-header:not(.is-scrolled):not(:hover):not(.is-menu-open):not(.site-header--always-light) .site-header__menu-toggle-open,
  .site-header:not(.is-scrolled):not(:hover):not(.is-menu-open):not(.site-header--always-light) .site-header__menu-toggle-close {
    color: #ffffff;
  }

  .site-header:not(.is-scrolled):not(:hover):not(.is-menu-open):not(.site-header--always-light) .site-header__menu-toggle-icon-glyph {
    background-color: #ffffff;
  }

  /* Меню открыто — Ru/En и крестик на месте логотипа, отступы 20px как в Figma */
  .site-header.is-menu-open {
    inset: 0 auto auto 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
  }

  .site-header.is-menu-open .site-header__bar {
    background: #ffffff;
    border-bottom-color: transparent;
    width: 100%;
    max-width: 100%;
  }

  .site-header.is-menu-open .site-header__inner {
    width: 100%;
    max-width: 100%;
  }

  .site-header.is-menu-open .site-header__logo {
    display: none;
  }

  .site-header.is-menu-open .site-header__nav-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: calc(var(--header-z-index) + 1);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0;
    background: #ffffff;
  }

  .site-header.is-menu-open .site-header__nav {
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 135px 15px 40px;
  }

  .site-header.is-menu-open .site-header__menu-toggle,
  .site-header.is-menu-open .site-header__menu-toggle-label,
  .site-header.is-menu-open .site-header__menu-toggle-open,
  .site-header.is-menu-open .site-header__menu-toggle-close {
    color: var(--Primary-text, #212123);
  }

  .site-header.is-menu-open .site-header__menu-toggle-icon-glyph {
    background: var(--Primary-text, #212123);
  }

  .site-header.is-menu-open .site-header__menu-toggle {
    visibility: hidden;
  }

  .site-header__nav {
    position: fixed;
    z-index: calc(var(--header-z-index) - 1);
    top: var(--header-height);
    right: 0;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 135px 15px 40px;
    background: #ffffff;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .site-header__nav-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: calc(var(--header-z-index) + 1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 14px 15px;
    border-bottom: none;
    background: #ffffff;
  }

  .site-header__nav-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    width: 116px;
    height: 33px;
    text-decoration: none;
  }

  .site-header__nav-logo-img {
    display: block;
    width: 116px;
    height: 33px;
  }

  /* Блок пунктов — Figma 339px, gap 20px у nav + 20px от линии до текста */
  .site-header__nav-item {
    position: relative;
    box-sizing: border-box;
    width: 339px;
    max-width: calc(100vw - 30px);
    margin: 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--background-light-blue, #e9f0f9);
    border-bottom: none;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .site-header__nav-item.has-dropdown.is-open {
    gap: 20px;
  }

  /* Нижняя линия под «О компании» — как у остальных пунктов: 20px от текста до линии */
  .site-header__nav-item[data-mega-trigger="company"] {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--background-light-blue, #e9f0f9);
  }

  /* Строка пункта — Figma 339×19; текст слева, стрелка справа по центру */
  .site-header__nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    height: 19px;
    min-height: 19px;
    margin: 0;
    padding: 0;
    border: none;
    flex-wrap: nowrap;
  }

  .site-header__nav-link {
    color: var(--Primary-text, #212123);
    margin: 0;
    padding: 0;
    font-family: "Roboto Flex", var(--font-body), sans-serif;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    line-height: 100%;
    letter-spacing: 0;
    opacity: 1;
    text-decoration: none;
  }

  .site-header__nav-link:hover,
  .site-header__nav-link:focus-visible,
  .site-header__nav-link:active,
  .site-header__nav-item.is-open .site-header__nav-row .site-header__nav-link {
    color: var(--Primary-text, #212123);
    background: transparent;
    opacity: 1;
  }

  .site-header__nav-row .site-header__nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 1 auto;
    width: fit-content;
    max-width: calc(100% - 26px);
    min-width: 0;
    height: 19px;
    min-height: 19px;
    padding: 0;
    font-size: 16px;
    line-height: 19px;
    color: var(--Primary-text, #212123);
    position: relative;
    z-index: 1;
  }

  .site-header__nav-item:not(.has-dropdown) .site-header__nav-row .site-header__nav-link {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
  }

  .site-header__chevron--light {
    display: none !important;
  }

  .site-header__nav-link .site-header__chevron--desktop {
    display: none !important;
  }

  /* Сброс desktop-позиционирования шеврона — иначе top:50% без translate тянет стрелку вниз */
  .site-header__nav-toggle .site-header__chevron--dark,
  .site-header__nav-toggle .site-header__chevron--toggle {
    position: static;
    top: auto;
    right: auto;
    opacity: 1;
    transform: none;
  }

  .site-header__nav-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 10px;
    align-self: center;
    width: 10px;
    min-width: 10px;
    height: 19px;
    min-height: 19px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--Primary-text, #212123);
    -webkit-tap-highlight-color: transparent;
  }

  /* Невидимая зона нажатия — визуально стрелка 10×5 по центру строки 19px */
  .site-header__nav-toggle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  .site-header__nav-toggle .site-header__chevron--toggle {
    display: block;
    position: relative;
    z-index: 1;
    flex: none;
    width: 10px;
    height: 5px;
    margin: 0;
    padding: 0;
    object-fit: contain;
    opacity: 1;
    transform: none;
    transform-origin: center center;
    transition: transform 0.2s ease;
    cursor: pointer;
  }

  .site-header__nav-item.has-dropdown.is-open > .site-header__nav-row .site-header__nav-toggle .site-header__chevron--toggle {
    transform: rotate(180deg);
  }

  .site-header__nav-lang-group {
    display: none !important;
  }

  .site-header__nav-lang-btn {
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    padding: 2px 3px;
    margin: 0;
    border: 0.5px solid var(--color-accent-card);
    border-radius: 0;
    background: #ffffff;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 100%;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }

  .site-header__nav-lang-btn + .site-header__nav-lang-btn {
    margin-left: -0.5px;
  }

  .site-header__nav-lang-btn.is-active {
    background: var(--color-accent-card);
    border-color: var(--color-accent-card);
    color: #ffffff;
    z-index: 1;
  }

  .site-header__nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--color-text-primary);
  }

  .site-header__nav-close-icon {
    display: block;
    width: 12.5px;
    height: 12.5px;
    background-color: currentColor;
    -webkit-mask: url("../img/icon-close.svg") no-repeat center / contain;
    mask: url("../img/icon-close.svg") no-repeat center / contain;
  }

  .site-header__nav-item.is-open > .site-header__mobile-sub {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 232px;
    max-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-header__mobile-sub li {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-header__mobile-sub-link {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 16px;
    padding: 0;
    margin: 0;
    border: none;
    font-family: "Roboto Flex", var(--font-body), sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 100%;
    letter-spacing: 0;
    color: var(--Primary-text, #212123);
    text-decoration: none;
  }

  .site-header__mobile-sub-link:hover,
  .site-header__mobile-sub-link:focus-visible,
  .site-header__mobile-sub-link:active {
    color: var(--Primary-text, #212123);
    background: transparent;
  }

  .site-header__nav-footer {
    display: block;
    flex-shrink: 0;
    align-self: stretch;
    width: 100%;
    max-width: none;
    margin-top: auto;
    padding: 32px 15px 0;
    border-top: none;
  }

  .site-header__nav-cta {
    display: flex;
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    margin-bottom: 32px;
    padding: 2px 20px;
    border: 1px solid var(--color-text-primary);
    border-radius: 0;
    background: transparent;
    color: var(--color-text-primary);
  }

  .site-header__nav-cta .btn__text {
    width: auto;
    height: auto;
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text-primary);
  }

  .site-header__nav-contacts {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .site-header__nav-contact {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .site-header__nav-contact-label {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    line-height: 100%;
    color: var(--color-text-secondary);
  }

  .site-header__nav-contact-value {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 100%;
    color: var(--color-text-primary);
    text-decoration: none;
  }

  .site-header__nav-contact-value:hover {
    opacity: 0.75;
  }

  .site-header__nav-contact-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
  }

  .site-header__nav-socials {
    display: flex;
    flex-shrink: 0;
    gap: 8px;
  }

  .site-header__nav-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    border: 0.5px solid var(--color-accent-card);
    background: #ffffff;
    line-height: 0;
  }

  .site-header__nav-social-glyph {
    display: block;
    flex-shrink: 0;
    background-color: var(--color-accent-card);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  .site-header__nav-social-glyph--telegram {
    width: 15px;
    height: 13px;
    -webkit-mask-image: url("../img/icon-nav-social-telegram.svg");
    mask-image: url("../img/icon-nav-social-telegram.svg");
  }

  .site-header__nav-social-glyph--max {
    width: 13px;
    height: 13px;
    -webkit-mask-image: url("../img/icon-nav-social-max.svg");
    mask-image: url("../img/icon-nav-social-max.svg");
  }

  /* Hero Figma 375: блок 460px (60 header + 400 hero), текст внизу */
  .hero-community,
  .hero-community__content {
    height: 400px;
    min-height: 400px;
  }

  .hero-community__content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    box-sizing: border-box;
    padding: 0 15px 40px;
    max-width: 100%;
  }

  .hero-community__breadcrumbs {
    position: absolute;
    top: 80px;
    left: 15px;
    right: auto;
    margin: 0 !important;
    gap: 10px;
    font-family: "Roboto", sans-serif;
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    line-height: 16px;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.7);
  }

  .hero-community__breadcrumbs a {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
  }

  .hero-community__breadcrumbs-current {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: #ffffff;
  }

  .hero-community__title {
    position: static;
    width: 344px;
    max-width: 100%;
    margin: 0;
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 400;
    font-style: normal;
    line-height: 110%;
    letter-spacing: -0.02em;
    color: #ffffff;
  }

  .hero-community__lead:not(.hero-community__lead--375) {
    display: none;
  }

  .hero-community__lead--375 {
    display: block;
    position: static;
    width: 233px;
    max-width: 100%;
    min-height: 54px;
    margin: 15px 0 0;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 130%;
    letter-spacing: 0;
    color: #ffffff;
  }

  /* —— Intro Figma 375: 315×156, Roboto Condensed 24px —— */
  .community-intro {
    padding: 48px var(--container-padding) 20px;
  }

  .community-intro__inner,
  .community-intro__row {
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: 345px;
    margin-inline: auto;
  }

  .community-intro .microheading {
    display: none;
  }

  .community-intro__text,
  .community-intro__text--wide,
  .community-intro__text--1024,
  .community-intro__text--768 {
    display: none;
  }

  .community-intro__text--375 {
    display: block;
    width: 315px;
    max-width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 400;
    font-style: normal;
    line-height: 110%;
    letter-spacing: -0.02em;
    color: #212123;
  }

  /* —— Карточки Figma 375: 345×260, колонка, gap 15px —— */
  .community-cards {
    padding: 0 var(--container-padding) 80px;
    overflow-x: visible;
  }

  .community-cards__grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
    width: 100%;
    max-width: 345px;
    margin-inline: auto;
  }

  .community-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    max-width: 345px;
    height: 260px;
    min-height: 260px;
    max-height: 260px;
    margin: 0;
    padding: 30px;
    gap: 0;
  }

  .community-card__top {
    display: flex;
    flex: none;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
  }

  .community-card__title,
  .community-card__title--wide {
    display: none;
  }

  .community-card__title--375 {
    display: block;
    flex: 1;
    min-width: 0;
    max-width: calc(100% - 42px);
    margin: 0;
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 400;
    font-style: normal;
    line-height: 110%;
    letter-spacing: -0.02em;
    color: #212123;
  }

  .community-card__desc,
  .community-card__desc--768,
  .community-card__desc--1024 {
    display: none;
  }

  .community-card__desc--375 {
    display: block;
    flex: none;
    width: 285px;
    max-width: 100%;
    margin: 0;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 19px;
    letter-spacing: 0;
    color: #5f6062;
  }

  .community-card__icon {
    flex: none;
    width: 34px;
    height: 34px;
  }

  .community-card__icon img {
    display: block;
    width: 34px;
    height: 34px;
  }

  /* —— Subscribe Figma 375: колонка 345px, кнопки в столбик —— */
  .community-subscribe {
    padding: 80px var(--container-padding);
  }

  .community-subscribe__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: 100%;
    max-width: 345px;
    margin-inline: auto;
  }

  .community-subscribe .microheading {
    width: 192px;
    height: auto;
    min-height: 14px;
    padding: 0;
  }

  .community-subscribe .microheading--on-dark .microheading__text {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    line-height: 120%;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
  }

  .community-subscribe__content {
    width: 100%;
    max-width: 345px;
  }

  .community-subscribe__title {
    width: 100%;
    max-width: 345px;
    margin: 0;
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 400;
    font-style: normal;
    line-height: 110%;
    letter-spacing: -0.02em;
    color: #ffffff;
  }

  .community-subscribe__title-br--768 {
    display: none;
  }

  .community-subscribe__desc {
    width: 100%;
    max-width: 345px;
    margin: 16px 0 0;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 19px;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.8);
  }

  .community-subscribe__desc br {
    display: none;
  }

  .community-subscribe__actions {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    width: 100%;
    max-width: 345px;
    margin-top: 24px;
    gap: 15px;
  }

  .subscribe-btn {
    box-sizing: border-box;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    width: 228px;
    height: 50px;
    padding: 2px 5px 2px 15px;
    gap: 10px;
  }

  .subscribe-btn--max,
  .subscribe-btn--vk,
  .subscribe-btn--telegram,
  .subscribe-btn--email {
    width: 228px;
    height: 50px;
  }

  .subscribe-btn--email .subscribe-btn__icon {
    background-color: var(--color-bg-blue);
  }

  .subscribe-btn--email:hover .subscribe-btn__icon,
  .subscribe-btn--email:focus-visible .subscribe-btn__icon {
    background-color: var(--color-accent-card);
  }

  /* —— Join Figma 375: microheading 12px, заголовок 30px —— */
  .community-join {
    padding: 80px var(--container-padding) 20px;
  }

  .community-join__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    max-width: 345px;
    margin-inline: auto;
    min-height: 0;
  }

  .community-join .microheading--two-lines {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 313px;
    max-width: 100%;
    height: 14px;
    min-height: 14px;
    padding: 0;
    gap: 8px;
    color: var(--Tetriary-text, #8a8e92);
  }

  .community-join .microheading--two-lines .microheading__icon {
    flex: none;
    margin-top: 0;
    align-self: center;
  }

  .community-join .microheading--two-lines .microheading__text {
    display: block;
    flex: 1;
    min-width: 0;
    height: 14px;
    font-family: "Roboto Flex", var(--font-body), sans-serif;
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    line-height: 120%;
    letter-spacing: 0;
    color: var(--Tetriary-text, #8a8e92);
    white-space: nowrap;
  }

  .community-join .microheading--two-lines .microheading__line {
    display: inline;
    font: inherit;
    color: inherit;
  }

  .community-join .microheading--two-lines .microheading__line:not(:last-child)::after {
    content: " ";
  }

  .community-join__title {
    width: 100%;
    max-width: 345px;
    margin: 0;
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 400;
    font-style: normal;
    line-height: 110%;
    letter-spacing: -0.02em;
    color: #212123;
  }

  /* —— Contribute Figma 375: 345×250, колонка, gap 15px —— */
  .community-contribute {
    padding: 0 var(--container-padding) 80px;
  }

  .community-contribute__grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
    width: 100%;
    max-width: 345px;
    margin-inline: auto;
  }

  .contrib-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    max-width: 345px;
    height: 250px;
    min-height: 250px;
    max-height: 250px;
    margin: 0;
    padding: 30px;
  }

  .contrib-card--gray {
    padding: 30px;
    background-color: #edeef0;
  }

  .contrib-card--blue {
    background-color: #e9f0f9;
  }

  .contrib-card__content {
    flex: none;
    width: 285px;
    max-width: 100%;
  }

  .contrib-card__title {
    width: 285px;
    max-width: 100%;
    margin: 0;
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 400;
    font-style: normal;
    line-height: 110%;
    letter-spacing: -0.02em;
    color: #212123;
  }

  .contrib-card__title br {
    display: inline;
  }

  .contrib-card__desc {
    width: 285px;
    max-width: 100%;
    margin: 16px 0 0;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 19px;
    letter-spacing: 0;
    color: #212123;
  }

  .contrib-card--light .contrib-card__desc br {
    display: none;
  }

  .contrib-card__btn,
  .contrib-card__btn--wide,
  .contrib-card__btn--narrow,
  .contrib-card__btn--medium {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    box-sizing: border-box;
    width: auto;
    max-width: 100%;
    height: 50px;
    min-height: 50px;
    margin-top: auto;
    padding: 0 4px 0 30px;
    border: 1px solid #0c3eb3;
    background-color: transparent;
    text-decoration: none;
  }

  .contrib-card__btn-text {
    flex: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: "Roboto Flex", var(--font-body);
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #0c3eb3;
    background: transparent;
  }

  .contrib-card__btn-text--long {
    display: none;
  }

  .contrib-card__btn-text--short {
    display: block;
  }

  .contrib-card__btn-icon,
  .contrib-card__btn--wide .contrib-card__btn-icon,
  .contrib-card__btn--narrow .contrib-card__btn-icon,
  .contrib-card__btn--medium .contrib-card__btn-icon {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    flex: none;
    width: 8px;
    height: 8px;
    min-width: 8px;
    min-height: 8px;
    margin: 0;
    padding: 0;
    background-color: #0c3eb3;
    transform: none;
  }

  .contrib-card__btn--wide {
    width: 240px;
    max-width: 100%;
  }

  .contrib-card__btn--narrow {
    width: 164px;
    max-width: 100%;
  }

  .contrib-card__btn--medium {
    width: 262px;
    max-width: 100%;
  }

  /* —— Библиотека моделей Figma 375 —— */
  .model-library {
    padding: 40px var(--container-padding) 80px;
  }

  .model-library__inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 345px;
    margin-inline: auto;
  }

  .model-library__sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 345px;
    max-width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
    background-color: transparent;
  }

  .model-library__search {
    box-sizing: border-box;
    width: 345px;
    max-width: 100%;
    height: 50px;
    padding: 15px 0 15px 15px;
    background-color: var(--color-bg-white);
    border-bottom: 1px solid #e3e5e8;
  }

  .model-library__search-row {
    justify-content: flex-start;
    gap: 15px;
    width: 100%;
    height: 20px;
  }

  .model-library__search-input {
    flex: 1;
    width: auto;
    height: 19px;
    font-size: 16px;
    line-height: 100%;
    text-align: left;
  }

  .model-library__search-clear {
    margin-left: auto;
  }

  .model-library__filter {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 345px;
    max-width: 100%;
    min-height: 50px;
    padding: 15px;
    border-radius: 2px;
    background-color: var(--color-bg-white);
  }

  .model-library__filter-toggle {
    height: 20px;
  }

  .model-library__filter-toggle-label {
    font-size: 16px;
    line-height: 100%;
    color: var(--color-text-tertiary);
  }

  .model-library__filter:nth-of-type(4) .model-library__filter-toggle-label {
    width: 89px;
    overflow: hidden;
    white-space: nowrap;
  }

  .model-library__filter-body {
    width: 100%;
    margin-top: 12px;
    padding: 12px 0 0;
    box-sizing: border-box;
    border-top: 1px solid #e3e5e8;
    background-color: transparent;
    box-shadow: none;
  }

  .model-library__filter.is-open .model-library__filter-body {
    display: flex;
  }

  .model-library__filter-body--complexity {
    width: 100%;
  }

  .model-library__divider {
    display: none !important;
  }

  .model-library__main,
  .model-library__grid {
    width: 345px;
    max-width: 100%;
  }

  .model-library__main {
    gap: 40px;
  }

  .model-library__grid {
    grid-template-columns: 345px;
    gap: 18px;
  }

  .model-card {
    width: 345px;
    height: 453px;
    gap: 25px;
    padding: 20px;
  }

  .model-card__body {
    gap: 21px;
  }

  .model-card__tags {
    width: 241px;
    height: 30px;
    min-height: 30px;
  }

  .model-card__tag {
    font-size: 14px;
    line-height: 100%;
  }

  .model-card__preview {
    width: 293px;
    height: 250px;
  }

  .model-card__title {
    width: 227px;
    height: 46px;
    font-size: 20px;
    font-weight: 500;
    line-height: 100%;
  }

  .model-card__footer {
    width: 305px;
    max-width: 100%;
    height: 18px;
    gap: 25px;
  }

  .model-card__complexity {
    gap: 8px;
    font-size: 14px;
    line-height: 130%;
  }

  .model-card__complexity > span:first-child {
    width: 71px;
    height: 18px;
  }

  .model-library__pagination {
    transform: none;
  }

  /* Fluid mobile menu: 376-687 should stretch instead of staying 375px-wide. */
  .site-header.is-menu-open .site-header__nav,
  .site-header__nav {
    width: 100vw;
    max-width: 100vw;
    padding-right: var(--container-padding);
    padding-left: var(--container-padding);
  }

  .site-header.is-menu-open .site-header__nav-header,
  .site-header__nav-header {
    padding-top: 14px;
    padding-right: var(--container-padding);
    padding-left: var(--container-padding);
  }

  .site-header__nav-item,
  .site-header__mobile-sub,
  .site-header__nav-footer,
  .site-header__nav-cta,
  .site-header__nav-contacts {
    width: 100%;
    max-width: none;
  }

  .site-header__nav-footer {
    padding-right: 0;
    padding-left: 0;
  }

  .site-header__nav-contact-row {
    width: 100%;
  }
}