/* =========================================================================
 * Страницы разделов каталога
 *
 * Отдельный файл, подключается только на шести шаблонах template-*.php
 * (см. inc/enqueue.php). Загружается после common.css, поэтому при равной
 * специфичности побеждают правила отсюда.
 *
 * Все блоки построены на одном ритме: надзаголовок, заголовок, лид,
 * содержимое. Именно он и делает страницу цельной, поэтому оформление
 * шапки описано один раз в .os-head и переиспользуется везде.
 *
 * Палитра взята из темы, новых цветов не вводится.
 * ====================================================================== */

:root {
  --os-accent: #ff7500;
  --os-accent-new: #ffdfaf;
  --os-accent-dark: #e06200;
  --os-accent-soft: rgba(255, 117, 0, 0.09);
  --os-ink: #2f3844;
  --os-ink-soft: #707984;
  --os-muted: #939eaa;
  --os-line: #fff0e7;
  --os-line-cool: #e8ecf1;
  --os-warm: #fff7f1;
  --os-dark: #0d1928;
  --os-radius: 16px;
}


/* -------------------------------------------------------------------------
 * Шапка блока
 * ---------------------------------------------------------------------- */

.os-head {
  margin: 0 0 32px;
}

.os-head_center {
  text-align: center;
}

.os-head_center .os-head__lead {
  margin-left: auto;
  margin-right: auto;
}

.os-head__eyebrow {
  margin: 0 0 10px;
  color: var(--os-accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
}

.os-head__title {
  margin: 0;
  color: var(--os-ink);
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
  text-wrap: balance;
}

.os-head__lead {
  max-width: 760px;
  margin: 12px 0 0;
  color: var(--os-ink-soft);
  font-size: 15px;
  font-weight: 400;
  line-height: 26px;
}

.os-head__lead_solo {
  margin: -20px 0 28px;
}


/* -------------------------------------------------------------------------
 * Кнопки
 *
 * Своя система, а не .btn из common.css: тот класс переопределён в теме
 * дважды и тянет за собой чужие отступы.
 * ---------------------------------------------------------------------- */

.os-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 30px;
  border: 1.5px solid transparent;
  border-radius: 56px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.os-btn_primary {
  background: var(--os-accent);
  border-color: var(--os-accent);
  color: #fff;
  box-shadow: 0 4px 16px rgba(255, 117, 0, 0.24);
}

.os-btn_primary:hover {
  background: var(--os-accent-dark);
  border-color: var(--os-accent-dark);
  color: #fff;
  box-shadow: 0 6px 22px rgba(255, 117, 0, 0.34);
  transform: translateY(-1px);
}

.os-btn_outline {
  background: transparent;
  border-color: var(--os-accent);
  color: var(--os-accent);
}

.os-btn_outline:hover {
  background: var(--os-accent);
  color: #fff;
  transform: translateY(-1px);
}


/* -------------------------------------------------------------------------
 * Первый экран
 * ---------------------------------------------------------------------- */

.os-hero {
  position: relative;
  margin: 0 0 72px;
  padding: 40px 0 56px;
  background: linear-gradient(180deg, var(--os-warm) 0%, rgba(255, 247, 241, 0.35) 100%);
}

/* Колонки в долях, а не фиксированные. Жёсткие 380px справа сжимали
   плашку до двух узких колонок и оставляли слева избыток пустоты. */
.os-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 48px;
  align-items: start;
}

.os-hero__grid_single {
  grid-template-columns: minmax(0, 1fr);
}

/* Колонка с текстом. min-width нужен явно: длинное слово в заголовке
   иначе распирает грид-ячейку и ломает вторую колонку. */
.os-hero__main {
  min-width: 0;
}

.os-hero__eyebrow {
  display: inline-block;
  margin: 0 0 16px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 117, 0, 0.28);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--os-accent);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
}

.os-hero__title {
  margin: 0 0 20px;
  color: var(--os-ink);
  font-size: 44px;
  font-weight: 700;
  line-height: 52px;
  text-wrap: balance;
}

.os-hero__text {
  max-width: 620px;
  margin: 0 0 24px;
  color: var(--os-ink);
  font-size: 16px;
  line-height: 26px;
}

.os-hero__text p {
  margin: 0 0 14px;
}

.os-hero__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.os-hero__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--os-ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
}

.os-hero__list li:before {
  content: "";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: url(../images/section1-arrow.svg) no-repeat center / contain;
}

.os-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.os-hero__aside {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.os-hero__media {
  text-align: center;
}

.os-hero__img {
  max-width: 100%;
  height: auto !important;
}

/* Картинку осаживаем всегда: под ней стоят плашка и переключатель,
   и в полный рост первый экран уезжал бы на два с половиной экрана. */
.os-hero__media {
  overflow: hidden;
}

.os-hero__img {
  max-height: max-content;
  width: auto;
  object-fit: cover;
}

.home .os-hero__img, 
.page-template-template-rabochie-professii .os-hero__img, 
.page-template-template-professionalnaya-perepodgotovka .os-hero__img,
.page-template-template-povyshenie-kvalifikacii .os-hero__img,
.page-template-template-akkreditaciya-specialistov .os-hero__img,
.page-template-template-attestaciya .os-hero__img,
.page-template-template-obuchenie-medpersonala .os-hero__img {
  max-height: 300px;
}

/* Контакты и отзывы: под картинкой плашка гарантий, без переключателя формата —
   в полный рост колонка выше формы слева. */
.os-page-contacts .os-hero__img,
.os-page-reviews .os-hero__img {
  max-height: 400px;
}

.os-hero__form {
  max-width: 560px;
  padding: 26px 26px 24px;
  border: 1px solid var(--os-accent-new);
  border-radius: 20px;
  background: var(--os-accent-new);
  box-shadow: 0 12px 40px rgba(47, 56, 68, 0.08);
}

.os-hero__form .os-hero__eyebrow {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--os-accent-dark);
}

.os-hero__form-title {
  margin: 0 0 8px;
  color: var(--os-ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
}

.os-hero__form-text {
  margin: 0 0 20px !important;
  color: var(--os-ink-soft);
  font-size: 13.5px;
  line-height: 20px;
}

.os-hero__form input[type="text"],
.os-hero__form input[type="tel"],
.os-hero__form input[type="email"],
.os-hero__form select,
.os-hero__form textarea {
  width: 100%;
  margin: 0;
  padding: 0 20px;
  height: 52px;
  border: 1px solid var(--os-line-cool);
  border-radius: 52px;
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  color: var(--os-ink);
}

.os-hero__form textarea {
  height: 96px;
  padding: 16px 20px;
  border-radius: 16px;
  resize: none;
}

.os-hero__form input:focus,
.os-hero__form select:focus,
.os-hero__form textarea:focus {
  border-color: var(--os-accent);
  box-shadow: 0 0 0 3px rgba(255, 117, 0, 0.12);
}


/* -------------------------------------------------------------------------
 * Направления раздела
 * ---------------------------------------------------------------------- */

.os-cats {
  margin: 0 0 72px;
  scroll-margin-top: 120px;
}

/* Поиск и чипы — разными строками. В одну строку чипы сжимались
   до нечитаемого и переносились посреди набора. */
.os-cats__controls {
  display: grid;
  gap: 14px;
  margin: 0 0 28px;
}

.os-cats__search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 48px;
  padding: 0 20px;
  border: 1.5px solid var(--os-line-cool);
  border-radius: 48px;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.os-cats__search:focus-within {
  border-color: var(--os-accent);
  box-shadow: 0 0 0 3px rgba(255, 117, 0, 0.1);
}

.os-cats__search svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--os-muted);
  transition: color 0.2s;
}

.os-cats__search:focus-within svg {
  color: var(--os-accent);
}

.os-cats__search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--os-ink);
}

.os-cats__search input::placeholder {
  color: var(--os-muted);
}

.os-cats__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.os-cats__chip {
  padding: 9px 16px;
  border: 1px solid var(--os-line-cool);
  border-radius: 40px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--os-ink-soft);
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.os-cats__chip:hover {
  border-color: var(--os-accent);
  color: var(--os-accent);
}

.os-cats__chip.is-active {
  background: var(--os-accent);
  border-color: var(--os-accent);
  color: #fff;
  cursor: default;
}

/* КРИТИЧНО. У карточек и кнопки задан display в CSS, а авторское
   правило сильнее браузерного [hidden] { display: none }. Без этой
   строки скрипт исправно проставлял hidden, а на экране не менялось
   ничего — именно так «не работал» фильтр по сферам. */
.os-cats [hidden] {
  display: none !important;
}

.os-cats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.os-cats__item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--os-line);
  border-radius: 14px;
  background: #fff;
  color: var(--os-ink);
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.18s;
}

.os-cats__item:hover {
  border-color: var(--os-accent);
  box-shadow: 0 8px 24px rgba(47, 56, 68, 0.09);
  transform: translateY(-2px);
}

.os-cats__photo {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--os-warm);
}

.os-cats__photo img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

.os-cats__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  padding: 18px 20px;
}

.os-cats__name {
  color: var(--os-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 21px;
  transition: color 0.2s;
}

.os-cats__item:hover .os-cats__name {
  color: var(--os-accent);
}

.os-cats__count {
  margin-top: auto;
  color: var(--os-muted);
  font-size: 12.5px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.os-cats__empty {
  margin: 24px 0 0 !important;
  color: var(--os-ink-soft);
  font-size: 15px;
}

.os-cats__more-wrap {
  display: flex;
  justify-content: center;
  margin: 28px 0 0;
}


/* -------------------------------------------------------------------------
 * Программы раздела
 *
 * Сетка и карточки достаются от .section-11 из common.css — здесь только
 * шапка блока и кнопка под списком.
 * ---------------------------------------------------------------------- */

.os-programs {
  margin: 0 0 72px;
  scroll-margin-top: 120px;
}

.os-programs .flex {
  justify-content: flex-start;
}

.os-programs__more {
  display: flex;
  justify-content: center;
  margin: 12px 0 0;
}

.os-programs__total {
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--os-accent-soft);
  color: var(--os-accent);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.os-programs__more .os-btn_outline:hover .os-programs__total {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}


/* -------------------------------------------------------------------------
 * SEO-блок
 * ---------------------------------------------------------------------- */

.os-seo {
  margin: 0 0 72px;
}

.os-seo__title {
  max-width: 900px;
  margin: 0 0 20px;
  color: var(--os-ink);
  font-size: 32px;
  font-weight: 700;
  line-height: 42px;
  text-wrap: balance;
}

.os-seo__body {
  color: var(--os-ink);
  font-size: 16px;
  line-height: 28px;
}

.os-seo__body h2,
.os-seo__body h3,
.os-seo__body h4 {
  margin: 32px 0 12px;
  color: var(--os-ink);
  font-size: 22px;
  font-weight: 700;
  line-height: 30px;
}

.os-seo__body h3 {
  font-size: 19px;
  line-height: 27px;
}

.os-seo__body p {
  margin: 0 0 16px;
}

.os-seo__body ul,
.os-seo__body ol {
  margin: 0 0 16px;
  padding-left: 22px;
}

.os-seo__body li {
  margin: 0 0 8px;
}

.os-seo__body li::marker {
  color: var(--os-accent);
}

.os-seo__body a {
  color: var(--os-accent);
  text-decoration: underline;
}

.os-seo__body table {
  width: 100%;
  border-collapse: collapse;
}

.os-seo__body td,
.os-seo__body th {
  padding: 10px 14px;
  border: 1px solid var(--os-line-cool);
  text-align: left;
}


/* -------------------------------------------------------------------------
 * Документы
 * ---------------------------------------------------------------------- */

.os-docs {
  margin: 0 0 72px;
  scroll-margin-top: 120px;
}

.os-docs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.os-docs__grid > .os-doc {
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
}

.os-docs__grid:has(> .os-doc:only-child) {
  grid-template-columns: minmax(0, 400px);
  max-width: 400px;
}

.os-docs__grid:has(> .os-doc:nth-child(2):last-child) {
  max-width: 820px;
}

.os-doc {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.os-doc:hover {
  border-color: rgba(255, 117, 0, 0.4);
  box-shadow: 0 10px 30px rgba(47, 56, 68, 0.08);
}

.os-doc__photo {
  position: relative;
  display: block;
  max-height: 560px;
  overflow: hidden;
  background: var(--os-warm);
}

.os-doc__photo img {
  width: 100%;
  height: 100% !important;
  object-fit: contain;
  object-position: top center;
  transition: transform 0.4s;
}

.os-doc:hover .os-doc__photo img {
  transform: scale(1.04);
}

.os-doc__zoom {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 9px 12px;
  border-radius: 30px;
  background: rgba(13, 25, 40, 0.82);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s, transform 0.25s;
}

.os-doc:hover .os-doc__zoom {
  opacity: 1;
  transform: translateY(0);
}

.os-doc__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: 22px;
}

.os-doc_flat .os-doc__body {
  justify-content: center;
}

.os-doc_flat .os-doc__text {
  flex: 0 1 auto;
}

.os-doc__kind {
  color: var(--os-accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.os-doc__name {
  margin: 0;
  color: var(--os-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
}

.os-doc__text {
  margin: 0 !important;
  flex: 1;
  color: var(--os-ink-soft);
  font-size: 13.5px;
  line-height: 21px;
}

.os-doc__mark {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 7px;
  margin-top: 4px;
  padding: 7px 12px;
  border-radius: 30px;
  background: var(--os-accent-soft);
  color: var(--os-accent);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.os-doc__mark svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
}

/* Превью образца в рамке одной пропорции (sections/documents.php):
   сканы разной формы — книжка, лист, разворот — встают ровным рядом
   и видны целиком. */
.os-doc__photo_frame {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: 24px;
}

.os-doc__photo_frame img {
  width: auto;
  max-width: 100%;
  height: auto !important;
  max-height: 100%;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(47, 56, 68, 0.12);
  object-position: center;
}

.os-docs_samples .os-doc__name a {
  color: inherit;
}

/* На тач-экранах наведения нет — подсказка видна сразу. */
@media (hover: none) {
  .os-docs_samples .os-doc__zoom {
    opacity: 1;
    transform: none;
  }
}


/* -------------------------------------------------------------------------
 * Лицензия и сертификаты
 * ---------------------------------------------------------------------- */

.os-lic {
  margin: 0 0 72px;
}

.os-lic__layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.os-lic__points {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 24px 26px;
  list-style: none;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: var(--os-warm);
}

.os-lic__point {
  position: relative;
  padding: 14px 0 14px 30px;
  border-bottom: 1px solid rgba(255, 117, 0, 0.16);
}

.os-lic__point:first-child {
  padding-top: 0;
}

.os-lic__point:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.os-lic__point:before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--os-accent) url(../images/check.svg) no-repeat center / 14px 14px;
}

.os-lic__point:first-child:before {
  top: 4px;
}

.os-lic__point-name {
  display: block;
  color: var(--os-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}

.os-lic__point-text {
  display: block;
  margin-top: 4px;
  color: var(--os-ink-soft);
  font-size: 13.5px;
  line-height: 20px;
}

/* Сетка с одинаковым соотношением сторон. Документы приходят
   разного формата, и без неё правая половина блока пустовала. */
/* По два документа в ряд: так на скане читается и печать, и текст.
   Колонка тезисов при этом короче галереи, поэтому липнет к экрану
   и остаётся на виду, пока листаешь документы. */
.os-lic__gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 18px;
}

.os-lic__figure {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.os-lic__item {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--os-line);
  border-radius: 12px;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.os-lic__item:hover {
  border-color: var(--os-accent);
  box-shadow: 0 8px 24px rgba(47, 56, 68, 0.1);
}

.os-lic__item img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.4s;
}

.os-lic__item:hover img {
  transform: scale(1.04);
}

.os-lic__zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  padding: 7px 10px;
  border-radius: 24px;
  background: rgba(13, 25, 40, 0.82);
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s, transform 0.25s;
}

.os-lic__item:hover .os-lic__zoom {
  opacity: 1;
  transform: translateY(0);
}

.os-lic__caption {
  margin: 0;
  color: var(--os-ink-soft);
  font-size: 12px;
  line-height: 17px;
  text-align: center;
}


/* -------------------------------------------------------------------------
 * Преимущества
 * ---------------------------------------------------------------------- */

.os-adv {
  margin: 0 0 72px;
}

/* Четыре в ряд, как section-4 на главной, а не auto-fit: при восьми
   пунктах auto-fit давал то четыре колонки, то пять, и сетка «дышала»
   при каждом изменении ширины. */
.os-adv__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

/* Геометрия карточки повторяет .section-4 с главной: иконка сверху,
   под ней название и текст, одинаковая высота у всего ряда. */
.os-adv__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-height: 240px;
  padding: 32px;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.18s;
}

.os-adv__item:hover {
  border-color: rgba(255, 117, 0, 0.4);
  box-shadow: 0 10px 28px rgba(47, 56, 68, 0.08);
  transform: translateY(-2px);
}

.os-adv__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 0 8px;
  color: var(--os-accent);
}

.os-adv__icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.4;
}

.os-adv__icon img {
  width: 100%;
  height: 100% !important;
  object-fit: contain;
}

.os-adv__name {
  /* Сразу под иконкой: с margin-top: auto название прижималось к тексту
     внизу и в ряду стояло на разной высоте (тексты разной длины). */
  margin: 0;
  color: var(--os-ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 26px;
}

.os-adv__text {
  margin: 0 !important;
  color: var(--os-ink-soft);
  font-size: 13.5px;
  line-height: 21px;
}


/* -------------------------------------------------------------------------
 * Вопросы и ответы
 * ---------------------------------------------------------------------- */

.os-faq {
  margin: 0 0 72px;
  scroll-margin-top: 120px;
}

.os-faq__list {
  border-top: 1px solid var(--os-line-cool);
}

.os-faq__item {
  border-bottom: 1px solid var(--os-line-cool);
}

.os-faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  color: var(--os-ink);
  font-size: 16.5px;
  font-weight: 600;
  line-height: 25px;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s;
}

/* Убираем штатный треугольник — вместо него свой знак справа. */
.os-faq__q::-webkit-details-marker {
  display: none;
}

.os-faq__q:hover,
.os-faq__item[open] .os-faq__q {
  color: var(--os-accent);
}

.os-faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--os-accent-soft);
  transition: background 0.2s, transform 0.25s;
}

.os-faq__icon:before,
.os-faq__icon:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: var(--os-accent);
  transform: translate(-50%, -50%);
  transition: opacity 0.2s, transform 0.25s;
}

.os-faq__icon:after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.os-faq__item[open] .os-faq__icon:after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
}

.os-faq__a {
  padding: 0 56px 24px 0;
  color: var(--os-ink-soft);
  font-size: 15px;
  line-height: 25px;
}

.os-faq__a p {
  margin: 0 0 12px;
}

.os-faq__a a {
  color: var(--os-accent);
  text-decoration: underline;
}


/* -------------------------------------------------------------------------
 * Блок с заявкой
 * ---------------------------------------------------------------------- */

.os-cta {
  margin: 0 0 72px;
  scroll-margin-top: 120px;
}

.os-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 48px;
  border-radius: 24px;
}

.os-cta__inner_form {
  align-items: start;
}

.os-cta__main {
  flex: 1 1 420px;
  min-width: 0;
}

.os-cta__title {
  margin: 0 0 12px;
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  text-wrap: balance;
}

.os-cta__text {
  max-width: 620px;
  margin: 0 !important;
  font-size: 15px;
  line-height: 25px;
}

.os-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px 0 0;
}

.os-cta__form {
  flex: 0 1 420px;
  width: 100%;
  padding: 26px;
  border-radius: 18px;
  background: #fff;
}

.os-cta__form input[type="text"],
.os-cta__form input[type="tel"],
.os-cta__form input[type="email"],
.os-cta__form select,
.os-cta__form textarea {
  width: 100%;
  margin: 0 0 12px;
  padding: 0 20px;
  height: 52px;
  border: 1px solid var(--os-line-cool);
  border-radius: 52px;
  background: #fff;
  font-family: inherit;
  font-size: 15px;
}

/* Тёмный вариант */
.os-cta_dark .os-cta__inner {
  background: var(--os-dark);
  color: #fff;
}

.os-cta_dark .os-cta__title {
  color: #fff;
}

.os-cta_dark .os-cta__text {
  color: rgba(255, 255, 255, 0.72);
}

.os-cta_dark .os-btn_outline {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.os-cta_dark .os-btn_outline:hover {
  background: #fff;
  border-color: #fff;
  color: var(--os-ink);
}

/* Оранжевый вариант */
.os-cta_orange .os-cta__inner {
  background: linear-gradient(135deg, var(--os-accent) 0%, #ff9a2e 100%);
  color: #fff;
}

.os-cta_orange .os-cta__title {
  color: #fff;
}

.os-cta_orange .os-cta__text {
  color: rgba(255, 255, 255, 0.9);
}

.os-cta_orange .os-btn_primary {
  background: #fff;
  border-color: #fff;
  color: var(--os-accent-dark);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
}

.os-cta_orange .os-btn_primary:hover {
  background: var(--os-warm);
  border-color: var(--os-warm);
  color: var(--os-accent-dark);
}

.os-cta_orange .os-btn_outline {
  border-color: rgba(255, 255, 255, 0.65);
  color: #fff;
}

.os-cta_orange .os-btn_outline:hover {
  background: #fff;
  border-color: #fff;
  color: var(--os-accent-dark);
}

/* Светлый вариант */
.os-cta_light .os-cta__inner {
  border: 1px solid var(--os-line);
  background: var(--os-warm);
  color: var(--os-ink);
}

.os-cta_light .os-cta__title {
  color: var(--os-ink);
}

.os-cta_light .os-cta__text {
  color: var(--os-ink-soft);
}


/* =========================================================================
 * Адаптив
 * ====================================================================== */

@media (max-width: 1150px) {
  .os-hero__grid {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 36px;
  }

  .os-hero__title {
    font-size: 36px;
    line-height: 44px;
  }

  /* Четыре колонки на планшете не помещаются: карточка становится уже
     двухсот пикселей, и заголовок «Образовательная лицензия» рвётся
     на три строки.

     ПРАВИЛО ДОЛЖНО ЖИТЬ ИМЕННО ЗДЕСЬ. Раньше оно стояло в конце файла,
     в отдельном блоке «Адаптив переработанных блоков», — то есть ПОСЛЕ
     запроса на 560 пикселей, который переводит сетку в одну колонку.
     На телефоне подходят оба запроса, вес у них одинаковый, и побеждал
     тот, что ниже по файлу: на экране в 360 пикселей оставались две
     колонки по 160, с рваными заголовками и текстом в два слова
     в строке. */
  .os-adv__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .os-lic__layout {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 28px;
  }

  .os-cta__inner {
    padding: 40px;
  }
}

@media (max-width: 900px) {
  .os-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .os-hero__aside {
    max-width: 480px;
  }

  .os-lic__layout {
    grid-template-columns: minmax(0, 1fr);
  }

}

@media (max-width: 780px) {
  .os-head {
    margin-bottom: 24px;
  }

  .os-head__title {
    font-size: 26px;
    line-height: 34px;
  }

  .os-head__lead {
    font-size: 14.5px;
    line-height: 24px;
  }

  .os-hero {
    margin-bottom: 48px;
    padding: 24px 0 40px;
  }

  .os-hero__title {
    font-size: 27px;
    line-height: 35px;
  }

  .os-hero__text {
    font-size: 15px;
    line-height: 24px;
  }

  .os-hero__actions .os-btn,
  .os-cta__actions .os-btn {
    flex: 1 1 100%;
  }

  .os-hero__form {
    padding: 22px 18px;
  }

  .os-cats,
  .os-programs,
  .os-seo,
  .os-docs,
  .os-lic,
  .os-adv,
  .os-faq,
  .os-cta {
    margin-bottom: 48px;
  }

  .os-cats__grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
  }

  .os-cats__body {
    padding: 14px 15px;
  }

  .os-cats__name {
    font-size: 14px;
    line-height: 19px;
  }

  .os-seo__title {
    font-size: 24px;
    line-height: 32px;
  }

  .os-seo__body {
    font-size: 15px;
    line-height: 26px;
  }

  .os-docs__grid,
  .os-adv__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .os-adv__item {
    min-height: 0;
    padding: 24px 20px;
  }

  .os-adv__name {
    font-size: 17px;
    line-height: 24px;
  }

  .os-faq__q {
    gap: 14px;
    padding: 18px 0;
    font-size: 15.5px;
    line-height: 23px;
  }

  .os-faq__a {
    padding-right: 0;
    font-size: 14.5px;
    line-height: 24px;
  }

  .os-cta__inner {
    padding: 28px 20px;
    border-radius: 18px;
  }

  .os-cta__title {
    font-size: 24px;
    line-height: 32px;
  }

  .os-cta__form {
    padding: 20px 16px;
  }
}

@media (max-width: 560px) {
  .os-cats__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .os-docs__grid,
  .os-adv__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .os-lic__points {
    padding: 20px;
  }
}


/* -------------------------------------------------------------------------
 * Отзывы
 *
 * Два состояния: карточки с текстом (если внесены) и лента сканов.
 * Оба могут быть на странице одновременно.
 * ---------------------------------------------------------------------- */

.os-reviews {
  margin: 0 0 72px;
  scroll-margin-top: 120px;
}

.os-reviews__scan {
  display: block;
  overflow: hidden;
  border: 1px solid var(--os-line);
  border-radius: 12px;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.os-reviews__scan:hover {
  border-color: var(--os-accent);
  box-shadow: 0 8px 24px rgba(47, 56, 68, 0.1);
}

.os-reviews__scan img {
  display: block;
  width: 100%;
}


/* -------------------------------------------------------------------------
 * Нам доверяют
 *
 * Сетка, а не карусель: логотипов немного, и прятать их за стрелками
 * означало бы терять единственное B2B-доказательство на странице.
 * ---------------------------------------------------------------------- */

.os-clients {
  margin: 0 0 72px;
}

.os-clients__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}

.os-clients__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 104px;
  padding: 20px 24px;
  border: 1px solid var(--os-line);
  border-radius: 14px;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.os-clients__item:hover {
  border-color: rgba(255, 117, 0, 0.4);
  box-shadow: 0 8px 22px rgba(47, 56, 68, 0.07);
}

/* Логотипы приходят разной насыщенности и в цвете спорят друг с другом.
   Приглушаем в покое и возвращаем цвет при наведении. */
.os-clients__item img {
  max-width: 100%;
  max-height: 56px !important;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.25s, opacity 0.25s;
}

.os-clients__item:hover img {
  filter: none;
  opacity: 1;
}

/* Логотипы из images/clients/ — квадраты 500×500 с прозрачными полями
   (тот же набор, что на главной). Ограничение по высоте 56px сжимало
   их до нечитаемых значков: даём квадрат 128px, поля съедают остальное. */
.os-clients .os-clients__item {
  min-height: 0;
  padding: 4px 12px;
}

.os-clients .os-clients__item img {
  width: 128px;
  height: 128px;
  max-height: none !important;
  opacity: 0.85;
}


/* -------------------------------------------------------------------------
 * Контакты и карта
 * ---------------------------------------------------------------------- */

.os-contacts {
  margin: 0 0 72px;
  scroll-margin-top: 120px;
}

.os-contacts__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 32px;
  align-items: stretch;
}

.os-contacts__info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 12px;
}

.os-contacts__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
  border: 1px solid var(--os-line);
  border-radius: 14px;
  background: #fff;
}

.os-contacts__item_wide {
  grid-column: 1 / -1;
  background: var(--os-warm);
}

.os-contacts__label {
  color: var(--os-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
}

.os-contacts__value {
  color: var(--os-ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  text-decoration: none;
  overflow-wrap: anywhere;
}

a.os-contacts__value:hover {
  color: var(--os-accent);
}

.os-contacts__value_phone {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: -0.01em;
}

.os-contacts__form {
  grid-column: 1 / -1;
  padding: 24px 22px;
  border: 1px solid var(--os-line);
  border-radius: 14px;
  background: #fff;
}

.os-contacts__map {
  overflow: hidden;
  min-height: 340px;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
}

.os-contacts__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
}


/* -------------------------------------------------------------------------
 * Адаптив новых блоков
 * ---------------------------------------------------------------------- */

@media (max-width: 900px) {
  .os-contacts__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .os-contacts__map {
    min-height: 280px;
  }

  .os-contacts__map iframe {
    min-height: 280px;
  }
}

@media (max-width: 780px) {
  .os-reviews,
  .os-clients,
  .os-contacts {
    margin-bottom: 48px;
  }

  .os-clients__grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
  }

  .os-clients__item {
    min-height: 84px;
    padding: 14px 16px;
  }

  .os-contacts__value_phone {
    font-size: 21px;
    line-height: 27px;
  }
}

@media (max-width: 560px) {
  .os-contacts__info {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* -------------------------------------------------------------------------
 * Форма заявки на первом экране
 *
 * Разметку задаёт сама форма в Contact Form 7: три поля внутри .flex,
 * затем кнопка, затем согласие. Обёртки wpcf7-form-control-wrap тема
 * вырезает (inc/cf7.php), поэтому прямые дети .flex — это input, input
 * и select, и раскладку можно задавать напрямую.
 * ---------------------------------------------------------------------- */

/* Сама форма — колонка с равными промежутками. Так расстояния между
   полями задаются один раз и не зависят от того, что именно Contact
   Form 7 вставит между ними. */
.os-hero__cf7 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Служебное, что CF7 добавляет сам и что не должно занимать строку */
.os-hero__cf7 .hidden-fields-container,
.os-hero__cf7 .akismet-fields-container,
.os-hero__cf7 .wpcf7-spinner {
  display: none;
}

/* Имя и телефон в ряд. .flex поддержан для прежней версии формы. */
.os-hero__cf7 .os-form__row,
.os-hero__cf7 .flex {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; /* как между строками формы (.os-hero__cf7) */
  margin: 0;
}

.os-hero__cf7 .os-form__row > *,
.os-hero__cf7 .flex > * {
  min-width: 0;
}

.os-hero__cf7 .flex select,
.os-hero__cf7 .flex textarea {
  grid-column: 1 / -1;
}

.os-hero__form select {
  cursor: pointer;
  background: #fff url(../images/section11-select.svg) no-repeat right 18px center;
  padding-right: 44px;
}

.os-hero__form .wpcf7-submit {
  width: 100%;
  height: 56px;
  margin: 0; /* шаг до кнопки — общий gap формы, 12px */
  padding: 0 24px;
  border: 0;
  border-radius: 56px;
  background: var(--os-accent);
  box-shadow: 0 4px 16px rgba(255, 117, 0, 0.24);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}

.os-hero__form .wpcf7-submit:hover {
  background: var(--os-accent-dark);
  box-shadow: 0 6px 22px rgba(255, 117, 0, 0.34);
}

.os-hero__form .wpcf7-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.os-hero__form .wpcf7-acceptance {
  display: block;
  margin: 0;
}

.os-hero__form .wpcf7-list-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
}

.os-hero__form .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  cursor: pointer;
}

.os-hero__form input[type="checkbox"] {
  /* Квадрат 19×19: во флекс-строке с длинной подписью он сжимался
     до 15×19 (на телефоне 11×19), и галочка выглядела не по центру. */
  flex: 0 0 19px;
  width: 19px;
  min-width: 19px;
  height: 19px;
  margin-top: 1px;
  border-width: 1.5px;
  border-radius: 5px;
}

.os-hero__form .wpcf7-list-item-label {
  color: var(--os-ink-soft);
  font-size: 12px;
  line-height: 17px;
}

.os-hero__form .wpcf7-list-item-label a {
  color: var(--os-accent);
  text-decoration: underline;
}

.os-hero__form .wpcf7-not-valid {
  border-color: #d63638;
}

.os-hero__form .wpcf7-not-valid-tip {
  margin: 4px 0 0;
  color: #d63638;
  font-size: 11.5px;
  line-height: 15px;
}

.os-hero__form .wpcf7-response-output {
  margin: 14px 0 0 !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  font-size: 13px;
  line-height: 18px;
}


/* -------------------------------------------------------------------------
 * Плашка с гарантиями под картинкой
 *
 * Тёмная — сознательно: весь первый экран светло-персиковый, и плашка
 * читается как отдельное утверждение, а не как продолжение текста.
 * ---------------------------------------------------------------------- */

.os-hero__trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 14px;
  padding: 22px 20px;
  border-radius: 18px;
  background: var(--os-accent-new);
}

.os-hero__trust-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
}

.os-hero__trust-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(255, 117, 0, 0.16);
  color: var(--os-accent);
}

.os-hero__trust-icon svg {
  width: 17px;
  height: 17px;
}

.os-hero__trust-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.os-hero__trust-title {
  color: var(--os-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 17px;
}

.os-hero__trust-text {
  color: var(--os-ink-soft);
  font-size: 11.5px;
  line-height: 16px;
}

.os-hero .hero-format-toggle-wrap {
  margin-top: 0;
  margin-bottom: 0;
}

.os-hero .hero-format-toggle {
  width: 100%;
}

.os-hero .hero-format-toggle__btn {
  flex: 1;
}


/* -------------------------------------------------------------------------
 * Слайдер программ
 *
 * Карточка приходит из template-parts/course/card.php и рассчитана на
 * сетку .section-11, где у неё доля ширины и внешние отступы. В слайде
 * она должна занимать всю ячейку и тянуться на высоту соседей.
 * ---------------------------------------------------------------------- */

.os-programs__slider {
  margin: 0;
}

.os-programs .splide__list {
  align-items: stretch;
}

.os-programs .splide__slide {
  height: auto;
}

/* Широкая карточка тянется на высоту слайда: иначе под короткой
   карточкой оставалась пустота высотой с самую длинную соседку. */
.os-programs .splide__slide > .os-course {
  height: 100%;
  margin: 0;
  align-content: start;
}

.os-programs .splide__slide > .item {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.18s;
}

.os-programs .splide__slide > .item:hover {
  border-color: rgba(255, 117, 0, 0.4);
  box-shadow: 0 10px 28px rgba(47, 56, 68, 0.08);
  transform: translateY(-2px);
}

/* Картинке задаём пропорцию, а не максимальную высоту: у программ
   миниатюры разного размера, и по max-height карточки разъезжались. */
.os-programs .splide__slide .images {
  aspect-ratio: 4 / 3;
  max-height: none;
  margin: 0 0 16px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--os-warm);
}

.os-programs .splide__slide .images img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  transition: transform 0.4s;
}

.os-programs .splide__slide > .item:hover .images img {
  transform: scale(1.04);
}

.os-programs .splide__slide .name {
  margin: 0 0 10px;
  color: var(--os-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  transition: color 0.2s;
}

.os-programs .splide__slide > .item:hover .name {
  color: var(--os-accent);
}

.os-programs .splide__slide .price {
  margin: 0 0 14px;
}

/* Контурная кнопка вместо сплошной заливки: четыре оранжевых
   прямоугольника в ряд перетягивали на себя всё внимание блока. */
.os-programs .splide__slide .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  margin-top: auto;
  padding: 0 20px;
  border: 1.5px solid var(--os-accent);
  border-radius: 56px;
  background: transparent;
  color: var(--os-accent);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  transition: background 0.2s, color 0.2s;
}

.os-programs .splide__slide .btn:hover {
  background: var(--os-accent);
  color: #fff;
}

/* -------------------------------------------------------------------------
 * Стрелки слайдеров
 *
 * Фон стрелкам в теме задают правила вида «.section-6 .slick-prev» —
 * они привязаны к своим секциям, и в наших блоках стрелки оставались
 * серыми квадратами из стандартных стилей splide. Рисуем сами тем же
 * значком, один набор правил на все слайдеры архива.
 * ---------------------------------------------------------------------- */

.os-programs .splide__arrows,
.os-reviews .splide__arrows,
.os-lic .splide__arrows,
.os-steach .splide__arrows {
  top: -74px;
}

.os-programs .splide__arrow,
.os-reviews .splide__arrow,
.os-lic .splide__arrow,
.os-steach .splide__arrow {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 0;
  background: url(../images/section6-arrow.svg) no-repeat center center;
  opacity: 1;
  transition: background-image 0.2s, transform 0.2s;
}

.os-programs .splide__arrow svg,
.os-reviews .splide__arrow svg,
.os-lic .splide__arrow svg,
.os-steach .splide__arrow svg {
  display: none;
}

.os-programs .splide__arrow--prev:hover,
.os-reviews .splide__arrow--prev:hover,
.os-lic .splide__arrow--prev:hover,
.os-steach .splide__arrow--prev:hover {
  background-image: url(../images/section6-arrow-hover.svg);
  transform: rotate(180deg);
}

.os-programs .splide__arrow--next,
.os-reviews .splide__arrow--next,
.os-lic .splide__arrow--next,
.os-steach .splide__arrow--next {
  transform: rotate(180deg);
}

.os-programs .splide__arrow--next:hover,
.os-reviews .splide__arrow--next:hover,
.os-lic .splide__arrow--next:hover,
.os-steach .splide__arrow--next:hover {
  background-image: url(../images/section6-arrow-hover.svg);
  transform: rotate(0deg);
}


/* -------------------------------------------------------------------------
 * Адаптив переработанных блоков
 * ---------------------------------------------------------------------- */

@media (max-width: 1150px) {
  .os-hero__grid {
    gap: 32px;
  }

  /* Сетка преимуществ переехала в запрос на 1150 пикселей выше по файлу.
     Здесь она стояла ниже запроса на 560 и отменяла его одну колонку. */
}

@media (max-width: 900px) {
  .os-hero__aside {
    max-width: 520px;
  }

  .os-lic__points {
    position: static;
  }
}

@media (max-width: 780px) {
  .os-hero__form {
    max-width: none;
    padding: 20px 18px;
  }

  .os-hero__cf7 .os-form__row,
  .os-hero__cf7 .flex {
    grid-template-columns: minmax(0, 1fr);
  }

  .os-hero__trust {
    gap: 16px 12px;
    padding: 18px 16px;
  }

  .os-hero__trust-title {
    font-size: 12.5px;
  }

  .os-programs .splide__arrows,
  .os-steach .splide__arrows,
  .os-reviews .splide__arrows {
    display: none;
  }

  .os-lic__gallery {
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .os-hero__trust {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* Подстраховка на случай, если обёртки CF7 не вырезались.
   Тема снимает span.wpcf7-form-control-wrap регуляркой (inc/cf7.php).
   Если разметка формы изменится и регулярка промахнётся, ячейками сетки
   станут обёртки, а не сами поля — правила ниже сохранят раскладку. */
.os-hero__cf7 span.wpcf7-form-control-wrap {
  display: block;
}

.os-hero__cf7 .os-form__row > span:has(select),
.os-hero__cf7 .flex > span:has(select),
.os-hero__cf7 .flex > span:has(textarea) {
  grid-column: 1 / -1;
}

.os-hero__cf7 span.wpcf7-form-control-wrap > input,
.os-hero__cf7 span.wpcf7-form-control-wrap > select,
.os-hero__cf7 span.wpcf7-form-control-wrap > textarea {
  width: 100%;
}


/* -------------------------------------------------------------------------
 * Программы категории
 *
 * Карточка та же, что в витрине раздела, но раскладка другая: там слайдер
 * с несколькими отобранными программами, здесь весь список категории.
 *
 * Селекторы намеренно из трёх классов. Базовые правила карточки лежат
 * в common.css под «.section-11 .item», причём часть из них — с
 * «:nth-child(4n)», то есть со специфичностью 0-3-0. Двух классов не
 * хватило бы, и отступы карточек поехали бы.
 * ---------------------------------------------------------------------- */

.os-catprog {
  margin: 0 0 72px;
  scroll-margin-top: 120px;
}

/* Подкатегории */
.os-catprog__children {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
}

.os-catprog__child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--os-line-cool);
  border-radius: 40px;
  background: #fff;
  color: var(--os-ink);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}

.os-catprog__child:hover {
  border-color: var(--os-accent);
  color: var(--os-accent);
}

.os-catprog__child span {
  color: var(--os-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.os-catprog__child:hover span {
  color: var(--os-accent);
}

/* Сетка карточек */
.os-catprog__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.os-catprog .os-catprog__grid > .item {
  display: flex;
  flex-direction: column;
  width: auto;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.18s;
}

.os-catprog .os-catprog__grid > .item:hover {
  border-color: rgba(255, 117, 0, 0.4);
  box-shadow: 0 10px 28px rgba(47, 56, 68, 0.08);
  transform: translateY(-2px);
}

.os-catprog .os-catprog__grid .images {
  aspect-ratio: 4 / 3;
  max-height: none;
  margin: 0 0 16px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--os-warm);
}

.os-catprog .os-catprog__grid .images img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  transition: transform 0.4s;
}

.os-catprog .os-catprog__grid > .item:hover .images img {
  transform: scale(1.04);
}

.os-catprog .os-catprog__grid .name {
  margin: 0 0 10px;
  color: var(--os-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  transition: color 0.2s;
}

.os-catprog .os-catprog__grid > .item:hover .name {
  color: var(--os-accent);
}

.os-catprog .os-catprog__grid .price {
  margin: 0 0 14px;
}

.os-catprog .os-catprog__grid .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  margin-top: auto;
  padding: 0 20px;
  border: 1.5px solid var(--os-accent);
  border-radius: 56px;
  background: transparent;
  color: var(--os-accent);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  transition: background 0.2s, color 0.2s;
}

.os-catprog .os-catprog__grid .btn:hover {
  background: var(--os-accent);
  color: #fff;
}

.os-catprog__pagination {
  margin: 36px 0 0;
}

/* Соседние направления — единственный выход из категории, кроме меню.
   Заголовок блока — общий .os-head из template-parts/section-head.php,
   поэтому своего правила у него больше нет. Отступ сверху увеличен под
   полноразмерный заголовок: с прежними 26px он прилипал к разделителю. */
.os-catprog__siblings {
  margin: 56px 0 0;
  padding: 40px 0 0;
  border-top: 1px solid var(--os-line-cool);
}

.os-catprog__siblings-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.os-catprog__siblings-list a {
  color: var(--os-ink-soft);
  font-size: 14.5px;
  text-decoration: none;
  border-bottom: 1px solid #d7dde5;
  transition: color 0.2s, border-color 0.2s;
}

.os-catprog__siblings-list a:hover {
  color: var(--os-accent);
  border-bottom-color: var(--os-accent);
}

.os-catprog__siblings-all {
  color: var(--os-accent) !important;
  font-weight: 600;
  border-bottom-color: #ffc79a !important;
}

@media (max-width: 1150px) {
  .os-catprog__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .os-catprog__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .os-catprog {
    margin-bottom: 48px;
  }

  .os-catprog__grid {
    gap: 12px;
  }

  /* Отступ соразмерен заголовку: на телефоне он падает с 40px до 26px,
     и полтора десятка пустых пикселей над ним читаются как обрыв. */
  .os-catprog__siblings {
    margin-top: 40px;
    padding-top: 28px;
  }
}

@media (max-width: 480px) {
  .os-catprog__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* -------------------------------------------------------------------------
 * Параметры программы и модули
 *
 * Оба блока живут на карточке программы и отвечают на два первых вопроса
 * посетителя: сколько это стоит по времени и деньгам и чему конкретно
 * учат. Сетка в две колонки — таблица параметров и требования рядом:
 * порознь они растягивают страницу вдвое, а читаются вместе.
 * ---------------------------------------------------------------------- */

.os-facts__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 32px;
  align-items: start;
}

/* Одна колонка, когда второй нет: таблица на всю ширину выглядит
   растянутой, поэтому ограничиваем её. */
.os-facts__grid:has(> :only-child) {
  grid-template-columns: minmax(0, 1fr);
  max-width: 760px;
}

.os-facts__list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--os-line-cool);
}

.os-facts__row {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--os-line-cool);
}

.os-facts__key {
  margin: 0;
  color: var(--os-ink-soft);
  font-size: 15px;
  line-height: 24px;
}

.os-facts__value {
  margin: 0;
  color: var(--os-ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.os-facts__req {
  padding: 24px;
  border-radius: var(--os-radius);
  background: var(--os-warm);
}

.os-facts__req-title {
  margin: 0 0 14px;
  color: var(--os-ink);
  font-size: 17px;
  font-weight: 600;
}

.os-facts__req-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.os-facts__req-list li {
  position: relative;
  margin: 0 0 10px;
  padding: 0 0 0 26px;
  color: var(--os-ink);
  font-size: 15px;
  line-height: 24px;
}

.os-facts__req-list li:last-child {
  margin-bottom: 0;
}

/* Галочка рисуется рамкой, а не картинкой: одним запросом меньше. */
.os-facts__req-list li:before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--os-accent);
  border-bottom: 2px solid var(--os-accent);
  transform: rotate(-45deg);
}

/* --- Модули --- */

.os-modules__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
  border-top: 1px solid var(--os-line-cool);
}

.os-modules__item {
  border-bottom: 1px solid var(--os-line-cool);
}

.os-modules__item:before {
  display: none;
}

/* Шапка строки. Одна и та же и у обычного модуля (<div>), и у
   раскрывающегося (<summary>), поэтому сетка живёт здесь, а не на .item. */
.os-modules__head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: baseline;
  padding: 16px 0;
}

/* Раскрывающийся модуль: место под знак справа и курсор-рука.
   Знак и поведение те же, что у вопросов и ответов, — человек уже знает,
   что с таким рядом делать. */
.os-modules__row > .os-modules__head {
  grid-template-columns: 34px minmax(0, 1fr) auto 28px;
  cursor: pointer;
  list-style: none;
}

/* Штатный треугольник <summary> убираем — вместо него свой знак. */
.os-modules__row > .os-modules__head::-webkit-details-marker {
  display: none;
}

.os-modules__row > .os-modules__head:hover .os-modules__name,
.os-modules__row[open] > .os-modules__head .os-modules__name {
  color: var(--os-accent);
}

.os-modules__icon {
  position: relative;
  align-self: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--os-accent-soft);
  transition: background 0.2s;
}

.os-modules__icon:before,
.os-modules__icon:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: var(--os-accent);
  transform: translate(-50%, -50%);
  transition: opacity 0.2s, transform 0.25s;
}

.os-modules__icon:after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.os-modules__row[open] .os-modules__icon:after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
}

/* Отступ слева равен колонке номера с зазором: описание встаёт
   ровно под названием модуля, а не под его номером. */
.os-modules__body {
  padding: 0 56px 20px 50px;
  color: var(--os-ink-soft);
  font-size: 15px;
  line-height: 25px;
}

.os-modules__body > :first-child {
  margin-top: 0;
}

.os-modules__body > :last-child {
  margin-bottom: 0;
}

.os-modules__body p {
  margin: 0 0 12px;
}

.os-modules__body ul,
.os-modules__body ol {
  margin: 0 0 12px;
  padding-left: 20px;
}

.os-modules__body a {
  color: var(--os-accent);
  text-decoration: underline;
}

.os-modules__num {
  color: var(--os-muted);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.os-modules__name {
  color: var(--os-ink);
  font-size: 16px;
  line-height: 26px;
  transition: color 0.2s;
}

.os-modules__hours {
  color: var(--os-ink-soft);
  font-size: 15px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.os-modules__total {
  margin: 20px 0 0;
  color: var(--os-ink-soft);
  font-size: 16px;
}

.os-modules__total strong {
  color: var(--os-ink);
}

/* Виден только вошедшему редактору: расхождение часов — ошибка
   наполнения, посетителю она ничего не объясняет. */
.os-modules__warn {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fff3cd;
  color: #7a5b00;
  font-size: 14px;
}

@media (max-width: 900px) {
  .os-facts__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .os-facts__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .os-modules__head {
    grid-template-columns: 26px minmax(0, 1fr);
  }

  /* Знак остаётся в первой строке справа от названия, часы уходят
     под него — иначе они встали бы рядом со знаком и слиплись. */
  .os-modules__row > .os-modules__head {
    grid-template-columns: 26px minmax(0, 1fr) 28px;
  }

  .os-modules__hours {
    grid-column: 2;
  }

  .os-modules__icon {
    grid-column: 3;
    grid-row: 1;
  }

  .os-modules__body {
    padding: 0 0 18px 42px;
  }

  .os-modules__warn {
    display: block;
    margin: 8px 0 0;
  }
}


/* -------------------------------------------------------------------------
 * Виды образовательных программ
 *
 * Развилка на главной: шесть карточек по числу разделов каталога.
 * Вся карточка — ссылка, а не только заголовок: целиться в строку,
 * когда рядом лежит область в двести пикселей, незачем.
 *
 * Счётчик прижат к низу через margin-top: auto, поэтому строки
 * с итогом выстраиваются на одной высоте независимо от длины описания.
 * ---------------------------------------------------------------------- */

.os-progtypes__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.os-progtypes__card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--os-line-cool);
  border-radius: var(--os-radius);
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.os-progtypes__card:hover {
  border-color: var(--os-accent);
  box-shadow: 0 12px 32px rgba(15, 26, 40, 0.08);
  transform: translateY(-2px);
}

/* Клавиатурный фокус виден: карточка — ссылка, и по ней ходят табом. */
.os-progtypes__card:focus-visible {
  outline: 2px solid var(--os-accent);
  outline-offset: 3px;
}

.os-progtypes__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 0 20px;
  border-radius: 14px;
  background: var(--os-accent-soft);
  color: var(--os-accent);
}

.os-progtypes__icon svg {
  width: 22px;
  height: 22px;
}

.os-progtypes__name {
  margin: 0 0 10px;
  color: var(--os-ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 26px;
}

.os-progtypes__text {
  margin: 0 0 24px;
  color: var(--os-ink-soft);
  font-size: 15px;
  line-height: 24px;
}

.os-progtypes__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--os-line-cool);
}

.os-progtypes__label {
  color: var(--os-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.os-progtypes__count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--os-ink);
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.os-progtypes__arrow {
  color: var(--os-accent);
  transition: transform 0.2s;
}

.os-progtypes__card:hover .os-progtypes__arrow {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .os-progtypes__card,
  .os-progtypes__arrow {
    transition: none;
  }

  .os-progtypes__card:hover {
    transform: none;
  }

  .os-progtypes__card:hover .os-progtypes__arrow {
    transform: none;
  }
}

@media (max-width: 1000px) {
  .os-progtypes__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .os-progtypes__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .os-progtypes__card {
    padding: 22px;
  }

  .os-progtypes__text {
    margin-bottom: 18px;
  }
}

/* -------------------------------------------------------------------------
 * Плашка ближайшего старта в блоке «Форматы обучения»
 *
 * Дату считает PHP, а на клиенте её пересчитывает js/script.js: страница
 * приходит из кеша, и без пересчёта дата залипла бы до сброса.
 * ---------------------------------------------------------------------- */

.os-intake {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: var(--os-warm);
}

.os-intake__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  color: var(--os-accent);
}

.os-intake__text {
  flex: 1 1 260px;
  min-width: 0;
}

.os-intake__title {
  display: block;
  color: var(--os-ink);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 22px;
}

.os-intake__date {
  display: block;
  margin-top: 2px;
  color: var(--os-ink-soft);
  font-size: 14.5px;
  line-height: 22px;
}

.os-intake__day {
  color: var(--os-accent-dark);
  font-weight: 600;
}

.os-intake__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 14px 24px;
  border: 0;
  border-radius: 56px;
  background: var(--os-accent);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.os-intake__btn:hover {
  background: var(--os-accent-dark);
}

.os-intake__btn svg {
  flex: 0 0 auto;
}

@media (max-width: 780px) {
  .os-intake {
    padding: 16px;
  }

  .os-intake__btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* -------------------------------------------------------------------------
 * SEO-блок категории: текст и липкая форма
 *
 * Форма появляется только на категориях — там SEO-текст самый длинный,
 * а форма первого экрана к этому месту уже уехала вверх. Разметка формы
 * общая с карточкой программы (.block-form), поэтому оформление берётся
 * оттуда, а здесь только сетка и прилипание.
 * ---------------------------------------------------------------------- */

.os-seo__grid {
  display: grid;
  gap: 32px;
}

/* align-items: start здесь было ошибкой: ячейка сжималась до высоты
   формы, и прилипать ей было негде. Колонка обязана тянуться на всю
   высоту текста — тогда внутри неё липкому блоку есть куда двигаться. */
.os-seo_aside .os-seo__grid {
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: stretch;
}

.os-seo__aside {
  min-width: 0;
}

.os-seo__main {
  min-width: 0;
}

.os-seo__sticky {
  position: sticky;
  top: 120px;
}

/* Отступ снизу у формы внутри липкой колонки не нужен: он оставлял
   пустое место под ней и мешал прилипанию к нижней границе. */
.os-seo__aside .block-form {
  margin-bottom: 0;
}

@media (max-width: 1150px) {
  .os-seo_aside .os-seo__grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
  }
}

@media (max-width: 900px) {
  .os-seo_aside .os-seo__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* На узком экране прилипание только мешает: форма занимала бы
     половину экрана всё время, пока читается текст. */
  .os-seo__sticky {
    position: static;
  }
}

/* =========================================================================
 * Широкая карточка программы в списках
 *
 * Плиточная карточка показывала только название и цену — выбрать по ней
 * было нельзя. Здесь на виду то, что решает выбор: документ, срок, формат
 * и требования. Все сведения уже заполнены на самой программе.
 *
 * Раскладка: картинка — характеристики — цена и кнопки. На узком экране
 * колонки складываются в одну, кнопки растягиваются на всю ширину.
 * ====================================================================== */

.os-course {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 232px;
  gap: 24px;
  align-items: start;
  width: 100%;
  margin: 0 0 16px;
  padding: 22px;
  border: 1px solid var(--os-line-cool);
  border-radius: var(--os-radius);
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.os-course:hover {
  border-color: var(--os-line);
  box-shadow: 0 10px 32px -18px rgba(47, 56, 68, 0.45);
}

/* ---- Картинка ---- */

.os-course__media {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--os-panel, #f6f7f9);
}

.os-course__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 220 / 160;
  object-fit: cover;
}

.os-course__flag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--os-accent);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 14px;
}

/* ---- Название и характеристики ---- */

.os-course__body {
  min-width: 0;
}

.os-course__title {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;
  letter-spacing: -0.01em;
}

.os-course__title a {
  color: var(--os-ink);
  text-decoration: none;
}

.os-course__title a:hover {
  color: var(--os-accent-dark);
}

.os-course__status {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(28, 122, 77, 0.1);
  color: #1c7a4d;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

.os-course__specs {
  display: grid;
  gap: 7px;
  margin: 0;
}

.os-course__spec {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.os-course__spec-name {
  margin: 0;
  color: var(--os-muted);
  font-size: 14px;
  line-height: 21px;
}

/* Тире рисуем стилями, а не в разметке: в тексте его быть не должно —
   программы чтения с экрана произносили бы его как часть значения. */
.os-course__spec-name::after {
  content: " :";
}

.os-course__spec-value {
  margin: 0;
  color: var(--os-ink);
  font-size: 14px;
  line-height: 21px;
}

/* ---- Цена и кнопки ---- */

.os-course__side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.os-course__price {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
}

.os-course__price-new {
  color: var(--os-ink);
  font-size: 22px;
  font-weight: 700;
  line-height: 28px;
  font-variant-numeric: tabular-nums;
}

.os-course__price-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.os-course__price-old {
  color: var(--os-muted);
  font-size: 14px;
  line-height: 20px;
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

.os-course__price-off {
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--os-accent-soft);
  color: var(--os-accent-dark);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 18px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.os-course__actions {
  display: grid;
  gap: 10px;
}

.os-course__more,
.os-course__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 20px;
  border-radius: 56px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.os-course__more {
  border: 1px solid var(--os-accent);
  background: #fff;
  color: var(--os-accent-dark);
}

.os-course__more:hover {
  background: var(--os-accent-soft);
}

.os-course__cta {
  border: 1px solid var(--os-accent);
  background: var(--os-accent);
  color: #fff;
}

.os-course__cta:hover {
  border-color: var(--os-accent-dark);
  background: var(--os-accent-dark);
}

/* Точки слайдера.

   Splide кладёт их поверх слайда: bottom: .5em при position: absolute.
   С плиточной карточкой это выглядело нормально, а широкая занимает всю
   ширину — точки легли прямо на кнопки. Выносим их под слайдер. */
.splide-programs .splide__pagination,
.splide-docs .splide__pagination {
  position: static;
  padding: 0;
  margin: 18px 0 0;
  gap: 8px;
}

.splide-programs .splide__pagination__page,
.splide-docs .splide__pagination__page {
  width: 8px;
  height: 8px;
  margin: 0;
  background: var(--os-line-cool);
  opacity: 1;
}

.splide-programs .splide__pagination__page.is-active,
.splide-docs .splide__pagination__page.is-active {
  width: 22px;
  border-radius: 4px;
  background: var(--os-accent);
  transform: none;
}

/* ---- Списки, в которых лежит карточка ---- */

.os-catprog__grid,
.section-11 .flex {
  display: block;
}

/* Плиточные правила старой карточки к новой не относятся: она сама
   задаёт себе ширину и отступы. */
.section-11 .flex > .os-course,
.os-catprog__grid > .os-course {
  width: 100%;
  max-width: none;
  margin: 0 0 16px;
}

@media (max-width: 1150px) {
  .os-course {
    grid-template-columns: 180px minmax(0, 1fr) 210px;
    gap: 18px;
  }

  .os-course__spec {
    grid-template-columns: 150px minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .os-course {
    grid-template-columns: 160px minmax(0, 1fr);
  }

  /* Цена и кнопки уходят под текст на всю ширину карточки. */
  .os-course__side {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .os-course__price {
    text-align: left;
  }

  .os-course__price-row {
    justify-content: flex-start;
  }

  .os-course__actions {
    grid-auto-flow: column;
    gap: 10px;
  }
}

@media (max-width: 640px) {
  .os-course {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
  }

  .os-course__spec {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  /* В одну колонку тире висело бы в конце строки-подписи. */
  .os-course__spec-name::after {
    content: "";
  }

  .os-course__actions {
    grid-auto-flow: row;
    width: 100%;
  }
}

.breadcrumbs {
  margin: 0 0 18px !important;
  color: var(--os-muted);
  font-size: 13.5px;
  line-height: 20px;
}

.breadcrumbs a {
  color: var(--os-ink-soft);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--os-accent-dark);
}

/* Последняя крошка — текущая страница. Она не ссылка, и выделять её
   цветом ссылки было бы обманом. */
.breadcrumbs > span:last-child b,
.breadcrumbs > b {
  color: var(--os-ink);
  font-weight: 600;
}

/* =========================================================================
 * Универсальные блоки: карточки, тарифы
 *
 * Появились вместе с шаблоном «Корпоративное обучение», но ни к нему,
 * ни к соседям не привязаны: ритм как у остальных os-* (только нижний
 * отступ 72/48px, шапка .os-head, карточка из токенов). Блок можно
 * поставить на любую страницу и в любом порядке.
 * ====================================================================== */

/* ---------- Карточки: иконка, заголовок, текст, параметр ---------- */

.os-cards {
  margin: 0 0 72px;
}

.os-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.os-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 32px;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.18s;
}

.os-card:hover {
  border-color: rgba(255, 117, 0, 0.4);
  box-shadow: 0 10px 28px rgba(47, 56, 68, 0.08);
  transform: translateY(-2px);
}

.os-card__icon {
  display: flex;
  width: 48px;
  height: 48px;
  margin: 0 0 6px;
  color: var(--os-accent);
}

.os-card__icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.4;
}

.os-card__name {
  margin: 0;
  color: var(--os-ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 26px;
}

.os-card_link:hover .os-card__name {
  color: var(--os-accent);
}

.os-card__text {
  margin: 0 !important;
  color: var(--os-ink-soft);
  font-size: 13.5px;
  line-height: 21px;
}

/* Параметр прижат к низу: у карточек ряда одна линия низа */
.os-card__spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: auto 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--os-line-cool);
  color: var(--os-ink-soft);
  font-size: 13.5px;
  line-height: 21px;
}

.os-card__spec b {
  color: var(--os-ink);
  font-weight: 700;
}

.os-card__arrow {
  color: var(--os-accent) !important;
  transition: transform 0.2s;
}

.os-card_link:hover .os-card__arrow {
  transform: translateX(4px);
}

/* ---------- Тарифы ---------- */

.os-tiers {
  margin: 0 0 72px;
}

.os-tiers__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.os-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 32px;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: #fff;
}

.os-tier_hot {
  border-color: var(--os-accent);
  background: var(--os-warm);
  box-shadow: 0 10px 28px rgba(255, 117, 0, 0.12);
}

.os-tier__flag {
  position: absolute;
  top: -12px;
  left: 32px;
  padding: 4px 12px;
  border-radius: 56px;
  background: var(--os-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 16px;
}

.os-tier__range {
  color: var(--os-ink-soft);
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}

.os-tier__value {
  color: var(--os-accent);
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  overflow-wrap: anywhere;
}

.os-tier__text {
  margin: 0 !important;
  color: var(--os-ink-soft);
  font-size: 13.5px;
  line-height: 21px;
}

.os-tier__note {
  margin: auto 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--os-line-cool);
  color: var(--os-ink);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 21px;
}

.os-tiers__actions {
  display: flex;
  justify-content: center;
  margin: 32px 0 0;
}

/* ---------- Адаптив ---------- */

@media (max-width: 1150px) {
  .os-tiers__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 28px;
  }
}

@media (max-width: 900px) {
  .os-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .os-cards,
  .os-tiers {
    margin-bottom: 48px;
  }

  .os-tier__value {
    font-size: 26px;
    line-height: 34px;
  }
}

@media (max-width: 560px) {
  .os-cards__grid,
  .os-tiers__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .os-card,
  .os-tier {
    padding: 24px;
  }

  .os-tier__flag {
    left: 24px;
  }
}


/* =========================================================================
 * Отзывы: площадки, видеоистории, карточка о компании (sections/video-reviews.php)
 *
 * Слева площадки и слайдер видео, справа карточка о компании. Карточка —
 * в цветах шапки сайта (#1c2e48), акценты оранжевые. Блок не зависит от
 * соседей: на главной, в разделе и в карточке программы выглядит одинаково.
 * ====================================================================== */

.os-head__accent {
  color: var(--os-accent);
}

.os-vr {
  margin: 0 0 72px;
  scroll-margin-top: 120px;
}

.os-vr__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.os-vr__grid_card {
  grid-template-columns: minmax(0, 1fr) 340px;
  /* Карточка «О компании» — во всю высоту левой колонки; примечание
     прижато книзу (margin-top: auto у .os-vr__card-note). */
  align-items: stretch;
}

.os-vr__main {
  min-width: 0;
}

/* ---------- Площадки ---------- */

.os-vr__platforms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin: 0 0 32px;
}

.os-vr__platform {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 44px 18px 18px;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: var(--os-warm);
  color: var(--os-ink);
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.18s;
}

.os-vr__platform:hover {
  border-color: rgba(255, 117, 0, 0.4);
  box-shadow: 0 10px 28px rgba(47, 56, 68, 0.08);
  transform: translateY(-2px);
  color: var(--os-ink);
}

.os-vr__platform-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.os-vr__platform-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.os-vr__platform-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--os-accent);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 21px;
}

.os-vr__stars {
  color: #ffb400;
  letter-spacing: 1px;
}

.os-vr__platform-rating b {
  color: var(--os-ink);
}

.os-vr__platform-name {
  color: var(--os-ink-soft);
  font-size: 13.5px;
  line-height: 21px;
}

.os-vr__platform-ext {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 16px;
  height: 16px;
  color: var(--os-muted);
}

/* ---------- Видео ---------- */

.os-vr__videos-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--os-line-cool);
}

.os-vr__videos-title {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--os-ink);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 24px;
}

.os-vr__videos-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--os-accent);
  color: #fff;
}

.os-vr__videos-icon svg {
  width: 14px;
  height: 14px;
}

/* Стрелки Splide — в шапке слайдера, а не поверх слайдов.
   common.css задаёт всем .splide__arrows absolute и top: -79px
   (на мобильных — с !important), а splide.min.css зеркалит иконку
   кнопки «назад». Здесь стрелки в потоке и иконки рисуются как есть. */
.os-vr .os-vr__arrows {
  position: static;
  top: auto !important;
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  margin-left: auto;
}

.os-vr .os-vr__arrow svg,
.os-vr .splide__arrow--prev svg {
  transform: none;
}

.os-vr .os-vr__arrow {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--os-line-cool);
  border-radius: 50%;
  background: #fff;
  color: var(--os-ink);
  opacity: 1;
  transform: none;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.os-vr .os-vr__arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
}

.os-vr .os-vr__arrow:hover:not(:disabled) {
  border-color: var(--os-accent);
  background: var(--os-accent);
  color: #fff;
}

.os-vr .os-vr__arrow:disabled {
  opacity: 0.4;
  cursor: default;
}

.os-vr__video {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  max-height: 420px;
  width: 100%;
  border-radius: var(--os-radius);
  background: var(--os-dark);
  color: #fff;
  text-decoration: none;
}

.os-vr__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  transition: transform 0.4s;
}

.os-vr__video:hover .os-vr__poster {
  transform: scale(1.04);
}

/* Затемнение снизу — под подпись */
.os-vr__video:after {
  content: '';
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(180deg, rgba(13, 25, 40, 0) 0%, rgba(13, 25, 40, 0.85) 100%);
  pointer-events: none;
}

.os-vr__caption {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.os-vr__caption-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
}

.os-vr__caption-sub {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12.5px;
  line-height: 18px;
}

/* ---------- Карточка о компании ---------- */

.os-vr__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border-radius: var(--os-radius);
  background: linear-gradient(160deg, #1e3254 0%, #1c2e48 55%, #162540 100%);
  box-shadow: 0 16px 40px rgba(28, 46, 72, 0.25);
  color: #fff;
}

.os-vr__card-eyebrow {
  color: #ff9944;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
}

.os-vr__card-title {
  font-size: 19px;
  font-weight: 700;
  line-height: 26px;
}

.os-vr__card-text {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13.5px;
  line-height: 21px;
}

.os-vr__card-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.os-vr__card-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 20px;
}

.os-vr__card-check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(255, 117, 0, 0.2);
  color: #ff9944;
}

.os-vr__card-check svg {
  width: 12px;
  height: 12px;
}

.os-vr__card-note {
  margin: auto 0 0 !important;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.72);
  font-size: 12.5px;
  line-height: 19px;
}

/* ---------- Адаптив ---------- */

@media (max-width: 1150px) {
  .os-vr__grid_card {
    grid-template-columns: minmax(0, 1fr) 280px;
  }
}

@media (max-width: 900px) {
  .os-vr__grid_card {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 780px) {
  .os-vr {
    margin-bottom: 48px;
  }

  .os-vr__platforms {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 24px;
  }

  .os-vr__videos-title {
    font-size: 13.5px;
  }

  .os-vr .os-vr__arrow {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 560px) {
  .os-vr__card {
    padding: 24px;
  }
}


/* =========================================================================
 * Корпоративная страница: цифры, текст со связью, отрасли, полоса
 * с заявкой, таймлайн шагов. Ритм общий (нижний отступ 72/48px,
 * .os-head), блоки от соседей не зависят.
 * ====================================================================== */

/* ---------- Полоса цифр ---------- */

.os-stats {
  margin: 0 0 72px;
}

.os-stats__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 36px 8px;
  list-style: none;
  border-radius: var(--os-radius);
  background: linear-gradient(135deg, #1e3254 0%, #1c2e48 55%, #162540 100%);
  box-shadow: 0 16px 40px rgba(28, 46, 72, 0.18);
}

.os-stats__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0 32px;
}

.os-stats__item + .os-stats__item {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.os-stats__value {
  color: #ff9944;
  font-size: 36px;
  font-weight: 700;
  line-height: 44px;
  white-space: nowrap;
}

.os-stats__label {
  color: rgba(255, 255, 255, 0.78);
  font-size: 13.5px;
  line-height: 21px;
}

/* ---------- Текст и карточка связи ---------- */

.os-intro {
  margin: 0 0 72px;
}

.os-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 56px;
  align-items: start;
}

.os-intro__text {
  color: var(--os-ink);
  font-size: 15px;
  line-height: 26px;
}

.os-intro__text p {
  margin: 0 0 16px;
}

.os-intro__text h3 {
  margin: 32px 0 14px;
  color: var(--os-ink);
  font-size: 22px;
  font-weight: 700;
  line-height: 30px;
}

.os-intro__text ul {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.os-intro__text li {
  position: relative;
  margin: 0;
  padding: 0 0 0 22px;
}

.os-intro__text li:before {
  content: "";
  position: absolute;
  top: 10px;
  left: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--os-accent);
}

.os-intro__aside {
  position: sticky;
  top: 120px;
}

.os-intro__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px;
  border: 1px solid var(--os-line);
  border-top: 4px solid var(--os-accent);
  border-radius: var(--os-radius);
  background: #fff;
  box-shadow: 0 16px 40px rgba(47, 56, 68, 0.08);
}

.os-intro__card-eyebrow {
  color: var(--os-accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
}

.os-intro__card-title {
  color: var(--os-ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 26px;
}

.os-intro__card-text {
  margin: 0 !important;
  color: var(--os-ink-soft);
  font-size: 13.5px;
  line-height: 21px;
}

.os-intro__card .os-btn {
  width: 100%;
  margin: 4px 0 0;
}

.os-intro__ways {
  display: grid;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.os-intro__ways li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid var(--os-line-cool);
}

.os-intro__way-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--os-accent-soft);
  color: var(--os-accent);
}

.os-intro__way-icon svg {
  width: 20px;
  height: 20px;
}

.os-intro__ways li > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.os-intro__way-main,
.os-intro__way-links a {
  color: var(--os-ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 22px;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.os-intro__way-main:hover,
.os-intro__way-links a:hover {
  color: var(--os-accent);
}

.os-intro__way-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.os-intro__way-sub {
  color: var(--os-ink-soft);
  font-size: 12.5px;
  line-height: 18px;
}

.os-intro__card-note {
  margin: 0 !important;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--os-warm);
  color: var(--os-ink-soft);
  font-size: 12.5px;
  line-height: 19px;
}

/* ---------- Отрасли ---------- */

.os-ind {
  margin: 0 0 72px;
}

.os-ind__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.os-ind__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  padding: 22px;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: var(--os-warm);
  transition: border-color 0.2s, background 0.2s;
}

.os-ind__item:hover {
  border-color: rgba(255, 117, 0, 0.4);
  background: #fff;
}

.os-ind__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  color: var(--os-accent);
  box-shadow: 0 4px 12px rgba(255, 117, 0, 0.12);
}

.os-ind__icon svg {
  width: 24px;
  height: 24px;
}

.os-ind__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.os-ind__name {
  color: var(--os-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
}

.os-ind__text {
  color: var(--os-ink-soft);
  font-size: 13.5px;
  line-height: 20px;
}

/* ---------- Полоса с заявкой ---------- */

.os-band {
  margin: 0 0 72px;
}

.os-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  padding: 36px 48px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--os-accent) 0%, #ff9a2e 100%);
  box-shadow: 0 16px 40px rgba(255, 117, 0, 0.25);
  color: #fff;
}

.os-band__main {
  flex: 1 1 420px;
}

.os-band__title {
  font-size: 26px;
  font-weight: 700;
  line-height: 34px;
}

.os-band__text {
  margin: 8px 0 0 !important;
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  line-height: 24px;
}

.os-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.os-band .os-btn_primary {
  border-color: #fff;
  background: #fff;
  box-shadow: 0 6px 18px rgba(124, 50, 0, 0.18);
  color: var(--os-accent-dark);
}

.os-band .os-btn_primary:hover {
  border-color: var(--os-dark);
  background: var(--os-dark);
  color: #fff;
}

.os-band .os-btn_outline {
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}

.os-band .os-btn_outline:hover {
  border-color: #fff;
  background: #fff;
  color: var(--os-accent-dark);
}

/* ---------- Таймлайн шагов ---------- */

.os-timeline {
  margin: 0 0 72px;
}

.os-timeline__list {
  display: grid;
  gap: 12px;
  max-width: 900px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.os-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 20px;
  margin: 0;
}

/* Линия от квадрата к следующему шагу */
.os-timeline__item:not(:last-child):before {
  content: "";
  position: absolute;
  top: 44px;
  bottom: -12px;
  left: 21.5px;
  width: 1px;
  background: var(--os-line-cool);
}

.os-timeline__num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 2px 0 0;
  border-radius: 10px;
  background: var(--os-accent);
  box-shadow: 0 0 0 5px #fff, 0 8px 18px rgba(255, 117, 0, 0.3);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}

.os-timeline__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 22px 28px;
  border-radius: var(--os-radius);
  background: var(--os-warm);
}

.os-timeline__step {
  color: var(--os-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
}

.os-timeline__name {
  margin: 0;
  color: var(--os-ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 26px;
}

.os-timeline__text {
  max-width: 640px;
  margin: 0 !important;
  color: var(--os-ink-soft);
  font-size: 13.5px;
  line-height: 21px;
}

.os-timeline__term {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  padding: 5px 12px;
  border: 1px solid var(--os-line);
  border-radius: 999px;
  background: #fff;
  color: var(--os-accent-dark);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.os-timeline__term svg {
  width: 13px;
  height: 13px;
}

.os-timeline__action {
  margin: 8px 0 0;
}

/* ---------- Адаптив ---------- */

@media (max-width: 1150px) {
  .os-ind__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .os-intro__grid {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 40px;
  }
}

@media (max-width: 900px) {
  .os-stats__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 28px;
  }

  .os-stats__item:nth-child(odd) {
    border-left: 0;
  }

  .os-intro__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .os-intro__aside {
    position: static;
  }
}

@media (max-width: 780px) {
  .os-stats,
  .os-intro,
  .os-ind,
  .os-band,
  .os-timeline {
    margin-bottom: 48px;
  }

  .os-stats__list {
    padding: 28px 0;
  }

  .os-stats__item {
    padding: 0 20px;
  }

  .os-stats__value {
    font-size: 28px;
    line-height: 36px;
  }

  .os-band__inner {
    padding: 28px 24px;
  }

  .os-band__title {
    font-size: 22px;
    line-height: 30px;
  }

  .os-intro__text h3 {
    font-size: 19px;
    line-height: 26px;
  }
}

@media (max-width: 560px) {
  .os-ind__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .os-intro__card {
    padding: 24px;
  }

  .os-timeline__item {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 14px;
  }

  .os-timeline__num {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }

  .os-timeline__item:not(:last-child):before {
    top: 38px;
    left: 17.5px;
  }

  .os-timeline__card {
    padding: 20px;
  }

  .os-band__actions .os-btn {
    flex: 1 1 auto;
  }
}


/* =========================================================================
 * Модальные окна: «Заказать звонок», «Заявка на обучение», квиз
 *
 * Разметка — footer.php, открытие — js/script.js (osPopupOpen). Перекрывает
 * старые правила .popup-block из common.css: archive.css подключается
 * после него. Поля формы оформлены так же, как форма первого экрана
 * (.os-hero__form), чтобы заявка выглядела одинаково везде.
 * ====================================================================== */

html.os-popup-open {
  overflow: hidden;
}

.popup-block .popup-bg {
  z-index: 1000001;
  background: rgba(13, 25, 40, 0.58);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: osPopupFade 0.2s ease-out;
}

.popup-block .block {
  z-index: 1000002;
  width: calc(100% - 32px);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(13, 25, 40, 0.35);
  animation: osPopupIn 0.24s ease-out;
  overscroll-behavior: contain;
}

@keyframes osPopupFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes osPopupIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 16px)) scale(0.98); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Крестик: круглая кнопка вместо картинки */
.popup-block .close {
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--os-warm);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.popup-block .close:before,
.popup-block .close:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--os-ink);
  transform: translate(-50%, -50%) rotate(45deg);
}

.popup-block .close:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.popup-block .close:hover {
  background: var(--os-accent-soft);
  transform: rotate(90deg);
}

/* ---------- Окна с формой ---------- */

.popup-block_form .block {
  max-width: 480px;
  padding: 36px 36px 28px;
}

.popup-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 22px;
  padding: 0 44px 0 0;
}

.popup-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 0 4px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--os-accent) 0%, #ff9a2e 100%);
  box-shadow: 0 8px 20px rgba(255, 117, 0, 0.3);
  color: #fff;
}

.popup-icon svg {
  width: 26px;
  height: 26px;
}

.popup-block_form .popup-title {
  margin: 0;
  color: var(--os-ink);
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  text-align: left;
  text-transform: none;
}

.popup-block_form .popup-desc {
  margin: 0;
  color: var(--os-ink-soft);
  font-size: 14px;
  line-height: 22px;
  text-align: left;
}

/* Форма CF7: колонка с равными промежутками */
.popup-block_form .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.popup-block_form .wpcf7-form > *,
.popup-block_form .flex > * {
  /* common.css даёт полям окна flex: 1 — в колонке это сжимало
     кнопку отправки до высоты строки текста. */
  flex: none;
}

.popup-block_form .hidden-fields-container,
.popup-block_form .wpcf7-spinner,
.popup-block_form .screen-reader-response {
  display: none;
}

.popup-block_form .flex {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.popup-block_form .flex > * {
  min-width: 0;
}

.popup-block_form .flex select,
.popup-block_form .flex textarea,
.popup-block_form .flex .wpcf7-form-control-wrap:has(select),
.popup-block_form .flex .wpcf7-form-control-wrap:has(textarea) {
  grid-column: 1 / -1;
}

.popup-block_form input[type="text"],
.popup-block_form input[type="tel"],
.popup-block_form input[type="email"],
.popup-block_form select,
.popup-block_form textarea {
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 20px;
  border: 1px solid var(--os-line-cool);
  border-radius: 52px;
  background: #fff;
  color: var(--os-ink);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.3;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.popup-block_form select {
  padding-right: 44px;
  background: #fff url(../images/section11-select.svg) no-repeat right 18px center;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.popup-block_form textarea {
  height: 96px;
  padding: 14px 20px;
  border-radius: 18px;
  resize: vertical;
}

.popup-block_form input:focus,
.popup-block_form select:focus,
.popup-block_form textarea:focus {
  border-color: var(--os-accent);
  box-shadow: 0 0 0 3px rgba(255, 117, 0, 0.12);
}

.popup-block_form .wpcf7-not-valid {
  border-color: #e5484d;
}

.popup-block_form .wpcf7-not-valid-tip {
  margin: 4px 0 0 16px;
  color: #e5484d;
  font-size: 12px;
  line-height: 16px;
}

.popup-block_form .wpcf7-submit,
.popup-block_form .form-submit-btn {
  width: 100%;
  height: 56px;
  margin: 2px 0 0;
  padding: 0 24px;
  border: 0;
  border-radius: 56px;
  background: var(--os-accent);
  box-shadow: 0 6px 18px rgba(255, 117, 0, 0.3);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-transform: none;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}

.popup-block_form .wpcf7-submit:hover,
.popup-block_form .form-submit-btn:hover {
  /* !important — против .form-submit-btn:hover из common.css */
  background: var(--os-accent-dark) !important;
  box-shadow: 0 8px 22px rgba(255, 117, 0, 0.38);
  color: #fff !important;
  transform: translateY(-1px);
}

.popup-block_form .wpcf7-submit:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

/* Согласие на обработку данных */
.popup-block_form .wpcf7-acceptance {
  display: block;
  margin: 0;
}

.popup-block_form .wpcf7-list-item {
  display: block;
  margin: 0;
}

.popup-block_form .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.popup-block_form .wpcf7-list-item input[type="checkbox"] {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  padding: 0;
  border-radius: 4px;
  accent-color: var(--os-accent);
  cursor: pointer;
}

.popup-block_form .wpcf7-list-item-label {
  color: var(--os-ink-soft);
  font-size: 12.5px;
  line-height: 19px;
}

.popup-block_form .wpcf7-list-item-label a {
  color: var(--os-accent-dark);
  text-decoration: underline;
}

/* Сообщения CF7 после отправки */
.popup-block_form .wpcf7-response-output {
  margin: 4px 0 0 !important;
  padding: 12px 16px !important;
  border: 0 !important;
  border-radius: 14px;
  background: var(--os-warm);
  color: var(--os-ink);
  font-size: 13.5px;
  line-height: 20px;
}

.popup-block_form .wpcf7-response-output:empty {
  display: none;
}

.popup-block_form .wpcf7-form.sent .wpcf7-response-output {
  background: #e8f7ee;
  color: #1d6b3c;
}

.popup-block_form .wpcf7-form.invalid .wpcf7-response-output,
.popup-block_form .wpcf7-form.failed .wpcf7-response-output {
  background: #fdecec;
  color: #a12a2e;
}

/* Строка доверия под формой */
.popup-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--os-line-cool);
  list-style: none;
}

.popup-trust li {
  position: relative;
  margin: 0;
  padding: 0 0 0 20px;
  color: var(--os-ink-soft);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 18px;
}

.popup-trust li:before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--os-accent-soft);
}

.popup-trust li:after {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 4px;
  height: 7px;
  border: solid var(--os-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

@media (max-width: 560px) {
  .popup-block_form .block {
    padding: 28px 20px 22px;
    border-radius: 20px;
  }

  .popup-block_form .flex {
    grid-template-columns: minmax(0, 1fr);
  }

  .popup-block_form .popup-title {
    font-size: 21px;
    line-height: 27px;
  }

  .popup-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }
}


/* =========================================================================
 * Корпоративная страница: ссылки отраслей, карточки-кнопки форматов
 * ====================================================================== */

.os-ind__grid > li {
  display: flex;
  margin: 0;
}

.os-ind__item {
  position: relative;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

.os-ind__item_link {
  padding-right: 44px;
}

.os-ind__item_link:hover {
  box-shadow: 0 10px 28px rgba(47, 56, 68, 0.08);
  transform: translateY(-2px);
}

.os-ind__item_link:hover .os-ind__name {
  color: var(--os-accent);
}

.os-ind__item {
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.18s;
}

.os-ind__arrow {
  position: absolute;
  top: 22px;
  right: 18px;
  display: flex;
  width: 18px;
  height: 18px;
  color: var(--os-muted);
  transition: color 0.2s, transform 0.2s;
}

.os-ind__arrow svg {
  width: 100%;
  height: 100%;
}

.os-ind__item_link:hover .os-ind__arrow {
  color: var(--os-accent);
  transform: translateX(3px);
}

.os-ind__all {
  display: flex;
  justify-content: center;
  margin: 32px 0 0;
}

.os-ind__all .os-btn svg {
  width: 18px;
  height: 18px;
}

/* Карточка-кнопка: сбрасываем оформление <button> */
.os-card_button {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.os-card_button .os-card__text {
  display: block;
}

.os-card__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  color: var(--os-accent);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  transition: gap 0.2s;
}

.os-card_button:hover .os-card__more {
  gap: 10px;
}

.os-card_button:focus-visible {
  outline: 3px solid rgba(255, 117, 0, 0.35);
  outline-offset: 2px;
}


/* =========================================================================
 * Блог: список записей и статья
 *
 * Список — sections/blog-hero.php и sections/blog-list.php, статья —
 * sections/post-*.php, партиалы — template-parts/post-*.php и
 * blog-promo.php. Скрипт статьи — js/blog.js.
 *
 * Ритм общий для сайта: секции только с нижним отступом 72/48px,
 * карточки из токенов, шапки блоков — .os-head. Тёмный фон формы
 * и плитки — цвет шапки сайта.
 * ====================================================================== */

/* ---------- Первый экран блога ---------- */

.os-bhero {
  margin: 0 0 72px;
  padding: 40px 0 56px;
  background: linear-gradient(180deg, var(--os-warm) 0%, rgba(255, 247, 241, 0.35) 100%);
}

.os-bhero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 48px;
  align-items: end;
}

.os-bhero__main,
.os-bhero__side {
  min-width: 0;
}

.os-bhero__eyebrow {
  display: inline-block;
  margin: 0 0 16px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 117, 0, 0.28);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--os-accent);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
}

.os-bhero__title {
  margin: 0;
  color: var(--os-ink);
  font-size: 44px;
  font-weight: 700;
  line-height: 52px;
  text-wrap: balance;
}

.os-bhero__lead {
  max-width: 620px;
  margin: 16px 0 0 !important;
  color: var(--os-ink-soft);
  font-size: 16px;
  line-height: 26px;
}

.os-bsearch__label {
  display: block;
  margin: 0 0 10px 4px;
  color: var(--os-ink);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 20px;
}

.os-bsearch__field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 20px;
  border: 1px solid var(--os-line);
  border-radius: 56px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(47, 56, 68, 0.08);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.os-bsearch__field:focus-within {
  border-color: var(--os-accent);
  box-shadow: 0 0 0 3px rgba(255, 117, 0, 0.12), 0 12px 40px rgba(47, 56, 68, 0.08);
}

.os-bsearch__icon {
  display: flex;
  flex-shrink: 0;
  color: var(--os-muted);
}

.os-bsearch__icon svg {
  width: 20px;
  height: 20px;
}

.os-bsearch .os-bsearch__input {
  flex: 1;
  min-width: 0;
  width: auto;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--os-ink);
  font-size: 15px;
}

.os-bsearch__input::placeholder {
  color: var(--os-muted);
}

.os-bsearch__input::-webkit-search-cancel-button {
  display: none;
}

.os-bsearch__btn {
  flex-shrink: 0;
  height: 48px;
  padding: 0 28px;
  border-radius: 48px;
  background: var(--os-accent);
  box-shadow: 0 4px 16px rgba(255, 117, 0, 0.24);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  transition: background 0.2s, box-shadow 0.2s;
}

.os-bsearch__btn:hover {
  background: var(--os-accent-dark);
  box-shadow: 0 6px 22px rgba(255, 117, 0, 0.34);
}

.os-bhero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 16px 0 0 4px;
  color: var(--os-ink-soft);
  font-size: 13.5px;
  line-height: 20px;
}

.os-bhero__fact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.os-bhero__fact svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--os-accent);
}

.os-bhero__fact b {
  color: var(--os-ink);
  font-weight: 700;
}

.os-bhero__fact_link {
  color: var(--os-accent);
  font-weight: 600;
  text-decoration: none;
}

.os-bhero__fact_link:hover {
  color: var(--os-accent-dark);
}


/* ---------- Карточка статьи ---------- */

.os-pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.os-pcard:hover {
  border-color: rgba(255, 117, 0, 0.4);
  box-shadow: 0 10px 28px rgba(47, 56, 68, 0.08);
}

.os-pcard:has(.os-pcard__link:focus-visible) {
  outline: 3px solid rgba(255, 117, 0, 0.35);
  outline-offset: 2px;
}

.os-pcard__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--os-warm);
}

.os-pcard__img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  transition: transform 0.4s;
}

.os-pcard:hover .os-pcard__img {
  transform: scale(1.03);
}

.os-pcard__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: rgba(255, 117, 0, 0.45);
}

.os-pcard__ph svg {
  width: 48px;
  height: 48px;
}

.os-pcard__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--os-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.os-pcard__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px;
}

.os-pcard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 12px;
  color: var(--os-muted);
  font-size: 13.5px;
  line-height: 20px;
}

.os-pcard__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}

.os-pcard__read {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.os-pcard__read svg {
  width: 15px;
  height: 15px;
}

.os-pcard__title {
  margin: 0 0 10px;
  color: var(--os-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
}

.os-pcard__link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

/* Вся карточка — ссылка заголовка. */
.os-pcard__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.os-pcard__link:focus-visible {
  outline: none;
}

.os-pcard:hover .os-pcard__link {
  color: var(--os-accent);
}

.os-pcard__lead {
  display: -webkit-box;
  margin: 0 0 18px !important;
  overflow: hidden;
  color: var(--os-ink-soft);
  font-size: 13.5px;
  line-height: 21px;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.os-pcard__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  color: var(--os-accent);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  transition: gap 0.2s;
}

.os-pcard__more svg {
  width: 16px;
  height: 16px;
}

.os-pcard:hover .os-pcard__more {
  gap: 10px;
}

/* Крупная карточка свежей статьи */
.os-pcard_featured {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  margin: 0 0 16px;
}

.os-pcard_featured .os-pcard__media {
  min-height: 340px;
  aspect-ratio: auto;
}

.os-pcard_featured .os-pcard__img {
  position: absolute;
  inset: 0;
}

.os-pcard_featured .os-pcard__body {
  justify-content: center;
  padding: 40px;
}

.os-pcard_featured .os-pcard__title {
  margin-bottom: 14px;
  font-size: 26px;
  line-height: 34px;
  text-wrap: balance;
}

.os-pcard_featured .os-pcard__lead {
  margin-bottom: 24px !important;
  font-size: 15px;
  line-height: 26px;
  -webkit-line-clamp: 4;
}


/* ---------- Лента ---------- */

.os-blist {
  margin: 0 0 72px;
}

.os-blist__grid,
.os-prelated__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.os-blist__pages {
  margin-top: 40px;
}

.os-blist__empty {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 32px;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: var(--os-warm);
  text-align: center;
}

.os-blist__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 0 16px;
  border-radius: 50%;
  background: #fff;
  color: var(--os-accent);
}

.os-blist__empty-icon svg {
  width: 26px;
  height: 26px;
}

.os-blist__empty-title {
  margin: 0 0 8px;
  color: var(--os-ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 26px;
}

.os-blist__empty-text {
  margin: 0 0 24px !important;
  color: var(--os-ink-soft);
  font-size: 15px;
  line-height: 26px;
}

/* Плитка «Подобрать программу» */
.os-bpromo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 32px;
  border-radius: var(--os-radius);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 117, 0, 0.28) 0%, rgba(255, 117, 0, 0) 55%),
    #1c2e48;
  color: #fff;
}

.os-bpromo__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 0 20px;
  border-radius: 14px;
  background: rgba(255, 117, 0, 0.16);
  color: var(--os-accent);
}

.os-bpromo__icon svg {
  width: 26px;
  height: 26px;
}

.os-bpromo__title {
  margin: 0 0 10px;
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  line-height: 26px;
}

.os-bpromo__text {
  margin: 0 0 24px !important;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13.5px;
  line-height: 21px;
}

.os-bpromo__action {
  margin-top: auto;
}


/* ---------- Первый экран статьи ---------- */

.os-phero {
  margin: 0 0 72px;
  padding: 40px 0 56px;
  background: linear-gradient(180deg, var(--os-warm) 0%, rgba(255, 247, 241, 0.35) 100%);
}

.os-phero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 48px;
  align-items: center;
}

.os-phero__grid_single {
  grid-template-columns: minmax(0, 860px);
}

.os-phero__main {
  min-width: 0;
}

.os-phero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}

.os-phero__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 117, 0, 0.2);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--os-ink-soft);
  font-size: 13.5px;
  line-height: 20px;
}

.os-phero__chip svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  color: var(--os-accent);
}

.os-phero__title {
  margin: 0;
  color: var(--os-ink);
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
  text-wrap: balance;
}

.os-phero__lead {
  max-width: 640px;
  margin: 16px 0 0 !important;
  color: var(--os-ink-soft);
  font-size: 16px;
  line-height: 26px;
}

.os-phero__people {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  margin: 28px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid rgba(255, 117, 0, 0.16);
}

.os-phero__media {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--os-radius);
  background: var(--os-warm);
  box-shadow: 0 12px 40px rgba(47, 56, 68, 0.08);
}

.os-phero__img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}


/* ---------- Автор и эксперт ---------- */

.os-pauthor_byline {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.os-pauthor__avatar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--os-accent);
}

.os-pauthor__avatar img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

.os-pauthor__initials {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.os-pauthor__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.os-pauthor__label {
  color: var(--os-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.os-pauthor__name {
  color: var(--os-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
}

a.os-pauthor__name:hover {
  color: var(--os-accent);
}

.os-pauthor_card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin: 24px 0 0;
  padding: 32px;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: var(--os-warm);
}

.os-pauthor_card .os-pauthor__avatar {
  width: 72px;
  height: 72px;
}

.os-pauthor_card .os-pauthor__initials {
  font-size: 24px;
}

.os-pauthor_card .os-pauthor__name {
  margin-top: 4px;
  font-size: 19px;
  font-weight: 700;
  line-height: 26px;
}

.os-pauthor__position {
  color: var(--os-ink-soft);
  font-size: 13.5px;
  line-height: 21px;
}

.os-pauthor__bio {
  margin: 10px 0 0 !important;
  color: var(--os-ink-soft);
  font-size: 15px;
  line-height: 26px;
}


/* ---------- Статья: сетка, текст, колонка ---------- */

.os-post {
  margin: 0 0 72px;
}

/* Колонка тянется на всю высоту текста — иначе липкому блоку
   внутри неё негде двигаться (см. .os-seo_aside). */
.os-post__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 48px;
  align-items: stretch;
}

.os-post__main {
  min-width: 0;
  max-width: 780px;
}

.os-post__aside {
  min-width: 0;
}

/* Список оглавления сжимается и прокручивается внутри, форма — нет:
   она всегда целиком на экране. */
.os-post__sticky {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(100vh - 140px);
}

/* Полоса прочтения */
.os-pread {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1001;
  height: 3px;
  pointer-events: none;
}

.os-pread__bar {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--os-accent) 0%, var(--os-accent-dark) 100%);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* Текст статьи */
.os-post__content {
  color: var(--os-ink);
  font-size: 16px;
  line-height: 26px;
  overflow-wrap: break-word;
}

.os-post__content > :first-child {
  margin-top: 0;
}

.os-post__content p {
  margin: 0 0 18px;
}

.os-post__content h2 {
  margin: 48px 0 16px;
  color: var(--os-ink);
  font-size: 26px;
  font-weight: 700;
  line-height: 34px;
  text-wrap: balance;
  scroll-margin-top: 120px;
}

.os-post__content h3 {
  margin: 32px 0 12px;
  color: var(--os-ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 26px;
  scroll-margin-top: 120px;
}

.os-post__content h4 {
  margin: 24px 0 10px;
  color: var(--os-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
}

.os-post__content a {
  color: var(--os-accent-dark);
  text-decoration: underline;
  text-decoration-color: rgba(255, 117, 0, 0.35);
  text-underline-offset: 3px;
  transition: color 0.2s, text-decoration-color 0.2s;
}

.os-post__content a:hover {
  color: var(--os-accent);
  text-decoration-color: currentColor;
}

.os-post__content strong,
.os-post__content b {
  font-weight: 700;
}

/* Маркеры и номера — только у обычных списков. Списки, которые автор
   свёрстал сам встроенными стилями (FAQ, чек-листы), оформлены им же:
   наш маркер лёг бы поверх его рамки и отступов. */
.os-post__content ul:not([style]),
.os-post__content ol:not([style]) {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.os-post__content ul:not([style]) > li:not([style]),
.os-post__content ol:not([style]) > li:not([style]) {
  position: relative;
  margin: 0 0 10px;
}

.os-post__content ul:not([style]) > li:not([style]) {
  padding-left: 26px;
}

.os-post__content ul:not([style]) > li:not([style])::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--os-accent);
}

.os-post__content ol:not([style]) {
  counter-reset: os-ol;
}

.os-post__content ol:not([style]) > li:not([style]) {
  padding-left: 36px;
  counter-increment: os-ol;
}

.os-post__content ol:not([style]) > li:not([style])::before {
  content: counter(os-ol);
  position: absolute;
  top: 1px;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--os-accent-soft);
  color: var(--os-accent-dark);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}

.os-post__content li > ul,
.os-post__content li > ol {
  margin: 10px 0 0;
}

.os-post__content blockquote {
  margin: 28px 0;
  padding: 20px 24px;
  border-left: 3px solid var(--os-accent);
  border-radius: 0 var(--os-radius) var(--os-radius) 0;
  background: var(--os-warm);
}

.os-post__content figure {
  margin: 28px 0;
}

.os-post__content img {
  border-radius: var(--os-radius);
}

.os-post__content figcaption {
  margin: 8px 0 0;
  color: var(--os-muted);
  font-size: 13.5px;
  line-height: 20px;
  text-align: center;
}

.os-post__content iframe,
.os-post__content video {
  max-width: 100%;
  border-radius: var(--os-radius);
}

.os-post__content hr {
  margin: 40px 0;
  border: 0;
  border-top: 1px solid var(--os-line-cool);
}

/* Таблицы прокручиваются внутри своей рамки, а не всей страницей. */
.os-post__content .wp-block-table,
.os-post__content > table {
  display: block;
  margin: 28px 0;
  overflow-x: auto;
  border: 1px solid var(--os-line-cool);
  border-radius: var(--os-radius);
  -webkit-overflow-scrolling: touch;
}

.os-post__content table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 21px;
}

.os-post__content .wp-block-table table {
  margin: 0;
  border: 0;
}

.os-post__content th:not([style]),
.os-post__content td:not([style]) {
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--os-line-cool);
  text-align: left;
  vertical-align: top;
}

.os-post__content th:not([style]) + th:not([style]),
.os-post__content td:not([style]) + td:not([style]) {
  border-left: 1px solid var(--os-line-cool);
}

.os-post__content thead th,
.os-post__content thead td {
  background: var(--os-warm);
  color: var(--os-ink);
  font-weight: 700;
}

.os-post__content tbody tr:last-child td:not([style]),
.os-post__content tbody tr:last-child th:not([style]) {
  border-bottom: 0;
}

/* Поделиться */
.os-post__share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 40px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--os-line-cool);
}

.os-post__share-label {
  color: var(--os-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}

.os-post__share-list {
  display: flex;
  gap: 8px;
}

.os-post__share-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--os-line-cool);
  border-radius: 50%;
  background: #fff;
  color: var(--os-ink-soft);
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.os-post__share-btn:hover,
.os-post__share-btn.is-copied {
  border-color: var(--os-accent);
  background: var(--os-accent-soft);
  color: var(--os-accent);
}

.os-post__share-btn svg {
  width: 18px;
  height: 18px;
}

.os-post__share-copied {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--os-dark);
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 0.2s, transform 0.2s;
}

.os-post__share-btn.is-copied .os-post__share-copied {
  opacity: 1;
  transform: translate(-50%, 0);
}


/* ---------- Оглавление ---------- */

.os-ptoc_aside {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 24px 12px 12px;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: var(--os-warm);
}

.os-ptoc__title {
  margin: 0 0 12px;
  padding: 0 12px;
  color: var(--os-ink);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 24px;
  text-transform: uppercase;
}

.os-ptoc__list {
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 117, 0, 0.3) transparent;
}

.os-ptoc__item {
  margin: 0;
  padding: 0;
}

.os-ptoc__item::before {
  display: none;
}

.os-ptoc__link {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--os-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  transition: color 0.2s, background 0.2s, box-shadow 0.2s;
}

.os-ptoc__num {
  flex-shrink: 0;
  min-width: 18px;
  color: var(--os-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 20px;
  transition: color 0.2s;
}

.os-ptoc__link:hover {
  color: var(--os-accent);
}

.os-ptoc__link.is-active {
  background: #fff;
  box-shadow: 0 6px 18px rgba(47, 56, 68, 0.08);
  color: var(--os-accent);
}

.os-ptoc__link.is-active .os-ptoc__num {
  color: var(--os-accent);
}

/* В потоке текста — только на узком экране */
.os-ptoc_inline {
  display: none;
  margin: 0 0 32px;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: var(--os-warm);
}

.os-ptoc__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  cursor: pointer;
  list-style: none;
}

.os-ptoc__summary::-webkit-details-marker {
  display: none;
}

.os-ptoc__summary-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: var(--os-accent);
}

.os-ptoc__summary-icon svg {
  width: 18px;
  height: 18px;
}

.os-ptoc_inline .os-ptoc__title {
  flex: 1;
  margin: 0;
  padding: 0;
}

.os-ptoc__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 14px;
  background: var(--os-accent-soft);
  color: var(--os-accent);
  font-size: 13.5px;
  font-weight: 600;
}

.os-ptoc__chevron {
  width: 9px;
  height: 9px;
  margin: -4px 6px 0 4px;
  border-right: 2px solid var(--os-ink-soft);
  border-bottom: 2px solid var(--os-ink-soft);
  transform: rotate(45deg);
  transition: transform 0.25s, margin 0.25s;
}

.os-ptoc_inline[open] .os-ptoc__chevron {
  margin-top: 4px;
  transform: rotate(-135deg);
}

.os-ptoc_inline .os-ptoc__list {
  padding: 0 8px 12px;
}


/* ---------- Форма в колонке ---------- */

.os-pform {
  flex-shrink: 0;
  padding: 24px;
  border-radius: var(--os-radius);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 117, 0, 0.22) 0%, rgba(255, 117, 0, 0) 50%),
    #1c2e48;
  color: #fff;
}

.os-pform__title {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 24px;
  text-transform: uppercase;
}

.os-pform__note {
  margin: 4px 0 16px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 13.5px;
  line-height: 21px;
}

.os-pform__cf7 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.os-pform__cf7 .hidden-fields-container,
.os-pform__cf7 .akismet-fields-container,
.os-pform__cf7 .wpcf7-spinner {
  display: none;
}

.os-pform__cf7 .os-form__row,
.os-pform__cf7 .flex {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.os-pform__cf7 .os-form__row > *,
.os-pform__cf7 .flex > * {
  min-width: 0;
}

.os-pform__cf7 .flex select,
.os-pform__cf7 .flex textarea {
  grid-column: 1 / -1;
}

.os-pform input[type="text"],
.os-pform input[type="tel"],
.os-pform input[type="email"],
.os-pform select,
.os-pform textarea {
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 48px;
  background: #fff;
  color: var(--os-ink);
  font-family: inherit;
  font-size: 15px;
}

.os-pform select {
  padding-right: 42px;
  background: #fff url(../images/section11-select.svg) no-repeat right 16px center;
  cursor: pointer;
}

.os-pform textarea {
  height: 96px;
  padding: 14px 18px;
  border-radius: 16px;
  resize: none;
}

.os-pform input:focus,
.os-pform select:focus,
.os-pform textarea:focus {
  border-color: var(--os-accent);
  box-shadow: 0 0 0 3px rgba(255, 117, 0, 0.3);
}

.os-pform .wpcf7-submit {
  width: 100%;
  height: 52px;
  margin: 2px 0 0;
  padding: 0 24px;
  border: 0;
  border-radius: 52px;
  background: var(--os-accent);
  box-shadow: 0 4px 16px rgba(255, 117, 0, 0.24);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.os-pform .wpcf7-submit:hover {
  background: var(--os-accent-dark);
}

.os-pform .wpcf7-submit:disabled {
  box-shadow: none;
  opacity: 0.45;
  cursor: default;
}

.os-pform .wpcf7-acceptance {
  display: block;
  margin: 0;
}

.os-pform .wpcf7-list-item {
  margin: 0;
}

.os-pform .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.os-pform input[type="checkbox"] {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 5px;
}

.os-pform .wpcf7-list-item-label {
  color: rgba(255, 255, 255, 0.64);
  font-size: 12px;
  line-height: 17px;
}

.os-pform .wpcf7-list-item-label a {
  color: #fff;
  text-decoration: underline;
}

.os-pform .wpcf7-not-valid {
  border-color: #d63638;
}

.os-pform .wpcf7-not-valid-tip {
  margin: 4px 0 0 12px;
  color: #ffb4a8;
  font-size: 11.5px;
  line-height: 15px;
}

.os-pform .wpcf7-response-output {
  margin: 12px 0 0 !important;
  padding: 10px 14px !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  border-radius: 12px !important;
  color: #fff;
  font-size: 13px;
  line-height: 18px;
}


/* ---------- Программы из статьи ---------- */

.os-pprogs {
  margin: 0 0 72px;
}

.os-pprogs__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.os-pprog {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.os-pprog:hover {
  border-color: rgba(255, 117, 0, 0.4);
  box-shadow: 0 10px 28px rgba(47, 56, 68, 0.08);
}

.os-pprog:has(.os-pprog__link:focus-visible) {
  outline: 3px solid rgba(255, 117, 0, 0.35);
  outline-offset: 2px;
}

.os-pprog__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--os-warm);
}

.os-pprog__media img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  transition: transform 0.4s;
}

.os-pprog:hover .os-pprog__media img {
  transform: scale(1.03);
}

.os-pprog__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px;
}

.os-pprog__type {
  margin: 0 0 8px;
  color: var(--os-accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.os-pprog__title {
  margin: 0 0 16px;
  color: var(--os-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
}

.os-pprog__link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.os-pprog__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.os-pprog__link:focus-visible {
  outline: none;
}

.os-pprog:hover .os-pprog__link {
  color: var(--os-accent);
}

.os-pprog__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding: 16px 0 0;
  border-top: 1px solid var(--os-line-cool);
}

.os-pprog__price {
  color: var(--os-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
}

.os-pprog__price s {
  margin-left: 6px;
  color: var(--os-muted);
  font-size: 13.5px;
  font-weight: 400;
}

.os-pprog__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--os-accent);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  transition: gap 0.2s;
}

.os-pprog__more svg {
  width: 16px;
  height: 16px;
}

.os-pprog:hover .os-pprog__more {
  gap: 10px;
}


/* Одна программа — широкая карточка */
.os-pprogs__grid.os-pprogs__grid_single {
  grid-template-columns: minmax(0, 780px);
}

.os-pprogs__grid_single .os-pprog {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
}

.os-pprogs__grid_single .os-pprog__media {
  aspect-ratio: auto;
  min-height: 200px;
}

@media (max-width: 560px) {
  .os-pprogs__grid_single .os-pprog {
    display: flex;
  }

  .os-pprogs__grid_single .os-pprog__media {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}


/* ---------- Похожие статьи ---------- */

.os-prelated {
  margin: 0 0 72px;
}

.os-prelated__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin: 0 0 32px;
}

.os-prelated__head .os-head {
  margin: 0;
}


/* ---------- Адаптив блога ---------- */

@media (max-width: 1150px) {
  .os-bhero__title,
  .os-phero__title {
    font-size: 36px;
    line-height: 44px;
  }

  .os-post__grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px;
  }

  .os-pcard_featured .os-pcard__body {
    padding: 32px;
  }
}

/* Невысокий экран: липкая колонка не помещается — пусть едет с текстом. */
@media (min-width: 901px) and (max-height: 700px) {
  .os-post__sticky {
    position: static;
    max-height: none;
  }
}

@media (max-width: 900px) {
  .os-bhero__grid,
  .os-phero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }

  .os-phero__media {
    aspect-ratio: 16 / 9;
  }

  .os-blist__grid,
  .os-prelated__grid,
  .os-pprogs__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .os-pcard_featured {
    grid-template-columns: minmax(0, 1fr);
  }

  .os-pcard_featured .os-pcard__media {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  /* Колонка встаёт под текст: оглавление в ней не нужно —
     его заменяет свёрнутое над текстом, форма остаётся. */
  .os-post__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .os-post__main {
    max-width: none;
  }

  .os-post__sticky {
    position: static;
    max-height: none;
  }

  .os-ptoc_aside {
    display: none;
  }

  .os-ptoc_inline {
    display: block;
  }

  .os-pform {
    max-width: 560px;
  }
}

@media (max-width: 780px) {
  .os-bhero,
  .os-phero {
    margin-bottom: 48px;
    padding: 24px 0 40px;
  }

  .os-blist,
  .os-post,
  .os-pprogs,
  .os-prelated {
    margin-bottom: 48px;
  }

  .os-bhero__title,
  .os-phero__title {
    font-size: 27px;
    line-height: 35px;
  }

  .os-bhero__lead,
  .os-phero__lead {
    font-size: 15px;
    line-height: 24px;
  }

  .os-prelated__head {
    margin-bottom: 24px;
  }

  .os-pcard_featured .os-pcard__body {
    padding: 24px;
  }

  .os-pcard_featured .os-pcard__title {
    font-size: 19px;
    line-height: 26px;
  }

  .os-post__content {
    font-size: 15px;
  }

  .os-post__content h2 {
    margin-top: 40px;
  }

  .os-post__content h3 {
    margin-top: 28px;
  }
}

@media (max-width: 560px) {
  .os-blist__grid,
  .os-prelated__grid,
  .os-pprogs__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .os-bsearch__field {
    padding-left: 16px;
  }

  .os-bsearch__btn {
    padding: 0 20px;
  }

  .os-bpromo,
  .os-pauthor_card {
    padding: 24px;
  }

  .os-pauthor_card {
    gap: 16px;
  }

  .os-pauthor_card .os-pauthor__avatar {
    width: 56px;
    height: 56px;
  }

  .os-pform {
    padding: 24px 20px;
  }

  .os-pform__cf7 .os-form__row,
  .os-pform__cf7 .flex {
    grid-template-columns: minmax(0, 1fr);
  }

  .os-prelated__all {
    width: 100%;
  }
}


/* =========================================================================
 * Преподаватели и авторы
 *
 * Страница человека — sections/person-*.php, архивы — people-list.php,
 * блок на программе — course-teachers.php, карточка —
 * template-parts/person-card.php. Данные — inc/people.php.
 * ====================================================================== */

/* ---------- Карточка человека ---------- */

.os-person {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.os-person:hover {
  border-color: rgba(255, 117, 0, 0.4);
  box-shadow: 0 10px 28px rgba(47, 56, 68, 0.08);
}

.os-person:has(.os-person__link:focus-visible) {
  outline: 3px solid rgba(255, 117, 0, 0.35);
  outline-offset: 2px;
}

.os-person__photo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--os-accent) 0%, var(--os-accent-dark) 100%);
}

.os-person__photo img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

.os-person__initials {
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

.os-person__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  width: 100%;
}

.os-person__name {
  margin: 0 0 4px;
  color: var(--os-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
}

.os-person__link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.os-person__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.os-person__link:focus-visible {
  outline: none;
}

.os-person:hover .os-person__link {
  color: var(--os-accent);
}

.os-person__position {
  color: var(--os-ink-soft);
  font-size: 13.5px;
  line-height: 21px;
}

.os-person__meta {
  margin: 8px 0 0;
  color: var(--os-accent-dark);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 20px;
}

.os-person__text {
  display: -webkit-box;
  margin: 12px 0 0 !important;
  overflow: hidden;
  color: var(--os-ink-soft);
  font-size: 13.5px;
  line-height: 21px;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.os-person__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 16px;
  color: var(--os-accent);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  transition: gap 0.2s;
}

.os-person__more svg {
  width: 16px;
  height: 16px;
}

.os-person:hover .os-person__more {
  gap: 10px;
}

/* Широкая — на программе: фото слева, текст справа */
.os-person_wide {
  flex-direction: row;
  gap: 24px;
  padding: 32px;
}

.os-person_wide .os-person__photo {
  width: 112px;
  height: 112px;
}

.os-person_wide .os-person__name {
  font-size: 19px;
  line-height: 26px;
}

.os-person_wide .os-person__text {
  -webkit-line-clamp: 5;
}

/* Компактная — слайдер раздела: только фото, имя, должность */
.os-person_compact {
  align-items: center;
  gap: 12px;
  padding: 24px 20px;
  text-align: center;
}

.os-person_compact .os-person__photo {
  width: 96px;
  height: 96px;
}

.os-person_compact .os-person__body {
  align-items: center;
}

.os-person_compact .os-person__name {
  font-size: 15.5px;
  line-height: 22px;
}

.os-person_compact .os-person__position {
  font-size: 13px;
  line-height: 19px;
}


/* ---------- Первый экран человека ---------- */

.os-pphero {
  margin: 0 0 72px;
  padding: 40px 0 56px;
  background: linear-gradient(180deg, var(--os-warm) 0%, rgba(255, 247, 241, 0.35) 100%);
}

.os-pphero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: center;
}

.os-pphero__main {
  min-width: 0;
}

.os-pphero__eyebrow {
  display: inline-block;
  margin: 0 0 16px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 117, 0, 0.28);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--os-accent);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}

.os-pphero__title {
  margin: 0;
  color: var(--os-ink);
  font-size: 44px;
  font-weight: 700;
  line-height: 52px;
  text-wrap: balance;
}

.os-pphero__position {
  margin: 10px 0 0;
  color: var(--os-accent-dark);
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
}

.os-pphero__lead {
  max-width: 640px;
  margin: 16px 0 0 !important;
  color: var(--os-ink-soft);
  font-size: 16px;
  line-height: 26px;
}

.os-pphero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0;
}

.os-pphero__fact {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 12px;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: #fff;
  color: var(--os-ink-soft);
  font-size: 13.5px;
  line-height: 20px;
}

.os-pphero__fact b {
  display: block;
  color: var(--os-ink);
  font-size: 15px;
  font-weight: 700;
}

.os-pphero__fact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--os-accent-soft);
  color: var(--os-accent);
}

.os-pphero__fact-icon svg {
  width: 20px;
  height: 20px;
}

.os-pphero__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--os-accent) 0%, var(--os-accent-dark) 100%);
  box-shadow: 0 0 0 10px #fff, 0 20px 50px rgba(47, 56, 68, 0.12);
}

.os-pphero__img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

.os-pphero__initials {
  color: #fff;
  font-size: 96px;
  font-weight: 700;
  line-height: 1;
}


/* ---------- О человеке ---------- */

.os-pabout {
  margin: 0 0 72px;
}

.os-pabout__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 48px;
  align-items: start;
}

.os-pabout__grid_single {
  grid-template-columns: minmax(0, 860px);
}

.os-pabout__main {
  min-width: 0;
}

.os-pabout__bio {
  color: var(--os-ink);
  font-size: 16px;
  line-height: 26px;
}

.os-pabout__bio p {
  margin: 0 0 16px;
}

.os-pabout__block {
  margin: 32px 0 0;
}

.os-pabout__main > .os-pabout__block:first-child {
  margin-top: 0;
}

.os-pabout__label {
  margin: 0 0 14px;
  color: var(--os-accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.os-pabout__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.os-pabout__tags li {
  margin: 0;
  padding: 8px 14px;
  border: 1px solid var(--os-line);
  border-radius: 20px;
  background: var(--os-warm);
  color: var(--os-ink);
  font-size: 13.5px;
  line-height: 20px;
}

.os-pabout__tags li::before,
.os-pabout__timeline li::before,
.os-pabout__awards li::before,
.os-pabout__links li::before {
  display: none;
}

.os-pabout__timeline {
  position: relative;
  margin: 0;
  padding: 0 0 0 24px;
  list-style: none;
}

.os-pabout__timeline::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 5px;
  width: 2px;
  background: var(--os-line);
}

.os-pabout__timeline li {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0 0 18px;
  padding: 0;
}

.os-pabout__timeline li:last-child {
  margin-bottom: 0;
}

.os-pabout__timeline li::after {
  content: "";
  position: absolute;
  top: 6px;
  left: -24px;
  width: 12px;
  height: 12px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--os-accent);
  box-shadow: 0 0 0 1px rgba(255, 117, 0, 0.3);
}

.os-pabout__year {
  color: var(--os-accent-dark);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 20px;
}

.os-pabout__what {
  color: var(--os-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}

.os-pabout__detail {
  color: var(--os-ink-soft);
  font-size: 13.5px;
  line-height: 21px;
}

.os-pabout__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.os-pabout__card {
  padding: 24px;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: var(--os-warm);
}

.os-pabout__card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  color: var(--os-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
}

.os-pabout__card-title svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--os-accent);
}

.os-pabout__awards,
.os-pabout__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.os-pabout__awards li {
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 117, 0, 0.14);
  color: var(--os-ink);
  font-size: 13.5px;
  line-height: 21px;
}

.os-pabout__awards li:first-child {
  padding-top: 0;
  border-top: 0;
}

.os-pabout__awards span {
  display: block;
  color: var(--os-muted);
  font-size: 12px;
}

.os-pabout__links li {
  margin: 0 0 8px;
  padding: 0;
}

.os-pabout__links a {
  color: var(--os-accent-dark);
  font-size: 14px;
  line-height: 20px;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ---------- Направления и программы ---------- */

.os-pdirs,
.os-pposts,
.os-cteach,
.os-plist {
  margin: 0 0 72px;
}

.os-pdirs__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 32px;
}

.os-pdir {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: #fff;
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.os-pdir:hover {
  border-color: rgba(255, 117, 0, 0.4);
  box-shadow: 0 10px 28px rgba(47, 56, 68, 0.08);
}

.os-pdir__type {
  margin: 0 0 8px;
  color: var(--os-accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.os-pdir__name {
  margin: 0 0 16px;
  color: var(--os-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
}

.os-pdir__count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  color: var(--os-accent);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.os-pdir__count svg {
  width: 16px;
  height: 16px;
}

.os-pdirs__list,
.os-pposts__list {
  columns: 3;
  column-gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.os-pdirs__list li,
.os-pposts__list li {
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--os-line-cool);
  break-inside: avoid;
  font-size: 14px;
  line-height: 20px;
}

.os-pdirs__list li::before,
.os-pposts__list li::before {
  display: none;
}

.os-pdirs__list a,
.os-pposts__list a {
  color: var(--os-ink);
  text-decoration: none;
  transition: color 0.2s;
}

.os-pdirs__list a:hover,
.os-pposts__list a:hover {
  color: var(--os-accent);
}

.os-pdirs__all {
  margin: 32px 0 0;
}

.os-pposts__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.os-pposts__list {
  margin-top: 32px;
}


/* ---------- Преподаватели на программе ---------- */

.os-cteach__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.os-cteach__grid > .os-person:only-child {
  grid-column: 1 / -1;
  max-width: 860px;
}


/* ---------- Архивы ---------- */

.os-plist__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 40px;
}

.os-plist__nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--os-line);
  border-radius: 24px;
  background: #fff;
  color: var(--os-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}

.os-plist__nav a:hover {
  border-color: var(--os-accent);
  color: var(--os-accent);
}

.os-plist__nav span {
  color: var(--os-muted);
  font-weight: 400;
}

.os-plist__group {
  margin: 0 0 48px;
  scroll-margin-top: 120px;
}

.os-plist__group:last-child {
  margin-bottom: 0;
}

.os-plist__title {
  margin: 0 0 24px;
  color: var(--os-ink);
  font-size: 26px;
  font-weight: 700;
  line-height: 34px;
}

.os-plist__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}


/* ---------- Адаптив ---------- */

@media (max-width: 1150px) {
  .os-pphero__title {
    font-size: 36px;
    line-height: 44px;
  }

  .os-pphero__grid {
    grid-template-columns: minmax(0, 1fr) 260px;
  }

  .os-pabout__grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px;
  }

  .os-plist__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .os-pphero__grid,
  .os-pabout__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .os-pphero__media {
    order: -1;
    width: 160px;
  }

  .os-pphero__initials {
    font-size: 56px;
  }

  .os-pdirs__grid,
  .os-pposts__grid,
  .os-plist__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .os-cteach__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .os-pdirs__list,
  .os-pposts__list {
    columns: 2;
  }
}

@media (max-width: 780px) {
  .os-pphero {
    margin-bottom: 48px;
    padding: 24px 0 40px;
  }

  .os-pphero__title {
    font-size: 27px;
    line-height: 35px;
  }

  .os-pphero__lead {
    font-size: 15px;
    line-height: 24px;
  }

  .os-pabout,
  .os-pdirs,
  .os-pposts,
  .os-cteach,
  .os-plist {
    margin-bottom: 48px;
  }

  .os-plist__title {
    font-size: 19px;
    line-height: 26px;
  }
}

@media (max-width: 560px) {
  .os-pdirs__grid,
  .os-pposts__grid,
  .os-plist__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .os-pdirs__list,
  .os-pposts__list {
    columns: 1;
  }

  .os-person_wide {
    flex-direction: column;
    padding: 24px;
  }

  .os-person_wide .os-person__photo {
    width: 88px;
    height: 88px;
  }

  .os-pphero__fact {
    width: 100%;
  }
}


/* ---------- Преподаватели рубрики (страница категории) ---------- */

.os-rteach {
  margin: 0 0 72px;
}

.os-rteach__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.os-rteach__grid > .os-person:only-child {
  grid-column: 1 / -1;
  max-width: 860px;
}

@media (max-width: 900px) {
  .os-rteach__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 780px) {
  .os-rteach {
    margin-bottom: 48px;
  }
}


/* ---------- Преподаватели раздела (слайдер на странице раздела) ---------- */

.os-steach {
  margin: 0 0 72px;
  scroll-margin-top: 120px;
}

.os-steach__slider .splide__slide {
  height: auto;
}

.os-steach__slider .splide__slide > .os-person {
  height: 100%;
}

@media (max-width: 780px) {
  .os-steach {
    margin-bottom: 48px;
  }
}


/* =========================================================================
 * Мобильная шапка (≤1149px), по образцу ДПО Проф
 *
 *   полоса:  город ⌄ слева — телефон справа;
 *   шапка:   логотип — «Заявка» — бургер;
 *   бургер:  город ⌄ отдельной строкой, ниже «А–Я Каталог курсов»
 *            и круглые иконки соцсетей.
 *
 * Разметка — header.php. Прежде в полосе стояли ещё часы и пять иконок,
 * и на экранах уже 400px она не помещалась в строку.
 * ====================================================================== */

/* .header .service из common.css задаёт display: block — без
   двойного класса компактная «Заявка» вылезала и на десктопе. */
.header .header-mob-cta,
.mob-action-links,
.city-toggle--burger {
  display: none;
}

.city-toggle__chevron {
  flex-shrink: 0;
  opacity: 0.75;
}

@media (max-width: 1149px) {
  /* ---------- Полоса: город — телефон ---------- */
  .site-header-top-mob {
    justify-content: space-between;
  }

  .site-header-top-mob .city-toggle--mob {
    margin: 0;
    padding: 2px 0;
    border: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
  }

  .site-header-top-mob .city-toggle--mob [data-city-label] {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .site-header-top-mob .topmob-phone {
    margin-left: auto;
  }

  /* ---------- Шапка: логотип — «Заявка» — бургер ---------- */

  /* common.css даёт шапке нижний отступ 36px (≤1150) и 24px (≤780)
     и снимает его только у страниц (body.page). На программах,
     категориях, блоге и профилях между шапкой и первым экраном
     оставалась белая полоса. Первый экран сам задаёт свой верхний
     отступ, поэтому у шапки его нет нигде. */
  .header.site-header {
    margin-bottom: 0;
  }

  .header .site-width {
    gap: 12px;
  }

  .header .logo {
    min-width: 0;
  }

  .header .logo .logo-text {
    min-width: 0;
  }

  .header .logo .logo-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header .header-mob-cta {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin: 0 4px 0 auto;
    /* Как кнопки сайта (.os-btn_primary): оранжевая «пилюля», белый текст. */
    padding: 10px 18px;
    border: 0;
    border-radius: 56px;
    background: var(--os-accent);
    box-shadow: 0 4px 16px rgba(255, 117, 0, 0.24);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    transition: background 0.2s, box-shadow 0.2s;
  }

  .header .header-mob-cta:hover {
    background: var(--os-accent-dark);
    box-shadow: 0 6px 22px rgba(255, 117, 0, 0.34);
    color: #fff !important;
  }

  .header .btn-menu {
    flex-shrink: 0;
  }

  /* ---------- Верх бургера ---------- */
  .mob-action-row {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 14px;
    padding: 16px;
  }

  .mob-action-row .city-toggle--burger {
    display: inline-flex;
    align-self: flex-start;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--os-ink);
    font-size: 15px;
    font-weight: 700;
  }

  .mob-action-row .city-toggle--burger svg:first-child {
    color: var(--os-accent);
  }

  .mob-action-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }

  .mob-catalog-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px 0 6px;
    border: 1px solid var(--os-line);
    border-radius: 40px;
    background: var(--os-warm);
    color: var(--os-ink);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }

  .mob-catalog-link .catalog-az {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 9px;
    border-radius: 28px;
    background: var(--os-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
  }

  .mob-action-links .header-mob-socials {
    gap: 8px;
  }

  .mob-action-links .mob-soc-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #1c2e48;
    color: #fff;
  }

  .mob-action-links .mob-soc-link svg {
    width: 17px;
    height: 17px;
  }

  .mob-action-links .mob-soc-link:hover {
    background: var(--os-accent);
  }
}

@media (max-width: 400px) {
  .header .logo .logo-sub {
    display: none;
  }

  .header .header-mob-cta {
    padding: 9px 13px;
  }
}


/* =========================================================================
 * Страница «Контакты»: способы связи, офис с картой, реквизиты
 *
 * sections/contacts-*.php. Ритм общий: только нижний отступ 72/48px,
 * шапка — .os-head, карточки — белые с рамкой --os-line. Блоки от
 * соседей не зависят и работают на любой странице с их полями.
 * ====================================================================== */

/* ---------- Способы связи ---------- */

.os-cch {
  margin: 0 0 72px;
}

/* Текст страницы из редактора стоит на месте лида шапки — и с тем же
   отступом от заголовка, что у .os-head__lead. */
.os-cch__intro {
  max-width: 760px;
  margin: -20px 0 32px;
  color: var(--os-ink-soft);
  font-size: 15px;
  line-height: 26px;
}

.os-cch__intro p {
  margin: 0 0 12px;
}

.os-cch__intro > :last-child {
  margin-bottom: 0;
}

.os-cch__intro a {
  color: var(--os-accent);
}

.os-cch__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.os-cch__card {
  display: flex;
  gap: 20px;
  min-width: 0;
  padding: 32px;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.os-cch__card:hover {
  border-color: rgba(255, 117, 0, 0.4);
  box-shadow: 0 10px 28px rgba(47, 56, 68, 0.08);
}

.os-cch__icon {
  display: flex;
  flex: 0 0 48px;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--os-accent-soft);
  color: var(--os-accent);
}

.os-cch__icon svg {
  width: 24px;
  height: 24px;
}

.os-cch__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.os-cch__label {
  margin: 0 0 6px;
  color: var(--os-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
}

.os-cch__value {
  color: var(--os-ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 26px;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 0.2s;
}

a.os-cch__value:hover {
  color: var(--os-accent);
}

.os-cch__text,
.os-cch__meta {
  margin: 8px 0 0 !important;
  color: var(--os-ink-soft);
  font-size: 13.5px;
  line-height: 21px;
}

.os-cch__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px !important;
}

.os-cch__meta svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: var(--os-accent);
}

/* Кнопка прижата к низу: в ряду из двух карточек кнопки стоят на одной
   линии, даже если подписи разной длины. */
.os-cch__action {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
}

.os-cch__action .os-btn.is-loading {
  opacity: 0.7;
  cursor: progress;
}

/* Первая карточка — главный способ связи, тёмная, как полоса цифр. */
.os-cch__card_featured {
  border-color: transparent;
  background: linear-gradient(135deg, #1e3254 0%, #1c2e48 55%, #162540 100%);
  box-shadow: 0 16px 40px rgba(28, 46, 72, 0.18);
}

.os-cch__card_featured:hover {
  border-color: transparent;
  box-shadow: 0 18px 44px rgba(28, 46, 72, 0.26);
}

.os-cch__card_featured .os-cch__icon {
  background: rgba(255, 255, 255, 0.08);
  color: #ff9944;
}

.os-cch__card_featured .os-cch__label,
.os-cch__card_featured .os-cch__meta svg {
  color: #ff9944;
}

.os-cch__card_featured .os-cch__value {
  color: #fff;
  font-size: 26px;
  line-height: 34px;
}

.os-cch__card_featured a.os-cch__value:hover {
  color: #ff9944;
}

.os-cch__card_featured .os-cch__text,
.os-cch__card_featured .os-cch__meta {
  color: rgba(255, 255, 255, 0.72);
}

.os-cch__card_featured .os-btn_outline {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.os-cch__card_featured .os-btn_outline:hover {
  border-color: var(--os-accent);
}

/* ---------- Офис и карта ---------- */

.os-cof {
  margin: 0 0 72px;
}

.os-cof__card {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  overflow: hidden;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: #fff;
}

.os-cof__info {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
  padding: 32px;
}

.os-cof__rows {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.os-cof__row {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 18px 0;
  border-top: 1px solid var(--os-line-cool);
}

.os-cof__row:first-child {
  padding-top: 0;
  border-top: 0;
}

.os-cof__row:last-child {
  padding-bottom: 0;
}

.os-cof__icon {
  display: flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--os-accent-soft);
  color: var(--os-accent);
}

.os-cof__icon svg {
  width: 20px;
  height: 20px;
}

.os-cof__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.os-cof__label {
  color: var(--os-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
}

.os-cof__value {
  color: var(--os-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}

.os-cof__value_html a {
  color: var(--os-accent);
  text-decoration: none;
}

.os-cof__value_html a:hover {
  text-decoration: underline;
}

.os-cof__sub {
  color: var(--os-ink-soft);
  font-size: 13.5px;
  line-height: 21px;
}

.os-cof__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
}

.os-cof__actions .os-btn svg,
.os-req__tools .os-btn svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

.os-cof__map {
  position: relative;
  min-height: 440px;
  background: var(--os-warm);
}

.os-cof__map iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Реквизиты ---------- */

.os-req {
  margin: 0 0 72px;
}

.os-req__card {
  padding: 32px;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: #fff;
}

.os-req__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin: 0 0 8px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--os-line-cool);
}

.os-req__org {
  display: flex;
  flex: 1 1 320px;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.os-req__org-label {
  color: var(--os-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
}

.os-req__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.os-req__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
}

.os-req__col {
  min-width: 0;
}

.os-req__col-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 6px;
  color: var(--os-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
}

.os-req__col-icon {
  display: flex;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--os-accent-soft);
  color: var(--os-accent);
}

.os-req__col-icon svg {
  width: 18px;
  height: 18px;
}

.os-req__list {
  margin: 0;
}

.os-req__row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px solid var(--os-line-cool);
}

.os-req__row:last-child {
  border-bottom: 0;
}

.os-req__key {
  margin: 0;
  color: var(--os-ink-soft);
  font-size: 13.5px;
  line-height: 21px;
}

.os-req__val {
  min-width: 0;
  margin: 0;
}

/* Значение — кнопка «скопировать». Поле нажатия шире текста на 12px
   с каждой стороны, а текст остаётся на линии колонки. */
.os-req__copy {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: calc(100% + 24px);
  margin: 0 -12px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s;
}

.os-req__copy:hover {
  background: var(--os-warm);
}

.os-req__copy:focus-visible {
  outline: 2px solid rgba(255, 117, 0, 0.5);
  outline-offset: 0;
}

.os-req__text {
  min-width: 0;
  color: var(--os-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  user-select: text;
}

.os-req__copy_name {
  width: auto;
  max-width: calc(100% + 24px);
}

.os-req__copy_name .os-req__text {
  font-size: 19px;
  font-weight: 700;
  line-height: 26px;
}

.os-req__copy_name .os-req__copy-icon {
  height: 26px;
}

.os-req__copy-icon {
  position: relative;
  flex: 0 0 20px;
  width: 20px;
  height: 24px;
  color: var(--os-muted);
  transition: color 0.2s;
}

.os-req__copy-icon svg {
  position: absolute;
  top: 50%;
  left: 1px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  transition: opacity 0.2s, transform 0.2s;
}

.os-req__copy:hover .os-req__copy-icon,
.os-req__copy.is-copied .os-req__copy-icon {
  color: var(--os-accent);
}

.os-req__i-done {
  opacity: 0;
  transform: scale(0.6);
}

.os-req__copy.is-copied .os-req__i-copy {
  opacity: 0;
  transform: scale(0.6);
}

.os-req__copy.is-copied .os-req__i-done {
  opacity: 1;
  transform: none;
}

/* Подтверждение копирования — плашка внизу экрана. */
.os-req__toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 1000;
  max-width: calc(100% - 32px);
  padding: 12px 20px;
  border-radius: 40px;
  background: var(--os-dark);
  box-shadow: 0 10px 28px rgba(13, 25, 40, 0.24);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 16px);
  transition: opacity 0.2s, transform 0.2s;
}

.os-req__toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.os-req__toast:empty {
  display: none;
}

/* ---------- Адаптив ---------- */

/* Две карточки в ряд на планшете узкие: иконку ставим над текстом,
   чтобы адрес почты помещался в строку. */
@media (max-width: 1150px) {
  .os-cch__card {
    flex-direction: column;
    gap: 16px;
  }
}

@media (max-width: 900px) {
  .os-cof__card {
    grid-template-columns: minmax(0, 1fr);
  }

  .os-cof__map {
    min-height: 340px;
  }

  .os-req__cols {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 780px) {
  .os-cch,
  .os-cof,
  .os-req {
    margin-bottom: 48px;
  }

  .os-cch__intro {
    margin: -12px 0 24px;
    font-size: 14.5px;
    line-height: 24px;
  }

  .os-cch__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .os-cch__card {
    flex-direction: row;
    gap: 20px;
  }
}

@media (max-width: 560px) {
  .os-cch__card {
    flex-direction: column;
    gap: 14px;
    padding: 24px;
  }

  .os-cch__value {
    font-size: 17px;
    line-height: 24px;
  }

  .os-cch__card_featured .os-cch__value {
    font-size: 24px;
    line-height: 32px;
  }

  /* Одна кнопка — во всю ширину, две (мессенджеры) — поровну в ряд. */
  .os-cch__action .os-btn {
    flex: 1 1 0;
  }

  .os-cof__info {
    padding: 24px;
  }

  .os-cof__actions .os-btn {
    flex: 1 1 100%;
  }

  .os-cof__map {
    min-height: 300px;
  }

  .os-req__card {
    padding: 24px;
  }

  .os-req__tools,
  .os-req__tools .os-btn {
    width: 100%;
  }

  .os-req__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 8px 0 4px;
  }

  .os-req__key {
    font-size: 12.5px;
    line-height: 18px;
  }

  .os-req__copy {
    padding: 4px 12px;
  }

  .os-req__copy_name .os-req__text {
    font-size: 17px;
    line-height: 24px;
  }
}


/* =========================================================================
 * Страница «Отзывы»: текст страницы и карточка «Оставьте отзыв»
 *
 * sections/reviews-thanks.php. Остальные блоки страницы — общие
 * (.os-stats, .os-vr, .os-reviews). Ритм общий: нижний отступ 72/48px.
 * ====================================================================== */

.os-rth {
  margin: 0 0 72px;
}

.os-rth__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 56px;
  align-items: start;
}

.os-rth__grid_single {
  grid-template-columns: minmax(0, 1fr);
}

.os-rth__main {
  min-width: 0;
}

.os-rth__text {
  max-width: 760px;
  color: var(--os-ink);
  font-size: 15px;
  line-height: 26px;
}

.os-rth__text p {
  margin: 0 0 16px;
}

.os-rth__text > :last-child {
  margin-bottom: 0;
}

.os-rth__text a {
  color: var(--os-accent);
}

.os-rth__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
  border: 1px solid var(--os-line);
  border-top: 4px solid var(--os-accent);
  border-radius: var(--os-radius);
  background: #fff;
  box-shadow: 0 16px 40px rgba(47, 56, 68, 0.08);
}

.os-rth__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 0 4px;
  border-radius: 14px;
  background: var(--os-accent-soft);
  color: var(--os-accent);
}

.os-rth__icon svg {
  width: 24px;
  height: 24px;
}

.os-rth__card-title {
  color: var(--os-ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 26px;
}

.os-rth__card-text {
  margin: 0 !important;
  color: var(--os-ink-soft);
  font-size: 13.5px;
  line-height: 21px;
}

.os-rth__platforms {
  display: grid;
  gap: 10px;
  margin: 8px 0 0;
}

.os-rth__platform {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--os-line);
  border-radius: 12px;
  background: var(--os-warm);
  color: var(--os-ink);
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.os-rth__platform:hover {
  border-color: rgba(255, 117, 0, 0.4);
  box-shadow: 0 10px 28px rgba(47, 56, 68, 0.08);
  color: var(--os-ink);
}

.os-rth__mark {
  display: flex;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.os-rth__platform-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}

.os-rth__arrow {
  display: flex;
  flex: 0 0 18px;
  color: var(--os-accent);
  transition: transform 0.2s;
}

.os-rth__arrow svg {
  width: 18px;
  height: 18px;
}

.os-rth__platform:hover .os-rth__arrow {
  transform: translateX(3px);
}

@media (max-width: 1150px) {
  .os-rth__grid {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 40px;
  }
}

@media (max-width: 900px) {
  .os-rth__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .os-rth__card {
    max-width: 520px;
  }
}

@media (max-width: 780px) {
  .os-rth {
    margin-bottom: 48px;
  }

  .os-rth__text {
    font-size: 14.5px;
    line-height: 24px;
  }
}

@media (max-width: 560px) {
  .os-rth__card {
    padding: 24px;
  }
}


/* =========================================================================
 * Страницы по адресу: оплата, вопросы, документы, лицензии
 *
 * Блоки sections/page-text, pay-methods, delivery, faq-groups,
 * doc-samples, lic-docs. Ритм общий: только нижний отступ 72/48px,
 * шапка — .os-head, карточки — белые с рамкой --os-line.
 * ====================================================================== */

/* ---------- Текст страницы вместо лида (section-head, параметр html) ---------- */

.os-head__html p {
  margin: 0 0 10px;
}

.os-head__html > :last-child {
  margin-bottom: 0;
}

.os-head__html a {
  color: var(--os-accent);
}

/* Первый экран этих страниц: под картинкой плашка гарантий. */
.os-page-payment .os-hero__img,
.os-page-faq .os-hero__img,
.os-page-documents .os-hero__img,
.os-page-licenses .os-hero__img {
  max-height: 400px;
}

/* ---------- Текст страницы ---------- */

.os-ptext {
  margin: 0 0 72px;
}

/* Ширина строки ограничена у текста, а не у блока: заголовку тесно
   в 860px, он переносился в три строки. */
.os-ptext__body {
  color: var(--os-ink);
  font-size: 15px;
  line-height: 26px;
}

.os-ptext__body h2 {
  margin: 0 0 24px;
  color: var(--os-ink);
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
  text-wrap: balance;
}

.os-ptext__body h3 {
  margin: 32px 0 14px;
  color: var(--os-ink);
  font-size: 22px;
  font-weight: 700;
  line-height: 30px;
}

.os-ptext__body p,
.os-ptext__body ul,
.os-ptext__body ol,
.os-ptext__body h3 {
  max-width: 860px;
}

.os-ptext__body h2 {
  max-width: 1000px;
}

.os-ptext__body p {
  margin: 0 0 16px;
}

.os-ptext__body > :last-child {
  margin-bottom: 0;
}

.os-ptext__body ul {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.os-ptext__body li {
  position: relative;
  margin: 0;
  padding: 0 0 0 22px;
}

.os-ptext__body li:before {
  content: "";
  position: absolute;
  top: 10px;
  left: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--os-accent);
}

.os-ptext__body a {
  color: var(--os-accent);
}

/* ---------- Способы оплаты ---------- */

.os-pay {
  margin: 0 0 72px;
}

.os-pay__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.os-pay__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 32px;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.os-pay__card:hover {
  border-color: rgba(255, 117, 0, 0.4);
  box-shadow: 0 10px 28px rgba(47, 56, 68, 0.08);
}

.os-pay__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0 0 20px;
}

.os-pay__icon,
.os-dlv__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--os-accent-soft);
  color: var(--os-accent);
}

.os-pay__icon svg,
.os-dlv__icon svg {
  width: 24px;
  height: 24px;
}

.os-pay__num {
  color: var(--os-line-cool);
  font-size: 26px;
  font-weight: 700;
  line-height: 34px;
  font-variant-numeric: tabular-nums;
}

.os-pay__name,
.os-dlv__name {
  margin: 0;
  color: var(--os-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
}

.os-pay__text,
.os-dlv__text {
  margin: 8px 0 0 !important;
  color: var(--os-ink-soft);
  font-size: 13.5px;
  line-height: 21px;
}

.os-pay__file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 16px 0 0;
  color: var(--os-accent);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
}

.os-pay__file svg {
  width: 16px;
  height: 16px;
}

.os-pay__file:hover {
  color: var(--os-accent-dark);
}

.os-pay__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin: 16px 0 0;
  padding: 20px 32px;
  border-radius: var(--os-radius);
  background: var(--os-warm);
}

.os-pay__logos-title {
  color: var(--os-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}

.os-pay__logos-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.os-pay__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 56px;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid var(--os-line);
  border-radius: 12px;
  background: #fff;
}

.os-pay__logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ---------- Доставка ---------- */

.os-dlv {
  margin: 0 0 72px;
}

.os-dlv__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.os-dlv__card {
  min-width: 0;
  padding: 32px;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.os-dlv__card:hover {
  border-color: rgba(255, 117, 0, 0.4);
  box-shadow: 0 10px 28px rgba(47, 56, 68, 0.08);
}

.os-dlv__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 20px;
}

.os-dlv__mark {
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--os-accent-soft);
  color: var(--os-accent-dark);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}

/* ---------- Вопросы по темам ---------- */

.os-fqg {
  margin: 0 0 72px;
}

.os-fqg__layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.os-fqg__nav {
  position: sticky;
  top: 120px;
  padding: 12px;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: #fff;
}

.os-fqg__nav-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.os-fqg__nav-list li {
  margin: 0;
}

.os-fqg__nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--os-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.os-fqg__nav-link:hover,
.os-fqg__nav-link.is-active {
  background: var(--os-warm);
  color: var(--os-accent);
}

.os-fqg__nav-icon {
  display: flex;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--os-accent-soft);
  color: var(--os-accent);
}

.os-fqg__nav-icon svg {
  width: 18px;
  height: 18px;
}

.os-fqg__nav-name {
  flex: 1 1 auto;
  min-width: 0;
}

.os-fqg__nav-count {
  flex: 0 0 auto;
  color: var(--os-muted);
  font-size: 12.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.os-fqg__groups {
  display: grid;
  gap: 48px;
  min-width: 0;
}

.os-fqg__group {
  scroll-margin-top: 120px;
}

.os-fqg__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  color: var(--os-ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 26px;
}

.os-fqg__title-icon {
  display: flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--os-accent-soft);
  color: var(--os-accent);
}

.os-fqg__title-icon svg {
  width: 20px;
  height: 20px;
}

/* ---------- Образцы документов ---------- */

.os-dsm {
  margin: 0 0 72px;
}

.os-dsm__list {
  display: grid;
  gap: 16px;
}

.os-dsm__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding: 32px;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: #fff;
}

.os-dsm__item_flat {
  grid-template-columns: minmax(0, 1fr);
}

/* Фото чередуются: у чётных — справа. */
.os-dsm__item:nth-child(even) .os-dsm__media {
  order: 2;
}

.os-dsm__media {
  min-width: 0;
  margin: 0;
}

.os-dsm__photo {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  background: var(--os-warm);
}

.os-dsm__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  transition: transform 0.3s;
}

.os-dsm__photo:hover img {
  transform: scale(1.03);
}

.os-dsm__zoom,
.os-lcd__zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 20px;
  background: rgba(13, 25, 40, 0.72);
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 16px;
}

.os-lcd__zoom svg {
  width: 14px;
  height: 14px;
}

.os-dsm__caption {
  margin: 12px 0 0;
  color: var(--os-ink-soft);
  font-size: 13.5px;
  line-height: 21px;
  text-align: center;
}

.os-dsm__body,
.os-lcd__body {
  min-width: 0;
}

.os-dsm__kind,
.os-lcd__kind {
  margin: 0 0 8px;
  color: var(--os-accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
}

.os-dsm__name,
.os-lcd__name {
  margin: 0 0 16px;
  color: var(--os-ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 26px;
}

.os-dsm__intro {
  display: flex;
  gap: 12px;
  margin: 0 0 20px;
  padding: 16px;
  border-radius: 12px;
  background: var(--os-warm);
}

.os-dsm__intro-icon {
  display: flex;
  flex: 0 0 24px;
  color: var(--os-accent);
}

.os-dsm__intro-icon svg {
  width: 24px;
  height: 24px;
}

.os-dsm__intro p {
  margin: 0 !important;
  color: var(--os-ink);
  font-size: 14px;
  line-height: 22px;
}

.os-dsm__points,
.os-lcd__points {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.os-dsm__points li,
.os-lcd__points li {
  display: flex;
  gap: 10px;
  margin: 0;
  color: var(--os-ink-soft);
  font-size: 13.5px;
  line-height: 21px;
}

.os-dsm__points b,
.os-lcd__points b {
  color: var(--os-ink);
  font-weight: 600;
}

.os-dsm__check,
.os-lcd__check {
  display: flex;
  flex: 0 0 20px;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--os-accent-soft);
  color: var(--os-accent);
}

.os-dsm__check svg,
.os-lcd__check svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.6;
}

/* ---------- Лицензия и свидетельства ---------- */

.os-lcd {
  margin: 0 0 72px;
}

.os-lcd__list {
  display: grid;
  gap: 16px;
}

.os-lcd__card {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  padding: 32px;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: #fff;
}

.os-lcd__card_flat {
  grid-template-columns: minmax(0, 1fr);
}

.os-lcd__scans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.os-lcd__scan {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--os-line);
  border-radius: 10px;
  background: var(--os-warm);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.os-lcd__scan:hover {
  border-color: rgba(255, 117, 0, 0.4);
  box-shadow: 0 10px 28px rgba(47, 56, 68, 0.08);
}

.os-lcd__scan img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1.414;
  object-fit: cover;
  object-position: top;
}

.os-lcd__scan_main {
  grid-column: 1 / -1;
  border-radius: 12px;
}

.os-lcd__facts {
  display: grid;
  margin: 0 0 20px;
  border-top: 1px solid var(--os-line-cool);
}

.os-lcd__fact {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--os-line-cool);
}

.os-lcd__fact dt {
  margin: 0;
  color: var(--os-ink-soft);
  font-size: 13.5px;
  line-height: 21px;
}

.os-lcd__fact dd {
  margin: 0;
  color: var(--os-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}

.os-lcd__text {
  margin: 0 0 20px !important;
  color: var(--os-ink);
  font-size: 15px;
  line-height: 26px;
}

.os-lcd__text:last-child {
  margin-bottom: 0 !important;
}

/* ---------- Адаптив ---------- */

@media (max-width: 1150px) {
  .os-pay__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .os-fqg__layout {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 32px;
  }

  .os-dsm__item {
    gap: 32px;
  }

  .os-lcd__card {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 32px;
  }

  .os-lcd__fact {
    grid-template-columns: 160px minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .os-dlv__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Оглавление тем — лентой ярлыков над вопросами. */
  .os-fqg__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .os-fqg__nav {
    position: static;
    margin: 0 -24px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }

  .os-fqg__nav-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 24px 4px;
    scrollbar-width: none;
  }

  .os-fqg__nav-list::-webkit-scrollbar {
    display: none;
  }

  .os-fqg__nav-link {
    flex: 0 0 auto;
    padding: 8px 14px 8px 8px;
    border: 1px solid var(--os-line-cool);
    border-radius: 40px;
    background: #fff;
    white-space: nowrap;
  }

  .os-fqg__nav-link.is-active {
    border-color: var(--os-accent);
  }

  .os-fqg__nav-icon {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
  }

  .os-fqg__nav-icon svg {
    width: 16px;
    height: 16px;
  }

  .os-dsm__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .os-dsm__item:nth-child(even) .os-dsm__media {
    order: 0;
  }

  .os-lcd__card {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .os-lcd__scans {
    max-width: 420px;
  }
}

@media (max-width: 780px) {
  .os-ptext,
  .os-pay,
  .os-dlv,
  .os-fqg,
  .os-dsm,
  .os-lcd {
    margin-bottom: 48px;
  }

  .os-ptext__body h2 {
    font-size: 26px;
    line-height: 34px;
  }

  .os-ptext__body {
    font-size: 14.5px;
    line-height: 24px;
  }

  .os-fqg__groups {
    gap: 36px;
  }

  .os-fqg__title {
    font-size: 17px;
    line-height: 24px;
  }

  .os-fqg__nav {
    margin: 0 -16px;
  }

  .os-fqg__nav-list {
    padding: 0 16px 4px;
  }
}

@media (max-width: 560px) {
  .os-pay__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .os-pay__card,
  .os-dlv__card,
  .os-dsm__item,
  .os-lcd__card {
    padding: 24px;
  }

  /* Карточки способов в одну колонку — компактной строкой: иконка
     слева, текст справа. Высокая карточка с двумя строками текста
     оставляла полэкрана пустоты на каждый способ. */
  .os-pay__card,
  .os-dlv__card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 16px;
    align-content: start;
  }

  .os-pay__top,
  .os-dlv__top {
    display: contents;
  }

  .os-pay__icon,
  .os-dlv__icon {
    grid-row: 1 / span 4;
  }

  .os-pay__num {
    display: none;
  }

  .os-dlv__mark {
    grid-column: 2;
    justify-self: start;
    margin: 0 0 8px;
  }

  .os-pay__name,
  .os-dlv__name,
  .os-pay__text,
  .os-dlv__text,
  .os-pay__file {
    grid-column: 2;
  }

  .os-pay__logos {
    padding: 20px 24px;
  }

  .os-pay__logo {
    width: calc(50% - 5px);
  }

  .os-lcd__fact {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .os-lcd__scans {
    max-width: none;
  }
}


/* =========================================================================
 * Страница «О компании»: «Кто мы» с карточкой организации, команда
 *
 * sections/about-company.php, sections/about-team.php. Остальные блоки
 * страницы — общие. Ритм общий: нижний отступ 72/48px.
 * ====================================================================== */

.os-page-about .os-hero__img {
  max-height: 400px;
}

/* ---------- Кто мы ---------- */

.os-abc {
  margin: 0 0 72px;
}

.os-abc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 56px;
  align-items: start;
}

.os-abc__main {
  min-width: 0;
}

.os-abc__text {
  max-width: 760px;
  color: var(--os-ink);
  font-size: 15px;
  line-height: 26px;
}

.os-abc__text p {
  margin: 0 0 16px;
}

.os-abc__text > :last-child {
  margin-bottom: 0;
}

.os-abc__text a {
  color: var(--os-accent);
}

.os-abc__card {
  position: sticky;
  top: 120px;
  padding: 32px;
  border: 1px solid var(--os-line);
  border-top: 4px solid var(--os-accent);
  border-radius: var(--os-radius);
  background: #fff;
  box-shadow: 0 16px 40px rgba(47, 56, 68, 0.08);
}

.os-abc__card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
}

.os-abc__card-icon {
  display: flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--os-accent-soft);
  color: var(--os-accent);
}

.os-abc__card-icon svg {
  width: 20px;
  height: 20px;
}

.os-abc__card-title {
  color: var(--os-ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 26px;
}

.os-abc__facts {
  display: grid;
  margin: 0 0 24px;
  border-top: 1px solid var(--os-line-cool);
}

.os-abc__fact {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--os-line-cool);
}

.os-abc__fact dt {
  margin: 0;
  color: var(--os-ink-soft);
  font-size: 13px;
  line-height: 20px;
}

.os-abc__fact dd {
  min-width: 0;
  margin: 0;
  color: var(--os-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  overflow-wrap: anywhere;
}

.os-abc__fact dd a {
  color: var(--os-ink);
  text-decoration: underline;
  text-decoration-color: rgba(255, 117, 0, 0.45);
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.os-abc__fact dd a:hover {
  color: var(--os-accent);
}

.os-abc__contacts {
  display: grid;
  gap: 2px;
}

.os-abc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.os-abc__actions .os-btn {
  flex: 1 1 auto;
}

/* ---------- Команда ---------- */

.os-team__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0 0;
}

@media (max-width: 1150px) {
  .os-abc__grid {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 40px;
  }

  .os-abc__fact {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

@media (max-width: 900px) {
  .os-abc__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .os-abc__card {
    position: static;
    max-width: 560px;
  }

  .os-abc__fact {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 12px;
  }
}

@media (max-width: 780px) {
  .os-abc {
    margin-bottom: 48px;
  }

  .os-abc__text {
    font-size: 14.5px;
    line-height: 24px;
  }
}

@media (max-width: 560px) {
  .os-abc__card {
    padding: 24px;
  }

  .os-abc__fact {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .os-team__links .os-btn {
    flex: 1 1 100%;
  }
}


/* =========================================================================
 * Текст программы с сайдбаром статьи: оглавление и форма
 *
 * sections/content-with-form.php. Каркас — старый .section-10
 * (common.css: две колонки, на ≤1000px одна), сайдбар — блоки статьи
 * блога: .os-post__sticky, .os-ptoc, .os-pform. Ширина колонки — как
 * в статье, 360px.
 * ====================================================================== */

.section-10.os-cbody .col-right {
  flex: 0 0 360px;
  width: 360px;
}

.section-10.os-cbody .col-left {
  min-width: 0;
}

/* Якорь оглавления не прячется под липкой шапкой. */
.os-cbody .col-left h2,
.os-cbody .col-left h3 {
  scroll-margin-top: 120px;
}

/* Колонки сложились (common.css, ≤1000px): оглавление — свёрнутое над
   текстом, в колонке остаётся форма. В блоге то же на ≤900px, здесь —
   на ширине, где складывается .section-10. */
@media (max-width: 1000px) {
  .section-10.os-cbody .col-right {
    flex: none;
    width: 100%;
    padding: 0;
  }

  .os-cbody .os-post__sticky {
    position: static;
    max-height: none;
  }

  .os-cbody .os-ptoc_aside {
    display: none;
  }

  .os-cbody .os-ptoc_inline {
    display: block;
  }

  .os-cbody .os-pform {
    max-width: 560px;
  }
}


/* =========================================================================
 * Кнопка наверх (footer.php, js/script.js)
 *
 * Только мобильная версия (≤1149px, как мобильная шапка). Справа внизу,
 * над плашкой чата Jivo, которая на телефоне занимает низ экрана.
 * ====================================================================== */

.os-totop {
  display: none;
}

@media (max-width: 1149px) {
  .os-totop {
    position: fixed;
    right: 16px;
    /* Над круглой кнопкой чата Jivo (верх ~90px от низа) с зазором. */
    bottom: calc(104px + env(safe-area-inset-bottom, 0px));
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--os-accent);
    color: #fff;
    box-shadow: 0 10px 28px rgba(47, 56, 68, 0.18);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s, background 0.2s;
    -webkit-tap-highlight-color: transparent;
  }

  .os-totop[hidden] {
    display: none;
  }

  .os-totop.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .os-totop:active {
    background: var(--os-accent-dark);
  }

  .os-totop svg {
    width: 22px;
    height: 22px;
    stroke-width: 2;
  }

  /* Открыт бургер или модальное окно — кнопка не мешает. */
  body:has(.nav-container.active) .os-totop,
  html.os-popup-open .os-totop {
    opacity: 0;
    visibility: hidden;
  }
}

/* -------------------------------------------------------------------------
 * Страница 404 (404.php)
 * ---------------------------------------------------------------------- */

.os-404 {
  margin: 0 0 72px;
  padding: 64px 0 0;
}

.os-404__code {
  color: var(--os-accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.os-404__title {
  max-width: 760px;
  margin: 12px 0 16px;
  color: var(--os-ink);
  font-size: 40px;
  line-height: 48px;
}

.os-404__text {
  max-width: 760px;
  margin: 0 0 32px;
  color: var(--os-ink-soft);
  font-size: 15px;
  line-height: 26px;
}

.os-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 780px) {
  .os-404 {
    margin-bottom: 48px;
    padding-top: 40px;
  }

  .os-404__title {
    font-size: 26px;
    line-height: 34px;
  }

  .os-404__text {
    margin-bottom: 24px;
  }
}

@media (max-width: 560px) {
  .os-404__actions .os-btn {
    flex: 1 1 100%;
  }
}

/* -------------------------------------------------------------------------
 * Страница поиска (search.php: sections/search-hero.php, search-results.php)
 *
 * Первый экран — .os-bhero блога, карточки — каталожные (.os-course)
 * и блоговые (.os-blist__grid).
 * ---------------------------------------------------------------------- */

.os-search__block {
  margin: 0 0 72px;
  scroll-margin-top: 120px;
}

.os-search__list .os-course:last-child {
  margin-bottom: 0;
}

.os-search__pages {
  margin-top: 32px;
}

.os-search__more {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

@media (max-width: 780px) {
  .os-search__block {
    margin-bottom: 48px;
  }

  .os-search__pages,
  .os-search__more {
    margin-top: 24px;
  }
}

/* Поле поиска в шапке — форма (ведёт на /?s=…), кнопки отправки нет:
   Enter отправляет. */
.header-main-search form {
  display: contents;
}

/* Поиск по направлению (#filterinput) ничего не нашёл — js/script.js. */
.alpha-groups__empty {
  padding: 24px;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: var(--os-warm);
  color: var(--os-ink-soft);
  font-size: 15px;
  line-height: 26px;
}

/* -------------------------------------------------------------------------
 * Цена с таймером на первом экране программы
 * (template-parts/course/price-timer.php, отсчёт — js/script.js)
 *
 * Тёмная плашка цвета шапки с точечным узором: слева зачёркнутая
 * и акционная цена, справа — часы до конца суток по Москве.
 * ---------------------------------------------------------------------- */

.os-ptimer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 20px 24px;
  border-radius: var(--os-radius);
  background-color: #1c2e48;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1.4px),
    linear-gradient(135deg, #1c2e48 0%, var(--os-dark) 100%);
  background-size: 18px 18px, 100% 100%;
  color: #fff;
}

.os-ptimer__label {
  margin: 0 0 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.os-ptimer__values {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.os-ptimer__old {
  color: rgba(255, 255, 255, 0.5);
  font-size: 15px;
  white-space: nowrap;
}

.os-ptimer__new {
  color: #ffc58f;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.os-ptimer__timer {
  flex-shrink: 0;
  text-align: center;
}

.os-ptimer__clock {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
}

.os-ptimer__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.os-ptimer__digits {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: #fff;
  color: var(--os-ink);
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.os-ptimer__sep {
  color: rgba(255, 255, 255, 0.7);
  font-size: 20px;
  font-weight: 700;
  line-height: 46px;
}

.os-ptimer__cap {
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
}

@media (max-width: 560px) {
  .os-ptimer {
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
  }

  .os-ptimer__price,
  .os-ptimer__timer {
    text-align: center;
  }

  .os-ptimer__values {
    justify-content: center;
  }
}

/* -------------------------------------------------------------------------
 * Ритм секций карточки программы (стандарт CLAUDE.md: секция — только
 * нижний отступ 72px, на ≤780px — 48px; шапка 40/48 → 26/34, под ней 32 → 24).
 *
 * Старые .section-10 / .section-11 / .section-8 / .section-format из
 * common.css давали 40–56px, а форматы — ещё и свой заголовок. Правим
 * по классам самих блоков, общий common.css не трогаем.
 * Форматы — цветная полоса во всю ширину (как первый экран), поэтому
 * внутренние поля у неё остаются.
 * ---------------------------------------------------------------------- */

.section-11.os-facts,
.section-11.os-modules,
.section-10.os-cbody,
.section-8,
.section-format {
  margin: 0 0 72px;
}

.section-format > .site-width > .title-section {
  margin: 0 0 32px;
  font-size: 40px;
  line-height: 48px;
}

@media (max-width: 780px) {
  .section-11.os-facts,
  .section-11.os-modules,
  .section-10.os-cbody,
  .section-8,
  .section-format {
    margin-bottom: 48px;
  }

  .section-format > .site-width > .title-section {
    margin-bottom: 24px;
    font-size: 26px;
    line-height: 34px;
  }
}

/* =========================================================================
 * Первый экран программы (template-parts/course/hero.php)
 *
 * Слева — крошки, H1, текст и карточка фактов: строка «Программа»,
 * ровные ячейки «объём / срок / формат», переключатель формата.
 * Справа — карточка: фото, цена с таймером, форма заявки.
 * Цвета и радиусы — токены темы; фон и поля секции — от .os-hero.
 * ====================================================================== */

.os-chero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 500px;
  gap: 56px;
  align-items: start;
}

.os-chero__main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.os-chero__main .breadcrumbs,
.os-chero__title,
.os-chero__text,
.os-chero__main .os-hero__list {
  margin: 0;
}

.os-chero__text {
  max-width: none;
  color: var(--os-ink-soft);
}

.os-chero__text p:last-child {
  margin-bottom: 0;
}

/* ---------- Карточка фактов ---------- */

.os-chero__facts {
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: #fff;
  box-shadow: 0 10px 28px rgba(47, 56, 68, 0.05);
}

.os-chero__program,
.os-chero__metric {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.os-chero__program {
  padding: 20px 24px;
}

.os-chero__metrics {
  display: grid;
  grid-template-columns: repeat(var(--os-chero-cols, 3), minmax(0, 1fr));
  border-top: 1px solid var(--os-line-cool);
}

.os-chero__program + .os-chero__metrics {
  border-top-color: var(--os-line-cool);
}

.os-chero__facts > :first-child {
  border-top: 0;
}

.os-chero__metric {
  padding: 18px 24px;
}

.os-chero__metric + .os-chero__metric {
  border-left: 1px solid var(--os-line-cool);
}

.os-chero__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--os-accent-soft);
  color: var(--os-accent);
}

.os-chero__icon svg {
  width: 20px;
  height: 20px;
}

.os-chero__fact-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding-top: 1px;
}

.os-chero__fact-title {
  color: var(--os-ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}

.os-chero__fact-text {
  color: var(--os-ink-soft);
  font-size: 13px;
  line-height: 18px;
}

.os-chero__format {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 24px 18px;
  border-top: 1px solid var(--os-line-cool);
}

.os-chero__format-label {
  flex-shrink: 0;
  color: var(--os-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.os-hero .os-chero__toggle {
  flex: 1;
  width: auto;
  margin: 0;
}

/* ---------- Карточка справа: фото, цена, форма ---------- */

.os-chero__card {
  overflow: hidden;
  border-radius: var(--os-radius);
}

.os-chero__media {
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: transparent;
}

.os-chero__img {
  display: block;
  width: 100%;
  height: 100% !important;
  max-height: none;
  object-fit: cover;
}

.os-chero__price {
  padding: 20px 24px;
}

.os-chero__price .os-ptimer {
  padding: 18px 20px;
}

.os-hero .os-chero__form {
  max-width: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 24px;
}

.os-chero__actions {
  padding: 0 24px 24px;
}

@media (max-width: 1150px) {
  .os-chero {
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 32px;
  }

  .os-chero__price .os-ptimer {
    flex-direction: column;
    align-items: stretch;
  }

  .os-chero__price .os-ptimer__price,
  .os-chero__price .os-ptimer__timer {
    text-align: left;
  }

  .os-chero__price .os-ptimer__clock {
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  .os-chero {
    grid-template-columns: minmax(0, 1fr);
  }

  .os-chero__card {
    max-width: 560px;
  }
}

@media (max-width: 1150px) {
  .os-chero__format {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
}

@media (max-width: 780px) {
  .os-chero__main {
    gap: 20px;
  }
}

/* Узкий экран: ячейки фактов — строками, по одной. */
@media (max-width: 560px) {
  .os-chero__metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .os-chero__metric + .os-chero__metric {
    border-left: 0;
    border-top: 1px solid var(--os-line-cool);
  }

  .os-chero__program,
  .os-chero__metric,
  .os-chero__format {
    padding-left: 18px;
    padding-right: 18px;
  }

  .os-chero__price {
    padding: 16px;
  }

  .os-hero .os-chero__form {
    padding: 20px 16px;
  }

  .os-chero__price .os-ptimer__price,
  .os-chero__price .os-ptimer__timer {
    text-align: center;
  }

  .os-chero__price .os-ptimer__values,
  .os-chero__price .os-ptimer__clock {
    justify-content: center;
  }
}

/* Кнопки формата делят строку поровну и могут сжиматься —
   иначе «Дистанционно» вылезало за карточку на 1000 и 375px. */
.os-hero .os-chero__toggle .hero-format-toggle__btn {
  flex: 1 1 0;
  min-width: 0;
  padding-left: 8px;
  padding-right: 8px;
  white-space: normal;
}

.os-chero__title_long {
  font-size: 36px;
  line-height: 44px;
}

@media (max-width: 780px) {
  .os-chero__title_long {
    font-size: 24px;
    line-height: 32px;
  }
}

/* ---------- Первый экран программы: документ, фото, цена в форме ----------
   Документ — второй строкой во всю ширину, под «Программой».
   Фото крупнее (4:3), цена с таймером — светлой плашкой в шапке формы:
   белая, как поля заявки, цифры — тёмные плашки цвета шапки сайта. */

.os-chero__doc {
  border-top: 1px solid var(--os-line-cool);
}

.os-chero__media {
  aspect-ratio: 4 / 3;
}

.os-chero__form .os-ptimer {
  margin: 0 0 20px;
}

.os-ptimer_light {
  background: #fff;
  background-image: none;
  color: var(--os-ink);
  box-shadow: 0 6px 18px rgba(47, 56, 68, 0.06);
}

.os-ptimer_light .os-ptimer__label {
  color: var(--os-ink-soft);
}

.os-ptimer_light .os-ptimer__old {
  color: var(--os-muted);
}

.os-ptimer_light .os-ptimer__new {
  color: var(--os-accent);
}

.os-ptimer_light .os-ptimer__digits {
  background: #1c2e48;
  color: #fff;
}

.os-ptimer_light .os-ptimer__sep {
  color: var(--os-ink);
}

.os-ptimer_light .os-ptimer__cap {
  color: var(--os-ink-soft);
}

@media (max-width: 1150px) {
  .os-chero__form .os-ptimer {
    flex-direction: column;
    align-items: stretch;
  }

  .os-chero__form .os-ptimer__price,
  .os-chero__form .os-ptimer__timer {
    text-align: left;
  }

  .os-chero__form .os-ptimer__clock {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .os-chero__form .os-ptimer {
    padding: 16px;
  }

  .os-chero__form .os-ptimer__price,
  .os-chero__form .os-ptimer__timer {
    text-align: center;
  }

  .os-chero__form .os-ptimer__values,
  .os-chero__form .os-ptimer__clock {
    justify-content: center;
  }
}

/* ---------- Первый экран программы: колонки одной высоты (ПК) ----------
   Левая выше — фото справа растягивается (обрезка cover, не меньше 240px).
   Правая выше — карточка фактов слева тянется, переключатель формата
   прижат к её низу. На ≤900px колонки идут друг под другом, как раньше. */
@media (min-width: 901px) {
  .os-chero {
    align-items: stretch;
  }

  .os-chero__card {
    display: flex;
    flex-direction: column;
  }

  .os-chero__media {
    position: relative;
    flex: 1 1 0;
    min-height: 240px;
    aspect-ratio: auto;
  }

  .os-chero__media picture,
  .os-chero__img {
    position: absolute;
    inset: 0;
  }

  .os-chero__facts {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
  }

  /* Правая колонка (фото + форма) бывает выше левой — тогда карточка
     фактов тянется. Запас делим поровну между строками и центруем их
     содержимое: иначе он копился одной пустотой над форматом. */
  .os-chero__facts > .os-chero__program,
  .os-chero__facts > .os-chero__metrics {
    flex: 1 0 auto;
  }

  .os-chero__facts > .os-chero__program,
  .os-chero__facts .os-chero__metric {
    align-items: center;
  }

  .os-chero__format {
    margin-top: auto;
  }
}

/* Мобильный первый экран программы: подписи «Формат обучения» и
   «Стоимость обучения» / «Цена действует…» — как заголовки фактов
   (.os-chero__fact-title): 15/20, жирные, без капса. */
@media (max-width: 780px) {
  .os-chero__format-label,
  .os-chero__form .os-ptimer__label {
    color: var(--os-ink);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 20px;
    text-transform: none;
  }
}

/* Заголовок первого экрана программы — меньше общего H1 первого экрана:
   с городом в конце названия программ длинные, 44px смотрелись огромными. */
.os-hero .os-chero__title {
  font-size: 36px;
  line-height: 44px;
}

.os-hero .os-chero__title_long {
  font-size: 30px;
  line-height: 38px;
}

@media (max-width: 1150px) {
  .os-hero .os-chero__title {
    font-size: 32px;
    line-height: 40px;
  }

  .os-hero .os-chero__title_long {
    font-size: 28px;
    line-height: 36px;
  }
}

@media (max-width: 780px) {
  .os-hero .os-chero__title {
    font-size: 26px;
    line-height: 34px;
  }

  .os-hero .os-chero__title_long {
    font-size: 22px;
    line-height: 30px;
  }
}

/* --- Параметры программы: правая колонка (требования + документы) --- */
.os-facts__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.os-facts__docs .os-doc {
  height: 100%;
}

.os-facts__slider .splide__slide {
  height: auto;
}

/* Площадки отзывов: официальные знаки на белой плашке (os_vr_logo()). */
.os-vr__platform-mark_logo {
  border: 1px solid var(--os-line-cool);
  background: #fff;
}

.os-vr__platform-mark_logo svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* У ВКонтакте знак сам — синяя плашка: во всю ячейку, без рамки. */
.os-vr__platform-mark_vk {
  border: 0;
  background: none;
}

.os-vr__platform-mark_vk svg {
  width: 40px;
  height: 40px;
}

.os-rth__mark.os-vr__platform-mark_logo svg {
  width: 20px;
  height: 20px;
}

.os-rth__mark.os-vr__platform-mark_vk svg {
  width: 32px;
  height: 32px;
}

/* =========================================================================
 * Первый экран категории (template-parts/category-hero.php)
 *
 * Макет и классы — от первого экрана программы (.os-chero). Своё:
 * ячейки плашки раздела сеткой 2×2 и шапка формы без таймера —
 * цена раздела слева, число программ направления справа.
 * ====================================================================== */

.os-chero__metrics_grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Разделители сетки 2×2: вертикальный — у правой ячейки, горизонтальный —
   у второго ряда (общее правило «+ сосед» тут не подходит). */
.os-chero__metrics_grid .os-chero__metric + .os-chero__metric {
  border-left: 0;
}

.os-chero__metrics_grid .os-chero__metric:nth-child(2n) {
  border-left: 1px solid var(--os-line-cool);
}

.os-chero__metrics_grid .os-chero__metric:nth-child(n + 3) {
  border-top: 1px solid var(--os-line-cool);
}

.os-ptimer_term {
  align-items: flex-end;
}

.os-ptimer__count {
  flex-shrink: 0;
  text-align: right;
}

.os-ptimer__count-value {
  color: var(--os-ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.os-hero_term .os-chero__form .os-ptimer {
  margin-bottom: 20px;
}

@media (max-width: 1150px) {
  .os-hero_term .os-chero__form .os-ptimer {
    flex-direction: row;
    align-items: flex-end;
  }
}

@media (max-width: 560px) {
  .os-chero__metrics_grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .os-chero__metrics_grid .os-chero__metric:nth-child(2n) {
    border-left: 0;
  }

  .os-chero__metrics_grid .os-chero__metric:nth-child(n + 2) {
    border-top: 1px solid var(--os-line-cool);
  }

  /* Узкий экран: цена и число программ — двумя строками, по левому краю. */
  .os-hero_term .os-chero__form .os-ptimer {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .os-hero_term .os-chero__form .os-ptimer__price,
  .os-hero_term .os-ptimer__count {
    text-align: left;
  }

  .os-hero_term .os-chero__form .os-ptimer__values {
    justify-content: flex-start;
  }

  .os-hero_term .os-ptimer__count {
    padding-top: 12px;
    border-top: 1px solid var(--os-line-cool);
  }

  .os-ptimer__count-value {
    font-size: 17px;
  }
}

/* =========================================================================
 * Первый экран главной, страниц и разделов (template-parts/page-hero.php)
 *
 * Макет — .os-chero. Своё: иллюстрация-арка в карточке видна целиком
 * на тёплом фоне (.os-chero__media_art), колонка без карточки — во всю
 * ширину (.os-chero_single). Шапка формы раздела — как у категории.
 * ====================================================================== */

.os-chero_single {
  grid-template-columns: minmax(0, 1fr);
}

.os-chero_single .os-chero__main {
  max-width: 760px;
}

.os-chero__media_art .os-chero__img {
  padding: 20px 20px 0;
  object-fit: contain;
  object-position: center bottom;
}

.os-hero_page .os-chero__form .os-ptimer {
  margin-bottom: 20px;
}

@media (max-width: 1150px) {
  .os-hero_page .os-chero__form .os-ptimer_term {
    flex-direction: row;
    align-items: flex-end;
  }
}

/* На узком экране иллюстрация ниже: 4:3 от ширины карточки для арки —
   много пустого фона по бокам. */
@media (max-width: 900px) {
  .os-chero__media_art {
    aspect-ratio: auto;
    height: 300px;
  }

  .os-chero__media_art .os-chero__img {
    height: 100% !important;
  }
}

@media (max-width: 560px) {
  .os-hero_page .os-chero__form .os-ptimer_term {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .os-hero_page .os-chero__form .os-ptimer__price,
  .os-hero_page .os-ptimer__count {
    text-align: left;
  }

  .os-hero_page .os-chero__form .os-ptimer__values {
    justify-content: flex-start;
  }

  .os-hero_page .os-ptimer__count {
    padding-top: 12px;
    border-top: 1px solid var(--os-line-cool);
  }

  .os-chero__media_art {
    height: 260px;
  }
}

/* Страницы: карточка фактов не растягивается (на разделах в ней одна-две
   строки ячеек — растянутая, она пустела посередине), содержимое колонки
   идёт сверху. Карточка справа по-прежнему тянется до высоты левой
   колонки, если та выше. Без картинки форма заполняет карточку целиком. */
@media (min-width: 901px) {
  .os-hero_page .os-chero__facts {
    flex: 0 0 auto;
  }

  .os-hero_page .os-chero__format {
    margin-top: 0;
  }

  .os-chero__media_art {
    min-height: 300px;
  }

  /* Только карточка без картинки: с фото лишнюю высоту забирает фото,
     иначе форма растягивалась и внизу оставалась пустота. */
  .os-chero__card > .os-chero__form:first-child:last-child {
    flex: 1 1 auto;
  }
}


/* =========================================================================
 * О компании: как проходит обучение, история, представительства,
 * обращение руководителя (sections/about-*.php)
 * ====================================================================== */

.os-process,
.os-history,
.os-regions,
.os-director {
  margin: 0 0 72px;
}

/* ---------- Как проходит обучение ---------- */

.os-process__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--os-process-count, 5), minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Пунктир между кругами: от центра первого до центра последнего. */
.os-process__list::before {
  content: "";
  position: absolute;
  top: 36px;
  left: calc(100% / var(--os-process-count, 5) / 2);
  right: calc(100% / var(--os-process-count, 5) / 2);
  border-top: 2px dashed #d5dce5;
}

.os-process__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.os-process__mark {
  position: relative;
  z-index: 1;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 0 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1c2e48 0%, var(--os-dark) 100%);
  box-shadow: 0 0 0 8px #fff, 0 12px 28px rgba(28, 46, 72, 0.24);
  color: #fff;
  transition: transform 0.2s;
}

.os-process__step:hover .os-process__mark {
  transform: translateY(-3px);
}

.os-process__num {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.os-process__icon {
  position: absolute;
  right: -6px;
  bottom: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 12px rgba(47, 56, 68, 0.16);
  color: var(--os-accent);
}

.os-process__icon svg {
  width: 16px;
  height: 16px;
}

.os-process__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 230px;
}

.os-process__name {
  margin: 0 0 8px;
  color: var(--os-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
}

.os-process__term {
  margin: 0 0 10px;
  padding: 4px 10px;
  border-radius: 30px;
  background: var(--os-accent-soft);
  color: var(--os-accent-dark);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.os-process__text {
  margin: 0 !important;
  color: var(--os-ink-soft);
  font-size: 13.5px;
  line-height: 21px;
}

/* ---------- История ---------- */

.os-history__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
  gap: 56px;
  align-items: start;
}

.os-history__head {
  position: sticky;
  top: 120px;
}

.os-history__list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Линия ленты — между колонкой годов и карточками. */
.os-history__list::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 103px;
  width: 2px;
  background: var(--os-line-cool);
}

.os-history__item {
  position: relative;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  column-gap: 48px;
  padding: 0 0 16px;
}

.os-history__item:last-child {
  padding-bottom: 0;
}

.os-history__item::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 96px;
  z-index: 1;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 3px solid #1c2e48;
  border-radius: 50%;
  background: #fff;
}

.os-history__year {
  padding-top: 12px;
  color: var(--os-ink);
  font-size: 22px;
  font-weight: 700;
  line-height: 28px;
  text-align: right;
}

.os-history__card {
  padding: 20px 24px;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.os-history__card:hover {
  border-color: rgba(255, 117, 0, 0.4);
  box-shadow: 0 10px 28px rgba(47, 56, 68, 0.08);
}

.os-history__name {
  margin: 0 0 6px;
  color: var(--os-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
}

.os-history__text {
  margin: 0 !important;
  color: var(--os-ink-soft);
  font-size: 13.5px;
  line-height: 21px;
}

/* Последняя веха (сегодня) — акцентом. */
.os-history__item_now::before {
  border-color: var(--os-accent);
  background: var(--os-accent);
  box-shadow: 0 0 0 6px var(--os-accent-soft);
}

.os-history__item_now .os-history__year {
  color: var(--os-accent);
}

.os-history__item_now .os-history__card {
  border-color: rgba(255, 117, 0, 0.35);
  background: var(--os-warm);
}

/* ---------- Представительства ---------- */

.os-regions__top {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: 16px;
}

.os-regions__map {
  overflow: hidden;
  min-height: 420px;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: var(--os-warm);
}

.os-regions__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
}

.os-regions__summary {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.os-regions__stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px;
  border-radius: var(--os-radius);
  background-color: #1c2e48;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1.4px),
    linear-gradient(135deg, #1c2e48 0%, var(--os-dark) 100%);
  background-size: 18px 18px, 100% 100%;
  color: #fff;
}

.os-regions__stat-value {
  color: #ffc58f;
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
}

.os-regions__stat-label {
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  line-height: 22px;
}

.os-regions__office {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 24px;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: #fff;
}

.os-regions__office-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--os-accent-soft);
  color: var(--os-accent);
}

.os-regions__office-icon svg {
  width: 20px;
  height: 20px;
}

.os-regions__office-title {
  display: block;
  margin: 0 0 4px;
  color: var(--os-ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}

.os-regions__office-text {
  display: block;
  color: var(--os-ink-soft);
  font-size: 13.5px;
  line-height: 21px;
}

.os-regions__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.os-regions__city a {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--os-line-cool);
  border-radius: 12px;
  background: #fff;
  color: var(--os-ink);
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.os-regions__city a:hover {
  border-color: rgba(255, 117, 0, 0.4);
  box-shadow: 0 10px 28px rgba(47, 56, 68, 0.08);
}

.os-regions__pin {
  display: flex;
  flex-shrink: 0;
  color: var(--os-accent);
}

.os-regions__pin svg {
  width: 18px;
  height: 18px;
}

.os-regions__city-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.os-regions__city-name {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 20px;
}

.os-regions__city-addr {
  color: var(--os-ink-soft);
  font-size: 12px;
  line-height: 17px;
}

.os-regions__city_head a {
  border-color: rgba(255, 117, 0, 0.35);
  background: var(--os-warm);
}

/* ---------- Обращение руководителя ---------- */

.os-director__card {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding: 32px;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: #fff;
}

.os-director__media {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  background: var(--os-warm);
}

.os-director__media img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

.os-director__media_initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--os-warm) 0%, #ffe3c4 100%);
}

.os-director__initials {
  color: var(--os-accent);
  font-size: 88px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

.os-director__body .os-head {
  margin-bottom: 20px;
}

.os-director__text {
  color: var(--os-ink-soft);
  font-size: 15px;
  line-height: 26px;
}

.os-director__text p {
  margin: 0 0 12px;
}

.os-director__text p:last-child {
  margin-bottom: 0;
}

.os-director__quote {
  margin: 24px 0;
  padding: 24px 28px;
  border-radius: var(--os-radius);
  background: var(--os-warm);
}

.os-director__quote-mark {
  display: block;
  width: 28px;
  height: 28px;
  margin: 0 0 8px;
  color: var(--os-accent);
}

.os-director__quote p {
  margin: 0;
  color: var(--os-ink);
  font-size: 19px;
  font-weight: 600;
  line-height: 28px;
}

.os-director__name {
  display: block;
  color: var(--os-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
}

.os-director__role {
  display: block;
  color: var(--os-ink-soft);
  font-size: 13.5px;
  line-height: 21px;
}

/* ---------- Адаптив ---------- */

@media (max-width: 1150px) {
  .os-history__layout {
    gap: 40px;
  }

  .os-director__card {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 32px;
  }
}

@media (max-width: 900px) {
  /* Шаги — вертикально: круг слева, пунктир вниз к следующему. */
  .os-process__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .os-process__list::before {
    display: none;
  }

  .os-process__step {
    position: relative;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    padding: 0 0 28px;
    text-align: left;
  }

  .os-process__step:last-child {
    padding-bottom: 0;
  }

  .os-process__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 72px;
    bottom: 0;
    left: 35px;
    border-left: 2px dashed #d5dce5;
  }

  .os-process__mark {
    margin: 0;
  }

  .os-process__body {
    align-items: flex-start;
    max-width: none;
    padding-top: 10px;
  }

  .os-history__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .os-history__head {
    position: static;
  }

  .os-regions__top {
    grid-template-columns: minmax(0, 1fr);
  }

  .os-regions__map,
  .os-regions__map iframe {
    min-height: 340px;
  }

  .os-regions__summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .os-director__card {
    grid-template-columns: minmax(0, 1fr);
  }

  .os-director__media {
    width: 100%;
    max-width: 320px;
  }
}

@media (max-width: 780px) {
  .os-process,
  .os-history,
  .os-regions,
  .os-director {
    margin-bottom: 48px;
  }
}

@media (max-width: 560px) {
  .os-process__mark {
    width: 60px;
    height: 60px;
    box-shadow: 0 0 0 6px #fff, 0 10px 24px rgba(28, 46, 72, 0.22);
  }

  .os-process__step:not(:last-child)::after {
    top: 60px;
    left: 29px;
  }

  .os-process__num {
    font-size: 18px;
  }

  .os-process__body {
    padding-top: 6px;
  }

  .os-history__list::before {
    left: 67px;
  }

  .os-history__item {
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 40px;
  }

  .os-history__item::before {
    left: 60px;
  }

  .os-history__year {
    font-size: 17px;
  }

  .os-history__card {
    padding: 16px 18px;
  }

  .os-regions__map,
  .os-regions__map iframe {
    min-height: 280px;
  }

  .os-regions__stat {
    padding: 24px;
  }

  .os-regions__stat-value {
    font-size: 44px;
  }

  .os-regions__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .os-regions__city a {
    padding: 10px 12px;
  }

  .os-director__card {
    padding: 24px;
  }

  .os-director__initials {
    font-size: 64px;
  }

  .os-director__quote {
    padding: 20px;
  }

  .os-director__quote p {
    font-size: 17px;
    line-height: 26px;
  }
}


/* =========================================================================
 * Контакты: офисы с вкладками (sections/contacts-offices.php)
 * ====================================================================== */

.os-ofc {
  margin: 0 0 72px;
  scroll-margin-top: 120px;
}

.os-ofc__tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 24px;
  padding: 4px;
  border-radius: 14px;
  background: #f1ece7;
}

.os-ofc__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--os-ink-soft);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.os-ofc__tab:hover {
  color: var(--os-ink);
}

.os-ofc__tab.is-active {
  background: #fff;
  box-shadow: 0 2px 8px rgba(47, 56, 68, 0.1);
  color: var(--os-accent-dark);
}

.os-ofc__tab-count {
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--os-accent-soft);
  color: var(--os-accent-dark);
  font-size: 12px;
}

.os-ofc__panel[hidden] {
  display: none;
}

/* ---------- Центральный офис ---------- */

.os-ofc__main {
  padding: 32px;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: #fff;
}

.os-ofc__main-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
}

.os-ofc__badge {
  padding: 5px 12px;
  border-radius: 30px;
  background: #1c2e48;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.os-ofc__city {
  margin: 0;
  color: var(--os-ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 26px;
}

.os-ofc__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.os-ofc__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.os-ofc__ico {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--os-accent-soft);
  color: var(--os-accent);
}

.os-ofc__ico svg {
  width: 20px;
  height: 20px;
}

.os-ofc__label {
  display: block;
  margin: 0 0 4px;
  color: var(--os-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.os-ofc__value {
  display: block;
  color: var(--os-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  overflow-wrap: anywhere;
}

.os-ofc__link {
  text-decoration: none;
}

.os-ofc__link:hover {
  color: var(--os-accent);
}

.os-ofc__sub {
  display: block;
  margin-top: 2px;
  color: var(--os-ink-soft);
  font-size: 13px;
  line-height: 19px;
}

.os-ofc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--os-line-cool);
}

.os-ofc__actions .os-btn svg {
  width: 18px;
  height: 18px;
}

/* ---------- Представительства ---------- */

.os-ofc__letters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 16px;
}

.os-ofc__letter {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--os-line-cool);
  border-radius: 10px;
  background: #fff;
  color: var(--os-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.os-ofc__letter:hover {
  border-color: rgba(255, 117, 0, 0.4);
}

.os-ofc__letter.is-active {
  border-color: var(--os-accent);
  background: var(--os-accent);
  color: #fff;
}

.os-ofc__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.os-ofc__card[hidden] {
  display: none;
}

.os-ofc__card-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: start;
  height: 100%;
  box-sizing: border-box;
  padding: 20px 24px;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: #fff;
  color: var(--os-ink);
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.os-ofc__card-link:hover {
  border-color: rgba(255, 117, 0, 0.4);
  box-shadow: 0 10px 28px rgba(47, 56, 68, 0.08);
}

.os-ofc__card-main,
.os-ofc__card-contacts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.os-ofc__card-city {
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
}

.os-ofc__card-addr {
  color: var(--os-ink-soft);
  font-size: 13.5px;
  line-height: 21px;
}

.os-ofc__card-hours {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--os-muted);
  font-size: 12.5px;
  line-height: 18px;
}

.os-ofc__card-hours svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.os-ofc__card-contacts {
  align-items: flex-end;
  color: var(--os-ink);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 21px;
  text-align: right;
  white-space: nowrap;
}

.os-ofc__card-go {
  display: flex;
  color: var(--os-muted);
  transition: color 0.2s, transform 0.2s;
}

.os-ofc__card-go svg {
  width: 20px;
  height: 20px;
}

.os-ofc__card-link:hover .os-ofc__card-go {
  color: var(--os-accent);
  transform: translateX(3px);
}

@media (max-width: 1150px) {
  .os-ofc__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .os-ofc__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 780px) {
  .os-ofc {
    margin-bottom: 48px;
  }

  .os-ofc__tabs {
    display: flex;
  }

  .os-ofc__tab {
    flex: 1 1 auto;
    justify-content: center;
    padding: 0 12px;
    font-size: 13px;
  }
}

@media (max-width: 560px) {
  .os-ofc__main {
    padding: 24px;
  }

  .os-ofc__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .os-ofc__actions .os-btn {
    flex: 1 1 100%;
  }

  .os-ofc__card-link {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 18px;
  }

  .os-ofc__card-contacts {
    grid-column: 1 / -1;
    grid-row: 2;
    align-items: flex-start;
    text-align: left;
  }

  .os-ofc__letter {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
  }
}

/* Ячейка-ссылка в карточке фактов первого экрана (контакты). */
.os-chero__fact-link {
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 0.2s;
}

.os-chero__fact-link:hover {
  color: var(--os-accent);
}

/* Вкладки офисов на телефоне — две равные колонки, подпись в две строки. */
@media (max-width: 780px) {
  .os-ofc__tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .os-ofc__tab {
    min-height: 52px;
    padding: 6px 10px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }

  .os-ofc__tab-count {
    display: none;
  }
}


/* =========================================================================
 * Лицензии: сканы слайдером (sections/lic-docs.php, js/archive.js)
 *
 * Крупный скан — fade-слайдер со стрелками поверх, миниатюры — лента
 * навигации под ним, активная — с оранжевой рамкой.
 * ====================================================================== */

.os-lcd__scans_slider {
  display: block;
}

/* Один скан — без слайдера: во всю ширину колонки, а не в первую из трёх
   ячеек сетки миниатюр. */
.os-lcd__scans:not(.os-lcd__scans_slider) {
  display: block;
}

.os-lcd__scans_slider .os-lcd__main {
  position: relative;
}

.os-lcd__scans_slider .os-lcd__scan_main {
  border-radius: 12px;
}

.os-lcd__main .splide__arrow {
  width: 40px;
  height: 40px;
  border: 1px solid var(--os-line-cool);
  background: #fff;
  box-shadow: 0 6px 18px rgba(47, 56, 68, 0.12);
  opacity: 1;
  transition: border-color 0.2s, background 0.2s;
}

.os-lcd__main .splide__arrow svg {
  width: 14px;
  height: 14px;
  fill: var(--os-ink);
}

.os-lcd__main .splide__arrow:hover:not(:disabled) {
  border-color: var(--os-accent);
  background: var(--os-accent);
}

.os-lcd__main .splide__arrow:hover:not(:disabled) svg {
  fill: #fff;
}

.os-lcd__main .splide__arrow--prev {
  left: 10px;
}

.os-lcd__main .splide__arrow--next {
  right: 10px;
}

.os-lcd__thumbs {
  margin-top: 10px;
}

.os-lcd__thumb {
  overflow: hidden;
  border: 2px solid var(--os-line) !important;
  border-radius: 8px;
  background: var(--os-warm);
  cursor: pointer;
  opacity: 0.7;
  transition: border-color 0.2s, opacity 0.2s;
}

.os-lcd__thumb img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: top;
}

.os-lcd__thumb:hover {
  opacity: 1;
}

.os-lcd__thumb.is-active {
  border-color: var(--os-accent) !important;
  opacity: 1;
}

/* Общее правило темы .splide__arrows (common.css) выносит стрелки над
   слайдером (top: -79px) — у сканов они поверх картинки, по центру высоты. */
.os-lcd__main .splide__arrows {
  position: absolute;
  inset: 0;
  top: 0;
  display: block;
  pointer-events: none;
}

.os-lcd__main .splide__arrows > .splide__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  pointer-events: auto;
  transform: translateY(-50%);
}

.os-lcd__main .splide__arrow--prev svg {
  transform: scaleX(-1);
}


/* =========================================================================
 * Таблица цен в первом экране «Оплаты» и «Документов»
 * (template-parts/price-table.php)
 * ====================================================================== */

.os-ptable {
  overflow: hidden;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: #fff;
  box-shadow: 0 10px 28px rgba(47, 56, 68, 0.05);
}

.os-ptable__head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--os-line-cool);
  background: var(--os-warm);
  color: var(--os-ink-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.os-ptable__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.os-ptable__row + .os-ptable__row {
  border-top: 1px solid var(--os-line-cool);
}

.os-ptable__link {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 24px;
  color: var(--os-ink);
  text-decoration: none;
  transition: background 0.2s;
}

.os-ptable__link:hover {
  background: var(--os-warm);
}

.os-ptable__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--os-accent-soft);
  color: var(--os-accent);
}

.os-ptable__icon svg {
  width: 20px;
  height: 20px;
}

.os-ptable__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.os-ptable__name {
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  transition: color 0.2s;
}

.os-ptable__link:hover .os-ptable__name {
  color: var(--os-accent);
}

.os-ptable__doc {
  color: var(--os-ink-soft);
  font-size: 13px;
  line-height: 18px;
}

.os-ptable__price {
  padding: 6px 12px;
  border-radius: 30px;
  background: var(--os-accent-soft);
  color: var(--os-accent-dark);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  white-space: nowrap;
}

.os-ptable__note {
  margin: 0 !important;
  padding: 14px 24px;
  border-top: 1px solid var(--os-line-cool);
  color: var(--os-ink-soft);
  font-size: 12.5px;
  line-height: 19px;
}

@media (max-width: 560px) {
  .os-ptable__head,
  .os-ptable__link,
  .os-ptable__note {
    padding-left: 16px;
    padding-right: 16px;
  }

  .os-ptable__link {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 4px 12px;
  }

  .os-ptable__icon {
    grid-row: 1 / span 2;
    width: 36px;
    height: 36px;
  }

  .os-ptable__price {
    justify-self: start;
    padding: 3px 10px;
    font-size: 14px;
  }
}

/* Две сетки в карточке фактов («О компании»: контакты над гарантиями) —
   разделитель между ними. */
.os-chero__metrics_contacts + .os-chero__metrics_badges {
  border-top: 1px solid var(--os-line-cool);
}


/* =========================================================================
 * Контакты: статус и «Написать сейчас» в первом экране
 * (template-parts/contacts-quick.php, js/contacts.js)
 * ====================================================================== */

.os-cq {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.os-cq__status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  padding: 8px 14px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.os-cq__status[hidden] {
  display: none;
}

.os-cq__status.is-open {
  background: #e8f7ee;
  color: #1c7a43;
}

.os-cq__status.is-closed {
  background: var(--os-line-cool);
  color: var(--os-ink-soft);
}

.os-cq__dot {
  position: relative;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
}

.os-cq__status.is-open .os-cq__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
  animation: os-cq-pulse 1.8s ease-out infinite;
}

@keyframes os-cq-pulse {
  from { transform: scale(1); opacity: 0.6; }
  to { transform: scale(2.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .os-cq__status.is-open .os-cq__dot::after {
    animation: none;
  }
}

.os-cq__label {
  color: var(--os-ink-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.os-cq__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.os-cq__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border: 1.5px solid transparent;
  border-radius: 56px;
  background: #fff;
  color: var(--os-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(47, 56, 68, 0.08);
  transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s;
}

.os-cq__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(47, 56, 68, 0.12);
}

.os-cq__btn svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* Цвет значка — фирменный цвет мессенджера. */
.os-cq__btn_tg svg { color: #229ed9; }
.os-cq__btn_wa svg { color: #25d366; }
.os-cq__btn_max svg { color: #6d3bf5; }

.os-cq__btn_tg:hover { border-color: rgba(34, 158, 217, 0.45); }
.os-cq__btn_wa:hover { border-color: rgba(37, 211, 102, 0.5); }
.os-cq__btn_max:hover { border-color: rgba(109, 59, 245, 0.45); }

.os-cq__btn_chat {
  border-color: rgba(255, 117, 0, 0.35);
  color: var(--os-accent-dark);
}

.os-cq__btn_chat svg {
  color: var(--os-accent);
}

.os-cq__btn_chat:hover {
  border-color: var(--os-accent);
}

@media (max-width: 560px) {
  .os-cq__status {
    font-size: 13px;
  }

  .os-cq__buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .os-cq__btn {
    justify-content: center;
    padding: 0 12px;
  }
}

@media (max-width: 560px) {
  /* Нечётная последняя кнопка (чат) — во всю ширину. */
  .os-cq__btn:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* Статус в две строки — скругление карточкой, а не «пилюлей». */
  .os-cq__status {
    align-items: flex-start;
    border-radius: 14px;
  }

  .os-cq__dot {
    margin-top: 5px;
  }
}

/* Контакты: «Мы на картах и в соцсетях» — второй ряд кнопок, отступ
   над подписью; знаки площадок без плашки. Картинка справа — ниже,
   чтобы колонки сравнялись. */
.os-cq__buttons + .os-cq__label {
  margin-top: 8px;
}

.os-cq__logo {
  display: flex;
  flex-shrink: 0;
}

.os-cq__logo svg {
  width: 20px;
  height: 20px;
}

.os-cq__btn_place:hover {
  border-color: var(--os-line-cool);
}

.os-page-contacts .os-chero__media_art,
.os-page-reviews .os-chero__media_art,
.os-page-licenses .os-chero__media_art {
  min-height: 0;
}

@media (min-width: 901px) {
  .os-page-contacts .os-chero__media_art,
  .os-page-reviews .os-chero__media_art,
  .os-page-licenses .os-chero__media_art {
    flex: 0 0 200px;
    height: 200px;
  }
}



/* Ряд ссылок под списком первого экрана (template-parts/hero-links.php). */
.os-cq_links {
  margin: -4px 0 0;
}

/* Лицензии: длинные подписи кнопок — на телефоне по одной в ряд. */
@media (max-width: 560px) {
  .os-cq_links-licenses .os-cq__buttons {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* «Другие направления раздела» — своя секция под SEO-текстом
   (sections/category-siblings.php): без верхней линии и отступа,
   которые были нужны внутри блока программ. */
.os-catsib {
  margin: 0 0 72px;
}

.os-catsib .os-catprog__siblings {
  margin: 0;
  padding: 0;
  border-top: 0;
}

@media (max-width: 780px) {
  .os-catsib {
    margin-bottom: 48px;
  }
}

/* Категория: оглавление в липкой колонке SEO-текста (sections/seo-text.php).
   Якоря не прячутся под шапкой; на ≤900px колонка не липнет и оглавление
   в ней скрыто (общие правила .os-ptoc_aside / .os-ptoc_inline). */
.os-seo__body h2,
.os-seo__body h3 {
  scroll-margin-top: 120px;
}

@media (max-width: 900px) {
  .os-seo__sticky.os-post__sticky {
    position: static;
    max-height: none;
  }
}


/* --- Параметры программы: карточка «Записаться на программу» ---
   Под таблицей в левой колонке (sections/course-facts.php). Компактно:
   слева заголовок и цена, справа кнопка; ниже тезисы плашками в строку.
   Тёплый фон — как у карточки документа справа. */
.os-facts__main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.os-facts__cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px 24px;
  padding: 24px;
  border-radius: var(--os-radius);
  background: var(--os-warm);
}

.os-facts__cta-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.os-facts__cta-title {
  color: var(--os-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
}

.os-facts__cta-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.os-facts__cta-new {
  color: var(--os-accent-dark);
  font-size: 26px;
  font-weight: 700;
  line-height: 32px;
  white-space: nowrap;
}

.os-facts__cta-old {
  color: var(--os-muted);
  font-size: 15px;
  white-space: nowrap;
}

.os-facts__cta-off {
  align-self: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--os-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  white-space: nowrap;
}

.os-facts__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.os-facts__cta-list {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  grid-row: 2;
  gap: 6px 20px;
  padding-top: 16px !important;
  border-top: 1px solid var(--os-line);
  margin: 0;
  padding: 0;
  list-style: none;
}

.os-facts__cta-list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  color: var(--os-ink-soft);
  font-size: 13px;
  line-height: 18px;
}

.os-facts__cta-list li:before {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 5px;
  margin: -3px 0 0;
  border-left: 2px solid var(--os-accent);
  border-bottom: 2px solid var(--os-accent);
  transform: rotate(-45deg);
}

@media (max-width: 560px) {
  .os-facts__cta {
    grid-template-columns: minmax(0, 1fr);
  }

  .os-facts__cta-list {
    grid-row: auto;
  }

  .os-facts__cta-actions,
  .os-facts__cta-actions .os-btn {
    width: 100%;
  }
}


/* «Региональные представительства»: карта JS API Яндекса вместо iframe
   (sections/about-regions.php). Высота задаётся самому контейнеру —
   API рисует карту по его размеру. */
.os-regions__map[data-os-regions] {
  height: 420px;
}

.os-regions__map [class*="ymaps-2"][class*="-balloon__content"] a {
  color: var(--os-accent-dark);
}

@media (max-width: 900px) {
  .os-regions__map[data-os-regions] {
    height: 340px;
  }
}

@media (max-width: 560px) {
  .os-regions__map[data-os-regions] {
    height: 280px;
  }
}


/* «Текст страницы» (sections/page-text.php): текст + липкая колонка
   с формой заявки, как у карточки программы (.section-10.os-cbody). */
.os-ptext__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 48px;
  align-items: start;
}

.os-ptext__aside {
  align-self: stretch;
  min-width: 0;
}

@media (max-width: 1000px) {
  .os-ptext__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .os-ptext__aside .os-post__sticky {
    position: static;
    max-height: none;
  }
}


/* Корпоративное обучение, карточка связи: мессенджеры — «пилюлями»
   с точкой фирменного цвета (sections/corp-intro.php). */
.os-intro__way-links {
  gap: 6px;
  margin: 0 0 4px;
}

.os-intro__way-links a.os-intro__msg {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 12px 3px 10px;
  border: 1px solid var(--os-line-cool);
  border-radius: 30px;
  background: #fff;
  font-size: 13.5px;
  line-height: 20px;
  transition: border-color 0.2s, color 0.2s;
}

.os-intro__msg::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--os-accent);
}

.os-intro__msg_tg::before { background: #229ed9; }
.os-intro__msg_wa::before { background: #25d366; }
.os-intro__msg_max::before { background: #6d3bf5; }

.os-intro__way-links a.os-intro__msg:hover {
  border-color: rgba(255, 117, 0, 0.4);
}

/* Главная: старые .section-2 (виды программ, «Выберите направление для
   обучения») на телефоне давали 44px снизу вместо 48 — по стандарту. */
@media (max-width: 780px) {
  .home .section-2 {
    margin-bottom: 48px;
  }
}