/* ============================================================
   БК «СТРЕМЛЕНИЕ» — tokens.css
   Глобальные CSS-переменные для сборки сайта s-basket.ru в Tilda.
   Подключается один раз в HEAD сайта (настройки Tilda), до common.css.

   Источник: живой макет site-handoff (tokens/*.css + site-live.css
   + site-region.css + site-pages.css), значения сверены с computed
   в браузере. Имена — по конвенции CLAUDE.md (--dark/--orange/--cream);
   рядом в комментариях исходные имена дизайн-системы.

   Брейкпоинты сборки: 1200 / 980 / 640 / 480 (desktop-first).
   ВНИМАНИЕ: макет переключает сетку и кегли на своей точке 900px.
   В сборке переключение адаптивных переменных сделано на 980px —
   ближайшей тильдовской точке. Диапазон 900–980px получает мобильные
   значения (в макете там десктопные) — осознанное отличие.
   ============================================================ */

:root {

  /* ── ЦВЕТА · базовая триада (канон CLAUDE.md) ───────────── */
  --dark:        #1F1411;  /* Talon Black · Pantone Black 6C · RAL 8022 (--color-talon) */
  --orange:      #F07000;  /* Stremlenie Orange · Pantone 165C · RAL 2009 (--color-orange) */
  --cream:       #F5EFE2;  /* Court Cream · Pantone 9184C · RAL 9001 (--color-court) */

  /* ── ЦВЕТА · оранжевая ветка ────────────────────────────── */
  --orange-light: #FF8A2A; /* Flame — подсветка/hover (--color-orange-light) */
  --orange-deep:  #C25400; /* Ember — нажатие; рубрики блога (--color-orange-deep) */

  /* ── ЦВЕТА · поверхности ────────────────────────────────── */
  --dark-2:      #2D2018;  /* тёмная карточка (--color-talon-2) */
  --dark-hover:  #3A2C26;  /* hover тёмных кнопок — фактическое значение макета.
                              В макете два близких hover-а: #3A2C26 и #35251F (chat-action) —
                              в сборке унифицируем на этот. --dark-2 (#2D2018) — не hover,
                              а фон тёмной карточки; в рабочих стилях макета пока не используется. */
  --cream-2:     #ECE4D2;  /* тень крема (--color-court-2). Близкий служебный дубль
                              в макете: #EFE8DA — фон фото-плейсхолдеров, в прод не тянем. */
  --paper:       #F0EDE6;  /* светлая поверхность по умолчанию (--color-paper) */
  --white:       #FFFFFF;  /* в дизайн-токенах отсутствовал, в макете --v4-white */
  /* Одноразовый в макете: #000 — фон видео-контейнера hero «О клубе»
     (единственный чистый чёрный; не токенизируем). */

  /* ── ЦВЕТА · расширенная тёплая палитра ─────────────────── */
  --hardwood:    #B4622A;  /* Hardwood Brown (--color-hardwood) */
  --gold:        #E8D27A;  /* Whistle Gold (--color-whistle) */
  --net:         #B7A98C;  /* тёплый нейтральный (--color-net); в макетах пока не задействован */
  --blue:        #1E3A5F;  /* Court Blue — только акцент-каллаут (--color-court-blue); не задействован */

  /* ── ЦВЕТА · статусы ────────────────────────────────────── */
  --ok:          #2F8F4A;  /* успех (--color-ok) */
  --alert:       #D43F1A;  /* ошибка/предупреждение (--color-alert); ошибки полей формы */

  /* ── ЦВЕТА · текст и линии (альфы на базе талона #1F1411) ── */
  --muted:       rgba(31, 20, 17, 0.62);   /* приглушённый текст. Рабочее значение макета
                                              (--v4-muted); в декларативных токенах был 0.55 —
                                              для текста используем 0.62. */
  --muted-dark:  rgba(245, 239, 226, 0.6); /* приглушённый текст на тёмном (--text-muted-dark) */
  --scrim:       rgba(31, 20, 17, 0.55);   /* скрим модалки, placeholder полей (--text-muted 0.55) */
  --scrim-drawer: rgba(31, 20, 17, 0.35);  /* затемнение под мобильным меню */
  --rule:        rgba(31, 20, 17, 0.14);   /* линии/разделители (--color-rule = --v4-line) */
  --rule-strong: rgba(31, 20, 17, 0.48);   /* усиленная линия (--v4-line-strong) */
  --rule-dark:   rgba(245, 239, 226, 0.16);/* линии на тёмном (--color-rule-dark) */
  /* Прочие одноразовые альфы талона в макете (не токенизируем, фиксируем):
     скрим-градиенты hero — стопы 0 / 0.28 / 0.52 / 0.55 / 0.72 / 0.82
     (0.55 совпадает с --scrim: линейный скрим hero использует его на 38%);
     штриховка плейсхолдеров 0.045; подпись футера rgba(245,239,226,0.22). */

  /* ── ШРИФТЫ (подключает Tilda, здесь только стеки) ──────── */
  --font-display: 'Oswald', Arial, sans-serif;        /* заголовки, цифры, кнопки */
  --font-body:    Arial, Helvetica, sans-serif;       /* текст */

  /* ── РАДИУСЫ (фактическая шкала макета) ─────────────────── */
  /* Декларация «острых углов» (--radius-none/--radius-sm) в рабочих
     стилях макета не используется — реальный дизайн мягко скруглён. */
  --r-plate:  28px;   /* hero-плиты, плита футера, модалка, врезка карты */
  --r-drawer: 26px;   /* мобильное выпадающее меню */
  --r-card:   20px;   /* все карточки, фото-плейсхолдеры, cookie-плашка */
  --r-menu:   18px;   /* дропдауны навигации, телефонная плашка меню */
  --r-item:   16px;   /* пункты мобильного меню, аккордеон FAQ */
  --r-input:  14px;   /* поля формы */
  --r-item-sm: 12px;  /* hover-подложка пункта дропдауна */
  --r-badge:  10px;   /* пилюля расписания, иконка типа документа */
  --r-check:  6px;    /* кастомный чекбокс согласия */
  --r-pill:   999px;  /* кнопки, чипы, бейджи, шапка-пилюля */
  --r-round:  50%;    /* круглые кнопки: звонок, стрелки, закрытие, чат, play */
  /* Одноразовое в макете: 22px — декоративная градиентная подложка
     текста hero возрастных страниц (site-region.css). */

  /* ── ТЕНИ (цвет всегда талон #1F1411, кроме --shadow-cutout) ─ */
  --shadow-header: 0 10px 26px rgba(31, 20, 17, 0.10);  /* липкая шапка-пилюля */
  --shadow-menu:   0 16px 40px rgba(31, 20, 17, 0.14);  /* дропдаун навигации */
  --shadow-hover:  0 14px 30px rgba(31, 20, 17, 0.14);  /* подъём карточки тренера на hover */
  --shadow-cookie: 0 10px 26px rgba(31, 20, 17, 0.16);  /* cookie-плашка */
  --shadow-drawer: 0 22px 50px rgba(31, 20, 17, 0.18);  /* мобильное меню */
  --shadow-chat:   0 8px 24px  rgba(31, 20, 17, 0.18);  /* пилюли чат-виджета */
  --shadow-cta:    0 24px 60px rgba(31, 20, 17, 0.22);  /* CTA-плашка с формой */
  --shadow-modal:  0 30px 70px rgba(31, 20, 17, 0.28);  /* модальное окно (максимум шкалы) */
  --shadow-fab:    0 10px 26px rgba(31, 20, 17, 0.30);  /* круглая кнопка чата */
  --focus-ring:    0 0 0 1px var(--orange);             /* фокус полей формы (не тень) */
  --shadow-cutout: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.16));
                   /* контурная тень вырезанных PNG-фигур в hero возрастных.
                      Единственная чёрная тень макета — остальные на талоне. */

  /* ── СЕТКА И КОНТЕЙНЕР ──────────────────────────────────── */
  --wrap: 1520px;      /* max-width контейнера. В макете было 1200 (--wrap макета) —
                          расширено 06.08.2026 по решению владельца: до ~1584px
                          вьюпорта контейнер занимает всю ширину минус --pad
                          (32px поля по бокам), на больших экранах останавливается
                          на 1520. Хедер/футер Тильды строить под эту же ширину.
                          Фолбэки var(--wrap,1200px) в блоках не трогаем. */
  --pad:  32px;        /* горизонтальный паддинг контейнера, десктоп; ≤980 → 20px */
  --wrap-safe: min(var(--wrap), calc(100% - 2*var(--pad)));
                       /* max-width для плашек и треков каруселей, лежащих прямо в
                          section БЕЗ горизонтального паддинга (.sb-plate, .sb-track):
                          на широких экранах = --wrap, на узких гарантирует поля --pad
                          по бокам. На ≤980 переключается в none - мобильные плашки
                          и карусели остаются full-bleed, как в макете. Контейнеры
                          с внутренним паддингом (.sb-wrap) используют --wrap как раньше. */

  /* ── ВЕРТИКАЛЬНЫЕ ОТСТУПЫ СЕКЦИЙ (десктоп; ≤980 — см. ниже) ─ */
  --sec-pad:       80px;  /* стандартная секция (.sec, карусель) · моб. 52px */
  --plate-sec-pad: 36px;  /* верх секции-плашки и футера · моб. 24px;
                             низ футера асимметричный: 40px дт / 32px моб */
  --head-mb:       26px;  /* отступ шапки секции до контента (одинаков на всех ширинах);
                             у плашек (.plate-head) на десктопе — 32px */
  /* Внутренние поля оранжевой плашки: 56/40/40 десктоп, 40/20(=--pad моб)/20 моб.
     Hero-отступ от шапки: 8–16px моб → 18–40px десктоп (зависит от типа hero). */

  /* ── GAP СЕТОК (фактические значения макета) ────────────── */
  --gap-6:  6px;   /* иконка+подпись, плотные ряды пилюль */
  --gap-8:  8px;   /* ряды чипов/табов/крошек, соцпилюли */
  --gap-10: 10px;  /* карточные сетки, мобильная база */
  --gap-12: 12px;  /* крупные карточки и карусели, мобильная база */
  --gap-14: 14px;  /* поля формы, вертикальные списки, мобильное меню */
  --gap-16: 16px;  /* средний gap составных блоков, хедер */
  --gap-20: 20px;  /* СТАНДАРТ десктопных карточных сеток */
  --gap-24: 24px;  /* строки «заголовок+действие», широкие двухколоночники */
  --gap-40: 40px;  /* двухколоночные сплиты (hero регионов, зигзаг соревнований) */
  /* Структурные gap-ы вне шкалы (одноразовые, не токенизируем): полоса фактов
     22px моб / 76px дт; тикер 26px моб / 34px дт; колонки FAQ 48px;
     сетка hero «О клубе» 18px моб / 64px дт. */

  /* ── КОМПОНЕНТЫ ─────────────────────────────────────────── */
  --btn-h:       54px;         /* высота кнопки, база */
  --btn-h-hero:  58px;         /* кнопка в hero, десктоп */
  --btn-h-hdr:   48px;         /* кнопка в шапке */
  --btn-pad-x:   30px;         /* горизонталь кнопки (hero моб. — 20px) */
  --input-h:     54px;         /* поле формы (компактный вариант 48px) */
  --card-pad:    20px;         /* внутренний паддинг карточки, десктоп-ступень;
                                  моб. 16px; крупные десктопные растут до 22–28px */
  --modal-pad:   30px 26px 26px; /* модалка записи (модалка тренера: 36/38/34 дт, 26/24/24 моб) */
  --touch:       44px;         /* минимальная тап-зона (в сборке по CLAUDE.md — 48px) */
  --btn-round:   56px;         /* круглые кнопки: чат-FAB, play (на десктопе play — 64px) */
  --btn-close:   40px;         /* кнопка закрытия модалки (штрихи крестика: 16×2.5px, r 2px) */
  --checkbox:    22px;         /* кастомный чекбокс согласия */
  /* Хедер и его лого — блоки Tilda, для справки из макета: высота шапки
     76px моб / 92px ≥1024; ступени логотипа 52/62/80px. */

  /* ── БОРДЕРЫ (из дизайн-токенов) ────────────────────────── */
  --border-thin:   1px;
  --border-medium: 2px;
  --border-thick:  4px;   /* акцентная левая полоса do/don't */

  /* ── Z-INDEX (адаптировано: CLAUDE.md ограничивает z ≤ 100) ─ */
  --z-raised:  10;
  --z-overlay: 90;   /* адаптация: в макете оверлеи 60–999 — сжато под потолок 100 */
  --z-modal:   100;  /* в макете было 200 — в сборке потолок 100 */
}

/* ── Мобильные значения адаптивных переменных ──────────────
   Макетная точка перехода 900px → в сборке 980px (сетка Tilda). */
@media (max-width: 980px) {
  :root {
    --pad:           20px;
    --wrap-safe:     none;  /* мобильные плашки/карусели full-bleed */
    --sec-pad:       52px;
    --plate-sec-pad: 24px;
    --card-pad:      16px;
  }
}

/* ============================================================
   БК «СТРЕМЛЕНИЕ» — common.css
   Общие стили всех блоков T123. Кладётся один раз в HEAD сайта
   (Настройки сайта → Ещё → HTML-код для HEAD), после tokens.css.
   Каждый наш блок имеет корень <div class="sb sb-<страница>-<секция>">,
   поэтому все селекторы здесь начинаются с .sb — на блоки Tilda
   они не действуют.
   ============================================================ */

/* ── Локальный сброс и база ── */
.sb, .sb *{ box-sizing:border-box; margin:0; padding:0; }
.sb{ font-family:Arial,Helvetica,sans-serif; line-height:1.4; color:var(--dark,#1F1411); }

/* ── Контейнер ── */
.sb .sb-wrap{ max-width:var(--wrap,1200px); margin:0 auto; padding:0 var(--pad,32px); }

/* ── Дисплей-типографика ── */
.sb .sb-disp{
  font-family:'Oswald',Arial,sans-serif;
  font-weight:600;
  text-transform:uppercase;
  line-height:1.14;
  letter-spacing:.015em;
  color:var(--dark,#1F1411);
  text-wrap:balance;
}
.sb .sb-disp em{
  font-style:normal;
  color:var(--orange,#F07000);
  display:inline-block;
  transform:skewX(-6deg);
}

/* ── Скрытый текст для скринридеров ── */
.sb .sb-sr{
  position:absolute; width:1px; height:1px; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

/* ── Кнопка ── */
.sb .sb-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:'Oswald',Arial,sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.07em;
  font-size:16px;
  min-height:var(--btn-h,54px);
  padding:0 var(--btn-pad-x,30px);
  border-radius:var(--r-pill,999px);
  background:var(--orange,#F07000);
  color:var(--dark,#1F1411);
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  border:none;
}
@media (hover:hover){
  .sb .sb-btn:hover{ background:var(--orange-light,#FF8A2A); }
}
.sb .sb-btn:active{ background:var(--orange-deep,#C25400); color:var(--cream,#F5EFE2); }
.sb .sb-btn:focus-visible{ outline:2px solid var(--dark,#1F1411); outline-offset:2px; }

/* ── Мини-CTA (пилюля в карточках) ── */
.sb .sb-cta-mini{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:14px;
  min-height:44px;
  padding:0 20px;
  border-radius:var(--r-pill,999px);
  background:var(--cream,#F5EFE2);
  font-family:'Oswald',Arial,sans-serif;
  font-weight:600;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--dark,#1F1411);
}

/* ── Секции ── */
.sb .sb-sec{ padding:var(--sec-pad,80px) 0; }
.sb .sb-sec-head{ margin-bottom:var(--head-mb,26px); }
.sb .sb-sec-head h2{ font-size:clamp(38px,4vw,46px); }
.sb .sb-plate-sec{ padding:var(--plate-sec-pad,36px) 0; }
.sb .sb-plate{
  max-width:var(--wrap-safe,1200px);
  margin:0 auto;
  border-radius:var(--r-plate,28px);
  padding:56px 40px 40px;
}
.sb .sb-plate--orange{ background:var(--orange,#F07000); }
.sb .sb-plate--orange h2{ color:var(--dark,#1F1411); }
.sb .sb-plate-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:32px; margin-bottom:32px; padding:0 8px;
}
.sb .sb-plate-head h2{ font-size:clamp(38px,4vw,46px); }

/* ── Карусель (трек + стрелки) ── */
.sb .sb-track{
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:0 var(--pad,32px) 8px;
  scroll-padding-left:var(--pad,32px);
  scrollbar-width:none;
}
.sb .sb-track::-webkit-scrollbar{ display:none; }
.sb .sb-slide{ flex:0 0 42%; scroll-snap-align:start; }
.sb .sb-arrows{ display:none; }
.sb .sb-arrow{
  width:48px; height:48px; flex:none;
  display:grid; place-items:center;
  background:none;
  border:1.5px solid var(--rule-strong,rgba(31,20,17,.48));
  border-radius:var(--r-round,50%);
  color:var(--dark,#1F1411);
  font-size:18px;
  cursor:pointer;
}
@media (hover:hover){
  .sb .sb-arrow:hover{ background:var(--cream,#F5EFE2); }
}
.sb .sb-arrow:focus-visible{ outline:2px solid var(--dark,#1F1411); outline-offset:2px; }
@media (min-width:981px) and (hover:hover){
  .sb .sb-arrows{ display:flex; gap:10px; }
}

/* ── Фокус ссылок-карточек ── */
.sb a.sb-card-link:focus-visible{ outline:2px solid var(--dark,#1F1411); outline-offset:2px; }

/* ── Мобильные переопределения (сетка Tilda: 980) ── */
@media (max-width:980px){
  .sb .sb-sec-head h2{ font-size:clamp(28px,7vw,32px); }
  .sb .sb-plate{ padding:40px var(--pad,20px) 20px; }
  .sb .sb-plate-head{ display:block; margin-bottom:26px; padding:0 4px; }
  .sb .sb-plate-head h2{ font-size:clamp(28px,7vw,32px); }
  .sb .sb-track{ gap:12px; padding:0 var(--pad,20px) 6px; scroll-padding-left:var(--pad,20px); }
  .sb .sb-slide{ flex:0 0 78%; }
  .sb .sb-cta-mini{ margin-top:8px; gap:6px; min-height:34px; padding:0 10px; font-size:12px; letter-spacing:.04em; }
}

/* ── Тильда-форма в слоте секции (JS переносит form.t-form внутрь карточки) ──
   Переиспользуется на всех страницах с инлайн-формами. Тильда инлайнит часть
   стилей на элементы - поэтому местами !important. */
.sb .sb-form-slot{ margin-top:26px; }
.sb .sb-form-slot form.t-form{ text-align:left; }
.sb .sb-form-slot .t-form__inputsbox{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  align-items:start;
}
.sb .sb-form-slot .t-input-group{ margin-bottom:0 !important; }
.sb .sb-form-slot .t-form__submit,
.sb .sb-form-slot .t-input-group_cb,
.sb .sb-form-slot .t-input-group_rd,
.sb .sb-form-slot .t-form__errorbox-wrapper{ grid-column:1 / -1; }
.sb .sb-form-slot .t-input-title{
  font-family:Arial,Helvetica,sans-serif;
  font-weight:700;
  font-size:14px !important;
  line-height:1.3;
  color:var(--dark,#1F1411) !important;
  margin-bottom:6px;
  padding:0;
}
.sb .sb-form-slot .t-input,
.sb .sb-form-slot input[type="text"],
.sb .sb-form-slot input[type="tel"],
.sb .sb-form-slot input[type="email"]{
  height:54px;
  border-radius:var(--r-input,14px);
  background:var(--cream,#F5EFE2) !important;
  border:1.5px solid transparent !important;
  box-shadow:none !important;
  padding:0 16px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px !important; /* меньше нельзя - iOS зумит страницу */
  color:var(--dark,#1F1411) !important;
}
.sb .sb-form-slot .t-input:focus,
.sb .sb-form-slot input[type="text"]:focus,
.sb .sb-form-slot input[type="tel"]:focus{
  background:var(--white,#FFFFFF) !important;
  border-color:var(--orange,#F07000) !important;
  outline:none;
}
.sb .sb-form-slot .t-input::placeholder{ color:var(--scrim,rgba(31,20,17,.55)); }
.sb .sb-form-slot .t-submit{
  width:100%;
  min-height:54px;
  border-radius:var(--r-pill,999px);
  border:none;
  background:var(--dark,#1F1411) !important;
  color:var(--white,#FFFFFF) !important;
  font-family:'Oswald',Arial,sans-serif;
  font-weight:600;
  font-size:16px;
  text-transform:uppercase;
  letter-spacing:.07em;
  cursor:pointer;
  transition:background-color 150ms;
}
@media (hover:hover){
  .sb .sb-form-slot .t-submit:hover{ background:var(--dark-hover,#3A2C26) !important; }
}
.sb .sb-form-slot .t-submit:focus-visible{ outline:2px solid var(--orange,#F07000); outline-offset:2px; }
/* чекбокс согласия: квадрат 22 с мячом, как в макете.
   Мяч = инлайн-SVG (тот же, что в бегущей строке), внешних запросов нет. */
.sb .sb-form-slot .t-checkbox__control{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:13px !important;
  line-height:1.45;
  color:var(--muted,rgba(31,20,17,.62)) !important;
}
.sb .sb-form-slot .t-checkbox__indicator{
  width:22px; height:22px; flex:none;
  background:var(--white,#FFFFFF);
  border:1.5px solid var(--rule-strong,rgba(31,20,17,.48));
  border-radius:6px;
  position:relative;
}
.sb .sb-form-slot input:checked + .t-checkbox__indicator,
.sb .sb-form-slot .t-checkbox__control input:checked ~ .t-checkbox__indicator{
  border-color:var(--orange,#F07000) !important;
}
/* Мяч рисуем ФОНОМ самого индикатора: псевдоэлемент :after занят галкой Тильды
   (у неё свои width/height/left/top - мяч в нём обрезался в полоску). */
.sb .sb-form-slot input:checked + .t-checkbox__indicator,
.sb .sb-form-slot .t-checkbox__control input:checked ~ .t-checkbox__indicator{
  background:var(--white,#FFFFFF) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0Mi41IiBmaWxsPSIjRjA3MDAwIiBzdHJva2U9IiMxRjE0MTEiIHN0cm9rZS13aWR0aD0iNyIvPjxnIHN0cm9rZT0iIzFGMTQxMSIgc3Ryb2tlLXdpZHRoPSI3IiBmaWxsPSJub25lIj48cGF0aCBkPSJNNTAgNy41IFY5Mi41Ii8+PHBhdGggZD0iTTcuNSA1MCBIOTIuNSIvPjxwYXRoIGQ9Ik0yNiAxNyBBIDU1IDU1IDAgMCAxIDI2IDgzIi8+PHBhdGggZD0iTTc0IDE3IEEgNTUgNTUgMCAwIDAgNzQgODMiLz48L2c+PC9zdmc+) center/16px no-repeat !important;
}
/* тильдину галочку прячем всегда */
.sb .sb-form-slot .t-checkbox__indicator:after{ display:none !important; }
.sb .sb-form-slot .t-checkbox__labeltext a{ color:inherit; text-decoration:underline; }
.sb .sb-form-slot .t-input-error,
.sb .sb-form-slot .t-form__errorbox-middle{
  font-size:13px;
  color:var(--alert,#D43F1A);
}
/* Блоки-доноры форм (BF204N с якорями form-slot / popup-form-slot):
   прячем мгновенно ЕЩЁ ДО переноса скриптом - иначе при загрузке страницы
   на миг вспыхивает сырая тильдовская форма. Не display:none, чтобы
   инициализация Тильды (маска телефона и т.п.) отработала штатно. */
/* Якорь Тильды - СОСЕД донора (не потомок!): <a name="form-slot"></a><div id="rec..."> */
#allrecords a[name="form-slot"] + [id^="rec"],
#allrecords a[name="popup-form-slot"] + [id^="rec"]{
  visibility:hidden !important;
  height:0 !important;
  min-height:0 !important;
  overflow:hidden !important;
  padding:0 !important;
  margin:0 !important;
}
/* Бегущая строка: фирменный мяч (как в брендбуке) вместо инлайнового контурного.
   Фон на svg + скрытые дети - обновляет тикеры всех страниц одним CSS. */
.sb .sb-tk-ball{ background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0Mi41IiBmaWxsPSIjRjA3MDAwIiBzdHJva2U9IiMxRjE0MTEiIHN0cm9rZS13aWR0aD0iNyIvPjxnIHN0cm9rZT0iIzFGMTQxMSIgc3Ryb2tlLXdpZHRoPSI3IiBmaWxsPSJub25lIj48cGF0aCBkPSJNNTAgNy41IFY5Mi41Ii8+PHBhdGggZD0iTTcuNSA1MCBIOTIuNSIvPjxwYXRoIGQ9Ik0yNiAxNyBBIDU1IDU1IDAgMCAxIDI2IDgzIi8+PHBhdGggZD0iTTc0IDE3IEEgNTUgNTUgMCAwIDAgNzQgODMiLz48L2c+PC9zdmc+) center/contain no-repeat; }
.sb .sb-tk-ball circle, .sb .sb-tk-ball path{ display:none; }
/* заголовок чекбокс-группы дублирует лейбл - скрываем */
.sb .sb-form-slot .t-input-group_cb .t-input-title{ display:none; }
/* штатный успех-бокс Тильды скрыт всегда: вместо него сцена секции */
.sb .sb-form-slot .t-form__successbox{ display:none !important; }
.sb .sb-form-slot.sb-sent form.t-form{ display:none; }
@media (max-width:980px){
  .sb .sb-form-slot{ margin-top:16px; }
  .sb .sb-form-slot .t-form__inputsbox{ grid-template-columns:1fr; gap:10px; }
  .sb .sb-form-slot .t-input,
  .sb .sb-form-slot input[type="text"],
  .sb .sb-form-slot input[type="tel"]{ height:48px; }
  .sb .sb-form-slot .t-input-title{ margin-bottom:4px; }
  .sb .sb-form-slot .t-submit{ min-height:48px; }
}

/* ── БЛОГ: карточки, табы, CTA, статья (маркер BLOG-STYLES) ── */
.sb .sb-pub-card,.sb .sb-pub-feat{
  display:block; text-decoration:none; color:var(--dark,#1F1411);
  background:var(--white,#FFFFFF);
  border:1px solid var(--rule,rgba(31,20,17,.14));
  border-radius:var(--r-card,20px);
  overflow:hidden;
}
@media (hover:hover){
  .sb .sb-pub-card:hover,.sb .sb-pub-feat:hover{ border-color:var(--rule-strong,rgba(31,20,17,.48)); }
  .sb .sb-pub-card:hover h3,.sb .sb-pub-feat:hover h2{ color:var(--orange-deep,#C25400); }
}
.sb .sb-pub-card:focus-visible,.sb .sb-pub-feat:focus-visible{ outline:2px solid var(--dark,#1F1411); outline-offset:2px; }
.sb .sb-pub-ph{
  aspect-ratio:16/10;
  background:var(--cream-2,#ECE4D2);
  display:grid; place-items:center;
  padding:16px; text-align:center;
}
.sb .sb-pub-ph span{ font-size:13px; line-height:1.4; color:var(--muted,rgba(31,20,17,.62)); }
.sb .sb-pub-body{ display:flex; flex-direction:column; gap:8px; padding:16px 16px 18px; }
.sb .sb-pub-rub{ font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--orange-deep,#C25400); }
.sb .sb-pub-card h3{ font-family:Arial,Helvetica,sans-serif; font-weight:700; font-size:18px; line-height:1.28; text-wrap:pretty; }
.sb .sb-pub-card p{ font-size:14px; line-height:1.5; color:var(--muted,rgba(31,20,17,.62)); }
.sb .sb-pub-meta{ margin-top:2px; font-size:13px; color:var(--muted,rgba(31,20,17,.62)); }
.sb .sb-pub-grid{ display:grid; gap:14px; }
.sb .sb-pub-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.sb .sb-pub-tab{
  font-family:Arial,Helvetica,sans-serif; font-size:14px; font-weight:600;
  padding:9px 16px; min-height:40px; display:inline-flex; align-items:center;
  border-radius:var(--r-pill,999px);
  border:1.5px solid var(--rule-strong,rgba(31,20,17,.48));
  background:transparent; color:var(--dark,#1F1411); text-decoration:none;
}
@media (hover:hover){ .sb .sb-pub-tab:hover{ background:var(--cream,#F5EFE2); } }
.sb .sb-pub-tab.sb-on{ background:var(--dark,#1F1411); border-color:transparent; color:var(--white,#FFFFFF); }
.sb .sb-pub-tab:focus-visible{ outline:2px solid var(--dark,#1F1411); outline-offset:2px; }
.sb .sb-pub-cta{ padding:34px var(--pad,32px); text-align:center; }
.sb .sb-pub-cta h2{ font-size:clamp(24px,6vw,32px); }
.sb .sb-pub-cta p{ margin:10px auto 18px; max-width:42ch; font-size:15px; line-height:1.55; color:var(--dark,#1F1411); }
.sb .sb-btn--dark{ background:var(--dark,#1F1411); color:var(--white,#FFFFFF); }
@media (hover:hover){ .sb .sb-btn--dark:hover{ background:var(--dark-hover,#3A2C26); } }
/* статья */
.sb .sb-art-top{ display:flex; flex-direction:column; gap:10px; max-width:var(--wrap,1200px); margin:0 auto; }
.sb .sb-art-back{ align-self:flex-start; font-size:13.5px; font-weight:600; text-decoration:none; color:var(--muted,rgba(31,20,17,.62)); }
@media (hover:hover){ .sb .sb-art-back:hover{ color:var(--orange-deep,#C25400); } }
.sb .sb-art-top h1{ font-size:clamp(26px,7.4vw,40px); line-height:1.12; text-wrap:pretty; }
.sb .sb-art-lead{ font-size:16px; line-height:1.55; color:var(--muted,rgba(31,20,17,.62)); text-wrap:pretty; }
.sb .sb-art-body{ max-width:68ch; margin:34px auto 0; font-size:17.5px; line-height:1.65; color:var(--dark,#1F1411); }
.sb .sb-art-wrap{ max-width:var(--wrap,1200px); margin:0 auto; }
.sb .sb-art-body p+p{ margin-top:16px; }
.sb .sb-art-body h2{
  margin-top:32px;
  font-family:'Oswald',Arial,sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.015em;
  font-size:clamp(20px,5vw,25px); line-height:1.25; text-wrap:pretty;
}
.sb .sb-art-body h2+p{ margin-top:12px; }
.sb .sb-art-body a{ color:var(--orange-deep,#C25400); }
.sb .sb-art-body .sb-list-ball{ margin-top:16px; list-style:none; display:grid; gap:9px; font-size:16px; }
.sb .sb-art-body .sb-list-ball li{ position:relative; padding-left:26px; }
.sb .sb-art-body .sb-list-ball li::before{
  content:""; position:absolute; left:0; top:.28em; width:16px; height:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23F07000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2v20M5.2 4.8c3.8 3.9 9.8 3.9 13.6 0M5.2 19.2c3.8-3.9 9.8-3.9 13.6 0'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
.sb .sb-art-q{ margin-top:28px; padding:20px 22px; background:var(--cream,#F5EFE2); border-radius:var(--r-card,20px); }
.sb .sb-art-q p{ font-size:17px; line-height:1.5; }
.sb .sb-art-q footer{ margin-top:10px; font-size:13.5px; color:var(--muted,rgba(31,20,17,.62)); }
@media (min-width:640px){
  .sb .sb-pub-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:981px){
  .sb .sb-pub-grid{ grid-template-columns:repeat(3,1fr); gap:24px; }
}
@media (max-width:980px){
  .sb .sb-art-body{ margin-top:26px; font-size:16.5px; }
}