/* ============================================================================
   SailorOS V2 — сетки страниц публичного сайта (SPEC SAILOROS-V2-PUBLIC-SITE §6).

   Здесь ТОЛЬКО раскладка экранов, которой нет в components.css: шапка/подвал
   в контейнере, каталог вакансий, карточка вакансии, панель фильтров.
   Токены и компоненты — tokens.css / components.css, они первичны.

   ВАЖНО (инцидент 10.07): внутри CSS-комментария нельзя писать «звёздочка
   плюс слэш» — это закрывает комментарий досрочно и съедает следующее правило.
   ============================================================================ */

/* ===== Каркас страницы ===================================================== */
[data-sailoros="v2"] .s-main { min-height: 60vh; padding: var(--space-6) 0 var(--space-16); }

/* ===== Шапка: содержимое в контейнере ====================================== */
[data-sailoros="v2"] .s-header__inner {
  display: flex; align-items: center; gap: var(--space-8);
  width: 100%; height: 100%;
}
[data-sailoros="v2"] .s-header__logo {
  font-size: var(--text-h3); font-weight: 700; color: var(--brand-900);
  letter-spacing: -0.02em; white-space: nowrap;
}
[data-sailoros="v2"] .s-header__logo span { color: var(--brand-600); }
[data-sailoros="v2"] .s-header__logo:hover { text-decoration: none; }
[data-sailoros="v2"] .s-header__mobile {
  display: none; flex-direction: column; gap: var(--space-1);
  background: var(--bg-000); border-bottom: 1px solid var(--line-300);
  padding: var(--space-3) var(--gutter-mobile) var(--space-4);
}
[data-sailoros="v2"] .s-header__mobile a {
  color: var(--ink-700); padding: var(--space-2) 0; font-size: var(--text-body-lg);
}
@media (max-width: 640px) {
  [data-sailoros="v2"] .s-header__mobile:not([hidden]) { display: flex; }
}

/* --- Шапка над первым экраном --------------------------------------------
   Тёмная, ПОЛУПРОЗРАЧНАЯ и по-прежнему липкая.

   Разобранные и отвергнутые варианты — оба про одно и то же второе состояние
   («проскроллили, нужен фон»):
   • прозрачная липкая с классом от скрипта — сломается скрипт, и белые ссылки
     лягут на белую полосу; меню на главной пропадёт совсем;
   • абсолютная, уезжающая вместе с первым экраном — состояния нет вовсе, но
     главная высотой в пять с половиной тысяч пикселей остаётся без навигации,
     а на телефоне — ещё и без кнопки меню.

   Полупрозрачная тёмная подложка снимает вопрос: над первым экраном она почти
   сливается с ним, ниже — остаётся читаемой тёмной полосой на светлом. Второго
   состояния нет, скрипт не нужен, размытие необязательно (без поддержки
   `backdrop-filter` остаётся тот же тёмный фон, только плотнее). */
[data-sailoros="v2"] .s-header--hero {
  position: sticky; top: 0; z-index: 20;
  background: rgba(8, 27, 60, .82);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom-color: transparent;
  height: var(--hero-header);
}
[data-sailoros="v2"] .s-header--hero .s-header__logo,
[data-sailoros="v2"] .s-header--hero .s-header__logo span { color: #FFFFFF; }
[data-sailoros="v2"] .s-header--hero .s-header__link { color: var(--deep-ink-2); }
[data-sailoros="v2"] .s-header--hero .s-header__link:hover,
[data-sailoros="v2"] .s-header--hero .s-header__link--active { color: #FFFFFF; }
[data-sailoros="v2"] .s-header--hero .s-header__link--active { box-shadow: inset 0 -2px 0 0 #FFFFFF; }
[data-sailoros="v2"] .s-header--hero .s-header__burger { color: #FFFFFF; }
[data-sailoros="v2"] .s-header--hero .s-header__mobile {
  background: var(--deep-100); border-bottom-color: var(--deep-line);
}
[data-sailoros="v2"] .s-header--hero .s-header__mobile a { color: var(--deep-ink-2); }

/* Кнопка «на тёмном»: прозрачная со светлой границей. Отдельный модификатор, а
   не переопределение --secondary, — иначе один и тот же класс выглядел бы
   по-разному на двух страницах в зависимости от соседа. */
[data-sailoros="v2"] .s-btn--on-dark {
  background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, .28);
}
[data-sailoros="v2"] .s-btn--on-dark:hover:not(:disabled) {
  background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .45);
}
[data-sailoros="v2"] .s-btn--light { background: #FFFFFF; color: var(--brand-900); border-color: #FFFFFF; }
[data-sailoros="v2"] .s-btn--light:hover:not(:disabled) { background: var(--brand-50); }

/* ===== Подвал ============================================================== */
[data-sailoros="v2"] .s-footer__brand {
  font-size: var(--text-h3); font-weight: 700; color: var(--brand-900);
  margin: 0 0 var(--space-3); letter-spacing: -0.02em;
}
[data-sailoros="v2"] .s-footer__brand span { color: var(--brand-600); }
[data-sailoros="v2"] .s-footer__col { display: flex; flex-direction: column; gap: var(--space-3); }
[data-sailoros="v2"] .s-footer__col a { color: var(--ink-700); font-size: var(--text-body); }
[data-sailoros="v2"] .s-footer__col a:hover { color: var(--brand-600); text-decoration: none; }
[data-sailoros="v2"] .s-footer__col .s-overline { margin: 0 0 var(--space-1); }
[data-sailoros="v2"] .s-footer__col--brand { gap: var(--space-2); }
[data-sailoros="v2"] .s-footer__col--brand .s-caption { max-width: 30ch; }
/* Нижняя строка — две колонки: знак копирайта слева, оговорка о роли площадки
   справа. Оговорка стоит на КАЖДОЙ странице сознательно: «мы не агентство» —
   ответ на первый вопрос моряка, впервые увидевшего чужие вакансии у нас. */
[data-sailoros="v2"] .s-footer__bottom {
  margin: var(--space-10) 0 0; padding-top: var(--space-5);
  border-top: 1px solid var(--line-200);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6);
}
[data-sailoros="v2"] .s-footer__bottom p { margin: 0; }
[data-sailoros="v2"] .s-footer__bottom p:last-child { max-width: 62ch; text-align: right; }
@media (max-width: 640px) {
  [data-sailoros="v2"] .s-footer__bottom { flex-direction: column; gap: var(--space-2); }
  [data-sailoros="v2"] .s-footer__bottom p:last-child { text-align: left; max-width: none; }
}

/* ===== Шапка внутренней страницы (01.09.2026) =============================
   Один блок на все внутренние страницы: крошки, заголовок, подзаголовок и то,
   что относится к самому заголовку (поиск каталога, вкладки «Открытые/Архив»).

   Зачем он появился. До сих пор внутренняя страница начиналась прямо с текста
   на общем сером фоне: у неё не было верха, и глаз не находил, где кончается
   служебная часть и начинается содержимое. На главной эту роль играл первый
   экран, на остальных — ничего. Полоса решает это одним приёмом: белая
   подложка до первой границы, дальше серое поле выдачи.

   Класс НЕ обязателен: страница без него выглядит как раньше. Поэтому он
   вводится постранично, а не правкой каркаса.
   ========================================================================= */
[data-sailoros="v2"] .s-main--flush { padding-top: 0; }
[data-sailoros="v2"] .s-ptop {
  background: var(--bg-000); border-bottom: 1px solid var(--line-300);
  padding: var(--space-6) 0 var(--space-8); margin-bottom: var(--space-8);
}
[data-sailoros="v2"] .s-ptop--tight { padding-bottom: var(--space-6); margin-bottom: var(--space-6); }
[data-sailoros="v2"] .s-ptop .s-crumbs { margin-bottom: var(--space-4); }
[data-sailoros="v2"] .s-ptop h1 {
  margin: 0; font-size: 34px; line-height: 42px; font-weight: 700; letter-spacing: -0.02em;
}
[data-sailoros="v2"] .s-ptop__lede {
  margin: var(--space-3) 0 0; max-width: 68ch;
  font-size: var(--text-body-lg); line-height: var(--leading-body-lg); color: var(--ink-500);
}
[data-sailoros="v2"] .s-ptop .s-tabs { margin-top: var(--space-6); border-bottom: 0; }
@media (max-width: 640px) {
  [data-sailoros="v2"] .s-ptop { padding: var(--space-4) 0 var(--space-5); margin-bottom: var(--space-5); }
  [data-sailoros="v2"] .s-ptop h1 { font-size: 24px; line-height: 32px; }
  [data-sailoros="v2"] .s-ptop__lede { font-size: var(--text-body); line-height: var(--leading-body); }
}

/* Поиск в шапке страницы — одной плашкой, как на первом экране: поле и кнопка
   в общей рамке. Отдельные прямоугольники читаются как два не связанных
   элемента, и на каталоге это стоило поиску заметности. */
[data-sailoros="v2"] .s-ptop__search {
  display: flex; align-items: center; gap: var(--space-2);
  max-width: 640px; margin-top: var(--space-6);
  padding: 5px 5px 5px var(--space-4);
  background: var(--bg-000); border: 1px solid var(--line-300);
  border-radius: 12px;
  transition: border-color var(--motion-hover) var(--ease-out), box-shadow var(--motion-hover) var(--ease-out);
}
[data-sailoros="v2"] .s-ptop__search:focus-within { border-color: var(--brand-600); box-shadow: 0 0 0 3px var(--brand-100); }
[data-sailoros="v2"] .s-ptop__search-icon { flex: none; color: var(--ink-400); display: flex; }
[data-sailoros="v2"] .s-ptop__search .s-input {
  flex: 1; height: 40px; padding: 0 var(--space-2);
  border: 0; background: transparent;
}
[data-sailoros="v2"] .s-ptop__search .s-input:hover,
[data-sailoros="v2"] .s-ptop__search .s-input:focus { border: 0; }
[data-sailoros="v2"] .s-ptop__search .s-btn { height: 40px; flex: none; padding: 0 var(--space-5); }
@media (max-width: 640px) {
  [data-sailoros="v2"] .s-ptop__search {
    flex-direction: column; align-items: stretch; gap: var(--space-2);
    padding: var(--space-3); border-radius: var(--radius-lg); margin-top: var(--space-4);
  }
  [data-sailoros="v2"] .s-ptop__search-icon { display: none; }
  [data-sailoros="v2"] .s-ptop__search .s-input { height: 44px; border: 1px solid var(--line-300); padding: 0 var(--space-3); }
  [data-sailoros="v2"] .s-ptop__search .s-btn { width: 100%; height: 44px; }
}

/* ===== Каталог: заголовок и поиск ========================================= */
[data-sailoros="v2"] .s-jobs__title { margin: var(--space-4) 0 var(--space-2); }
[data-sailoros="v2"] .s-jobs__subtitle { margin: 0 0 var(--space-6); color: var(--ink-500); }
[data-sailoros="v2"] .s-jobs__search {
  display: flex; gap: var(--space-3); margin-bottom: var(--space-6);
  max-width: 640px;
}
[data-sailoros="v2"] .s-jobs__search .s-input { flex: 1; }
[data-sailoros="v2"] .s-jobs__fraud { margin-top: var(--space-8); }

/* ===== Панель фильтров ===================================================== */
/* Обёртка details: на десктопе всегда раскрыта, summary спрятан; на мобильном
   summary — кнопка «Фильтры (N)», панель раскрывается под ней. Работает без JS. */
[data-sailoros="v2"] .s-filters-wrap { min-width: 0; }
[data-sailoros="v2"] .s-filters-summary { display: none; list-style: none; }
[data-sailoros="v2"] .s-filters-summary::-webkit-details-marker { display: none; }
/* Панель — карточка и на десктопе. Раньше она стояла прямо на сером поле
   страницы, без подложки: колонка ссылок со счётчиками читалась как случайный
   список рядом с выдачей, а не как орудие, которым эту выдачу сужают. */
[data-sailoros="v2"] .s-filters {
  position: sticky; top: 80px;
  max-height: calc(100vh - 96px); overflow-y: auto;
  background: var(--bg-000); border: 1px solid var(--line-300);
  border-radius: var(--radius-lg); padding: var(--space-5);
}
[data-sailoros="v2"] .s-filters::-webkit-scrollbar { width: 6px; }
[data-sailoros="v2"] .s-filters::-webkit-scrollbar-thumb { background: var(--line-300); border-radius: var(--radius-full); }
[data-sailoros="v2"] .s-filters__group + .s-filters__group {
  padding-top: var(--space-5); border-top: 1px solid var(--line-200);
}
[data-sailoros="v2"] .s-filters__options { display: flex; flex-direction: column; gap: var(--space-1); }
[data-sailoros="v2"] .s-filters__option {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-1) var(--space-2); margin: 0 calc(-1 * var(--space-2));
  border-radius: var(--radius-sm); color: var(--ink-700); font-size: var(--text-body);
}
[data-sailoros="v2"] .s-filters__option:hover { background: var(--bg-100); text-decoration: none; }
[data-sailoros="v2"] .s-filters__option--on { background: var(--brand-50); color: var(--brand-600); font-weight: var(--weight-body-strong); }
[data-sailoros="v2"] .s-filters__option--group { font-weight: var(--weight-body-strong); color: var(--ink-900); }
[data-sailoros="v2"] .s-filters__dept { border: 0; }
[data-sailoros="v2"] .s-filters__dept-title {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-1) 0; cursor: pointer; list-style: none;
  font-weight: var(--weight-body-strong); color: var(--ink-900);
}
[data-sailoros="v2"] .s-filters__dept-title::-webkit-details-marker { display: none; }
[data-sailoros="v2"] .s-filters__dept[open] > .s-filters__dept-title { color: var(--brand-600); }
[data-sailoros="v2"] .s-filters__vgroup { margin-bottom: var(--space-2); }
[data-sailoros="v2"] .s-filters__vgroup .s-filters__options { padding-left: var(--space-3); }
[data-sailoros="v2"] .s-filters__more summary {
  cursor: pointer; color: var(--brand-600); font-size: var(--text-body);
  padding: var(--space-1) 0; list-style: none;
}
[data-sailoros="v2"] .s-filters__more summary::-webkit-details-marker { display: none; }
[data-sailoros="v2"] .s-filters__dates { display: flex; gap: var(--space-2); }
[data-sailoros="v2"] .s-filters__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
[data-sailoros="v2"] .s-filters__actions { flex-direction: row; gap: var(--space-3); }

@media (max-width: 1023px) {
  [data-sailoros="v2"] .s-filters-summary {
    display: inline-flex; margin-bottom: var(--space-4); cursor: pointer;
  }
  [data-sailoros="v2"] .s-filters {
    position: static; max-height: none; overflow: visible;
    background: var(--bg-000); border: 1px solid var(--line-300);
    border-radius: var(--radius-lg); padding: var(--space-4);
    margin-bottom: var(--space-4);
  }
}

/* ===== Выдача ============================================================== */
[data-sailoros="v2"] .s-result__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-000); border: 1px solid var(--line-300); border-radius: var(--radius-md);
}
[data-sailoros="v2"] .s-result__count { margin: 0; }
[data-sailoros="v2"] .s-result__controls {
  display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap;
}
[data-sailoros="v2"] .s-result__sort, [data-sailoros="v2"] .s-result__view {
  display: inline-flex; gap: var(--space-4);
}
[data-sailoros="v2"] .s-result__chips {
  display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4);
}
[data-sailoros="v2"] .s-result__hidden { margin: var(--space-4) 0 0; }
[data-sailoros="v2"] .s-result__pager {
  display: flex; gap: var(--space-3); justify-content: center;
  margin-top: var(--space-6);
}
[data-sailoros="v2"] .s-result__note { margin-top: var(--space-6); }

/* ===== Список карточек ==================================================== */
[data-sailoros="v2"] .s-vlist { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
[data-sailoros="v2"] .s-vcard__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
}
[data-sailoros="v2"] .s-vcard { transition: box-shadow var(--motion-hover) var(--ease-out), border-color var(--motion-hover) var(--ease-out); }
[data-sailoros="v2"] .s-vcard:hover { border-color: var(--brand-300); box-shadow: var(--shadow-raise); }
[data-sailoros="v2"] .s-vcard__title { margin: 0; font-size: var(--text-h3); }
[data-sailoros="v2"] .s-vcard__title a { color: var(--ink-900); }
[data-sailoros="v2"] .s-vcard__title a:hover { color: var(--brand-600); text-decoration: none; }
[data-sailoros="v2"] .s-vcard__badges { display: flex; gap: var(--space-2); flex-wrap: wrap; }
[data-sailoros="v2"] .s-vcard__salary { margin: var(--space-2) 0 var(--space-3); font-size: var(--text-body-lg); }
[data-sailoros="v2"] .s-vcard__facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-2) var(--space-4); margin: 0;
}
[data-sailoros="v2"] .s-vcard__facts dt { font-size: var(--text-caption); color: var(--ink-500); }
[data-sailoros="v2"] .s-vcard__facts dd { margin: 0; font-size: var(--text-body); }
[data-sailoros="v2"] .s-vcard__meta {
  display: flex; gap: var(--space-3); flex-wrap: wrap;
  margin: var(--space-3) 0 0; padding-top: var(--space-3);
  border-top: 1px solid var(--line-200);
}

/* Вид «список»: компактная строка */
[data-sailoros="v2"] .s-vlist--rows { gap: var(--space-2); }
[data-sailoros="v2"] .s-vcard--row { padding: var(--space-3) var(--space-4); }
[data-sailoros="v2"] .s-vcard--row .s-vcard__facts { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
[data-sailoros="v2"] .s-vcard--row .s-vcard__salary { margin: var(--space-1) 0; }
[data-sailoros="v2"] .s-vcard--row .s-vcard__meta { margin-top: var(--space-2); padding-top: var(--space-2); }

/* Врезка для гостя после 10-й карточки */
[data-sailoros="v2"] .s-guest-cta {
  background: var(--brand-50); border-color: var(--brand-100);
  display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start;
}
[data-sailoros="v2"] .s-guest-cta p { margin: 0; }

/* ===== Страница вакансии (Э3, паттерн «Детальная страница» 03_PATTERNS §2) == */
/* Сетка из макета: minmax(0,1fr) / 360, gap 32; правая колонка закреплена. */
[data-sailoros="v2"] .s-vd { gap: var(--space-8); align-items: start; margin-top: 0; }
/* Крошки и заголовок уехали в полосу-шапку; в ней у заголовка своя шкала. */
[data-sailoros="v2"] .s-ptop .s-vd__title { margin: 0 0 var(--space-2); }
[data-sailoros="v2"] .s-ptop .s-vd__badges { margin-bottom: var(--space-3); }
[data-sailoros="v2"] .s-vd__main { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
[data-sailoros="v2"] .s-vd__aside { position: sticky; top: 88px; display: flex; flex-direction: column; gap: var(--space-4); }
[data-sailoros="v2"] .s-vd .s-card { padding: var(--space-8); }
[data-sailoros="v2"] .s-vd__aside .s-card { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
[data-sailoros="v2"] .s-vd__badges { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
[data-sailoros="v2"] .s-vd__title { margin: 0 0 var(--space-2); }
[data-sailoros="v2"] .s-vd__vessel { margin: 0 0 var(--space-2); font-size: var(--text-body-lg); line-height: var(--leading-body-lg); color: var(--ink-700); }
[data-sailoros="v2"] .s-vd__origin { margin: 0; display: flex; gap: var(--space-2); flex-wrap: wrap; }
[data-sailoros="v2"] .s-vd__h2 { margin: 0 0 var(--space-4); }
[data-sailoros="v2"] .s-vd__kv { grid-template-columns: 160px 1fr; gap: 10px var(--space-4); align-items: baseline; }
[data-sailoros="v2"] .s-vd__kv dt { line-height: var(--leading-body); }
[data-sailoros="v2"] .s-vd__kv--wide { grid-template-columns: 160px 1fr 160px 1fr; }
[data-sailoros="v2"] .s-vd__footnote { margin: var(--space-4) 0 0; font-size: var(--text-overline); line-height: var(--leading-overline); color: var(--ink-400); }
[data-sailoros="v2"] .s-vd__desc { margin: 0; white-space: pre-line; line-height: 24px; color: var(--ink-700); }
[data-sailoros="v2"] .s-vd__desc + .s-vd__desc { margin-top: var(--space-3); }
[data-sailoros="v2"] .s-vd__summary-title { margin: 0 0 var(--space-2); color: var(--ink-500); }
[data-sailoros="v2"] .s-vd__company { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
[data-sailoros="v2"] .s-vd__company-logo { width: 48px; height: 48px; font-size: var(--text-h3); flex: none; }
[data-sailoros="v2"] .s-vd__company-logo--verified { background: var(--brand-900); color: #FFFFFF; }
[data-sailoros="v2"] .s-vd__company-name { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: 0; }
[data-sailoros="v2"] .s-vd__company-meta { margin: var(--space-1) 0 0; }
[data-sailoros="v2"] .s-vd__company-links { margin-left: auto; display: flex; flex-direction: column; gap: var(--space-1); align-items: flex-end; }
[data-sailoros="v2"] .s-vd__cv-note { background: var(--brand-50); border: 1px solid #C7DBF7; display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-6); }
[data-sailoros="v2"] .s-vd__cv-note p { margin: 0; }
[data-sailoros="v2"] .s-vd__cv-note .s-btn { margin-left: auto; }
[data-sailoros="v2"] .s-vd__fraud { margin: var(--space-3) 0 0; }
/* Правая колонка: зарплата крупно, ключевые параметры, действия */
[data-sailoros="v2"] .s-vd__salary { margin: 0; font-size: var(--text-h2); line-height: var(--leading-h2); font-weight: 700; color: var(--ink-900); }
[data-sailoros="v2"] .s-vd__salary-note { margin: 0; }
[data-sailoros="v2"] .s-vd__params { grid-template-columns: 96px 1fr; gap: var(--space-2) var(--space-3); }
[data-sailoros="v2"] .s-vd__actions { display: flex; flex-direction: column; gap: var(--space-2); }
[data-sailoros="v2"] .s-vd__actions .s-btn { width: 100%; height: var(--control-lg); }
[data-sailoros="v2"] .s-vd__actions .s-btn--secondary { border-color: var(--brand-300); }
[data-sailoros="v2"] .s-vd__hint { margin: 0; text-align: center; }
[data-sailoros="v2"] .s-vd__share { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
[data-sailoros="v2"] .s-vd__share .s-btn { width: 100%; border: 1px solid var(--line-300); color: var(--ink-700); }
/* Похожие вакансии: 3 компактные карточки в ряд */
[data-sailoros="v2"] .s-vd__similar { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; max-width: 100%; }
[data-sailoros="v2"] .s-vgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
/* Гостевой блок — тёмный */
[data-sailoros="v2"] .s-guest-dark {
  background: var(--brand-900); color: #FFFFFF; border-color: var(--brand-900);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap;
}
[data-sailoros="v2"] .s-guest-dark p { margin: 0; }
[data-sailoros="v2"] .s-guest-dark .s-h3 { color: #FFFFFF; margin-bottom: var(--space-2); }
[data-sailoros="v2"] .s-guest-dark .s-guest-dark__text { color: #B9C6DD; }
[data-sailoros="v2"] .s-guest-dark .s-btn { background: #FFFFFF; color: var(--brand-900); height: var(--control-lg); }
/* Мобильная закреплённая панель действия (§2 п.1: действие видно при любой прокрутке) */
[data-sailoros="v2"] .s-vd__bar { display: none; }
@media (max-width: 1023px) {
  [data-sailoros="v2"] .s-vd { grid-template-columns: 1fr; }
  [data-sailoros="v2"] .s-vd__aside { position: static; }
  [data-sailoros="v2"] .s-vd__kv--wide { grid-template-columns: 160px 1fr; }
  [data-sailoros="v2"] .s-vd__company-links { margin-left: 0; align-items: flex-start; }
  [data-sailoros="v2"] .s-main--detail { padding-bottom: 120px; }
  [data-sailoros="v2"] .s-vd__bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    display: flex; flex-direction: column; gap: var(--space-2);
    background: var(--bg-000); border-top: 1px solid var(--line-300);
    padding: var(--space-3) var(--gutter-mobile);
  }
  [data-sailoros="v2"] .s-vd__bar-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
  [data-sailoros="v2"] .s-vd__bar-salary { display: flex; flex-direction: column; min-width: 0; }
  [data-sailoros="v2"] .s-vd__bar-salary .s-strong { font-size: var(--text-body); line-height: 20px; font-weight: 700; }
  [data-sailoros="v2"] .s-vd__bar .s-btn--primary { height: var(--control-lg); padding: 0 var(--space-8); flex: none; }
  [data-sailoros="v2"] .s-vd__bar-link { text-align: center; min-height: var(--tap-min-mobile); display: flex; align-items: center; justify-content: center; }
  [data-sailoros="v2"] .s-vgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  /* Сетка карточек на телефоне — ОДНА колонка. До сих пор `.s-vgrid` доходил
     до 375 в двух колонках: у главной свой модификатор с этим правилом, а у
     посадочных по должностям, посадочных по типам судов и архива — нет, и
     карточка шириной ~170 px выдавливала страницу в горизонтальную прокрутку.
     Правило ставится на БАЗОВЫЙ класс, чтобы следующий список, собранный из
     `.s-vgrid`, получил его сразу. `--scroll` не задет: он на телефоне вообще
     не сетка, а горизонтальная лента (`display: flex` ниже). */
  [data-sailoros="v2"] .s-vgrid { grid-template-columns: 1fr; }
  [data-sailoros="v2"] .s-vd .s-card, [data-sailoros="v2"] .s-vd__aside .s-card { padding: var(--space-4); }
  [data-sailoros="v2"] .s-vd__kv, [data-sailoros="v2"] .s-vd__kv--wide { grid-template-columns: 108px 1fr; gap: var(--space-2) var(--space-3); }
  [data-sailoros="v2"] .s-vd__h2 { font-size: var(--text-body-lg); line-height: var(--leading-body-lg); }
  /* Похожие — горизонтальная лента карточек по 240 */
  [data-sailoros="v2"] .s-vgrid--scroll { display: flex; overflow-x: auto; gap: var(--space-2); padding-bottom: var(--space-2); }
  [data-sailoros="v2"] .s-vgrid--scroll > * { flex: 0 0 240px; }
}

/* ===== Компактная карточка (главная, похожие) ============================== */
[data-sailoros="v2"] .s-vcard--compact { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
[data-sailoros="v2"] .s-vcard--compact .s-vcard__title { font-size: var(--text-body-lg); line-height: var(--leading-body-lg); }
[data-sailoros="v2"] .s-vcard--compact .s-vcard__vessel { margin: 0; font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--ink-700); }
[data-sailoros="v2"] .s-vcard--compact .s-vcard__salary { margin: 0; }
[data-sailoros="v2"] .s-vcard--compact .s-vcard__salary .s-strong { font-weight: 700; }
[data-sailoros="v2"] .s-vcard--compact .s-vcard__meta { margin: 0; padding: 0; border: 0; }

/* ===== Главная (Э4, WEB-HOME) — редакция 01.09.2026 =======================
   Переработка первого экрана и ритма главной. Что изменилось по существу, а
   не косметически:

   1. Первый экран стал ДВУХКОЛОННЫМ: слева обещание и поиск, справа — живая
      карточка вакансии из той же выборки, что кормит блок «Свежие». Раньше
      главная объявляла «показываем вакансии» и первые 900 пикселей ничего не
      показывала. Карточка настоящая, ссылка ведёт на её страницу.
   2. Шапка на главной АБСОЛЮТНАЯ, а не липкая (s-header--hero). Липкая
      прозрачная шапка требует скрипта, который вернёт ей фон при прокрутке;
      сломается скрипт — белые ссылки лягут на белую полосу. Абсолютная не
      имеет этого состояния вовсе. На остальных страницах шапка прежняя.
   3. Секции разложены ПОЛОСАМИ (s-band) с чередованием фона. Раньше вся
      главная была одной колонкой на общем фоне, и разделы отличались только
      расстоянием — на длинной странице это читается как один поток.

   Декорация первого экрана — inline SVG в разметке, не картинка: внешних
   файлов на публичных страницах не заводим, а растр под ретину весит больше
   всей страницы. Слой чисто декоративный и скрыт от чтения с экрана.
   ========================================================================= */
[data-sailoros="v2"] .s-main--home { padding-top: 0; padding-bottom: 0; }

/* --- Первый экран --------------------------------------------------------- */
[data-sailoros="v2"] .s-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(46, 111, 212, .34) 0%, rgba(46, 111, 212, 0) 58%),
    linear-gradient(158deg, #0B2450 0%, #081B3C 46%, #061530 100%);
  color: var(--deep-ink);
  /* Первый экран начинается под шапкой: она липкая, лежит поверх и своей
     высоты потоку не отдаёт. Отрицательный отступ ровно на её высоту, дальше
     воздух задаётся padding-ом — одной величиной в двух местах. */
  margin-top: calc(-1 * var(--hero-header)); padding: 132px 0 var(--space-20);
}
/* Декоративная сцена: горизонт, сетка координат, кильватерный след.

   ⚠️ Слой лежит В ПОТОКЕ стопки (z-index 0), а содержимое поднято над ним
   (z-index 1). Первая редакция уводила сцену под фон через `z-index: -1` плюс
   `isolation: isolate` на секции — разметка при этом верная, но при прокрутке
   Chromium переставал перерисовывать отрицательный слой, и верх первого экрана
   оставался БЕЛЫМ прямоугольником. Поймано только глазами: и DOM, и вычисленные
   стили в этот момент правильные. Отрицательных z-index здесь не заводить. */
[data-sailoros="v2"] .s-hero__scene {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none; opacity: .55;
}
[data-sailoros="v2"] .s-hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) 396px;
  gap: var(--space-16); align-items: center;
}
[data-sailoros="v2"] .s-hero__col { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
[data-sailoros="v2"] .s-hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2); align-self: flex-start;
  height: 28px; padding: 0 var(--space-3); margin: 0;
  background: rgba(255, 255, 255, .08); border: 1px solid var(--deep-line);
  border-radius: var(--radius-full);
  font-size: var(--text-caption); color: var(--deep-ink-2);
}
[data-sailoros="v2"] .s-hero__eyebrow b { color: var(--deep-ink); font-weight: 600; }
[data-sailoros="v2"] .s-hero__title {
  margin: 0; max-width: 15ch;
  font-size: var(--text-hero); line-height: var(--leading-hero);
  font-weight: 700; letter-spacing: -0.02em; color: var(--deep-ink);
}
[data-sailoros="v2"] .s-hero__subtitle {
  margin: 0; max-width: 52ch;
  font-size: var(--text-lede); line-height: var(--leading-lede); color: var(--deep-ink-2);
}
/* Поиск одной белой плашкой: поле и кнопка внутри общей рамки — на тёмном фоне
   два отдельных прямоугольника читаются как два не связанных элемента. */
[data-sailoros="v2"] .s-hero__search {
  display: flex; align-items: center; gap: var(--space-2);
  max-width: 620px; padding: 6px 6px 6px var(--space-4);
  background: var(--bg-000); border-radius: 14px;
  box-shadow: var(--shadow-float);
}
[data-sailoros="v2"] .s-hero__search-icon { flex: none; color: var(--ink-400); display: flex; }
[data-sailoros="v2"] .s-hero__search .s-input {
  flex: 1; height: 44px; padding: 0 var(--space-2);
  border: 0; background: transparent; box-shadow: none; font-size: var(--text-body-lg);
}
[data-sailoros="v2"] .s-hero__search .s-input:hover,
[data-sailoros="v2"] .s-hero__search .s-input:focus { border: 0; }
[data-sailoros="v2"] .s-hero__search .s-btn { height: 44px; padding: 0 var(--space-6); flex: none; }
[data-sailoros="v2"] .s-hero__quick {
  display: flex; gap: var(--space-2); flex-wrap: wrap; margin: 0; padding: 0; list-style: none;
}
[data-sailoros="v2"] .s-hero__quick a {
  display: inline-flex; align-items: center; height: 34px; padding: 0 var(--space-4);
  background: rgba(255, 255, 255, .06); border: 1px solid var(--deep-line);
  border-radius: var(--radius-full);
  color: var(--deep-ink-2); font-size: var(--text-caption);
  transition: background var(--motion-hover) var(--ease-out), color var(--motion-hover) var(--ease-out);
}
[data-sailoros="v2"] .s-hero__quick a:hover {
  background: rgba(255, 255, 255, .13); color: var(--deep-ink); text-decoration: none;
}
[data-sailoros="v2"] .s-hero__aside { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
[data-sailoros="v2"] .s-hero__aside-label {
  margin: 0; color: var(--deep-ink-3);
  font-size: var(--text-overline); line-height: var(--leading-overline);
  font-weight: var(--weight-overline); letter-spacing: var(--tracking-overline); text-transform: uppercase;
}
/* Парящая карточка — единственное место, где карточке дана крупная тень: она
   лежит НА тёмном фоне, и без тени граница на нём просто не видна. */
[data-sailoros="v2"] .s-hero__card {
  background: var(--bg-000); border: 0; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
}
/* ⚠️ Цвет текста задаётся ЯВНО. Тёмная полоса объявляет `color: #FFF` на себе,
   и светлая карточка внутри неё наследует белый: заголовок и подписи, у которых
   свой цвет прописан, видны, а зарплата и значения фактов — белым по белому.
   Ловится только глазами: разметка при этом правильная, текст на месте.
   Правило общее для обеих тёмных поверхностей — первого экрана и врезки. */
[data-sailoros="v2"] .s-hero .s-card,
[data-sailoros="v2"] .s-band--deep .s-card { color: var(--ink-900); }
[data-sailoros="v2"] .s-hero__card:hover { box-shadow: var(--shadow-float); }
[data-sailoros="v2"] .s-hero__aside-more { color: var(--deep-ink-2); font-size: var(--text-caption); }
[data-sailoros="v2"] .s-hero__aside-more:hover { color: var(--deep-ink); }

/* --- Полоса-секция -------------------------------------------------------- */
[data-sailoros="v2"] .s-band { padding: var(--band-y) 0; }
[data-sailoros="v2"] .s-band--soft  { background: var(--bg-100); }
[data-sailoros="v2"] .s-band--plain { background: var(--bg-000); }
[data-sailoros="v2"] .s-band--deep {
  background: linear-gradient(150deg, #0B2450 0%, #071A3A 100%);
  color: var(--deep-ink);
}
[data-sailoros="v2"] .s-band--tight { padding: var(--space-12) 0; }
[data-sailoros="v2"] .s-band + .s-band--soft  { border-top: 1px solid var(--line-300); }
[data-sailoros="v2"] .s-band--soft + .s-band--plain { border-top: 1px solid var(--line-300); }

/* --- Счётчики платформы --------------------------------------------------- */
[data-sailoros="v2"] .s-stats { background: var(--bg-000); border-bottom: 1px solid var(--line-300); padding: var(--space-6) 0; }
[data-sailoros="v2"] .s-stats__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 240px)); gap: var(--space-10); margin: 0; }
[data-sailoros="v2"] .s-stats__grid div { display: flex; flex-direction: column; gap: 2px; }
[data-sailoros="v2"] .s-stats__grid dt { order: 2; font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--ink-500); }
[data-sailoros="v2"] .s-stats__grid dd {
  order: 1; margin: 0; font-size: 30px; line-height: 38px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}

/* --- Заголовок секции ----------------------------------------------------- */
[data-sailoros="v2"] .s-home__section { display: flex; flex-direction: column; gap: var(--space-6); }
[data-sailoros="v2"] .s-home__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6); }
[data-sailoros="v2"] .s-home__h2 {
  margin: 0; font-size: 30px; line-height: 38px; font-weight: 700; letter-spacing: -0.02em;
}
[data-sailoros="v2"] .s-home__lede { margin: var(--space-2) 0 0; color: var(--ink-500); font-size: var(--text-body-lg); }
[data-sailoros="v2"] .s-home__more { font-weight: var(--weight-body-strong); white-space: nowrap; }
[data-sailoros="v2"] .s-home__more--mobile { display: none; }
[data-sailoros="v2"] .s-home__center { text-align: center; max-width: 640px; margin: 0 auto var(--space-10); }
/* Ссылка «все» под сеткой, а не в строке заголовка: у секции с выровненным по
   центру заголовком справа от него пусто, и ссылка висела бы в одиночестве. */
[data-sailoros="v2"] .s-home__foot { margin: var(--space-2) 0 0; text-align: center; }
[data-sailoros="v2"] .s-home__center .s-home__lede { margin-left: auto; margin-right: auto; }

/* --- Развилка ролей ------------------------------------------------------- */
[data-sailoros="v2"] .s-roles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
[data-sailoros="v2"] .s-roles .s-card {
  padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start;
}
[data-sailoros="v2"] .s-roles p { margin: 0; }
[data-sailoros="v2"] .s-roles .s-btn { height: var(--control-lg); padding: 0 var(--space-6); margin-top: var(--space-2); }
[data-sailoros="v2"] .s-btn--outline { background: var(--bg-000); color: var(--ink-900); border-color: #CBD5E1; }
[data-sailoros="v2"] .s-btn--outline:hover:not(:disabled) { background: var(--bg-100); }

/* --- «Как это работает»: три карточки, а не три строки списка ------------- */
[data-sailoros="v2"] .s-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
[data-sailoros="v2"] .s-how li {
  display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start;
  background: var(--bg-000); border: 1px solid var(--line-300); border-radius: var(--radius-lg);
  padding: var(--space-6); color: var(--ink-700);
}
[data-sailoros="v2"] .s-how__n {
  flex: none; width: 36px; height: 36px; border-radius: var(--radius-full);
  background: var(--brand-600); color: #FFFFFF; font-weight: 700; font-size: var(--text-body-lg);
  display: inline-flex; align-items: center; justify-content: center;
}
[data-sailoros="v2"] .s-how__t { font-weight: 600; color: var(--ink-900); }

/* --- Материалы ------------------------------------------------------------ */
[data-sailoros="v2"] .s-materials { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
[data-sailoros="v2"] .s-materials .s-card { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
[data-sailoros="v2"] .s-materials .s-card p { margin: 0; }
[data-sailoros="v2"] .s-materials__title a { color: var(--ink-900); font-weight: 600; font-size: var(--text-body-lg); line-height: var(--leading-body-lg); }

/* --- «Один профиль» ------------------------------------------------------- */
[data-sailoros="v2"] .s-split {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-16); align-items: center;
}
[data-sailoros="v2"] .s-split--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
[data-sailoros="v2"] .s-split__text { display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; }
[data-sailoros="v2"] .s-split__text .s-home__h2 { max-width: 16ch; }
[data-sailoros="v2"] .s-benefits { list-style: none; margin: 0; padding: 0; width: 100%; }
[data-sailoros="v2"] .s-benefits li {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4) 0; border-bottom: 1px solid var(--line-200); color: var(--ink-700);
}
[data-sailoros="v2"] .s-benefits li:last-child { border-bottom: 0; }
[data-sailoros="v2"] .s-benefits svg { flex: none; color: var(--brand-600); margin-top: 1px; }

/* Изображение кабинета: не снимок экрана, а схема — снимок устареет с первой
   правкой кабинета и начнёт показывать то, чего в продукте уже нет. */
[data-sailoros="v2"] .s-mock {
  display: grid; grid-template-columns: 172px minmax(0, 1fr);
  background: var(--bg-000); border: 1px solid var(--line-300);
  border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-raise);
}
[data-sailoros="v2"] .s-mock__side { background: var(--deep-100); padding: var(--space-5) var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
[data-sailoros="v2"] .s-mock__brand { color: #FFFFFF; font-weight: 700; font-size: var(--text-body); margin: 0 0 var(--space-4); padding: 0 var(--space-2); }
[data-sailoros="v2"] .s-mock__brand span { color: var(--brand-300); }
[data-sailoros="v2"] .s-mock__nav {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2); border-radius: var(--radius-md);
  color: var(--deep-ink-2); font-size: var(--text-caption);
}
[data-sailoros="v2"] .s-mock__nav--on { background: var(--brand-600); color: #FFFFFF; font-weight: 600; }
[data-sailoros="v2"] .s-mock__nav i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; flex: none; }
[data-sailoros="v2"] .s-mock__nav--on i { opacity: 1; }
[data-sailoros="v2"] .s-mock__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
[data-sailoros="v2"] .s-mock__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
[data-sailoros="v2"] .s-mock__h { margin: 0; font-size: var(--text-h3); font-weight: 600; }
[data-sailoros="v2"] .s-mock__bar { height: 8px; border-radius: var(--radius-full); background: var(--line-200); overflow: hidden; }
[data-sailoros="v2"] .s-mock__bar span { display: block; height: 100%; border-radius: var(--radius-full); background: var(--success-600); }
[data-sailoros="v2"] .s-mock__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
[data-sailoros="v2"] .s-mock__panel { background: var(--bg-100); border-radius: var(--radius-md); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
[data-sailoros="v2"] .s-mock__panel p { margin: 0; font-weight: 600; font-size: var(--text-caption); }
[data-sailoros="v2"] .s-mock__panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
[data-sailoros="v2"] .s-mock__panel li { display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-caption); color: var(--ink-700); }
[data-sailoros="v2"] .s-mock__ok   { color: var(--success-600); }
[data-sailoros="v2"] .s-mock__warn { color: var(--warning-600); }

/* --- Сообщество на главной ------------------------------------------------ */
[data-sailoros="v2"] .s-comm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
[data-sailoros="v2"] .s-comm__q {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6); background: var(--bg-000);
  border: 1px solid var(--line-300); border-radius: var(--radius-lg);
  transition: box-shadow var(--motion-hover) var(--ease-out), border-color var(--motion-hover) var(--ease-out);
}
[data-sailoros="v2"] .s-comm__q:hover { box-shadow: var(--shadow-raise); border-color: var(--brand-300); }
[data-sailoros="v2"] .s-comm__top { display: flex; align-items: center; gap: var(--space-3); }
/* Кружок с буквой, а не фотография: форумная личность отделена от анкеты,
   лиц на форуме нет и не будет. Тон приходит числом из питона. */
[data-sailoros="v2"] .s-comm__ava {
  flex: none; width: 36px; height: 36px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--text-caption);
}
[data-sailoros="v2"] .s-comm__who { min-width: 0; display: flex; flex-direction: column; }
[data-sailoros="v2"] .s-comm__name { font-weight: 600; font-size: var(--text-caption); color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-sailoros="v2"] .s-comm__meta { font-size: var(--text-caption); color: var(--ink-500); }
[data-sailoros="v2"] .s-comm__title { margin: 0; font-size: var(--text-body-lg); line-height: var(--leading-body-lg); font-weight: 600; }
[data-sailoros="v2"] .s-comm__title a { color: var(--ink-900); }
[data-sailoros="v2"] .s-comm__excerpt { margin: 0; color: var(--ink-700); }
[data-sailoros="v2"] .s-comm__foot { display: flex; gap: var(--space-4); font-size: var(--text-caption); color: var(--ink-500); margin-top: auto; padding-top: var(--space-2); }

/* --- Врезка мини-аппа ----------------------------------------------------- */
[data-sailoros="v2"] .s-tg { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-16); align-items: center; }
[data-sailoros="v2"] .s-tg__text { display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; }
[data-sailoros="v2"] .s-tg h2 { margin: 0; font-size: 30px; line-height: 38px; font-weight: 700; letter-spacing: -0.02em; color: var(--deep-ink); }
[data-sailoros="v2"] .s-tg p { margin: 0; color: var(--deep-ink-2); font-size: var(--text-body-lg); line-height: var(--leading-body-lg); max-width: 48ch; }
[data-sailoros="v2"] .s-tg__badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 30px; padding: 0 var(--space-3);
  background: rgba(255, 255, 255, .08); border: 1px solid var(--deep-line);
  border-radius: var(--radius-full); font-size: var(--text-caption); color: var(--deep-ink-2);
}
/* Телефон — рамка из CSS, содержимое настоящее по смыслу: карточка вакансии и
   строка готовности профиля, то же, что человек увидит внутри. */
[data-sailoros="v2"] .s-phone {
  width: 260px; margin: 0 auto; padding: 10px;
  background: #0E1A32; border: 1px solid var(--deep-line);
  border-radius: 34px; box-shadow: var(--shadow-float);
}
/* Цвет текста задаётся явно по той же причине, что у карточки первого экрана:
   светлый экран телефона лежит на тёмной полосе и наследует от неё белый. */
[data-sailoros="v2"] .s-phone__screen { background: var(--bg-100); border-radius: 26px; overflow: hidden; color: var(--ink-900); }
[data-sailoros="v2"] .s-phone__bar {
  height: 34px; background: var(--deep-100); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-caption); font-weight: 600;
}
[data-sailoros="v2"] .s-phone__body { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); }
[data-sailoros="v2"] .s-phone__card { background: var(--bg-000); border-radius: var(--radius-md); padding: var(--space-3); display: flex; flex-direction: column; gap: 6px; }
[data-sailoros="v2"] .s-phone__card b { font-size: var(--text-body); }
[data-sailoros="v2"] .s-phone__card small { color: var(--ink-500); font-size: var(--text-caption); }
[data-sailoros="v2"] .s-phone__salary { font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; }
[data-sailoros="v2"] .s-phone__tabs { display: flex; justify-content: space-between; padding: var(--space-2) var(--space-3) var(--space-3); }
[data-sailoros="v2"] .s-phone__tabs span { width: 28px; height: 4px; border-radius: var(--radius-full); background: var(--line-300); }
[data-sailoros="v2"] .s-phone__tabs span:first-child { background: var(--brand-600); }

/* --- Планшет -------------------------------------------------------------- */
@media (max-width: 1199px) {
  [data-sailoros="v2"] .s-hero__inner { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-10); }
  [data-sailoros="v2"] .s-split, [data-sailoros="v2"] .s-split--flip { grid-template-columns: 1fr; gap: var(--space-10); }
  [data-sailoros="v2"] .s-tg { grid-template-columns: 1fr; gap: var(--space-10); }
}
@media (max-width: 1023px) {
  [data-sailoros="v2"] .s-hero { padding: 116px 0 var(--space-12); }
  [data-sailoros="v2"] .s-hero__inner { grid-template-columns: 1fr; gap: var(--space-10); }
  [data-sailoros="v2"] .s-hero__aside { max-width: 460px; }
  [data-sailoros="v2"] .s-how, [data-sailoros="v2"] .s-materials { grid-template-columns: 1fr 1fr; }
  [data-sailoros="v2"] .s-vgrid--home { grid-template-columns: 1fr 1fr; }
  [data-sailoros="v2"] .s-mock { grid-template-columns: 132px minmax(0, 1fr); }
}

/* --- Телефон -------------------------------------------------------------- */
@media (max-width: 640px) {
  [data-sailoros="v2"] { --band-y: var(--band-y-mobile); }
  [data-sailoros="v2"] .s-band { padding: var(--band-y-mobile) 0; }
  [data-sailoros="v2"] .s-hero { padding: 92px 0 var(--space-10); }
  [data-sailoros="v2"] .s-hero__inner { gap: var(--space-8); }
  [data-sailoros="v2"] .s-hero__scene { opacity: .4; }
  [data-sailoros="v2"] .s-hero__search {
    flex-direction: column; align-items: stretch; gap: var(--space-2);
    padding: var(--space-3); border-radius: var(--radius-lg);
  }
  [data-sailoros="v2"] .s-hero__search-icon { display: none; }
  [data-sailoros="v2"] .s-hero__search .s-input { height: 44px; padding: 0 var(--space-3); border: 1px solid var(--line-300); }
  [data-sailoros="v2"] .s-hero__search .s-btn { width: 100%; height: 44px; }
  [data-sailoros="v2"] .s-hero__quick { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--gutter-mobile)); padding: 0 var(--gutter-mobile); }
  [data-sailoros="v2"] .s-hero__quick a { flex: none; }
  [data-sailoros="v2"] .s-hero__aside { max-width: none; }
  [data-sailoros="v2"] .s-stats { padding: var(--space-5) 0; }
  [data-sailoros="v2"] .s-stats__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
  [data-sailoros="v2"] .s-stats__grid dd { font-size: var(--text-h3); line-height: var(--leading-h3); }
  [data-sailoros="v2"] .s-home__h2, [data-sailoros="v2"] .s-tg h2 { font-size: 22px; line-height: 30px; }
  [data-sailoros="v2"] .s-home__lede, [data-sailoros="v2"] .s-tg p { font-size: var(--text-body); line-height: var(--leading-body); }
  [data-sailoros="v2"] .s-home__section { gap: var(--space-4); }
  /* Заголовок и ссылка «все» встают в столбик: на 375 они делят одну строку,
     и заголовок сжимается до двух слов в колонку. */
  [data-sailoros="v2"] .s-home__head { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  [data-sailoros="v2"] .s-home__center { margin-bottom: var(--space-6); }
  [data-sailoros="v2"] .s-how, [data-sailoros="v2"] .s-materials, [data-sailoros="v2"] .s-comm { grid-template-columns: 1fr; gap: var(--space-3); }
  [data-sailoros="v2"] .s-how li, [data-sailoros="v2"] .s-comm__q, [data-sailoros="v2"] .s-materials .s-card { padding: var(--space-4); }
  [data-sailoros="v2"] .s-vgrid--home { grid-template-columns: 1fr; }
  [data-sailoros="v2"] .s-vgrid--home > :nth-child(n+7) { display: none; }
  [data-sailoros="v2"] .s-vgrid--home.s-vgrid--expanded > :nth-child(n+7) { display: flex; }
  [data-sailoros="v2"] .s-home__more--mobile { display: flex; width: 100%; height: var(--control-lg); }
  [data-sailoros="v2"] .s-roles { grid-template-columns: 1fr; gap: var(--space-3); }
  [data-sailoros="v2"] .s-roles .s-card { padding: var(--space-5); }
  [data-sailoros="v2"] .s-roles .s-btn { width: 100%; }
  [data-sailoros="v2"] .s-mock { grid-template-columns: 1fr; }
  [data-sailoros="v2"] .s-mock__side { flex-direction: row; overflow-x: auto; gap: var(--space-2); padding: var(--space-3); }
  [data-sailoros="v2"] .s-mock__brand { display: none; }
  [data-sailoros="v2"] .s-mock__nav { white-space: nowrap; }
  [data-sailoros="v2"] .s-mock__body { padding: var(--space-4); }
  [data-sailoros="v2"] .s-mock__pair { grid-template-columns: 1fr; }
  [data-sailoros="v2"] .s-split__text .s-home__h2 { max-width: none; }
}

/* ===== Посадочные и архив (WEB-JOBS-RANK / VESSEL / ARCHIVE) ==============
   Дописано к дизайн-системе, а не рядом с ней: чипы, таблица и вкладки уже
   были (.s-chip/.s-chip--on/.s-chip__count/.s-table/.s-table-wrap/.s-tab),
   здесь только раскладка новых блоков. */

[data-sailoros="v2"] .s-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin: var(--space-4) 0;
}
[data-sailoros="v2"] .s-chips__label {
  color: var(--ink-500); font-size: var(--text-caption); margin-right: var(--space-1);
}
[data-sailoros="v2"] .s-chip__clear {
  margin-left: var(--space-2); font-size: var(--text-caption); color: var(--brand-600);
}

[data-sailoros="v2"] .s-jobs__count { color: var(--ink-700); margin: var(--space-3) 0; }

[data-sailoros="v2"] .s-pager {
  display: flex; gap: var(--space-3); justify-content: center;
  margin: var(--space-6) 0;
}

[data-sailoros="v2"] .s-salary__nums {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4); margin: var(--space-4) 0;
}
[data-sailoros="v2"] .s-salary__item {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-4); background: var(--bg-100);
  border: 1px solid var(--line-200); border-radius: var(--radius-md);
}
[data-sailoros="v2"] .s-salary__k { color: var(--ink-500); font-size: var(--text-caption); }
[data-sailoros="v2"] .s-salary__v { color: var(--ink-900); font-size: var(--text-h3); font-weight: 600; }
[data-sailoros="v2"] .s-salary__basis { color: var(--ink-700); font-size: var(--text-caption); }
/* Оговорка не прячется в мелкий серый: три числа без неё читаются как
   «зарплата на рынке», а это данные нашей витрины (YMYL). */
[data-sailoros="v2"] .s-salary__caveat { color: var(--ink-500); font-size: var(--text-caption); margin-top: var(--space-2); }
[data-sailoros="v2"] .s-table__muted { color: var(--ink-500); font-size: var(--text-caption); }

[data-sailoros="v2"] .s-archive__item { display: flex; flex-direction: column; gap: var(--space-1); }
[data-sailoros="v2"] .s-archive__on { color: var(--ink-500); font-size: var(--text-caption); }
[data-sailoros="v2"] .s-archive__tabs { margin: var(--space-4) 0; }

[data-sailoros="v2"] .s-landing__links { display: flex; flex-wrap: wrap; gap: var(--space-3); }

@media (max-width: 767px) {
  [data-sailoros="v2"] .s-salary__nums { grid-template-columns: 1fr; }
}

/* ===== Лендинги (WEB-LP-SEAFARERS / WEB-LP-COMPANIES / WEB-FRAUD) ========= */

[data-sailoros="v2"] .s-lp__hero { padding: var(--space-8) 0 var(--space-6); }
[data-sailoros="v2"] .s-lp__lead { font-size: var(--text-h3); color: var(--ink-700); max-width: 62ch; }
[data-sailoros="v2"] .s-lp__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-5) 0 0; }

/* Тёмный первый экран лендинга — ПЛАШКА внутри колонки страницы, а не полоса
   во всю ширину. Так он получает вес, не требуя переверстки трёх шаблонов и не
   ломая правило «содержимое живёт в .s-page». Страница о мошенничестве этого
   модификатора не получает намеренно: там первый экран несёт предупреждение, а
   не предложение, и подавать его языком рекламного блока нельзя. */
[data-sailoros="v2"] .s-lp__hero--deep {
  position: relative; overflow: hidden;
  margin-top: var(--space-4);
  padding: var(--space-12) var(--space-10) var(--space-10);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(110% 130% at 88% 0%, rgba(46, 111, 212, .32) 0%, rgba(46, 111, 212, 0) 60%),
    linear-gradient(152deg, #0B2450 0%, #071A3A 100%);
  color: var(--deep-ink);
}
[data-sailoros="v2"] .s-lp__hero--deep .s-h1 {
  margin: 0; max-width: 20ch; color: var(--deep-ink);
  font-size: 40px; line-height: 48px; letter-spacing: -0.02em;
}
[data-sailoros="v2"] .s-lp__hero--deep .s-lp__lead {
  margin: var(--space-4) 0 0; color: var(--deep-ink-2);
  font-size: var(--text-lede); line-height: var(--leading-lede);
}
[data-sailoros="v2"] .s-lp__hero--deep .s-btn--ghost,
[data-sailoros="v2"] .s-lp__hero--deep .s-btn--secondary {
  background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, .28);
}
[data-sailoros="v2"] .s-lp__hero--deep .s-btn--ghost:hover,
[data-sailoros="v2"] .s-lp__hero--deep .s-btn--secondary:hover {
  background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .45);
}
[data-sailoros="v2"] .s-lp__hero--deep .s-lp__number-v { color: #FFFFFF; }
[data-sailoros="v2"] .s-lp__hero--deep .s-lp__number-k { color: var(--deep-ink-3); }
[data-sailoros="v2"] .s-lp__hero--deep .s-lp__numbers {
  margin-top: var(--space-8); padding-top: var(--space-6);
  border-top: 1px solid var(--deep-line-soft);
}

[data-sailoros="v2"] .s-lp__numbers { display: flex; flex-wrap: wrap; gap: var(--space-10); margin-top: var(--space-6); }
[data-sailoros="v2"] .s-lp__number { display: flex; flex-direction: column; }
[data-sailoros="v2"] .s-lp__number-v { font-size: var(--text-h1); font-weight: 700; color: var(--brand-600); font-variant-numeric: tabular-nums; }
[data-sailoros="v2"] .s-lp__number-k { font-size: var(--text-caption); color: var(--ink-500); }

[data-sailoros="v2"] .s-lp__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5);
}
[data-sailoros="v2"] .s-lp__card {
  padding: var(--space-6); background: var(--bg-000);
  border: 1px solid var(--line-300); border-radius: var(--radius-lg);
  transition: box-shadow var(--motion-hover) var(--ease-out), border-color var(--motion-hover) var(--ease-out);
}
[data-sailoros="v2"] .s-lp__card:hover { border-color: var(--brand-300); box-shadow: var(--shadow-raise); }
[data-sailoros="v2"] .s-lp__card .s-h3 { margin: 0 0 var(--space-2); }
[data-sailoros="v2"] .s-lp__card p { margin: 0; }
[data-sailoros="v2"] .s-lp .s-section > .s-h2 { margin-bottom: var(--space-4); }

[data-sailoros="v2"] .s-list { padding-left: var(--space-5); }
[data-sailoros="v2"] .s-list li { margin-bottom: var(--space-2); }

/* Главное правило страницы о мошенничестве — крупно и выделено: это ровно та
   строка, ради которой человек открыл страницу. */
[data-sailoros="v2"] .s-lp__rule {
  margin: var(--space-6) 0; padding: var(--space-6);
  background: var(--warning-50); border-radius: var(--radius-md);
  border-left: 4px solid var(--warning-600);
}
[data-sailoros="v2"] .s-lp__rule-text { font-size: var(--text-h3); font-weight: 600; color: var(--ink-900); }

[data-sailoros="v2"] .s-lp__privacy {
  padding: var(--space-6); background: var(--bg-100);
  border: 1px solid var(--line-200); border-radius: var(--radius-md);
}
[data-sailoros="v2"] .s-lp__note { color: var(--ink-500); font-size: var(--text-caption); margin-top: var(--space-3); }
[data-sailoros="v2"] .s-lp__final { padding-bottom: var(--space-8); }

@media (max-width: 767px) {
  [data-sailoros="v2"] .s-lp__grid { grid-template-columns: 1fr; }
  [data-sailoros="v2"] .s-lp__numbers { gap: var(--space-5); }
  [data-sailoros="v2"] .s-lp__hero--deep { padding: var(--space-8) var(--space-5); border-radius: var(--radius-lg); }
  [data-sailoros="v2"] .s-lp__hero--deep .s-h1 { font-size: 26px; line-height: 34px; max-width: none; }
  [data-sailoros="v2"] .s-lp__hero--deep .s-lp__lead { font-size: var(--text-body); line-height: var(--leading-body); }
  [data-sailoros="v2"] .s-lp__cta .s-btn { width: 100%; }
}

/* ─────────────────────────── Юридические страницы ───────────────────────────
   /privacy · /terms · /consent. Длинный текст, который человек открывает в
   момент сомнения, — поэтому здесь важнее читаемость, чем плотность: колонка
   уже сетки страницы, крупный межстрочный, заметные заголовки разделов.

   Отдельный класс, а не .s-prose на всё подряд: у прозы лендинга своя ширина и
   свои отступы, и юр-документ, свёрстанный её правилами, читается сплошняком. */
[data-sailoros="v2"] .s-legal { max-width: 76ch; }
[data-sailoros="v2"] .s-legal p,
[data-sailoros="v2"] .s-legal li { color: var(--ink-700); line-height: 1.65; }
[data-sailoros="v2"] .s-legal p { margin: 0 0 var(--space-4); }
[data-sailoros="v2"] .s-legal ul { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
[data-sailoros="v2"] .s-legal li { margin-bottom: var(--space-2); }
[data-sailoros="v2"] .s-legal h2 { margin: var(--space-8) 0 var(--space-3); }
[data-sailoros="v2"] .s-legal h3 { margin: var(--space-6) 0 var(--space-3); }
[data-sailoros="v2"] .s-legal strong { color: var(--ink-900); font-weight: 600; }
[data-sailoros="v2"] .s-legal a { color: var(--brand-600); text-decoration: underline; }

/* Дата редакции — под заголовком, приглушённо: она важна юридически и не должна
   спорить с текстом за внимание. */
[data-sailoros="v2"] .s-legal__meta {
  color: var(--ink-500); font-size: var(--text-caption);
  margin: 0 0 var(--space-6);
}

/* Лид «коротко о главном» — первое, что читают, и часто единственное. */
[data-sailoros="v2"] .s-legal__lead {
  padding: var(--space-5); background: var(--brand-50);
  border-radius: var(--radius-md); border-left: 4px solid var(--brand-600);
  margin-bottom: var(--space-8);
}
[data-sailoros="v2"] .s-legal__lead p:last-child { margin-bottom: 0; }

/* Дословный текст согласия. Выделен рамкой намеренно: человек должен видеть, где
   кончается наше объяснение и начинается то, с чем он соглашается. */
[data-sailoros="v2"] .s-legal__quote {
  margin: var(--space-4) 0 var(--space-5); padding: var(--space-5);
  background: var(--bg-000); border: 1px solid var(--line-300);
  border-radius: var(--radius-md);
}
[data-sailoros="v2"] .s-legal__quote p { margin: 0; color: var(--ink-900); }

/* Оглавление страницы согласий: три документа, и переход между ними должен быть
   одним движением, а не прокруткой. */
[data-sailoros="v2"] .s-legal__toc { margin-bottom: var(--space-8); }
[data-sailoros="v2"] .s-legal__toc ol { margin: 0; padding-left: var(--space-5); }
[data-sailoros="v2"] .s-legal__toc li { margin-bottom: var(--space-2); }

/* ═══════════════════════════════════════════════════════════════════════════
   Материалы: блог, новости (WEB-CONTENT-PAGES)
   Правило вёрстки раздела: текст материала — колонка 720, всё остальное на
   странице шире. Читают тут длинный текст, и строка во всю ширину монитора
   теряется на возврате к началу следующей.
   ВАЖНО: не писать звёздочку-слэш внутри комментариев (инцидент 10.07).
   ═══════════════════════════════════════════════════════════════════════════ */

[data-sailoros="v2"] .s-mat__search {
  display: flex; gap: var(--space-2); margin: var(--space-5) 0 var(--space-4);
  max-width: 480px;
}
[data-sailoros="v2"] .s-mat__search .s-input { flex: 1; }
[data-sailoros="v2"] .s-mat__chips { margin-bottom: var(--space-6); }

[data-sailoros="v2"] .s-mat__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4);
}
[data-sailoros="v2"] .s-mat {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4);
}
[data-sailoros="v2"] .s-mat p { margin: 0; }
[data-sailoros="v2"] .s-mat__cover {
  display: block; margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-2);
  border-radius: var(--radius-md) var(--radius-md) 0 0; overflow: hidden;
}
[data-sailoros="v2"] .s-mat__cover img {
  display: block; width: 100%; height: 168px; object-fit: cover;
}
[data-sailoros="v2"] .s-mat__title a { color: var(--ink-900); }
[data-sailoros="v2"] .s-mat__excerpt { color: var(--ink-700); }
[data-sailoros="v2"] .s-mat__meta { color: var(--ink-500); }

/* Страница материала */
/* Текст материала — на белой поверхности, а не прямо на сером поле страницы.
   Колонка остаётся 720: длинный текст во всю ширину не читается, и это правило
   раздела не меняется — меняется только то, на чём колонка лежит. */
[data-sailoros="v2"] .s-mat-article {
  max-width: 800px; box-sizing: border-box;
  background: var(--bg-000); border: 1px solid var(--line-300);
  border-radius: var(--radius-lg); padding: var(--space-10);
}
[data-sailoros="v2"] .s-mat-article > *:first-child { margin-top: 0; }
[data-sailoros="v2"] .s-mat-article .s-h1 { margin-bottom: var(--space-3); }
[data-sailoros="v2"] .s-mat__body { margin-top: 0; }
[data-sailoros="v2"] .s-mat__body > *:first-child { margin-top: 0; }
[data-sailoros="v2"] .s-mat__body p,
[data-sailoros="v2"] .s-mat__body li { color: var(--ink-700); line-height: 1.65; }
[data-sailoros="v2"] .s-mat__body h2 { margin: var(--space-8) 0 var(--space-3); }
[data-sailoros="v2"] .s-mat__body h3 { margin: var(--space-6) 0 var(--space-3); }
[data-sailoros="v2"] .s-mat__toc {
  margin-top: var(--space-6); padding: var(--space-4);
  background: var(--bg-100); border-radius: var(--radius-md);
}
[data-sailoros="v2"] .s-mat__toc ol { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
[data-sailoros="v2"] .s-mat__toc li { margin-bottom: var(--space-2); }
[data-sailoros="v2"] .s-mat__sources { margin-top: var(--space-8); }
[data-sailoros="v2"] .s-mat__related,
[data-sailoros="v2"] .s-mat__jobs { margin-top: var(--space-10); }

/* Новости — строки, а не карточки: новость читают ради факта. */
[data-sailoros="v2"] .s-news { list-style: none; margin: var(--space-5) 0 0; padding: 0; }
[data-sailoros="v2"] .s-news__item {
  padding: var(--space-4) 0; border-bottom: 1px solid var(--line-300);
}
[data-sailoros="v2"] .s-news__item:first-child { padding-top: 0; }
[data-sailoros="v2"] .s-news__meta {
  display: flex; gap: var(--space-3); align-items: center;
  color: var(--ink-500); font-size: var(--text-caption);
  margin-bottom: var(--space-1);
}
[data-sailoros="v2"] .s-news__cat {
  color: var(--brand-600); font-weight: var(--weight-body-strong);
}
[data-sailoros="v2"] .s-news__title {
  margin: 0; font-size: var(--text-body-lg); line-height: 26px;
  font-weight: var(--weight-body-strong);
}
[data-sailoros="v2"] .s-news__title a { color: var(--ink-900); }
[data-sailoros="v2"] .s-news__time { margin: var(--space-1) 0 0; color: var(--ink-500); }

@media (max-width: 1023px) {
  [data-sailoros="v2"] .s-mat__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  /* 375: карточки блога в одну колонку, картинка сверху; новости — строки
     без картинок; текст материала на всю ширину с полями 16 (§7). */
  [data-sailoros="v2"] .s-mat__grid { grid-template-columns: 1fr; }
  [data-sailoros="v2"] .s-mat__search { max-width: none; }
  [data-sailoros="v2"] .s-mat-article { max-width: none; padding: var(--space-5); }
  [data-sailoros="v2"] .s-mat__cover img { height: 180px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Форум (Ф3, WEB-FORUM-*). Тот же спокойный язык, что у остального сайта:
   карточка — рамка и фон, а не тень; выделяется ровно одно — лучший ответ.
   ───────────────────────────────────────────────────────────────────────── */
[data-sailoros="v2"] .s-fhome__actions { margin: var(--space-5) 0 var(--space-8); }

/* ── Лента обсуждений (Ф3.1, раскладка переписана в Э1) ────────────────────
   Две колонки, один порядок DOM на все ширины: поиск → чипы → лента → правая
   колонка. Раскладку делает grid-template-areas, а не второй набор разметки:
   отдавать роботу и человеку по одному адресу разное содержимое нельзя.

   ⚠️ Величины сетки — СВОИ токены. Это НЕ --cab-*: те принадлежат оболочке
   кабинетов, живут в двух сборках и удерживаются тестами-сторожами — трогать
   их ради публичной страницы значит менять величину в четырёх местах. */
[data-sailoros="v2"] {
  --forum-aside: 300px;
}

/* Поиск во всю ширину — главный элемент экрана сообщества (Э1 §6.1). Раздел со
   временем становится базой знаний, а базу не листают: в ней ищут. */
[data-sailoros="v2"] .s-fintro { margin: calc(-1 * var(--space-2)) 0 var(--space-5); }
[data-sailoros="v2"] .s-fsearch {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-5);
}
[data-sailoros="v2"] .s-fsearch__form {
  flex: 1 1 420px; min-width: 260px; margin: 0; max-width: 620px;
}
/* Поиск раздела носит общую плашку (`s-ptop__search`), и собственный отступ
   сверху ей здесь не нужен — его задаёт строка целиком. */
[data-sailoros="v2"] .s-fsearch .s-ptop__search { margin-top: 0; }
[data-sailoros="v2"] .s-fsearch__ask { height: 52px; padding: 0 var(--space-6); }
[data-sailoros="v2"] .s-fsearch__input { flex: 1; min-width: 0; }
[data-sailoros="v2"] .s-fsearch__ask { white-space: nowrap; }

/* Чипы тем. Ведут на страницы рубрик, а не фильтруют ленту параметром —
   причина в партиале. Строка прокручивается сама; горизонтальной прокрутки у
   страницы при этом не появляется. */
[data-sailoros="v2"] .s-fchips {
  display: flex; gap: var(--space-2); margin: 0 0 var(--space-8);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
[data-sailoros="v2"] .s-fchips::-webkit-scrollbar { display: none; }
[data-sailoros="v2"] .s-fchip {
  flex: 0 0 auto; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-300); border-radius: var(--radius-pill);
  background: var(--bg-000); color: var(--ink-700);
  font-size: var(--text-body); text-decoration: none; white-space: nowrap;
}
[data-sailoros="v2"] .s-fchip:hover {
  border-color: var(--brand-600); color: var(--brand-600); text-decoration: none;
}

/* Лента во всю ширину, справа колонка 300. Левого сайдбара с рубриками больше
   нет: основную ширину получают сами вопросы (Э1). */
[data-sailoros="v2"] .s-fgrid {
  display: grid; gap: var(--space-8);
  grid-template-columns: minmax(0, 1fr) var(--forum-aside);
  grid-template-areas: "feed aside";
  align-items: start;
}
[data-sailoros="v2"] .s-fgrid__feed { grid-area: feed; min-width: 0; }
[data-sailoros="v2"] .s-fgrid__aside {
  grid-area: aside; display: flex; flex-direction: column; gap: var(--space-4);
}
[data-sailoros="v2"] .s-fgrid__title { margin: 0; }
[data-sailoros="v2"] .s-fhead {
  display: flex; align-items: baseline; gap: var(--space-3);
  margin: 0 0 var(--space-3);
}
[data-sailoros="v2"] .s-fhead .s-jobs__count { margin: 0; }

/* Три фильтра строкой вместо колонки в сайдбаре. */
[data-sailoros="v2"] .s-ffilters {
  display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-5);
}
[data-sailoros="v2"] .s-ffilter {
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  color: var(--ink-700); font-size: var(--text-body); text-decoration: none;
}
[data-sailoros="v2"] .s-ffilter:hover { background: var(--bg-100); text-decoration: none; }
[data-sailoros="v2"] .s-ffilter--on {
  background: var(--brand-50); color: var(--brand-600);
  font-weight: var(--weight-body-strong);
}

[data-sailoros="v2"] .s-faside {
  padding: var(--space-4); border: 1px solid var(--line-300);
  border-radius: var(--radius-lg); background: var(--bg-000);
}
[data-sailoros="v2"] .s-faside__window { margin: 0 0 var(--space-3); color: var(--ink-500); }
[data-sailoros="v2"] .s-faside__title {
  margin: 0 0 var(--space-2); font-size: var(--text-h3);
  font-weight: var(--weight-heading); color: var(--ink-900);
}
[data-sailoros="v2"] .s-faside--ask .s-hint { margin: 0 0 var(--space-3); }
[data-sailoros="v2"] .s-faside__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-3);
}
[data-sailoros="v2"] .s-faside__row { display: flex; flex-direction: column; gap: var(--space-1); }
[data-sailoros="v2"] .s-faside__row a { color: var(--ink-900); font-size: var(--text-body); }
[data-sailoros="v2"] .s-faside__row a:hover { color: var(--brand-600); }
[data-sailoros="v2"] .s-faside__row .s-caption { color: var(--ink-500); }

/* Сноска Ф-5 под ответами: раздел не даёт юридических, медицинских и налоговых
   консультаций от имени платформы. */
[data-sailoros="v2"] .s-fdisclaimer {
  margin: var(--space-4) 0 0; padding-top: var(--space-3);
  border-top: 1px solid var(--line-200); color: var(--ink-500);
}

/* ── Буквенный аватар ──────────────────────────────────────────────────────
   Фотографий на форуме нет и не будет: форумная личность отделена от анкеты.
   Восемь спокойных тонов, и ни один НЕ равен --brand-600 (#1A56B0) — кружок
   цветом основного действия читался бы как элемент управления. Тон приходит
   готовым числом из питона (sha1 псевдонима): считать его в CSS нечем, а от
   встроенной свёртки строк он менялся бы после каждого рестарта. */
[data-sailoros="v2"] .s-favatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: var(--radius-full);
  font-size: var(--text-overline); font-weight: var(--weight-overline);
  color: var(--bg-000); background: var(--ink-500); flex: none;
}
[data-sailoros="v2"] .s-favatar--t0 { background: #3F5E8C; }
[data-sailoros="v2"] .s-favatar--t1 { background: #4E6E5D; }
[data-sailoros="v2"] .s-favatar--t2 { background: #7A5C8B; }
[data-sailoros="v2"] .s-favatar--t3 { background: #8A6240; }
[data-sailoros="v2"] .s-favatar--t4 { background: #2F6E72; }
[data-sailoros="v2"] .s-favatar--t5 { background: #8C5A5A; }
[data-sailoros="v2"] .s-favatar--t6 { background: #5A6472; }
[data-sailoros="v2"] .s-favatar--t7 { background: #6B7A3F; }
/* Автор, у которого больше нет аккаунта: серый у ВСЕХ одинаковый. Разные
   цвета были бы ложным признаком разных людей. */
[data-sailoros="v2"] .s-favatar--neutral { background: var(--ink-400); }

[data-sailoros="v2"] .s-flist {
  display: flex; flex-direction: column; gap: var(--space-3);
}
[data-sailoros="v2"] .s-fcard { display: flex; flex-direction: column; gap: var(--space-2); }
[data-sailoros="v2"] .s-fcard__title { margin: 0; }
[data-sailoros="v2"] .s-fcard__title a { color: var(--ink-900); text-decoration: none; }
[data-sailoros="v2"] .s-fcard__title a:hover { color: var(--brand-600); }
[data-sailoros="v2"] .s-fcard__meta,
[data-sailoros="v2"] .s-fcard__counts { margin: 0; color: var(--ink-500); }
[data-sailoros="v2"] .s-fcard__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
}
[data-sailoros="v2"] .s-fcard__cat { color: var(--brand-600); text-decoration: none; }
[data-sailoros="v2"] .s-fcard__wanted { color: var(--warning-600); }

/* Две строки выдержки: вопрос и лучший (или самый свежий) ответ. Обрезка по
   СТРОКАМ, а не по знакам: усечение в питоне (160) остаётся вторым рубежом на
   случай, когда стилей нет. Заголовок тоже ограничен — иначе длинный вопрос
   один занимает высоту трёх карточек. */
[data-sailoros="v2"] .s-fcard__title,
[data-sailoros="v2"] .s-fcard__excerpt,
[data-sailoros="v2"] .s-fcard__answer {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
[data-sailoros="v2"] .s-fcard__title { -webkit-line-clamp: 2; }
[data-sailoros="v2"] .s-fcard__excerpt,
[data-sailoros="v2"] .s-fcard__answer { -webkit-line-clamp: 2; }
[data-sailoros="v2"] .s-fcard__excerpt {
  margin: 0; color: var(--ink-700); font-size: var(--text-body);
}
[data-sailoros="v2"] .s-fcard__answer {
  margin: 0; color: var(--ink-700); font-size: var(--text-body);
  padding-left: var(--space-3); border-left: 2px solid var(--line-300);
}
[data-sailoros="v2"] .s-fcard__arrow { color: var(--ink-400); }
[data-sailoros="v2"] .s-fcard__answer-author {
  color: var(--ink-900); font-weight: var(--weight-body-strong);
}
/* Тихая пометка: без значка «На проверке» и без рамки — на карточке ленты
   ответ выглядит оставленным, а одна строка вторичным цветом объясняет, почему
   его пока не видят другие. */
[data-sailoros="v2"] .s-fcard__only-you { margin: 0; color: var(--ink-500); }

/* ── Анонс материала в ленте ────────────────────────────────────────────────
   Отбивка слева и приглушённый фон — чтобы редакционный материал не читался
   как вопрос моряка. Карточка, неотличимая от вопроса, это подделка под
   сообщество; вся разница делается оформлением, потому что состав данных у
   анонса и так другой (ни автора, ни аватара, ни рубрики). */
[data-sailoros="v2"] .s-fcard--material {
  background: var(--bg-100);
  border-left: 3px solid var(--brand-600);
}

/* ── Раскрытие разговора ────────────────────────────────────────────────────
   Ссылка идёт сразу под выдержкой ответа, с той же отбивкой слева: она
   продолжает ответ, а не открывает новый раздел карточки. Раскрытый разговор
   встаёт на её место с той же отбивкой — сдвига содержания при раскрытии нет. */
[data-sailoros="v2"] .s-fcard__expand-row {
  margin: 0; padding-left: var(--space-3);
}
[data-sailoros="v2"] .s-fcard__expand {
  color: var(--brand-600); font-size: var(--text-caption); text-decoration: none;
}
[data-sailoros="v2"] .s-fcard__expand:hover { text-decoration: underline; }
[data-sailoros="v2"] .s-fanswers {
  padding-left: var(--space-3); border-left: 2px solid var(--line-300);
}
[data-sailoros="v2"] .s-fanswers[hidden] { display: none; }
/* Раскрытый разговор ЗАМЕНЯЕТ выдержку, а не встаёт под ней: иначе первые
   строки ответа читаются дважды подряд. Правило работает только со скриптом —
   класс ставит он же; без скрипта раскрытия не существует, и прятать нечего. */
[data-sailoros="v2"] .s-fcard--expanded .s-fcard__answer { display: none; }
[data-sailoros="v2"] .s-fanswers__more { margin: var(--space-2) 0 0; }

/* ── Панель действий карточки ──────────────────────────────────────────────
   Есть только в ленте и в рубрике. В выдаче поиска и в блоке «похожие
   вопросы» её нет, и это не косметика: там карточки соседствуют с формой
   ответа, а вложенная форма — невалидная разметка. */
[data-sailoros="v2"] .s-fcard__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  padding-top: var(--space-2); border-top: 1px solid var(--line-200);
}
[data-sailoros="v2"] .s-fcard__actions form { margin: 0; }

/* Меню «…»: `<details>`, а не всплывающее окно на скрипте. */
[data-sailoros="v2"] .s-fmenu { position: relative; }
[data-sailoros="v2"] .s-fmenu__toggle {
  cursor: pointer; list-style: none; color: var(--ink-500);
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
}
[data-sailoros="v2"] .s-fmenu__toggle::-webkit-details-marker { display: none; }
[data-sailoros="v2"] .s-fmenu__toggle:hover { background: var(--bg-100); color: var(--ink-700); }
[data-sailoros="v2"] .s-fmenu__body {
  position: absolute; z-index: 5; left: 0; top: 100%;
  padding: var(--space-2); border: 1px solid var(--line-300);
  border-radius: var(--radius-md); background: var(--bg-000);
  box-shadow: var(--shadow-md); white-space: nowrap;
}

[data-sailoros="v2"] .s-fhint { margin-top: var(--space-5); }

/* Инлайн-ответ. Свёрнут по умолчанию: двадцать раскрытых полей ввода в списке
   из двадцати строк — не приглашение отвечать, а стена. */
/* Свёрнутый — обычный элемент строки действий; раскрытый забирает всю ширину.
   Постоянные 100% ставили бы «Ответить» на отдельную строку всегда, и панель
   вырастала бы вдвое на каждой из двадцати карточек. */
[data-sailoros="v2"] .s-freply[open] { flex: 1 1 100%; }
[data-sailoros="v2"] .s-freply__toggle {
  display: inline-block; cursor: pointer; list-style: none;
  color: var(--brand-600); font-size: var(--text-caption);
  padding: var(--space-1) 0;
}
[data-sailoros="v2"] .s-freply__toggle::-webkit-details-marker { display: none; }
[data-sailoros="v2"] .s-freply__form {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin-top: var(--space-3); max-width: var(--text-max);
}
[data-sailoros="v2"] .s-freply__form .s-textarea { width: 100%; }
[data-sailoros="v2"] .s-freply__form .s-btn { align-self: flex-start; }
[data-sailoros="v2"] .s-freply .s-fgate { margin-top: var(--space-3); }

[data-sailoros="v2"] .s-fq { max-width: var(--text-max); }
[data-sailoros="v2"] .s-fq__meta { margin: var(--space-2) 0 var(--space-5); color: var(--ink-500); }
[data-sailoros="v2"] .s-fq__body { white-space: pre-line; }
[data-sailoros="v2"] .s-fq__tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  margin-top: var(--space-4);
}
[data-sailoros="v2"] .s-fq__tools form { margin: 0; }

[data-sailoros="v2"] .s-fa { margin-bottom: var(--space-4); }
[data-sailoros="v2"] .s-fa__meta { margin: 0 0 var(--space-2); color: var(--ink-500); }
[data-sailoros="v2"] .s-fa__body { white-space: pre-line; }
/* Раскрытый в ленте ответ обрезки по строкам не имеет и иметь не должен:
   раскрытие для того и нажимают. Длинные слова и вставленные ссылки
   переносятся, иначе на 375 разговор растягивает карточку и уводит страницу в
   горизонтальную прокрутку. Правило `white-space` берётся строкой выше — второй
   его копии здесь нет намеренно. */
[data-sailoros="v2"] .s-fanswers .s-fa__body { overflow-wrap: anywhere; }
[data-sailoros="v2"] .s-fa__tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  margin-top: var(--space-3);
}
[data-sailoros="v2"] .s-fa__tools form { margin: 0; }
/* Лучший ответ — единственное выделение на странице. */
[data-sailoros="v2"] .s-fa--best { border-color: var(--success-600); }
/* Своя запись на проверке отличается РАМКОЙ, а не только подписью: не увидев
   отправленного, человек пишет второй раз. */
[data-sailoros="v2"] .s-fa--pending {
  border-style: dashed; background: var(--bg-100);
}

[data-sailoros="v2"] .s-fpromo {
  margin: var(--space-8) 0; padding: var(--space-5);
  border: 1px solid var(--line-300); border-radius: var(--radius-lg);
  background: var(--brand-50);
}
[data-sailoros="v2"] .s-fpromo > .s-h3 { margin: var(--space-1) 0 var(--space-4); }

[data-sailoros="v2"] .s-fform {
  display: flex; flex-direction: column; gap: var(--space-4);
  max-width: var(--text-max);
}
[data-sailoros="v2"] .s-fform .s-textarea { width: 100%; }
[data-sailoros="v2"] .s-fform .s-btn { align-self: flex-start; }
[data-sailoros="v2"] .s-fgate { margin: 0; }
[data-sailoros="v2"] .s-fask { max-width: var(--text-max); }

/* Ниже 1024 правая колонка уходит ПОД ленту, а не исчезает: она украшение, но
   не лишняя. Порядок DOM тот же, адрес тот же, содержимое то же — различается
   только раскладка. */
@media (max-width: 1023px) {
  [data-sailoros="v2"] .s-fgrid {
    grid-template-columns: 1fr;
    grid-template-areas: "feed" "aside";
    gap: var(--space-6);
  }
}
@media (max-width: 767px) {
  /* Первый экран телефона — заголовок, поиск, чипы, первая карточка. В Ф3.1
     его занимал список рубрик, и содержание начиналось со второго экрана. */
  [data-sailoros="v2"] .s-fsearch__ask { width: 100%; text-align: center; }
  [data-sailoros="v2"] .s-fchips {
    margin-bottom: var(--space-6);
    /* Строка чипов обрезается краем экрана, а не колонкой: чип, срезанный на
       полуслове, читается как «здесь есть ещё», и это правда. */
    margin-left: calc(-1 * var(--space-4)); margin-right: calc(-1 * var(--space-4));
    padding-left: var(--space-4); padding-right: var(--space-4);
  }
}


/* ===== Каталог: доводка по холсту «Каталог вакансий» (02.09.2026) ========= */
/* Крупный счётчик в шапке страницы — то же число, что в строке выдачи. */
[data-sailoros="v2"] .s-jobs__found { margin: var(--space-3) 0 0; color: var(--ink-900); font-size: var(--text-h3); }
/* Шапка панели фильтров: заголовок + «Сбросить всё» + крестик (только в шторке). */
[data-sailoros="v2"] .s-filters__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
[data-sailoros="v2"] .s-filters__heading { margin: 0; font-weight: var(--weight-body-strong); color: var(--ink-900); flex: 1; }
[data-sailoros="v2"] .s-filters__reset { font-size: var(--text-caption); color: var(--brand-600); }
[data-sailoros="v2"] .s-filters__close { display: none; border: 0; background: transparent; font-size: 18px; line-height: 1; cursor: pointer; color: var(--ink-500); padding: var(--space-1); }
/* Номерная пагинация. */
[data-sailoros="v2"] .s-pages { display: flex; align-items: center; justify-content: center; gap: var(--space-1); flex-wrap: wrap; margin: var(--space-6) 0 var(--space-2); }
[data-sailoros="v2"] .s-pages__n, [data-sailoros="v2"] .s-pages__arrow {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px;
  padding: 0 var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--line-300);
  background: var(--bg-000); color: var(--ink-700); font-weight: 500;
}
[data-sailoros="v2"] .s-pages__n:hover, [data-sailoros="v2"] .s-pages__arrow:hover { border-color: var(--brand-600); text-decoration: none; }
[data-sailoros="v2"] .s-pages__n--on { background: var(--brand-600); border-color: var(--brand-600); color: #FFFFFF; }
[data-sailoros="v2"] .s-pages__gap { padding: 0 var(--space-2); color: var(--ink-400); }
[data-sailoros="v2"] .s-result__pagenote { text-align: center; margin: 0 0 var(--space-4); }
/* Скелетоны: рендерятся рядом с затемнённой выдачей. */
[data-sailoros="v2"] .s-vlist--skeleton { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
[data-sailoros="v2"] .s-vcard--skeleton { display: flex; flex-direction: column; gap: var(--space-3); min-height: 160px; }
[data-sailoros="v2"] .s-vcard--skeleton .s-skeleton { display: block; }
[data-sailoros="v2"] .s-catalog__error { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; margin-bottom: var(--space-4); }
/* Мобильная шторка: панель уезжает вниз экрана с закреплённой кнопкой. */
[data-sailoros="v2"] body.s-noscroll { overflow: hidden; }
@media (max-width: 1023px) {
  [data-sailoros="v2"] .s-filters-wrap--sheet .s-filters {
    position: fixed; left: 0; right: 0; bottom: 0; height: 90vh; margin: 0; z-index: 60;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0; border: 0;
    box-shadow: var(--shadow-lg); overflow-y: auto; padding-bottom: 96px;
  }
  [data-sailoros="v2"] .s-filters-wrap--sheet .s-filters__close { display: inline-flex; }
  [data-sailoros="v2"] .s-filters-wrap--sheet .s-filters__actions { display: none; }
  [data-sailoros="v2"] .s-filters-wrap--sheet .s-filters-sheet__footer {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; background: var(--bg-000);
    padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line-300);
  }
  [data-sailoros="v2"] .s-filters-wrap--sheet .s-filters-sheet__footer .s-btn { width: 100%; }
}
/* Архивная вакансия: плашка первым блоком, бейдж «Архив». */
[data-sailoros="v2"] .s-vd__archived { margin: var(--space-3) 0 var(--space-4); }


/* ===== Форум: доводка по холсту «Форум» (02.09.2026) ======================= */
/* Страница вопроса и категории — две колонки: содержимое + сайдбар 340. */
[data-sailoros="v2"] .s-fq-grid, [data-sailoros="v2"] .s-fcat-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-8); align-items: start;
}
[data-sailoros="v2"] .s-fq-grid .s-fq { max-width: none; min-width: 0; }
[data-sailoros="v2"] .s-fq__aside { display: flex; flex-direction: column; gap: var(--space-4); position: sticky; top: 80px; }
[data-sailoros="v2"] .s-fq__aside .s-faside { margin: 0; }
[data-sailoros="v2"] .s-faside--cat .s-faside__title { margin: var(--space-1) 0; }
[data-sailoros="v2"] .s-fq__own { margin-bottom: var(--space-2); }
[data-sailoros="v2"] .s-fq__noanswers { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; margin-bottom: var(--space-4); }
[data-sailoros="v2"] .s-fsimilar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
[data-sailoros="v2"] .s-fsimilar__item { display: flex; flex-direction: column; gap: var(--space-1); color: var(--ink-900); }
[data-sailoros="v2"] .s-fsimilar__item:hover { text-decoration: none; border-color: var(--brand-600); }
[data-sailoros="v2"] .s-fcat__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
[data-sailoros="v2"] .s-frules { margin: var(--space-2) 0 var(--space-4); padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); color: var(--ink-700); }
[data-sailoros="v2"] .s-fform__actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
[data-sailoros="v2"] .s-fjoin__preview { margin-top: calc(-1 * var(--space-2)); }
@media (max-width: 1023px) {
  [data-sailoros="v2"] .s-fq-grid, [data-sailoros="v2"] .s-fcat-grid { grid-template-columns: minmax(0, 1fr); }
  [data-sailoros="v2"] .s-fq__aside { position: static; }
  [data-sailoros="v2"] .s-fsimilar { grid-template-columns: minmax(0, 1fr); }
}


/* ===== Лендинги и материалы: доводка по холстам (волна 2, 02.09.2026) ===== */
[data-sailoros="v2"] .s-lp__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
[data-sailoros="v2"] .s-lp__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin: var(--space-4) 0; }
[data-sailoros="v2"] .s-lp__step { display: flex; gap: var(--space-3); align-items: flex-start; background: var(--bg-000); border: 1px solid var(--line-300); border-radius: var(--radius-lg); padding: var(--space-5); }
[data-sailoros="v2"] .s-lp__step-n { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--brand-600); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
[data-sailoros="v2"] .s-lp__sub { margin: 0 0 var(--space-2); font-size: var(--text-h3); color: var(--ink-900); }
[data-sailoros="v2"] .s-faq { display: flex; flex-direction: column; gap: var(--space-2); }
[data-sailoros="v2"] .s-faq__item { background: var(--bg-000); border: 1px solid var(--line-300); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
[data-sailoros="v2"] .s-faq__item summary { cursor: pointer; font-weight: var(--weight-body-strong); color: var(--ink-900); list-style: none; display: flex; justify-content: space-between; gap: var(--space-3); }
[data-sailoros="v2"] .s-faq__item summary::-webkit-details-marker { display: none; }
[data-sailoros="v2"] .s-faq__item summary::after { content: "+"; color: var(--brand-600); font-weight: 600; }
[data-sailoros="v2"] .s-faq__item[open] summary::after { content: "−"; }
[data-sailoros="v2"] .s-faq__item .s-prose { margin-top: var(--space-2); }
[data-sailoros="v2"] .s-lp__sample { max-width: 420px; margin-top: var(--space-4); }
[data-sailoros="v2"] .s-lp__rule .s-overline { margin-bottom: var(--space-1); }
[data-sailoros="v2"] .s-mat__sort { margin: 0 0 var(--space-2); }
[data-sailoros="v2"] .s-mat__hero { width: 100%; max-height: 300px; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: var(--space-5); }
[data-sailoros="v2"] .s-mat__forum { margin-top: var(--space-8); }
[data-sailoros="v2"] .s-empty__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
@media (max-width: 1023px) {
  [data-sailoros="v2"] .s-lp__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-sailoros="v2"] .s-lp__steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  [data-sailoros="v2"] .s-lp__grid--4 { grid-template-columns: minmax(0, 1fr); }
}