@charset "UTF-8";
/*============================================================================
  site.css — кастомный слой поверх main.css шаблона Industrie (LTR).
  Подключается ПОСЛЕ assets/css/main.css.

  Правила слоя:
   * ни одного глобального переопределения тегов (body / h1..h6 / a / p / ul):
     всё живёт внутри .ms-* и .rs-anatomy-figure;
   * шрифт и типографика — шаблонные (Space Grotesk, --rs-ff-title/--rs-ff-body);
   * скругления 2px и переходы .3s linear — как у .rs-btn шаблона;
   * отступы кратны 8;
   * брейкпоинты шаблонные (desktop-first): 1399 / 1199 / 991 / 767 / 575;
   * без !important, без внешних шрифтов и картинок.

  Оглавление
   0.  Переменные (--ms-*) + до-определение «сломанных» --rs-* шаблона
   1.  Тёмный/светлый контекст
   2.  .rs-anatomy-figure — анатомическая иллюстрация с подписью
   3.  .ms-callout / --warn
   4.  .ms-table-scroll / .ms-table
   5.  .ms-checklist
   6.  .ms-zones
   7.  .ms-safety
   8.  .ms-atlas — интерактивный атлас мышц
   9.  .ms-muscle-grid / .ms-muscle-card
   10. .ms-toc — оглавление статьи
   11. .ms-lang — переключатель языков
   12. Мелкие утилиты: ms-demo-note, ms-badge, ms-takeaways, ms-compare,
       ms-stat, ms-hero-figure, .visually-hidden
   13. prefers-reduced-motion
   14. @media print
============================================================================*/

/*----------------------------------------------------------------------------
  0. Переменные
----------------------------------------------------------------------------*/
:root {
  /* фирменные цвета */
  --ms-accent: #023B4A;            /* = --rs-theme-green, тема has-theme-green */
  --ms-accent-soft: #507A7C;       /* = --rs-theme-light-green */
  --ms-accent-bright: #00CAA4;     /* = --rs-theme-cyan, мятный микроакцент */
  --ms-ink: #0D2A3C;               /* = --rs-bg-dark-blue, тёмный фон/заголовки */
  --ms-light: #F7F7F7;             /* = --rs-bg-primary, светлый фон */
  --ms-white: #FFFFFF;
  --ms-warm: #B3541E;              /* тёплый акцент предупреждений (не кислотный) */
  --ms-warm-ink: #8A4116;

  /* поверхности и текст (переопределяются в тёмном контексте, §1) */
  --ms-surface: #FFFFFF;
  --ms-surface-soft: rgba(2, 59, 74, 0.04);
  --ms-surface-softer: rgba(2, 59, 74, 0.02);
  --ms-surface-warm: rgba(179, 84, 30, 0.06);
  --ms-text: #616161;
  --ms-text-strong: #0D2A3C;
  --ms-text-muted: rgba(13, 42, 60, 0.62);
  --ms-eyebrow: #023B4A;
  --ms-border: rgba(13, 42, 60, 0.14);
  --ms-border-soft: rgba(13, 42, 60, 0.08);
  --ms-border-strong: rgba(13, 42, 60, 0.26);
  --ms-warm-border: rgba(179, 84, 30, 0.28);
  --ms-warm-text: #8A4116;
  --ms-marker-bg: rgba(255, 255, 255, 0.92);

  /* форма */
  --ms-radius: 2px;
  --ms-shadow: 0 8px 32px rgba(13, 42, 60, 0.1);
  --ms-shadow-soft: 0 2px 8px rgba(13, 42, 60, 0.06);
  --ms-transition: all 0.3s linear;
  --ms-focus: 0 0 0 2px var(--ms-white), 0 0 0 4px var(--ms-accent-bright);

  /* шкала отступов, кратна 8 */
  --ms-space-1: 8px;
  --ms-space-2: 16px;
  --ms-space-3: 24px;
  --ms-space-4: 32px;
  --ms-space-5: 40px;
  --ms-space-6: 48px;

  /* запас под липкую шапку шаблона (.rs-sticky-header ~72-88px) */
  --ms-sticky-offset: 100px;

  /* --- до-определяем переменные, которые main.css использует, но не объявляет.
     Без этого .rs-circle-btn, .rs-swiper-scrollbar, галочка чекбокса и
     .body__overlay рендерятся «в никуда». Значения — наши фирменные. --- */
  --rs-theme-primary: #023B4A;
  --rs-theme-secondary: #507A7C;
  --rs-theme-tertiary: #0D2A3C;
  --rs-theme-quaternary: #00CAA4;
  --rs-theme-dark-blue: #0D2A3C;
  --rs-hover-primary: #00CAA4;
  --rs-hover-secondary: #507A7C;
  --rs-hover-tertiary: #0D2A3C;
  --rs-primary: #023B4A;
  --rs-common-heading: #0D2A3C;
  --rs-bg-light: #F7F7F7;
  --rs-bg-light-grey: #F1F2F2;
  --rs-bg-secondary: #F7F7F7;
  --rs-bg-tertiary: #0D2A3C;
  --rs-success: #2E7D5B;
  --rs-info: #0D80CE;
  --rs-warning: #B3541E;
  --rs-danger: #B3241E;
}

/*----------------------------------------------------------------------------
  1. Тёмный контекст.
     Перекрашиваем ТОЛЬКО наши --ms-* переменные — ни одного чужого свойства.
     Любой наш компонент внутри тёмной секции подхватывает палитру сам.
----------------------------------------------------------------------------*/
.rs-bg-dark-blue,
.rs-bg-dark-green,
.black-bg,
.has-bg-black,
.has-bg-dark,
.has-bg-dark-blue,
.ms-on-dark {
  --ms-surface: rgba(255, 255, 255, 0.04);
  --ms-surface-soft: rgba(255, 255, 255, 0.06);
  --ms-surface-softer: rgba(255, 255, 255, 0.03);
  --ms-surface-warm: rgba(255, 176, 120, 0.1);
  --ms-text: rgba(255, 255, 255, 0.74);
  --ms-text-strong: #FFFFFF;
  --ms-text-muted: rgba(255, 255, 255, 0.56);
  --ms-eyebrow: #00CAA4;
  --ms-border: rgba(255, 255, 255, 0.18);
  --ms-border-soft: rgba(255, 255, 255, 0.1);
  --ms-border-strong: rgba(255, 255, 255, 0.32);
  --ms-warm-border: rgba(255, 176, 120, 0.4);
  --ms-warm-text: #F0B183;
  --ms-marker-bg: rgba(13, 42, 60, 0.86);
  --ms-focus: 0 0 0 2px var(--ms-ink), 0 0 0 4px var(--ms-accent-bright);
}

/* Светлый островок внутри тёмной секции (если секция сама так размечена). */
.primary-bg,
.white-bg,
.has-bg-white,
.ms-on-light {
  --ms-surface: #FFFFFF;
  --ms-text: #616161;
  --ms-text-strong: #0D2A3C;
  --ms-eyebrow: #023B4A;
  --ms-border: rgba(13, 42, 60, 0.14);
  --ms-marker-bg: rgba(255, 255, 255, 0.92);
}

/*----------------------------------------------------------------------------
  2. .rs-anatomy-figure — ключевой компонент: иллюстрация + подпись + чипы мышц.
     Разметку даёт ctx.figure():
       figure.rs-anatomy-figure
         > .rs-anatomy-figure__media > img + span.rs-anatomy-figure__badge
         > figcaption.rs-anatomy-figure__caption
             > span.rs-anatomy-figure__eyebrow (i.ri-* + текст)
             > p
             > ul.rs-anatomy-figure__muscles > li
----------------------------------------------------------------------------*/
.rs-anatomy-figure {
  margin: 0 0 var(--ms-space-4);
  color: var(--ms-text);
  font-family: var(--rs-ff-body);
}

.rs-anatomy-figure:last-child {
  margin-bottom: 0;
}

.rs-anatomy-figure__media {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  background-color: var(--ms-surface-softer);
  line-height: 0;
}

.rs-anatomy-figure__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ms-radius);
  transition: var(--ms-transition);
}

.rs-anatomy-figure__badge {
  position: absolute;
  inset-block-start: var(--ms-space-2);
  inset-inline-start: var(--ms-space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-1);
  padding: 6px 16px;
  border-radius: var(--ms-radius);
  background-color: var(--ms-accent);
  color: var(--ms-white);
  font-family: var(--rs-ff-title);
  font-size: 13px;
  font-weight: var(--rs-fw-medium);
  line-height: 20px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rs-anatomy-figure__caption {
  margin-top: var(--ms-space-2);
  color: var(--ms-text);
}

.rs-anatomy-figure__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-1);
  margin-bottom: var(--ms-space-1);
  color: var(--ms-eyebrow);
  font-family: var(--rs-ff-title);
  font-size: 13px;
  font-weight: var(--rs-fw-medium);
  line-height: 20px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rs-anatomy-figure__eyebrow i {
  font-size: 16px;
  line-height: 1;
  color: var(--ms-accent-bright);
}

.rs-anatomy-figure__caption p {
  margin-bottom: 0;
  color: var(--ms-text);
  font-size: 15px;
  line-height: 1.6;
}

.rs-anatomy-figure__muscles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-1);
  margin: var(--ms-space-2) 0 0;
  padding: 0;
  list-style: none;
}

.rs-anatomy-figure__muscles li {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  background-color: var(--ms-surface-softer);
  color: var(--ms-text-strong);
  font-size: 14px;
  line-height: 22px;
  transition: var(--ms-transition);
}

.rs-anatomy-figure__muscles li:hover {
  border-color: var(--ms-accent-bright);
  color: var(--ms-accent-bright);
}

/* Компактный вариант в узкой колонке (сайдбар, карточка). */
.rs-anatomy-figure.is-compact .rs-anatomy-figure__caption p {
  font-size: 14px;
}

.rs-anatomy-figure.is-compact .rs-anatomy-figure__muscles li {
  font-size: 13px;
  padding: 2px 8px;
}

@media only screen and (max-width: 767px) {
  .rs-anatomy-figure {
    margin-bottom: var(--ms-space-3);
  }

  .rs-anatomy-figure__caption p {
    font-size: 14px;
  }

  .rs-anatomy-figure__badge {
    font-size: 12px;
    padding: 4px 12px;
  }
}

/*----------------------------------------------------------------------------
  3. .ms-callout — врезка. .ms-callout--warn — предупреждающая (тёплый акцент).
----------------------------------------------------------------------------*/
.ms-callout {
  position: relative;
  margin: 0 0 var(--ms-space-4);
  padding: var(--ms-space-3) var(--ms-space-3);
  border: 1px solid var(--ms-border-soft);
  border-inline-start: 3px solid var(--ms-accent);
  border-radius: var(--ms-radius);
  background-color: var(--ms-surface-soft);
  color: var(--ms-text);
  font-size: 16px;
  line-height: 1.625;
}

.ms-callout:last-child {
  margin-bottom: 0;
}

.ms-callout p {
  margin-bottom: var(--ms-space-2);
  color: var(--ms-text);
  font-size: 16px;
  line-height: 1.625;
}

.ms-callout p:last-child {
  margin-bottom: 0;
}

.ms-callout ul,
.ms-callout ol {
  margin: 0 0 var(--ms-space-2);
  padding-inline-start: var(--ms-space-3);
  color: var(--ms-text);
  font-size: 16px;
  line-height: 1.625;
}

.ms-callout ul:last-child,
.ms-callout ol:last-child {
  margin-bottom: 0;
}

.ms-callout ul li {
  list-style: disc;
}

.ms-callout__title {
  display: flex;
  align-items: center;
  gap: var(--ms-space-1);
  margin-bottom: var(--ms-space-1);
  color: var(--ms-text-strong);
  font-family: var(--rs-ff-title);
  font-size: 18px;
  font-weight: var(--rs-fw-bold);
  line-height: 1.44;
}

.ms-callout__title::before {
  content: "\ee59"; /* ri-information-line */
  font-family: var(--rs-ff-remixicon), "remixicon";
  font-size: 20px;
  font-weight: var(--rs-fw-normal);
  line-height: 1;
  color: var(--ms-accent);
  flex: 0 0 auto;
}

.ms-callout--warn {
  border-color: var(--ms-warm-border);
  border-inline-start-color: var(--ms-warm);
  background-color: var(--ms-surface-warm);
}

.ms-callout--warn .ms-callout__title {
  color: var(--ms-warm-text);
}

.ms-callout--warn .ms-callout__title::before {
  content: "\ea21"; /* ri-alert-line */
  color: var(--ms-warm);
}

.ms-callout--warn .ms-callout__title + p,
.ms-callout--warn p {
  color: var(--ms-text);
}

@media only screen and (max-width: 767px) {
  .ms-callout {
    padding: var(--ms-space-2);
    margin-bottom: var(--ms-space-3);
  }

  .ms-callout__title {
    font-size: 17px;
  }
}

/*----------------------------------------------------------------------------
  4. Таблицы: .ms-table-scroll (обёртка) + .ms-table
----------------------------------------------------------------------------*/
.ms-table-scroll {
  position: relative;
  width: 100%;
  margin: 0 0 var(--ms-space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--ms-border-soft);
  border-radius: var(--ms-radius);
  background-color: var(--ms-surface);
}

.ms-table-scroll:last-child {
  margin-bottom: 0;
}

.ms-table-scroll:focus-visible {
  outline: 2px solid var(--ms-accent-bright);
  outline-offset: 2px;
}

.ms-table {
  width: 100%;
  min-width: 560px;
  margin: 0;
  border-collapse: collapse;
  color: var(--ms-text);
  font-family: var(--rs-ff-body);
  font-size: 16px;
  line-height: 1.5;
  --ms-row-bg: var(--ms-surface);
}

.ms-table caption {
  padding: var(--ms-space-2);
  color: var(--ms-text-muted);
  font-size: 14px;
  text-align: start;
  caption-side: bottom;
}

.ms-table th,
.ms-table td {
  padding: 16px;
  border-bottom: 1px solid var(--ms-border-soft);
  text-align: start;
  vertical-align: top;
}

.ms-table thead th {
  position: relative;
  background-color: var(--ms-accent);
  border-bottom-color: var(--ms-accent);
  color: var(--ms-white);
  font-family: var(--rs-ff-title);
  font-size: 13px;
  font-weight: var(--rs-fw-medium);
  line-height: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ms-table tbody tr {
  --ms-row-bg: var(--ms-surface);
  transition: var(--ms-transition);
}

.ms-table tbody tr:nth-child(even) {
  --ms-row-bg: var(--ms-surface-soft);
  background-color: var(--ms-surface-soft);
}

.ms-table tbody tr:last-child th,
.ms-table tbody tr:last-child td {
  border-bottom: 0;
}

.ms-table tbody th {
  color: var(--ms-text-strong);
  font-family: var(--rs-ff-title);
  font-size: 16px;
  font-weight: var(--rs-fw-sbold);
}

.ms-table td strong,
.ms-table th strong {
  color: var(--ms-text-strong);
  font-weight: var(--rs-fw-sbold);
}

/* Липкая первая колонка — только там, где таблица реально скроллится. */
@media only screen and (max-width: 991px) {
  .ms-table thead th:first-child,
  .ms-table tbody tr > *:first-child {
    position: sticky;
    inset-inline-start: 0;
    z-index: 2;
    background-color: var(--ms-row-bg);
    background-clip: padding-box;
  }

  .ms-table thead th:first-child {
    z-index: 3;
    background-color: var(--ms-accent);
  }

  .ms-table tbody tr > *:first-child::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: 1px;
    background-color: var(--ms-border);
  }
}

@media only screen and (max-width: 767px) {
  .ms-table {
    font-size: 15px;
  }

  .ms-table th,
  .ms-table td {
    padding: 12px;
  }
}

/*----------------------------------------------------------------------------
  5. .ms-checklist — три колонки со списками-галочками
----------------------------------------------------------------------------*/
.ms-checklist {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ms-space-4);
  margin: 0;
  padding: 0;
}

/* две колонки — когда в секции два списка (checklist.js ставит модификатор) */
.ms-checklist--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ms-checklist__col {
  min-width: 0;
  padding: var(--ms-space-3);
  border: 1px solid var(--ms-border-soft);
  border-top: 2px solid var(--ms-accent);
  border-radius: var(--ms-radius);
  background-color: var(--ms-surface-softer);
}

.ms-checklist__title {
  margin-bottom: var(--ms-space-2);
  padding-bottom: var(--ms-space-1);
  border-bottom: 1px solid var(--ms-border-soft);
  color: var(--ms-text-strong);
  font-family: var(--rs-ff-title);
  font-size: 20px;
  font-weight: var(--rs-fw-bold);
  line-height: 1.44;
}

.ms-checklist__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-checklist__col ul li {
  position: relative;
  padding-inline-start: 32px;
  color: var(--ms-text);
  font-size: 16px;
  line-height: 1.625;
}

.ms-checklist__col ul li:not(:last-child) {
  margin-bottom: var(--ms-space-1);
}

.ms-checklist__col ul li::before {
  content: "\eb7b"; /* ri-check-line */
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--ms-accent-bright);
  border-radius: 50%;
  font-family: var(--rs-ff-remixicon), "remixicon";
  font-size: 12px;
  line-height: 1;
  color: var(--ms-accent-bright);
}

.ms-checklist__col p {
  margin-bottom: var(--ms-space-2);
  color: var(--ms-text);
  font-size: 16px;
  line-height: 1.625;
}

@media only screen and (max-width: 991px) {
  .ms-checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ms-space-3);
  }
}

@media only screen and (max-width: 767px) {
  .ms-checklist {
    grid-template-columns: minmax(0, 1fr);
  }

  .ms-checklist__col {
    padding: var(--ms-space-2);
  }

  .ms-checklist__title {
    font-size: 18px;
  }
}

/*----------------------------------------------------------------------------
  6. .ms-zones — список зон выезда
----------------------------------------------------------------------------*/
.ms-zones {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ms-border-soft);
}

.ms-zone {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ms-space-2);
  padding: var(--ms-space-2) 0;
  border-bottom: 1px solid var(--ms-border-soft);
  list-style: none;
  transition: var(--ms-transition);
}

.ms-zone:hover {
  border-bottom-color: var(--ms-accent-bright);
}

.ms-zone__name {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--ms-space-1);
  min-width: 0;
  color: var(--ms-text-strong);
  font-family: var(--rs-ff-title);
  font-size: 18px;
  font-weight: var(--rs-fw-medium);
  line-height: 1.44;
}

.ms-zone__name::before {
  content: "\ef14"; /* ri-map-pin-line */
  font-family: var(--rs-ff-remixicon), "remixicon";
  font-size: 16px;
  font-weight: var(--rs-fw-normal);
  line-height: 1;
  color: var(--ms-accent-bright);
  flex: 0 0 auto;
}

.ms-zone__meta {
  flex: 0 0 auto;
  color: var(--ms-text-muted);
  font-size: 15px;
  line-height: 1.6;
  text-align: end;
  white-space: nowrap;
}

.ms-zone__meta strong {
  color: var(--ms-text-strong);
  font-weight: var(--rs-fw-sbold);
}

.ms-zone.is-featured .ms-zone__name {
  color: var(--ms-accent);
}

@media only screen and (max-width: 575px) {
  .ms-zone {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .ms-zone__meta {
    text-align: start;
    white-space: normal;
  }

  .ms-zone__name {
    font-size: 17px;
  }
}

/* Строка зоны в zones.js — три части: название, условия (время, надбавка), заметка.
   Флекс с space-between раскладывал их по ширине содержимого — колонки не совпадали
   от строки к строке, а условия слипались в одну строку. Здесь — общая сетка. */
@media only screen and (min-width: 768px) {
  .ms-zone {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: start;
    gap: 6px var(--ms-space-3);
  }
  .ms-zone > p { margin: 0; grid-column: 2; grid-row: 1 / span 2; }
}
@media only screen and (min-width: 992px) {
  .ms-zone { grid-template-columns: minmax(0, 13em) minmax(0, 1fr) minmax(0, 1.3fr); }
  .ms-zone > p { grid-column: auto; grid-row: auto; }
}
@media only screen and (max-width: 767px) {
  .ms-zone { flex-direction: column; align-items: flex-start; gap: 6px; }
  .ms-zone > p { margin: 0; }
}
.ms-zone__meta > span {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.ms-zone__meta > span + span { margin-top: 4px; }
.ms-zone__meta i { flex: none; color: var(--ms-accent-bright); }
@media only screen and (min-width: 576px) {
  .ms-zone__meta { text-align: start; white-space: normal; }
}

/*----------------------------------------------------------------------------
  7. .ms-safety — два списка противопоказаний
     1-я колонка (или --absolute) — строгая, тёплый акцент и знак запрета;
     2-я колонка (или --relative) — мягкая, фирменный акцент и знак внимания.
----------------------------------------------------------------------------*/
.ms-safety {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ms-space-4);
}

.ms-safety__col {
  min-width: 0;
  padding: var(--ms-space-3);
  border: 1px solid var(--ms-border-soft);
  border-inline-start: 3px solid var(--ms-accent-soft);
  border-radius: var(--ms-radius);
  background-color: var(--ms-surface-softer);
}

.ms-safety__col > h3,
.ms-safety__col > h4,
.ms-safety__col > h5,
.ms-safety__col > .ms-safety__title {
  display: flex;
  align-items: center;
  gap: var(--ms-space-1);
  margin-bottom: var(--ms-space-2);
  color: var(--ms-text-strong);
  font-size: 20px;
  line-height: 1.44;
}

.ms-safety__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-safety__col ul li {
  position: relative;
  padding-inline-start: 28px;
  color: var(--ms-text);
  font-size: 16px;
  line-height: 1.625;
}

.ms-safety__col ul li:not(:last-child) {
  margin-bottom: var(--ms-space-1);
}

.ms-safety__col ul li::before {
  content: "\ea21"; /* ri-alert-line — относительные, мягче */
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 2px;
  font-family: var(--rs-ff-remixicon), "remixicon";
  font-size: 16px;
  line-height: 1.625;
  color: var(--ms-accent-soft);
}

.ms-safety__col p {
  margin-bottom: var(--ms-space-2);
  color: var(--ms-text);
  font-size: 16px;
  line-height: 1.625;
}

.ms-safety__col p:last-child {
  margin-bottom: 0;
}

/* Строгий столбец: и по порядку, и по явному модификатору/атрибуту. */
.ms-safety .ms-safety__col:first-child,
.ms-safety__col--absolute,
.ms-safety__col[data-kind="absolute"] {
  border-inline-start-color: var(--ms-warm);
  background-color: var(--ms-surface-warm);
}

.ms-safety .ms-safety__col:first-child ul li::before,
.ms-safety__col--absolute ul li::before,
.ms-safety__col[data-kind="absolute"] ul li::before {
  content: "\ed93"; /* ri-forbid-2-line */
  color: var(--ms-warm);
}

.ms-safety .ms-safety__col:first-child > h3,
.ms-safety .ms-safety__col:first-child > h4,
.ms-safety .ms-safety__col:first-child > h5,
.ms-safety .ms-safety__col:first-child > .ms-safety__title,
.ms-safety__col--absolute > .ms-safety__title,
.ms-safety__col[data-kind="absolute"] > .ms-safety__title {
  color: var(--ms-warm-text);
}

/* Явный «мягкий» модификатор возвращает спокойный вид, даже если он первый. */
.ms-safety .ms-safety__col--relative,
.ms-safety .ms-safety__col[data-kind="relative"] {
  border-inline-start-color: var(--ms-accent-soft);
  background-color: var(--ms-surface-softer);
}

.ms-safety .ms-safety__col--relative ul li::before,
.ms-safety .ms-safety__col[data-kind="relative"] ul li::before {
  content: "\ea21";
  color: var(--ms-accent-soft);
}

@media only screen and (max-width: 767px) {
  .ms-safety {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ms-space-3);
  }

  .ms-safety__col {
    padding: var(--ms-space-2);
  }
}

/*----------------------------------------------------------------------------
  8. .ms-atlas — интерактивный атлас мышц
     .ms-atlas > .ms-atlas__stage (img.ms-atlas__img + .ms-atlas__marker[data-target])
              > .ms-atlas__panel  (.ms-atlas__card[id] > ... > ul.ms-atlas__list)
     До инициализации JS все карточки видимы (страница читается без JS);
     site.js вешает на корень .is-ready и включает режим «одна карточка».
----------------------------------------------------------------------------*/
.ms-atlas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ms-space-5);
  align-items: start;
}

.ms-atlas__stage {
  position: relative;
  padding: var(--ms-space-2);
  border: 1px solid var(--ms-border-soft);
  border-radius: var(--ms-radius);
  background-color: var(--ms-light);
}

.ms-atlas__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ms-radius);
}

.ms-atlas__marker {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 2px solid var(--ms-accent);
  border-radius: 50%;
  background-color: var(--ms-marker-bg);
  color: var(--ms-accent);
  font-family: var(--rs-ff-title);
  font-size: 13px;
  font-weight: var(--rs-fw-bold);
  line-height: 1;
  cursor: pointer;
  transition: var(--ms-transition);
  -webkit-appearance: none;
  appearance: none;
}

.ms-atlas__marker:hover,
.ms-atlas__marker:focus-visible {
  border-color: var(--ms-accent-bright);
  background-color: var(--ms-accent);
  color: var(--ms-white);
}

.ms-atlas__marker:focus {
  outline: none;
}

.ms-atlas__marker:focus-visible {
  outline: 2px solid var(--ms-accent-bright);
  outline-offset: 3px;
}

.ms-atlas__marker.is-active,
.ms-atlas__marker[aria-pressed="true"],
.ms-atlas__marker[aria-expanded="true"] {
  border-color: var(--ms-accent-bright);
  background-color: var(--ms-accent);
  color: var(--ms-white);
}

/* Пульсация — только у активного маркера. */
.ms-atlas__marker.is-active::before {
  content: "";
  position: absolute;
  inset: -6px;
  border: 2px solid var(--ms-accent-bright);
  border-radius: 50%;
  opacity: 0;
  animation: ms-atlas-pulse 2s ease-out infinite;
  pointer-events: none;
}

@keyframes ms-atlas-pulse {
  0% {
    transform: scale(0.72);
    opacity: 0.8;
  }
  70% {
    transform: scale(1.25);
    opacity: 0;
  }
  100% {
    transform: scale(1.25);
    opacity: 0;
  }
}

/* Тултип с названием мышцы — только если задан data-label. */
.ms-atlas__marker[data-label]::after {
  content: attr(data-label);
  position: absolute;
  inset-block-end: calc(100% + 8px);
  inset-inline-start: 50%;
  z-index: 3;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: var(--ms-radius);
  background-color: var(--ms-ink);
  color: var(--ms-white);
  font-family: var(--rs-ff-body);
  font-size: 13px;
  font-weight: var(--rs-fw-regular);
  line-height: 20px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s linear, visibility 0s linear 0.3s;
  pointer-events: none;
}

.ms-atlas__marker[data-label]:hover::after,
.ms-atlas__marker[data-label]:focus-visible::after,
.ms-atlas__marker[data-label].is-active::after {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s linear, visibility 0s linear 0s;
}

.ms-atlas__panel {
  min-width: 0;
}

.ms-atlas__card {
  padding: var(--ms-space-3);
  border: 1px solid var(--ms-border-soft);
  border-top: 2px solid var(--ms-accent);
  border-radius: var(--ms-radius);
  background-color: var(--ms-surface);
  color: var(--ms-text);
}

.ms-atlas__card:not(:last-child) {
  margin-bottom: var(--ms-space-2);
}

.ms-atlas__card h3,
.ms-atlas__card h4,
.ms-atlas__card h5,
.ms-atlas__card .ms-atlas__card-title {
  margin-bottom: var(--ms-space-1);
  color: var(--ms-text-strong);
  font-size: 24px;
  line-height: 1.4;
}

.ms-atlas__card p {
  margin-bottom: var(--ms-space-2);
  color: var(--ms-text);
  font-size: 16px;
  line-height: 1.625;
}

.ms-atlas__card p:last-child {
  margin-bottom: 0;
}

.ms-atlas__card .ms-atlas__meta {
  display: block;
  margin-bottom: var(--ms-space-1);
  color: var(--ms-eyebrow);
  font-family: var(--rs-ff-title);
  font-size: 13px;
  font-weight: var(--rs-fw-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ms-atlas__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-atlas__list li {
  position: relative;
  padding-inline-start: 20px;
  color: var(--ms-text);
  font-size: 16px;
  line-height: 1.625;
}

.ms-atlas__list li:not(:last-child) {
  margin-bottom: var(--ms-space-1);
}

.ms-atlas__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--ms-accent-bright);
}

/* Режим «одна карточка» — включается только после инициализации JS. */
.ms-atlas.is-ready .ms-atlas__card {
  display: none;
}

.ms-atlas.is-ready .ms-atlas__card.is-active {
  display: block;
}

@media only screen and (max-width: 1199px) {
  .ms-atlas {
    gap: var(--ms-space-4);
  }

  .ms-atlas__card {
    padding: var(--ms-space-2);
  }
}

/* < 992px: фигура сверху, карточки списком под ней (активная — раскрыта). */
@media only screen and (max-width: 991px) {
  .ms-atlas {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ms-space-3);
  }

  .ms-atlas.is-ready .ms-atlas__card {
    display: block;
    border-top-color: var(--ms-border-soft);
    background-color: var(--ms-surface-softer);
  }

  .ms-atlas.is-ready .ms-atlas__card.is-active {
    border-top-color: var(--ms-accent);
    background-color: var(--ms-surface);
    box-shadow: var(--ms-shadow-soft);
  }

  .ms-atlas__marker {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
}

@media only screen and (max-width: 575px) {
  .ms-atlas__stage {
    padding: var(--ms-space-1);
  }

  .ms-atlas__marker {
    width: 28px;
    height: 28px;
  }

  .ms-atlas__marker[data-label]::after {
    font-size: 12px;
    padding: 2px 8px;
  }
}

/*----------------------------------------------------------------------------
  9. .ms-muscle-grid / .ms-muscle-card
----------------------------------------------------------------------------*/
.ms-muscle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ms-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-muscle-card {
  min-width: 0;
  padding: var(--ms-space-3);
  border: 1px solid var(--ms-border-soft);
  border-radius: var(--ms-radius);
  background-color: var(--ms-surface);
  color: var(--ms-text);
  list-style: none;
  transition: var(--ms-transition);
}

.ms-muscle-card:hover {
  border-color: var(--ms-accent-bright);
  box-shadow: var(--ms-shadow-soft);
}

.ms-muscle-card h3,
.ms-muscle-card h4,
.ms-muscle-card h5,
.ms-muscle-card .ms-muscle-card__title {
  margin-bottom: var(--ms-space-1);
  color: var(--ms-text-strong);
  font-size: 20px;
  line-height: 1.44;
}

.ms-muscle-card p {
  margin-bottom: 0;
  color: var(--ms-text);
  font-size: 15px;
  line-height: 1.6;
}

.ms-muscle-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-space-1);
  margin-bottom: var(--ms-space-1);
  color: var(--ms-eyebrow);
  font-family: var(--rs-ff-title);
  font-size: 13px;
  font-weight: var(--rs-fw-medium);
  line-height: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ms-muscle-card__meta span:not(:last-child)::after {
  content: "·";
  margin-inline-start: var(--ms-space-1);
  color: var(--ms-border-strong);
}

.ms-muscle-card img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: var(--ms-space-2);
  border-radius: var(--ms-radius);
}

@media only screen and (max-width: 991px) {
  .ms-muscle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 575px) {
  .ms-muscle-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ms-space-2);
  }

  .ms-muscle-card {
    padding: var(--ms-space-2);
  }
}

/*----------------------------------------------------------------------------
  10. .ms-toc — оглавление статьи (липкое на десктопе)
----------------------------------------------------------------------------*/
.ms-toc {
  padding: var(--ms-space-3);
  border: 1px solid var(--ms-border-soft);
  border-top: 2px solid var(--ms-accent);
  border-radius: var(--ms-radius);
  background-color: var(--ms-surface-softer);
}

.ms-toc__title,
.ms-toc > h2,
.ms-toc > h3,
.ms-toc > h4 {
  margin-bottom: var(--ms-space-2);
  color: var(--ms-text-strong);
  font-family: var(--rs-ff-title);
  font-size: 18px;
  font-weight: var(--rs-fw-bold);
  line-height: 1.44;
  letter-spacing: 0.02em;
}

.ms-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-toc__list li {
  list-style: none;
}

.ms-toc__list li:not(:last-child) {
  margin-bottom: 4px;
}

.ms-toc__list a {
  display: block;
  padding: 6px 0 6px var(--ms-space-2);
  border-inline-start: 2px solid var(--ms-border-soft);
  color: var(--ms-text);
  font-size: 15px;
  line-height: 1.6;
  text-decoration: none;
  transition: var(--ms-transition);
}

.ms-toc__list a:hover,
.ms-toc__list a:focus-visible {
  border-inline-start-color: var(--ms-accent-bright);
  color: var(--ms-accent);
}

.ms-toc__list a:focus-visible {
  outline: 2px solid var(--ms-accent-bright);
  outline-offset: 2px;
}

.ms-toc__list a.is-active,
.ms-toc__list a[aria-current="true"] {
  border-inline-start-color: var(--ms-accent);
  color: var(--ms-text-strong);
  font-weight: var(--rs-fw-medium);
}

/* Вложенный уровень (h3) — если рендерер его отдаёт. */
.ms-toc__list ul {
  margin: 4px 0 4px var(--ms-space-2);
  padding: 0;
  list-style: none;
}

.ms-toc__list ul a {
  font-size: 14px;
}

@media only screen and (min-width: 992px) {
  .ms-toc {
    position: sticky;
    inset-block-start: var(--ms-sticky-offset);
    max-height: calc(100vh - var(--ms-sticky-offset) - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media only screen and (max-width: 991px) {
  .ms-toc {
    margin-bottom: var(--ms-space-4);
    padding: var(--ms-space-2);
  }
}

/*----------------------------------------------------------------------------
  11. .ms-lang — переключатель языков (шапка + offcanvas)
----------------------------------------------------------------------------*/
.ms-lang {
  position: relative;
  display: inline-block;
  font-family: var(--rs-ff-body);
}

.ms-lang__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-1);
  height: 40px;
  padding: 0 var(--ms-space-2);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  background-color: transparent;
  color: var(--ms-text-strong);
  font-family: var(--rs-ff-title);
  font-size: 15px;
  font-weight: var(--rs-fw-medium);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: var(--ms-transition);
  -webkit-appearance: none;
  appearance: none;
}

.ms-lang__btn i {
  font-size: 16px;
  line-height: 1;
}

.ms-lang__btn:hover {
  border-color: var(--ms-accent);
  color: var(--ms-accent);
}

.ms-lang__btn:focus-visible {
  outline: 2px solid var(--ms-accent-bright);
  outline-offset: 2px;
}

.ms-lang__btn[aria-expanded="true"] {
  border-color: var(--ms-accent);
  color: var(--ms-accent);
}

.ms-lang__btn[aria-expanded="true"] .ms-lang__caret,
.ms-lang.is-open .ms-lang__caret {
  transform: rotate(180deg);
}

.ms-lang__caret {
  display: inline-flex;
  transition: var(--ms-transition);
}

.ms-lang__menu {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 99;
  min-width: 160px;
  margin: 0;
  padding: var(--ms-space-1) 0;
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  background-color: var(--ms-white);
  box-shadow: var(--ms-shadow);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  /* visibility переключаем скачком (0s), а не интерполяцией: так меню
     не зависит от того, успела ли отработать анимация. */
  transition: opacity 0.3s linear, transform 0.3s linear, visibility 0s linear 0.3s;
}

.ms-lang.is-open .ms-lang__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.3s linear, transform 0.3s linear, visibility 0s linear 0s;
}

.ms-lang__menu li {
  list-style: none;
}

.ms-lang__menu a,
.ms-lang__menu button {
  display: flex;
  align-items: center;
  gap: var(--ms-space-1);
  width: 100%;
  padding: 8px var(--ms-space-2);
  border: 0;
  background-color: transparent;
  color: #0D2A3C;
  font-family: var(--rs-ff-body);
  font-size: 15px;
  line-height: 24px;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: var(--ms-transition);
}

.ms-lang__menu a:hover,
.ms-lang__menu button:hover,
.ms-lang__menu a:focus-visible,
.ms-lang__menu button:focus-visible {
  background-color: rgba(2, 59, 74, 0.06);
  color: #023B4A;
}

.ms-lang__menu a:focus-visible,
.ms-lang__menu button:focus-visible {
  outline: 2px solid var(--ms-accent-bright);
  outline-offset: -2px;
}

.ms-lang__menu a[aria-current="true"],
.ms-lang__menu .is-current > a,
.ms-lang__menu a.is-current {
  color: #023B4A;
  font-weight: var(--rs-fw-medium);
}

/* В offcanvas (тёмная панель) — на всю ширину и выпадает вниз-влево. */
.offcanvas-area .ms-lang,
.ms-lang--block {
  display: block;
  width: 100%;
}

.offcanvas-area .ms-lang__btn,
.ms-lang--block .ms-lang__btn {
  width: 100%;
  justify-content: space-between;
  height: 48px;
}

.offcanvas-area .ms-lang__menu,
.ms-lang--block .ms-lang__menu {
  inset-inline: 0;
  min-width: 0;
}

.offcanvas-area .ms-lang__btn {
  border-color: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
}

.offcanvas-area .ms-lang__btn:hover,
.offcanvas-area .ms-lang__btn[aria-expanded="true"] {
  border-color: var(--ms-accent-bright);
  color: var(--ms-accent-bright);
}

/*----------------------------------------------------------------------------
  12. Мелкие утилиты
----------------------------------------------------------------------------*/
/* Пометка «демо-отзывы» */
.ms-demo-note {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-1);
  padding: 4px 12px;
  border: 1px dashed var(--ms-border-strong);
  border-radius: var(--ms-radius);
  color: var(--ms-text-muted);
  font-family: var(--rs-ff-body);
  font-size: 14px;
  font-style: italic;
  line-height: 22px;
}

.ms-demo-note::before {
  content: "\ee59"; /* ri-information-line */
  font-family: var(--rs-ff-remixicon), "remixicon";
  font-size: 16px;
  font-style: normal;
  line-height: 1;
  color: var(--ms-accent-soft);
}

/* Бейдж */
.ms-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border: 1px solid var(--ms-accent);
  border-radius: var(--ms-radius);
  background-color: transparent;
  color: var(--ms-accent);
  font-family: var(--rs-ff-title);
  font-size: 12px;
  font-weight: var(--rs-fw-medium);
  line-height: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ms-badge.is-solid {
  background-color: var(--ms-accent);
  color: var(--ms-white);
}

.ms-badge.is-bright {
  border-color: var(--ms-accent-bright);
  color: var(--ms-accent-bright);
}

.ms-badge.is-warm {
  border-color: var(--ms-warm-border);
  color: var(--ms-warm-text);
}

/* Блок выводов статьи */
.ms-takeaways {
  margin: 0 0 var(--ms-space-4);
  padding: var(--ms-space-3);
  border: 1px solid var(--ms-border-soft);
  border-inline-start: 3px solid var(--ms-accent-bright);
  border-radius: var(--ms-radius);
  background-color: var(--ms-surface-soft);
}

.ms-takeaways:last-child {
  margin-bottom: 0;
}

.ms-takeaways > h2,
.ms-takeaways > h3,
.ms-takeaways > h4,
.ms-takeaways > .ms-takeaways__title {
  margin-bottom: var(--ms-space-2);
  color: var(--ms-text-strong);
  font-size: 20px;
  line-height: 1.44;
}

.ms-takeaways ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ms-takeaways ul li {
  position: relative;
  padding-inline-start: 28px;
  color: var(--ms-text);
  font-size: 16px;
  line-height: 1.625;
  list-style: none;
}

.ms-takeaways ul li:not(:last-child) {
  margin-bottom: var(--ms-space-1);
}

.ms-takeaways ul li::before {
  content: "\eb79"; /* ri-check-double-line */
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 2px;
  font-family: var(--rs-ff-remixicon), "remixicon";
  font-size: 16px;
  line-height: 1.625;
  color: var(--ms-accent-bright);
}

/* Обёртка сравнения (две колонки «до/после», «мы/они») */
.ms-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ms-space-3);
  align-items: stretch;
}

.ms-compare > * {
  min-width: 0;
}

.ms-compare__col {
  padding: var(--ms-space-3);
  border: 1px solid var(--ms-border-soft);
  border-radius: var(--ms-radius);
  background-color: var(--ms-surface-softer);
}

.ms-compare__col.is-highlight {
  border-color: var(--ms-accent);
  background-color: var(--ms-surface);
  box-shadow: var(--ms-shadow-soft);
}

@media only screen and (max-width: 767px) {
  .ms-compare {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ms-space-2);
  }

  .ms-compare__col {
    padding: var(--ms-space-2);
  }
}

/* Крупная цифра-статистика */
.ms-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--ms-text);
}

.ms-stat__value {
  display: block;
  color: var(--ms-accent);
  font-family: var(--rs-ff-title);
  font-size: 48px;
  font-weight: var(--rs-fw-bold);
  line-height: 1;
  letter-spacing: -0.01em;
}

.ms-stat__value small,
.ms-stat__value .ms-stat__unit {
  font-size: 24px;
  font-weight: var(--rs-fw-medium);
  color: var(--ms-accent-bright);
}

.ms-stat__label,
.ms-stat p {
  margin-bottom: 0;
  color: var(--ms-text);
  font-size: 15px;
  line-height: 1.6;
}

.ms-on-dark .ms-stat__value,
.rs-bg-dark-blue .ms-stat__value,
.black-bg .ms-stat__value {
  color: var(--ms-white);
}

@media only screen and (max-width: 991px) {
  .ms-stat__value {
    font-size: 40px;
  }
}

@media only screen and (max-width: 575px) {
  .ms-stat__value {
    font-size: 32px;
  }
}

/* Hero-иллюстрация */
.ms-hero-figure {
  position: relative;
  display: block;
  margin: 0;
  border-radius: var(--ms-radius);
}

.ms-hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ms-radius);
}

.ms-hero-figure figcaption,
.ms-hero-figure__caption {
  margin-top: var(--ms-space-1);
  color: var(--ms-text-muted);
  font-size: 14px;
  line-height: 22px;
}

.ms-hero-figure.has-frame {
  padding: var(--ms-space-1);
  border: 1px solid var(--ms-border);
}

/* Доступное скрытие */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Якорь под липкой шапкой: заголовки, на которые ведёт .ms-toc. */
.ms-anchor,
[data-ms-anchor] {
  scroll-margin-top: var(--ms-sticky-offset);
}

/*----------------------------------------------------------------------------
  13. prefers-reduced-motion
----------------------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  .ms-atlas__marker.is-active::before {
    animation: none;
    opacity: 0.55;
  }

  .ms-atlas__marker,
  .ms-atlas__marker[data-label]::after,
  .ms-lang__btn,
  .ms-lang__menu,
  .ms-lang__caret,
  .ms-lang__menu a,
  .ms-lang__menu button,
  .ms-toc__list a,
  .ms-zone,
  .ms-muscle-card,
  .rs-anatomy-figure__media img,
  .rs-anatomy-figure__muscles li,
  .ms-table tbody tr {
    transition: none;
  }
}

/*----------------------------------------------------------------------------
  14. Печать
----------------------------------------------------------------------------*/
@media print {
  .rs-header-area,
  .rs-header-top,
  .rs-header-inner,
  .rs-sticky-header,
  .offcanvas-area,
  .body__overlay,
  .rs-footer-area,
  .rs-back-to-top-wrapper,
  .back-to-top-wrapper,
  .ms-lang,
  .ms-atlas__marker,
  .ms-demo-note {
    display: none;
  }

  .ms-toc {
    position: static;
    max-height: none;
    overflow: visible;
    border-color: #000000;
  }

  .ms-atlas {
    display: block;
  }

  .ms-atlas.is-ready .ms-atlas__card,
  .ms-atlas .ms-atlas__card {
    display: block;
    page-break-inside: avoid;
    border-color: #000000;
    background-color: transparent;
  }

  .ms-atlas__stage {
    border-color: #000000;
    background-color: transparent;
  }

  .ms-callout,
  .ms-takeaways,
  .ms-checklist__col,
  .ms-safety__col,
  .ms-muscle-card,
  .ms-compare__col,
  .ms-table-scroll {
    border-color: #000000;
    background-color: transparent;
    page-break-inside: avoid;
  }

  .ms-table-scroll {
    overflow: visible;
  }

  .ms-table thead th {
    background-color: transparent;
    border-bottom: 1px solid #000000;
    color: #000000;
  }

  .ms-table th,
  .ms-table td,
  .ms-table tbody tr:nth-child(even) {
    background-color: transparent;
    border-color: #000000;
  }

  .rs-anatomy-figure,
  .rs-anatomy-figure__media,
  .ms-hero-figure {
    page-break-inside: avoid;
    border-color: #000000;
  }

  .ms-callout,
  .ms-callout p,
  .ms-callout__title,
  .ms-checklist__col,
  .ms-checklist__col ul li,
  .ms-checklist__title,
  .ms-safety__col,
  .ms-safety__col ul li,
  .ms-zones,
  .ms-zone,
  .ms-zone__name,
  .ms-zone__meta,
  .ms-muscle-card,
  .ms-muscle-card p,
  .ms-muscle-card__meta,
  .ms-takeaways,
  .ms-takeaways ul li,
  .ms-atlas__card,
  .ms-atlas__card p,
  .ms-atlas__list li,
  .ms-stat,
  .ms-stat__value,
  .ms-stat__label,
  .ms-table,
  .ms-toc,
  .rs-anatomy-figure,
  .rs-anatomy-figure__caption,
  .rs-anatomy-figure__caption p,
  .rs-anatomy-figure__eyebrow,
  .rs-anatomy-figure__muscles li {
    color: #000000;
  }
}

/*----------------------------------------------------------------------------
  15. Дополнения основного разработчика (после агентской сборки)
      15a. Шрифтовой стек: латиница — Space Grotesk (шрифт шаблона),
           кириллица — Manrope (в Space Grotesk её нет), оба локальные.
----------------------------------------------------------------------------*/
:root {
  --rs-ff-body: "Space Grotesk", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rs-ff-title: "Space Grotesk", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rs-ff-p: "Space Grotesk", "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/*      15b. Заголовки и меню без capitalize — в русском и испанском
        «Каждое Слово С Большой» читается как ошибка.
        Специфичность (0,2,0) — ровно как у правил шаблона, но ниже по каскаду. */
[class] h1, [class] h2, [class] h3, [class] h4, [class] h5, [class] h6,
[class] .rs-banner-title, [class] .rs-banner-subtitle,
[class] .rs-section-title, [class] .rs-section-subtitle,
[class] .rs-services-title, [class] .rs-postbox-title, [class] .rs-blog-title,
[class] .rs-pricing-title, [class] .rs-work-step-title, [class] .rs-footer-widget-title,
.main-menu ul li a, [class] .rs-postbox-tag a, [class] .rs-award-name,
[class] .rs-btn, [class] .rs-pricing-btn, [class] .rs-list-item li {
  text-transform: none;
}

/*      15c. Словесный знак вместо логотипа шаблона */
.ms-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ms-accent);
  text-decoration: none;
  line-height: 1.1;
}
.ms-logo__glyph { flex: 0 0 auto; color: currentColor; }
.ms-logo__text {
  display: flex;
  flex-direction: column;
  font-family: var(--rs-ff-title);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.01em;
  color: var(--ms-text-strong);
  text-transform: none;
}
.ms-logo__tagline {
  margin-top: 3px;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ms-text-muted);
}
.ms-logo:hover .ms-logo__text { color: var(--ms-accent); }
.ms-logo--light .ms-logo__text { color: var(--ms-white); }
.ms-logo--light .ms-logo__tagline { color: rgba(255, 255, 255, 0.6); }
.ms-logo--light:hover .ms-logo__text { color: var(--ms-accent-bright); }
@media (max-width: 575px) {
  .ms-logo__text { font-size: 18px; }
  .ms-logo__tagline { display: none; }
}

/*      15d. Единая палитра.
        В main.css часть компонентов (.rs-btn, стрелки слайдера, маркеры списков,
        кнопка видео) оформлена только для has-theme-orange/red/blue/yellow —
        для has-theme-green правил нет, и они «проваливались» в оранжевый.
        Переопределяем сами переменные темы: любой такой фолбэк становится нашим. */
:root {
  --rs-theme-orange: #023B4A;
  --rs-theme-red: #023B4A;
  --rs-theme-blue: #023B4A;
  --rs-theme-light-blue: #0E5C6B;
  --rs-theme-deep-blue: #023B4A;
  --rs-theme-medium-blue: #0E5C6B;
  --rs-theme-yellow: #00CAA4;
  --rs-theme-medium-yellow: #00CAA4;
  --rs-theme-cyan: #00CAA4;
  --rs-theme-bright-green: #00CAA4;
  --rs-theme-medium-green: #0E5C6B;
  --rs-theme-light-green: #507A7C;
  /* --rs-theme-green (#023B4A) — наш основной акцент, оставляем как есть.
     --rs-rating-color (звёзды) намеренно не трогаем. */
}

/*      15e. Атлас: колонки уже задаёт сетка шаблона (.row > .col-xl-6),
        собственный grid на корне .ms-atlas только сжимал их вдвое. */
.ms-atlas { display: block; }
.ms-atlas .row { align-items: flex-start; }
@media (min-width: 1200px) {
  .ms-atlas__stage { padding: var(--ms-space-3); }
  .ms-atlas__img { max-height: 780px; }
  .ms-atlas__panel { min-height: 100%; }
}

/*      15f. Контент не должен зависеть от анимаций.
        Текст героя в шаблоне появляется через animation: fadeInUp c
        animation-fill-mode: both — до старта анимации он имеет opacity 0.
        Для поисковых роботов, headless-рендера, режима «меньше движения»
        и просто медленных устройств это означает «заголовка нет».
        Оставляем плавное появление только тем, кто его запрашивал. */
[class*="rs-banner-"] .swiper-slide-active .rs-banner-subtitle,
[class*="rs-banner-"] .swiper-slide-active .rs-banner-title,
[class*="rs-banner-"] .swiper-slide-active .rs-banner-descrip,
[class*="rs-banner-"] .swiper-slide-active .rs-banner-btn-wrapper,
[class*="rs-banner-"] .swiper-slide-active .rs-banner-btn,
[class*="rs-banner-"] .swiper-slide-active .rs-list-item {
  animation: none;
  opacity: 1;
}

/*      15g. Если JavaScript выключен, wow.js не покажет свои блоки —
        страховка, чтобы контент всё равно был виден. */
html:not(.js) .wow {
  visibility: visible;
  animation: none;
  opacity: 1;
}

/*      15h. Посимвольная анимация заголовков (rs-split-text-enable) прячет слова
        до прокрутки. При «меньше движения» и без JS показываем текст сразу. */
html:not(.js) .rs-split-text-enable,
html:not(.js) .rs-split-text-enable * {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .rs-split-text-enable,
  .rs-split-text-enable *,
  .rs-banner-title,
  .rs-banner-descrip {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/*      15i. Кнопки. В шаблоне нет скина .rs-btn.has-theme-green — кнопка с нашей
        темой оставалась без фона. Заодно перекрашиваем «шторку» ховера,
        у которой цвет зашит прямо в main.css (rgb(255,92,0)). */
.rs-btn.has-theme-green {
  background: var(--rs-theme-green);
  color: var(--rs-white);
}
.rs-btn.has-theme-green:hover {
  color: var(--ms-ink);
}
.rs-btn.has-bg::before {
  background-color: var(--ms-accent-bright);
}
.rs-btn.has-bg:hover,
.rs-btn.has-bg:hover span,
.rs-btn.has-theme-green.has-bg:hover {
  color: var(--ms-ink);
}
.rs-btn.has-bg:hover svg path {
  fill: var(--ms-ink);
}
.rs-btn.has-theme-green.white-bg {
  background: var(--rs-white);
  color: var(--ms-accent);
}
.rs-btn.has-theme-green.white-bg:hover {
  background: var(--ms-accent-bright);
  color: var(--ms-ink);
}

/*      15j. wow.js прячет блоки инлайновым visibility:hidden и показывает их
        только вместе с анимацией. При «меньше движения» это означает пустые
        экраны — перекрываем инлайн-стиль. */
@media (prefers-reduced-motion: reduce) {
  .wow,
  .animated {
    visibility: visible !important;
    opacity: 1 !important;
    animation: none !important;
  }
}

/*      15k. Тёмные блоки шаблона, внутри которых оказываются наши компоненты.
        Без этого .ms-badge и подписи к иллюстрациям красились «тёмным по тёмному». */
.rs-services-seven .rs-services-item,
.rs-feature-three,
.rs-breadcrumb-one,
.rs-cta-three,
.rs-cta-two,
.rs-footer-two,
.rs-counter-one,
.rs-banner-fifteen .rs-banner-item,
.rs-work-step-three .rs-work-step-item.has-bg,
.rs-testimonial-four .rs-testimonial-item.has-bg {
  --ms-surface: rgba(255, 255, 255, 0.06);
  --ms-surface-soft: rgba(255, 255, 255, 0.08);
  --ms-surface-softer: rgba(255, 255, 255, 0.04);
  --ms-accent: #00CAA4;
  --ms-text: rgba(255, 255, 255, 0.78);
  --ms-text-strong: #FFFFFF;
  --ms-text-muted: rgba(255, 255, 255, 0.6);
  --ms-eyebrow: #00CAA4;
  --ms-border: rgba(255, 255, 255, 0.22);
  --ms-border-soft: rgba(255, 255, 255, 0.12);
  --ms-border-strong: rgba(255, 255, 255, 0.36);
  --ms-marker-bg: rgba(13, 42, 60, 0.86);
}

/*      15l. Блок услуг rs-services-seven в шаблоне стоит на тёмной подложке,
        поэтому его заголовок белый. У нас секция светлая — возвращаем цвет. */
.rs-services-seven:not(.black-bg):not(.has-bg-black):not(.rs-bg-dark-blue) .rs-section-title,
.rs-services-seven:not(.black-bg):not(.has-bg-black):not(.rs-bg-dark-blue) .rs-section-title-wrapper .descrip {
  color: var(--rs-title-primary);
}
.rs-services-seven:not(.black-bg):not(.has-bg-black):not(.rs-bg-dark-blue) .rs-section-title-wrapper .descrip {
  color: var(--rs-text-primary);
}

/*      15m. Нативные поля даты и времени не растягиваются по ширине сами —
        из-за этого строка формы выглядела «рваной». */
form input[type="date"],
form input[type="time"] {
  width: 100%;
}

/*      15n. Шапка на ноутбучных ширинах.
        В шаблоне пункт меню имеет отступы 20px по бокам и кегль 18px — с восемью
        пунктами и нашим переключателем языков строка становилась шире экрана
        (страница уезжала вбок на 50-70px). Ужимаем пункты, а не прячем их. */
.rs-header-four .rs-header-inner { min-width: 0; }
.rs-header-four .rs-header-menu { min-width: 0; }
.rs-header-area { overflow-x: clip; overflow-y: visible; }

@media (min-width: 1200px) and (max-width: 1799px) {
  .rs-header-four .main-menu ul li > a { padding-inline: 13px; font-size: 16px; }
  .rs-header-four .main-menu ul li ul li > a { padding-inline: 20px; font-size: 15px; }
  .rs-header-four .rs-header-inner { gap: 6px; }
}
@media (min-width: 1200px) and (max-width: 1439px) {
  .rs-header-four .main-menu ul li > a { padding-inline: 9px; font-size: 15px; }
  .ms-lang--header .ms-lang__btn { padding-inline: 8px; }
}
@media (min-width: 1200px) and (max-width: 1279px) {
  .rs-header-four .main-menu ul li > a { padding-inline: 7px; font-size: 14px; }
}

/*      15o. Страховка от горизонтальной прокрутки: на 1200px иконки соцсетей в
        верхней строке выступали на 5px и страница ездила вбок. overflow-x: clip
        (в отличие от hidden) не создаёт контейнер прокрутки и не ломает sticky. */
html { overflow-x: clip; }
@media (min-width: 1200px) and (max-width: 1319px) {
  .rs-header-top .rs-theme-social a { margin-inline-start: 6px; }
}

/*      15p. nice-select: пункты выпадающего списка идут цветом #787878 —
        контраст 4.42 на белом, чуть ниже порога WCAG AA. */
.nice-select .list .option,
.nice-select .list .option.selected { color: var(--rs-text-primary); }
.nice-select .list .option:hover,
.nice-select .list .option.focus { color: var(--ms-accent); }

/*      15q. Мобильная панель связи и ссылка «к содержанию».
        Выездной массаж читают с телефона: звонок, мессенджер и запись должны
        быть в одно касание, не пролистывая страницу до футера. */
.ms-callbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 99;
  display: none;
  background-color: var(--ms-ink);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 -6px 24px rgba(13, 42, 60, 0.28);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.ms-callbar__item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 58px;
  padding: 8px 4px;
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--rs-ff-title);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: var(--ms-transition);
}
.ms-callbar__item i { font-size: 20px; line-height: 1; }
.ms-callbar__item:hover,
.ms-callbar__item:focus-visible { color: var(--ms-accent-bright); }
.ms-callbar__item--cta {
  background-color: var(--ms-accent-bright);
  color: var(--ms-ink);
  font-weight: var(--rs-fw-sbold);
}
.ms-callbar__item--cta:hover,
.ms-callbar__item--cta:focus-visible { color: var(--ms-ink); background-color: #00b694; }

@media (max-width: 767px) {
  .ms-callbar { display: flex; }
  body { padding-bottom: 58px; }
  .backtotop-wrap { bottom: 76px; }
}

.ms-skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 1000;
  padding: 12px 20px;
  background-color: var(--ms-accent);
  color: var(--ms-white);
  text-decoration: none;
}
.ms-skip:focus {
  inset-inline-start: 0;
  color: var(--ms-white);
}

@media print {
  .ms-callbar, .ms-skip { display: none !important; }
}

/*      15r. Чипы мышц в карточках зоны: рендерер отдаёт <li>, а разделитель в §9
        был написан под <span> — из-за этого вместо точки-разделителя показывались
        маркеры списка и налезали на соседний пункт. */
.ms-muscle-card__meta {
  padding-inline-start: 0;
  list-style: none;
}
.ms-muscle-card__meta li {
  display: inline;
  list-style: none;
}
.ms-muscle-card__meta li:not(:last-child)::after {
  content: "·";
  margin-inline-start: var(--ms-space-1);
  color: var(--ms-border-strong);
}

/*      15s. Шаги сеанса. В шаблоне у каждой строки своя сетка `auto auto auto`,
        поэтому колонка описаний «прыгала» от шага к шагу. Задаём общие колонки. */
@media (min-width: 992px) {
  .rs-work-step-two .rs-work-step-item {
    grid-template-columns: 54px minmax(0, 300px) minmax(0, 1fr);
    gap: 36px;
  }
}
@media (min-width: 576px) and (max-width: 991px) {
  .rs-work-step-two .rs-work-step-item {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 8px 24px;
    align-items: start;
  }
  .rs-work-step-two .rs-work-step-item .rs-work-step-number { grid-row: span 2; }
  .rs-work-step-two .rs-work-step-item .rs-work-step-descrip { grid-column: 2; }
}

/*      15t. Русские страницы — одна гарнитура. Латиница в русском тексте
        (deep tissue, m. trapezius) раньше набиралась Space Grotesk, а кириллица —
        Manrope, и в одном заголовке соседствовали два разных рисунка букв.
        В Manrope есть латиница, поэтому на ru ставим её первой. */
html[lang="ru"] {
  --rs-ff-body: "Manrope", "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rs-ff-title: "Manrope", "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rs-ff-p: "Manrope", "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gx-font: "Manrope", "Space Grotesk", system-ui, sans-serif;
}

/*      15u. Мета-строка статьи (рубрика · дата · время · автор) в шапке — flex без
        переноса: на 375 px последние пункты выходили за экран. Разрешаем перенос.
        Разделитель шаблона — li::before с position:absolute справа от пункта; у пункта,
        который после переноса стал последним в строке, он торчал за край на 20 px
        и давал прокрутку вбок. Обрезаем по границе списка: внутренние разделители
        лежат внутри него и остаются. */
.rs-breadcrumb-one .rs-breadcrumb-menu ul {
  flex-wrap: wrap;
  row-gap: 6px;
  overflow: hidden;
}

/*      15v. Пункты меню — в одну строку. С ужатыми в 15n полями двухсловные пункты
        («Deep tissue», «О мастере», «A domicilio») на 1440-1920 px переносились
        на вторую строку. Запрещаем перенос, а место берём не у пунктов, а у пустых
        полей вокруг: правый блок (язык + бургер) держал по 35 px с каждой стороны,
        перед меню стояло 30 + 30-50 px. Проверено на ru/en/es от 1200 до 2560 px:
        без переноса и без наезда на переключатель языка. Стык диапазонов — 1799.98,
        иначе на дробной ширине 1799.x не действовало ни одно из правил. */
.rs-header-four .main-menu > ul > li > a { white-space: nowrap; }
@media (min-width: 1200px) and (max-width: 1799.98px) {
  .rs-header-four .rs-header-right { padding-inline: 20px; gap: 20px; }
  .rs-header-four .main-menu { padding-left: 16px; margin-left: 16px; }
}
@media (min-width: 1800px) {
  .rs-header-four .main-menu { padding-left: 20px; margin-left: 24px; }
  .rs-header-four .rs-header-right { gap: 20px; }
}