/* 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__label { font-size: 13px; font-weight: 600; color: var(--cap); }

.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);
  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__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 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-2); }

/* Клетка закрашена сразу: картинка читается и без движения.
   Анимация только прогоняет по ней волну подсветки.
   Радиус в долях, а не в пикселях: клетка меняет размер вместе
   с шириной блока — от 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 i:nth-child(1) { --i: 0; }
.months__cells i:nth-child(2) { --i: 1; }
.months__cells i:nth-child(3) { --i: 2; }
.months__cells i:nth-child(4) { --i: 3; }
.months__cells i:nth-child(5) { --i: 4; }
.months__cells i:nth-child(6) { --i: 5; }
.months__cells i:nth-child(7) { --i: 6; }
.months__cells i:nth-child(8) { --i: 7; }
.months__cells i:nth-child(9) { --i: 8; }
.months__cells i:nth-child(10) { --i: 9; }
.months__cells i:nth-child(11) { --i: 10; }
.months__cells i:nth-child(12) { --i: 11; }

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

/* По акции: заплачено пять раз, семь клеток остаются пустыми
   и в конце цикла вспыхивают зелёным — их вы не платите */
.months__cells--year i { --start: 1500ms; }
.months__cells--year i:nth-child(-n + 5) { --fill: var(--blue); }

.months__cells--year i:nth-child(n + 6) {
  --fill: #fff;
  animation-name: month-free;
}

/* Волна поднимает клетку, а не раздувает её. Увеличение в долях
   зависит от размера: на широком экране клетка крупнее, те же
   проценты дают больше пикселей, чем зазор между клетками, и ряд
   слипается в сплошную ленту. Подъём по вертикали безопасен при
   любой ширине — по этой оси у клетки нет соседей. */
@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);
}

.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-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin: var(--sp-7) 0 var(--sp-3);
  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); }

.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; }

.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; }

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

.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);
}

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

.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); }

/* 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; }

.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); }

.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 {
  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); }
.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); }
  .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); }
  .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; }
}