/* Ukids КЭВ — персональная страница диагностики.
   Реализация DESIGN-SYSTEM-2026.md. Значения только из tokens-2026.css. */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* Переходы гасим, а не подменяем нулевой длительностью «анимации в ноль»:
     состояние по-прежнему меняется мгновенно и остаётся заметным. */
  *,*::before,*::after{transition:none!important}
  .btn:hover{transform:none}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 var(--fs-body)/1.6 var(--font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------------------------------------------------------------- примитивы */
h1,h2,h3{margin:0;font-weight:700}
/* line-height ≥1.1 обязателен: подсветка mark — реальная плашка,
   при 0.98 соседние строки заголовка перекрывают её. */
h1{font-size:var(--fs-display);line-height:1.1;letter-spacing:-.035em;text-wrap:balance}
h2{font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.028em;text-wrap:balance}
h3{font-size:var(--fs-h3);line-height:1.24;letter-spacing:-.01em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{max-width:100%;display:block}

.label{
  display:inline-block;font-size:var(--fs-label);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
}
.lead{font-size:var(--fs-body-lg);color:var(--ink-soft);max-width:62ch}

/* ровно одна подсветка на заголовок */
mark{
  background:var(--energy);color:var(--ink);
  border-radius:6px;padding:.02em .14em;margin:0 -.04em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
  /* плашка не переносится: разрыв даёт «лесенку» из двух блоков */
  white-space:nowrap;
}

.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:17px 30px;border-radius:var(--r-pill);border:0;
  background:var(--dg-high);color:var(--ink);
  font:700 var(--fs-body)/1 var(--font);text-decoration:none;cursor:pointer;
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.btn::after{
  content:"↗";display:grid;place-items:center;
  width:26px;height:26px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.18);font-size:14px;
}
.btn:hover{background:var(--dg-high-ink);color:#fff;transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--energy-ink);outline-offset:3px}
/* На полотне браузерный контур почти не виден, поэтому фокус описан явно для
   всего, что можно нажать: раньше его имели только три группы из десяти. */
.offer-switches button:focus-visible,.offer-methods button:focus-visible,
.offer-back:focus-visible,
.offer-more summary:focus-visible,.annual-age select:focus-visible,
.meeting-price-hide:focus-visible,.annual-panel:focus-visible{
  outline:3px solid var(--energy);outline-offset:3px;
}
.brand:focus-visible,.param-mark:focus-within{outline:3px solid var(--energy-ink);outline-offset:3px}
.btn-sm{padding:11px 20px;font-size:var(--fs-caption)}
.btn-sm::after{width:20px;height:20px;font-size:12px}
.btn-gold{background:var(--energy);color:var(--ink)}
.btn-gold::after{background:rgba(18,36,31,.14)}
.btn-gold:hover{background:var(--energy-hover)}

section{padding:var(--section-y) var(--pad-x)}
section>header{margin-bottom:var(--s-48)}
/* мера считается от кегля самого заголовка, не от базового 17px:
   62ch на body-размере зажимали h2 в колонку по 11 знаков. */
section>header h2{margin:var(--s-12) 0 var(--s-16);max-width:20ch}

/* ------------------------------------------------------------------ topbar */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:center;gap:var(--s-16);
  padding:12px var(--pad-x);
  background:rgba(247,244,238,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center}
.topbar-tagline{margin:0;font-size:var(--fs-caption);line-height:1.3;color:var(--ink-soft)}

/* -------------------------------------------------------------------- герой */
.hero{
  /* minmax(0,…): длинные названия навыков в заголовке иначе задают min-content
     ширину первой колонки и выдавливают иллюстрацию из сетки. */
  display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--s-48);align-items:center;
  padding-top:var(--s-96);padding-bottom:var(--s-96);
  position:relative;overflow:hidden;
}
/* Заголовок героя — фраза из двух предложений с названием навыка внутри, длина
   зависит от карты (до 29 знаков в одном навыке). Поэтому кегль на ступень ниже
   display, а подсветка внутри него переносится: иначе плашка уходит за колонку. */
.hero h1{margin:var(--s-16) 0 var(--s-24);font-size:var(--fs-h2)}
.hero h1 mark{white-space:normal}
.hero .lead{margin-bottom:var(--s-32)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-8)}
/* Чипы — метаданные протокола диагностики, а не акцент. Контур вместо заливки:
   на первом экране спорить с заголовком они не должны. */
.chips li{
  padding:8px 16px;border-radius:var(--r-pill);
  border:1px solid var(--line);color:var(--ink-soft);
  font-size:var(--fs-caption);font-weight:500;
}
/* иллюстрация выходит за границу блока — обязательное правило системы */
.hero-art{
  margin:0;aspect-ratio:1;border-radius:var(--r-card);
  background-image:var(--sprite);background-size:300% 400%;
  box-shadow:var(--shadow);
  transform:translate(6%,4%) rotate(2deg);
}
.hero-art::before{
  content:"";position:absolute;inset:auto -6% -14% auto;
  width:38%;aspect-ratio:1;border-radius:var(--r-pill);
  background:var(--brand-soft);z-index:-1;
}

/* ------------------------------------------------------------------- полоса */
.strip{padding-top:var(--s-32);padding-bottom:var(--s-32);background:var(--bg-warm);border-block:1px solid var(--line)}
.strip ul{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-24)}
.strip li{display:flex;flex-direction:column;gap:2px}
.strip b{font-size:22px;font-weight:700;letter-spacing:-.02em}
.strip span{font-size:var(--fs-caption);color:var(--ink-soft)}

/* --------------------------------------------------------------- сводка карты */
.sum-list{display:flex;flex-direction:column;gap:2px}
.sum-row{
  display:grid;grid-template-columns:minmax(200px,32ch) 64px 1fr;
  align-items:center;gap:var(--s-24);
  padding:var(--s-16) 0;border-bottom:1px solid var(--line);
}
.sum-name{font-weight:500}
.sum-pct{font-weight:700;font-size:20px;text-align:right;font-variant-numeric:tabular-nums}
.sum-bar{height:10px;border-radius:var(--r-pill);background:var(--line);overflow:hidden}
.sum-bar i{display:block;height:100%;border-radius:var(--r-pill)}
.sum-low  .sum-pct{color:var(--dg-low-ink)}   .sum-low  .sum-bar i{background:var(--dg-low)}
.sum-mid  .sum-pct{color:var(--dg-mid-ink)}   .sum-mid  .sum-bar i{background:var(--dg-mid)}
.sum-high .sum-pct{color:var(--dg-high-ink)}  .sum-high .sum-bar i{background:var(--dg-high)}

/* ------------------------------------------------------- раскрытие параметров */
.details{background:var(--bg-warm)}
.param{
  display:grid;grid-template-columns:4fr 8fr;gap:var(--s-48);
  background:var(--bg-card);border-radius:var(--r-card);
  padding:var(--s-32);margin-bottom:var(--s-16);box-shadow:var(--shadow);
}
/* Отметка родителя: что из карты для семьи важнее всего. Стоит под шкалой,
   в одной колонке с оценкой, — глаз идёт «процент → навык → шкала → отметить». */
.param-mark{
  display:inline-flex;align-items:center;gap:var(--s-8);margin-top:var(--s-16);
  min-height:44px;padding:10px 16px;border-radius:var(--r-pill);border:1px solid var(--line);
  font-size:var(--fs-caption);font-weight:500;color:var(--ink-soft);
  cursor:pointer;user-select:none;
}
/* Сам чекбокс не рисуем: галочку невозможно собрать фоновыми градиентами —
   фоновый прямоугольник не поворачивается, и «галочка» выходила кривой чертой.
   Рисует соседний элемент, форма задана маской, цвет остаётся токеном. */
.param-mark input{
  position:absolute;width:18px;height:18px;margin:0;opacity:0;cursor:pointer;
}
.param-mark-box{
  flex:0 0 auto;width:18px;height:18px;border-radius:6px;
  border:1.5px solid var(--line);background:var(--bg-card);
}
.param-mark input:checked + .param-mark-box{
  border-color:var(--energy-ink);background:var(--energy);
  position:relative;
}
.param-mark input:checked + .param-mark-box::after{
  content:"";position:absolute;inset:0;background:var(--energy-ink);
  -webkit-mask:var(--check-mask) center/11px 11px no-repeat;
  mask:var(--check-mask) center/11px 11px no-repeat;
}
.param-mark input:focus-visible + .param-mark-box{outline:2px solid var(--energy-ink);outline-offset:2px}
/* Встречу ведут по демонстрации экрана: тонкая рамка в Zoom не читается,
   поэтому обводка втрое толще линии интерфейса. */
.param.is-marked{box-shadow:var(--shadow),0 0 0 3px var(--energy)}
.param.is-marked .param-mark{border-color:var(--energy);color:var(--energy-ink)}
/* процент едет вместе с текстом: иначе под коротким левым столбцом
   остаётся пустота во весь рост длинной рекомендации */
.param-head{position:sticky;top:104px;align-self:start;padding-right:var(--s-24)}
.param-pct{
  display:block;font-size:56px;font-weight:700;line-height:1;
  letter-spacing:-.03em;margin:0 0 var(--s-8);font-variant-numeric:tabular-nums;
}
.param-pct small{font-size:.42em;font-weight:700}
.param-head h3{margin-bottom:var(--s-16)}
.param-bar{display:block;height:8px;border-radius:var(--r-pill);background:var(--line);overflow:hidden}
.param-bar i{display:block;height:100%;border-radius:var(--r-pill)}
.param-low  .param-pct{color:var(--dg-low-ink)}   .param-low  .param-bar i{background:var(--dg-low)}
.param-mid  .param-pct{color:var(--dg-mid-ink)}   .param-mid  .param-bar i{background:var(--dg-mid)}
.param-high .param-pct{color:var(--dg-high-ink)}  .param-high .param-bar i{background:var(--dg-high)}

.param-cells{display:flex;flex-direction:column;gap:var(--s-8);margin-bottom:var(--s-24)}
.param-cells li{
  position:relative;padding-left:22px;font-size:var(--fs-body);color:var(--ink);
}
.param-cells li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:8px;height:8px;border-radius:var(--r-pill);background:var(--dg-high);
}
.param-expl{margin-bottom:var(--s-24);color:var(--ink-soft);font-size:var(--fs-body)}
.param-advice{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-16)}
.advice{padding:var(--s-24);border-radius:var(--r-media)}
.advice .label{display:block;margin-bottom:var(--s-8)}
.advice p{font-size:15px;line-height:1.55}
.advice-home{background:var(--bg-warm)}
.advice-ukids{background:var(--brand-soft)}
.advice-ukids .label{color:var(--dg-high-ink)}

/* ------------------------------------------- ситуации из обычной жизни ---
   Мост между процентами диагностики и жизнью семьи: карточка рисуется целиком
   на клиенте (diagnostic-life.js), в разметке сборщика — пустой контейнер. */
.life{background:var(--bg-warm)}
.life-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-16)}
.life-card{
  display:flex;flex-direction:column;min-width:0;overflow:hidden;
  border-radius:var(--r-card);background:var(--bg-card);box-shadow:var(--shadow);
}
/* Ряд из трёх карточек: без общей высоты шапки фото и текстовые разделы
   разъезжаются по вертикали — заголовок от одного слова до четырёх строк.
   Раньше высоту шапки держали фиксированным min-height, рассчитанным под самое
   длинное название каталога — на коротких названиях («Уверенность») это
   оставляло ~90px пустоты. Subgrid выравнивает все четыре ряда карточки
   (шапка/фото/«сейчас»/«в будущем») по факту самого высокого среди трёх
   карточек конкретной карты, а не по теоретическому максимуму каталога.
   Без поддержки subgrid шапка просто равна своему контенту — короткие
   заголовки не резервируют лишнее место, а вёрстка не разваливается,
   лишь перестаёт быть выровненной по общему уровню. На мобильной раскладке
   (карточки в один столбец) subgrid не нужен — снимается ниже. */
@supports (grid-template-rows: subgrid){
  .life-grid{grid-template-rows:repeat(4,auto)}
  .life-card{display:grid;grid-template-rows:subgrid;grid-row:span 4}
}
.life-card-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-12);
  padding:var(--s-24) var(--s-24) 0;
}
.life-card-head h3{font-size:var(--fs-h3)}
.life-pct{font-size:22px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.life-pct-low{color:var(--dg-low-ink)}
.life-pct-mid{color:var(--dg-mid-ink)}
.life-pct-high{color:var(--dg-high-ink)}
.life-card-visuals{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);margin:var(--s-16) var(--s-24) 0}
.life-card-visuals figure{position:relative;margin:0;border-radius:var(--r-media);overflow:hidden;background:var(--bg-warm)}
.life-card-visuals img{width:100%;height:100%;aspect-ratio:334/471;object-fit:cover}
.life-card-visuals figcaption{
  position:absolute;right:var(--s-8);bottom:var(--s-8);padding:5px 10px;border-radius:var(--r-pill);
  background:rgba(18,36,31,.78);color:var(--bg);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.life-now,.life-later{padding:var(--s-24)}
.life-now{border-bottom:1px solid var(--line)}
.life-now .label,.life-later .label{display:block;margin-bottom:var(--s-12)}
.life-now p,.life-later p{font-size:var(--fs-body);line-height:1.5;color:var(--ink)}
.life-now p+p{margin-top:var(--s-12);padding-top:var(--s-12);border-top:1px solid var(--line)}

/* ------------------------------------------- ИНВЕРСИЯ №1 · маршрут года */
/* Полотно инверсий — изумруд дизайн-системы (ADR-007): тёмный слой, но втрое
   светлее чернильного, поэтому секция читается как премиальная, а не глухая. */
.route{background:var(--canvas);color:var(--bg)}
.route .label{color:var(--energy-lift)}
.route .lead{color:var(--on-canvas-mute)}
.route mark{background:var(--energy);color:var(--ink);white-space:normal}
/* Заголовок маршрута меняется от того, что отметили, поэтому он идёт во всю
   ширину блока и всегда одним кеглем: скачущий размер читался бы как сбой. */
.route > header h2,.route > header .lead{max-width:none}
/* ---- календарь года ----
   Три уровня подсветки и подпись у каждого месяца без исключения.
   Возражение Ukids 06.08: если «важных» месяцев только три, родитель говорит
   «придём в апреле, раз там наша тема», и годовую программу не покупает. */
.annual-age{display:flex;align-items:center;gap:var(--s-12);margin-bottom:var(--s-24)}
.annual-age span{font-size:var(--fs-caption);color:var(--on-canvas-mute)}
.annual-age select{
  appearance:none;min-height:44px;padding:12px 38px 12px 16px;border-radius:var(--r-pill);
  border:1px solid var(--line-dark);background:rgba(255,255,255,.05) no-repeat right 14px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F2E0B4' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  color:var(--bg);font:500 var(--fs-caption) var(--font);cursor:pointer;
}
/* Плашка ближайшего старта: акцент даёт золотая точка перед заголовком,
   а не толстая полоса слева — она читается как шаблонный колаут. */
.annual-start{
  display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s-24);
  padding:var(--s-16) var(--s-24);border-radius:var(--r-media);
  background:rgba(255,255,255,.05);border:1px solid var(--canvas-line-strong);
}
.annual-start b::before{
  content:"";display:inline-block;width:8px;height:8px;margin-right:10px;
  border-radius:var(--r-pill);background:var(--energy);vertical-align:middle;
}
.annual-start b{font-size:var(--fs-body)}
.annual-start span{font-size:var(--fs-caption);color:var(--on-canvas-mute)}

.annual-layout{display:grid;grid-template-columns:5fr 7fr;gap:var(--s-16);align-items:start}
/* Ряды одинаковой высоты: у плиток с тегом и с двухстрочным названием
   содержимое разной высоты, и без выравнивания календарь выглядит рваным. */
.annual-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);
  grid-auto-rows:1fr}
.annual-month{
  display:flex;flex-direction:column;gap:4px;text-align:left;cursor:pointer;
  padding:14px 16px;border-radius:var(--r-media);
  border:1px solid var(--line-dark);background:rgba(255,255,255,.06);color:var(--bg);
  font:inherit;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.annual-month:hover{background:rgba(255,255,255,.12)}
.annual-month:focus-visible{outline:3px solid var(--energy);outline-offset:2px}
.annual-month small{font-size:var(--fs-label);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-canvas-dim)}
.annual-month b{font-size:15px;font-weight:700;line-height:1.2}
/* Единственная метка месяца — золотой тег. Он же стоит у месяца ближайшего
   старта, поэтому «пустых» подписей вроде «входит в маршрут года» больше нет. */
.annual-tag{
  align-self:flex-start;margin-top:auto;padding:5px 10px;border-radius:var(--r-pill);
  background:var(--energy);color:var(--energy-deep);
  font-size:11px;font-weight:700;line-height:1.2;
  white-space:nowrap;                      /* подпись месяца всегда в одну строку */
}
/* выбранный — бумага на изумруде: документ, который сейчас разбирают */
.annual-month.chosen{background:var(--bg);border-color:var(--bg);color:var(--ink)}
.annual-month.chosen small{color:var(--ink-soft)}
.annual-month.chosen .annual-tag{background:var(--energy);color:var(--energy-deep)}
/* ключевой месяц по карте */
.annual-month.is-recommended{border-color:var(--energy)}
.annual-month.is-recommended.chosen{border-color:var(--energy-ink)}

.annual-panel{
  background:var(--bg);color:var(--ink);border-radius:var(--r-card);
  padding:var(--s-32);
}
.annual-panel header{margin-bottom:var(--s-24)}
/* В подписи остался только месяц — на общем размере надстрочника он теряется
   на демонстрации экрана, поэтому ступенью крупнее. */
/* Панель уроков — светлая бумага внутри тёмной секции, поэтому надстрочник
   не наследует золото полотна: на белом оно давало 1,19:1. */
.annual-panel .label{font-size:var(--fs-caption);color:var(--ink-soft)}
.annual-panel h3{margin-top:var(--s-8)}
.annual-lessons{display:flex;flex-direction:column;gap:var(--s-16)}
.annual-lesson{
  display:grid;grid-template-columns:auto 72px 1fr;gap:var(--s-16);align-items:start;
  padding-top:var(--s-16);border-top:1px solid var(--line);
}
.annual-lesson:first-child{padding-top:0;border-top:0}
.annual-lesson-n{
  font-size:var(--fs-label);font-weight:700;letter-spacing:.1em;color:var(--ink-soft);
  padding-top:4px;font-variant-numeric:tabular-nums;
}
.annual-lesson-art{
  width:72px;height:72px;border-radius:var(--r-tag);
  background-size:300% 400%;background-repeat:no-repeat;
}
.annual-lesson h4{margin:0;font-size:17px;font-weight:700;line-height:1.3}
.annual-lesson p{margin-top:6px;font-size:14px;line-height:1.5;color:var(--ink-soft)}
.annual-lesson-focus{
  display:inline-block;margin-bottom:6px;padding:4px 12px;border-radius:var(--r-pill);
  background:var(--energy);color:var(--ink);font-size:12px;font-weight:700;
}
.annual-empty{
  background:rgba(255,255,255,.05);border-radius:var(--r-card);padding:var(--s-32);
}
.annual-empty p{color:var(--on-canvas-mute);margin-top:var(--s-12)}

.route-strong{
  margin-top:var(--s-32);padding-top:var(--s-32);border-top:1px solid var(--line-dark);
}
.route-strong ul{display:flex;flex-wrap:wrap;gap:var(--s-16);margin:var(--s-16) 0}
.route-strong li{
  display:flex;align-items:baseline;gap:10px;
  padding:12px 20px;border-radius:var(--r-pill);background:rgba(255,255,255,.07);
}
.route-strong b{font-size:22px;font-weight:700;color:var(--energy)}
.route-strong span{font-size:var(--fs-caption)}
.route-strong p{color:var(--on-canvas-mute);font-size:var(--fs-caption);max-width:58ch}

/* --------------------------------------------------------- что входит в год */
/* Композиция портирована с 21st.dev «Feature Bento» (@uilayout.contact, id 18898):
   медиа-карточка 2×2 + стат-плитки + плитка-действие.
   Под нашу систему заменено: градиенты → плоские заливки, blur-блобы → одна фигура,
   animate-ping/pulse убраны (спокойное движение), текст на фото получил скрим. */
.bento{
  display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-rows:280px;gap:var(--s-16);
}
.tile{
  position:relative;overflow:hidden;border-radius:var(--r-card);
  padding:var(--s-32);display:flex;flex-direction:column;
}

/* — медиа-плитка 2×2 — */
.tile-hero{grid-column:1/3;grid-row:1/3;justify-content:flex-end;color:#fff}
.tile-media{position:absolute;inset:0}
.tile-media img{width:100%;height:100%;object-fit:cover}
/* антипаттерн №1: текст поверх фото без плашки. Скрим обязателен. */
.tile-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,
    rgba(18,36,31,.94) 14%, rgba(18,36,31,.55) 52%, rgba(18,36,31,.12) 100%);
}
.tile-copy{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--s-12)}
.tile-hero h3{font-size:clamp(24px,2.5vw,32px);line-height:1.14}
.tile-hero p{color:rgba(255,255,255,.88);font-size:var(--fs-body);max-width:46ch}

.pill{
  align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  padding:7px 16px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.18);backdrop-filter:blur(6px);
  font-size:var(--fs-caption);font-weight:500;
}
.dot{width:8px;height:8px;border-radius:var(--r-pill);background:var(--energy)}
.pill-ghost{
  background:rgba(255,255,255,.14);padding:7px 14px;
  font-size:var(--fs-label);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}

/* — заливки — */
.tile-brand{background:var(--canvas);color:#fff}
.tile-dark{background:var(--canvas);color:var(--bg)}
.tile-feature{background:var(--bg-card);box-shadow:var(--shadow);justify-content:space-between}

/* — стат-плитка — */
.tile-stat{justify-content:flex-end;gap:var(--s-8)}
.tile-stat .tile-icon{margin-bottom:auto}
.tile-stat b{
  position:relative;font-size:clamp(40px,4.2vw,56px);font-weight:700;
  line-height:1;letter-spacing:-.03em;color:var(--energy);
}
.tile-cap{position:relative;font-size:var(--fs-caption);max-width:24ch}
.tile-brand .tile-cap{color:var(--on-canvas-soft)}
.tile-dark .tile-cap{color:var(--on-canvas-mute)}

.tile-icon{
  display:grid;place-items:center;width:56px;height:56px;
  border-radius:var(--r-pill);background:var(--brand-soft);color:var(--dg-high-ink);
}
.tile-icon svg{width:24px;height:24px}
.tile-brand .tile-icon{background:rgba(255,255,255,.16);color:#fff}

.tile-feature h3{font-size:22px;margin-bottom:var(--s-8)}
.tile-feature p{color:var(--ink-soft);font-size:15px;line-height:1.55;margin-bottom:var(--s-16)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags li{
  padding:6px 14px;border-radius:var(--r-pill);background:var(--brand-soft);
  color:var(--dg-high-ink);font-size:13px;font-weight:500;
}

/* — плитка с объектом —
   стрелка ↗ из оригинала снята: плитка не ссылка, обещать клик нечем. */
.tile-coins{justify-content:space-between}
/* объект выходит за границу плитки — обязательное правило системы */
.tile-object{position:absolute;right:-16%;bottom:6%;width:56%;opacity:.92;pointer-events:none}
.tile-coins h3{position:relative;font-size:22px;line-height:1.16}

/* единственная декоративная фигура секции */
.tile-blob{
  position:absolute;right:-44px;bottom:-44px;width:184px;height:184px;
  border-radius:var(--r-pill);background:rgba(255,255,255,.10);
}

/* ----------------------------------------------------------------- отзывы */
.voices{background:var(--bg-warm)}
.voices > header h2{max-width:none}
.voices-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-16)}
.voices blockquote{
  margin:0;padding:var(--s-32);border-radius:var(--r-card);
  background:var(--bg-card);box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:var(--s-16);
}
.voices p{font-size:var(--fs-body-lg);line-height:1.5}
.voices p::before{content:"«"}
.voices p::after{content:"»"}
/* Подпись отзыва: кружок с инициалами вместо портрета — снимать реальные семьи
   нельзя, а безымянное «мама, дочь 8 лет» читается как выдуманная цитата. */
.voices cite{margin-top:auto;font-style:normal;font-size:var(--fs-caption);color:var(--ink-soft)}
.voice-author{display:flex;align-items:center;gap:var(--s-12)}
.voice-avatar{
  flex:none;width:40px;height:40px;border-radius:var(--r-pill);
  display:grid;place-items:center;
  background:var(--brand-soft);color:var(--dg-high-ink);
  font-size:13px;font-weight:700;letter-spacing:.04em;
}
.voice-author b{display:block;font-size:var(--fs-body);color:var(--ink)}
.voice-author small{font-size:var(--fs-caption);color:var(--ink-soft)}

/* ------------------------------------------------- лицензия и гарантия */

/* --------------------------------------------- ИНВЕРСИЯ №2 · цена и действие */
.offer{background:var(--canvas);color:#fff}
.offer .label{color:var(--energy-lift)}
.offer .lead{color:var(--on-canvas-soft)}
.offer h2{margin:0 0 var(--s-32);max-width:22ch;font-size:var(--fs-h2)}
.offer-inner{max-width:none}
/* Сценарий цены слева, состав программы справа: пока менеджер ведёт по шагам,
   родитель видит, за что платит. */
.offer-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:var(--s-48);align-items:start}
.offer-main{min-width:0}
/* Колонки выравниваются по верхней линии: раньше список состава начинался
   на 32 px ниже сценария и выглядел съехавшим. */
/* Состав программы: плашка есть, а подложек под иконкой, цифрой и снимком нет —
   именно они читались как лишние пятна внутри плашки. */
.offer-perks{display:grid;gap:var(--s-8);align-content:start}
.perk{
  display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--s-16);align-items:center;
  padding:12px var(--s-16);border-radius:var(--r-media);
  /* Плашки на изумруде были почти неразличимы: подняли и заливку, и обводку. */
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);
}
.perk-photo{width:64px;height:60px;object-fit:contain;border-radius:4px}
.perk-photo-wide{width:64px;height:40px;object-fit:contain}
.perk .ico{width:64px;height:56px;background:none;border-radius:0;color:var(--energy)}
.perk .ico svg{width:30px;height:30px;stroke-width:1.5}
.perk > .perk-number{
  display:grid;place-items:center;width:64px;height:56px;
  color:var(--energy);font-size:clamp(26px,2.2vw,34px);font-weight:700;
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;
}
.perk b{display:block;font-size:var(--fs-body);line-height:1.25}
.perk div span{display:block;margin-top:2px;color:var(--on-canvas);font-size:13px;line-height:1.45}
/* Ценовой сценарий. Порядок экранов задан на звонке 06.08: на экране «цена сайта»
   не должно быть никакой другой цены рядом, поэтому этапы сменяют друг друга,
   а не лежат двумя карточками одновременно. */
.offer-stage{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-16);
  margin-top:0;
}
.offer-stage h3{font-size:clamp(24px,2.8vw,36px);line-height:1.12;letter-spacing:-.02em;max-width:26ch}
.offer-stage p{color:var(--on-canvas-soft);max-width:62ch}
.offer-calm h3{max-width:26ch}

.offer-headline{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s-16)}
.offer-headline s{font-size:26px;color:var(--on-canvas-dim);text-decoration-thickness:2px}
/* Цена на этом экране — кнопка: по ней менеджер меняет состав. */
/* Кликабельна месячная цена: именно её менеджер называет вслух, когда родитель
   говорит «дорого», и от неё же считается урезанный состав. */
.offer-price{
  align-self:flex-start;padding:0;border:0;background:none;cursor:pointer;color:var(--energy);
  font:700 clamp(42px,5vw,64px)/1 var(--font);letter-spacing:-.03em;
  border-bottom:3px dashed rgba(232,200,126,.55);
}
.offer-price:hover{border-bottom-color:var(--energy)}
.offer-price:focus-visible{outline:3px solid var(--energy);outline-offset:4px}
.offer-plan-note{margin-top:-4px;color:var(--on-canvas-mute);font-size:var(--fs-caption)}
/* Отключённый пункт состава: виден, но помечен как выключенный. */
.perk.is-off{opacity:.42}
.perk.is-off b::after{content:" · временно отключено";font-weight:500;color:var(--on-canvas-dim)}
.offer-headline b{
  font-size:clamp(42px,5vw,64px);font-weight:700;line-height:1;
  letter-spacing:-.03em;color:var(--energy);
}
.offer-headline small{font-size:var(--fs-body);color:var(--on-canvas-soft)}
.offer-permonth{margin-top:-4px;color:var(--energy);font-size:var(--fs-body-lg);font-weight:700}

.offer-list{display:grid;gap:10px}
.offer-list li{position:relative;padding-left:28px;color:var(--on-canvas);font-size:var(--fs-body)}
.offer-list li::before{
  content:"";position:absolute;left:0;top:.62em;width:12px;height:2px;
  border-radius:2px;background:var(--energy);
}

.offer-switches{display:flex;flex-wrap:wrap;gap:var(--s-24)}
.offer-switches>label{display:flex;flex-direction:column;gap:var(--s-8)}
.offer-switches>label>span{
  font-size:var(--fs-label);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--energy-lift);
}
.offer-switches>label>div{display:flex;flex-wrap:wrap;gap:6px}
.offer-switches button{
  padding:10px 18px;border-radius:var(--r-pill);cursor:pointer;
  border:1px solid rgba(255,255,255,.32);background:transparent;color:#fff;
  font:500 var(--fs-caption) var(--font);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.offer-switches button:hover{background:rgba(255,255,255,.12)}
.offer-switches button.is-on{background:var(--energy);border-color:var(--energy);color:var(--ink);font-weight:700}

.offer-methods{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-12);width:100%}
.offer-methods button{
  display:flex;flex-direction:column;gap:6px;text-align:left;cursor:pointer;
  padding:var(--s-24);border-radius:var(--r-media);
  border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.06);color:#fff;
  font:inherit;transition:background var(--dur) var(--ease);
}
.offer-methods button:hover{background:rgba(255,255,255,.14)}
/* Скидка показана кружком в углу плашки — то же место, где её ищут на ценнике. */
.offer-methods button{position:relative}
.offer-methods .method-badge{
  position:absolute;top:var(--s-16);right:var(--s-16);
  display:grid;place-items:center;width:52px;height:52px;border-radius:var(--r-pill);
  background:var(--energy);color:var(--energy-deep);font-size:15px;font-weight:700;
}
.offer-methods .method-price{display:flex;align-items:baseline;gap:var(--s-8);margin-top:var(--s-8);font-size:var(--fs-body)}
.offer-methods .method-price s{color:var(--on-canvas-mute)}
.offer-methods .method-price em{font-size:24px;font-weight:700;font-style:normal;letter-spacing:-.02em}
.offer-methods .is-lead .offer-methods .method-price em{color:var(--energy-deep)}
.offer-methods b{font-size:var(--fs-body);font-weight:700;padding-right:60px}
.offer-methods span{font-size:var(--fs-caption);color:var(--on-canvas-soft)}
.offer-methods .is-lead{background:var(--energy);border-color:var(--energy);color:var(--ink)}
.offer-methods .is-lead:hover{background:var(--energy-hover)}
.offer-methods .is-lead span{color:var(--energy-deep)}

.offer-more{width:100%}
.offer-more summary{cursor:pointer;padding:10px 0;font-size:var(--fs-caption);color:var(--energy-lift)}
.offer-more p{margin-top:var(--s-8);font-size:var(--fs-caption);color:var(--on-canvas-soft);max-width:64ch}
.offer-back{
  padding:0;border:0;background:transparent;cursor:pointer;
  color:var(--energy-lift);font:500 var(--fs-caption) var(--font);
  text-decoration:underline;text-underline-offset:4px;
}
.offer-note{font-size:13px;color:var(--on-canvas-mute);max-width:60ch}


/* Плашка «условия действуют сегодня». Сумм в ней нет и слов о сгорающем
   предложении тоже: на нуле она передаёт слово менеджеру.
   Правый верхний угол под шапкой — компактная, чтобы не спорить с контентом. */
.meeting-price{
  position:fixed;top:88px;right:20px;z-index:30;width:196px;
  padding:12px 14px;border-radius:var(--r-media);
  background:var(--canvas);color:var(--bg);box-shadow:0 12px 28px rgba(18,36,31,.22);
}
.meeting-price .label{font-size:10px;letter-spacing:.12em;color:var(--energy-lift)}
.meeting-price b{display:block;margin-top:2px;font-size:13px;font-weight:700;line-height:1.2}
.meeting-price-clock{
  margin-top:6px;font-size:19px;font-weight:700;line-height:1;
  color:var(--energy);font-variant-numeric:tabular-nums;
}
.meeting-price-seats{margin:6px 0 0;font-size:11.5px;line-height:1.25;
  color:var(--on-canvas-soft);white-space:nowrap}
/* .meeting-price b выше стоит display:block — это для «Специальных условий».
   Цифру мест возвращаем в строку, иначе она уезжает на свою. */
.meeting-price-seats b{display:inline;font-size:15px;font-weight:700;color:var(--energy-lift)}
.meeting-price-seats i{font-style:normal}
.meeting-price-hide{
  position:absolute;top:4px;right:4px;width:36px;height:36px;
  display:grid;place-items:center;border:0;border-radius:var(--r-pill);
  background:rgba(255,255,255,.12);color:var(--bg);font-size:13px;line-height:1;cursor:pointer;
}
.meeting-price-hide:hover{background:rgba(255,255,255,.24)}
.meeting-price.is-over .meeting-price-clock{color:var(--on-canvas-dim)}
.meeting-price.is-over{outline:1px solid var(--energy)}

/* ------------------------------------------------------------------ футер */
.foot{
  background:var(--canvas);color:var(--on-canvas-mute);
  padding:var(--s-48) var(--pad-x);
  display:flex;justify-content:space-between;gap:var(--s-32);flex-wrap:wrap;
}
.foot div{display:flex;gap:var(--s-24);align-items:center}
.foot img{filter:brightness(0) invert(1);opacity:.9}
.foot p{font-size:13px;line-height:1.6}
.foot-note{max-width:44ch}

/* --------------------------------------------------------------- адаптив */
/* ================================================================= блоки,
   перенесённые из лендинга КЭВ (landing-runtime.js): повестка встречи,
   результат года, поддержка, ход занятия, клуб, академия, вопросы.
   Тексты взяты дословно, вёрстка — на токенах этой страницы. ============= */

/* Общая карточка-признак: иконка контуром, заголовок, пояснение. Одна
   разметка на пять блоков — иначе каждый принесёт свой набор отступов. */
.feature{display:flex;flex-direction:column;gap:var(--s-12)}
.feature h3{font-size:var(--fs-body-lg);line-height:1.25}
.feature p{color:var(--ink-soft);font-size:var(--fs-body)}
.ico{
  display:grid;place-items:center;width:44px;height:44px;
  border-radius:var(--r-media);background:var(--brand-soft);color:var(--dg-high-ink);
}
.ico svg{width:22px;height:22px}

/* ---- результат года ---- */
/* В заголовке подсвечен список из карты, а не пара слов: без переноса плашка
   уезжает на 2700 px и тянет за собой горизонтальный скролл. */
.outcome h2 mark{white-space:normal}
/* Базовые свойства сетки потерялись при чистке старых раскладок: остался один
   grid-template-columns без display:grid, и четыре плитки встали столбиком. */
.benefits-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-32)}
.benefits{background:var(--bg-warm)}

/* ---- ход занятия ---- */
.lesson-flow{background:var(--bg-warm)}

/* ---- академия ----
   Композиция повторяет лендинг: слева заголовок, лид и факты списком плашек,
   справа крупный мокап продукта с подписью. Цифры каре в четыре колонки, как
   было у меня, разрывали связь «факт → расшифровка». */
.academy{overflow:hidden}
.academy-inner{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(420px,1.18fr);
  gap:var(--s-48);align-items:center;
}
.academy-copy h2{max-width:16ch}
.academy-copy .lead{margin-top:var(--s-24);max-width:44ch}
.academy-facts{display:grid;gap:10px;margin-top:var(--s-32)}
.academy-facts li{
  display:grid;grid-template-columns:16px minmax(0,1fr);column-gap:14px;align-items:start;
  padding:15px 18px;border:1px solid var(--line);border-radius:var(--r-media);
  background:var(--bg-card);
}
.academy-facts li::before{
  content:"";grid-row:1 / span 2;width:16px;height:16px;margin-top:4px;
  background:var(--dg-high-ink);
}
.academy-facts b{grid-column:2;font-size:var(--fs-body);line-height:1.16}
.academy-facts span{grid-column:2;margin-top:3px;color:var(--ink-soft);font-size:var(--fs-caption);line-height:1.3}
.academy-note{margin-top:var(--s-24);color:var(--ink-soft);max-width:52ch}
.academy-visual{margin:0;min-width:0}
/* Мокап крупнее колонки и уходит за правый край экрана — секция обрезает лишнее.
   Так он читается как продукт, а не как иллюстрация в рамке. */
.academy-visual{margin-right:calc(-1 * var(--pad-x) - 40px)}
.academy-visual img{width:calc(100% + var(--pad-x) + 40px);max-width:none}
.academy-visual img{width:100%;height:auto}
.academy-visual figcaption{padding-top:14px;color:var(--ink-soft);font-size:var(--fs-caption)}

/* ---- вопросы ---- */
.faq{background:var(--bg-warm)}
.faq-note{margin-top:var(--s-24);color:var(--ink-soft);font-size:var(--fs-caption)}

/* ---- методика: карта навыков ----
   Формат тот же, что на лендинге: плитки лежат на общей подложке. Подложка
   держится тёплой гаммы полотна — мятный brand-soft на песочном фоне спорил
   подтоном, хотя оба «светло-зелёные». */
.skills-map{background:var(--bg)}
.skills-cognitive{padding-top:0}
.skills-board{padding:var(--s-32);border-radius:var(--r-card);background:var(--bg-warm)}
.skills-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-12)}
.skills-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.skills-grid li{
  display:grid;place-items:center;min-height:96px;padding:var(--s-16);
  border-radius:var(--r-media);background:var(--bg-card);
  color:var(--dg-high-ink);text-align:center;
  font-size:var(--fs-body-lg);font-weight:500;line-height:1.15;
}
/* Заголовок когнитивного блока идёт в паре с иллюстрацией курса, как на лендинге. */
.cognitive-head{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);
  gap:var(--s-48);align-items:center;
}
.cognitive-head h2{margin:0;max-width:22ch}
/* Подсветка внутри этих заголовков переносится: неразрывная плашка вылезала
   из колонки и залезала под иллюстрацию. */
.skills-map h2 mark{white-space:normal}
.skills-map > header h2{max-width:none}
.cognitive-head figure{margin:0}
.cognitive-head img{width:100%;height:auto;border-radius:var(--r-card)}
.skills-cognitive .lead{margin-top:var(--s-16);margin-bottom:var(--s-32)}

/* ---- визуалы перенесённых блоков ----
   Мокапы лежат в PNG с прозрачным фоном, поэтому рамка и тень под ними читались
   как лишняя плашка вокруг картинки. Изображение показывается как есть. */
.academy-visual img,.flow-visual img{width:100%;height:auto}
/* ============ раскладки, снятые с лендинга (см. landing-runtime.css) ======= */

/* Как проходит занятие: планшеты слева, текст справа, пункты — строки таблицы,
   а не карточки. Так блок читается за один взгляд и держится в экране. */
.lesson-flow{background:var(--bg-lesson)}
.lesson-flow-inner{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--s-48);align-items:center;
}
.lesson-flow .flow-visual{margin:0}
.lesson-flow .flow-visual img{width:100%;height:auto}
.flow-copy h2{max-width:18ch}
.flow-copy .lead{margin-top:var(--s-16);max-width:48ch}
.flow-points{margin-top:var(--s-32);display:grid}
.flow-points > div{
  display:grid;grid-template-columns:minmax(140px,.5fr) minmax(0,1fr);
  gap:var(--s-24);padding:var(--s-16) 0;border-top:1px solid rgba(18,36,31,.18);
}
.flow-points dt{font-weight:700;font-size:var(--fs-body)}
.flow-points dd{margin:0;color:var(--ink-soft);font-size:var(--fs-caption);line-height:1.45}

/* Клуб: телефон · карточки · фото — три колонки, как на лендинге. */
.club{background:var(--bg-warm)}
.club-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-48);align-items:end}
.club-head h2{max-width:18ch}
.club-layout{
  display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.4fr) minmax(0,.78fr);
  gap:var(--s-24);align-items:center;margin-top:var(--s-32);
}
.club-phone,.club-photo{margin:0;display:flex;flex-direction:column;gap:var(--s-12)}
.club-phone img,.club-photo img{width:100%;height:auto;border-radius:var(--r-card)}
.club-phone img{border-radius:0}
.club-phone figcaption,.club-photo figcaption{color:var(--ink-soft);font-size:var(--fs-caption)}
.club-content{display:grid;gap:var(--s-12)}
.club-content .feature{
  flex-direction:row;gap:var(--s-16);align-items:flex-start;
  padding:var(--s-24);border-radius:var(--r-card);background:var(--bg-card);
}
.club-content .feature .ico{flex:none}
.club-content .feature h3{font-size:var(--fs-body)}
.club-content .feature p{font-size:var(--fs-caption);line-height:1.45}

/* Результат года: тёмное полотно и три колонки под тонкой линией. */
.outcome{background:var(--canvas);color:var(--bg)}
.outcome h2{max-width:26ch}
.outcome .lead{margin-top:var(--s-24);color:var(--on-canvas-mute);max-width:52ch}
.outcome-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-32);margin-top:var(--s-48)}
.outcome-grid article{padding-top:var(--s-24);border-top:1px solid var(--canvas-line-strong)}
.outcome-grid b{display:block;font-size:var(--fs-body);line-height:1.25}
.outcome-grid span{display:block;margin-top:var(--s-8);color:var(--on-canvas-mute);font-size:var(--fs-caption);line-height:1.45}

/* Вопросы: слева текст, справа переписка — вопрос родителя и ответ Ukids. */
.faq-inner{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s-48);align-items:center}
.faq-copy h2{max-width:14ch}
.faq-copy .lead{margin-top:var(--s-16);max-width:44ch}
.faq-note{
  margin-top:var(--s-24);padding-top:var(--s-16);border-top:1px solid var(--line);
  color:var(--ink-soft);font-size:var(--fs-caption);max-width:46ch;
}
.messenger{padding:var(--s-24);border-radius:var(--r-card);background:var(--bg-card);box-shadow:var(--shadow)}
.messenger-head{display:flex;align-items:center;gap:var(--s-12);padding-bottom:var(--s-16);border-bottom:1px solid var(--line)}
.messenger-avatar{
  display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-pill);
  background:var(--dg-high-ink);color:#fff;font-weight:700;
}
.messenger-head b{display:block;font-size:var(--fs-body)}
.messenger-head small{color:var(--ink-soft);font-size:var(--fs-caption)}
.messenger-dialogue{display:grid;gap:var(--s-12);margin-top:var(--s-16)}
.message{max-width:82%;padding:var(--s-12) var(--s-16);border-radius:var(--r-media);background:var(--bg-warm)}
.message span{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.message p{margin-top:4px;font-size:var(--fs-caption);line-height:1.45}
.message-ukids{margin-left:auto;background:var(--canvas);color:var(--bg)}
.message-ukids span{color:var(--energy)}


@media (max-width:1000px){
  .hero{grid-template-columns:1fr;gap:var(--s-32)}
  .hero-art{max-width:420px;transform:none}
  .hero-art::before{display:none}
  .param,.annual-layout{grid-template-columns:1fr;gap:var(--s-24)}
  .param-head{position:static}
  .bento,.voices-grid,.benefits-grid{grid-template-columns:1fr 1fr}
  .academy-inner{grid-template-columns:1fr;gap:var(--s-32)}
  /* В одну колонку мокап уже не «выходит за экран», а просто обрезается — вылет
     нужен только там, где он стоит второй колонкой. */
  .academy-visual{margin-right:0}
  .academy-visual img{width:100%}
  .skills-grid,.skills-grid-4{grid-template-columns:1fr 1fr}
  .cognitive-head{grid-template-columns:1fr}
    
  .outcome-grid{grid-template-columns:1fr}
  .bento{grid-auto-rows:260px}
  .tile-hero{grid-column:1/3;grid-row:span 2}
}
@media (max-width:760px){
  .strip ul,.bento,.voices-grid,.param-advice,
  .offer-methods,.annual-grid,
  .outcome-grid,.benefits-grid,
  .academy-facts,.academy-inner,.lesson-flow-inner,.club-head,
  .club-layout,.faq-inner,.outcome-grid,.benefits-grid,.offer-layout,
  .cognitive-head,.skills-grid,.skills-grid-4,.life-grid{grid-template-columns:1fr}
  /* Карточки друг под другом — subgrid по рядам здесь не нужен: каждая
     карточка снова обычный flex-блок, высота шапки/фото/текста — по контенту. */
  .life-card{display:flex}
  .annual-panel{padding:var(--s-24)}
  .annual-lesson{grid-template-columns:auto 56px 1fr;gap:var(--s-12)}
  .annual-lesson-art{width:56px;height:56px}
  .bento{grid-auto-rows:auto}
  .tile{min-height:236px;padding:var(--s-24)}
  .tile-hero{grid-column:1;grid-row:auto;min-height:400px}
  .tile-object{width:50%;right:-8%}
  .sum-row{grid-template-columns:1fr auto;gap:var(--s-8) var(--s-16);padding:var(--s-12) 0}
  .sum-bar{grid-column:1/-1}
  .param{padding:var(--s-24)}
  .param-pct{font-size:44px}
  .route-month{flex-direction:column;gap:var(--s-12)}
  .route-item{padding:var(--s-24)}
  .topbar{padding:10px var(--pad-x);gap:var(--s-8)}
  .topbar-tagline{font-size:11px}
  .meeting-price{top:82px;right:10px;width:168px;padding:10px 12px}
  /* Плашка встречи висит поверх первого экрана и на узком телефоне доходит
     примерно до 190 px — заголовок героя начинается ниже, а не под ней. */
  .hero{padding-top:148px}
  .meeting-price-clock{font-size:17px}
    .foot{flex-direction:column}
}

@media print{
  .topbar,.btn,.meeting-price{display:none}
  body{background:#fff}
  section{padding:24px 0;break-inside:avoid}
  .route,.offer,.foot{background:#fff!important;color:var(--ink)!important}
  .route .lead,.offer .lead,.route-out{color:var(--ink-soft)!important}
  .param{box-shadow:none;border:1px solid var(--line)}
}

/* Тач-ввод: пальцу нужны те же 44 px, что и в мобильной раскладке, независимо
   от ширины экрана — встречу могут вести с планшета в горизонтальной ориентации. */
@media (pointer:coarse){
  .annual-month{min-height:64px}
  .offer-switches button,  .meeting-price-hide{width:44px;height:44px}
}


/* Перенесённые блоки на лендинге умещались в экран: там вертикальный отступ
   секции 94 px, а иллюстрация стоит рядом с текстом, а не под ним. Повторяем
   обе меры — иначе каждый блок занимает полтора экрана и встреча буксует. */
.outcome,.benefits,.lesson-flow,.club,.academy,.skills-map,.faq{
  padding-top:var(--s-96);padding-bottom:var(--s-96);
}
.outcome > header,.benefits > header,.lesson-flow > header,
.club > header,.academy > header,.skills-map > header,.faq > header{
  margin-bottom:var(--s-32);
}
/* иллюстрация — во второй колонке, а не отдельным этажом */

/* Снимки продукта в бенто-плитках. Правило системы: плитка обязана содержать
   фрагмент продукта, а не иконку с подписью. Снимки присланы Ukids 18.08.2026. */
.tile-shot{margin:var(--s-16) 0 0;border-radius:var(--r-tag);overflow:hidden;
  border:1px solid var(--line);background:var(--bg-card);line-height:0}
.tile-shot img{display:block;width:100%;height:auto}
/* В плитках со статистикой высота фиксирована, и снимок в них не помещался —
   обрезался как придётся. Окно с заданной пропорцией делает кадр намеренным:
   показываем верх интерфейса, где и живёт смысл. */
.tile-stat .tile-shot{margin-top:auto}
/* В плитке высоту задаёт экран мокапа, а не внешняя рамка: иначе рамка сжата
   до одной пропорции, экран тянется по своей и вылезает наружу. */
.tile-shot.mock .mock-screen{aspect-ratio:auto;height:84px}
.tile-shot.mock .mock-screen img{height:100%}
.tile-dark .tile-shot,.tile-brand .tile-shot{border-color:rgba(255,255,255,.22)}
@media(max-width:768px){ .tile-shot{margin-top:var(--s-12)} }


/* ---------------------------------------------------------------- мокапы
   Рамка устройства рисуется стилями, а не картинкой: скриншоты приходят
   разного размера, и одна и та же рамка должна годиться под любой. */
.mock{margin:0;line-height:0}
.mock .mock-screen{
  display:block;overflow:hidden;background:var(--canvas);
  border:2px solid var(--bg);border-radius:6px;
}
.mock .mock-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top}
/* MacBook Air: экран 16:10 и подставка чуть шире корпуса */
.mock-mac .mock-screen{aspect-ratio:16/10}
.mock-mac::after{
  content:"";display:block;width:112%;height:4px;margin:2px 0 0 -6%;
  border-radius:0 0 5px 5px;background:var(--bg);
}
/* iPhone: вытянутый экран, скруглённый корпус и вырез сверху */
.mock-phone .mock-screen{aspect-ratio:9/19.5;border-width:3px;border-radius:14px;position:relative}
.mock-phone .mock-screen::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:34%;height:5px;border-radius:0 0 5px 5px;background:var(--bg);z-index:1;
}

/* Плашка со снимком сохраняет прежний размер: колонка те же 64px, что у иконок,
   мокап подогнан под неё. Деталей на таком экране не разобрать — он тут и не для
   чтения, разбирают снимок выше, в бенто. */
/* figure по умолчанию несёт margin:1em 40px — в колонке 64px это и лишняя
   высота плашки, и сплющенная картинка. Обнуляем. */
.perk-lead{width:64px;margin:0}
.perk-lead.mock-mac .mock-screen{border-width:1.5px;border-radius:4px}
.perk-lead.mock-mac::after{height:3px;margin-top:1.5px}
.perk-lead-plain img{display:block;width:auto;max-width:100%;max-height:56px;margin:0 auto;
  object-fit:contain;object-position:center}