@media(min-width:560px){.hdr__cta{display:inline-flex}}
@media(min-width:900px){.hdr__cta{margin-left:0}}
.hdr__burger{margin-left:var(--s3);width:44px;height:44px;flex:none;border:none;background:var(--surface);
  border-radius:var(--r-md);cursor:pointer;display:flex;align-items:center;justify-content:center}
@media(min-width:900px){.hdr__burger{display:none}}
.hdr__burger i{display:block;width:18px;height:2px;background:var(--ink);position:relative}
.hdr__burger i::before,.hdr__burger i::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink)}
.hdr__burger i::before{top:-6px}.hdr__burger i::after{top:6px}
.drawer{position:fixed;inset:0;z-index:60;background:var(--page);padding:var(--s5) var(--s3);
  display:flex;flex-direction:column;gap:var(--s4);transform:translateY(-101%);
  transition:transform .28s var(--ease);overflow:auto}
.drawer.on{transform:none}
.drawer a{font-family:var(--f-display);font-size:var(--t-lg);font-weight:800;color:var(--ink);text-decoration:none}
.drawer__x{align-self:flex-end;width:44px;height:44px;border:none;border-radius:var(--r-md);
  background:var(--surface);color:var(--ink);font-size:22px;line-height:1;cursor:pointer}

/* 21.2 ПОЛОСА ПРОГРЕССА СКРОЛЛА. Оригинал на motion — здесь одна строка на scroll-timeline
   с фолбэком на JS-переменную. Правило: одна полоса прогресса на экран
   (если открыт квиз с .quiz__bar — эту прячем). */
.scrollbar{position:fixed;left:0;top:0;height:3px;z-index:50;background:var(--a);
  width:var(--scrolled,0%);transform-origin:0 50%}
@supports (animation-timeline:scroll()){
  .scrollbar{width:100%;transform:scaleX(0);animation:sb linear;animation-timeline:scroll()}
  @keyframes sb{to{transform:scaleX(1)}}
}
/* Внутри произвольного скролл-контейнера scroll()-таймлайн не подцепишь — там полосу
   двигает скрипт через --scrolled. Этот же вариант берут, если нужен ручной контроль. */
.scrollbar--js{width:var(--scrolled,0%)!important;transform:none!important;animation:none!important}

/* 21.3 ТАРИФЫ. Оригинал — SaaS-таблица с тумблером месяц/год.
   У нас переключатель по СРОКУ обучения: чем длиннее, тем дешевле месяц.
   Цены и состав — с живого el-ed.ru, не заглушки. Таймер «до повышения цены»,
   который стоит на боевой странице, не переносим — он мёртвый: в разметке дата 16 июня,
   отрисовано статичное «4 дн : 12 ч : 23 мин». Отсчёт как приём разрешён (см. .tick),
   но только по настоящей дате ступени. */
.terms{display:flex;gap:6px;background:var(--surface);border-radius:var(--r-pill);padding:6px;
  width:max-content;max-width:100%;flex-wrap:wrap}
.terms button{border:none;background:none;font:inherit;font-size:var(--t-sm);font-weight:700;
  color:var(--ink-2);padding:11px 20px;border-radius:var(--r-pill);cursor:pointer;white-space:nowrap;
  display:flex;align-items:center;gap:8px;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
/* Трек и активная пилюля брались из --surface и --page. На бумаге оба стали
   белыми (замер: 1.00), и выбор держался одной жирностью текста. Теперь
   у активной пилюли есть собственный контур — форма, а не только цвет. */
.terms button.on{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.terms button em{font-style:normal;font-size:var(--t-xs);font-weight:800;color:var(--done-deep)}
.terms button.on em{color:var(--done-deep)}
/* На узком экране сегменты не переносим — они перестают читаться как один переключатель.
   Уводим в горизонтальный скролл. */
@media(max-width:560px){
  .terms{width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .terms::-webkit-scrollbar{display:none}
  .terms button{flex:none}
}

.tariffs{display:grid;gap:var(--gap);grid-template-columns:1fr;margin-top:var(--s5)}
@media(min-width:900px){.tariffs{grid-template-columns:repeat(2,1fr)}}
.tariffs--3{grid-template-columns:1fr}
@media(min-width:900px){.tariffs--3{grid-template-columns:repeat(3,1fr)}}
.tariff{background:var(--surface);border-radius:var(--r-xl);padding:var(--s5);display:flex;flex-direction:column}
@media(min-width:760px){.tariff{padding:35px}}
.tariff__top{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.tariff h3{font-size:clamp(20px,2.2vw,26px)}
.tariff__when{font-size:var(--t-sm);color:var(--ink-2);margin-top:6px}
.tariff__price{margin:var(--s5) 0 var(--s4)}
.tariff__price b{font-family:var(--f-display);font-size:clamp(34px,4vw,46px);font-weight:900;
  letter-spacing:-.03em;line-height:1;display:inline-block}
.tariff__price i{font-style:normal;font-size:var(--t-md);color:var(--ink-2);margin-left:6px}
.tariff__full{font-size:var(--t-sm);color:var(--ink-2);display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.tariff__full s{color:var(--ink-3);opacity:1}
.tariff--top .tariff__full s{color:var(--done-deep);opacity:.78}
.tariff__list{list-style:none;display:flex;flex-direction:column;gap:11px;margin:var(--s5) 0;
  font-size:var(--t-sm);line-height:1.35}
.tariff__list li{position:relative;padding-left:26px}
.tariff__list li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;
  background:var(--done-pale)}
.tariff__list li::after{content:"";position:absolute;left:5px;top:8px;width:6px;height:3px;
  border-left:2px solid var(--done-deep);border-bottom:2px solid var(--done-deep);transform:rotate(-45deg)}
.tariff__more{font-weight:700;color:var(--ink);margin-bottom:2px}
.tariff .btn{margin-top:auto}
/* Рекомендованный — залит ролью «результат». Выделяем цветом, а не тенью и не рамкой. */
.tariff--top{background:var(--done-pale)}
.tariff--top h3,.tariff--top .tariff__price b{color:var(--done-deep)}
.tariff--top .tariff__when,.tariff--top .tariff__full,.tariff--top .tariff__list{color:var(--done-deep)}
.tariff--top .tariff__list li::before{background:var(--page)}
.tariff--top .tariff__full s{color:var(--done-deep);opacity:.6}
.seats{font-size:var(--t-sm);color:var(--ink-2);display:inline-flex;align-items:center;gap:8px}
.seats::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--done)}

/* 21.35 ТАЙМЕР ОБРАТНОГО ОТСЧЁТА (.tick)
   ВНИМАНИЕ. До 20.08.2026 таймеры были запрещены решением владельца — запрет
   снят им же, под конверсию репетиторского спроса. Что осталось в силе и не
   обсуждается: отсчёт привязан к РЕАЛЬНОМУ событию (бронь слота, срок акции),
   а не перезапускается при перезагрузке страницы. Фейковый таймер ловится
   родителем с первого F5 и стоит доверия ко всей странице.
   Цвет — было «роль срочность и никакая другая», отменено владельцем 20.08:
   красный фон+текст читался «ядерным», перетягивал внимание сильнее оффера.
   Стало нейтрально (--surface-2/--ink) — срочность несёт сама смена цифр,
   не цвет плашки. --surface-2, не --surface: плашка лежит на карточке
   --surface, тем же тоном она бы слилась с ней насмерть. */
.tick{display:inline-flex;align-items:center;gap:var(--s4);background:var(--surface-2);
  border-radius:var(--r-md);padding:12px 18px;color:var(--ink);max-width:100%}
.tick span{font-size:var(--t-sm);font-weight:700;line-height:1.25;max-width:15ch}
/* Значок у лейбла — опция: ставится, только если в разметке есть свой <svg>. Текст — во
   вложенном span: flex-item с голым текстом не переносится (min-width:auto по умолчанию
   равен нешироченной ширине контента и бьёт max-width родителя). */
.tick span:has(svg){display:flex;align-items:center;gap:7px;width:15ch;max-width:none}
.tick span:has(svg) span{min-width:0}
.tick span svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tick > div > i{font-style:normal;font-size:11px;font-weight:600;opacity:.8;letter-spacing:.06em;
  text-transform:uppercase;display:block;margin-top:3px}

/* 21.36 ЦИФРЫ ОТСЧЁТА (.flip) — от прототипа flip-clock с 21st.dev осталась только
   смена разряда, коробочная digital-clock стилистика (плитки, рамки, отдельный
   моноширинный блок) снята — владелец: «выбивается из дизайн-системы». Цифры —
   тот же приём, что у крупного числа в .price: наш дисплейный шрифт, без чужого
   чемодана вокруг. Меняется только изменившийся разряд, минимальный fade вместо флипа. */
.flip{display:inline-flex;align-items:baseline;gap:1px}
.flip__d{display:inline-block;font-family:var(--f-display);font-size:34px;font-weight:900;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:inherit}
.flip__d.go{animation:flip-d .32s var(--ease)}
@keyframes flip-d{50%{opacity:.15}}
.flip__colon{font-family:var(--f-display);font-style:normal;font-size:34px;font-weight:900;opacity:.45;margin:0 1px}
@media(prefers-reduced-motion:reduce){.flip__d.go{animation:none}}

/* 21.4 ЛИПКИЕ ТАБЫ СЕКЦИЙ. Для длинного контента, разбитого на именованные части.
   Внимание: это второй липкий элемент на странице. Либо липкая шапка, либо табы. */
.sectabs__nav{position:sticky;top:0;z-index:30;background:var(--page);display:flex;gap:6px;
  overflow-x:auto;padding:var(--s3) 0;scrollbar-width:none}
.sectabs__nav::-webkit-scrollbar{display:none}
.sectabs--under-hdr .sectabs__nav{top:var(--hdr-h,64px)}
.sectabs__nav button{border:none;background:var(--surface);font:inherit;font-size:var(--t-sm);font-weight:600;
  color:var(--ink-2);padding:11px 18px;border-radius:var(--r-pill);cursor:pointer;white-space:nowrap;flex:none;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.sectabs__nav button.on{background:var(--a);color:var(--a-on)}
.sectabs__sec{padding-top:var(--s6);scroll-margin-top:calc(var(--hdr-h,64px) + 64px)}

/* 21.5 АВТОЛЕНТА. Оригинал — бегущая строка с текстом на framer-motion.
   Текстовый марки не берём (см. баны). Берём только автопрокрутку ленты ЛИЦ:
   там движение объясняется содержанием — «нас много». Пауза при наведении,
   остановка при prefers-reduced-motion. */
.rail--auto{overflow:hidden;scroll-snap-type:none;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.rail--auto .rail__belt{display:flex;gap:var(--gap);width:max-content;animation:belt var(--belt-dur,42s) linear infinite}
.rail--auto:hover .rail__belt,.rail--auto:focus-within .rail__belt{animation-play-state:paused}
@keyframes belt{to{transform:translateX(calc(-50% - var(--gap)/2))}}
@media(prefers-reduced-motion:reduce){.rail--auto .rail__belt{animation:none}}

/* 21.6 БЛИК НА КНОПКЕ. Оригинал: конические градиенты + shimmer + точечный узор.
   Целиком не берём — три правила системы разом (градиент, свечение, украшение без роли).
   Оставлен один мягкий проход по наведению, без подсветки в покое. Кандидат, не канон. */
.btn--sweep{position:relative;overflow:hidden}
.btn--sweep::after{content:"";position:absolute;inset:0;transform:translateX(-120%);
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.26) 50%,transparent 62%)}
.btn--sweep:hover::after{transform:translateX(120%);transition:transform .62s var(--ease)}
@media(prefers-reduced-motion:reduce){.btn--sweep::after{display:none}}

/* 21.7 КЛЕТКА-БУМАГА — НЕЙТРАЛЬНЫЙ ТОН, НЕ РОЛЕВОЙ.
   Был .tex-pale: подложка --a-pale, линии ролью на 20%. Это ошибка против
   правила 1.1 «цвет = роль»: у фактуры роли нет, а красилась она акцентом.
   На бренд-акценте получалось четыре синих объекта на экране (фон, линии,
   степпер, обводки радио), в тёмной теме — зелёное на зелёном.

   Теперь тетрадь: бумага тёплая, сетка холодная. Именно этим тетрадь
   отличается от бланка, и именно это отодвигает от неё цветной интерфейс —
   акцент остаётся только на активном шаге и выбранном ответе.
   В тёмной теме та же бумага становится чернильной с белыми линиями на 6%,
   как на полотне: тон фактуры один, меняется только основа. */
/* Задаём ВЕСЬ набор токенов поверхности, а не только фон. Иначе цвет текста
   приходит от тёмного предка (.card--ink, .card--solid, .quiz, .band),
   и на кремовой бумаге получается белое по светлому — замерено 1.08.
   Тот же капкан уже ловили у .qopt и .field: фон из одного слоя, текст из другого. */
.tex-paper{background-color:var(--paper-bg);color:var(--ink);
  --tex:var(--paper-line);--surface:var(--paper-card);--surface-2:var(--paper-2);
  --page:var(--paper-card);--line:var(--paper-edge)}
.tex-paper h1,.tex-paper h2,.tex-paper h3{color:var(--ink)}
.tex-paper p,.tex-paper .sub,.tex-paper .sub-sm,.tex-paper .legal{color:var(--ink-2);opacity:1}
/* Вопрос квиза — это <p>, но по роли заголовок: общее правило выше делало его серым. */
.tex-paper .quizw__q,.tex-paper .quiz__q{color:var(--ink)}

/* Поле тетради: вертикальная линия по первой клетке (26 px), то есть в зоне
   паддинга, слева от контента — как в тетради. Совпадает с линией сетки,
   поэтому читается как усиленная линия, а не как чужая рамка.
   Графит, а не красный: красный в системе занят ролью «срочность».
   На мобиле снимается — при паддинге 24 линия оказалась бы в тексте. */
.tex-margin{position:relative}
.tex-margin::before{content:"";position:absolute;left:26px;top:0;bottom:0;width:1.5px;
  background:var(--paper-margin);pointer-events:none}
@media(max-width:759px){.tex-margin::before{display:none}}

/* КЛЕТКА НА КЛЕТКЕ НЕ ЛОЖИТСЯ: внутри полотна сетка уже идёт по фону,
   вторая со своим шагом даёт муар. Блок на полотне — ровная поверхность. */
.slab .tex-paper{background-image:none}
.slab .tex-margin::before{display:none}

/* ============================================================================
   22. ТЁМНОЕ ПОЛОТНО (slab) — несущая поверхность ДЕТСКОГО слоя
   Крупный тёмный блок внутри светлой страницы: поля вокруг остаются белыми.
   Токены полотна объявлены вместе с тёмной темой в разделе 2.

   ГРАНИЦА, НЕ ОБСУЖДАЕТСЯ: полотно живёт только в детском слое. На родительский
   путь его не выпускаем — родителю страница идёт светлой до самого финала.
   Клетка родителю достаётся в двух других тонах: бумага (.tex-paper)
   и залитый ролью (.card--solid + .grid-tex).

   Несколько экранов подряд — это ОДИН .slab с несколькими .slab__screen внутри,
   а НЕ два .slab встык. Встык они читаются как склейка двух пилюль, и клетка
   обрывается на шве. Клетка лежит на полотне, а не на экране, поэтому идёт
   сквозь все экраны непрерывно.

   РИТМ. Тёмных экранов подряд — норма два, потолок три, дальше светлый блок
   обязателен. Считаем ПО ПРОКРУТКЕ, а не по разметке: глазу неважно, один это
   .slab или два соседних, он видит длину тёмного куска. Страница целиком
   на тёмном перестаёт быть ритмом и становится ночной темой, а её мы
   и договорились не делать.
   ========================================================================== */
.slab{background:var(--page);color:var(--ink);border-radius:var(--r-xl);
  position:relative;overflow:hidden;
  /* клетка: белые линии на 6%, шаг тот же 26 */
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:26px 26px}
.slab__screen{padding:var(--s7) var(--s5)}
@media(min-width:900px){
  .slab__screen{padding:var(--s8) var(--s7);min-height:84vh;
    display:flex;flex-direction:column;justify-content:center}
}
/* Экран — колоночный флекс, и прямой ребёнок по умолчанию тянется на всю ширину:
   тег «6–8 класс · математика» превращался в зелёную полосу во весь блок,
   кнопка — в кнопку во всю ширину полотна. Ширину им задаёт содержимое. */
.slab__screen > .tag,.slab__screen > .btn,.slab__screen > .chip,.slab__screen > .readers,
.slab__screen > .chip-row,.slab__screen > .stepper,.slab__screen > .price,
.slab__screen > .lives{align-self:flex-start}
/* Страховка, если два полотна всё же окажутся соседями: внутренние углы гасим,
   зазор схлопываем — снаружи это снова один блок. */
.slab + .slab{margin-top:0;border-top-left-radius:0;border-top-right-radius:0}
.slab:has(+ .slab){border-bottom-left-radius:0;border-bottom-right-radius:0}

/* Заголовок подростковой громкости. НЕ капслок и НЕ Druk — это язык ОГЭ-лендов.
   Крупнее обычного H2, потому что на экране он почти единственный текст. */
/* Кегль работает и на белой странице: 78 px на светлом — уже подростковый темп,
   без единого тёмного пикселя. Имя .slab__h оставлено как алиас: полотно им пользуется. */
.h-kid,.slab__h{font-family:var(--f-display);font-weight:900;letter-spacing:-.035em;line-height:.97;
  font-size:clamp(36px,6.2vw,78px);text-wrap:balance;color:var(--ink)}
/* Ровно одна строка пояснения под заголовком. Полотен текста на детском экране нет. */
.line-kid,.slab__line{font-size:var(--t-lg);color:var(--ink-2);margin-top:var(--s5);max-width:30ch;line-height:1.3}
.slab p,.slab .sub,.slab .sub-sm{color:var(--ink-2);max-width:34ch}

/* Плитка: один тезис — одна плитка. Цифра крупная, подпись короткая.
   Больше двух акцентных цветов на экран не ставим. */
.tiles{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media(min-width:760px){.tiles{grid-template-columns:repeat(3,1fr)}}
/* Плитка живёт и вне полотна: на светлой странице ей ставят .kid-ink, и она
   становится тем самым точечным тёмным. Высота на мобиле не фиксируется —
   280 px при коротком тексте давали цифру сверху и полтора экрана пустоты. */
.tile{background:var(--surface);border-radius:var(--r-xl);padding:var(--s6) var(--s5);
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--s5)}
/* Высота нужна только там, где колонка широкая: на планшете 280px давали
   70–100px пустоты между числом и подписью. */
@media(min-width:1024px){.tile{min-height:280px;gap:var(--s6)}}
.tile.kid-ink{background:var(--surface)}
.tile b{font-family:var(--f-display);font-weight:900;letter-spacing:-.04em;line-height:.9;
  font-size:clamp(52px,6vw,88px);display:block;color:var(--ink)}
.tile span{font-size:var(--t-md);color:var(--ink-2);line-height:1.35;max-width:22ch}

/* Схема ритма — миниатюра страницы полосками. Правило «не больше трёх подряд»
   в виде строки текста не работает: его не видно. Здесь оно видно. */
.rhythm{display:flex;flex-direction:column;gap:5px}
.rhythm i{height:30px;border-radius:9px;background:var(--surface);color:var(--ink-3);
  display:flex;align-items:center;padding:0 12px;font-size:11.5px;font-style:normal;font-weight:600;
  box-shadow:inset 0 0 0 1px var(--line)}
.rhythm i.dk{background:#14151c;color:#a2a8bb;box-shadow:none;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:13px 13px}

/* Портрет на полотне: конструкция .rise как есть, но тело тёмное.
   Белая карточка на чернильном экране читается как вставленный чужой лист,
   а без тела срез приходится по кистям рук и выглядит браком. */
.slab .rise__body{background:var(--surface);min-height:0;padding:var(--s5) var(--s5) var(--s6)}

/* ============================================================================
   24. ИГРОВЫЕ ЕДИНИЦИ (.game) — отличие содержанием, а не оформлением
   Жизни, серия, кешбек, прогресс к розыгрышу. Этих сущностей на родительской
   странице нет вообще — их нечем подделать и не с чем спутать. Поэтому детский
   слой узнаётся по ним даже там, где страница светлая и ни одного тёмного
   пикселя на экране нет.

   Блок светлый; тёмное и мятное приходят точками (.kid-ink на ячейке,
   акцент на числе). Счёт идёт ВВЕРХ — серия, накоплено, закрыто. Обратный отсчёт
   (.tick) сюда не переносится и после снятия запрета: игровой статус про накопленное,
   а не про утекающее.
   ========================================================================== */
.game{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media(min-width:760px){.game{grid-template-columns:repeat(3,1fr)}}
.game__cell{background:var(--surface);border-radius:var(--r-xl);padding:var(--s5);
  display:flex;flex-direction:column;gap:var(--s4)}
.game__cell .game__cap{font-size:var(--t-sm);color:var(--ink-2);line-height:1.35;margin-top:var(--s2)}
.game__n{font-family:var(--f-display);font-weight:900;letter-spacing:-.04em;line-height:.9;
  font-size:clamp(40px,4.6vw,64px);display:block}

/* Жизни: ряд значков. Потраченная — контур, а не просто бледная:
   состояние нельзя кодировать одной прозрачностью. */
.lives{display:flex;gap:8px;align-items:center}
.lives i{width:26px;height:26px;flex:none;border-radius:8px;background:var(--a);
  transform:rotate(45deg);font-style:normal}
.lives i.out{background:transparent;box-shadow:inset 0 0 0 2px var(--line)}
.lives em{font-style:normal;font-size:var(--t-sm);color:var(--ink-2);margin-left:var(--s2)}

/* Полоска прогресса: сколько набрано. Ширину задаёт --fill. */
.bar{height:10px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.bar__fill{display:block;height:100%;border-radius:99px;background:var(--a);width:var(--fill,0%)}

/* ============================================================================
   23. ПЕРЕКЛЮЧАТЕЛЬ ЧИТАТЕЛЯ — ОПЦИЯ СТРАНИЦЫ, А НЕ ЧАСТЬ ПЕРВОГО ЭКРАНА
   Нужен там, где не знаем, кто придёт. На блогерском трафике аудитория известна:
   переключателя нет, страница идёт детским входом. Есть у всех трёх конкурентов
   (Умскул, Вебиум, 99 баллов) — у нас до сих пор не было.

   Видимость слоёв держим отдельными классами, а не display:none на контейнере:
   у .slab__screen свой display:flex, переключатель бы его затирал.
   Без атрибута data-view видны оба слоя — так собирается страница без выбора.
   ========================================================================== */
/* Имя .seg занято сегментами классов в квизе (.quiz__opts.seg, раздел 13).
   Переключатель объявлен ниже по файлу и перебивал их: ряд 6/7/8/9 схлопывался
   в 118 px из 520 и получал капсульный радиус вместо 16. Отсюда .readers. */
.readers{display:inline-flex;gap:4px;background:var(--surface);border-radius:var(--r-pill);padding:4px}
.readers button{border:none;background:none;font-family:var(--f-text);font-size:var(--t-sm);font-weight:700;
  padding:12px 24px;border-radius:var(--r-pill);cursor:pointer;color:var(--ink-2);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.readers button.on{background:var(--contrast);color:var(--on-contrast)}
[data-view="parent"] .kid-only{display:none!important}
[data-view="kid"] .parent-only{display:none!important}

/* Планшет 760–1023: витрина в три колонки становится тесной */
@media(min-width:760px) and (max-width:1023px){
  .person__body{padding:22px}.person__body h3{font-size:21px}
  /* Подводка рядом с круглой кнопкой в узкой колонке рвалась на пять строк */
  .person__ask{flex-direction:column;align-items:flex-start;gap:var(--s3)}
  .person__ask span{max-width:none}
}