/* CES FOR YOU - секции лендинга, карточка цены, шторка оплаты.
   Все вертикальные отступы берутся из лестницы --sp-* в ces-tokens.css.
   Литералов и inline-стилей в разметке нет. */

/* ── Секция 1. Герой ─────────────────────────────────────── */

.hero {
  margin-top: var(--sp-9);
  background: var(--card);
  border-radius: var(--r-panel);
  box-shadow: var(--sh-panel);
  padding: var(--pad-panel);
  display: grid;
  grid-template-columns: 55% 45%;
  align-items: center;
}

/* Исключения поверх умолчания ритма */
.hero__text > * + * { margin-top: var(--sp-6); }
.hero__text > .t-hero { margin-top: var(--sp-5); }
.hero__text > .hero-tags { margin-top: var(--sp-5); }
.hero__text > .offer { margin-top: var(--sp-7); }
.hero__text > .trust { margin-top: var(--sp-7); }

/* Перечисление стало плашками: три цветные, с глифом вместо запятых */
.hero-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.hero-tags li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--h-chip);
  padding: 0 var(--sp-5);
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.hero-tags svg { color: var(--blue); flex: none; }

.hero-tags li:nth-child(1) { background: var(--tint-blue); }
.hero-tags li:nth-child(2) { background: var(--tint-violet); }
.hero-tags li:nth-child(3) { background: var(--tint-green); }

/* ── Ценник в герое ──────────────────────────────────────────
   Старая цена перечёркнута, новая крупная и синяя, срок акции
   на лаймовой плашке. Три разных сигнала в одной строке -
   предложение читается, не читая. */

.offer { display: grid; gap: var(--sp-3); }

/* Срок приклеен к сумме и читается с ней одним блоком. Отдельная
   серая подпись сверху не работала: взгляд забирал крупное синее
   число и уходил дальше, так и не увидев, что это цена за год. */
.offer__price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

/* Период набран почти в размер числа и стоит на голубой плашке.
   Мелкая приписка сбоку не работала: она читалась сноской, взгляд
   её пропускал. Здесь это второй объект строки, а не примечание. */
.offer__unit {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--tint-blue);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -.02em;
}

/* Делит сумму на двенадцать: 26 990 ₸ звучит крупно, пока не видно,
   что за месяц из неё выходит 2 249 ₸. */
.offer__split { font-size: 15px; font-weight: 500; color: var(--text); }
.offer__split b { font-weight: 700; color: var(--ink); }

.offer__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-5);
}

.offer__old {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -.02em;
  color: var(--cap);
}

.offer__old::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  top: 52%;
  height: 3px;
  border-radius: 2px;
  background: var(--cap);
  transform-origin: left center;
  animation: strike-out .52s var(--glide) both;
}

@keyframes strike-out {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.offer__now {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--blue);
}

.hero__cta {
  display: flex;
  align-items: center;
  gap: var(--sp-7);
  flex-wrap: wrap;
}

.hero__note { font-size: 13px; font-weight: 600; color: var(--cap); }

.hero__device {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero__device img {
  width: 330px;
  transform: rotate(6deg);
}

.trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--sp-8);
  flex-wrap: wrap;
}

.trust li { display: grid; gap: var(--sp-1); }

.trust b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1.1;
}

.trust span { font-size: 13px; font-weight: 600; color: var(--cap); }

/* ── Секция 2. Карточки ──────────────────────────────────── */

.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-card);
}

.card {
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  padding: var(--pad-card);
  text-decoration: none;
}

.card > .t-card { margin-top: var(--sp-6); }
.card > .t-body { margin-top: var(--sp-3); }

/* ── Сцены секции «почему не бросит» ─────────────────────────
   Картинка вместо абзаца: короткая подпись под живой сценой. */

.card-scene { padding: var(--sp-8) var(--sp-8) var(--sp-9); }

.scene {
  height: var(--h-scene);
  display: grid;
  place-items: center;
  border-radius: var(--r-tile);
  background: var(--inset);
}

.scene--blue { background: var(--tint-blue); }
.scene--violet { background: var(--tint-violet); }
.scene--green { background: var(--tint-green); }

/* Высота - нижняя граница, а не жёсткий размер: когда карточка
   шире десктопной, сцена растёт под рисунок, а не режет его */
.scene--wide { height: auto; min-height: var(--h-scene-wide); padding: var(--sp-6); }

.card-scene > .t-card { margin-top: var(--sp-7); }

/* Сцена 1. Карточка слова переворачивается */
.flip { width: 176px; height: 92px; perspective: 720px; }

.flip__in {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: flip-word 5.2s var(--ease-io) infinite;
}

.flip__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-inset);
  background: var(--card);
  box-shadow: var(--sh-card);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.01em;
  color: var(--ink);
  backface-visibility: hidden;
}

.flip__face--back {
  transform: rotateY(180deg);
  background: var(--blue);
  color: #fff;
  box-shadow: var(--sh-blue);
}

@keyframes flip-word {
  0%, 34% { transform: rotateY(0); }
  50%, 84% { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}

/* Сцена 2. Четыре навыка загораются по очереди */
.skills { display: grid; grid-template-columns: repeat(2, var(--sz-glyph)); gap: var(--sp-3); }

.skill {
  width: var(--sz-glyph);
  height: var(--sz-glyph);
  border-radius: var(--r-plaque);
  display: grid;
  place-items: center;
  background: var(--card);
  color: var(--cap);
  box-shadow: var(--sh-card);
  animation: skill-on 4.8s var(--ease-io) infinite;
}

.skill:nth-child(2) { animation-delay: .32s; }
.skill:nth-child(3) { animation-delay: .64s; }
.skill:nth-child(4) { animation-delay: .96s; }

@keyframes skill-on {
  0%, 8% { background: var(--card); color: var(--cap); transform: none; }
  20%, 44% { background: var(--blue); color: #fff; transform: translateY(-4px); }
  58%, 100% { background: var(--card); color: var(--cap); transform: none; }
}

/* Сцена 3. Строка поднимается в таблице класса */
.board { display: grid; gap: var(--sp-2); width: 176px; }

.board__row {
  height: 26px;
  border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: var(--sh-card);
  animation: board-shift 5.6s var(--ease-io) infinite;
}

.board__row--a { width: 78%; }
.board__row--b { width: 60%; }

.board__row--me {
  background: var(--blue);
  color: var(--card); /* звезда рисуется currentColor */
  box-shadow: var(--sh-blue);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: var(--sp-2);
  animation: board-climb 5.6s var(--ease-io) infinite;
}

@keyframes board-shift {
  0%, 14% { transform: translateY(0); }
  44%, 84% { transform: translateY(34px); }
  100% { transform: translateY(0); }
}

@keyframes board-climb {
  0%, 14% { transform: translateY(0); width: 46%; }
  44%, 84% { transform: translateY(-68px); width: 92%; }
  100% { transform: translateY(0); width: 46%; }
}

/* ── Секция 3. Тёмная панель ─────────────────────────────── */

.panel-dark {
  background: var(--dark);
  border-radius: var(--r-panel);
  box-shadow: var(--sh-panel);
  padding: var(--pad-panel);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pad-panel);
  align-items: center;
  color: #C7C7D2;
}

/* Три короткие строки вместо абзаца: подписи к показателям слева */
.report { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-7); }

.report li {
  position: relative;
  padding-left: var(--sp-7);
  font-size: 18px;
  line-height: 1.45;
  color: #fff;
  max-width: 32ch;
}

.report li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
}

.stats {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-8) var(--sp-9);
  align-items: center;
}

.stat-ring { grid-row: span 2; display: grid; gap: var(--sp-3); justify-items: start; }

.stat-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #75757F;
}

.bar {
  height: 10px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .10);
  margin-top: var(--sp-3);
  overflow: hidden;
}

.bar > i {
  display: block;
  height: 100%;
  width: 64%;
  border-radius: var(--r-pill);
  background: var(--blue);
  transition: width var(--count) var(--glide) 180ms;
}

.week {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-2);
  height: var(--h-week);
  margin-top: var(--sp-3);
}

.week i {
  flex: 1;
  border-radius: 6px;
  background: rgba(255, 255, 255, .14);
  transform-origin: bottom;
  transition: transform var(--base) var(--ease);
  transition-delay: calc(320ms + var(--i, 0) * 70ms);
}

.week i.on { background: var(--blue); }

.week i:nth-child(1) { height: 38%; --i: 0; }
.week i:nth-child(2) { height: 62%; --i: 1; }
.week i:nth-child(3) { height: 100%; --i: 2; }
.week i:nth-child(4) { height: 74%; --i: 3; }
.week i:nth-child(5) { height: 52%; --i: 4; }
.week i:nth-child(6) { height: 86%; --i: 5; }
.week i:nth-child(7) { height: 28%; --i: 6; }

/* Сегодняшний столбец тихо дышит - панель не застывает после захода */
.week i:nth-child(3) { animation: today-breathe 4.2s var(--ease-io) infinite; }

@keyframes today-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: .68; }
}

/* Показатели заходят при прокрутке. Конечные значения стоят по
   умолчанию: без скрипта панель читается целиком. */
.ring-arc { transition: stroke-dashoffset var(--count) var(--glide); }

.has-reveal .panel-dark .ring-arc { stroke-dashoffset: 327; }
.has-reveal .panel-dark.is-in .ring-arc { stroke-dashoffset: 98; }

.has-reveal .panel-dark .bar > i { width: 0; }
.has-reveal .panel-dark.is-in .bar > i { width: 64%; }

.has-reveal .panel-dark .week i { transform: scaleY(.05); }
.has-reveal .panel-dark.is-in .week i { transform: none; }

/* ── Секция 4. Рейка экранов ─────────────────────────────────
   Запас на тень внутри скролла не должен стоить ритма снаружи,
   поэтому поле гасится равным отрицательным полем. */

.rail {
  display: flex;
  gap: var(--sp-8);
  overflow-x: auto;
  padding: var(--rail-room-top) var(--pad-page) var(--rail-room);
  margin:
    calc(var(--rail-room-top) * -1)
    calc(var(--pad-page) * -1)
    calc(var(--rail-room) * -1);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.rail::-webkit-scrollbar { display: none; }

/* Ссылка на гид под лентой экранов. Тихая кнопка: рядом с покупкой она
   не должна спорить за внимание, но человек, который пришёл разбираться,
   а не платить, находит её там же, где увидел экраны. */
.rail-more { margin-top: var(--sp-7); }

.rail__item {
  flex: none;
  scroll-snap-align: center;
}

/* Высота задаётся, ширина считается от снимка: подписи под всеми
   устройствами стоят на одной линии, даже если снимок перевыложили
   в другой пропорции. */
.rail__item img { height: var(--h-rail-device); width: auto; }

.rail__item figcaption {
  margin-top: var(--sp-6);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .01em;
}

/* ── Секция 5. Две карточки ──────────────────────────────── */

.cards-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-card);
}

.card-tall { padding: var(--sp-9); }

.card-tall > .t-card { margin-top: var(--sp-8); }

/* ── Сцена «Чемпионат школы»: сорок дней собираются волной ── */

.streak {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: var(--sp-2);
  width: 100%;
}

.streak i {
  aspect-ratio: 1;
  border-radius: 7px;
  background: var(--rest, var(--card));
  animation: day-on 5s var(--ease-io) infinite;
  /* Волна идёт по диагонали: столбец плюс удвоенная строка */
  animation-delay: calc((var(--col) + var(--row) * 2) * 46ms);
}

.streak i:nth-child(10n + 1) { --col: 0; }
.streak i:nth-child(10n + 2) { --col: 1; }
.streak i:nth-child(10n + 3) { --col: 2; }
.streak i:nth-child(10n + 4) { --col: 3; }
.streak i:nth-child(10n + 5) { --col: 4; }
.streak i:nth-child(10n + 6) { --col: 5; }
.streak i:nth-child(10n + 7) { --col: 6; }
.streak i:nth-child(10n + 8) { --col: 7; }
.streak i:nth-child(10n + 9) { --col: 8; }
.streak i:nth-child(10n + 10) { --col: 9; }

.streak i:nth-child(-n + 10) { --row: 0; }
.streak i:nth-child(n + 11):nth-child(-n + 20) { --row: 1; }
.streak i:nth-child(n + 21):nth-child(-n + 30) { --row: 2; }
.streak i:nth-child(n + 31) { --row: 3; }

/* Цвет покоя чередуется по всей палитре тинтов - мозаика живая
   даже до того, как по ней пройдёт синяя волна. */
.streak i:nth-child(4n + 1) { --rest: #fff; }
.streak i:nth-child(4n + 2) { --rest: var(--tint-blue); }
.streak i:nth-child(4n + 3) { --rest: var(--tint-green); }
.streak i:nth-child(4n + 4) { --rest: var(--tint-pink); }

@keyframes day-on {
  0%, 4% { background: var(--rest); transform: scale(1); }
  12%, 56% { background: var(--blue); transform: scale(1.06); }
  68%, 100% { background: var(--rest); transform: scale(1); }
}

/* ── Сцена «Баттлы»: раунды разыгрываются один за другим ──── */

.duel { display: grid; justify-items: center; gap: var(--sp-6); position: relative; }

.duel__row { display: flex; align-items: center; gap: var(--sp-6); }

.ava {
  width: var(--sz-ava-lg);
  height: var(--sz-ava-lg);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -.02em;
  background: var(--card);
  box-shadow: var(--sh-card);
}

.ava--a { color: var(--blue); animation: ava-win 6s var(--ease-io) infinite; }
.ava--b { color: var(--cap); }

@keyframes ava-win {
  0%, 42% { transform: scale(1); box-shadow: var(--sh-card); }
  52%, 88% { transform: scale(1.08); box-shadow: var(--sh-blue); }
  96%, 100% { transform: scale(1); box-shadow: var(--sh-card); }
}

.duel__score {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  color: var(--ink);
  letter-spacing: -.02em;
}

.duel__rounds { display: flex; gap: var(--sp-3); }

.rd {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--sh-card);
  animation: round-won 6s var(--ease-io) infinite;
}

.rd--a { --won: var(--blue); }
.rd--b { --won: var(--cap); }

.rd:nth-child(1) { animation-delay: .2s; }
.rd:nth-child(2) { animation-delay: .7s; }
.rd:nth-child(3) { animation-delay: 1.2s; }
.rd:nth-child(4) { animation-delay: 1.7s; }
.rd:nth-child(5) { animation-delay: 2.2s; }

@keyframes round-won {
  0%, 3% { background: #fff; transform: scale(1); }
  9%, 62% { background: var(--won); transform: scale(1.3); }
  72%, 100% { background: #fff; transform: scale(1); }
}

.duel__win {
  height: var(--h-chip);
  padding: 0 var(--sp-6);
  border-radius: var(--r-pill);
  background: var(--blue);
  color: #fff;
  box-shadow: var(--sh-blue);
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.01em;
  animation: win-pop 6s var(--ease-io) infinite;
}

@keyframes win-pop {
  0%, 44% { opacity: 0; transform: translateY(8px) scale(.9); }
  54%, 86% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: translateY(8px) scale(.9); }
}

/* ── Секция 6. Синяя полоса ──────────────────────────────── */

.band-blue {
  background: var(--blue);
  border-radius: var(--r-panel);
  box-shadow: var(--sh-blue);
  padding: var(--pad-panel);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-8) var(--sp-9);
  align-items: center;
}

.band-blue h2 { color: #fff; }

/* Только лид в левой колонке: мера строки здесь нужна ему одному.
   По селектору .band-blue p она доставалась и подписи под кнопкой,
   а та с ограниченной шириной переставала центрироваться по полосе. */
.band-blue__text p {
  color: var(--blue-quiet);
  font-size: 17px;
  line-height: 1.6;
  max-width: 58ch;
}

.band-blue__text > * + * { margin-top: var(--sp-5); }

/* Поток занимает обе колонки: в узкой левой его разрывало переносом */
.band-blue > .flow { grid-column: 1 / -1; margin-top: var(--sp-3); }

.band-blue__act { display: grid; justify-items: center; gap: var(--sp-4); }

.band-blue__note {
  font-size: 13px;
  font-weight: 600;
  color: var(--blue-quiet);
  text-align: center;
}

/* ── Поток «урок → приложение» ───────────────────────────────
   Три предмета переезжают с урока в приложение по очереди.
   Связка показана, а не описана абзацем. */

.flow {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.flow__cap {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

.flow__arrow { color: var(--blue-quiet); flex: none; }

.flow__track { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.flow__track i {
  display: inline-flex;
  align-items: center;
  height: var(--h-lang);
  padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-style: normal;
  white-space: nowrap;
  animation: flow-handoff 5.4s var(--ease-io) infinite;
}

.flow__track i:nth-child(2) { animation-delay: .5s; }
.flow__track i:nth-child(3) { animation-delay: 1s; }

@keyframes flow-handoff {
  0%, 4% { background: rgba(255, 255, 255, .16); color: #fff; transform: none; }
  12%, 34% { background: #fff; color: var(--blue); transform: translateX(6px); }
  46%, 100% { background: rgba(255, 255, 255, .16); color: #fff; transform: none; }
}

.appicon--on-blue { background: #fff; color: var(--blue); }

/* ── Секция 7. Цена ──────────────────────────────────────── */

/* Две колонки: слева довод и наглядное сравнение, справа карточка.
   Заголовок перестаёт висеть в пустоте посреди меры. */
.price-grid {
  display: grid;
  grid-template-columns: 1fr 560px;
  gap: var(--pad-panel);
  align-items: center;
}

.price-pitch > * + * { margin-top: var(--sp-6); }
.price-pitch > .t-section { margin-top: var(--sp-3); }
.price-pitch > .months { margin-top: var(--sp-9); }

/* ── Двенадцать месяцев доступа и два способа заплатить ──────
   Каждая клетка - месяц. Верхний ряд: платите двенадцать раз.
   Нижний: платите пять, семь идут сверху. Заголовок секции
   становится картинкой, а не утверждением. */

.months { display: grid; gap: var(--sp-6); }

.months__cap { font-size: 14px; font-weight: 500; color: var(--cap); }

.months__row { display: grid; gap: var(--sp-3); }

.months__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
}

.months__name { font-size: 14px; font-weight: 600; color: var(--text); }

.months__sum {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -.02em;
  color: var(--ink);
  white-space: nowrap;
}

.months__sum--old { color: var(--cap); text-decoration: line-through; }

/* Колонок столько, сколько месяцев в предложении: число ставит скрипт
   вместе с клетками. Двенадцать остаются для рядов маршрута в закрытом
   состоянии - они живут в разметке и скрипт их не трогает.

   Клетка одного размера при любом сроке: ширина считается по году, а
   короткий срок просто не занимает ряд до конца. Растянуть три клетки
   на всю ширину - значит сделать из них три плитки, и «клетка = месяц»
   перестаёт читаться. */
.months__cells {
  --gap: var(--sp-2);
  --cell: calc((100% - 11 * var(--gap)) / 12);
  display: grid;
  grid-template-columns: repeat(var(--n, 12), var(--cell));
  gap: var(--gap);
}

/* Клетка закрашена сразу: картинка читается и без движения.
   Анимация только прогоняет по ней волну подсветки.
   Радиус в долях, а не в пикселях: клетка меняет размер вместе
   с шириной блока - от 51px на планшете до 24px на телефоне,
   и фиксированные 9px превращали её там в кружок. */
.months__cells i {
  aspect-ratio: 1;
  border-radius: 25%;
  background: var(--fill, #fff);
  box-shadow: var(--sh-card);
  animation: month-pulse 7s var(--ease-io) infinite;
  animation-delay: calc(var(--start, 0ms) + var(--i, 0) * 55ms);
}


/* Помесячно: заплачено двенадцать раз - все клетки закрыты */
.months__cells--pay i { --fill: var(--cap); }

/* По акции: закрашено столько клеток, за сколько месяцев заплачено -
   класс ставит скрипт по цене предложения. Остальные пустые и в конце
   цикла вспыхивают зелёным: их вы не платите. Раньше здесь стояло
   «первые пять из двенадцати» числом, и на трёхмесячном предложении
   закрашивались все три клетки при подписи «как за 2 месяца». */
.months__cells--year i {
  --start: 1500ms;
  --fill: #fff;
  animation-name: month-free;
}

.months__cells--year i.is-paid {
  --fill: var(--blue);
  animation-name: month-pulse;
}

/* Волна поднимает клетку, а не раздувает её. Увеличение в долях
   зависит от размера: на широком экране клетка крупнее, те же
   проценты дают больше пикселей, чем зазор между клетками, и ряд
   слипается в сплошную ленту. Подъём по вертикали безопасен при
   любой ширине - по этой оси у клетки нет соседей. */
@keyframes month-pulse {
  0%, 6% { transform: translateY(0); box-shadow: var(--sh-card); }
  13%, 21% { transform: translateY(-6px); box-shadow: var(--sh-lift, var(--sh-panel)); }
  30%, 100% { transform: translateY(0); box-shadow: var(--sh-card); }
}

@keyframes month-free {
  0%, 44% { background: #fff; transform: translateY(0); box-shadow: var(--sh-card); }
  52%, 74% { background: var(--tint-green); transform: translateY(-6px); box-shadow: var(--sh-lift, var(--sh-panel)); }
  84%, 100% { background: #fff; transform: translateY(0); box-shadow: var(--sh-card); }
}

.months__note {
  justify-self: start;
  padding: var(--sp-4) var(--sp-7);
  border-radius: var(--r-pill);
  background: var(--tint-green);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
}

.months__note b {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}

/* ── Сроки карточками ────────────────────────────────────────
   Когда у предложения есть семья (0306), цена показывается не
   одной карточкой, а по карточке на срок. Секция перестаёт быть
   двухколонной: три карточки в правой колонке шириной 560 не
   живут, им нужна вся мера. Список «что внутри» одинаков для
   всех сроков и лежит под ними одним блоком - в каждой карточке
   это был бы третий раз один и тот же текст. */
.price-grid--tiers {
  grid-template-columns: 1fr;
  align-items: start;
  /* Две колонки разводились полем панели. В одну колонку это поле
     превращается в пустую полосу между подзаголовком и карточками. */
  gap: var(--sp-8);
}

/* Довод секции в одну колонку занимает всю меру, и ограничение в 62
   знака рвёт его посреди строки при свободном месте справа. */
.price-grid--tiers .t-sub { max-width: none; }

/* Кнопка «Купить от ...» подкручивает сюда. Шапка липкая, поэтому
   верхний край блока должен остановиться под ней, а не за ней. */
.tiers { scroll-margin-top: calc(var(--h-head) + var(--sp-6)); }

/* Отдельного блока сравнения при трёх сроках нет: он говорил про год,
   а год теперь один из трёх. Его картинка и его довод переехали в саму
   карточку, к своему сроку. */
.price-grid--tiers .months[data-compare] { display: none; }

/* Ряд клеток внутри карточки. Клетка одного размера во всех трёх, ряд
   просто короче - так видно и долю «за сколько из скольких», и сам срок.
   Растянуть ряд по ширине карточки нельзя: клетка квадратная, и три
   месяца превращаются в три плитки рядом с крошечными двенадцатью. */
.tier__cells {
  --gap: var(--sp-1);
  --cell: 22px;
  grid-template-columns: repeat(var(--n, 12), var(--cell));
  justify-content: center;
  margin-top: var(--sp-4);
}

/* Пустая клетка на белой карточке белой быть не может - её там просто
   нет: на сером холсте секции это работало, здесь нужен тон. Бледно-синий,
   а не серый: это тот же месяц, просто неоплаченный.

   Анимация здесь выключена, и не из-за вкуса: month-free задаёт background
   прямо в кадрах и перебивает любую заливку. Плюс три пульсирующих ряда в
   трёх карточках рядом - это уже мельтешение, а не подсказка. */
.tier__cells i {
  animation: none;
  --fill: var(--tint-blue);
  box-shadow: none;
}

.tier__cells i.is-paid { --fill: var(--blue); }

.tiers { display: grid; gap: var(--sp-8); }

.tiers__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  align-items: end;
}

.tier {
  background: var(--card);
  border-radius: var(--r-panel);
  box-shadow: var(--sh-card);
  padding: var(--sp-8) var(--sp-6) var(--sp-7);
  display: grid;
  gap: var(--sp-2);
  justify-items: center;
  text-align: center;
  position: relative;
}

/* Самый длинный срок приподнят тенью, а не рамкой: обводки в этой
   системе нет. Отметка сидит на верхнем канте, поэтому карточке
   нужен дополнительный отступ сверху. */
.tier--best { box-shadow: var(--sh-panel); padding-top: var(--sp-9); }

.tier__badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--lime);
  color: var(--lime-ink);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .01em;
  padding: 6px 14px;
  white-space: nowrap;
}

.tier__term {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -.01em;
  color: var(--ink);
}

.tier__old {
  font-size: 15px;
  font-weight: 500;
  color: var(--cap);
  text-decoration: line-through;
}

.tier__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
  white-space: nowrap;
}

.tier__month { margin: 0; font-size: 14px; color: var(--cap); }

/* Выгода на самой карточке. Раньше она стояла только в блоке сравнения
   выше, а он говорит про год - и три карточки выглядели тремя ценами
   без единого довода. Плашка та же мятная, что у заметки сравнения:
   это один и тот же довод, и выглядеть он должен одинаково. Лайм сюда
   не заходит - он занят отметкой самого длинного срока. */
.tier__save {
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--tint-green);
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
}

.tier__save b {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}

.tier .btn { width: 100%; margin-top: var(--sp-5); }

.tiers__foot { display: grid; justify-items: start; }
.tiers__foot .price-list { margin: 0 0 var(--sp-6); }

/* Список под карточками идёт в три колонки: шесть пунктов
   в столбик отодвигают мелкий шрифт на экран вниз. */
@media (min-width: 901px) {
  .tiers__foot .price-list { grid-template-columns: repeat(3, 1fr); display: grid; gap: var(--sp-3) var(--sp-8); }
}

.price-card {
  width: 560px;
  max-width: 100%;
  background: var(--card);
  border-radius: var(--r-panel);
  box-shadow: var(--sh-panel);
  padding: var(--sp-9) var(--sp-8) var(--sp-8);
}

/* В карточке период стоит под числом, а не над ним: подпись сверху
   взгляд проскакивает по дороге к крупной сумме. Сбоку он тут не
   помещается - строка цены и так почти во всю ширину карточки. */
.price-period {
  display: inline-flex;
  align-items: center;
  margin: 0 0 var(--sp-4);
  height: 40px;
  padding: 0 var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--tint-blue);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -.02em;
}

.price-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin: var(--sp-7) 0 var(--sp-4);
  white-space: nowrap;
}

.price-old {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  color: var(--cap);
  text-decoration: line-through;
}

.price-sub { font-size: 15px; line-height: 1.55; color: var(--text); }

/* Суммы в подписи выделяются, но не в один вес. Наша ставка идёт
   основным цветом, суммы помесячной оплаты остаются в цвете текста:
   иначе самым заметным числом карточки станет 59 880 ₸, то есть
   цена того способа, от которого мы как раз отговариваем. */
.price-sub b { font-weight: 700; color: var(--text); }
.price-sub b.price-sub__now { color: var(--ink); }

.price-list { list-style: none; margin: var(--sp-8) 0; padding: 0; }

.price-list li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}

.price-list svg { flex: none; }

/* Галочка списка цветом из токенов (0371): кружок - тинт, знак - синий. */
.price-list__dot { fill: var(--tint-blue); }
.price-list__tick { stroke: var(--blue); }

.price-fine { margin-top: var(--sp-5); display: grid; gap: var(--sp-2); }

.price-fine span { font-size: 13px; font-weight: 600; color: var(--cap); }

/* ── Секция 8. Как это работает ──────────────────────────── */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-9);
}

.step__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -.03em;
  color: rgba(20, 20, 27, .14);
}

.step > .t-card { margin-top: var(--sp-5); }
.step > .t-body { margin-top: var(--sp-2); }

.stores { display: flex; align-items: center; gap: var(--gap-card); margin-top: var(--sp-9); }

/* ── Секция 9. Вопросы ───────────────────────────────────── */

/* Две колонки: слева заголовок и выход на поддержку, справа сами
   вопросы. Раньше колонка вопросов была прижата влево и справа
   оставалась пустая треть меры. */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: var(--pad-panel);
  align-items: start;
}

.faq-aside > * + * { margin-top: var(--sp-6); }
.faq-aside > .t-section { margin-top: var(--sp-3); }
.faq-aside > .btn { margin-top: var(--sp-7); }
.faq-aside .t-body { max-width: 34ch; }

.faq { margin-top: calc(var(--sp-7) * -1); }

.faq details { border-top: 1px solid var(--divider); }

.faq details:last-child { border-bottom: 1px solid var(--divider); }

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: var(--sp-7) var(--sp-9) var(--sp-7) 0;
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.01em;
  color: var(--ink);
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -7px;
  border-right: 2px solid var(--cap);
  border-bottom: 2px solid var(--cap);
  transform: rotate(45deg);
  transition: transform .2s ease;
}

.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }

.faq p { padding-bottom: var(--sp-7); font-size: 16px; max-width: 62ch; }

/* ── Закрывающий блок ────────────────────────────────────── */

.closing {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  justify-items: center;
  text-align: center;
}

.closing > * + * { margin-top: var(--sp-7); }

.closing .t-sub { max-width: 54ch; }

/* Атрибут hidden проигрывает любому display в стилях, и это ловушка: у
   .months и .tiers стоит собственный display, поэтому «скрытые» блоки
   оставались на экране. Пустой контейнер сроков занимал вторую колонку
   секции цены и сталкивал карточку на следующий ряд, а блок сравнения
   висел с пустыми числами, когда сравнивать не с чем. */
[hidden] { display: none !important; }

/* ── Липкая кнопка на телефоне ───────────────────────────── */

.is-sheet-open .sticky-buy { display: none; }

.sticky-buy {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  padding: var(--sp-3) var(--pad-page) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: rgba(243, 242, 245, .78);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  transition: transform var(--base) var(--glide);
}

/* Пока карточки сроков на экране, полоса уезжает вниз. Она зовёт туда, где
   человек уже стоит, и вторая кнопка покупки рядом с тремя «Выбрать» - это
   четвёртый вариант выбора, которого нет. Уезжает, а не прячется: дорогу
   обратно видно. */
.sticky-buy.is-away {
  transform: translateY(110%);
  pointer-events: none;
}

/* ── Шторка оплаты ───────────────────────────────────────── */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(20, 20, 27, .34);
  display: none;
  align-items: flex-end;
  justify-content: center;
}

.scrim.is-open { display: flex; }

.sheet {
  width: 390px;
  max-width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--card);
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  padding: var(--sp-3) var(--sp-6) calc(var(--sp-8) + env(safe-area-inset-bottom));
  scrollbar-width: none;
}

.sheet::-webkit-scrollbar { display: none; }

/* ── Оплата вне телефона: окно, а не шторка ──────────────────
   Шторка снизу с язычком - телефонный жест. Уже на планшете её
   не тянут пальцем снизу, а форму заполняют как на компьютере.
   Вид включается классом, а не медиазапросом: так его можно
   показать в галерее состояний на любой ширине, а на живой
   странице класс ставит скрипт по ширине окна. */

.scrim--modal {
  align-items: center;
  padding: var(--sp-9);
}

.scrim--modal .sheet {
  position: relative;
  width: 560px;
  max-height: 90%;
  border-radius: var(--r-panel);
  box-shadow: var(--sh-panel);
  padding: var(--sp-8) var(--sp-9);
  animation: modal-in var(--base) var(--ease);
}

/* ── Форма в окне: два поля в ряд ─────────────────────────────
   Столбец из трёх полей - приём телефона, где ширины нет, а
   высоты сколько угодно. В окне наоборот: ширина есть, а высота
   ограничена экраном, и столбец упирается в него и просит
   прокрутку. Имя и телефон встают в один ряд, форма становится
   ниже на целое поле и помещается на невысоком экране. */

/* minmax(0, 1fr), а не 1fr: голое 1fr - это minmax(auto, 1fr),
   и колонка не сжимается уже своего содержимого. Поле телефона
   с приставкой и подписью распирало правую колонку, колонки
   переставали помещаться в окно и съедали поле справа. */
.scrim--modal .sheet .step-body.is-on[data-step="form"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--sp-4);
  align-items: start;
}

.scrim--modal [data-step="form"] > * { grid-column: 1 / -1; min-width: 0; }
.scrim--modal [data-step="form"] > [data-field="name"] { grid-column: 1; }
.scrim--modal [data-step="form"] > [data-field="phone"] { grid-column: 2; }

/* Вертикаль плотнее: в окне за высоту идёт борьба */
.scrim--modal .field { margin-top: var(--sp-4); }
.scrim--modal .field__label { margin-bottom: var(--sp-1); }
.scrim--modal .consent { margin: var(--sp-5) 0 var(--sp-4); }

.scrim--modal .sheet__grip { display: none; }

.scrim--modal .sheet-close { display: grid; }

.scrim--modal .sheet h3 { padding-right: var(--sp-10); }

/* Отступ выше держит заголовок подальше от кнопки закрытия. Но выравненный
   по центру текст центрируется внутри уже смещённой коробки и уезжает влево
   на половину этого отступа — заметно на «Оплачено». Зеркалим отступ только
   там, где текст по центру: у остальных заголовков он левый и сдвигать их
   нельзя. */
.scrim--modal .sheet h3.center { padding-left: var(--sp-10); }

/* Kaspi открывается по кнопке только на телефоне: на планшете и
   компьютере код сканируют телефоном, а страница ждёт платёж */
.scrim--modal [data-only="mobile"] { display: none; }
.scrim--modal [data-only="desktop"] { display: flex; }

@keyframes modal-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: none; }
}

/* Шторка выезжает снизу - это её родной жест */
[data-sheet].is-open:not(.scrim--modal) .sheet { animation: sheet-up var(--base) var(--glide); }

@keyframes sheet-up {
  from { transform: translateY(100%); }
  to { transform: none; }
}

.sheet__grip {
  width: 44px;
  height: 5px;
  border-radius: var(--r-pill);
  background: rgba(20, 20, 27, .14);
  margin: 0 auto var(--sp-7);
}

/* Крестик - только для десктопного окна: на телефоне шторку
   закрывают жестом и затемнением, кнопка там лишняя. */
.sheet-close {
  display: none;
  position: absolute;
  top: var(--sp-6);
  right: var(--sp-6);
  width: var(--h-chip);
  height: var(--h-chip);
  border: 0;
  border-radius: 50%;
  background: var(--inset);
  color: var(--text);
  place-items: center;
  cursor: pointer;
  transition: background-color var(--fast) var(--ease);
}

.sheet-close:hover { background: rgba(20, 20, 27, .09); color: var(--ink); }

.sheet h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 23px;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1.25;
}

.sheet .step-body { display: none; }

.sheet .step-body.is-on { display: block; }

/* Поля */
.field { margin-top: var(--sp-5); }

.field__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--cap);
  margin-bottom: var(--sp-2);
  display: flex;
  gap: var(--sp-2);
}

.field__box {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: var(--h-field);
  padding: 0 var(--sp-5);
  border-radius: var(--r-inset);
  background: var(--inset);
}

.field__box input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}

.field__box input::placeholder { color: var(--cap); }

.field__prefix {
  display: inline-flex;
  align-items: center;
  height: var(--h-lang);
  padding: 0 var(--sp-3);
  border-radius: var(--r-pill);
  background: rgba(20, 20, 27, .06);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  flex: none;
}

.field__box:focus-within { box-shadow: inset 0 0 0 2px var(--blue-quiet); }

.field__hint { margin-top: var(--sp-2); font-size: 13px; font-weight: 500; color: var(--cap); }

.field__hint:empty { display: none; }

/* Заголовок группы полей. В форме две разные вещи: чей аккаунт открыть и как
   связаться с плательщиком. Без подписи они читаются одним списком, и человек
   вводит свой номер там, где нужен номер ребёнка. Черта сверху — граница
   между группами, а не украшение. */
.form-group {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--divider);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.form-group + .field { margin-top: var(--sp-4); }

/* Поле, ошибка в котором дороже остальных: доступ уйдёт чужому аккаунту, и
   забрать его можно будет только руками. Красить строку бесполезно — глаз
   всё равно читает её как первый пункт списка. Поэтому вопрос поднят в
   заголовок шторки, а цена ушла в подпись над ним: шторка спрашивает одно,
   остальное — формальности под чертой. Своей подписи у поля больше нет, её
   работу делает заголовок. */
/* Что именно покупают - первое, что должно быть видно в шторке оплаты.
   Строка была подписью в тринадцать пикселей серым: человек открывал
   форму и не находил в ней ни срока, ни суммы. Теперь это плашка, а
   сумма в ней - самое крупное число на экране до кнопки. */
.sheet-kicker {
  /* Плашка по содержимому, а не во всю ширину: справа вверху шторки сидит
     кнопка закрытия, и полоса заезжала под неё. */
  display: inline-flex;
  /* Шторка - колонка, и её элементы тянутся по ширине: без этого плашка
     всё равно растягивалась, просто упиралась в max-width. */
  align-self: flex-start;
  width: fit-content;
  max-width: calc(100% - 52px);
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-5);
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--r-pill);
  background: var(--tint-blue);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.sheet-kicker [data-price-effective] {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.field--first { margin-top: var(--sp-5); }

/* «Оплачено»: вместо кода — чей доступ и до какого числа. Плашка та же, что
   была под код: место в шторке занято тем же по смыслу — тем, что человек
   пришёл сюда узнать. */
.granted {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  border-radius: var(--r-tile);
  background: var(--inset);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  text-align: center;
}

.granted__label { font-size: 13px; font-weight: 600; color: var(--cap); }

.granted__who {
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
  word-break: break-all;
}

.granted__until { font-size: 13px; font-weight: 500; color: var(--cap); }

/* ── «Где это посмотреть» ────────────────────────────────────────────
   Человек часто не помнит, чем регистрировался, и вводит наугад — а
   наугад здесь означает чужой аккаунт. Подсказка показывает три места,
   где контакт видно: два экрана входа и профиль. Это рисунки, а не
   снимки: снимок 780×1688 в панели шириной с телефон нечитаем. */
.hint-help {
  margin-top: var(--sp-2);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hint-help:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

.whereis {
  margin-top: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-tile);
  background: var(--inset);
}

.whereis[hidden] { display: none; }

.whereis__lede { margin: 0 0 var(--sp-5); font-size: 14px; line-height: 1.5; color: var(--ink); }

.whereis__row { display: flex; gap: var(--sp-3); align-items: stretch; }

.mini { margin: 0; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }

/* Три рисунка держат одну высоту: разная высота читалась бы как разная
   важность, а они равнозначны — это просто три места, где смотреть. */
.mini__screen { flex: 1 1 auto; }

.mini__screen {
  background: var(--card);
  border-radius: 12px;
  padding: 8px 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  box-shadow: 0 2px 8px -4px rgba(20, 20, 27, .18);
}

.mini__bar { width: 22px; height: 3px; border-radius: var(--r-pill); background: var(--divider); margin: 0 auto 2px; }
.mini__h { font-size: 9px; font-weight: 700; color: var(--ink); }
.mini__lbl { font-size: 7px; font-weight: 600; color: var(--cap); }

.mini__field {
  height: 16px;
  border-radius: 6px;
  background: var(--inset);
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 4px;
  overflow: hidden;
}

/* Подсвечено ровно то, что нужно переписать в форму. */
.mini__field--on { background: var(--blue-quiet); }
.mini__pref { font-size: 7px; font-weight: 700; color: var(--blue); }
.mini__val { font-size: 7px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.mini__btn {
  margin-top: 2px;
  height: 15px;
  border-radius: var(--r-pill);
  background: var(--blue);
  color: var(--card);
  font-size: 7px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.mini__who { display: flex; align-items: center; gap: 5px; }
.mini__ava {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--inset); color: var(--ink);
  font-size: 8px; font-weight: 700;
  display: grid; place-items: center; flex: none;
}
.mini__whotext { display: flex; flex-direction: column; min-width: 0; }
.mini__whotext b { font-size: 8px; color: var(--ink); }
.mini__contact {
  font-size: 7px; font-weight: 600; color: var(--blue);
  background: var(--blue-quiet); border-radius: 4px; padding: 1px 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini__chips { display: flex; gap: 3px; }
.mini__chips span { width: 22px; height: 8px; border-radius: var(--r-pill); background: var(--inset); }
.mini__card { height: 14px; border-radius: 6px; background: var(--inset); }

/* Две строки под каждым рисунком зарезервированы всегда: иначе подпись
   длиной в три строки укорачивает свой экран, и три равнозначных места
   выглядят разной важности. */
.mini figcaption {
  font-size: 11px;
  line-height: 1.3;
  min-height: 2.6em;
  color: var(--cap);
  text-align: center;
}

.whereis__note { margin: var(--sp-5) 0 0; font-size: 13px; line-height: 1.5; color: var(--cap); }

.whereis__close {
  margin-top: var(--sp-4);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--blue);
  cursor: pointer;
}

.field__hint.is-error { color: var(--red); font-weight: 600; }

/* Поле с ошибкой: заливка теплеет, рамки по-прежнему нет */
.field.is-error .field__box { background: color-mix(in oklab, var(--red) 8%, var(--inset)); }

.field.is-error .field__box:focus-within { box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--red) 26%, transparent); }

.consent.is-error input { box-shadow: inset 0 0 0 2px var(--red); }

/* ── Teacher Pro: ответ проверки учителя (0371) ─────────────
   Стоит под полем «Кому открыть» и говорит, можно ли платить:
   зелёная - номер учителя, янтарная - заявка у школы, синяя -
   сначала стать учителем, со шагами и кнопками сторов из героя. */
.tp-check { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
.tp-check[hidden] { display: none; }

.tp-res {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-4);
  border-radius: var(--r-inset);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
}
.tp-res b { display: block; font-size: 15px; font-weight: 700; color: var(--ink); }
.tp-res__icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--card);
}
.tp-res--ok { background: var(--tint-green); }
.tp-res--ok .tp-res__icon { background: var(--green); }
.tp-res--wait { background: var(--tint-amber); }
.tp-res--wait .tp-res__icon { background: var(--amber); }
.tp-res--no { background: var(--tint-blue); }
.tp-res--no .tp-res__icon { background: var(--blue); }
.tp-res--busy { grid-template-columns: 1fr; background: var(--inset); }
.tp-res--busy b { font-weight: 600; color: var(--text); }

.tp-steps { margin: 0; padding-left: 20px; display: grid; gap: var(--sp-2); font-size: 14px; line-height: 1.4; color: var(--ink); }
.tp-stores { gap: var(--sp-3); }
.tp-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--cap); }

/* ── Филиал ученика (0309) ────────────────────────────────────
   Вопрос «учится в центре CES?» и выбор одного из 26 филиалов.
   Ответ «да / нет» - две белые карточки с рамкой и пустым кружком:
   кружок читается как «выбери одно». Серая плашка, которая стояла
   здесь раньше, до ответа выглядела выключенной кнопкой. Без ответа
   не выбрана ни одна карточка, и кнопка оплаты ждёт. */

/* Подпись вопроса тёмная: это вопрос, а не подпись к полю */
.field__label--ask { font-size: 15px; font-weight: 700; color: var(--ink); }

.choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.choice__opt {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: var(--h-field);
  padding: 0 var(--sp-4);
  border: 0;
  border-radius: var(--r-inset);
  background: var(--card);
  box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--ink) 16%, transparent);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background var(--fast), box-shadow var(--fast);
}
.choice__opt i {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--cap);
  transition: box-shadow var(--fast);
}
.choice__opt.is-on { background: var(--tint-blue); box-shadow: inset 0 0 0 2px var(--blue); }
.choice__opt.is-on i { box-shadow: inset 0 0 0 6px var(--blue); }
.choice__opt:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.field.is-error .choice__opt { box-shadow: inset 0 0 0 1.5px var(--red); }

/* Поле-кнопка: выглядит как поле ввода, открывает список */
.field__box--pick {
  width: 100%;
  border: 0;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.field__box--pick.is-empty { color: var(--cap); }
.field__box--pick > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.field__box--pick b,
.field__box--pick small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field__box--pick b { font-weight: 500; }
.field__box--pick small { font-size: 13px; color: var(--cap); }
.field__box--pick small:empty { display: none; }
/* С адресом поле в две строки: высота по содержимому, но не ниже поля */
.field__box--pick:not(.is-empty) { height: auto; min-height: var(--h-field); padding-block: var(--sp-3); }
.field__box--pick:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--blue-quiet); }
/* Стрелка вниз: поле открывает список, а не ждёт набора текста */
.field__chevron { flex: none; color: var(--text); }

.branch-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-top: var(--sp-4);
}
.branch-opt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  border: 0;
  border-radius: var(--r-inset);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.branch-opt b { font-size: 15px; font-weight: 600; color: var(--ink); }
.branch-opt span { font-size: 13px; color: var(--cap); }
.branch-opt:hover { background: var(--inset); }
.branch-opt.is-on { background: var(--tint-blue); }
.branch-opt:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.branch-empty { margin-top: var(--sp-5); font-size: 14px; color: var(--text); text-align: center; }
.branch-none { margin-top: var(--sp-5); }

.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin: var(--sp-7) 0 var(--sp-6);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  cursor: pointer;
}

.consent input {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  border-radius: 7px;
  background: var(--inset);
  box-shadow: inset 0 0 0 2px rgba(20, 20, 27, .12);
  flex: none;
  cursor: pointer;
}

.consent input:checked {
  background: var(--blue);
  box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 15px;
  background-position: center;
  background-repeat: no-repeat;
}

/* QR */
.qr-plate {
  background: #fff;
  border-radius: var(--r-inset);
  box-shadow: var(--sh-card);
  padding: var(--sp-6);
  width: fit-content;
  margin: var(--sp-7) auto 0;
}

.qr-plate svg { display: block; width: var(--sz-qr); height: var(--sz-qr); }

.pay-sum {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -.02em;
  color: var(--ink);
  text-align: center;
  margin-top: var(--sp-7);
}

.pay-order {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--cap);
  text-align: center;
  margin-top: var(--sp-2);
  letter-spacing: .04em;
}

.timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.pay-how { text-align: center; margin-top: var(--sp-3); font-size: 14px; color: var(--cap); }

/* Что показывать под кодом, решает ширина экрана: на телефоне
   кнопка в приложение, на компьютере - строка ожидания. Правила
   привязаны к живой шторке, кадры 390 в галерее не задеты. */
[data-only="desktop"] { display: none; }

.pay-wait {
  /* Без display строка ниже не работала: точки уезжали на свою строку, а
     текст прижимался влево. align-items/justify-content/gap написаны ровно
     под этот ряд — не хватало только display. */
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.dots--sm { height: 14px; gap: var(--sp-2); }

.dots--sm i { width: 8px; height: 8px; }

.btn-cap { text-align: center; margin-top: var(--sp-3); font-size: 13px; font-weight: 500; color: var(--cap); }

.sheet-cancel { margin-top: var(--sp-5); text-align: center; }

.sheet-lede { margin: var(--sp-3) auto 0; text-align: center; }

.sheet .stack { margin-top: var(--sp-7); }

.sheet .stack > * + * { margin-top: var(--sp-3); }

/* Ожидание */
.waiting { padding: var(--sp-11) 0; text-align: center; }

.waiting > h3 { margin-top: var(--sp-7); }
.waiting > p { margin-top: var(--sp-3); }

.dots { display: flex; justify-content: center; gap: var(--sp-3); height: 22px; align-items: center; }

.dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(20, 20, 27, .18);
  animation: dot-lift 1.2s ease-in-out infinite;
}

.dots i:nth-child(2) { animation-delay: .16s; }
.dots i:nth-child(3) { animation-delay: .32s; }

@keyframes dot-lift {
  0%, 60%, 100% { transform: translateY(0); background: rgba(20, 20, 27, .18); }
  30% { transform: translateY(-8px); background: rgba(20, 20, 27, .34); }
}

@media (prefers-reduced-motion: reduce) {
  .dots i { animation: none; }
  .dots i:nth-child(2) { transform: translateY(-8px); background: rgba(20, 20, 27, .34); }

  .flip__in, .skill, .board__row,
  .streak i, .rd, .ava--a, .duel__win, .months__cells i, .flow__track i,
  .week i:nth-child(3) { animation: none; }
  .offer__old::after { animation: none; transform: scaleX(1); }
  .scrim--modal .sheet { animation: none; }
  .ring-arc, .bar > i, .week i { transition: none; }
  .has-reveal .panel-dark .ring-arc { stroke-dashoffset: 98; }
  .has-reveal .panel-dark .bar > i { width: 64%; }
  .has-reveal .panel-dark .week i { transform: none; }
  .duel__win { opacity: 1; transform: none; }
  .has-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Итог оплаты */
.badge-round {
  width: var(--sz-badge);
  height: var(--sz-badge);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: var(--sp-2) auto var(--sp-7);
}

.badge-round.is-green { background: var(--green); color: var(--card); }
.badge-round.is-lime { background: var(--lime-soft); color: var(--lime-ink); }

/* Деньги не тронуты - знак нейтральный, тревожить незачем */
.badge-round.is-neutral { background: var(--inset); color: var(--text); }

/* Единственный красный экран потока: банк отклонил операцию */
.badge-round.is-red { background: var(--red); }

/* ── Код доступа ────────────────────────────────────────────────
   Код и копирование - один объект, а не плашка плюс кнопка.
   Жмут по самому коду, подпись под ним объясняет как. */

.promo {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  width: 100%;
  margin-top: var(--sp-7);
  padding: var(--sp-7) var(--sp-5);
  border: 0;
  border-radius: var(--r-inset);
  background: var(--inset);
  cursor: pointer;
  font-family: inherit;
  transition: background-color var(--fast) var(--ease);
}

.promo:hover { background: rgba(20, 20, 27, .07); }

.promo:active { transform: translateY(1px); }

.promo__code {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--ink);
}

.promo__hint {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--cap);
}

.promo.is-done .promo__hint { color: var(--green); }

/* ── Забрать приложение ──────────────────────────────────────
   Вторичный блок на вложенной заливке: белые пилюли магазинов
   на белом фоне модалки почти не читались. */

.getapp {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4) var(--sp-4);
  align-items: center;
  margin-top: var(--sp-7);
  padding: var(--sp-6);
  border-radius: var(--r-inset);
  background: var(--inset);
}

.getapp__text { display: grid; gap: 2px; }

.getapp__text b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.01em;
  color: var(--ink);
}

.getapp__text span { font-size: 13px; font-weight: 500; color: var(--cap); }

.getapp__links {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}

.store {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: var(--h-btn-sm);
  border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: var(--sh-card);
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.store:hover { transform: translateY(-1px); box-shadow: var(--sh-lift); }

.facts { list-style: none; margin: var(--sp-7) 0 0; padding: 0; display: grid; gap: var(--sp-4); }

.facts li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}

/* 2px - оптическая подгонка глифа к первой строке, а не шаг ритма. */
.facts svg { flex: none; margin-top: 2px; }

/* Номер не рвётся посреди групп цифр даже в узкой шторке */
.facts [data-echo="phone"] { white-space: nowrap; }

/* ── Кадры-галереи ───────────────────────────────────────── */

.gallery { padding: var(--sp-10) 0 var(--sp-11); }

/* Ритм галереи держится только верхними отступами: схлопывание
   соседних margin не участвует в расчёте. */
.gallery > * + * { margin-top: var(--sp-7); }
.gallery > .t-eyebrow + h1 { margin-top: var(--sp-3); }
.gallery > .cards-3,
.gallery > .frames,
.gallery > .frame-block { margin-top: var(--sp-9); }

.gallery__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cap);
  margin-bottom: var(--sp-4);
}

.frame-block + .frame-block { margin-top: var(--sp-10); }

.frames {
  display: flex;
  gap: var(--sp-8);
  flex-wrap: wrap;
  justify-content: center;
}

.frame-390 {
  width: 390px;
  height: 844px;
  border-radius: var(--r-panel);
  overflow: hidden;
  position: relative;
  box-shadow: var(--sh-panel);
  background-color: var(--bg-base);
  background-image:
    radial-gradient(420px 300px at 40% -40px, rgb(197 214 242), rgba(197, 214, 242, 0) 70%),
    radial-gradient(300px 240px at 112% 40px, rgb(214 229 241), rgba(214, 229, 241, 0) 68%),
    radial-gradient(340px 260px at -14% 88%, rgb(246 214 193), rgba(246, 214, 193, 0) 68%),
    radial-gradient(300px 240px at 116% 100%, rgb(208 168 232), rgba(208, 168, 232, 0) 66%),
    linear-gradient(180deg, var(--bg-base), var(--bg-mid) 50%, var(--bg-base));
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.frame-390 .scrim { position: absolute; display: flex; }

.frame-390 .sheet { max-height: 96%; }

.frame-desk {
  width: 700px;
  height: 840px;
  border-radius: var(--r-panel);
  overflow: hidden;
  position: relative;
  box-shadow: var(--sh-panel);
  background-color: var(--bg-base);
  background-image:
    radial-gradient(520px 340px at 40% -40px, rgb(197 214 242), rgba(197, 214, 242, 0) 70%),
    radial-gradient(380px 280px at 108% 40px, rgb(214 229 241), rgba(214, 229, 241, 0) 68%),
    radial-gradient(420px 300px at -10% 92%, rgb(246 214 193), rgba(246, 214, 193, 0) 68%),
    radial-gradient(380px 280px at 112% 100%, rgb(208 168 232), rgba(208, 168, 232, 0) 66%),
    linear-gradient(180deg, var(--bg-base), var(--bg-mid) 50%, var(--bg-base));
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.frame-desk .scrim { position: absolute; display: flex; }

/* Пара «телефон и окно» для одного состояния */
.pair {
  display: flex;
  gap: var(--sp-6);
  align-items: flex-start;
  flex-wrap: wrap;
}

.pair__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cap);
  margin-bottom: var(--sp-3);
}

.frame-1440 {
  width: 1440px;
  padding: var(--sp-11) 0;
  border-radius: var(--r-panel);
  box-shadow: var(--sh-panel);
  background-color: var(--bg-base);
  background-image:
    radial-gradient(900px 520px at 44% -120px, rgb(197 214 242), rgba(197, 214, 242, 0) 70%),
    radial-gradient(620px 420px at 108% 40px, rgb(214 229 241), rgba(214, 229, 241, 0) 68%),
    radial-gradient(680px 460px at -12% 92%, rgb(246 214 193), rgba(246, 214, 193, 0) 68%),
    radial-gradient(620px 440px at 112% 100%, rgb(208 168 232), rgba(208, 168, 232, 0) 66%),
    linear-gradient(180deg, var(--bg-base), var(--bg-mid) 50%, var(--bg-base));
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.scroller-1440 { overflow-x: auto; padding-bottom: var(--sp-2); }

/* ── Телефон 390 ─────────────────────────────────────────── */

@media (max-width: 900px) {
  .hero {
    margin-top: var(--sp-8);
    padding: var(--pad-panel) var(--sp-6);
    grid-template-columns: 1fr;
  }

  .hero__text { display: contents; }

  .hero__text > .t-eyebrow { order: 1; }
  .hero__text > .t-hero { order: 2; margin-top: var(--sp-4); }
  .hero__device { order: 3; margin-top: var(--sp-8); }
  .hero__text > .t-sub { order: 4; margin-top: var(--sp-8); }
  .hero__text > .hero-tags { order: 5; margin-top: var(--sp-5); }
  .hero__text > .offer { order: 6; margin-top: var(--sp-7); }
  .hero__cta { order: 7; margin-top: var(--sp-6); gap: var(--sp-6); }
  .hero__text > .hero__note { order: 8; margin-top: var(--sp-5); }
  .hero__text > .trust { order: 9; gap: var(--sp-7); margin-top: var(--sp-7); }

  .offer__now { font-size: 36px; }
  .offer__old { font-size: 22px; }
  .offer__row { gap: var(--sp-4); }
  .offer__unit { height: 36px; padding: 0 var(--sp-4); font-size: 16px; }
  .price-period { height: 34px; padding: 0 var(--sp-4); font-size: 17px; }
  .hero-tags li { height: 36px; padding: 0 var(--sp-4); font-size: 14px; }

  .hero__device img { width: 262px; transform: rotate(0deg); }

  .trust b { font-size: 20px; }

  .cards-3, .cards-2, .steps { grid-template-columns: 1fr; gap: var(--gap-card); }

  .card-tall { padding: var(--pad-card); }

  .panel-dark { grid-template-columns: 1fr; gap: var(--sp-8); }
  .report li { font-size: 16px; max-width: none; }

  .band-blue { grid-template-columns: 1fr; gap: var(--sp-7); }
  .band-blue__text p { font-size: 15px; }
  .band-blue .btn { width: 100%; }
  .band-blue__act { justify-items: stretch; }
  .flow { gap: var(--sp-3); }
  .flow__arrow { transform: rotate(90deg); }

  .rail { gap: var(--sp-6); }

  .price-grid { grid-template-columns: 1fr; gap: var(--sp-9); }
  .tiers__row { grid-template-columns: 1fr; gap: var(--sp-6); }
  /* На телефоне шапка ниже - и запас под ней тоже. */
  .tiers { scroll-margin-top: calc(var(--h-head-sm) + var(--sp-5)); }
  .tier--best { margin-top: var(--sp-3); }
  .price-pitch > .months { margin-top: var(--sp-8); }
  .months__head { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
  .months__sum { font-size: 19px; }
  .months__cells { --gap: var(--sp-1); }
  .months__note { padding: var(--sp-3) var(--sp-6); font-size: 14px; }

  /* 560 - ширина правой колонки двухколоночной сетки. Когда сетка
     складывается в одну колонку, эту ширину задаёт сама колонка,
     иначе карточка стоит уже полосы и справа остаётся пустота. */
  .price-card { width: 100%; padding: var(--sp-8) var(--sp-6) var(--sp-7); }
  .price-list li { font-size: 15px; }

  .card-scene { padding: var(--pad-card) var(--pad-card) var(--sp-8); }

  .steps { gap: var(--sp-8); }
  .step__num { font-size: 44px; }
  .stores { flex-direction: column; margin-top: var(--sp-8); }
  .stores .btn { width: 100%; }

  .faq-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .faq-aside .t-body { max-width: none; }
  .faq-aside > .btn { width: 100%; }
  .faq { margin-top: 0; }
  .faq summary { font-size: 17px; padding: var(--sp-6) var(--sp-9) var(--sp-6) 0; }
  .faq p { padding-bottom: var(--sp-6); }

  .closing > * + * { margin-top: var(--sp-6); }

  .sticky-buy { display: block; }

  .gallery { padding: var(--sp-9) 0 var(--sp-10); }
  .gallery > .cards-3,
  .gallery > .frames,
  .gallery > .frame-block { margin-top: var(--sp-8); }

  .frame-390 { width: 100%; max-width: 390px; }
  .frame-1440 { border-radius: var(--r-card); padding: var(--sp-9) 0; }
  .frame-block + .frame-block { margin-top: var(--sp-9); }
}

/* ── Планшет 601–900 ──────────────────────────────────────────
   Ниже 900 всё складывается в одну колонку - это телефонный приём.
   На планшете от него карточки с иллюстрациями растягиваются во всю
   меру, и рисунок повисает посреди пустой плашки. Сетки карточек
   держим многоколоночными, в одну колонку уходит только телефон. */

@media (min-width: 601px) and (max-width: 900px) {
  .cards-3, .steps { grid-template-columns: repeat(3, 1fr); }
  .cards-2 { grid-template-columns: 1fr 1fr; }
  .card-tall { padding: var(--sp-8); }

  /* Тесный зазор - приём телефона, где клетка мелкая. Здесь клетка
     крупная, и ряд без нормального зазора читается сплошной лентой. */
  .months__cells { --gap: var(--sp-2); }

  /* Цепочка идёт в строку, значит и стрелка смотрит вдоль строки */
  .flow__arrow { transform: none; }
}

/* ── Телефон: цепочка «урок → приложение» ─────────────────────
   В строку она здесь не помещается и рассыпается переносами:
   стрелка отрывается от своего звена, плашки уезжают влево.
   Ставим цепочку колонкой по центру - пять звеньев, каждое на
   своей линии, стрелки между ними смотрят вниз. */

@media (max-width: 600px) {
  .flow {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .flow__track { justify-content: center; }
}