/*  «После школы» — стили лендинга.
 *
 *  Брейкпоинты: <700 мобильный · 700 планшет · 1000 широкий · 1180 десктоп ·
 *  1360 полное меню в шапке. Флюидные величины интерполируются от 360px до 1440px.
 *
 *  Кегль лежит на шкале с шагом φ^¼ ≈ 1.128 — четыре шага дают золотое сечение:
 *  8 · 9 · 11.5 · 13 · 14.6 · 16.5 · 18.6 · 21 · 23.7 · 26.7 · 30.1 · 34 · 38.3 · 43.2 · 48.7 · 54.9
 *
 *  Порядок разделов:
 *   1. Токены (:root)          6. Компоненты страницы, сверху вниз по макету
 *   2. База и сброс            7. Меню, «Наверх», плашка cookie
 *   3. Условная видимость      8. Доводка мобильных (@media max-width:699)
 *   4. Каркас                  9. Ховеры (.hv*)
 *   5. Заголовки
 *
 *  Соглашения по именам:
 *   .t-*      адаптивный токен — то, что зависит от ширины экрана
 *   .hv*      ховер; !important, потому что базовые значения в inline style
 *   .decor    необязательный декор, скрыт ниже 1000px
 *   .is-*     состояние, переключается из JS
 *
 *  Селекторы вида [style*="…"] цепляются к inline-стилям исходной вёрстки.
 *  Это намеренно: разметка осталась от Claude Design, переписывать её целиком
 *  было бы дороже и рискованнее, чем точечно переопределить нужное. */

:root {
  /* --- палитра --- */
  --violet: #6B2FC9;
  --violet-hover: #5B21B6;
  --violet-deep: #5B2BC4;
  --violet-deeper: #4C2596;
  --violet-footer: #2A1A6B;
  --violet-rule: #46349B;
  --lilac: #C9B6EC;
  --amber: #FBBF24;
  --amber-warm: #E9A21B;
  --green: #3F9C4F;
  --ink: #131E3A;
  --ink-2: #3B4457;
  --ink-3: #5A6479;
  --ink-4: #6B7488;
  --muted: #767F92;           /* было #8A93A6 — не проходило по контрасту */
  --page: #FCFBF8;
  --card: #FFFFFF;
  --line: #EFEDE6;

  /* --- флюидная типографика ---
     Минимумы подняты: на 375px заголовки читались мелко.
     Максимумы на 1440px прежние, десктоп не меняется. */
  --fs-h1: clamp(34.0px, 1.9352vw + 27.033px, 54.9px);
  --fs-h2: clamp(30.1px, 1.7222vw + 23.9px, 48.7px);
  --fs-h2-top: clamp(30.1px, 1.7222vw + 23.9px, 48.7px);
  --fs-h2-sm: clamp(26.7px, 1.0741vw + 22.833px, 38.3px);
  --fs-h2-food: clamp(26.7px, 0.6759vw + 24.267px, 34.0px);
  --fs-h2-form: clamp(26.7px, 1.0741vw + 22.833px, 38.3px);

  /* --- флюидные размеры блоков и фото --- */
  --logo-h: clamp(42px, 1.8519vw + 35.333px, 62px);
  --img-hw: clamp(230px, 20.5556vw + 156px, 452px);
  --img-food: clamp(220px, 16.6667vw + 160px, 400px);
  --img-plate: clamp(190px, 6.4815vw + 166.667px, 260px);
  --teacher-w: clamp(130px, 1.8519vw + 123.333px, 150px);
  --trust-d: clamp(108px, 4.0741vw + 93.333px, 152px);
  --van: clamp(150px, 17.5926vw + 86.667px, 340px);
  --week-h: clamp(96px, 3.6111vw + 83px, 135px);
  --mk-w: clamp(180px, 20vw + 108px, 396px);
  --mk-h: clamp(120px, 13.3333vw + 72px, 264px);
  --care-photo: clamp(88px, 2.2222vw + 80px, 112px);
  --faq-photo: clamp(180px, 8.3333vw + 150px, 270px);
  --faq-kids-w: clamp(230px, 15.7407vw + 173.333px, 400px);
  --faq-kids-h: clamp(132px, 9.0741vw + 99.333px, 230px);
  --hero-art-tab: clamp(300px, 11.1111vw + 260px, 420px);
  --hero-art-mob: clamp(210px, 8.3333vw + 180px, 300px);

  --shadow-card: 0 2px 10px rgba(60, 40, 120, .05);
  --shadow-lift: 0 10px 22px rgba(60, 40, 120, .20);
}

/* ================================================================ база */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* плавная прокрутка к секциям по якорным ссылкам */
html { scroll-behavior: smooth; }
/* Отступ равен высоте залипшей шапки плюс воздух — иначе при переходе
   по якорю верх блока уезжает под шапку и секция обрезается. */
:root { --header-h: 70px; }
section[id], main[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
@media (min-width: 700px)  { :root { --header-h: 90px; } }
@media (min-width: 1000px) { :root { --header-h: 96px; } }

body {
  background: var(--page);
  color: var(--ink);
  font-family: 'Onest', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* полоса прокрутки: дорожка прозрачная, бегунок фиолетовый */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--violet) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--violet);
  border-radius: 999px;
  /* прозрачная рамка через background-clip даёт воздух вокруг бегунка */
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--violet-hover);
  background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }

a { color: #6D28D9; text-decoration: none; }
a:hover { color: var(--violet-hover); }
img { max-width: 100%; }
input, select, button, textarea { font-family: inherit; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
  border-radius: 6px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 300;
  background: var(--violet); color: #fff; padding: 12px 20px;
  border-radius: 0 0 12px 12px; font-weight: 600; transition: top .18s;
}
.skip-link:focus { top: 0; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============================================== условная видимость */
/* Правила только на скрытие — иначе inline display:flex перебьёт возврат. */
@media (max-width: 999px)  { .decor       { display: none !important; } }
@media (max-width: 1359px) { .only-nav    { display: none !important; } }
@media (min-width: 1360px) { .only-burger { display: none !important; } }
@media (max-width: 699px)  { .only-tabup  { display: none !important; } }

/* ================================================================ каркас */
.t-rootStyle {
  background: var(--page); color: var(--ink);
  /* clip вместо hidden: так же обрезает вылезающий декор, но не создаёт
     скролл-контейнер — иначе position:sticky у шапки не работает */
  overflow-x: clip;
  width: 100%; max-width: 1440px; margin: 0 auto;
}

.t-wrapStyle { max-width: 1360px; margin: 0 auto; padding: 0 16px; position: relative; }
@media (min-width: 700px)  { .t-wrapStyle { padding: 0 24px; } }
@media (min-width: 1000px) { .t-wrapStyle { padding: 0 28px; } }

.t-heroWrapStyle { max-width: 1360px; margin: 0 auto; padding: 10px 16px 0; position: relative; }
@media (min-width: 700px)  { .t-heroWrapStyle { padding: 28px 24px 0; } }
@media (min-width: 1000px) { .t-heroWrapStyle { padding: 40px 28px 0; } }

.t-headerInner {
  max-width: 1360px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 14px;
}
@media (min-width: 700px)  { .t-headerInner { padding: 14px 24px; } }
@media (min-width: 1360px) { .t-headerInner { gap: 20px; } }

.t-logoStyle { height: var(--logo-h); width: auto; display: block; flex: none; }
/* Логотип — ссылка на главную. Обёртка забирает на себя flex-свойства,
   которые раньше были у картинки, и гасит лишние 4px под инлайновым <img>. */
.logo-link { flex: none; display: block; line-height: 0; border-radius: 10px; transition: opacity .18s; }
.logo-link:hover { opacity: .82; }


/* ================================================================ герой */
.t-heroGrid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  align-items: start; gap: 10px;
}
@media (min-width: 1000px) { .t-heroGrid { grid-template-columns: 47% 53%; gap: 0; } }

.t-heroArtStyle { position: relative; height: var(--hero-art-mob); }
@media (min-width: 700px)  { .t-heroArtStyle { height: var(--hero-art-tab); } }
@media (min-width: 1000px) { .t-heroArtStyle { height: 480px; } }
@media (min-width: 1180px) { .t-heroArtStyle { height: 560px; } }

.t-heroImgStyle { position: absolute; inset: 0; }
/* 1000–1180: фиксированные 660×572 не влезали в колонку и накрывали текст.
   Отдаём картинке ровно её колонку плюс привычный вылет вправо. */
@media (min-width: 1000px) {
  .t-heroImgStyle {
    left: 0; right: -24px; top: -24px; bottom: -10px;
    width: auto; height: auto;
  }
}
@media (min-width: 1180px) {
  .t-heroImgStyle {
    right: max(-30px, -2.0833vw); top: -40px;
    width: min(780px, 56.522vw - 33.913px);
    height: min(676px, 48.986vw - 29.391px);
  }
}

/* ================================================================ заголовки */
.t-h1Style, .t-h2Style, .t-h2StyleTop, .t-h2StyleSm, .t-h2StyleFood, .t-h2StyleForm {
  font-weight: 800; letter-spacing: -0.025em;
}
.t-h1Style      { margin: 0;        line-height: 1.14; font-size: var(--fs-h1); }
.t-h2Style      { margin: 0;        line-height: 1.10; font-size: var(--fs-h2); }
.t-h2StyleTop   { margin: 16px 0 0; line-height: 1.14; font-size: var(--fs-h2-top); }
.t-h2StyleSm    { margin: 14px 0 0; line-height: 1.15; font-size: var(--fs-h2-sm); }
.t-h2StyleFood  { margin: 16px 0 0; line-height: 1.24; font-size: var(--fs-h2-food); }
.t-h2StyleForm  { margin: 20px 0 0; line-height: 1.24; font-size: var(--fs-h2-form);
                  letter-spacing: -0.02em; color: #FFFFFF; }
@media (min-width: 700px) {
  .t-h2StyleTop  { margin-top: 26px; }
  .t-h2StyleFood { margin-top: 24px; }
}
@media (min-width: 1180px) { .t-h2StyleForm { margin-top: 38px; } }

/* ================================================================ полоса цифр */
.t-statsGrid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; padding: 22px 0 30px; position: relative; z-index: 2;
}
@media (min-width: 700px)  { .t-statsGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 34px 0 48px; } }
@media (min-width: 1000px) { .t-statsGrid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ================================================================ день */
.t-dayHeadStyle {
  display: flex; justify-content: space-between;
  align-items: stretch; gap: 18px; flex-direction: column;
}
@media (min-width: 1000px) {
  .t-dayHeadStyle { align-items: flex-start; gap: 40px; flex-direction: row; }
}

.t-dayGrid {
  display: grid; grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 16px; position: relative;
}
@media (min-width: 700px)  { .t-dayGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .t-dayGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .t-dayGrid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

.t-dayLine { display: none; }
@media (min-width: 1180px) {
  .t-dayLine {
    display: block; position: absolute; left: 6%; right: 6%; top: 11px;
    border-top: 2px dashed #C9BCEB;
  }
}

.t-dayStub { width: 0; height: 18px; border-left: 2px dashed #C9BCEB; }
@media (min-width: 700px)  { .t-dayStub { height: 26px; } }
@media (min-width: 1180px) { .t-dayStub { height: 52px; } }

/* переключатель смен: обе смены в разметке, лишняя скрыта */
[data-active="1"] .day-card[data-shift="2"],
[data-active="2"] .day-card[data-shift="1"] { display: none !important; }

.seg {
  font-size: 14.6px; font-weight: 600; padding: 14px 26px; border-radius: 10px;
  border: none; cursor: pointer; white-space: nowrap; transition: all .15s;
  background: transparent; color: var(--ink-2);
}
.seg:hover { background: #F6F2FE; color: var(--violet); }
.seg[aria-selected="true"] { background: var(--violet); color: #FFFFFF; }

/* ================================================================ уроки */
.t-hwGrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
@media (min-width: 700px)  { .t-hwGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .t-hwGrid { grid-template-columns: 1fr 1.2fr; } }
@media (min-width: 1180px) { .t-hwGrid { grid-template-columns: 29.5% 39% 28%; } }

.t-imgHwMain { width: 100%; height: var(--img-hw); }

/* ================================================================ питание */
.t-foodOuterGrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
@media (min-width: 1180px) {
  /* колонки тянутся до общей высоты — на этом держится выравнивание по низу ниже */
  .t-foodOuterGrid { grid-template-columns: minmax(0, 1fr) 30%; align-items: stretch; }
  /* «Попробуйте питание» — во всю ширину блока, отдельной строкой под обеими колонками */
  .t-foodOuterGrid > .t-foodCtaStyle { grid-column: 1 / -1; }
  /* три плашки прижаты к низу: низ «Примера меню» совпадает с низом «Вы можете быть спокойны».
     Не подгонка отступом — держится само на любой высоте текста. */
  .t-foodOuterGrid > :nth-child(2) { justify-content: flex-end; }
}
/* Ниже 1180 колонки выстраиваются друг за другом. В разметке плашка записи идёт
   последней, поэтому возвращаем прежний порядок: питание → запись → три плашки. */
@media (max-width: 1179px) {
  .t-foodOuterGrid > .t-foodCtaStyle { order: 2; }
  .t-foodOuterGrid > :nth-child(2)   { order: 3; }
}

.t-foodInnerGrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
@media (min-width: 1000px) { .t-foodInnerGrid { grid-template-columns: 1.72fr 1fr; } }

.t-food4Grid  { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.t-food3Grid  { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.t-food4bGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
@media (min-width: 700px) {
  .t-food4Grid  { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 34px; }
  .t-food3Grid  { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .t-food4bGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
}

.t-divFood4, .t-divFood3 { padding: 0 14px; text-align: center; }
.t-divFood4b, .t-divBenefit { padding: 0 12px; text-align: center; }
@media (min-width: 700px) {
  .t-divFood4  { border-left: 1px solid #EAE7DE; }
  .t-divFood3  { border-left: 1px solid var(--line); }
  .t-divFood4b { border-left: 1px solid var(--line); }
}
@media (min-width: 1180px) { .t-divBenefit { border-left: 1px solid #E6E2F0; } }

.t-imgFoodMain  { position: relative; height: var(--img-food); }
.t-imgFoodPlate { width: 100%; max-width: 320px; height: var(--img-plate); }
.t-imgWeek      { height: var(--week-h); }

.t-foodPromoStyle {
  margin-top: 22px; background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 2px 12px rgba(60, 40, 120, .04);
}
@media (min-width: 1000px) { .t-foodPromoStyle { flex-direction: row; } }

.t-foodPlateStyle {
  width: 100%; flex: none; background: var(--violet); position: relative;
  display: flex; align-items: center; justify-content: center; padding: 10px;
}
@media (min-width: 1000px) { .t-foodPlateStyle { width: 280px; } }
@media (min-width: 1180px) { .t-foodPlateStyle { width: 340px; } }

.t-foodCtaStyle {
  background: var(--violet); border-radius: 16px; padding: 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; text-align: center; position: relative; overflow: hidden;
}
@media (min-width: 700px)  { .t-foodCtaStyle { padding: 22px 28px; } }
@media (min-width: 1000px) { .t-foodCtaStyle { flex-direction: row; gap: 34px; text-align: left; } }

/* ================================================================ сопровождение */
.t-careGrid  { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
@media (min-width: 1000px) { .t-careGrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.t-care4Grid { margin-top: 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 700px) { .t-care4Grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.t-carePhotoRow {
  margin-top: 24px; background: #7A45CE; border-radius: 22px; padding: 20px;
  display: flex; flex-direction: column; align-items: stretch; gap: 18px;
  position: relative; overflow: hidden;
}
@media (min-width: 700px)  { .t-carePhotoRow { padding: 26px 30px; gap: 26px; } }
@media (min-width: 1000px) { .t-carePhotoRow { flex-direction: row; align-items: center; } }

.t-carePhotoGrid {
  flex: 1; min-width: 0; width: 100%;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
@media (min-width: 700px)  { .t-carePhotoGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .t-carePhotoGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Скриншот сообщения из родительского чата. Раньше на его месте стоял
   свёрстанный мокап; теперь показываем настоящий снимок целиком. */
.chat-shot {
  flex: none; width: 100%; max-width: 340px;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(40, 10, 90, .22);
}
.chat-shot img { width: 100%; height: auto; display: block; }

.t-imgCarePhoto { height: var(--care-photo); }
.t-imgVan       { position: absolute; right: 0; bottom: 0; width: var(--van); height: var(--van); }
.t-imgMk        { position: absolute; right: 0; bottom: 0; width: var(--mk-w); height: var(--mk-h); }
.t-teacherCol   { width: var(--teacher-w); }
.t-trustCircle  {
  width: var(--trust-d); aspect-ratio: 1 / 1; border-radius: 50%; background: #F1ECFC;
  display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none;
}

/* ================================================================ стоимость */
.t-priceGrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
@media (min-width: 700px)  { .t-priceGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .t-priceGrid { grid-template-columns: 1fr 1.2fr; } }
@media (min-width: 1180px) { .t-priceGrid { grid-template-columns: 29% 41% 26%; } }

/* Под карточками остаётся только плашка семейной скидки — во всю ширину блока
   и вплотную к карточкам: своего отступа сверху нет, хватает gap сетки. */
.t-priceCtaCol { grid-column: 1 / -1; margin-top: 0; }

/* карточки тарифов */
.plan {
  border: 1.5px solid; border-radius: 12px; padding: 16px; cursor: pointer;
  transition: all .18s; display: flex; align-items: flex-start; gap: 13px;
  background: var(--card); border-color: #E7E5EF; margin-top: 12px;
  text-align: left; width: 100%; font: inherit; color: inherit;
}
.plan-block { display: block; }
.plan-green  { margin-top: 18px; --accent: var(--green); --tint: #F5FAF5; --edge: #C7E3CC; }
.plan-amber  { --accent: var(--amber-warm); --tint: #FDF8EE; --edge: #F0D9A8; }
.plan-violet { --accent: var(--violet);     --tint: #F7F4FD; --edge: #E0D4F5; }
.plan { border-color: var(--edge); }
.plan[aria-checked="true"] {
  border-color: var(--accent); background: var(--tint);
  box-shadow: 0 4px 14px rgba(60, 40, 120, .10);
}
.plan-dot {
  width: 20px; height: 20px; border-radius: 50%; flex: none; margin-top: 2px;
  border: 2px solid #B4BAC7;
}
.plan[aria-checked="true"] .plan-dot {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 3.5px #FFFFFF, inset 0 0 0 10px var(--accent);
}

/* ================================================================ форма-секция */
.t-formGrid {
  background: var(--violet-deep); border-radius: 20px; padding: 20px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px;
  position: relative; overflow: hidden;
}
@media (min-width: 700px)  { .t-formGrid { border-radius: 26px; padding: 26px; } }
@media (min-width: 1000px) { .t-formGrid { padding: 34px; } }
@media (min-width: 1180px) { .t-formGrid { grid-template-columns: 31% minmax(0, 1fr); } }

.t-formFieldsGrid, .t-formFieldsGrid2 {
  display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 16px;
}
.t-formFieldsGrid  { margin-top: 22px; }
.t-formFieldsGrid2 { margin-top: 16px; align-items: center; }
@media (min-width: 700px) {
  .t-formFieldsGrid, .t-formFieldsGrid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  .t-formFieldsGrid, .t-formFieldsGrid2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* На 1000–1180px колонка блока формы узкая, и жёлтая звезда в углу
   задевает заголовок. Декор по дизайн-системе необязателен — прячем его
   в этом диапазоне; ниже 1000px он и так скрыт классом .decor. */
@media (max-width: 1179px) {
  #form svg.decor[width="78"] { display: none !important; }
}

/* ============================================ подчёркивание «от руки»
   Волна под ключевым словом заголовка. Раньше вылезала за текст на 6–12%
   и висела в 6–9px под ним — теперь строго по ширине слова и вплотную. */
.wave {
  left: 0 !important;
  right: auto !important;
  width: 100% !important;
  bottom: -5px !important;
  height: 8px !important;
}
@media (max-width: 699px) {
  .wave { bottom: -3px !important; height: 6px !important; }
}

/* ================================================ выпадающие списки
   Вместо нативного select — своя кнопка и список в стиле сайта.
   Значение уезжает с формой через input[type=hidden] с тем же name. */
/* Всё поле кликабельно — и стрелка, и иконка слева, и пустое место.
   Курсор об этом говорит; сам список курсор возвращает себе. */
.dd { position: relative; cursor: pointer; }
.dd__list { cursor: default; }

.dd__btn {
  flex: 1; min-width: 0;
  display: flex; align-items: center;
  padding: 16.5px 0; border: none; background: transparent;
  font-size: 14.6px; text-align: left; color: var(--ink); cursor: pointer;
}
.dd[style*="height:56px"] .dd__btn { height: 100%; padding: 0; }

.dd__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd__value.is-placeholder { color: var(--muted); }

.dd__chev { transition: transform .2s ease; }
.dd.is-open .dd__chev { transform: rotate(180deg); }
.dd.is-open { border-color: var(--violet) !important; }

.dd__list {
  position: absolute; left: -1.5px; right: -1.5px; top: calc(100% + 7px);
  z-index: 30; margin: 0; padding: 6px; list-style: none;
  max-height: 258px; overflow-y: auto;
  background: var(--card);
  border: 1.5px solid #E0D4F5; border-radius: 13px;
  box-shadow: 0 8px 24px rgba(40, 10, 90, .18);
}
/* если снизу мало места — раскрываем вверх */
.dd.is-up .dd__list { top: auto; bottom: calc(100% + 7px); }

.dd__opt {
  padding: 13px 14px; border-radius: 9px;
  font-size: 14.6px; line-height: 1.35; color: var(--ink-2);
  cursor: pointer; transition: background .14s ease, color .14s ease;
}
.dd__opt:hover,
.dd__opt.is-active { background: #F6F2FE; color: var(--violet); }
.dd__opt[aria-selected="true"] {
  background: #F1ECFC; color: var(--violet); font-weight: 600;
}

/* ================================================================ отзывы */
.t-reviewsGrid {
  display: grid; grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 18px; margin-top: 22px;
}
@media (min-width: 700px)  { .t-reviewsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 30px; } }
@media (min-width: 1000px) { .t-reviewsGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.t-reviewsCtaStyle {
  margin-top: 22px; background: var(--violet-deeper); border-radius: 18px; padding: 20px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 22px;
  position: relative; overflow: hidden;
}
@media (min-width: 700px) { .t-reviewsCtaStyle { padding: 24px 30px; } }

/* ================================================================ преимущества */
.t-benefitsGrid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px; margin-top: 26px;
}
@media (min-width: 700px)  { .t-benefitsGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .t-benefitsGrid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; } }

/* ================================================================ вопросы */
.t-faqGrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 1000px) { .t-faqGrid { grid-template-columns: 33% minmax(0, 1fr); } }

.t-imgFaqPhoto { margin-top: 26px; height: var(--faq-photo); }
.t-imgFaqKids  {
  position: absolute; right: 0; bottom: 0;
  width: var(--faq-kids-w); height: var(--faq-kids-h); z-index: 0;
}

.t-faqCtaStyle {
  margin-top: 24px; min-height: auto; background: #F5F1FB; border-radius: 18px;
  padding: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 22px;
  position: relative; overflow: hidden;
}
@media (min-width: 700px)  { .t-faqCtaStyle { padding: 26px 30px; } }
@media (min-width: 1180px) { .t-faqCtaStyle { min-height: 230px; } }

.t-faqKidsWrap { display: none; }
@media (min-width: 1180px) {
  .t-faqKidsWrap {
    display: block; flex: 1; min-width: 340px; align-self: stretch;
    position: relative; margin: -26px -30px -26px 0;
  }
}

/* Карточка вопроса — грид из двух строк: заголовок и ответ. Ответ
   раскрывается плавно за счёт перехода строки 0fr → 1fr: высоту ответа
   заранее не знаешь, а доли браузер считает сам. Раньше тут стоял
   display:none, а его анимировать нельзя — отсюда и был рывок. */
.faq-card {
  display: grid; grid-template-rows: auto 0fr;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 20px; box-shadow: 0 2px 10px rgba(60, 40, 120, .04);
  transition: border-color .18s, grid-template-rows .3s cubic-bezier(.4, 0, .2, 1);
}
.faq-card.is-open {
  border: 1.5px solid var(--violet);
  grid-template-rows: auto 1fr;
}

.faq-chev { transition: transform .25s ease; }
.faq-card.is-open .faq-chev { transform: rotate(180deg); }

/* Отступ ответа живёт на внутреннем слое: у самого .faq-a в свёрнутом
   состоянии высота 0, и padding остался бы висеть зазором.
   visibility прячет свёрнутый ответ от чтения с экрана; переход отложен,
   поэтому при закрытии текст пропадает только когда карточка схлопнется. */
.faq-a { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility .3s; }
.faq-card.is-open .faq-a { visibility: visible; }

/* ================================================================ футер */
.t-footerBoxStyle {
  background: var(--violet-footer); border-radius: 24px; padding: 26px 18px 18px;
  position: relative; overflow: hidden;
}
@media (min-width: 700px)  { .t-footerBoxStyle { padding: 34px 28px 22px; } }
@media (min-width: 1000px) { .t-footerBoxStyle { padding: 46px 48px 26px; } }

.t-footerGrid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; position: relative;
}
@media (min-width: 700px)  { .t-footerGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .t-footerGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } }
@media (min-width: 1180px) { .t-footerGrid { grid-template-columns: 1.15fr 0.9fr 1fr 1fr; gap: 44px; } }

.t-footerColStyle { }
@media (min-width: 1180px) {
  .t-footerColStyle { border-left: 1px solid var(--violet-rule); padding-left: 36px; }
}

.t-footerBottomStyle {
  border-top: 1px solid var(--violet-rule); margin-top: 26px; padding-top: 22px;
  display: flex; flex-wrap: wrap; flex-direction: column; align-items: center;
  gap: 16px; position: relative;
}
@media (min-width: 700px)  { .t-footerBottomStyle { margin-top: 40px; } }
@media (min-width: 1000px) { .t-footerBottomStyle { flex-direction: row; gap: 0; } }

/* ================================================================ попап */
.t-modalOverlay {
  position: fixed; inset: 0; background: rgba(26, 14, 58, .58);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12px; z-index: 200; overflow-y: auto;
}
@media (min-width: 700px) { .t-modalOverlay { padding: 32px; } }

.t-modalHeader { background: var(--violet-deep); padding: 20px 20px 22px; position: relative; overflow: hidden; }
.t-modalBody   { padding: 20px 20px 24px; }
.t-modalTitle  { font-weight: 800; color: #FFFFFF; letter-spacing: -0.02em; font-size: 19px; }
@media (min-width: 700px) {
  .t-modalHeader { padding: 28px 34px 30px; }
  .t-modalBody   { padding: 28px 34px 32px; }
  .t-modalTitle  { font-size: 24px; }
}

.t-modalClose {
  position: absolute; right: 14px; bottom: 14px; width: 42px; height: 42px;
  border-radius: 50%; border: 1.5px solid #8B6FD8; background: transparent;
  color: #E4DAF8; cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: all .18s;
}
@media (min-width: 700px) {
  .t-modalClose { right: 18px; bottom: 16px; width: 34px; height: 34px; }
}

.t-modalFieldsGrid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 700px) { .t-modalFieldsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.t-modalShiftGrid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 520px) { .t-modalShiftGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Выбранный тариф в попапе из блока стоимости. Название и цену подставляет
   JS из карточки, отмеченной на странице, — в разметке они пустые. */
.plan-pick {
  background: #F6F3FD; border: 1px solid #E6E2F0; border-radius: 14px;
  padding: 16px 18px; margin-bottom: 20px;
}
.plan-pick__label { font-size: 13px; font-weight: 600; color: var(--muted); }
.plan-pick__row   { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 6px; }
.plan-pick__name  { font-size: 16.5px; font-weight: 700; color: var(--violet); }
.plan-pick__price { font-size: 16.5px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.plan-pick__note  { font-size: 13px; color: var(--muted); margin-top: 8px; }

/* радиогруппы попапа */
.opt {
  border: 1.5px solid #E7E5EF; background: var(--card); border-radius: 12px;
  padding: 14px 16px; display: flex; align-items: center; gap: 12px;
  cursor: pointer; transition: all .15s; width: 100%;
  font: inherit; color: inherit; text-align: left;
}
.opt[aria-checked="true"],
.opt:has(input:checked) { border-color: var(--violet); background: #F7F3FE; }
.dot { width: 20px; height: 20px; border-radius: 50%; flex: none; border: 2px solid #B4BAC7; transition: box-shadow .15s, border-color .15s; }
.opt[aria-checked="true"] .dot,
[aria-checked="true"] > .dot,
input:checked + .dot {
  border-color: var(--violet);
  box-shadow: inset 0 0 0 3.5px #FFFFFF, inset 0 0 0 10px var(--violet);
}

.cbox {
  width: 22px; height: 22px; border-radius: 6px; flex: none; margin-top: 1px;
  display: flex; align-items: center; justify-content: center; transition: all .15s;
  background: var(--card); border: 1.5px solid #B4BAC7; color: transparent;
}
input:checked + .cbox { background: var(--green); border-color: var(--green); color: #fff; }

/* фокус для скрытых нативных инпутов — кольцо рисует их визуальная пара */
input.visually-hidden:focus-visible + .dot,
input.visually-hidden:focus-visible + .cbox {
  outline: 3px solid var(--violet); outline-offset: 3px;
}
.opt:has(input:focus-visible) { outline: 3px solid var(--violet); outline-offset: 3px; }

.submit {
  margin-top: 22px; width: 100%; font-size: 16.5px; font-weight: 700;
  padding: 19px 20px; border-radius: 12px; border: none; display: flex;
  align-items: center; justify-content: center; gap: 16px; transition: all .18s;
  background: var(--amber); color: #1B2542; cursor: pointer;
}
.submit:disabled { background: #F1EFF6; color: #8B90A0; cursor: not-allowed; }
.submit:not(:disabled):hover { background: #F2B011; transform: translateY(-2px); }
.submit.is-busy { opacity: .75; cursor: progress; }

.form-error {
  margin-top: 12px; font-size: 14.6px; line-height: 1.5;
  color: #B4231F; background: #FDECEC; border: 1px solid #F5C6C4;
  border-radius: 10px; padding: 12px 14px;
}
/* Поле «Другая школа» — появляется под списком школ, когда выбран этот пункт.
   Оформлено как остальные поля форм, чтобы не выбиваться из ряда. */
.dd-other { margin-top: 10px; }
.dd-other__box {
  display: flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 16px;
  border: 1.5px solid #E7E5EF; border-radius: 12px; background: var(--card);
  transition: border-color .16s;
}
.dd-other__box:focus-within { border-color: var(--violet); }
.dd-other input {
  flex: 1; min-width: 0; height: 100%;
  border: none; outline: none; background: transparent;
  font-size: 14.6px; color: var(--ink);
}
.dd-other input::placeholder { color: var(--muted); }

.field-error { display: block; margin-top: 6px; font-size: 13px; color: #B4231F; }
.is-invalid { border-color: #D9534F !important; }

/* ================================================= бургер-меню (панель) */
/* Выезжает справа поверх страницы и ничего не сдвигает. */
.menu-overlay {
  position: fixed; inset: 0; z-index: 170;
  background: rgba(26, 14, 58, .5);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.menu-overlay.is-open { opacity: 1; visibility: visible; }

.menu-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 180;
  width: min(340px, 86vw);
  background: var(--card);
  box-shadow: -10px 0 34px rgba(40, 10, 90, .18);
  display: flex; flex-direction: column;
  padding: 14px 16px 20px;
  overflow-y: auto;
  transform: translateX(100%); visibility: hidden;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), visibility .3s ease;
}
.menu-panel.is-open { transform: none; visibility: visible; }

.menu-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 4px 4px 14px; border-bottom: 1px solid var(--line);
}
.menu-panel__logo { height: 46px; width: auto; display: block; }
.menu-panel__close {
  width: 42px; height: 42px; flex: none;
  border: 1.5px solid #C9B6EC; border-radius: 12px;
  background: transparent; color: var(--violet); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .18s ease;
}
.menu-panel__close:hover { background: #F6F2FE; }
.menu-panel__links { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; }

/* низ панели: реквизиты и соцсети над кнопкой записи */
.menu-panel__foot { margin-top: auto; padding-top: 22px; }
.menu-panel__legal {
  font-size: 13px; line-height: 1.65; color: var(--muted);
  padding-top: 18px; border-top: 1px solid var(--line);
}
.menu-panel__socials { display: flex; gap: 10px; margin-top: 16px; }
.menu-panel__socials a { flex: none; }
.menu-panel .hv5 { margin-top: 18px !important; }

/* ========================================================= кнопка «Наверх» */
.to-top {
  position: fixed; right: 16px; z-index: 150;
  /* min() — страховка: очень высокая плашка не должна вытолкнуть кнопку за экран */
  bottom: calc(16px + min(var(--cookie-h, 0px), 40vh));
  width: 50px; height: 50px; border-radius: 50%; border: none;
  background: var(--violet); color: #FFFFFF; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(40, 10, 90, .22);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s, background .18s ease, bottom .22s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover {
  background: var(--violet-hover);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}
@media (min-width: 700px) {
  .to-top { right: 24px; bottom: calc(24px + min(var(--cookie-h, 0px), 40vh)); width: 54px; height: 54px; }
}

/* ==================================================== плашка про cookie */
.cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 160;
  background: var(--card); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(40, 10, 90, .10);
}
.cookie__inner {
  max-width: 1360px; margin: 0 auto; padding: 16px;
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
}
.cookie__icon { flex: none; margin-top: 2px; }
.cookie__text {
  flex: 1 1 320px; min-width: 0; margin: 0;
  font-size: 14.6px; line-height: 1.6; color: var(--ink-3);
}
.cookie__text a { color: var(--violet); font-weight: 600; }
.cookie__text a:hover { color: var(--violet-hover); }
.cookie__btn {
  flex: none; background: var(--violet); color: #FFFFFF;
  font-size: 14.6px; font-weight: 600; padding: 14px 30px;
  border: none; border-radius: 12px; cursor: pointer;
  transition: all .18s ease;
}
.cookie__btn:hover {
  background: var(--violet-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}
@media (max-width: 699px) {
  .cookie__btn { width: 100%; }
}
@media (min-width: 700px) {
  .cookie__inner { padding: 18px 24px; align-items: center; flex-wrap: nowrap; }
}
@media (min-width: 1000px) { .cookie__inner { padding: 18px 28px; } }

/* ======================================== перечисление выгод в герое */
.hero-lead {
  list-style: none; margin: 44px 0 0; padding: 0;
  font-size: 16.5px; line-height: 1.95; color: #3F4A63; font-weight: 400;
}
/* от 700px — прежний вид: по два пункта в строку через точку-разделитель */
@media (min-width: 700px) {
  .hero-lead li { display: inline; }
  .hero-lead li:nth-child(even)::before { content: "\00a0\00a0•\00a0\00a0"; }
  .hero-lead li:nth-child(odd):not(:first-child)::before { content: "\A"; white-space: pre; }
}
/* на мобильном — по пункту в строку, каждый со своим маркером */
@media (max-width: 699px) {
  .hero-lead { margin-top: 26px; line-height: 1.5; }
  .hero-lead li { position: relative; padding-left: 17px; margin-top: 8px; }
  .hero-lead li:first-child { margin-top: 0; }
  .hero-lead li::before {
    content: "•"; position: absolute; left: 1px; top: 0;
    color: var(--violet); font-weight: 700;
  }
}

/* ==================================================== доводка мобильных */
@media (max-width: 699px) {
  /* блоки, лишние на телефоне */
  .mob-hide { display: none !important; }

  /* фото педагога с учеником — во всю ширину колонки, файл квадратный 1010x1010 */
  .t-imgHwMain { height: auto !important; aspect-ratio: 1 / 1; }
  .t-imgHwMain img { object-fit: cover !important; border-radius: 16px !important; }

  /* --- текст занимает всю ширину плашки ---------------------------------
     Переносы расставлены под десктоп: на узком экране они рвут фразы и
     оставляют пустое место справа. Убираем и мягкие (\n в pre-line), и
     жёсткие <br>. Остаются только там, где перенос осмысленный: h1 героя,
     реквизиты в футере и в меню. */
  [style*="pre-line"] { white-space: normal !important; }
  br:not(h1 br):not(#contacts br):not(.menu-panel__legal br):not(.br-keep br) { display: none; }

  /* Порядок в герое: сначала крупное фото, потом заголовок, пункты, кнопки */
  .t-heroGrid { gap: 0 !important; }
  .t-heroGrid > .t-heroArtStyle { order: -1; }
  /* фото во всю ширину экрана; отрицательный отступ снизу убирает лишний зазор */
  .t-heroArtStyle { height: clamp(300px, 92vw, 420px); margin: 0 -16px -14px; }
  .t-heroGrid > [style*="padding-top:14px"] { padding-top: 0 !important; }

  /* --- кегль на мобильном ------------------------------------------------
     h1 → пункты выгод = ×0.618², то есть на два шага ниже по шкале. */
  .t-h1Style { font-size: clamp(30.1px, 9.6vw, 38.3px) !important; }
  .hero-lead { font-size: clamp(13px, 3.66vw, 14.6px); }

  /* все h2 одного размера: раньше разнились от 27 до 30px и часть смотрелась мелко */
  .t-h2Style, .t-h2StyleTop, .t-h2StyleSm,
  .t-h2StyleFood, .t-h2StyleForm { font-size: clamp(30.1px, 9.1vw, 34px) !important; }
  /* нижняя граница снижена до 23.7 (ступень шкалы): на 320px фраза
     «выполнена и проверена» в одну строку иначе не помещается в карточку */
  #hw h3, #care h3 { font-size: clamp(23.7px, 7.6vw, 30.1px) !important; }

  /* кнопки в герое в одну колонку, одинаковой ширины */
  .hero-cta { flex-direction: column; align-items: stretch !important; gap: 12px !important; }
  .hero-cta > a { justify-content: center; text-align: center; }

  /* переключатель смен: кнопки делят всю ширину, белая плашка не висит */
  .t-dayHeadStyle > div:last-child { width: 100%; }
  .seg { flex: 1; padding-left: 12px; padding-right: 12px; }

  /* Микроавтобус и мастер-классы — как на десктопе: вплотную к правому
     нижнему углу и крупно. Карточке добавляем место снизу, чтобы фото
     легло в него, а не на текст. */
  .t-imgVan, .t-imgMk { position: absolute; right: 0; bottom: 0; height: auto; }
  /* пропорции контейнеров те же, что на десктопе: van 1:1, мастер-классы 3:2 */
  .t-imgVan { width: 84%; aspect-ratio: 1 / 1; }
  .t-imgMk  { width: 84%; aspect-ratio: 3 / 2; }
  :has(> .t-imgVan) { padding-bottom: calc(78vw - 26px) !important; }
  :has(> .t-imgMk)  { padding-bottom: calc(52vw + 10px) !important; }

  /* в отзывах текст держал 118px высоты под десктопные 4 строки —
     на мобильном из-за этого зиял разрыв до линии с подписью */
  [style*="min-height:118px"] { min-height: 0 !important; margin-top: 12px !important; }

  /* --- сетки с нечётным числом плиток ------------------------------------
     Последняя плитка на всю ширину, чтобы не висела в углу. */
  .t-benefitsGrid > *:last-child { grid-column: 1 / -1; }

  /* Педагоги и круг доверия: третий элемент не влезал в строку и падал влево.
     Делаем сетку — два педагога в ряд, круг по центру ниже. */
  :has(> .t-trustCircle) {
    display: grid !important; grid-template-columns: 1fr 1fr;
    gap: 18px !important; justify-items: center; align-items: start;
  }
  .t-teacherCol { width: 100%; }
  .t-trustCircle { grid-column: 1 / -1; margin-top: 4px; }

  /* крупный скриншот чата — по центру под фотосеткой */
  .chat-shot { margin: 6px auto 0; }

  /* низ футера: сначала соцсети, потом копирайт, потом строка с сердцем */
  .t-footerBottomStyle > *:nth-child(1) { order: 2; }
  .t-footerBottomStyle > *:nth-child(2) { order: 3; }
  .t-footerBottomStyle > *:nth-child(3) { order: 1; }

  /* логотип в футере — во всю ширину подложки, отступы слева и справа равны */
  #contacts img[src*="logo-footer"] { width: 100% !important; }
  #contacts img[src*="logo-footer"] + div { width: 100% !important; }

  /* цена не помещалась в карточку: знак рубля срывался на вторую строку */
  [style*="font-size:48.7px"] { font-size: 38.3px !important; white-space: nowrap; }

  /* Таймлайн дня был на семь экранов прокрутки. Ставим по две карточки
     в ряд на любом телефоне — секция становится вдвое короче. */
  .t-dayGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .day-card [style*="min-height:40px"] { min-height: 0 !important; }
  .day-card [style*="height:118px"] { height: 96px !important; }
  .day-card [style*="padding:18px 16px 20px"] { padding: 14px 12px 16px !important; }
}

/* 1000–1180: фото мастер-классов занимало полкарточки и лезло на подписи */
@media (min-width: 1000px) and (max-width: 1179px) {
  .t-imgMk { width: 46%; height: 150px; }
}

/* ================================================================ ховеры */
/* !important — потому что базовые значения остались в inline style */
.hv1:hover  { background: #F6F2FE !important; color: var(--violet) !important; }
.hv2:hover  { color: var(--violet) !important; }
.hv3:hover  { background: var(--violet-hover) !important; color: #FFFFFF !important;
              transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.hv4:hover  { background: #F6F2FE !important; color: var(--violet) !important;
              transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.hv5:hover  { background: var(--violet-hover) !important; color: #FFFFFF !important; }
.hv6:hover  { background: #F3FAF4 !important; color: #2E8F45 !important;
              transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.hv7:hover  { background: #F2B011 !important; color: #1B2542 !important;
              transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.hv8:hover  { background: #FCF1DC !important; color: var(--amber-warm) !important;
              transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.hv10:hover { background: #F2B011 !important;
              transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.hv11:hover { background: #3D1D7A !important; color: #FFFFFF !important;
              transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.hv12:hover { color: #FFFFFF !important; }
.hv13:hover { border-color: var(--amber) !important;
              transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.hv14:hover { background: var(--violet-deeper) !important; color: #FFFFFF !important;
              transform: translateY(-2px); }
.hv15:hover { background: var(--violet-hover) !important;
              transform: translateY(-3px); box-shadow: var(--shadow-lift); }