/* Zuko , лендинг.
   Направление: современный детский продукт, узбекские мотивы взяты как приёмы.

   Мотивы и их работа:
   бодом (миндаль сюзане) , форма кадра для портретов маскотов
   айван (арка с острым верхом) , форма кадра для горизонтальных сцен
   панджара (решётка гирих) , фактура песочных блоков, только их
   гирих (ромб) , бейдж номера шага
   икат (абр) , одна лента-разделитель под первым экраном, ровно один раз

   Смысл цвета:
   гранат  только клик
   бирюза  только информация
   кобальт майолики , конструкция: линии, номера шагов, тёмная врезка, подвал
   шафран  не используется в интерфейсе, он живёт внутри картинок

   Система, из которой нельзя выходить:
   поверхность одна   .card, у неё рамка и никакой тени
   тень одна          --shadow, только под картинками
   рамка кадра две    --bodom и --ayvan
   сетка одна         .grid + .grid--2/3/4
   список один        .rows, с иконкой или без
   радиуса два        --r, --r-sm, плюс 999px для пилюль
   объём один         только у большой кнопки */

:root {
  --paper:#FBF6EE;
  --sand:#F4E7D1;
  --card:#FFFFFF;
  --ink:#15233D;
  --ink-soft:#4A5776;
  --cobalt:#1B4A8F;
  --cobalt-deep:#12294F;
  --pom:#C8102E;
  --pom-deep:#8E0B20;
  --turq:#1F9E93;
  --turq-deep:#16786F;
  --saf:#E8A317;
  --saf-deep:#B9770E;
  --line:rgba(21,35,61,.13);
  --shadow:0 8px 22px rgba(21,35,61,.10);
  --shadow-lift:0 16px 34px rgba(21,35,61,.15);
  --r:20px;
  --r-sm:10px;
  --bodom:50% 50% 50% 50% / 58% 58% 42% 42%;
  --ayvan:50% 50% var(--r) var(--r) / 34% 34% var(--r) var(--r);
  --gap:clamp(16px,2.6vw,28px);
  --pad:clamp(20px,2.6vw,28px);
  --font-display:'Rubik','Trebuchet MS',system-ui,sans-serif;
  --font-body:'Golos Text',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--font-body);
  font-size:clamp(1rem,.96rem + .3vw,1.0625rem);
  line-height:1.6;
  color:var(--ink);
  background-color:var(--paper);
  -webkit-text-size-adjust:100%;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--cobalt)}
a:hover{color:var(--pom)}
h1,h2,h3{margin:0;line-height:1.16;letter-spacing:-.015em;text-wrap:balance}
p,li,dd{text-wrap:pretty}
p{margin:0}
ul,ol,dl,dd,figure,blockquote{margin:0;padding:0}
li{list-style:none}

.wrap{width:min(1080px,100%);margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
main>section{padding-block:clamp(52px,7vw,88px)}
main>section.hero{padding-block:clamp(24px,4vw,44px) clamp(40px,6vw,68px)}

/* Ритм фона: два тона, песок и бумага, по очереди. Панджара живёт только
   на песочных блоках, бумага гладкая: так блоки отличаются фактурой,
   а не только цветом. deslop-ignore 06 */
.tint{
  background-color:var(--sand);
  background-image:
    repeating-linear-gradient(45deg,rgba(27,74,143,.055) 0 1px,transparent 1px 36px), /* фактура панджара, deslop-ignore 06 */
    repeating-linear-gradient(-45deg,rgba(27,74,143,.055) 0 1px,transparent 1px 36px); /* deslop-ignore 06 */
}

.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:20;background:var(--card);padding:10px 16px;border-radius:var(--r-sm)}
.noscript{padding:16px;text-align:center;font-weight:500}
:where(a,button,[tabindex]):focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;border-radius:var(--r-sm)}

/* ---------- шапка ---------- */
.bar{position:sticky;top:0;z-index:10;background:var(--paper);border-bottom:1px solid var(--line)}
.bar__in{display:flex;align-items:center;gap:16px;padding-block:8px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:0 0 auto;min-height:44px}
/* Знак повторяет форму бодома, как и кадры маскотов. */
.logo__mark{width:32px;height:38px;border-radius:var(--bodom);background:var(--cobalt);color:#fff;
  display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:1rem}
.logo__word{font-family:var(--font-display);font-weight:700;font-size:1.28rem;letter-spacing:-.03em}
/* Меню на коротком лендинге почти не работает и теснит шапку.
   Показываем только там, где для него есть настоящее место. */
.bar__nav{display:none;gap:24px;margin-inline-start:auto;font-size:.95rem}
.bar__nav a{text-decoration:none;color:var(--ink-soft)}
.bar__nav a:hover{color:var(--cobalt)}
.bar__right{display:flex;align-items:center;gap:10px;margin-inline-start:auto}
.bar__nav+.bar__right{margin-inline-start:0}
.lang{display:flex;background:rgba(27,74,143,.08);border-radius:999px;padding:2px}
.lang__b{font:inherit;font-weight:600;font-size:.82rem;letter-spacing:.04em;border:0;cursor:pointer;
  background:transparent;color:var(--ink-soft);padding:0 14px;min-height:44px;min-width:48px;border-radius:999px}
.lang__b[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 4px rgba(21,35,61,.16)}
.bar__right .btn{display:none}

/* ---------- единственная кнопка ----------
   Плоская по умолчанию. Объём остаётся ровно у двух больших кнопок,
   на первом экране и в финале: два места, где решение принимается. */
.btn{display:inline-block;text-decoration:none;font-family:var(--font-display);font-weight:600;
  color:#fff;background:var(--pom);padding:15px 26px;border-radius:999px;
  transition:background-color .14s,transform .12s,box-shadow .12s}
.btn:hover{color:#fff;background:var(--pom-deep)}
.btn:active{transform:translateY(1px)}
.btn--sm{padding:11px 18px;font-size:.9rem}
.btn--lg{padding:18px 32px;font-size:1.06rem;box-shadow:0 5px 0 var(--pom-deep)}
.btn--lg:hover{background:var(--pom);transform:translateY(-2px);box-shadow:0 7px 0 var(--pom-deep)}
.btn--lg:active{transform:translateY(3px);box-shadow:0 2px 0 var(--pom-deep)}

/* ---------- типографика разделов ---------- */
.h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.45rem,1.2rem + 1.5vw,2.15rem)}
.sub{color:var(--ink-soft);margin-top:10px}
.sub--left{text-align:start;font-size:1.05rem;margin-bottom:2px}
.punch{margin-top:20px;font-family:var(--font-display);font-weight:600;font-size:1.08rem;color:var(--cobalt)}
.lead{font-size:clamp(1.05rem,1rem + .5vw,1.18rem);color:var(--ink-soft);max-width:52ch}
.micro{margin-top:14px;font-size:.9rem;color:var(--ink-soft)}

/* ---------- одна поверхность: рамка, без тени ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--pad)}
/* Иконки: Tabler Icons, MIT, лежат в assets/icons. Подключены маской,
   поэтому цвет задаётся из CSS и остаётся один на весь сайт. */
.ico{display:block;width:34px;height:34px;background-color:var(--turq);
  -webkit-mask:var(--u) no-repeat center/contain;mask:var(--u) no-repeat center/contain}
.ico--photo{--u:url("../icons/photo.svg")}
.ico--steps{--u:url("../icons/steps.svg")}
.ico--trainer{--u:url("../icons/trainer.svg")}
.ico--clock{--u:url("../icons/clock.svg")}
.ico--noads{--u:url("../icons/noads.svg")}
.ico--language{--u:url("../icons/language.svg")}
.ico--shield{--u:url("../icons/shield.svg")}
.ico--parent{--u:url("../icons/parent.svg")}
.ico--notebook{--u:url("../icons/notebook.svg")}
.ico--card-off{--u:url("../icons/card-off.svg")}
.card h3{font-family:var(--font-display);font-weight:600;font-size:1.05rem;margin-bottom:6px}
.card p{color:var(--ink-soft);font-size:.95rem}

/* ---------- одна сетка ---------- */
.grid{display:grid;gap:var(--gap);margin-top:26px}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
.grid--4{grid-template-columns:repeat(2,1fr)}

/* ---------- кадр персонажа: бодом и айван ----------
   Форма зависит от кадра, а не от места: портрет ложится в миндаль,
   горизонтальная сцена в арку. Картинке задаём пропорцию и cover,
   поэтому форма срезает поля, а не персонажа. */
.art{margin:0;width:min(300px,72%);margin-inline:auto}
.art img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 42%;
  border-radius:var(--bodom);border:1px solid rgba(21,35,61,.10);box-shadow:var(--shadow)}
.art--hero{width:100%}
.art--hero img{aspect-ratio:4/3;object-position:50% 50%;border-radius:var(--ayvan)}
/* Финал: кадр квадратный и небольшой. На пропорции 5:4 красный фон
   картинки разрастался в плиту и спорил с гранатовой кнопкой рядом,
   а гранат на странице значит только «нажми». */
.art--final{width:min(272px,64%)}
.art--final img{aspect-ratio:1/1;object-position:50% 54%;border-radius:var(--ayvan)}
/* Медальона больше нет. Портрет во весь рост, сжатый до 100px, читался
   как случайная наклейка: фигура теряется, остаётся цветное пятно.
   В gain и faq персонаж не нёс смысла, поэтому блоки идут без картинки. */

/* ---------- один список ---------- */
.rows{display:grid;margin-top:24px}
.rows li{padding-block:18px;border-top:1px solid var(--line)}
.rows h3{font-family:var(--font-display);font-weight:600;font-size:1.05rem;margin-bottom:4px}
.rows p{color:var(--ink-soft)}
.rows--icon li{display:grid;grid-template-columns:34px 1fr;gap:16px;align-items:start}
.rows--icon .ico{margin:3px 0 0}
.rows--plain li{font-size:1.03rem;color:var(--ink-soft)}
.rows--plain li:first-child{border-top:0;padding-top:0}

/* ---------- первый экран ---------- */
.hero__h{font-family:var(--font-display);font-weight:700;letter-spacing:-.032em;line-height:1.06;
  font-size:clamp(1.95rem,1.1rem + 3.1vw,3.1rem);margin-bottom:clamp(18px,3vw,26px);max-width:17ch}
.hero__in{display:grid;gap:var(--gap)}
.hero .lead{color:var(--ink)}
.hero__text .btn{margin-top:24px}

/* ---------- икат: единственная лента-разделитель ----------
   Абр: вертикальные раппорты с размытой границей цвета. Ровно один раз,
   на стыке первого экрана и остальной страницы. deslop-ignore 06 */
.ikat{height:24px;background-color:var(--sand);
  background-image:
    repeating-linear-gradient(90deg,transparent 0 8px,rgba(31,158,147,.85) 22px,transparent 36px 104px), /* лента иката, deslop-ignore 06 */
    repeating-linear-gradient(90deg,transparent 44px,rgba(27,74,143,.8) 60px,transparent 76px 104px), /* лента иката, deslop-ignore 06 */
    repeating-linear-gradient(90deg,transparent 84px,rgba(21,35,61,.2) 92px,transparent 100px 104px); /* лента иката, deslop-ignore 06 */
  border-block:1px solid var(--line)}

/* ---------- шаги ---------- */
.step{position:relative;padding-top:calc(var(--pad) + 54px)}
/* Ромб гирих вместо кружка: та же геометрия, что и в решётке фона. */
.step__n{position:absolute;top:var(--pad);inset-inline-start:var(--pad);
  width:42px;height:42px;display:grid;place-items:center;background:var(--cobalt);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  color:#fff;font-family:var(--font-display);font-weight:700;font-size:1rem}

/* ---------- выбор класса ---------- */
.grade{display:block;text-decoration:none;color:var(--ink);transition:transform .14s,box-shadow .14s,border-color .14s}
.grade__n{display:block;font-family:var(--font-display);font-weight:700;color:var(--turq);
  font-size:clamp(2.1rem,5vw,2.7rem);line-height:1;margin-bottom:8px}
.grade:hover{color:var(--ink);border-color:rgba(27,74,143,.3);transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.grade:active{transform:translateY(1px);box-shadow:none}

/* ---------- вопросы ---------- */
.qa{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--pad);margin-top:24px}
.qa dt{font-family:var(--font-display);font-weight:600;font-size:1.02rem;padding-top:18px;border-top:1px solid var(--line)}
.qa dt:first-of-type{padding-top:0;border-top:0}
.qa dd{color:var(--ink-soft);padding-bottom:18px;margin-top:4px}
.qa dd:last-of-type{padding-bottom:0}

/* ---------- финал ---------- */
.final__in{display:grid;justify-items:center;text-align:center;gap:16px}
.final h2{font-family:var(--font-display);font-weight:700;letter-spacing:-.025em;
  font-size:clamp(1.65rem,1.3rem + 2vw,2.4rem)}
.final .lead{margin:0;color:var(--ink)}
.final .btn{margin-top:6px}

/* ---------- врезки с кнопкой ----------
   Две подряд одинаковые плиты читались бы как ошибка вёрстки.
   Первая тихая, только рамка. Тёмная ровно одна, ближе к решению. */
main>section.cta-strip{padding-block:0;margin-block:clamp(14px,3vw,30px)}
.strip{display:grid;gap:16px;justify-items:start}
.strip p{font-family:var(--font-display);font-weight:600;font-size:clamp(1.08rem,1rem + .55vw,1.3rem)}
.strip--quiet{background:transparent;border:1px solid rgba(27,74,143,.28)}
.strip--loud{background:var(--cobalt-deep);border-color:transparent;color:#fff}
.strip--loud p{color:#fff}

/* ---------- липкая кнопка на телефоне ---------- */
.dock{position:fixed;inset-inline:0;bottom:0;z-index:9;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:var(--paper);border-top:1px solid var(--line);display:block;
  transition:transform .2s ease,opacity .2s ease}
.dock--off{transform:translateY(110%);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.dock{transition:none}}
.btn--dock{display:block;text-align:center;padding:15px 20px}
body{padding-bottom:82px}

/* ---------- подвал ---------- */
.foot{background:var(--cobalt-deep);color:#E7ECF5;padding-block:30px}
.foot__in{display:grid;gap:6px;text-align:center;font-size:.92rem}
.foot .logo__word{color:#fff}
.foot__c{color:rgba(231,236,245,.62)}

/* ---------- появление блоков ---------- */
.js main>section{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.js main>section.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js main>section{opacity:1;transform:none;transition:none}
  .btn,.btn--lg,.grade{transition:none}
}

/* ---------- две колонки ---------- */
.split__in{display:grid;gap:var(--gap)}
.split__body{order:1}
.split__in>.art{order:2}

/* ---------- планшет ---------- */
@media (min-width:700px){
  .dock{display:none}
  body{padding-bottom:0}
  .strip{grid-template-columns:1fr auto;align-items:center;justify-items:stretch;gap:24px}
  .strip p{margin:0}
  .bar__right .btn{display:inline-block}
  .grid--2{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(4,1fr)}
  .rows--2{grid-template-columns:repeat(2,1fr);column-gap:clamp(28px,4vw,52px)}
  .foot__in{grid-template-columns:auto 1fr auto;text-align:start;align-items:center;gap:20px}
  .foot__c{text-align:end}
}

/* ---------- десктоп ---------- */
@media (min-width:960px){
  .hero__in{grid-template-columns:1fr .95fr;align-items:center;gap:clamp(28px,4vw,56px)}
  .hero__text .lead{max-width:44ch}
  .split__in{grid-template-columns:290px 1fr;align-items:center;gap:clamp(32px,5vw,60px)}
  .split__in>.art{order:1;width:100%}
  .split__body{order:2}
  .split__in--rev{grid-template-columns:1fr 290px}
  .split__in--rev>.art{order:2}
  .split__in--rev .split__body{order:1}
  .faq .qa{max-width:none}
}

/* ---------- широкий десктоп: место под меню появляется только здесь ---------- */
@media (min-width:1120px){
  .bar__nav{display:flex}
}

/* ============================================================
   Блоки, добавленные 31.08.2026: демо, учебники, экраны, отзывы.
   Токены и формы взяты из системы выше, новых не заводил.
   ============================================================ */

/* ---------- учебники ---------- */
.book{max-width:720px}
.book__item{font-weight:700;font-size:1.05rem;line-height:1.45}
.book .rows{margin-top:10px}
.book .rows p{color:var(--ink-soft)}
.book__miss{display:inline-block;margin-top:18px;font-weight:800;color:var(--pom);
  border-bottom:2px solid rgba(200,16,46,.3)}
.book__miss:hover{border-bottom-color:var(--pom)}

/* ---------- экраны приложения ----------
   Веер из трёх заглушек убран. Он поворачивал и обрезал кадры, а с
   настоящими скриншотами это скрыло бы условие задачи и кнопки.
   Правила веера удалены целиком, а не перекрыты: оставленные,
   они продолжали крутить первый кадр через :nth-child(1).
   Действующие стили просмотрщика лежат ниже, в блоке v3. */

/* ---------- отзывы ---------- */
.quote blockquote{font-size:.98rem;font-weight:700;line-height:1.45;color:var(--ink-soft)}

@media (min-width:700px){
  .demo-list{grid-auto-flow:row;grid-template-columns:repeat(2,1fr);
    grid-auto-columns:auto;overflow:visible}

}

/* ---------- галерея тренажёров: одно задание на экране ---------- */
.demo-stage{margin-top:28px;display:grid;gap:18px;justify-items:center}
.stage__tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.stage__tab{display:inline-flex;align-items:center;gap:9px;font:inherit;font-weight:700;
  font-size:.9rem;cursor:pointer;min-height:44px;padding:8px 16px;border-radius:999px;
  border:2px solid transparent;background:var(--card);color:var(--ink-soft);
  box-shadow:var(--shadow);transition:color .12s,border-color .12s}
.stage__tab:hover{color:var(--ink)}
.stage__tab.is-on{color:var(--ink);border-color:var(--cobalt)}
.stage__num{width:22px;height:22px;border-radius:50%;display:grid;place-items:center; /* круглый предмет, не карточка. deslop-ignore 19 */
  font-size:.74rem;font-weight:800;background:rgba(21,35,61,.08);color:var(--ink-soft)}
.stage__tab.is-on .stage__num{background:var(--cobalt);color:#fff}

.stage__frame{display:grid;grid-template-columns:1fr;align-items:center;gap:12px;
  width:100%;max-width:760px}
.stage__slot{width:100%}
.stage__arrow{display:none;font:inherit;font-size:1.8rem;line-height:1;cursor:pointer;
  width:52px;height:52px;border-radius:50%;border:0;background:var(--card); /* круглый предмет, не карточка. deslop-ignore 19 */
  color:var(--cobalt);box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s}
.stage__arrow:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.stage__dots{display:flex;gap:7px}
.stage__dots span{width:8px;height:8px;border-radius:50%;background:rgba(21,35,61,.18)} /* круглый предмет, не карточка. deslop-ignore 19 */
.stage__dots .is-on{background:var(--cobalt);width:22px;border-radius:999px}

/* ---------- сама карточка задания ---------- */
/* Высота карточки задана и одинакова у всех пяти тренажёров.
   Без этого блок прыгал на 249px при переключении вкладок. */
.trainer{display:flex;flex-direction:column;gap:14px;padding:clamp(22px,3.4vw,34px);
  height:100%}
/* Высота задаётся слоту, а не карточке: все пять тренажёров занимают
   одинаковое место, и блок не прыгает при переключении вкладок. */
.stage__slot{height:600px}
.trainer__name{font-family:var(--font-display);font-weight:800;font-size:1.16rem}
.trainer__bar{display:flex;gap:6px}
.trainer__bar span{flex:1;height:6px;border-radius:999px;background:rgba(21,35,61,.12)}
.trainer__bar .is-done{background:var(--turq)}
.trainer__bar .is-now{background:var(--cobalt)}
.trainer__count{font-size:.76rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft)}
.trainer__ask{font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.15rem,1rem + .8vw,1.5rem);line-height:1.3}
.trainer__text{color:var(--ink-soft);line-height:1.5;font-size:1.02rem}
.trainer__text--big{font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.8rem,1.4rem + 2vw,2.6rem);color:var(--ink);letter-spacing:.03em;
  text-align:center;padding:14px 0;background:var(--paper);border-radius:var(--r-sm)}
.trainer__opts{display:grid;gap:9px}
.trainer__opt{display:flex;align-items:center;gap:12px;width:100%;text-align:start;
  font:inherit;font-size:1rem;cursor:pointer;min-height:54px;color:var(--ink);
  background:var(--paper);border:2px solid transparent;border-radius:var(--r-sm);
  padding:12px 15px;transition:border-color .12s,background .12s,transform .1s}
.trainer__opt:hover:not(:disabled){border-color:rgba(27,74,143,.35);transform:translateX(2px)}
.trainer__opt:disabled{cursor:default}
.trainer__key{flex:0 0 auto;width:26px;height:26px;border-radius:7px;display:grid;
  place-items:center;font-size:.76rem;font-weight:800;
  background:rgba(21,35,61,.08);color:var(--ink-soft)}
.trainer__opt.is-picked{border-color:var(--cobalt);background:rgba(27,74,143,.07)}
.trainer__opt.is-right{border-color:var(--turq);background:rgba(31,158,147,.13)}
.trainer__opt.is-right .trainer__key{background:var(--turq);color:#fff}
.trainer__opt.is-wrong{border-color:rgba(200,16,46,.45);background:rgba(200,16,46,.06)}
.trainer__say{font-size:.95rem;line-height:1.45;min-height:1.3em;color:var(--ink-soft)}
.trainer__say.is-right{color:var(--turq);font-weight:800}
.btn--full{display:block;width:100%;text-align:center;padding:15px 18px;font-size:1rem}
.btn--full:disabled{opacity:.4;cursor:default;transform:none;box-shadow:0 6px 0 var(--pom-deep)}
.trainer__finish{margin-top:auto;display:grid;gap:14px;justify-items:stretch;text-align:center}
.trainer__score{font-family:var(--font-display);font-weight:800;font-size:1.45rem}
/* Это кнопка, а не ссылка: подчёркивание убрано, форма даёт рамка. */
.trainer__again{font:inherit;font-weight:700;font-size:.9rem;color:var(--ink-soft);
  background:none;border:2px solid var(--line);border-radius:999px;cursor:pointer;
  padding:9px 18px;justify-self:center;transition:border-color .12s,color .12s}
.trainer__again:hover{border-color:var(--cobalt);color:var(--ink)}

/* ---------- закрасить часть ----------
   Клетки это объёмные блоки с опорной тенью, а не плоские точки:
   ребёнок должен видеть предмет, который можно нажать. */
.cells{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:8px;
  width:min(168px,50%);margin:0 auto;aspect-ratio:1}
.cell{border-radius:14px;border:0;cursor:pointer;padding:0;position:relative;
  background:var(--card);box-shadow:0 5px 0 rgba(21,35,61,.14),inset 0 0 0 2px rgba(21,35,61,.10);
  transition:transform .1s,box-shadow .1s,background .14s}
.cell::after{content:"";position:absolute;inset:22%;border-radius:6px;
  background:rgba(21,35,61,.07);transition:background .14s,transform .14s}
.cell:hover{transform:translateY(-2px);box-shadow:0 7px 0 rgba(21,35,61,.16),inset 0 0 0 2px rgba(27,74,143,.35)}
.cell:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(21,35,61,.14),inset 0 0 0 2px rgba(21,35,61,.10)}
.cell.is-on{background:var(--turq);box-shadow:0 5px 0 var(--turq-deep),inset 0 0 0 2px rgba(255,255,255,.25)}
.cell.is-on::after{background:rgba(255,255,255,.55);transform:scale(1.05)}
.trainer__tip{font-size:.8rem;color:var(--ink-soft);text-align:center;line-height:1.35}

/* ---------- раскрасить бусины ---------- */
.beads{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:4px 0}
.bead{width:46px;height:46px;border-radius:50%;border:2px solid rgba(21,35,61,.2); /* круглый предмет, не карточка. deslop-ignore 19 */
  background:var(--fill,var(--card));cursor:pointer;padding:0;transition:transform .1s}
.bead:active{transform:scale(.92)}
.palette{display:flex;gap:10px;justify-content:center;background:var(--paper);
  border-radius:999px;padding:8px 12px;width:fit-content;margin:0 auto}
.swatch{width:34px;height:34px;border-radius:50%;border:3px solid transparent; /* круглый предмет, не карточка. deslop-ignore 19 */
  background:var(--fill);cursor:pointer;padding:0}
.swatch.is-on{border-color:var(--ink)}

@media (min-width:760px){
  .stage__slot{height:520px}
  .stage__frame{grid-template-columns:52px 1fr 52px;gap:18px}
  .stage__arrow{display:block}
  .trainer{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px;align-items:start;
    align-content:start}
  .trainer.trainer--one{grid-template-columns:1fr;justify-items:center;text-align:center;gap:10px}
  /* Дети двухколоночной карточки жёстко сидят в grid-column 2.
     Без сброса браузер создаёт вторую колонку неявно, и шаблон в одну не работает. */
  .trainer.trainer--one > *{grid-column:1}
  .trainer--one .trainer__name,.trainer--one .trainer__bar,
  .trainer--one .trainer__count,.trainer--one .trainer__ask{justify-self:stretch;text-align:start}
  .trainer--one .btn--full{grid-column:1;max-width:340px}
  .trainer__name,.trainer__bar,.trainer__count{grid-column:1 / -1}
  .trainer__ask,.trainer__text,.trace{grid-column:1}
  .trainer__opts,.trainer__say{grid-column:2}
  .trainer__text--big{grid-column:1}
  .btn--full{grid-column:2}
  .trainer__finish{grid-column:1 / -1}
}

/* ---------- плашки учебников ---------- */
.books__grid{display:grid;gap:var(--gap);margin-top:28px;grid-template-columns:1fr}
/* Карточки-плашки убраны вместе с прежней группировкой по частям.
   Правила удалены целиком, а не перекрыты: .plaque--soon гасил
   картинку до 50 процентов, а статус висел поверх обложки. */

@media (min-width:700px){
  .books__grid{grid-template-columns:repeat(3,1fr)}
}

/* ---------- стена отзывов: три ленты ползут вертикально ---------- */
.wall{margin-top:28px;display:grid;grid-template-columns:1fr;gap:var(--gap);
  height:min(640px,88vh);overflow:hidden;position:relative;
  /* Растворение краёв ленты, не атмосферный градиент. deslop-ignore 06 */
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent); /* deslop-ignore 06 */
  mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent)} /* deslop-ignore 06 */
.wall__col{overflow:hidden}
.wall__track{display:grid;gap:var(--gap);animation:wall var(--dur) linear infinite}
.wall:hover .wall__track{animation-play-state:paused}
@keyframes wall{from{transform:translateY(0)}to{transform:translateY(-50%)}}

.rev{background:var(--card);border-radius:var(--r);padding:20px;box-shadow:var(--shadow);
  display:grid;gap:12px}
.rev blockquote{font-size:.95rem;line-height:1.5;color:var(--ink)}
.rev figcaption{font-size:.82rem;color:var(--ink-soft);font-weight:700}
.rev__head{display:flex;align-items:center;gap:11px}
.rev__av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center; /* круглый предмет, не карточка. deslop-ignore 19 */
  background:var(--tint);color:#fff;font-weight:800;font-size:.9rem;flex:0 0 auto}
.rev__who b{display:block;font-size:.92rem}
.rev__who span{font-size:.8rem;color:var(--ink-soft)}
.rev__photo{aspect-ratio:4/3;border-radius:var(--r-sm);display:grid;place-items:center;
  background:color-mix(in srgb,var(--tint) 18%,var(--paper));color:var(--tint);
  font-weight:800;font-size:.8rem;letter-spacing:.12em}

@media (prefers-reduced-motion:reduce){
  .wall__track{animation:none}
  .wall{height:auto;overflow:visible;mask-image:none;-webkit-mask-image:none}
}
@media (min-width:640px){ .wall{grid-template-columns:repeat(2,1fr)} }
@media (min-width:980px){ .wall{grid-template-columns:repeat(3,1fr)} }

/* ---------- первый экран: широкая композиция ----------
   Приём взят у детского лендинга ZemEz: заголовок в два цвета,
   органическая клякса под персонажем, разбросанные дудлы,
   ряд коротких чипов под кнопкой. Палитра наша. */
.hero{position:relative;overflow:hidden}
.hero__wrap{position:relative;z-index:1;width:min(1240px,100%)}
.hero__decor{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.d-blob{fill:var(--cobalt);opacity:.16}
.d-dot{fill:var(--pom);opacity:.5}
.d-dot--2{fill:var(--turq);opacity:.6}
.d-dot--3{fill:var(--saf);opacity:.55}
.d-star{fill:var(--saf);opacity:.75}
.d-star--2{fill:var(--pom);opacity:.55}
.d-squiggle{fill:none;stroke:var(--turq);stroke-width:5;stroke-linecap:round;opacity:.5}
.d-squiggle--2{stroke:var(--cobalt);opacity:.35}
.d-ring{fill:none;stroke:var(--pom);stroke-width:5;opacity:.35}

.hero__h span{display:block}
.hero__accent{color:var(--pom)}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--card);
  border-radius:999px;padding:8px 15px;font-size:.86rem;font-weight:700;
  color:var(--ink-soft);box-shadow:var(--shadow)}
.chip .ico{width:18px;height:18px;margin:0}

@media (prefers-reduced-motion:no-preference){
  .d-star,.d-ring{transform-box:fill-box;transform-origin:center;animation:bob 7s ease-in-out infinite}
  .d-star--2{animation-duration:9s;animation-delay:-2s}
  .d-ring{animation-duration:11s;animation-delay:-4s}
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* Заголовок во всю ширину блока, а не в колонке.
   Персонаж под ним занимает всю высоту правой части. */
.hero__h--wide{max-width:none;font-size:clamp(2.1rem,1rem + 5.4vw,4.6rem)}
.hero__h--wide span{display:inline}
.hero__h--wide .hero__accent{margin-inline-start:.28em}

/* Картинка первого экрана теперь с прозрачным фоном, поэтому ни рамки,
   ни скругления, ни тени: они были нужны только чтобы прятать запечённый фон. */
/* Рамка в 1px, заданная всем картинкам, на прозрачном PNG обводит
   пустой прямоугольник вокруг фигур. Здесь она не нужна. */
.art--hero img{border-radius:0;box-shadow:none;background:none;border:0}

@media (min-width:960px){
  .hero__in{grid-template-columns:1.02fr .98fr;align-items:end}
  .hero .art--hero{display:flex;align-items:flex-end;justify-content:center;height:100%}
  .hero .art--hero img{width:100%;max-width:none;height:auto;transform:scale(1.14);
    transform-origin:bottom center}
}

/* ---------- решение ----------
   Два приёма взяты с референсов, разобранных на Pinterest:
   Playwize «Stimulating Space For Growing Minds» дал цветные карточки
   со смещением средней по вертикали, второй лендинг дал цветной
   квадратный бейдж под иконкой вместо голого штриха.
   Гранат сюда не берём, он означает «нажми». */
.sol__grid{display:grid;gap:var(--gap);margin-top:28px;grid-template-columns:1fr}
.tile{border-radius:var(--r);padding:var(--pad);display:grid;gap:8px;align-content:start;
  position:relative}
.tile h3{font-size:1.06rem}
.tile p{font-size:.95rem;line-height:1.5}
.tile__badge{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  margin-bottom:8px;box-shadow:0 4px 0 rgba(21,35,61,.12)}
.tile__badge .ico{width:24px;height:24px;margin:0;background-color:#fff}
.tile--1{background:color-mix(in srgb,var(--cobalt) 12%,var(--card))}
.tile--1 .tile__badge{background:var(--cobalt)}
.tile--2{background:color-mix(in srgb,var(--turq) 14%,var(--card))}
.tile--2 .tile__badge{background:var(--turq)}
.tile--3{background:color-mix(in srgb,var(--saf) 18%,var(--card))}
.tile--3 .tile__badge{background:var(--saf-deep)}

@media (min-width:700px){ .sol__grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1060px){
  .sol__grid{grid-template-columns:repeat(3,1fr)}
  /* Средняя карточка смещена вниз: ряд перестаёт быть плоской полосой.
     Приём с референса Playwize. */
  .tile--2{margin-top:34px}
}

/* ============================================================
   v3: правки первого экрана и блока отзывов.
   Тексты, структура и смысл v1 не менялись. Правится только подача:
   отступы, выравнивание, декор, адаптив, читаемость.
   Блок стоит в конце файла, чтобы отличие от v1 читалось одним куском.
   ============================================================ */

/* ---------- первый экран ---------- */

/* Тёплый ореол переехал под саму фигуру.
   Во весь экран он был кобальтовым при .16 и на песочном фоне читался
   серым пятном: спорил с жёлтой подложкой, вшитой в сам арт, и заезжал
   на текст. Теперь это круг за персонажами, он держится фигуры на любой
   ширине и поддерживает её тёплым, а не гасит. */
.hero .art--hero{position:relative}
.hero .art--hero::before{
  content:'';position:absolute;z-index:0;
  left:50%;bottom:-4%;transform:translateX(-50%);
  width:min(104%,720px);aspect-ratio:1;
  border-radius:50%;                    /* круглый предмет, не карточка. deslop-ignore 19 */
  background:var(--saf);opacity:.13}
.hero .art--hero img{position:relative;z-index:1}

/* Дудлы живут в правой половине и не нужны там, где колонка одна:
   на телефоне они ложились поверх заголовка и кнопки. */
.d-dot{opacity:.45}
.d-star{opacity:.65}
.d-ring{opacity:.32;stroke-width:4}
.d-squiggle{opacity:.42;stroke-width:4}
@media (max-width:959px){
  .hero__decor{display:none}
}

/* Ритм левой колонки. Раньше блок прижимался к низу строки грида
   (align-items:end), из-за чего между заголовком и абзацем зияла дыра
   высотой с абзац, а низ колонки упирался в ленту иката. */
@media (min-width:960px){
  .hero__in{align-items:stretch}
  .hero__text{align-self:start;padding-top:clamp(8px,1.6vw,22px)}
  .hero__text .lead{max-width:46ch}
}
.hero__text .btn{margin-top:clamp(20px,2.4vw,28px)}
.hero__text .micro{margin-top:12px;max-width:44ch}

/* Перенос акцента больше не тащит за собой отступ.
   margin-inline-start срабатывал и тогда, когда акцент уезжал на новую
   строку, и вторая строка заголовка оказывалась сдвинутой вправо. */
.hero__h--wide .hero__accent{margin-inline-start:0}

/* Чипы одной высоты и с общим ритмом. */
.chips{gap:10px;margin-top:clamp(20px,2.6vw,26px)}
.chip{min-height:38px;padding:9px 16px}

/* ---------- отзывы ---------- */

/* Сброс браузерных отступов. figure и blockquote приходят с margin 1em 40px,
   из-за чего текст в карточке съезжал вправо, а между карточками копился
   лишний воздух поверх gap ленты. */
.rev,.rev blockquote,.rev figcaption{margin:0}

/* Карточки естественной высоты: короткий отзыв остаётся коротким.
   align-content:start не даёт содержимому растянуться по высоте строки. */
.wall__track{align-content:start}
.rev{align-content:start}

/* Три формата, как в v1: с фотографией, с инициалами и без аватара.
   Формат «без аватара» подписывается снизу, поэтому голова ему не нужна. */
.rev__av--img{object-fit:cover;background:var(--tint)}
.rev--plain blockquote{font-size:1rem}
.rev--plain figcaption{padding-top:10px;border-top:1px solid var(--line)}

/* Имя и класс в одну плотную строку: раньше span уходил на вторую строку
   и голова карточки становилась выше самой цитаты в коротких отзывах. */
.rev__who{min-width:0}
.rev__who b{line-height:1.25}
.rev__who span{display:block;line-height:1.3}





/* ---------- учебники: три линейки ----------

   Одна карточка это одна линейка, а не одна часть одного учебника.
   Внутри композиция из обложек РАЗНЫХ КЛАССОВ этой линейки: родитель
   должен узнать свою книгу, а не увидеть этапы разработки приложения. */

.books__sub{margin-top:8px}
/* На компьютере низ трёх карточек на одной линии, на телефоне высота
   естественная: там колонка одна и выравнивать не с чем. */
.books__grid{margin-top:26px;align-items:start}
@media (min-width:700px){ .books__grid{align-items:stretch} }

.series{display:grid;gap:6px;align-content:start}

/* Зона изображений одинаковой высоты во всех трёх карточках, чтобы
   подписи начинались на одной линии. */
/* Обложки целиком, без просвечивания: непрозрачность у всех 100%.

   Каскад вниз-вправо. Передняя книга закрывает только нижний угол задней,
   а верхняя полоса обложки, где напечатаны название и номер класса,
   открыта у каждой. Поэтому четыре книги помещаются, не пряча номер.

   Размеры и смещения заданы в процентах ЗОНЫ, поэтому правый край
   последней книги считается арифметически и за карточку не выходит. */
.series__pic{position:relative;aspect-ratio:1/1;margin-bottom:14px}
.series__b{position:absolute;height:auto;object-fit:contain;
  border-radius:5px;box-shadow:var(--shadow);
  border:1px solid var(--line-soft);background:var(--card);opacity:1}

/* Четыре книги: Novda, представители 1-4 классов.
   Шаг вверх (12% зоны) выбран больше, чем полоса с названием и номером
   на самой обложке (около 10% зоны), поэтому у каждой книги эта полоса
   остаётся открытой целиком, несмотря на перекрытие сбоку. */
.series__pic--4 .series__b--1{left:0;   bottom:0;   width:40%;z-index:4}
.series__pic--4 .series__b--2{left:19%; bottom:12%; width:38%;z-index:3}
.series__pic--4 .series__b--3{left:38%; bottom:24%; width:36%;z-index:2}
.series__pic--4 .series__b--4{left:57%; bottom:36%; width:34%;z-index:1}

/* Две книги: расходятся шире, перекрытие небольшое. */
.series__pic--2 .series__b--1{left:0;   bottom:0;   width:52%;z-index:2}
.series__pic--2 .series__b--2{left:46%; bottom:16%; width:46%;z-index:1}

/* Обложка второго класса РЦО собрана из миниатюры 163x232.
   Крупнее 150 px она рассыпается, поэтому ширина ограничена жёстко. */
.series__b--small{max-width:150px}

.series h3{font-size:1.06rem;line-height:1.25}
.series__who{font-size:.94rem;color:var(--ink)}
.series__meta{font-size:.85rem;line-height:1.45;color:var(--ink-soft)}



/* ---------- экраны продукта ---------- */

/* Один крупный экран и одна строка управления под ним.
   Прежние четыре вкладки в два ряда и отдельная крупная кнопка
   увеличения спорили за внимание с содержимым самого экрана. */
.shots{display:grid;justify-items:center;gap:14px}

/* Картинка целиком это кнопка увеличения. */
.shots__frame{position:relative;appearance:none;border:0;padding:0;margin:0;
  background:none;cursor:zoom-in;width:min(340px,100%);display:block}
.shots__frame img{width:100%;height:auto;display:block;
  border-radius:var(--r);border:1px solid var(--line);
  box-shadow:var(--shadow-lift);background:var(--card)}

/* Значок увеличения стоит на поле рамки, а не поверх интерфейса экрана:
   внутри кадра он закрывал полосу прогресса задания. */
.shots__mag{position:absolute;inset-inline-end:-13px;bottom:-13px;
  width:38px;height:38px;border-radius:50%; /* круглая кнопка, не карточка. deslop-ignore 19 */
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);
  display:grid;place-items:center}
/* Лупа, а не камера: в этом же блоке есть шаг «Сфотографировать
   задание», и значок камеры читался бы как приглашение снимать. */
.shots__mag::before{content:'';width:20px;height:20px;background-color:var(--cobalt);
  -webkit-mask:url("../icons/zoom-in.svg") center/contain no-repeat;
          mask:url("../icons/zoom-in.svg") center/contain no-repeat}
.shots__frame:hover .shots__mag{border-color:var(--cobalt)}

/* Строка управления: стрелка, подпись со счётчиком, стрелка.
   Подпись намеренно не выглядит кнопкой. */
.shots__bar{display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:4px}
.shots__now{font-size:.92rem;font-weight:700;color:var(--ink-soft);
  min-width:11ch;text-align:center}
.shots__nav{appearance:none;cursor:pointer;background:none;
  width:44px;height:44px;flex:none;border-radius:50%; /* круглая кнопка, не карточка. deslop-ignore 19 */
  border:1px solid var(--line);display:grid;place-items:center;color:var(--ink)}
.shots__nav:hover{border-color:var(--cobalt);color:var(--cobalt)}
.shots__nav::before{content:'';width:12px;height:12px;border-style:solid;
  border-width:0 0 2px 2px;border-color:currentColor}
#shot-prev::before{transform:translateX(2px) rotate(45deg)}
#shot-next::before{transform:translateX(-2px) rotate(-135deg)}

/* На телефоне заголовок блока идёт до картинки. */
.screens .split__in{display:flex;flex-direction:column}
.screens .split__body{order:1}
.screens .shots{order:2}

@media (min-width:960px){
  .screens .split__in{display:grid;grid-template-columns:376px 1fr}
  .screens .shots{order:0}
  .screens .split__body{order:0}
  .shots__frame{width:min(376px,100%)}
}

/* Увеличение. Нативный <dialog>: Escape и возврат фокуса даёт браузер.

   Два состояния. По умолчанию вся картинка вписана в свободную область
   по обеим сторонам: раньше на телефоне окно сразу открывалось шириной
   1024 px и показывало левый верхний угол. Второе состояние это крупный
   просмотр 1:1 с прокруткой по обеим осям.

   Высота области считается раскладкой, а не вычитанием фиксированных
   пикселей: панель занимает свою строку в гриде. */
.lightbox{border:0;padding:0;background:transparent;
  width:100%;max-width:100vw;height:100%;max-height:100vh;overflow:hidden;
  display:grid;grid-template-rows:auto 1fr}
.lightbox::backdrop{background:rgba(18,41,79,.88)}
.lightbox:not([open]){display:none}

.lightbox__top{display:flex;justify-content:flex-end;align-items:center;gap:10px;
  padding:12px 14px;background:rgba(18,41,79,.6)}
.lightbox__close,.lightbox__scale{appearance:none;cursor:pointer;font:inherit;
  min-height:44px;padding:10px 18px;border-radius:999px}
.lightbox__close{font-weight:700;background:var(--card);color:var(--ink);
  border:1px solid var(--line)}
/* Переключатель масштаба намеренно тише закрытия. */
.lightbox__scale{font-weight:600;background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.5)}
.lightbox__scale:hover{border-color:#fff}

.lightbox__body{min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;
  display:grid;place-items:center;padding:14px}
/* Целиком: вписываем по ширине и по высоте, пропорции сохраняются. */
.lightbox__body img{display:block;width:auto;height:auto;
  max-width:100%;max-height:100%;object-fit:contain;
  border-radius:var(--r-sm);background:var(--card);cursor:zoom-in}
/* Крупный просмотр: натуральная ширина кадра, прокрутка по обеим осям. */
.lightbox.is-zoom .lightbox__body{place-items:start}
.lightbox.is-zoom .lightbox__body img{max-width:none;max-height:none;
  width:1024px;cursor:zoom-out}

/* ---------- отзывы: движение только там, где оно уместно ----------

   Раньше режим ленты был поведением по умолчанию, а статичный вид
   включался медиазапросом prefers-reduced-motion. Любое правило .wall,
   дописанное ниже этого запроса, отменяло его: именно так высота и маска
   вернулись обратно и сломали доступный статичный вид.

   Теперь наоборот. По умолчанию стена статична: полный список, никакой
   обрезки и никаких дублей. Режим бегущих лент включает СКРИПТ классом
   .wall--live, и только когда ширина позволяет, а система не просит
   уменьшить движение. Порядок правил в файле на это больше не влияет. */

.wall{margin-top:clamp(24px,3vw,34px);height:auto;overflow:visible;
  mask-image:none;-webkit-mask-image:none;
  grid-template-columns:1fr}
@media (min-width:640px){ .wall{grid-template-columns:repeat(2,1fr)} }
@media (min-width:980px){ .wall{grid-template-columns:repeat(3,1fr)} }
.wall__track{animation:none}

/* Режим бегущих лент. Включается только скриптом. */
.wall--live{height:min(620px,86vh);overflow:hidden;
  /* Растворение краёв ленты, не атмосферный градиент. deslop-ignore 06 */
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent); /* deslop-ignore 06 */
  mask-image:linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent)} /* deslop-ignore 06 */
.wall--live .wall__track{animation:wall var(--dur) linear infinite}
.wall--live:hover .wall__track{animation-play-state:paused}

/* Пауза. На паузе ленту можно листать руками, поэтому колонка
   получает собственную прокрутку, а края больше не растворяются:
   иначе последняя карточка выглядела бы обрезанной. */
.wall--live.is-paused .wall__track{animation-play-state:paused}
.wall--live.is-paused{mask-image:none;-webkit-mask-image:none}
.wall--live.is-paused .wall__col{overflow-y:auto;overscroll-behavior:contain}

.wall__ctrl{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:18px}
/* display:flex перебивал нативное hidden, и кнопка «Показать ещё»
   оставалась видимой после раскрытия всех отзывов. */
.wall__ctrl[hidden]{display:none}
.wall__btn{appearance:none;cursor:pointer;font:inherit;font-size:.9rem;font-weight:700;
  min-height:44px;padding:10px 18px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);color:var(--ink)}
.wall__btn:hover{border-color:var(--cobalt);color:var(--cobalt)}
.wall__hint{font-size:.85rem;color:var(--ink-soft)}

/* Статичный вид: колоночный поток вместо сетки.
   В гриде карточки выравниваются по рядам, и под короткой карточкой
   оставалась дыра высотой с самую длинную соседку. Колонки текут
   свободно, ритм получается тот же, что у бегущей ленты. */
.wall:not(.wall--live){display:block;column-gap:var(--gap)}
.wall:not(.wall--live) .rev{break-inside:avoid;margin-bottom:var(--gap)}
@media (min-width:640px){ .wall:not(.wall--live){column-count:2} }
@media (min-width:980px){ .wall:not(.wall--live){column-count:3} }