/* =====================================================================
   1. ТОКЕНЫ И ЗАЩИТА ОТ ТЁМНОЙ ТЕМЫ
   ===================================================================== */
:root{
  --bg-main:#ECE5DC;
  --choco:#241614;
  --choco-deep:#1E100E;
  --text-main:#1C1B1A;
  --text-body:#4A4642;
  --text-muted:#6B6459;
  --accent-gold:#D4AF37;
  --accent-gold-light:rgba(212,175,55,0.1);

  /* ЗОЛОТАЯ КРОМКА — ЕДИНЫЙ ГРАДИЕНТ ВСЕХ ЗАГОЛОВКОВ САЙТА.
     Правится только здесь: титульный экран и заголовки разделов
     берут его отсюда, и меняются вместе.

     Три вещи, которые в нём важны и которые легко сломать:
     1. Угол ровно 180deg. Полоса градиента низкая и широкая — одна
        строка на всю ширину, — поэтому даже наклон в 8 градусов
        растягивается в заметную диагональ поперёк букв.
     2. Переход идёт через рыже-коричневый (#46220F, #6E3F14).
        Шоколад красно-коричневый, золото жёлтое: если вести их
        напрямую, середина уходит в хаки и буквы зеленят.
     3. Шоколад держит 55 % высоты, золото живёт в последней четверти.
        Сдвинете границу вверх — буквы станут золотыми вместо
        шоколадных с кромкой. */
  --gold-sweep:linear-gradient(180deg,
    #241614 0%,  #2B1810 55%, #46220F 65%,
    #6E3F14 73%, #A87424 81%, #D4AF37 89%,
    #E8CE93 95%, #C9A863 100%);

  /* ШКАЛА КЕГЛЯ. Четыре ступени для текста и интерфейса плюс заголовки.
     Заведена 01.09.2026: до неё на сайте было 19 разных размеров, из них
     девять — с шагом в полпикселя (9,5 / 10 / 10,5 / 11 / 11,5 …).
     Полшага не читаются как замысел, только как неаккуратность, а самый
     ходовой кегль был 13 px — мелко для взрослого человека с телефона.
     Правило приёмки: основной текст на телефоне не мельче 16 px. */
  --tx-xs:13px;   /* служебное: надзаголовки, подписи, сноски */
  --tx-sm:15px;   /* плотные места: подписи под цифрами, строки карточек */
  --tx-md:16px;   /* ОСНОВНОЙ ТЕКСТ */
  --tx-lg:20px;   /* крупный текст и подзаголовки */

  /* РАБОЧАЯ ПАЛИТРА. Эти цвета файл использовал с первого дня, но имён
     у них не было: они стояли числом в 200 с лишним местах. 01.09.2026
     названы. Правило простое — поменять оттенок золота теперь можно
     здесь, а не искать его по всему файлу. */
  --choco-title:#2B1810;    /* заголовки: шоколад чуть теплее основного */
  --choco-soft:#2B1A14;     /* мягкий шоколад: подложки и рамки */
  --choco-warm:#3A2318;     /* тёплый шоколад: тени и вторые планы */
  --gold-antique:#C5A059;   /* античное золото: кромки, границы, наведение */
  --gold-deep:#8A6A22;      /* тёмное золото: текст на светлом фоне */
  --gold-text:#6E5227;      /* самое тёмное золото: мелкий текст */
  --gold-light:#E2C58A;     /* светлое золото: подложки */
  --gold-pale:#EBD9B4;      /* бледное золото: заливки */
  --gold-blik:#FFF2D4;      /* блик на золоте */
  --white:#FFFFFF;
  --text-faint:#8A7E6C;     /* самый тихий текст, 4,5:1 к бежевому */
  --placeholder:#A79E92;    /* подсказка в поле ввода */
  --kirpich:#B4432F;        /* красно-кирпичный: ошибка формы */
  --logo-red:#E00022;       /* красный с логотипа, снят пипеткой с файла */
  --logo-red-small:#B00020; /* тот же красный темнее — для знака в подвале,
                               в мелком размере чистый логотипный светлеет */
  --choco-cities:#3D2314;   /* строка городов на первом экране */
  --text-lead:#3A322B;      /* абзацы лида */
  --bg-light:#F6F1E9;       /* светлая подложка карточек */
  --bg-tint:#DED4C6;        /* бежевая заливка */

  color-scheme:only light !important;
}

/* Утилиты шкалы. !important нужен потому, что css/tailwind.css подключается
   ПОСЛЕ этого файла: без него его утилиты перебивали бы шкалу. */
.tx-xs{font-size:var(--tx-xs) !important}
.tx-sm{font-size:var(--tx-sm) !important}
.tx-md{font-size:var(--tx-md) !important}
.tx-lg{font-size:var(--tx-lg) !important}

html,body{
  /* Выпадающее меню шапки нарочно выходит за поля страницы (margin:0 -24px),
     чтобы на телефоне лечь во всю ширину. Из-за этого документ на узком
     экране оказывался на 30-40 px шире окна, и страницу можно было утянуть
     вбок. Проверено 01.09.2026 замером на 360, 390 и 414 px.
     Горизонтальной прокрутки на сайте нет нигде, а карусели категорий
     прокручиваются своим контейнером (overflow-x:auto) и этим не задеты. */
  overflow-x:hidden;
  background-color:var(--bg-main) !important;
  background-image:linear-gradient(var(--bg-main),var(--bg-main)) !important;
  color:var(--text-main) !important;
  color-scheme:light !important;
}
h1,h2,h3,.t-main{color:var(--text-main) !important;-webkit-text-fill-color:var(--text-main) !important}
.t-body{color:var(--text-body) !important;-webkit-text-fill-color:var(--text-body) !important}
.t-muted{color:var(--text-muted) !important;-webkit-text-fill-color:var(--text-muted) !important}
/* .t-faint был #938B80 — контраст 2,69:1 к бежевому фону, не проходит
   даже для крупного текста. 01.09.2026 сведён к приглушённому var(--text-muted)
   (4,68:1). На вид почти то же, читается заметно лучше. */
.t-faint{color:var(--text-muted) !important;-webkit-text-fill-color:var(--text-muted) !important}
.t-gold{color:var(--accent-gold) !important;-webkit-text-fill-color:var(--accent-gold) !important}
@media (prefers-color-scheme:dark){
  html,body{background-color:var(--bg-main) !important;color:var(--text-main) !important}
}

/* =====================================================================
   ОТКЛИК НА НАЖАТИЕ
   =====================================================================
   Заведено 01.09.2026. До этого в файле было 49 правил на наведение
   и ни одного на нажатие. На телефоне наведения не существует: палец
   либо нажал, либо нет. Без отклика человек жмёт второй раз, решив,
   что промахнулся, — и на кнопке заявки это стоит заявки.

   Сдвиг на 1 px и лёгкое сжатие: не украшение, а подтверждение того,
   что касание засчитано. Оба свойства — transform, разметку браузер
   не пересчитывает.

   :active без :hover намеренно: правило должно работать пальцем. */
.pill:active,.cta:active,.header-cta:active,.btn:active,.seg:active,
.teaser:active,.city-switch button:active,.nav-pill:active,
.faq-q:active,.step-head:active,.doc-scan-dl:active,
button:active,[role="button"]:active{
  transform:translateY(1px) scale(.985);
}
.pill:active,.cta:active,.header-cta:active,.btn:active{
  box-shadow:0 2px 8px rgba(36,22,20,.18) !important;
}
/* Настройку «уменьшить движение» уважаем и здесь: отклик остаётся,
   но без плавности — мгновенным. */
@media (prefers-reduced-motion:reduce){
  .pill:active,.cta:active,.header-cta:active,.btn:active,.seg:active,
  .teaser:active,.city-switch button:active,button:active{transform:none}
}

/* НАДЗАГОЛОВКИ ПРОПИСНЫМИ. Их на сайте 72 штуки. Прописные буквы плюс
   разрядка плюс мелкий кегль — самое тяжёлое для чтения сочетание.
   Кегль уже поднят шкалой до 13 px, здесь убавлена разрядка: было
   .16–.22em, стало .12em. Стиль сохраняется, читаемость возвращается. */
.tx-xs.uppercase{letter-spacing:.12em !important}

/* =====================================================================
   2. КАРТОЧКА-СМАРТФОН: шоколадный кант + матовое стекло
   ===================================================================== */
.iphone-card{
  border:7px solid var(--choco) !important;
  border-radius:44px;
  background:rgba(255,255,255,0.65) !important;
  backdrop-filter:blur(20px) !important;
  -webkit-backdrop-filter:blur(20px) !important;
  box-shadow:0 30px 60px rgba(36,22,20,.12) !important;
  transition:transform .5s cubic-bezier(.4,0,.2,1),
             background .5s cubic-bezier(.4,0,.2,1),
             border-color .5s ease,
             box-shadow .5s ease;
}
.iphone-card:hover{
  transform:translateY(-6px);
  background:rgba(255,255,255,0.8) !important;
  border-color:var(--choco-deep) !important;
  box-shadow:0 42px 84px rgba(36,22,20,.18) !important;
}
.island{background:var(--choco)}

/* =====================================================================
   2b. ФОТО УЧЕБНОГО ТРАНСПОРТА (категории B и A)
   Фото лежит ВНУТРИ блока .photo-space, который стоит прямо над кнопкой.
   Поэтому «воздух» между транспортом и кнопкой равен ровно --photo-gap
   и не зависит от того, во сколько строк легла сноска под кнопкой.
   ===================================================================== */
.iphone-card{overflow:hidden}
.photo-space{position:relative;flex:none;height:calc(var(--photo) + var(--photo-gap))}
.card-photo{
  position:absolute;left:50%;bottom:var(--photo-gap);
  transform:translateX(-50%);
  height:var(--photo);width:auto;max-width:none;
  pointer-events:none;user-select:none;
  filter:drop-shadow(0 12px 20px rgba(36,22,20,.16));
}
.iphone-card .pill{position:relative;z-index:2}

/* =====================================================================
   3. ПЕРЕКЛЮЧАТЕЛЬ ТРАНСМИССИИ + ЦЕНА
   ===================================================================== */
.seg{
  background-color:transparent !important;background-image:none !important;
  border:1px solid rgba(36,22,20,.18) !important;
  transition:all .35s cubic-bezier(.4,0,.2,1);
}
.seg:hover{border-color:rgba(212,175,55,.7) !important}
.seg.is-on{
  background-color:var(--choco) !important;
  background-image:linear-gradient(var(--choco),var(--choco)) !important;
  border-color:var(--choco) !important;
}
.seg.is-on,.seg.is-on *{color:var(--white) !important;-webkit-text-fill-color:var(--white) !important}

.price{transition:opacity .28s ease,transform .28s cubic-bezier(.16,1,.3,1)}
.price.is-swap{opacity:0;transform:translateY(8px)}

/* =====================================================================
   4. КНОПКИ
   ===================================================================== */
.pill{
  background-color:var(--choco) !important;
  background-image:linear-gradient(var(--choco),var(--choco)) !important;
  border:1px solid rgba(212,175,55,.35) !important;
  transition:background-color .4s ease,border-color .4s ease,box-shadow .45s cubic-bezier(.16,1,.3,1);
}
.pill,.pill *{color:var(--white) !important;-webkit-text-fill-color:var(--white) !important}
.pill:hover{
  background-color:var(--choco-deep) !important;
  background-image:linear-gradient(var(--choco-deep),var(--choco-deep)) !important;
  border-color:rgba(212,175,55,.9) !important;
  box-shadow:0 0 0 1px rgba(212,175,55,.4), 0 14px 34px rgba(212,175,55,.32) !important;
}

.cta{
  background-color:var(--choco) !important;
  background-image:linear-gradient(var(--choco),var(--choco)) !important;
  border:1px solid rgba(212,175,55,.35) !important;
}
.cta,.cta *{color:var(--white) !important;-webkit-text-fill-color:var(--white) !important}
.cta.is-armed{
  background-color:var(--accent-gold) !important;
  background-image:linear-gradient(var(--accent-gold),var(--accent-gold)) !important;
  border-color:var(--accent-gold) !important;
  box-shadow:0 16px 40px rgba(212,175,55,.4) !important;
}
.cta.is-armed,.cta.is-armed *{color:var(--choco) !important;-webkit-text-fill-color:var(--choco) !important}
.cta-wrap{
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);
}
.cta-wrap.is-shown{opacity:1;transform:translateY(0);pointer-events:auto}

/* =====================================================================
   5. ЛОГОТИП
   ===================================================================== */
/* Здесь были правила толщины линий золотой монограммы «АА».
   Монограмма убрана 01.09.2026 вместе со своим спрайтом: на первом
   экране рядом стояли два разных знака — тонкая монограмма в шапке
   и официальная эмблема с флагом посередине. Это два стиля и две
   эпохи рядом, глаз ловит это первым. Решением владелицы оставлена
   эмблема. Правила удалены, потому что рисовать им больше нечего. */
/* Слово «СТАРТ» под флагом — красное, в тон надписи «АВТОШКОЛА» на самом
   логотипе (var(--logo-red) снят пипеткой с файла logo-start.webp).
   !important нужен потому, что класс .t-main в начале файла жёстко задаёт
   шоколадный цвет всем заголовкам и подписям. */
.wordmark{
  letter-spacing:.25em;text-indent:.25em;
  color:var(--logo-red) !important;-webkit-text-fill-color:var(--logo-red) !important;
}
/* В шапке и подвале знак мелкий (11–13 px). Чистый логотипный красный на
   светлом фоне в таком размере читается на грани нормы, поэтому берём тот
   же красный на тон глубже: издалека цвет тот же, а контраст в порядке. */
.header-brand .wordmark,
#legal .wordmark{color:var(--logo-red-small) !important;-webkit-text-fill-color:var(--logo-red-small) !important}

.hero-wrap{position:relative;overflow:hidden;isolation:isolate}
.hero-wrap > *{position:relative;z-index:1}

/* =====================================================================
   6. КАРТОЧКИ ПОТОКОВ
   ===================================================================== */
.stream{
  background:rgba(255,255,255,.6) !important;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(36,22,20,.14) !important;
  box-shadow:0 30px 60px rgba(36,22,20,.04);
  transition:all .5s cubic-bezier(.4,0,.2,1);
}
.stream:hover{
  background:rgba(255,255,255,.8) !important;
  border-color:rgba(212,175,55,.6) !important;
  transform:translateY(-4px);
}
.stream.is-active{
  background:var(--choco) !important;
  background-image:linear-gradient(var(--choco),var(--choco)) !important;
  border-color:var(--choco) !important;
  box-shadow:0 26px 60px rgba(36,22,20,.24) !important;
}
.stream.is-active *{color:var(--white) !important;-webkit-text-fill-color:var(--white) !important;border-color:rgba(212,175,55,.3) !important}
.stream.is-active .s-key{opacity:.65}
.stream.is-active .s-mark{opacity:1;color:var(--accent-gold) !important;-webkit-text-fill-color:var(--accent-gold) !important}
.s-row{border-top:1px solid rgba(36,22,20,.12)}

/* =====================================================================
   7. БОТ-ПОДСКАЗЧИК
   ===================================================================== */
#bot{
  position:fixed;right:20px;bottom:20px;z-index:60;
  width:min(340px,calc(100vw - 40px));
  opacity:0;transform:translateY(24px) scale(.96);pointer-events:none;
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);
}
#bot.is-shown{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
#botCard{
  width:100%;text-align:left;
  background:rgba(255,255,255,.85) !important;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(212,175,55,.35);border-radius:28px;
  box-shadow:0 26px 70px rgba(36,22,20,.16);
  transition:border-color .35s ease,box-shadow .35s ease;
  /* диалог с четырьмя вариантами ответа может стать высоким —
     на невысоких экранах карточка скроллится внутри себя */
  max-height:min(78vh, 640px);overflow-y:auto;
  scrollbar-width:thin;
}
#bot.is-shown #botCard{border-color:rgba(212,175,55,.6)}

/* индикатор шагов */
.bot-progress{display:flex;gap:5px;margin-bottom:12px}
.bot-progress i{
  height:3px;flex:1;border-radius:999px;background:rgba(43,24,16,.12);
  transition:background .35s ease;
}
.bot-progress i.is-done{background:rgba(197,160,89,.55)}
.bot-progress i.is-now{background:var(--choco)}

/* чипы с уже данными ответами */
.bot-log{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.bot-log[hidden]{display:none}
.bot-chip{
  display:inline-block;padding:4px 9px;border-radius:999px;
  background:rgba(197,160,89,.14);border:1px solid rgba(197,160,89,.34);
  font-family:'Inter',sans-serif;font-size:var(--tx-xs);font-weight:500;
  color:var(--gold-text);-webkit-text-fill-color:var(--gold-text);
}

/* «печатает…» */
.bot-typing{display:flex;gap:4px;align-items:center;height:20px;margin-top:10px}
.bot-typing[hidden]{display:none}
.bot-typing i{
  width:6px;height:6px;border-radius:999px;background:rgba(43,24,16,.32);
  animation:botdot 1.1s ease-in-out infinite;
}
.bot-typing i:nth-child(2){animation-delay:.15s}
.bot-typing i:nth-child(3){animation-delay:.3s}
@keyframes botdot{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* варианты ответа */
.bot-options{display:grid;gap:7px;margin-top:14px}
.bot-options[hidden]{display:none}
.bot-opt{
  display:block;width:100%;text-align:left;cursor:pointer;
  padding:10px 14px;border-radius:16px;
  border:1px solid rgba(36,22,20,.16);background:rgba(255,255,255,.5);
  transition:border-color .3s ease,background .3s ease,transform .3s cubic-bezier(.16,1,.3,1);
}
.bot-opt:hover{
  border-color:rgba(197,160,89,.8);background:rgba(212,175,55,.12);
  transform:translateX(3px);
}
.bot-opt span{
  display:block;font-family:'Montserrat',sans-serif;font-size:var(--tx-sm);font-weight:700;
  color:var(--choco);-webkit-text-fill-color:var(--choco);
}
.bot-opt em{
  display:block;margin-top:1px;font-style:normal;
  font-family:'Inter',sans-serif;font-size:var(--tx-xs);font-weight:400;
  color:var(--text-muted);-webkit-text-fill-color:var(--text-muted);
}

/* итоговая сводка */
.bot-result{margin-top:14px;border-top:1px solid rgba(197,160,89,.35);padding-top:10px}
.bot-result[hidden]{display:none}
.bot-row{display:flex;justify-content:space-between;gap:12px;padding:5px 0}
.bot-row + .bot-row{border-top:1px solid rgba(43,24,16,.07)}
.bot-row span{
  flex:none;font-family:'Inter',sans-serif;font-size:var(--tx-xs);font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--text-faint);-webkit-text-fill-color:var(--text-faint);padding-top:2px;
}
.bot-row b{
  text-align:right;font-family:'Montserrat',sans-serif;font-size:var(--tx-sm);font-weight:700;
  line-height:1.35;color:var(--choco);-webkit-text-fill-color:var(--choco);
}

/* «назад» и «начать заново» */
.bot-foot{display:flex;justify-content:space-between;gap:10px;margin-top:10px}
.bot-foot:empty{display:none}
.bot-mini{
  cursor:pointer;border:0;background:none;padding:2px 0;
  font-family:'Inter',sans-serif;font-size:var(--tx-xs);font-weight:500;
  color:var(--text-muted);-webkit-text-fill-color:var(--text-muted);
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(197,160,89,.55);
  transition:color .3s ease;
}
.bot-mini[hidden]{display:none}
.bot-mini:hover{color:var(--choco);-webkit-text-fill-color:var(--choco)}

/* шаг 2 — переход в WhatsApp */
#botWa,#botStart{
  display:block;width:100%;margin-top:14px;cursor:pointer;
  background:var(--choco);color:var(--white);-webkit-text-fill-color:var(--white);
  border:1px solid rgba(212,175,55,.45);border-radius:999px;padding:12px 18px;
  font-family:'Montserrat',sans-serif;font-size:var(--tx-sm);font-weight:700;letter-spacing:.01em;
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease;
}
#botWa:hover,#botStart:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(212,175,55,.35)}

/* сноска под справкой о часах */
.bot-fine{
  margin-top:8px;text-align:right;
  font-family:'Inter',sans-serif;font-size:var(--tx-xs);font-weight:400;line-height:1.45;
  color:var(--text-muted);-webkit-text-fill-color:var(--text-muted);
}

/* Список документов для поступления в итоге подбора.
   Намеренно НЕ мелким шрифтом .bot-fine: по этому списку человек
   собирает папку и идёт в поликлинику, значит текст должен читаться. */
.bot-docs{margin-top:12px;padding-top:10px;border-top:1px solid rgba(43,24,16,.07)}
.bot-docs-cap{
  margin-bottom:4px;font-family:'Inter',sans-serif;font-size:var(--tx-xs);font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--text-faint);-webkit-text-fill-color:var(--text-faint);
}
.bot-docs-text{
  font-family:'Inter',sans-serif;font-size:var(--tx-xs);font-weight:400;line-height:1.5;
  color:var(--text-body);-webkit-text-fill-color:var(--text-body);
}
#bot [hidden]{display:none !important}
.bot-ring{background:var(--choco);animation:ring 2.8s ease-out infinite}
@keyframes ring{
  0%{box-shadow:0 0 0 0 rgba(212,175,55,.6)}
  70%{box-shadow:0 0 0 14px rgba(212,175,55,0)}
  100%{box-shadow:0 0 0 0 rgba(212,175,55,0)}
}
.bot-msg{transition:opacity .3s ease}
.bot-msg.is-swap{opacity:0}

/* =====================================================================
   8. СЛУЖЕБНОЕ
   ===================================================================== */
.reveal{opacity:0;transform:translateY(20px);animation:rise .9s cubic-bezier(.16,1,.3,1) forwards}
@keyframes rise{to{opacity:1;transform:translateY(0)}}
.hair{height:1px;background:rgba(212,175,55,.35)}
*:focus-visible{outline:2px solid var(--choco);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  .reveal{opacity:1;transform:none}
}

/* =====================================================================
   9. ЗАГОЛОВКИ: ГОРЬКИЙ ШОКОЛАД С ЗОЛОТЫМ ОТСВЕТОМ ПО НИЖНЕЙ КРОМКЕ
   ~90 % площади букв — плотный шоколад var(--choco-title), и лишь нижние ~10 %
   уходят в античное золото var(--gold-antique). Никакой анимации: объём даёт
   статичная мягкая кофейная тень через filter:drop-shadow.
   background-size:100% 1em + repeat-y — чтобы КАЖДАЯ строка заголовка
   получила свой отсвет по нижней кромке, а не только последняя.
   !important обязателен: перебивает защиту от ночной инверсии выше.
   ===================================================================== */
.gold-heading,.gold-eyebrow,.gold-slogan{
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
}

.gold-heading,.gold-slogan{
  font-weight:900 !important;
  background-image:var(--gold-sweep) !important;
  background-size:100% 1em;
  background-repeat:repeat-y;
  filter:
    drop-shadow(0 1px 0 rgba(43,24,16,.45))
    drop-shadow(0 5px 10px rgba(74,53,32,.26))
    drop-shadow(0 14px 24px rgba(43,24,16,.16));
}

/* Надзаголовок «Стоимость курса» */
.gold-eyebrow{
  font-weight:700 !important;
  background-image:linear-gradient(135deg,
    var(--choco-warm) 0%, #8A6A31 38%, var(--gold-antique) 52%, var(--gold-text) 70%, var(--choco) 100%) !important;
}

/* Цифры цен — без градиента. Цена должна бить наотмашь, а не переливаться.
   Цвет шоколадный var(--choco) — тот же, что у кнопки: взгляд связывает цену с действием. */
.price-strong{
  font-weight:900 !important;
  color:var(--choco) !important;
  -webkit-text-fill-color:var(--choco) !important;
  letter-spacing:-.045em;
}

/* =====================================================================
   9b. ГЛАВНЫЙ ЭКРАН — БРУТАЛЬНЫЙ, КОНТРАСТНЫЙ, БЕЗ АНИМАЦИИ
   ===================================================================== */

/* Города под флагом: раньше терялись, теперь читаются с двух метров */
.hero-cities{
  margin-bottom:26px;
  font-family:'Montserrat',sans-serif;
  font-size:var(--tx-lg);font-weight:700;
  letter-spacing:2px;text-transform:uppercase;
  color:var(--choco-cities) !important;-webkit-text-fill-color:var(--choco-cities) !important;
}
@media (min-width:768px){ .hero-cities{font-size:22px;margin-bottom:30px} }

/* Массивный заголовок: 52px, вес 900, два слоя цвета */
.hero-title{
  margin:0 auto 30px;max-width:20ch;
  font-family:'Montserrat',sans-serif;
  font-size:clamp(2.1rem,7.2vw,3.25rem);   /* до 52px */
  font-weight:900;line-height:1.02;
  letter-spacing:-.035em;text-transform:uppercase;
}
/* Обе строки заголовка залиты одним градиентом: 90 % шоколада и золотая
   кромка по низу букв. Раньше первая строка была плоским шоколадом, но
   заголовок читался как два разных материала — теперь это одна фраза.
   background-size:100% 1em с repeat-y даёт свою кромку каждой строке,
   иначе золото досталось бы только последней. */
.hero-title-main{
  display:block;
  background-image:var(--gold-sweep);
  background-size:100% 1em;background-repeat:repeat-y;
  -webkit-background-clip:text;background-clip:text;
  color:transparent !important;-webkit-text-fill-color:transparent !important;
  /* text-shadow здесь нельзя: он просвечивал бы сквозь прозрачные буквы */
  text-shadow:none;
  filter:
    drop-shadow(2px 4px 10px rgba(43,24,16,.22))
    drop-shadow(0 10px 22px rgba(74,53,32,.28))
    drop-shadow(0 20px 34px rgba(43,24,16,.16));
}
/* «СВОБОДЫ.» — тот же градиент, что и у первой строки.
   Тень даём через drop-shadow: обычный text-shadow просвечивал бы
   сквозь буквы, залитые прозрачным цветом при background-clip:text. */
.gold-accent{
  display:block;
  background-image:var(--gold-sweep);
  background-size:100% 1em;background-repeat:repeat-y;
  -webkit-background-clip:text;background-clip:text;
  color:transparent !important;-webkit-text-fill-color:transparent !important;
  filter:
    drop-shadow(2px 4px 10px rgba(43,24,16,.22))
    drop-shadow(0 10px 22px rgba(74,53,32,.28))
    drop-shadow(0 20px 34px rgba(43,24,16,.16));
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .hero-title-main,.gold-accent{
    background-image:none;
    color:var(--choco-title) !important;-webkit-text-fill-color:var(--choco-title) !important;
    filter:none;
    text-shadow:2px 4px 10px rgba(43,24,16,.15);
  }
}

/* Продающий абзац: крупно, контрастно, с акцентами */
.hero-lead p{
  font-family:'Inter',sans-serif;
  font-size:var(--tx-md);font-weight:400;line-height:1.65;
  color:var(--text-lead);
}
.hero-lead p + p{margin-top:20px}
@media (min-width:768px){ .hero-lead p{font-size:18px} }  /* на ПК строка длиннее, кегль можно поднять */
.hero-lead strong{
  font-weight:700;
  color:var(--choco-title);-webkit-text-fill-color:var(--choco-title);
}

/* Продающая реплика между заголовком и абзацами.
   24px по ТЗ; на смартфоне опускается до 19px, иначе занимает пол-экрана. */
.hero-subtitle{
  margin:0 auto 24px;
  font-family:'Montserrat',sans-serif;
  font-size:clamp(var(--tx-lg),2.1vw,24px);
  font-weight:700;line-height:1.35;letter-spacing:-.015em;
  color:var(--choco-title) !important;-webkit-text-fill-color:var(--choco-title) !important;
}

/* ДЕЙСТВИЕ В ПЕРВОМ ЭКРАНЕ.
   Главная кнопка одна и она единственная окрашена — правило «один акцент
   на экран». Вторая ссылка текстовая: она нужна тому, кто пришёл только
   за ценой, и не спорит с главной кнопкой за внимание. */
.hero-actions{
  margin:0 auto 30px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.hero-cta-main{
  width:100%;max-width:340px;
  border-radius:999px;padding:16px 26px;
  font-family:'Montserrat',sans-serif;
  font-size:var(--tx-md);font-weight:800;letter-spacing:.01em;
}
.hero-cta-second{
  font-family:'Inter',sans-serif;
  font-size:var(--tx-md);font-weight:600;
  color:var(--gold-deep) !important;-webkit-text-fill-color:var(--gold-deep) !important;
  border-bottom:1px solid rgba(197,160,89,.5);
  padding-bottom:2px;
  transition:color .3s ease,border-color .3s ease;
}
.hero-cta-second:hover{
  color:var(--choco-title) !important;-webkit-text-fill-color:var(--choco-title) !important;
  border-color:var(--choco-title);
}
.hero-cta-second i{font-style:normal;margin-left:4px}
@media (min-width:768px){
  .hero-actions{flex-direction:row;justify-content:center;gap:24px}
  .hero-cta-main{width:auto;min-width:300px}
}

/* Три быстрых преимущества: на ПК в ряд, на смартфоне друг под другом.
   Текст внутри выключен влево — по центру короткие строки читаются рвано. */
.hero-perks{
  display:grid;gap:14px;margin-top:36px;max-width:980px;text-align:left;
}
@media (min-width:768px){
  .hero-perks{grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px}
}
.hero-perks li{
  display:grid;grid-template-columns:auto 1fr;
  grid-template-areas:'ico title' 'ico text';
  gap:3px 14px;align-items:start;
  padding:18px 20px;border-radius:20px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(43,24,16,.10);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 20px 44px rgba(43,24,16,.05);
  transition:background .45s cubic-bezier(.4,0,.2,1),
             border-color .45s ease,transform .45s cubic-bezier(.16,1,.3,1);
}
.hero-perks li:hover{
  background:rgba(255,255,255,.82);
  border-color:rgba(197,160,89,.55);
  transform:translateY(-3px);
}
.hero-perk-ico{
  grid-area:ico;display:grid;place-items:center;
  width:38px;height:38px;border-radius:12px;
  color:var(--gold-antique);
  border:1px solid rgba(197,160,89,.40);
  background:rgba(197,160,89,.09);
}
.hero-perk-ico svg{width:21px;height:21px}
.hero-perks strong{
  grid-area:title;align-self:center;
  font-family:'Montserrat',sans-serif;font-size:var(--tx-md);font-weight:800;
  letter-spacing:-.01em;
  color:var(--choco-title) !important;-webkit-text-fill-color:var(--choco-title) !important;
}
.hero-perk-txt{
  grid-area:text;
  font-family:'Inter',sans-serif;font-size:var(--tx-sm);font-weight:300;line-height:1.5;
  color:var(--text-body);
}

/* Мягкая кофейная тень для всех заголовков секций */
h1,h2{text-shadow:2px 4px 10px rgba(43,24,16,.15)}
.gold-heading,.gold-slogan,.gold-accent{text-shadow:none}  /* у них тень через filter */

/* Подстраховка: браузеры без background-clip:text вернут шоколадный текст */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .gold-heading,.gold-eyebrow,.gold-slogan{
    background-image:none !important;
    -webkit-text-fill-color:var(--choco-title) !important;
    color:var(--choco-title) !important;
  }
}

/* --- КНОПКА, ВАРИАНТ 1: шоколад + золотой текст (включён) --------- */
.pill--gold-text,.pill--gold-text *{
  color:var(--gold-light) !important;-webkit-text-fill-color:var(--gold-light) !important;
  font-weight:800 !important;
}
.pill--gold-text:hover,.pill--gold-text:hover *{
  color:var(--gold-blik) !important;-webkit-text-fill-color:var(--gold-blik) !important;
}

/* --- КНОПКА, ВАРИАНТ 2: шоколад + бегущий золотой блик ------------
   Чтобы примерить: замените в разметке класс pill--gold-text на pill--gold-sheen */
.pill--gold-sheen{
  background-image:linear-gradient(135deg,
    #1C100B 0%, var(--choco-soft) 35%, #50392B 50%, var(--choco-soft) 65%, #1C100B 100%) !important;
  background-size:200% auto !important;
  background-position:left center;
  border:1px solid rgba(212,175,55,.45) !important;
  box-shadow:0 4px 15px rgba(36,22,20,.3), inset 0 1px 1px rgba(255,255,255,.1) !important;
  transition:background-position .6s ease, box-shadow .45s ease, color .4s ease;
}
.pill--gold-sheen,.pill--gold-sheen *{
  color:var(--gold-light) !important;-webkit-text-fill-color:var(--gold-light) !important;font-weight:800 !important;
}
.pill--gold-sheen:hover{
  background-position:right center;
  box-shadow:0 6px 20px rgba(197,160,89,.28) !important;
}
.pill--gold-sheen:hover,.pill--gold-sheen:hover *{
  color:var(--gold-blik) !important;-webkit-text-fill-color:var(--gold-blik) !important;
}

/* =====================================================================
   10. ЦИФРЫ, АВТОПАРК, АВТОДРОМ, ИНСТРУКТОРЫ
   ===================================================================== */
.fact,.fleet,.teacher{
  background:rgba(255,255,255,.6) !important;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(36,22,20,.14) !important;
  box-shadow:0 30px 60px rgba(36,22,20,.04);
  transition:all .5s cubic-bezier(.4,0,.2,1);
}
.fact:hover,.fleet:hover,.teacher:hover{
  background:rgba(255,255,255,.8) !important;
  border-color:rgba(212,175,55,.6) !important;
  transform:translateY(-4px);
}
.fact-num{
  background-image:linear-gradient(120deg,
    var(--choco) 0%, var(--choco) 26%, var(--gold-text) 42%, #B8933F 52%,
    var(--gold-text) 62%, var(--choco) 78%, var(--choco) 100%);
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .fact-num{background-image:none;-webkit-text-fill-color:var(--choco) !important;color:var(--choco) !important}
}

.fleet-media{
  height:132px;display:flex;align-items:flex-end;justify-content:center;
}
.fleet-media img{max-height:132px;width:auto;max-width:100%;
  filter:drop-shadow(0 10px 16px rgba(36,22,20,.16));}
.fleet-media--icon{align-items:center;opacity:.9}

.pad{
  background:rgba(255,255,255,.6) !important;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(212,175,55,.45) !important;
  box-shadow:0 30px 60px rgba(36,22,20,.05);
}
.pad-mark{display:flex;justify-content:center}

/* КРУГЛОЕ МЕСТО ПОД ФОТО. Переделано 01.09.2026 по слову директора:
   «просто сделай их в кружочке». До этого стоял прямоугольник
   277 × 190 со скруглением 20 px.

   Круг выбран не только по его просьбе — он честнее для портретов
   с разных съёмок: у прямоугольника видно, что кадры разной высоты
   и по-разному обрезаны, у круга это не читается. Фотографии школа
   привозит от профессионального фотографа в пятницу; подставлять
   ничего не придётся — файлы просто лягут в assets/images
   под теми же именами, и круги заполнятся сами.

   Размер задан через aspect-ratio, а не высотой: круг остаётся
   кругом на любой ширине карточки. */
.teacher-photo{
  position:relative;overflow:hidden;
  width:min(190px,70%);aspect-ratio:1/1;
  margin:0 auto;
  border-radius:50%;
  border:1px solid rgba(197,160,89,.45);
  background:linear-gradient(150deg,var(--choco-soft) 0%,var(--choco) 55%,var(--choco-deep) 100%);
  display:flex;align-items:center;justify-content:center;
  background-size:cover;background-position:center top;
}
/* Фото поверх подложки. Если файла ещё нет, скрипт прячет <img>
   и остаются инициалы на шоколадной подложке — «битой» картинки не видно. */
.teacher-photo img{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;object-fit:cover;object-position:center top;
}
.teacher-initials{
  position:relative;z-index:0;
  font-size:44px;font-weight:900;letter-spacing:.04em;
  color:var(--accent-gold) !important;-webkit-text-fill-color:var(--accent-gold) !important;opacity:.75;
}
/* предмет, который ведёт преподаватель */
.teacher-subject{
  font-family:'Inter',sans-serif;font-size:var(--tx-xs);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-antique);margin-bottom:7px;
}

/* =====================================================================
   11. ЗАГОЛОВКИ СЕКЦИЙ — БЕЗ АНИМАЦИИ И БЕЗ «3D-ЛЕСЕНКИ»
   Прежние псевдослои (ступенчатая толщина букв + бегущий золотой блик)
   отключены полностью. Объём даёт статичная мягкая тень из секции 9,
   класс .h3d оставлен только как якорь разметки.
   ===================================================================== */
.h3d{position:relative;display:inline-block}
.h3d::before,.h3d::after{content:none !important;display:none !important}

/* =====================================================================
   12. ТАРИФНЫЕ КАРТОЧКИ: КОМПАКТНАЯ ГЕОМЕТРИЯ + АДАПТИВ
   Вертикальный ритм и фото завязаны на высоту вьюпорта (vh),
   поэтому ряд из четырёх карточек целиком помещается на экране
   ноутбука (768–900 px по высоте) без прокрутки самой карточки.
   ===================================================================== */
.iphone-card{
  --pad:       clamp(13px, 1.1vw, 20px);   /* внутренние отступы            */
  --step:      clamp(.28rem, .55vh, .7rem);/* единый вертикальный шаг       */
  --photo:     clamp(72px, 8.5vh, 108px);  /* высота фото / видео           */
  --photo-gap: clamp(16px, 1.6vh, 22px);   /* «воздух» до кнопки, мин. 16px */
  padding:10px var(--pad) calc(var(--pad) + 12px) !important;  /* +12px под полоску home */
  border-width:6px !important;
  border-radius:38px;
  cursor:pointer;              /* вся карточка — триггер бота (клик) */
}

/* Полоска home внизу — та самая, что у iPhone под экраном.
   Дёшево, но именно она вместе с «островком» сверху читается как телефон. */
.iphone-card::after{
  content:'';
  position:absolute;left:50%;bottom:9px;transform:translateX(-50%);
  width:32%;height:4px;border-radius:999px;
  background:rgba(43,24,16,.20);
  pointer-events:none;
}
/* единый ритм вместо разнобоя утилит mb-* */
/* Отступ под строкой состояния телефона. Минимум обязателен: «островок»
   (чёлка) висит абсолютом и заходит на эту строку, а без запаса надзаголовок
   («Легковые автомобили») подпирал его снизу вплотную. */
.iphone-card .mb-8{margin-bottom:max(19px, calc(var(--step) * 1.15)) !important}
.iphone-card .mb-7{margin-bottom:calc(var(--step) * 1.15) !important}
.iphone-card .mb-6{margin-bottom:var(--step) !important}
.iphone-card .mb-5{margin-bottom:var(--step) !important}
.iphone-card .mb-2{margin-bottom:calc(var(--step) * .4) !important}
.iphone-card .mb-1{margin-bottom:calc(var(--step) * .2) !important}
.iphone-card h3{
  font-size:clamp(1.05rem,1.35vw,1.45rem);
  margin-bottom:calc(var(--step) * .85) !important;
}
.iphone-card .price-strong{
  font-size:clamp(1.75rem,2.4vw,2.6rem);   /* цена бьёт наотмашь */
  margin-bottom:calc(var(--step) * .9) !important;
}
/* Шрифты описаний. Список пунктов — главный «пожиратель» высоты карточки
   (до 295px), поэтому потолок 16px, а не 18px: на колонке шириной ~250px
   это по-прежнему уверенно читаемо, но ряд перестаёт быть вытянутым.
   Сноска со звёздочкой — служебный текст, ей 17px было явно много. */
.iphone-card ul{font-size:var(--tx-md) !important;line-height:1.45}
.iphone-card ul > li + li{margin-top:calc(var(--step) * .5) !important}
.iphone-card p.t-body{font-size:var(--tx-sm) !important;line-height:1.5}
.iphone-card .seg{padding-top:calc(var(--step) * .7);padding-bottom:calc(var(--step) * .7)}
.iphone-card .pill{padding-top:calc(var(--step) * .9);padding-bottom:calc(var(--step) * .9)}
/* Строка с объёмом обучения и строка про рассрочку — под ценой.
   Обе компактные, по одной строке: карточка и так впритык по высоте. */
.iphone-card .card-spec{
  margin-top:calc(var(--step) * -.35) !important;
  margin-bottom:calc(var(--step) * .5) !important;
  font-family:'Inter',sans-serif;font-size:var(--tx-xs) !important;font-weight:500;
  line-height:1.35;letter-spacing:.01em;
  color:var(--text-muted) !important;-webkit-text-fill-color:var(--text-muted) !important;
}
.iphone-card .card-pay{
  margin-bottom:calc(var(--step) * .6) !important;
  padding:5px 9px;border-radius:9px;
  background:rgba(197,160,89,.14);
  border:1px solid rgba(197,160,89,.32);
  font-family:'Inter',sans-serif;font-size:var(--tx-xs) !important;font-weight:600;
  line-height:1.3;
  color:var(--gold-text) !important;-webkit-text-fill-color:var(--gold-text) !important;
}

/* Общая юридическая сноска под рядом карточек.
   Раньше этот текст дублировался в каждой карточке; правила
   .iphone-card > p:last-of-type обслуживали именно его и удалены —
   иначе они ужали бы до 9.5px строку «* Практические занятия…». */
.tariff-consent{
  margin-top:14px;text-align:center;
  font-family:'Inter',sans-serif;font-size:var(--tx-xs);font-weight:300;line-height:1.5;
  color:var(--text-muted) !important;-webkit-text-fill-color:var(--text-muted) !important;
}
.iphone-card svg.mb-5{height:clamp(24px,3.2vh,34px)}


/* ---------- сетка ---------- */
.tariff-grid{align-items:stretch}

/* ПК и ноутбуки: 4 в ряд.
   Селектор по id — иначе утилита Tailwind .md\:pt-20 перебивает правило:
   специфичность равная, а стили CDN подключаются позже нашего <style>. */
/* Блок категорий подтягиваем вверх на ВСЕХ настольных ширинах, а не только
   от 1280px: при двухколоночной раскладке (768–1279px) над карточками
   оставалось 324px пустоты — 80px паддинга секции и 112px отступа
   у разделителя, — и нижний край карточки уходил под кромку окна. */
@media (min-width:768px){
  #categories{padding-top:.4rem}
  #categories > .mb-12{margin-bottom:.6rem}
  /* div.hair, а не .hair: у Tailwind-утилиты md:mt-28 такая же
     специфичность, а её файл подключается позже нашего — выиграл бы он. */
  div.hair{margin-top:4rem}
}

/* Порог четырёх колонок опущен с 1280 до 1080px.
   При 1080–1279px раньше включались 2 колонки, а значит ДВА ряда карточек
   (суммарно ~800px) — в экран ноутбука это не помещалось в принципе.
   На 1150px четыре колонки дают карточку ~255px — ровно столько же,
   сколько на 1440px, где вёрстка проверена и читается нормально. */
@media (min-width:1080px){
  #categories{padding-top:.4rem}
  #categories > .mb-12{margin-bottom:.5rem}
  /* !important обязателен: в разметке висит утилита Tailwind xl:grid-cols-4,
     её порог 1280px, и подключается она позже нашего файла. */
  /* Колонок ровно столько, сколько карточек (сейчас три: B, A, C/CE).
     Ширина колонки жёсткая и равна ширине карточки, ряд центрируется —
     иначе при трёх карточках в четырёхколоночной сетке справа зияла
     пустая ячейка. Появится новая категория — поменяйте 3 на 4. */
  .tariff-grid{
    grid-template-columns:repeat(4,234px) !important;
    justify-content:center;
    /* Было clamp(10px,1vw,22px) — на 1440px давало всего 14px, карточки
       стояли впритык. Телефоны должны «дышать». */
    gap:clamp(22px,2.4vw,40px) !important;
  }
  /* Пропорции телефона. Высоту наращивать нельзя — ряд перестанет
     помещаться в экран, поэтому ограничиваем ШИРИНУ: при высоте ~470px
     ширина ~218px даёт 2.16:1, то есть пропорции iPhone. Лишнее место
     в колонке уходит в поля, карточка центрируется. */
  .iphone-card{max-width:234px;margin-inline:auto}
}
/* Невысокие ноутбуки (до 820 px по высоте): ряд карточек вместе со сноской
   обязан помещаться целиком. Ужимаем только служебное — фото, отступы и
   «шапку телефона». Цену, название категории и описания не трогаем:
   они продают, а ужимать надо декор. */
@media (min-width:1080px) and (max-height:820px){
  .iphone-card{--photo:clamp(66px,9vh,110px)}
  .iphone-card .price-strong{font-size:1.85rem}
  .iphone-card .mb-8{margin-bottom:max(18px, calc(var(--step) * .55)) !important}
}
/* Ещё ниже (13-дюймовые ноутбуки, окно ниже 760 px) — жмём сильнее. */
@media (min-width:1080px) and (max-height:760px){
  .iphone-card{
    --photo:clamp(44px, 6.2vh, 68px);
    --step:clamp(.2rem, .38vh, .48rem);
  }
  .iphone-card .price-strong{font-size:1.6rem}
  .iphone-card .mb-8.flex{margin-bottom:15px !important;font-size:var(--tx-xs)}
  .iphone-card .card-pay{padding:4px 8px;font-size:var(--tx-xs) !important}
  .iphone-card ul{font-size:var(--tx-sm) !important;line-height:1.32}
  .tariff-consent{margin-top:9px;font-size:var(--tx-xs)}
}
/* планшет и небольшой ноутбук: 2 в ряд (до 1079px — выше идут 4 в ряд) */
@media (min-width:768px) and (max-width:1079px){
  .tariff-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:18px !important}
}
/* ---------- смартфон: горизонтальный слайдер со снапом ---------- */
@media (max-width:767px){
  .tariff-grid{
    display:flex !important;
    gap:14px !important;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:24px;
    -webkit-overflow-scrolling:touch;
    padding:6px 24px 16px;
    margin-inline:-24px;
    scrollbar-width:none;
  }
  .tariff-grid::-webkit-scrollbar{display:none}
  .tariff-grid > .iphone-card{
    flex:0 0 min(84vw,320px);
    scroll-snap-align:center;
    border-width:5px !important;border-radius:32px;
  }
  .iphone-card{
    --photo:clamp(112px,17vh,170px);
    --photo-gap:clamp(20px,2.6vh,30px);
  }
}
/* точки-индикаторы слайдера */
.slider-dots{display:none}
@media (max-width:767px){
  .slider-dots{display:flex;justify-content:center;gap:8px;margin-top:6px}
  .slider-dots button{
    width:7px;height:7px;padding:0;border:0;border-radius:999px;cursor:pointer;
    background:rgba(36,22,20,.22);
    transition:width .35s cubic-bezier(.16,1,.3,1),background .35s ease;
  }
  .slider-dots button.is-on{width:22px;background:var(--accent-gold)}
}

/* =====================================================================
   12b. ПЕРЕКЛЮЧАТЕЛЬ ГОРОДА (филиалы)
   ===================================================================== */
/* Филиалов стало три, и на узком экране кнопки в одну строку не влезают.
   flex-wrap переносит их на вторую строку вместо того, чтобы выдавливать
   переключатель за край страницы. */
.city-switch{
  display:inline-flex;flex-wrap:wrap;justify-content:center;gap:4px;padding:4px;
  border:1px solid rgba(36,22,20,.16);border-radius:999px;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.city-switch button{
  border:0;cursor:pointer;background:transparent;
  padding:8px 16px;border-radius:999px;
  font-family:'Montserrat',sans-serif;font-size:var(--tx-xs);font-weight:700;
  letter-spacing:.04em;color:var(--choco);
  transition:background .3s cubic-bezier(.4,0,.2,1),color .3s ease;
}
.city-switch button:hover{background:rgba(212,175,55,.16)}
.city-switch button.is-on{
  background:var(--choco);color:var(--white);-webkit-text-fill-color:var(--white);
}

/* =====================================================================
   12b-2. МИКРО-КАРУСЕЛЬ ВИДЕО В КАРТОЧКЕ (категория B)
   Живёт на месте .photo-space, поэтому «воздух» до кнопки —
   тот же --photo-gap (не меньше 20px).
   ===================================================================== */
.card-media{
  flex:none;
  margin-bottom:max(20px, var(--photo-gap));
}
/* Два состояния сцены.
   1) Роликов ещё нет — виден poster (фото учебной машины). Тогда сцена
      прозрачная, а фото вписывается ЦЕЛИКОМ (contain) и «парит» с тенью —
      ровно как мотоцикл в категории A. Раньше здесь стоял cover, и машину
      обрезало по краям.
   2) Ролик реально загрузился — скрипт вешает на сцену .has-video, и она
      превращается в плашку с заливкой, а видео заполняет её без полей. */
.card-media-stage{
  position:relative;overflow:hidden;
  height:var(--photo);
  border-radius:20px;
  background:transparent;
}
.card-media-stage.has-video{
  background:var(--bg-tint);
  box-shadow:0 10px 24px rgba(43,24,16,.14);
}
.card-video{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 12px 20px rgba(36,22,20,.16));
  opacity:0;transition:opacity .45s cubic-bezier(.16,1,.3,1);
}
.card-media-stage.has-video .card-video{object-fit:cover;filter:none}
.card-video.is-on{opacity:1}
/* Подпись поверх третьего слайда: «Экзамен на этом же авто!».
   Прижата к самой кромке и сделана компактной: пока роликов нет, под ней
   фото машины, и высокая плашка закрывала бы её почти на треть. */
.card-media-caption{
  position:absolute;left:6px;right:6px;bottom:0;z-index:2;
  display:block;text-align:center;padding:4px 8px;border-radius:10px;
  background:rgba(43,24,16,.82);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-family:'Montserrat',sans-serif;font-size:var(--tx-xs);font-weight:700;line-height:1.25;
  letter-spacing:.01em;color:var(--gold-pale);-webkit-text-fill-color:var(--gold-pale);
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .4s ease,transform .4s cubic-bezier(.16,1,.3,1);
}
.card-media-caption.is-on{opacity:1;transform:translateY(0)}

.card-media-dots{display:flex;justify-content:center;gap:6px;margin-top:9px}
.card-media-dots button{
  width:6px;height:6px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:rgba(43,24,16,.22);
  transition:width .35s cubic-bezier(.16,1,.3,1),background .35s ease;
}
.card-media-dots button.is-on{width:18px;background:var(--gold-antique)}

/* =====================================================================
   12c. ЗАКРЕПЛЁННАЯ ШАПКА С ЦЕНТРАЛЬНОЙ НАВИГАЦИЕЙ
   ===================================================================== */
#siteHeader{
  position:fixed;top:0;left:0;right:0;z-index:80;
  padding:9px 0;
  background:rgba(236,229,220,.82);
  backdrop-filter:blur(18px) saturate(1.05);
  -webkit-backdrop-filter:blur(18px) saturate(1.05);
  border-bottom:1px solid rgba(36,22,20,.08);
  transition:background .4s ease,border-color .4s ease,box-shadow .4s ease;
}
#siteHeader.is-scrolled{
  background:rgba(236,229,220,.95);
  border-color:rgba(197,160,89,.34);
  box-shadow:0 10px 34px rgba(36,22,20,.10);
}
#siteHeader > .header-inner{position:relative;min-height:52px}

/* ---------- слева: логотип + «Автошкола с 2015 года» ---------- */
.header-brand{display:flex;flex:none;align-items:center;gap:10px}
.header-brand-text{display:flex;flex-direction:column;gap:3px}
.header-since{
  font-family:'Inter',sans-serif;font-size:var(--tx-xs);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);
  white-space:nowrap;
}

/* ---------- по центру: навигационные плашки ---------- */
.site-nav{display:flex;align-items:center;gap:7px;justify-content:center}
/* 1200–1459px — шапка остаётся в одну строку, но плашки центрируются
   ПОТОКОМ между логотипом и кнопкой: так они физически не могут наехать
   на телефон, как это было при абсолютном центрировании. */
.nav-pill{
  display:inline-block;white-space:nowrap;
  padding:9px 15px;border-radius:999px;
  border:1px solid rgba(43,24,16,.14);
  background:rgba(255,255,255,.55);
  font-family:'Montserrat',sans-serif;
  font-size:var(--tx-xs);font-weight:700;letter-spacing:.01em;
  color:var(--choco-title);-webkit-text-fill-color:var(--choco-title);
  transition:background .32s cubic-bezier(.4,0,.2,1),
             border-color .32s ease,color .32s ease,
             transform .32s cubic-bezier(.16,1,.3,1),
             box-shadow .32s ease;
}
.nav-pill:hover{
  transform:translateY(-2px);
  border-color:rgba(197,160,89,.8);
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 22px rgba(43,24,16,.10);
}
.nav-pill.is-active{
  background:var(--choco-title);border-color:var(--choco-title);
  color:var(--gold-pale);-webkit-text-fill-color:var(--gold-pale);
  box-shadow:0 8px 20px rgba(43,24,16,.26);
}

/* ---------- справа: соцсети, телефон, кнопка-акцент ---------- */
.header-actions{display:flex;flex:none;align-items:center;gap:14px;margin-left:auto}
.header-social{display:flex;align-items:center;gap:8px}
.social-ico{
  display:grid;place-items:center;width:32px;height:32px;border-radius:999px;
  border:1px solid rgba(43,24,16,.14);
  color:var(--text-muted);
  transition:color .3s ease,border-color .3s ease,background .3s ease,transform .3s cubic-bezier(.16,1,.3,1);
}
.social-ico svg{width:17px;height:17px;fill:currentColor}
.social-ico:hover{
  color:var(--gold-antique);border-color:rgba(197,160,89,.75);
  background:rgba(197,160,89,.10);transform:translateY(-2px);
}
.header-phone{
  flex:none;white-space:nowrap;
  font-family:'Montserrat',sans-serif;font-size:var(--tx-sm);font-weight:700;
  color:var(--choco-title);-webkit-text-fill-color:var(--choco-title);
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:border-color .3s ease;
}
.header-phone:hover{border-color:var(--gold-antique)}
.header-cta{
  flex:none;white-space:nowrap;cursor:pointer;
  padding:11px 22px;border-radius:999px;
  background:var(--choco-title);
  border:1px solid var(--gold-antique);
  font-family:'Montserrat',sans-serif;font-size:var(--tx-sm);font-weight:700;letter-spacing:.02em;
  color:var(--gold-pale);-webkit-text-fill-color:var(--gold-pale);
  transition:transform .32s cubic-bezier(.16,1,.3,1),box-shadow .32s ease,background .32s ease;
}
.header-cta:hover{
  background:var(--choco-warm);
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(197,160,89,.32);
}

/* ≥1200px — шапка в одну строку по «трёхколоночной» схеме: боковые блоки
   получают ОДИНАКОВУЮ долю свободного места, поэтому блок плашек стоит
   ровно по центру экрана и физически не может наехать на телефон
   (абсолютное центрирование такой гарантии не даёт). */
@media (min-width:1440px){
  /* min-width:0 у логотипа позволял флексбоксу сжать его до нуля.
     Логотип не исчезал — он рисовался поверх плашек, и это читалось
     как «меню наехало на название». Теперь ни логотип, ни правый блок
     не сжимаются меньше своего содержимого, а лишнее забирает меню:
     в крайнем случае плашки прокрутятся вбок, но не наложатся. */
  #siteHeader .header-brand{flex:1 1 auto;min-width:max-content}
  #siteHeader .header-actions{flex:1 1 auto;justify-content:flex-end;margin-left:0;min-width:max-content}
  #siteHeader .site-nav{
    flex:0 1 auto;flex-wrap:nowrap;
    min-width:0;overflow-x:auto;scrollbar-width:none;
  }
  #siteHeader .site-nav::-webkit-scrollbar{display:none}
}
/* Плашек в меню восемь, в полном размере они занимают почти тысячу
   пикселей. Вместе с логотипом и правым блоком это 1615px — в контейнер
   на 1400px они не помещаются физически. Поэтому полный размер включаем
   только от 1760px, дав шапке разойтись шире содержимого страницы. */
@media (min-width:1760px){
  #siteHeader > .header-inner{max-width:1760px}
}
/* 1200–1759px — места впритык: уплотняем плашки и убираем
   иконки соцсетей из шапки (они остаются в подвале). */
@media (min-width:1440px) and (max-width:1759px){
  #siteHeader .header-social{display:none}
  #siteHeader .header-actions{gap:9px}
  #siteHeader .site-nav{gap:3px}
  #siteHeader .nav-pill{font-size:var(--tx-xs);padding:8px 9px}
  #siteHeader .header-cta{padding:9px 13px;font-size:var(--tx-xs)}
  #siteHeader .header-phone{font-size:var(--tx-sm)}
  #siteHeader .header-since{font-size:var(--tx-xs)}
}

/* компенсация фиксированной шапки + плавный скролл к якорям */
body{padding-top:74px}
html{scroll-behavior:smooth}
/* 80px = шапка 71px + 9px воздуха. Было 94px — при переходе по плашке
   «Категории» это съедало лишние 14px, и на невысоких экранах нижний
   край карточки уходил под кромку окна. */
#top,#categories,#process,#instructors,#teachers,#autodrom,#branches,#reviews,#rassrochka,#legal{scroll-margin-top:calc(var(--header-h, 71px) + 12px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* До 1440px плашки уходят во вторую строку.
   Раньше порог стоял на 1200px, но подписей стало восемь: в уплотнённом
   виде им нужно 725px, а на экране 1280 между логотипом и телефоном
   остаётся 695. Тридцати не хватало — и браузер резал крайние плашки,
   «Категории» слева и «Юридическую информацию» справа. На своей строке
   им достаётся вся ширина контейнера, и резать нечего. */
@media (max-width:1439px){
  #siteHeader > .header-inner{flex-wrap:wrap;row-gap:9px}
  /* Плашки переносятся в два этажа и центрируются: сколько влезло —
     столько в первом ряду, остальные встают посередине под ним.
     Это лучше боковой прокрутки: пункты меню видно все сразу,
     а не только те, что попали в окно. */
  .site-nav{
    order:3;width:100%;
    flex-wrap:wrap;justify-content:center;
    row-gap:7px;
    padding-bottom:2px;
  }
  body{padding-top:114px}
}
@media (max-width:1023px){
  .site-nav{justify-content:flex-start}
  .header-since{display:none}
}

/* ---------- гамбургер: только на экранах уже 768px ---------- */
.nav-toggle{
  display:none;place-items:center;flex:none;cursor:pointer;
  width:40px;height:40px;border-radius:14px;
  border:1px solid rgba(43,24,16,.16);
  background:rgba(255,255,255,.6);
  transition:background .3s ease,border-color .3s ease;
}
.nav-toggle:hover{background:rgba(255,255,255,.92);border-color:rgba(197,160,89,.7)}
.nav-toggle-bars{display:grid;gap:4px;width:18px}
.nav-toggle-bars i{
  display:block;height:2px;border-radius:2px;background:var(--choco-title);
  transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .25s ease;
}
body.nav-open .nav-toggle-bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.nav-open .nav-toggle-bars i:nth-child(2){opacity:0}
body.nav-open .nav-toggle-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:767px){
  .nav-toggle{display:grid}
  .header-phone{display:none}           /* звонок — по кнопке «Оставить заявку» */
  .header-social{display:none}          /* иконки соцсетей остаются в подвале */
  .header-actions{gap:8px}
  /* Кегль кнопки поднят шкалой с 10,5 до 13 px, и на узком телефоне
     (360 px) шапка перестала помещаться: строка уезжала вправо на 33 px.
     Возвращаем ширину не кеглем, а полями и подписью под знаком. */
  .header-cta{padding:9px 12px;font-size:var(--tx-xs)}
  .header-since{display:none}   /* «Автошкола с 2015 года» — есть в подвале */
  #siteHeader > .header-inner{flex-wrap:nowrap;row-gap:0}

  /* плашки превращаются в выпадающую панель под шапкой.
     top отсчитывается от .header-inner, а она ниже самой шапки на её
     нижний padding (9px). Без этой поправки панель раскрывалась на 10px
     выше и закрывала собой нижнюю кромку шапки. */
  .site-nav{
    position:absolute;top:calc(100% + 9px);left:0;right:0;z-index:5;
    order:0;width:auto;
    flex-direction:column;align-items:stretch;gap:8px;
    margin:0 -24px;padding:0 24px;
    overflow:hidden;max-height:0;opacity:0;pointer-events:none;
    background:rgba(236,229,220,.97);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(197,160,89,.35);
    box-shadow:0 22px 44px rgba(43,24,16,.14);
    transition:max-height .45s cubic-bezier(.16,1,.3,1),
               opacity .3s ease,padding .45s cubic-bezier(.16,1,.3,1);
  }
  body.nav-open .site-nav{
    max-height:calc(100vh - 70px);overflow-y:auto;
    padding:14px 24px 18px;opacity:1;pointer-events:auto;
  }
  .nav-pill{text-align:center;font-size:var(--tx-sm);padding:12px 14px}

  body{padding-top:72px}
  #top,#categories,#process,#instructors,#teachers,#autodrom,#branches,#reviews,#rassrochka,#legal{scroll-margin-top:84px}
}

/* =====================================================================
   12c-1. ОТЗЫВЫ
   ===================================================================== */
#reviews[hidden]{display:none}
.reviews-grid{display:grid;gap:16px}
@media (min-width:768px){ .reviews-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1200px){ .reviews-grid{grid-template-columns:repeat(3,1fr);gap:18px} }

.review{
  display:flex;flex-direction:column;
  padding:22px 24px;border-radius:24px;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(43,24,16,.12);
  box-shadow:0 22px 48px rgba(43,24,16,.06);
  transition:transform .45s cubic-bezier(.16,1,.3,1),
             border-color .45s ease,box-shadow .45s ease;
}
.review:hover{
  transform:translateY(-4px);
  border-color:rgba(197,160,89,.55);
  box-shadow:0 30px 64px rgba(43,24,16,.12);
}
.review-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.review-name{
  font-family:'Montserrat',sans-serif;font-size:var(--tx-md);font-weight:800;letter-spacing:-.01em;
  color:var(--choco-title) !important;-webkit-text-fill-color:var(--choco-title) !important;
}
.review-stars{flex:none;font-size:var(--tx-sm);letter-spacing:.06em;color:var(--gold-antique);-webkit-text-fill-color:var(--gold-antique)}
.review-text{
  flex:1;margin-bottom:14px;
  font-family:'Inter',sans-serif;font-size:var(--tx-md);font-weight:300;line-height:1.6;
  color:var(--text-body);
}
.review-meta{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:10px;border-top:1px solid rgba(43,24,16,.09);
  font-family:'Inter',sans-serif;font-size:var(--tx-xs);font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-muted);-webkit-text-fill-color:var(--text-muted);
}
.review-meta a{
  color:var(--gold-text) !important;-webkit-text-fill-color:var(--gold-text) !important;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(197,160,89,.6);
}
.review-meta a:hover{color:var(--choco-title) !important;-webkit-text-fill-color:var(--choco-title) !important}

/* --- оценка на Яндекс Картах: официальный значок площадки --------- */
.ya-ocenka[hidden]{display:none}
.ya-ocenka{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding:22px 24px;border-radius:24px;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(43,24,16,.12);
  box-shadow:0 22px 48px rgba(43,24,16,.06);
}
/* размер рамки задан числами: значок Яндекса рисуется внутри
   собственной вёрсткой шириной 150px, подстроить его нечем */
.ya-ocenka__mesto{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:150px;height:100px;border-radius:6px;overflow:hidden;
  background:#f3f1ed;border:1px solid rgba(43,24,16,.10);
}
.ya-ocenka__znak{display:block;width:150px;height:100px;border:0}
.ya-ocenka__btn{
  font-family:'Inter',sans-serif;font-size:var(--tx-xs);font-weight:500;line-height:1.35;
  letter-spacing:.06em;text-transform:uppercase;text-align:center;
  color:var(--choco-title);background:none;border:0;cursor:pointer;padding:8px;
}
.ya-ocenka__btn:hover{color:var(--gold-text)}
.ya-ocenka__txt{flex:1 1 240px;min-width:0}
.ya-ocenka__zag{
  font-family:'Montserrat',sans-serif;font-size:var(--tx-md);font-weight:800;
  letter-spacing:-.01em;margin-bottom:6px;
  color:var(--choco-title) !important;-webkit-text-fill-color:var(--choco-title) !important;
}
.ya-ocenka__opis{
  font-family:'Inter',sans-serif;font-size:var(--tx-sm);font-weight:300;line-height:1.6;
  color:var(--text-body);margin-bottom:12px;
}
.ya-ocenka__knopka{
  display:inline-block;
  font-family:'Inter',sans-serif;font-size:var(--tx-xs);font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold-text) !important;-webkit-text-fill-color:var(--gold-text) !important;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(197,160,89,.6);
}
.ya-ocenka__knopka:hover{color:var(--choco-title) !important;-webkit-text-fill-color:var(--choco-title) !important}

/* =====================================================================
   12c-2. БЛОК «РАССРОЧКА БЕЗ БАНКА»
   ===================================================================== */
.pay-box{
  display:grid;gap:26px;align-items:center;
  padding:30px 28px;border-radius:32px;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(197,160,89,.45);
  box-shadow:0 26px 60px rgba(43,24,16,.08);
}
@media (min-width:900px){
  .pay-box{grid-template-columns:1fr auto;gap:44px;padding:38px 42px}
}
.pay-eyebrow{
  font-family:'Inter',sans-serif;font-size:var(--tx-xs);font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px;
}
.pay-lead{
  margin:16px 0 18px;max-width:60ch;
  font-family:'Inter',sans-serif;font-size:16px;font-weight:300;line-height:1.65;
  color:var(--text-body);
}
.pay-lead strong{font-weight:700;color:var(--choco-title);-webkit-text-fill-color:var(--choco-title)}
.pay-list{display:grid;gap:10px;font-family:'Inter',sans-serif;font-size:var(--tx-md);font-weight:300;color:var(--text-body)}
.pay-list li{position:relative;padding-left:18px;line-height:1.5}
.pay-list li::before{
  content:'';position:absolute;left:0;top:9px;
  width:6px;height:6px;border-radius:999px;background:var(--gold-antique);
}
.pay-list strong{font-weight:800;color:var(--choco-title);-webkit-text-fill-color:var(--choco-title)}

/* правая колонка — крупная цифра и кнопка */
.pay-side{
  display:grid;justify-items:center;gap:2px;flex:none;
  padding:24px 30px;border-radius:24px;
  background:linear-gradient(150deg,var(--choco-soft) 0%,var(--choco) 55%,var(--choco-deep) 100%);
  box-shadow:0 20px 44px rgba(43,24,16,.24);
}
.pay-side-num{
  font-family:'Montserrat',sans-serif;font-size:clamp(2rem,4vw,2.9rem);
  font-weight:900;letter-spacing:-.04em;line-height:1;
  color:var(--gold-light) !important;-webkit-text-fill-color:var(--gold-light) !important;
}
.pay-side-cap{
  font-family:'Inter',sans-serif;font-size:var(--tx-xs);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(235,217,180,.72) !important;-webkit-text-fill-color:rgba(235,217,180,.72) !important;
  margin-bottom:16px;
}
.pay-btn{
  cursor:pointer;white-space:nowrap;
  padding:12px 22px;border-radius:999px;
  background:var(--accent-gold);border:1px solid var(--accent-gold);
  font-family:'Montserrat',sans-serif;font-size:var(--tx-sm);font-weight:800;letter-spacing:.02em;
  color:var(--choco) !important;-webkit-text-fill-color:var(--choco) !important;
  transition:transform .32s cubic-bezier(.16,1,.3,1),box-shadow .32s ease,background .32s ease;
}
.pay-btn:hover{
  background:var(--gold-light);transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(212,175,55,.4);
}

/* =====================================================================
   12d. БЛОК «НАШИ ФИЛИАЛЫ»
   ===================================================================== */
.branch-card{
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:28px;
  border:1px solid rgba(43,24,16,.12);
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 24px 52px rgba(43,24,16,.10);
  transition:transform .5s cubic-bezier(.16,1,.3,1),
             box-shadow .5s ease,border-color .5s ease;
}
.branch-card:hover{
  transform:translateY(-5px);
  border-color:rgba(197,160,89,.55);
  box-shadow:0 34px 70px rgba(43,24,16,.16);
}

/* Фото филиала. Если файла ещё нет — img скрывается через onerror
   и остаётся аккуратная подпись-плейсхолдер вместо «битой» картинки. */
.branch-photo{
  position:relative;aspect-ratio:16/10;overflow:hidden;
  background:linear-gradient(140deg,#E4DACD 0%,#D8CBB9 100%);
}
.branch-photo img{
  position:relative;z-index:1;
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.16,1,.3,1);
}
.branch-card:hover .branch-photo img{transform:scale(1.04)}
.branch-photo-fallback{
  position:absolute;inset:0;z-index:0;
  display:grid;place-content:center;text-align:center;gap:6px;
  font-family:'Inter',sans-serif;font-size:var(--tx-sm);font-weight:500;
  letter-spacing:.06em;color:var(--text-faint);padding:16px;
}
.branch-photo-fallback em{font-style:normal;font-size:var(--tx-xs);opacity:.7}

.branch-body{padding:22px 24px 26px}
.branch-eyebrow{
  font-family:'Inter',sans-serif;font-size:var(--tx-xs);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-antique);margin-bottom:6px;
}
.branch-title{
  font-family:'Montserrat',sans-serif;font-size:clamp(1.4rem,2vw,1.9rem);
  font-weight:900;letter-spacing:-.03em;text-transform:uppercase;line-height:1;
  /* !important — перебиваем защиту от ночной инверсии (h1,h2,h3 выше) */
  color:var(--choco-title) !important;-webkit-text-fill-color:var(--choco-title) !important;
  margin-bottom:8px;
}
.branch-address{
  font-family:'Inter',sans-serif;font-size:var(--tx-md);font-weight:400;
  color:var(--text-body);margin-bottom:16px;
}
.branch-list{
  display:grid;gap:9px;margin-bottom:22px;
  font-family:'Inter',sans-serif;font-size:var(--tx-md);font-weight:300;
  line-height:1.5;color:var(--text-body);
}
.branch-list li{position:relative;padding-left:16px}
.branch-list li::before{
  content:'';position:absolute;left:0;top:9px;
  width:5px;height:5px;border-radius:999px;background:var(--gold-antique);
}
.branch-btn{
  cursor:pointer;width:100%;padding:13px 20px;border-radius:999px;
  background:var(--choco-title);border:1px solid var(--gold-antique);
  font-family:'Montserrat',sans-serif;font-size:var(--tx-sm);font-weight:700;
  color:var(--gold-pale);-webkit-text-fill-color:var(--gold-pale);
  transition:transform .32s cubic-bezier(.16,1,.3,1),box-shadow .32s ease,background .32s ease;
}
.branch-btn:hover{
  background:var(--choco-warm);transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(197,160,89,.30);
}

/* =====================================================================
   12e. ИКОНКИ СОЦСЕТЕЙ В ПОДВАЛЕ
   ===================================================================== */
.footer-social{display:flex;align-items:center;gap:10px;margin-top:14px}
.footer-social .social-ico{width:38px;height:38px}
.footer-social .social-ico svg{width:19px;height:19px}

/* =====================================================================
   13. СОГЛАСИЕ НА COOKIE (152-ФЗ) — БАННЕР И ПОЛИТИКА
   ===================================================================== */
#consent{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:70;
  max-width:680px;margin:0 auto;display:none;
  background:rgba(255,255,255,.92) !important;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(212,175,55,.45);border-radius:24px;
  box-shadow:0 26px 70px rgba(36,22,20,.22);
  padding:20px 22px;
}
#consent.is-shown{display:block;animation:rise .6s cubic-bezier(.16,1,.3,1)}
body.consent-shown #bot{bottom:150px}
.consent-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
#consentAccept{
  background:var(--choco) !important;color:var(--white) !important;-webkit-text-fill-color:var(--white) !important;
  border:1px solid rgba(212,175,55,.45);border-radius:999px;
  padding:11px 22px;font-family:'Montserrat',sans-serif;font-size:var(--tx-sm);font-weight:700;cursor:pointer;
}
#consentAccept:hover{background:var(--choco-deep) !important}
#consentNecessary{
  background:transparent !important;color:var(--choco) !important;-webkit-text-fill-color:var(--choco) !important;
  border:1px solid rgba(36,22,20,.3);border-radius:999px;
  padding:11px 22px;font-family:'Montserrat',sans-serif;font-size:var(--tx-sm);font-weight:700;cursor:pointer;
}
#consentNecessary:hover{border-color:rgba(212,175,55,.8)}

#policy{position:fixed;inset:0;z-index:80;display:none}
#policy.is-open{display:flex;align-items:center;justify-content:center;padding:18px}
#policyOverlay{position:absolute;inset:0;background:rgba(36,22,20,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#policyCard{
  position:relative;max-width:760px;width:100%;max-height:88vh;overflow-y:auto;
  background:var(--bg-light) !important;border:1px solid rgba(212,175,55,.5);
  border-radius:24px;padding:34px 30px;
  -webkit-overflow-scrolling:touch;
}
#policyCard h3{font-family:'Montserrat',sans-serif;font-size:19px;font-weight:800;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:14px}
#policyCard h4{font-family:'Montserrat',sans-serif;font-size:var(--tx-sm);font-weight:700;margin:20px 0 8px}
#policyCard p,#policyCard li{font-size:var(--tx-sm);font-weight:300;line-height:1.65;color:var(--text-body) !important;-webkit-text-fill-color:var(--text-body) !important}
#policyCard ul{padding-left:18px;margin:6px 0}
#policyCard li{margin-bottom:4px}
#policyClose{
  position:sticky;top:0;float:right;margin-left:12px;
  width:34px;height:34px;border-radius:50%;border:1px solid rgba(36,22,20,.25);
  background:var(--white);font-size:var(--tx-md);line-height:1;cursor:pointer;color:var(--text-muted);
}
.policy-link{
  background:none;border:none;padding:0;cursor:pointer;
  font-size:inherit;font-weight:inherit;font-family:inherit;
  color:var(--text-muted) !important;-webkit-text-fill-color:var(--text-muted) !important;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(212,175,55,.6);
}
.policy-link:hover{color:var(--choco) !important;-webkit-text-fill-color:var(--choco) !important}

/* =====================================================================
   14. ФИРМЕННАЯ МОНОГРАММА «АА» (трассировка официального логотипа)
   ===================================================================== */
/* Контейнер: сжимает и растягивает знак без потери пропорций */
.logo-container{
  display:flex;align-items:center;justify-content:center;
  line-height:0;
}
.logo-mark{
  width:auto;max-width:100%;
  /* тёплое золотистое свечение — отделяет знак от фона */
  filter:drop-shadow(0 2px 6px rgba(212,175,55,.35));
  transition:transform .3s cubic-bezier(.16,1,.3,1), filter .3s ease;
  transform-origin:center;
}
/* При наведении: плавный рост на 3% и усиление блеска */
.logo-lockup:hover .logo-mark{
  transform:scale(1.03);
  filter:drop-shadow(0 3px 10px rgba(212,175,55,.55));
}

/* Слово «СТАРТ» под флагом крупнее, чем задаёт утилита text-3xl/md:text-5xl:
   логотип на титульном экране высотой 190–280 px, и подпись рядом с ним
   выглядела мелкой. Размер задан здесь, а не классами Tailwind, потому что
   css/tailwind.css собран заранее и новых утилит в нём может не оказаться. */
.hero-wrap .logo-lockup .wordmark{font-size:1.7rem;line-height:1}
@media (min-width:768px){ .hero-wrap .logo-lockup .wordmark{font-size:2.4rem} }

/* Официальный логотип на титульном экране.
   Было 190 px на телефоне и 280 на ПК — эмблема съедала весь первый
   экран. 01.09.2026 уменьшена и поставлена в строку со словом «СТАРТ»:
   знак остаётся узнаваемым, а заголовок и кнопка поднимаются в экран. */
.hero-brand{
  height:96px;width:auto;max-width:min(46vw,280px);object-fit:contain;
  filter:none;   /* тень сквозила бы в прозрачных карманах между аркой и флагом */
}
@media (min-width:768px){ .hero-brand{height:132px;max-width:340px} }
.logo-lockup:hover .hero-brand{transform:scale(1.03);filter:none}

/* =====================================================================
   20. МНОГОСТРАНИЧНОСТЬ
   Блок добавлен при переходе с одностраничника на семь страниц.
   Здесь только НОВЫЕ классы — ничего из блоков 1–19 не переопределяется,
   поэтому размеры карточек, шапки и цен остались прежними.
   ===================================================================== */

/* ---------- шапка внутренней страницы: крошки, H1, лид ---------- */
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-bottom:18px;
  font-family:'Inter',sans-serif;font-size:var(--tx-sm);font-weight:400;
}
.crumbs a{color:var(--text-muted);-webkit-text-fill-color:var(--text-muted);text-decoration:none;transition:color .25s ease}
.crumbs a:hover{color:var(--accent-gold);-webkit-text-fill-color:var(--accent-gold)}
.crumbs span[aria-hidden]{color:var(--gold-antique);-webkit-text-fill-color:var(--gold-antique)}
.crumbs [aria-current]{color:var(--text-body);-webkit-text-fill-color:var(--text-body)}

.page-eyebrow{
  margin-bottom:10px;
  font-family:'Inter',sans-serif;font-size:var(--tx-xs);font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--text-muted);-webkit-text-fill-color:var(--text-muted);
}
.page-h1{font-size:clamp(1.85rem,4.2vw,3.1rem)}
.page-lead{
  margin-top:18px;max-width:62ch;
  font-family:'Inter',sans-serif;font-size:var(--tx-md);font-weight:300;line-height:1.7;
  color:var(--text-body);-webkit-text-fill-color:var(--text-body);
}

/* ---------- анонсы разделов на главной ---------- */
.teasers{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:640px){ .teasers{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1080px){ .teasers{grid-template-columns:repeat(3,1fr)} }

.teaser{
  display:flex;flex-direction:column;
  padding:26px 24px 22px;border-radius:28px;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(36,22,20,.14);
  box-shadow:0 30px 60px rgba(36,22,20,.04);
  text-decoration:none;
  transition:all .5s cubic-bezier(.4,0,.2,1);
}
.teaser:hover{
  background:rgba(255,255,255,.85);
  border-color:rgba(212,175,55,.6);
  transform:translateY(-4px);
  box-shadow:0 38px 72px rgba(36,22,20,.10);
}
.teaser-eyebrow{
  margin-bottom:8px;
  font-family:'Inter',sans-serif;font-size:var(--tx-xs);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-muted);-webkit-text-fill-color:var(--text-muted);
}
.teaser-title{
  margin-bottom:10px;
  font-family:'Montserrat',sans-serif;font-size:17px;font-weight:800;
  letter-spacing:-.02em;color:var(--text-main);-webkit-text-fill-color:var(--text-main);
}
.teaser-txt{
  font-family:'Inter',sans-serif;font-size:var(--tx-sm);font-weight:300;line-height:1.6;
  color:var(--text-body);-webkit-text-fill-color:var(--text-body);
}
.teaser-go{
  margin-top:18px;
  font-family:'Montserrat',sans-serif;font-size:var(--tx-sm);font-weight:700;
  color:var(--gold-deep);-webkit-text-fill-color:var(--gold-deep);
}
.teaser-go i{display:inline-block;font-style:normal;transition:transform .3s ease}
.teaser:hover .teaser-go i{transform:translateX(4px)}

/* ---------- «что входит в стоимость» ---------- */
.incl-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:820px){ .incl-grid{grid-template-columns:repeat(2,1fr)} }
.incl{
  padding:28px 26px;border-radius:28px;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(36,22,20,.14);
}
.incl--yes{border-color:rgba(212,175,55,.5)}
.incl-cap{
  margin-bottom:16px;
  font-family:'Inter',sans-serif;font-size:var(--tx-xs);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-main);-webkit-text-fill-color:var(--text-main);
}
.incl-list{display:grid;gap:11px;font-family:'Inter',sans-serif;font-size:var(--tx-md);font-weight:300;line-height:1.5}
.incl-list li{position:relative;padding-left:20px;color:var(--text-body);-webkit-text-fill-color:var(--text-body)}
.incl-list li::before{
  content:'';position:absolute;left:0;top:8px;
  width:6px;height:6px;border-radius:999px;background:var(--gold-antique);
}
.incl--no .incl-list li::before{background:none;border:1px solid var(--text-muted);width:7px;height:7px;top:7px}
.incl-note{
  margin-top:16px;font-family:'Inter',sans-serif;font-size:var(--tx-sm);font-weight:300;line-height:1.5;
  color:var(--text-muted);-webkit-text-fill-color:var(--text-muted);
}

/* ---------- вопросы и ответы: аккордеон на <details> ---------- */
.faq{display:grid;gap:12px}
.faq-item{
  border-radius:22px;overflow:hidden;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(36,22,20,.14);
  transition:border-color .35s ease,background .35s ease;
}
.faq-item[open]{border-color:rgba(212,175,55,.6);background:rgba(255,255,255,.82)}
.faq-q{
  display:flex;align-items:center;gap:14px;
  padding:18px 22px;cursor:pointer;list-style:none;
  font-family:'Montserrat',sans-serif;font-size:var(--tx-md);font-weight:700;letter-spacing:-.01em;
  color:var(--text-main);-webkit-text-fill-color:var(--text-main);
}
.faq-q::-webkit-details-marker{display:none}
.faq-q::after{
  content:'+';margin-left:auto;flex:none;
  font-family:'Montserrat',sans-serif;font-size:20px;font-weight:700;line-height:1;
  color:var(--gold-antique);-webkit-text-fill-color:var(--gold-antique);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.faq-item[open] .faq-q::after{transform:rotate(45deg)}
.faq-q:hover{color:var(--gold-deep);-webkit-text-fill-color:var(--gold-deep)}
.faq-a{padding:0 22px 20px}
.faq-a p{
  max-width:78ch;
  font-family:'Inter',sans-serif;font-size:var(--tx-md);font-weight:300;line-height:1.65;
  color:var(--text-body);-webkit-text-fill-color:var(--text-body);
}

/* ---------- лента шагов обучения ---------- */
.steps{display:grid;gap:12px;list-style:none;padding:0;margin:0}
.step{
  border-radius:24px;overflow:hidden;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(36,22,20,.14);
  transition:border-color .35s ease,background .35s ease,box-shadow .35s ease;
}
.step.is-open{
  border-color:rgba(212,175,55,.6);
  background:rgba(255,255,255,.85);
  box-shadow:0 26px 54px rgba(36,22,20,.07);
}
.step-head{
  display:flex;align-items:center;gap:16px;width:100%;
  padding:18px 22px;cursor:pointer;text-align:left;
  background:none;border:0;
}
.step-num{
  flex:none;display:grid;place-items:center;
  width:38px;height:38px;border-radius:999px;
  background:linear-gradient(150deg,var(--choco-soft) 0%,var(--choco) 55%,var(--choco-deep) 100%);
  font-family:'Montserrat',sans-serif;font-size:var(--tx-sm);font-weight:800;
  color:var(--gold-light);-webkit-text-fill-color:var(--gold-light);
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.step.is-open .step-num{transform:scale(1.06)}
.step-title{
  font-family:'Montserrat',sans-serif;font-size:var(--tx-md);font-weight:700;letter-spacing:-.01em;
  color:var(--text-main);-webkit-text-fill-color:var(--text-main);
}
.step-chevron{
  margin-left:auto;flex:none;font-size:var(--tx-md);
  color:var(--gold-antique);-webkit-text-fill-color:var(--gold-antique);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.step.is-open .step-chevron{transform:rotate(180deg)}
.step-body{display:none;padding:0 22px 22px 76px}
.step.is-open .step-body{display:block}
.step-body p{
  max-width:74ch;margin-bottom:10px;
  font-family:'Inter',sans-serif;font-size:var(--tx-md);font-weight:300;line-height:1.65;
  color:var(--text-body);-webkit-text-fill-color:var(--text-body);
}
.step-body p:last-child{margin-bottom:0}
.step-link a{
  font-family:'Montserrat',sans-serif;font-size:var(--tx-sm);font-weight:700;
  color:var(--gold-deep);-webkit-text-fill-color:var(--gold-deep);text-decoration:none;
}
.step-link a:hover{text-decoration:underline}
@media (max-width:520px){ .step-body{padding-left:22px} }

/* ---------- страница документов ---------- */
.doc-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:820px){ .doc-grid{grid-template-columns:repeat(3,1fr)} }
.doc-card{
  padding:26px 24px;border-radius:26px;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(36,22,20,.14);
}
.doc-cap{
  margin-bottom:14px;
  font-family:'Inter',sans-serif;font-size:var(--tx-xs);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-main);-webkit-text-fill-color:var(--text-main);
}
.doc-line{
  margin-bottom:7px;
  font-family:'Inter',sans-serif;font-size:var(--tx-sm);font-weight:300;line-height:1.6;
  color:var(--text-body);-webkit-text-fill-color:var(--text-body);
}
.doc-line a{color:var(--gold-deep);-webkit-text-fill-color:var(--gold-deep);text-decoration:none;font-weight:500}
.doc-line a:hover{text-decoration:underline}

/* Сканы лицензии.
   Лицензия — ОДИН бланк с лицевой стороной и оборотом, поэтому обе
   страницы стоят рядом в одной сетке и подписаны сторонами. На узком
   экране они выстраиваются друг под другом. */
.doc-scans{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:720px){ .doc-scans{grid-template-columns:repeat(2,1fr)} }
.doc-scan{
  margin:0;padding:18px 18px 14px;border-radius:26px;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(36,22,20,.14);
}
.doc-scan a{display:block;border-radius:16px;overflow:hidden;
  border:1px solid rgba(36,22,20,.12);background:var(--white);
  box-shadow:0 18px 34px rgba(36,22,20,.08);
  transition:box-shadow .25s ease, transform .25s ease}
.doc-scan a:hover{transform:translateY(-2px);box-shadow:0 24px 44px rgba(36,22,20,.14)}
.doc-scan img{display:block;width:100%;height:auto}
.doc-scan figcaption{
  margin-top:12px;text-align:center;
  font-family:'Inter',sans-serif;font-size:var(--tx-xs);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-body);-webkit-text-fill-color:var(--text-body);
}
/* Ссылка на PDF: обе стороны одним файлом — так документ удобно
   сохранить или распечатать целиком. */
.doc-scan-dl{
  display:inline-block;margin-top:18px;padding:13px 24px;border-radius:999px;
  background:rgba(255,255,255,.6);border:1px solid rgba(212,175,55,.55);
  font-family:'Montserrat',sans-serif;font-size:var(--tx-sm);font-weight:700;
  color:var(--gold-deep);-webkit-text-fill-color:var(--gold-deep);text-decoration:none;
}
.doc-scan-dl:hover{background:rgba(212,175,55,.14)}

.doc-policy{
  padding:30px 28px;border-radius:28px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(36,22,20,.12);
}
/* На странице документов раздел политики — это h2, поэтому его пункты
   стали h3: было h2 → h4 с пропущенной ступенью. Во всплывающем окне
   на других страницах заголовок h3, а пункты остаются h4 — там дерево
   верное. Правило одно на оба случая. */
.doc-policy h3,.doc-policy h4{
  margin:26px 0 10px;
  font-family:'Montserrat',sans-serif;font-size:var(--tx-md);font-weight:800;letter-spacing:-.01em;
  color:var(--text-main);-webkit-text-fill-color:var(--text-main);
}
.doc-policy h3:first-child,.doc-policy h4:first-child{margin-top:0}
.doc-policy p,.doc-policy li{
  font-family:'Inter',sans-serif;font-size:var(--tx-sm);font-weight:300;line-height:1.7;
  color:var(--text-body);-webkit-text-fill-color:var(--text-body);
}
.doc-policy p{margin-bottom:10px;max-width:82ch}
.doc-policy ul{display:grid;gap:8px;margin:0 0 12px;padding:0;list-style:none;max-width:82ch}
.doc-policy li{position:relative;padding-left:18px}
.doc-policy li::before{
  content:'';position:absolute;left:0;top:9px;
  width:5px;height:5px;border-radius:999px;background:var(--gold-antique);
}
.doc-policy b{font-weight:700;color:var(--choco-title);-webkit-text-fill-color:var(--choco-title)}

/* ---------------------------------------------------------------------
   ЗОЛОТОЙ ОТСВЕТ НА ЖИРНЫХ НАДПИСЯХ НОВЫХ БЛОКОВ
   Тот же приём, что у заголовков секций (.gold-heading) и цифр (.fact-num):
   текст заливается градиентом через background-clip, поэтому по нижней
   кромке букв идёт золотая подсветка.

   Отличие от заголовков — тень мягче. У h2 стоит тройной drop-shadow,
   на надписи в 15 пикселей он читался бы как грязь, поэтому здесь
   оставлена одна тонкая тень.
   --------------------------------------------------------------------- */
.teaser-title,.step-title,.faq-q{
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  background-image:linear-gradient(172deg,
    var(--choco-title) 0%, var(--choco-title) 66%, #3A2413 77%,
    #7A5C2E 87%, var(--gold-antique) 96%, #C9A863 100%) !important;
  background-size:100% 1em;
  background-repeat:repeat-y;
  filter:drop-shadow(0 1px 0 rgba(43,24,16,.30));
  text-shadow:none;
}

/* Раскрытый шаг и открытый вопрос — золота чуть больше: видно, что активно */
.step.is-open .step-title,
.faq-item[open] .faq-q,
.faq-q:hover,
.teaser:hover .teaser-title{
  background-image:linear-gradient(172deg,
    var(--choco-title) 0%, #3A2413 58%, #7A5C2E 74%,
    var(--gold-antique) 88%, var(--gold-light) 100%) !important;
}

/* Капс на плашках — косой отлив, как у надзаголовков (.gold-eyebrow) */
.incl-cap,.doc-cap{
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  background-image:linear-gradient(135deg,
    var(--choco-warm) 0%, #8A6A31 38%, var(--gold-antique) 52%, var(--gold-text) 70%, var(--choco) 100%) !important;
}

/* Кнопка «Смотреть цены» в анонсе — тот же косой отлив */
.teaser-go{
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  background-image:linear-gradient(120deg,
    var(--gold-text) 0%, #8A6A31 30%, var(--gold-antique) 55%, #8A6A31 78%, var(--gold-text) 100%) !important;
}
/* стрелка живёт своим цветом: у неё нет заливки градиентом */
.teaser-go i{
  -webkit-text-fill-color:var(--gold-deep) !important;
  color:var(--gold-deep) !important;
}

/* Подстраховка для браузеров без background-clip:text — вернём шоколадный
   текст, как это сделано для заголовков в блоке 8. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .teaser-title,.step-title,.faq-q,.incl-cap,.doc-cap,.teaser-go{
    background-image:none !important;
    -webkit-text-fill-color:var(--choco-title) !important;
    color:var(--choco-title) !important;
    filter:none;
  }
  .teaser-go{-webkit-text-fill-color:var(--gold-deep) !important;color:var(--gold-deep) !important}
}

/* ---------- форма заявки ---------- */
.lead-form{
  padding:30px 28px;border-radius:32px;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(197,160,89,.45);
  box-shadow:0 26px 60px rgba(43,24,16,.08);
}
@media (min-width:900px){ .lead-form{padding:38px 42px} }

.lead-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:720px){ .lead-grid{grid-template-columns:repeat(2,1fr)} }

.field{display:block}
.field-cap{
  display:block;margin-bottom:8px;
  font-family:'Inter',sans-serif;font-size:var(--tx-xs);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-muted);-webkit-text-fill-color:var(--text-muted);
}
.field-cap i{font-style:normal;color:var(--gold-antique);-webkit-text-fill-color:var(--gold-antique)}

.field input,.field select{
  width:100%;padding:14px 16px;border-radius:16px;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(36,22,20,.18);
  font-family:'Inter',sans-serif;font-size:var(--tx-md);font-weight:400;
  color:var(--text-main);-webkit-text-fill-color:var(--text-main);
  transition:border-color .3s ease,box-shadow .3s ease,background .3s ease;
}
.field input::placeholder{color:var(--placeholder);-webkit-text-fill-color:var(--placeholder)}
.field input:focus,.field select:focus{
  outline:none;background:#fff;
  border-color:var(--gold-antique);
  box-shadow:0 0 0 4px rgba(212,175,55,.16);
}
.field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23C5A059' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
  padding-right:42px;
}
.field.is-bad input,.field.is-bad select{
  border-color:var(--kirpich);
  box-shadow:0 0 0 4px rgba(180,67,47,.12);
}
.field-err{
  display:none;margin-top:7px;
  font-family:'Inter',sans-serif;font-size:var(--tx-sm);font-weight:400;
  color:var(--kirpich);-webkit-text-fill-color:var(--kirpich);
}
.field-err.is-shown{display:block}

/* ---------- чекбоксы согласия ---------- */
.lead-checks{margin-top:24px;display:grid;gap:14px}
.check{
  display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  padding:14px 16px;border-radius:18px;
  background:rgba(255,255,255,.5);
  border:1px solid rgba(36,22,20,.12);
  transition:border-color .3s ease,background .3s ease;
}
.check:hover{background:rgba(255,255,255,.75);border-color:rgba(197,160,89,.5)}
.check input{
  flex:none;margin-top:2px;width:19px;height:19px;
  accent-color:var(--gold-deep);cursor:pointer;
}
.check-txt{
  font-family:'Inter',sans-serif;font-size:var(--tx-sm);font-weight:300;line-height:1.55;
  color:var(--text-body);-webkit-text-fill-color:var(--text-body);
}
.check-txt a{color:var(--gold-deep);-webkit-text-fill-color:var(--gold-deep);text-decoration:underline}
.check-txt em{font-style:normal;color:var(--text-muted);-webkit-text-fill-color:var(--text-muted)}
.lead-checks .field-err{margin:-8px 0 0 2px}

/* ---------- кнопка и подпись ---------- */
.lead-foot{
  margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:18px;
}
.lead-btn{
  cursor:pointer;white-space:nowrap;
  padding:16px 30px;border-radius:999px;
  background:var(--accent-gold);border:1px solid var(--accent-gold);
  font-family:'Montserrat',sans-serif;font-size:var(--tx-sm);font-weight:800;letter-spacing:.01em;
  color:var(--choco) !important;-webkit-text-fill-color:var(--choco) !important;
  transition:transform .32s cubic-bezier(.16,1,.3,1),box-shadow .32s ease,background .32s ease;
}
.lead-btn:hover{
  background:var(--gold-light);transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(212,175,55,.4);
}
.lead-note{
  max-width:42ch;
  font-family:'Inter',sans-serif;font-size:var(--tx-sm);font-weight:300;line-height:1.5;
  color:var(--text-muted);-webkit-text-fill-color:var(--text-muted);
}
.lead-note.is-bad{color:var(--kirpich);-webkit-text-fill-color:var(--kirpich);font-weight:400}
.lead-note.is-ok{color:var(--gold-text);-webkit-text-fill-color:var(--gold-text);font-weight:400}

/* ---------- карты проезда ---------- */
.maps{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:820px){ .maps{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1180px){ .maps{grid-template-columns:repeat(3,1fr)} }
.map-card{
  padding:22px;border-radius:28px;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(36,22,20,.14);
}
.map-cap{
  font-family:'Montserrat',sans-serif;font-size:17px;font-weight:800;letter-spacing:-.02em;
  color:var(--text-main);-webkit-text-fill-color:var(--text-main);
}
.map-addr{
  margin:4px 0 14px;
  font-family:'Inter',sans-serif;font-size:var(--tx-sm);font-weight:300;
  color:var(--text-body);-webkit-text-fill-color:var(--text-body);
}
.map-box{
  position:relative;display:grid;place-items:center;gap:10px;
  height:260px;border-radius:20px;overflow:hidden;
  background:
    radial-gradient(circle at 30% 30%, rgba(212,175,55,.16), transparent 60%),
    linear-gradient(150deg,var(--choco-soft) 0%,var(--choco) 55%,var(--choco-deep) 100%);
}
.map-box iframe{width:100%;height:100%;border:0;display:block}
.map-btn{
  cursor:pointer;
  padding:13px 26px;border-radius:999px;
  background:var(--accent-gold);border:1px solid var(--accent-gold);
  font-family:'Montserrat',sans-serif;font-size:var(--tx-sm);font-weight:800;
  color:var(--choco) !important;-webkit-text-fill-color:var(--choco) !important;
  transition:transform .32s cubic-bezier(.16,1,.3,1),box-shadow .32s ease,background .32s ease;
}
.map-btn:hover{background:var(--gold-light);transform:translateY(-2px);box-shadow:0 14px 30px rgba(212,175,55,.35)}
.map-hint{
  max-width:26ch;text-align:center;
  font-family:'Inter',sans-serif;font-size:var(--tx-xs);font-weight:300;line-height:1.45;
  color:rgba(235,217,180,.72) !important;-webkit-text-fill-color:rgba(235,217,180,.72) !important;
}

/* ---------------------------------------------------------------------
   БОЛЬШИЕ ЭКРАНЫ: КОЛОНКА ШИРЕ, КАРТОЧКИ КРУПНЕЕ
   Содержимое сайта было зажато в 1152px. На мониторе 1900px это давало
   по 377px пустоты с каждой стороны — примерно пять сантиметров.

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

   Ниже 1500px ничего не меняется: там прежние 1152px и 234px.
   --------------------------------------------------------------------- */
@media (min-width:1500px){
  .mx-auto.max-w-6xl{max-width:1340px}
  .tariff-grid{grid-template-columns:repeat(4,264px) !important}
  .iphone-card{max-width:264px}
}
@media (min-width:1760px){
  .mx-auto.max-w-6xl{max-width:1480px}
  .tariff-grid{grid-template-columns:repeat(4,290px) !important}
  .iphone-card{max-width:290px}
}


/* =====================================================================
   СТРАНИЦА ОШИБКИ 404
   =====================================================================
   Своя, а не служебная заглушка nginx. Задача одна: человек попал
   не туда — дать ему уйти на нужную страницу, а не из сайта. */
/* На телефоне body получает padding-top:72px под фиксированную шапку.
   На странице ошибки шапки нет, и этот отступ оставлял пустую полосу. */
.stranica-oshibki{padding-top:0 !important}
.oshibka-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:28px 24px;
}
.oshibka{max-width:560px;text-align:center}
.oshibka-znak{height:76px;width:auto;margin:0 auto 20px;object-fit:contain}
.oshibka-kod{
  font-family:'Inter',sans-serif;
  font-size:var(--tx-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;
  color:var(--text-muted);-webkit-text-fill-color:var(--text-muted);
  margin-bottom:10px;
}
.oshibka-title{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(1.75rem,6vw,2.5rem);font-weight:900;
  text-transform:uppercase;letter-spacing:-.03em;line-height:1.05;
  margin-bottom:16px;
}
.oshibka-lead{
  font-family:'Inter',sans-serif;
  font-size:var(--tx-md);font-weight:400;line-height:1.6;
  color:var(--text-body);-webkit-text-fill-color:var(--text-body);
  max-width:42ch;margin:0 auto 24px;
}
.oshibka-links{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-bottom:22px}
.oshibka-links a{
  font-family:'Inter',sans-serif;
  font-size:var(--tx-sm);font-weight:600;
  padding:10px 16px;border-radius:999px;
  border:1px solid rgba(197,160,89,.45);
  background:rgba(255,255,255,.6);
  color:var(--gold-text) !important;-webkit-text-fill-color:var(--gold-text) !important;
  transition:background-color .3s ease,border-color .3s ease,color .3s ease;
}
.oshibka-links a:hover{
  background:var(--gold-pale);border-color:var(--gold-antique);
  color:var(--choco-title) !important;-webkit-text-fill-color:var(--choco-title) !important;
}
.oshibka-links a:active{transform:translateY(1px) scale(.985)}
.oshibka-link--main{
  background:var(--choco) !important;border-color:var(--choco) !important;
  color:var(--gold-light) !important;-webkit-text-fill-color:var(--gold-light) !important;
}
.oshibka-link--main:hover{
  background:var(--choco-deep) !important;border-color:var(--choco-deep) !important;
  color:var(--gold-blik) !important;-webkit-text-fill-color:var(--gold-blik) !important;
}
.oshibka-tel{
  font-family:'Inter',sans-serif;
  font-size:var(--tx-md);color:var(--text-body);-webkit-text-fill-color:var(--text-body);
}
.oshibka-tel a{
  font-weight:700;
  color:var(--choco-title) !important;-webkit-text-fill-color:var(--choco-title) !important;
  border-bottom:1px solid rgba(197,160,89,.6);
}


/* =====================================================================
   ЗАПАСНОЙ ПУТЬ ЗАЯВКИ и ТЕЛЕФОН В ПОДВАЛЕ
   =====================================================================
   Заведено 01.09.2026. Сайт не отправляет заявку сам — он открывает
   WhatsApp с готовым текстом. Если тот не открылся или человек не нажал
   в нём «Отправить», заявки не существует нигде: она нигде не хранится.
   Блок ниже — не украшение, а второй и третий путь для человека,
   который УЖЕ заполнил форму и УЖЕ дал согласие. Терять его на
   последнем шаге дороже всего. */
.zapasnoj-put{
  margin-top:14px;padding:16px 18px;
  border:1px solid rgba(197,160,89,.45);border-radius:18px;
  background:rgba(255,255,255,.55);
}
.zapasnoj-podpis{
  margin-bottom:12px;
  font-family:'Inter',sans-serif;
  font-size:var(--tx-sm);font-weight:500;
  color:var(--text-body);-webkit-text-fill-color:var(--text-body);
}
.zapasnoj-knopki{display:flex;flex-wrap:wrap;gap:10px}
.zapasnaya-knopka{
  display:inline-block;
  padding:12px 18px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(197,160,89,.5);
  background:rgba(255,255,255,.7);
  font-family:'Inter',sans-serif;
  font-size:var(--tx-sm);font-weight:600;
  color:var(--gold-text) !important;-webkit-text-fill-color:var(--gold-text) !important;
  transition:background-color .3s ease,border-color .3s ease,color .3s ease;
}
.zapasnaya-knopka:hover{
  background:var(--gold-pale);border-color:var(--gold-antique);
  color:var(--choco-title) !important;-webkit-text-fill-color:var(--choco-title) !important;
}
.zapasnaya-knopka:active{transform:translateY(1px) scale(.985)}
/* Звонок — главное действие в этом блоке, поэтому он один окрашен. */
.zapasnaya-knopka--glavnaya{
  background:var(--choco) !important;border-color:var(--choco) !important;
  color:var(--gold-light) !important;-webkit-text-fill-color:var(--gold-light) !important;
}
.zapasnaya-knopka--glavnaya:hover{
  background:var(--choco-deep) !important;border-color:var(--choco-deep) !important;
  color:var(--gold-blik) !important;-webkit-text-fill-color:var(--gold-blik) !important;
}
/* Показывается, только если не сработали оба способа копирования:
   пустого места на экране остаться не должно. */
.zapasnoj-tekst{
  width:100%;margin-top:12px;padding:12px 14px;
  border:1px solid rgba(197,160,89,.4);border-radius:14px;
  background:var(--white);
  font-family:'Inter',sans-serif;
  font-size:var(--tx-sm);line-height:1.5;
  color:var(--text-body);-webkit-text-fill-color:var(--text-body);
  resize:vertical;
}

/* Телефон в подвале. В шапке он спрятан на телефонах, и до 01.09.2026
   позвонить в школу со смартфона было неоткуда. */
.footer-tel{
  display:inline-block;
  font-family:'Montserrat',sans-serif;
  font-size:var(--tx-lg);font-weight:800;letter-spacing:-.01em;
  color:var(--choco-title) !important;-webkit-text-fill-color:var(--choco-title) !important;
  border-bottom:1px solid rgba(197,160,89,.55);
  transition:color .3s ease,border-color .3s ease;
}
.footer-tel:hover{
  color:var(--gold-deep) !important;-webkit-text-fill-color:var(--gold-deep) !important;
  border-color:var(--gold-antique);
}
.footer-tel:active{transform:translateY(1px)}


/* =====================================================================
   ПЕЧАТЬ НА БУМАГЕ
   =====================================================================
   Заведено 01.09.2026. Директор школы попросил распечатать несколько
   страниц сайта, чтобы посмотреть их спокойно и, возможно, показать
   стороннему дизайнеру. До этой правки у сайта не было НИ ОДНОГО
   правила печати, и на бумагу уходило вот что:

     — шапка с position:fixed печаталась один раз, а отступ body
       под неё оставался на каждой странице пустой полосой;
     — баннер о cookie и виджет помощника ложились поверх текста;
     — 59 теней и 25 размытий принтер выводит грязными пятнами
       и тратит на них тонер;
     — кнопки «шоколад + золотой текст» на чёрно-белом принтере
       превращались в чёрные прямоугольники с нечитаемой надписью.
       Это било по самому важному: по кнопке записи.

   Задача этих правил одна: распечатка должна читаться как документ,
   а не как неудачный снимок экрана. Судить по ней будут человека,
   который сайт не заказывал и объяснений слушать не станет. */
@media print{

  /* Экранное поведение на бумаге не существует: ни прилипания,
     ни прокрутки. Шапка печатается один раз, в потоке. */
  #siteHeader{position:static !important;background:none !important;
              border-bottom:1px solid #999 !important;backdrop-filter:none !important}
  body{padding-top:0 !important}

  /* Служебное на бумагу не идёт: помощник, баннер о cookie,
     всплывающее окно политики, гамбургер и выпадающее меню. */
  #bot, #consent, #policy, .nav-toggle, .site-nav,
  .hero-actions, .zapasnoj-put{display:none !important}

  /* Тени и размытия принтер выводит пятнами. Убираем все разом. */
  *{box-shadow:none !important;text-shadow:none !important;
    backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
    filter:none !important;transition:none !important;animation:none !important}

  /* ЛОВУШКА, поймана на первой же пробной печати 01.09.2026.
     Блоки с классом .reveal лежат в разметке невидимыми (opacity:0)
     и проявляются анимацией. Строка выше гасит анимации — и они
     остаются невидимыми навсегда. На пробной распечатке на месте
     эмблемы школы зияла пустая полоса в треть страницы.
     Поэтому: движение выключаем, а видимость возвращаем руками. */
  .reveal{opacity:1 !important;transform:none !important}

  /* Заливки. Браузер по умолчанию не печатает фоны, поэтому светлый
     текст на тёмной плашке становится невидимым. Переводим кнопки
     и карточки в контур: рамка печатается всегда и тонер бережёт. */
  body,html{background:none !important}
  .pill, .cta, .header-cta, .btn, .lead-btn, .seg, .city-switch button,
  .teaser, .fact, .iphone-card, .branch-card, .teacher, .fleet{
    background:none !important;background-image:none !important;
    border:1px solid #999 !important;
    color:#000 !important;-webkit-text-fill-color:#000 !important;
  }
  .pill *, .cta *, .lead-btn *, .header-cta *{
    color:#000 !important;-webkit-text-fill-color:#000 !important;
  }

  /* Заголовки набраны градиентом с прозрачной заливкой букв: на бумаге
     без фона они исчезли бы целиком. Возвращаем сплошной чёрный. */
  h1,h2,h3,.gold-heading,.hero-title,.hero-title-main,.gold-accent,
  .wordmark,.fact-num,.price-strong,.page-h1{
    background:none !important;-webkit-background-clip:border-box !important;
    background-clip:border-box !important;
    color:#000 !important;-webkit-text-fill-color:#000 !important;
  }
  .t-body,.t-muted,.t-faint,p,li{color:#222 !important;-webkit-text-fill-color:#222 !important}

  /* Ссылка на бумаге перестаёт быть ссылкой: адрес пропадает вместе
     с нажатием. Дописываем адрес рядом — но только для внешних
     и телефонных: внутренние засорили бы текст. */
  /* Внешний адрес на бумаге пропадает вместе с нажатием — дописываем.
     Телефонные ссылки не трогаем: номер и так написан словами,
     а «(tel:+7906…)» рядом с ним читается как мусор. */
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px;color:#555}

  /* Карточка, разрезанная надвое переносом страницы, читается как брак
     вёрстки, хотя это поведение принтера. */
  .iphone-card, .branch-card, .teacher, .fact, .fleet, .teaser,
  .step, .stream, .faq-item{break-inside:avoid;page-break-inside:avoid}
  h1,h2,h3{break-after:avoid;page-break-after:avoid}

  /* Карусель фото на карточке категории: на экране показывается один
     кадр, остальные лежат с opacity:0. На бумаге прозрачности нет —
     они превращались в пустые полосы по 72 px каждая. Печатаем только
     видимый кадр. Найдено пробной печатью страницы цен 01.09.2026. */
  .card-video:not(.is-on){display:none !important}
  .card-media-caption, .card-dots{display:none !important}

  /* Кнопка «Записаться на этот поток» на экране появляется только после
     выбора потока, до этого лежит прозрачной. На бумаге выбирать нечего,
     а пустое место в 129 px читается как дыра в вёрстке. Директор
     смотрит распечатку, чтобы решить, что убрать и что оставить, —
     значит он должен видеть ВСЁ, что на странице есть. Показываем. */
  .cta-wrap{opacity:1 !important;transform:none !important}

  /* Белый текст на снятой заливке исчезает с бумаги совсем. Правило
     выше переводит кнопки в контур, но у этих троих собственный цвет
     объявлен через две точки специфичности и с !important, и он
     побеждал. Пробная печать показала: пропадали надписи «МКПП»,
     «АКПП» и «Отправить заявку» — то есть выбор коробки и главная
     кнопка страницы. */
  .seg.is-on, .seg.is-on *, .lead-btn, .lead-btn *,
  .pill--gold-text, .pill--gold-text *,
  .zapasnaya-knopka--glavnaya, .oshibka-link--main{
    color:#000 !important;-webkit-text-fill-color:#000 !important;
    background:none !important;background-image:none !important;
    border:1px solid #999 !important;
  }

  /* Поля страницы задаёт принтер, но зададим и мы: без этого текст
     упирается в край и выглядит неаккуратно. */
  /* Четыре цифры в ряд на листе A4 становятся узкими, и «11 лет»
     вываливается из рамки. На бумаге ставим их в два ряда. */
  .facts, [class*="grid-cols-4"], [class*="md:grid-cols-4"]{
    grid-template-columns:repeat(2,1fr) !important;
  }

  @page{margin:14mm}
}


/* =====================================================================
   ТАП-ЗОНЫ: НЕ МЕНЬШЕ 44 px
   =====================================================================
   Заведено 01.09.2026 по замеру: на семи страницах 88 нажимаемых
   элементов были меньше 44 px хотя бы по одной стороне. Среди них
   не мелочь, а главное:

     — «Занять место в группе», главная кнопка карточки: 284 × 34;
     — «Оставить заявку» в шапке: 147 × 40;
     — кнопки выбора филиала: 36 в высоту;
     — точки переключения фото: 6 × 6. В такую точку пальцем
       не попасть в принципе.

   Норма 44 × 44 — это не вкус дизайнера, а размер подушечки пальца
   взрослого человека. У автошколы на категории C и D идут мужчины
   с крупными руками, и промах по кнопке записи стоит заявки.

   Приём с точками: видимая точка остаётся 6 px, а нажимаемая область
   расширяется полями. box-sizing:content-box держит размер точки,
   background-clip:content-box не даёт заливке растечься на поля. */

.pill{
  min-height:48px;
  display:inline-flex;align-items:center;justify-content:center;
}
.header-cta{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.nav-toggle{min-width:44px;min-height:44px}
.city-switch button{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.seg{min-height:44px}
.hero-cta-second{display:inline-flex;align-items:center;min-height:44px}
.zapasnaya-knopka{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.lead-btn{min-height:48px}

.card-media-dots{gap:0}
.card-media-dots button,
.slider-dots button{
  box-sizing:content-box;
  padding:19px 9px;
  background-clip:content-box;
}
.slider-dots{gap:0}

/* Крестик «закрыть» у помощника: видимый кружок остаётся 28 px —
   больше в углу карточки не помещается, — а нажимаемая область
   расширена полями до 44 × 44. Промах по крестику раздражает
   сильнее промаха по любой другой кнопке: человек хотел убрать
   окно, а оно не убирается. */
#botClose{
  box-sizing:content-box;
  padding:8px;
  margin:-8px;
  background-clip:content-box;
}

/* Ссылка «Политика обработки персональных данных» остаётся в строке
   текста и правилу 44 px намеренно не подчиняется: вертикальные поля
   у ссылки внутри абзаца разорвали бы межстрочный интервал. Это
   документированное исключение из правила тап-зон — оно про
   самостоятельные кнопки, а не про ссылки в тексте. */


/* =====================================================================
   ПРО «ПЛАВАЮЩУЮ СЕТКУ» КАРТОЧЕК — ПРОВЕРЕНО, ЕЁ У НАС НЕТ
   =====================================================================
   01.09.2026 замер показал разброс высот карточек инструкторов в 74 px,
   и это выглядело как та самая беда, о которой пишут во всех разборах:
   «зафиксируйте высоту, иначе сетка ломается».

   Замер был сделан на ширине 390 px — а там сетка в ОДНУ колонку,
   и каждая карточка сама себе ряд. Разные высоты там не «лесенка»,
   а норма.

   Проверка на настоящей сетке: на 768 px (две колонки) и 1440 px
   (три колонки) разброс высот ВНУТРИ ряда — ноль. CSS Grid
   выравнивает карточки сам, для этого ничего делать не надо.

   Поэтому min-height на заголовке и подписи, поставленные было сюда,
   убраны: они лечили несуществующую болезнь и добавляли пустоту
   на телефоне. Правило чужого разбора верно для вёрстки на флексах
   с фиксированными карточками — у нас грид.

   Пустая <p class="teacher-subject"></p> в разметке оставлена
   намеренно: это место под категорию инструктора, которую школа
   назовёт вместе с фотографиями. Пустой абзац схлопывается
   и ничего не занимает. */
.teacher{display:flex;flex-direction:column}
.teacher-subject{text-align:center}