/* ==========================================================================
   Гав VPN — вариант V1 «Табло». Только композиция этого варианта.
   Токены и базовый слой не трогаются: tokens.css и base.css общие.

   Мир: приборная панель пропускного пункта. Ничего не летает — всё
   включается. Погашенный сегмент нарисован так же тщательно, как горящий.
   ========================================================================== */

/* --- Общее для варианта -------------------------------------------------- */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.note {
  margin-top: var(--s6);
  max-width: var(--measure);
  font-size: var(--t-sm);
  color: var(--paper-dim);
  padding-left: var(--s4);
  border-left: var(--bw) solid color-mix(in oklab, var(--lime) 45%, transparent);
}

/* Плейсхолдер кассы: всегда моноширинный, всегда видно, что это заготовка. */
.ph {
  font-family: var(--f-mono);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--lime);
  text-decoration: underline dashed color-mix(in oklab, var(--lime) 45%, transparent);
  text-underline-offset: 4px;
}

.acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.acts .btn { flex: 1 1 100%; min-width: 0; }
/* Тихая третья ссылка держится левого края: правый низ экрана занят
   закреплённым переключателем вариантов, и справа она уходила под него. */
.acts__third { margin-right: auto; }
@media (min-width: 560px) { .acts__third { margin-right: 0; margin-left: auto; } }

/* На узком экране «Взять три дня бесплатно» в один ряд не помещается:
   у .btn в базовом слое nowrap, и кнопка распирала бы полосу до 382 px. */
@media (max-width: 559px) {
  .btn { white-space: normal; text-align: center; }
  .btn--lg { padding-inline: var(--s5); font-size: var(--t-btn); }
  /* В шапке рядом со знаком остаётся 186 px — кнопка ужимается до строки. */
  .site-head .btn { white-space: nowrap; padding-inline: var(--s3); font-size: var(--t-label); }
}

/* Экраны уже 380 px: знак и кнопка в шапке в сумме шире полосы, и страница
   получала горизонтальную прокрутку ещё до первого экрана. */
@media (max-width: 379px) {
  .site-head__in { gap: var(--s3); }
  .site-head .btn { font-size: var(--t-ui-xs); letter-spacing: 0.06em; padding-inline: var(--s2); }
  .logo__paw { width: 26px; height: 26px; }
  .logo__word { font-size: calc(0.9375rem * var(--kui)); }
}

@media (min-width: 560px) {
  .acts .btn { flex: 0 0 auto; }
}

/* --- Характер движения: зажигание, а не всплытие -------------------------
   Ни один элемент не выезжает снизу с фейдом — этого приёма здесь нет.   */

@keyframes v1-ignite {
  0%   { opacity: 0.05; filter: brightness(0.25); }
  14%  { opacity: 1;    filter: brightness(1.6); }
  22%  { opacity: 0.22; filter: brightness(0.4); }
  38%  { opacity: 1;    filter: brightness(1.3); }
  52%  { opacity: 0.5;  filter: brightness(0.7); }
  100% { opacity: 1;    filter: brightness(1); }
}

.reveal[data-reveal='lamp'] { transition: none; }
.reveal[data-reveal='lamp'].is-in { animation: v1-ignite 560ms var(--e-snap) both; }
.reveal[data-reveal='wipe'] { transition-duration: var(--d2); transition-timing-function: var(--e-snap); }
.motion-off .reveal[data-reveal='lamp'].is-in { animation: none; }

/* ==========================================================================
   Сегментное табло: четырнадцать сегментов, погашенные близнецы всегда видны
   ========================================================================== */

/* Знаки тянутся по ширине табло, но не шире потолка --sgw: так индикатор
   заполняет свою рамку, а не висит в пустом углу. */
.sg {
  display: flex;
  flex: 1;
  align-items: flex-end;
  gap: calc(var(--sgw) * 0.12);
  min-width: 0;
}
/* min-width: 0 обязателен. У SVG автоматический минимум равен потолку
   --sgw, и семь знаков просто не влезали в узкую колонку табло: слово
   вылезало за рамку прибора на всех ширинах от 700 до 1024. */
.sg__l {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: var(--sgw);
  height: auto;
  aspect-ratio: 3 / 5;
  overflow: visible;
}
.sg--static { flex: none; }
.sg--static .sg__l { flex: none; width: var(--sgw); }
/* Погашенный близнец: прозрачность задаётся группе, а не цвету. С альфой
   в самом цвете перекрытия сегментов на стыках складывались, призрак
   выходил втрое ярче задуманного и слово переставало читаться.
   Цвет — нейтральный, не лайм и не розовый: цветной близнец под цветным
   словом давал на телефоне сплошной шум вместо букв. */
.sg__gh { color: var(--paper); opacity: 0.06; }
.sg__on { color: var(--lime); opacity: 1; }

/* Цифры шагов близнеца держат лаймовым: там ячейка одна, шума нет,
   и «погашенный сегмент нарисован так же тщательно» остаётся видно. */
.sg--static .sg__gh { color: var(--lime); opacity: 0.12; }
/* Статичные цифры шагов: горят всегда, скраба на них нет. */
.sg--static .sg__on { opacity: 1; }

/* ==========================================================================
   1. ТАБЛО — первый экран
   ========================================================================== */

.board {
  /* Скраб shell.js даёт --sp; в начале страницы он около 0.44, к концу — 1.
     --sw переводит это в честный ход переключателя 0 → 1.
     Порог и множитель подобраны замером: перещёлкивание проходит на первых
     ~140 px прокрутки и заканчивается к ~330, пока табло ещё на экране.
     С прежними 0.47 и 2.4 оно случалось после того, как панель телефона
     уже ушла под шапку, — движение было, а увидеть его было нельзя.
     Без JS и при выключенном движении --sp = 1, то есть табло уже открыто. */
  --sw: clamp(0, calc((var(--sp, 1) - 0.44) * 5.6), 1);
  --sgw: clamp(26px, 9vw, 72px);
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: var(--s6) var(--s7);
  border-bottom: var(--bw) solid var(--line);
}

/* Колонка растворяется в сетке табло: так табло и Гавчик встают рядом в один
   ряд и на телефоне, и на большом экране — без наложений. Ряды у табло и
   Гавчика заданы явно: у фигуры своя колонка, и автоматическая раскладка
   иначе уносит её вниз, под показания. */
.board__in {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38%;
  gap: var(--s5) var(--s4);
  align-items: start;
}
.board__col { display: contents; }
.board__head, .board__lead, .acts, .reads { grid-column: 1 / -1; }
.panel { grid-column: 1; grid-row: 2; margin-top: 0; }
.board__dog { grid-column: 2; grid-row: 2; }

/* Заголовок и печать — один блок: на телефоне печать падает под заголовок
   вправо, на большом экране встаёт у правого края той же строки. Прежнее
   место, правый нижний угол первого экрана, занято переключателем вариантов. */
.board__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s3) var(--s5);
  flex-wrap: wrap;
}
.board__title { flex: 1 1 100%; }
.board__stamp { margin-left: auto; }

/* --- Панель состояния ---------------------------------------------------- */

.panel {
  border: var(--bw) solid var(--line-strong);
  background: var(--sink);
  padding: var(--s3) var(--s4) var(--s5);
  position: relative;
}
/* Уголки прибора: две скобки по диагонали. */
.panel::before,
.panel::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: var(--bw-strong) solid var(--lime);
  pointer-events: none;
}
.panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.panel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.panel__bezel {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding-bottom: var(--s3);
  margin-bottom: var(--s4);
  border-bottom: var(--bw) solid var(--line);
}
.panel__dots { display: flex; gap: 5px; margin-left: auto; }
.panel__dots i { width: 5px; height: 5px; background: var(--line-strong); }
.panel__dots i:first-child { background: var(--pink); }

/* Рядом с Гавчиком колонка табло узкая: метка бортика занимает её всю,
   и три декоративных точки просто отталкивают метку на вторую строку. */
@media (max-width: 699px) {
  .panel { padding-inline: var(--s3); }
  .panel__dots { display: none; }
  .panel__bezel { padding-bottom: var(--s2); margin-bottom: var(--s3); }
}

/* Оба состояния лежат в одной ячейке и перещёлкиваются: на узком экране
   видно ровно одно слово, набранное дисплейным шрифтом. Четырнадцать
   сегментов на ячейке шириной в палец в буквы не складывались — проверено
   снимком при device_scale_factor=3, уменьшенным втрое. */
.states { display: grid; min-width: 0; }
.state {
  grid-area: 1 / 1;
  display: grid;
  row-gap: var(--s3);
  align-items: center;
  min-width: 0;
}
.state--shut { opacity: clamp(0, calc((0.42 - var(--sw)) * 14), 1); }
.state--open { opacity: clamp(0, calc((var(--sw) - 0.42) * 14), 1); }

/* Показания и слово идут в два яруса во всю ширину колонки. Круглая лампа
   на узком снята: цвет слова, цвет показаний и ряд ламп говорят то же самое,
   а место она занимала у обоих. */
.sg--lat { grid-row: 1; }
.state__lamp { display: none; }

/* Слово состояния: то, ради чего затевалось табло, должно читаться сразу.
   Кегль подобран замером ширины «ЗАКРЫТО» в каждой из пяти гарнитур против
   ширины колонки на 320 px — самом узком экране, который считаем. Дисплейная
   гарнитура меняется твиком, и один кегль на всех рвёт рамку прибора. */
.state__word {
  grid-row: 2;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: calc(clamp(1.15rem, 8.1vw, 2.6rem) * var(--khead));
  line-height: 0.95;
  letter-spacing: var(--tr-mega);
  text-transform: uppercase;
  white-space: nowrap;
}
html[data-face='inter'] .state__word,
html[data-face='golos'] .state__word { font-size: calc(clamp(1.1rem, 7.9vw, 2.5rem) * var(--khead)); }
html[data-face='montserrat'] .state__word { font-size: calc(clamp(1.05rem, 7.5vw, 2.4rem) * var(--khead)); }
html[data-face='unbounded'] .state__word { font-size: calc(clamp(0.95rem, 6.4vw, 2.1rem) * var(--khead)); }
.state--shut .state__word { color: var(--pink); }
.state--open .state__word { color: var(--lime); }

/* Латинские OFF и ON — работа, с которой сегментный алфавит справляется:
   три широкие ячейки, знакомая форма, читается с одного взгляда.
   Близнеца здесь нет вовсе, и это осознанно: четырнадцать погашенных штрихов
   на ячейке в сантиметр забивают просвет буквы — сравнение трёх вариантов
   на снимке в натуральную величину показало, что с любым видимым близнецом
   O и F сливаются. Принцип «погашенный сегмент нарисован так же тщательно»
   держат крупное слово на широком экране и цифры шагов, где он читается. */
.sg--lat { --sgw: 52px; justify-content: flex-start; }
.sg--lat .sg__gh { display: none; }

.state__lamp {
  position: relative;
  width: 13px; height: 13px;
  flex: none;
  border-radius: var(--pill);
  border: var(--bw) solid color-mix(in oklab, var(--lamp) 34%, transparent);
}
.state__lamp::after {
  content: '';
  position: absolute; inset: 2px;
  border-radius: var(--pill);
  background: var(--lamp);
}
.state--shut { --lamp: var(--pink); }
.state--open { --lamp: var(--lime); }
.state--shut .sg__on { color: var(--pink); }
.state--open .sg__on { color: var(--lime); }

/* Сегменты слова гаснут и зажигаются по индексу: развёртка слева направо.
   Множитель 16 делает переход скачком, а не плавным фейдом. Порядок правил
   важен: цвет состояния задан выше, прозрачность — здесь. */
/* Отступ 0.04 — мёртвая зона в самом начале. Без неё при --sw около нуля
   первый сегмент «О» уже светился на 8 %, и в погашенном слове висел
   одинокий лаймовый штрих. */
.sg--word.sg--open .sg__on { opacity: clamp(0, calc((var(--sw) - 0.04 - var(--i) * 0.016) * 16), 1); }
.sg--word.sg--shut .sg__on { opacity: clamp(0, calc((var(--i) * 0.016 + 0.06 - var(--sw)) * 16), 1); }
/* На узком слово набрано шрифтом, сегментного близнеца там нет. */
.sg--word { display: none; }

/* Ряд ламп: та же развёртка слева направо, но формой, которая на телефоне
   читается — прямоугольные лампы, а не буквы из сегментов. */
.bar {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 3px;
  margin-top: var(--s5);
}
.bar i {
  position: relative;
  height: 9px;
  background: color-mix(in oklab, var(--paper) 9%, transparent);
}
.bar i::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--lime);
  opacity: clamp(0, calc((var(--sw) - 0.04 - var(--i) * 0.085) * 22), 1);
}

/* --- Показания ----------------------------------------------------------- */

/* Две колонки, но только если помещаются: плейсхолдер `{{ЛИМИТ-УСТРОЙСТВ}}`
   моноширинный и не переносится, на половине строки уже 320 px он распирал
   страницу до горизонтальной прокрутки. Ниже 390 показания идут столбиком.
   Порог явный, а не auto-fit: тот на 540–699 px давал три колонки, и
   плейсхолдер вылезал снова. */
.reads {
  align-self: end;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s3) var(--s5);
  align-content: end;
  margin-top: var(--s3);
}
.read {
  display: grid;
  gap: 2px;
  padding-top: var(--s2);
  border-top: var(--bw) solid var(--line);
}
.read .label { display: block; letter-spacing: 0.1em; }
@media (min-width: 390px) { .reads { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.read__v { --rh: 1.55rem; height: var(--rh); overflow: hidden; }
.drum {
  display: block;
  transform: translateY(calc(-1 * var(--rh) * clamp(0, calc((var(--sw) - var(--th, 0.3)) * 24), 1)));
  transition: transform var(--d1) var(--e-snap);
}
.drum b {
  display: block;
  height: var(--rh);
  line-height: var(--rh);
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: calc(clamp(0.6875rem, 2.2vw, 0.9375rem) * var(--khead));
  letter-spacing: 0.04em;
  color: var(--paper);
  white-space: nowrap;
}
.drum b:first-child { color: var(--paper-dim); }
.drum b.ph { letter-spacing: 0.02em; }

/* --- Гавчик первого экрана -----------------------------------------------
   Он стоит рядом с табло с самого узкого экрана: первый экран телефона —
   главный, и встречать там должен маскот, а не одна приборная рамка.      */

.board__dog {
  align-self: end;
  justify-self: end;
  width: 100%;
  max-width: 260px;
}

/* ==========================================================================
   Табло на широком экране: ячейка крупная, сегментное слово читается,
   и оба состояния стоят в столбик — погашенное над горящим.
   ========================================================================== */

@media (min-width: 700px) {
  /* Слово из сегментов длинное — колонке табло отдаётся больше ширины,
     иначе ячейка мельчает ровно до той величины, на которой буквы и
     перестают собираться. */
  .board__in { grid-template-columns: minmax(0, 1fr) 30%; }
  .states { gap: var(--s3); }
  .state {
    grid-area: auto;
    display: flex;
    align-items: center;
    gap: var(--s4);
    opacity: 1;
  }
  .state__lamp { display: block; }
  .sg--lat { grid-row: auto; }
  /* Слово остаётся в дереве доступности: сегменты для экранного диктора
     ничего не значат, а состояние доступа он назвать обязан. */
  .state__word {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .sg--lat, .bar { display: none; }
  .sg--word { display: flex; }
  .state--shut .state__lamp::after { opacity: clamp(0, calc((0.42 - var(--sw)) * 14), 1); }
  .state--open .state__lamp::after { opacity: clamp(0, calc((var(--sw) - 0.42) * 14), 1); }
}

@media (min-width: 900px) {
  .board { padding-block: var(--s6) var(--s6); }
  .board__in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
    column-gap: var(--s7);
    row-gap: var(--s4);
  }
  .board__head { grid-row: 1; justify-content: flex-start; }
  .board__title { flex: 0 1 auto; }
  /* Печать встаёт вплотную к последней строке заголовка, а не улетает
     к правому краю: иначе она висит сама по себе над Гавчиком. */
  .board__stamp { margin-left: 0; margin-bottom: 0.22em; }
  .board__lead { grid-column: 1; grid-row: 3; }
  .acts { grid-column: 1; grid-row: 4; }
  .reads {
    grid-column: 1; grid-row: 5;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s4) var(--s6);
  }
  .board__dog { grid-row: 2 / 6; max-width: 420px; }
  .panel { padding: var(--s4) var(--s6) var(--s6); }
}

/* ==========================================================================
   2. ЧТО ЗАЖИГАЕТСЯ — плотная сетка ламп, цветного полотна нет
   ========================================================================== */

.lit { padding-block: var(--s11) var(--s10); }
.lit__h { margin-bottom: var(--s7); }

.lamps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2);
}
.lamp {
  position: relative;
  padding: var(--s5) var(--s3) var(--s4);
  text-align: center;
  border: var(--bw) solid color-mix(in oklab, var(--lime) 26%, transparent);
  background: color-mix(in oklab, var(--lime) 5%, transparent);
  color: var(--lime);
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: var(--t-btn);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Нить накала: короткая полоса под верхней кромкой лампы. */
.lamp::before {
  content: '';
  position: absolute; top: 7px; left: 50%;
  width: 26px; height: 2px;
  translate: -50% 0;
  background: var(--lime);
}

@media (min-width: 600px) { .lamps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ==========================================================================
   3. ДВЕ ДОРОГИ — утопленная плита, мелкий моноширинный набор
   ========================================================================== */

.roads { background: var(--sink); padding-block: var(--s11); }
.roads__h { margin-bottom: var(--s5); }
.roads__lead { max-width: var(--measure); color: var(--paper-dim); }

.toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--s8);
  border: var(--bw) solid var(--line-strong);
  background: var(--ink);
}
.toggle__side { padding: var(--s5) var(--s4); min-width: 0; }
.toggle__side--direct { border-left: var(--bw) solid var(--line-strong); }

.toggle__t {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s4);
  font-family: var(--f-ui);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--lime);
}
.toggle__side--direct .toggle__t { color: var(--pink); }
.toggle__t svg { flex: none; }

.toggle__list { display: grid; gap: var(--s2); }
.toggle__list li {
  font-family: var(--f-ui);
  font-size: calc(0.75rem * var(--ktext));
  letter-spacing: 0.02em;
  color: var(--paper-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 760px) {
  .toggle__side { padding: var(--s6) var(--s7); }
  .toggle__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s5); }
  .toggle__list li { font-size: calc(0.8125rem * var(--ktext)); }
}

/* ==========================================================================
   4. ТАРИФЫ — ценовой тотем: поднятая плита, крупные показания
   ========================================================================== */

.totem { padding-block: var(--s10); }
.totem__in { position: relative; }
.totem__h { margin-bottom: var(--s4); }
.totem__col > .lead { margin-bottom: var(--s7); }

.rates { display: grid; gap: var(--s2); }
.rate {
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s2) var(--s3);
  padding: var(--s4) var(--s4);
  background: var(--raise);
  border: var(--bw) solid var(--line);
}
.rate--on { border: var(--bw-strong) solid var(--lime); }

.rate__lamp {
  width: 13px; height: 13px;
  border-radius: var(--pill);
  border: var(--bw) solid color-mix(in oklab, var(--lime) 34%, transparent);
}
.rate--on .rate__lamp { background: var(--lime); border-color: var(--lime); }

.rate__term {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: calc(0.95rem * var(--khead));
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.rate__price {
  font-size: calc(clamp(0.95rem, 4vw, 1.55rem) * var(--khead));
  justify-self: end;
  white-space: nowrap;
}
.rate__lim {
  grid-column: 1 / -1;
  display: block;
  letter-spacing: 0.08em;
  padding-top: var(--s2);
  border-top: var(--bw) solid var(--line);
}
.rate__lim b { font-weight: 500; }

.totem .acts--tight { margin-top: var(--s7); }

.totem__dog { width: 52%; max-width: 300px; margin: var(--s8) 0 0 auto; }
/* Печать ставится на куртку, а не на морду: голова карточки сверху. */
.totem__stamp { position: absolute; right: -6px; top: auto; bottom: 26%; }

@media (min-width: 900px) {
  .totem__in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr);
    column-gap: var(--s8);
    align-items: end;
  }
  .rate { padding: var(--s5) var(--s6); }
  .rate__term { font-size: calc(1.15rem * var(--khead)); }
  .totem__dog { width: 100%; max-width: 340px; margin: 0; }
  /* `bottom` обязательно сбросить. С заданными разом top и bottom у печати
     нет своей высоты: она растягивалась между ними и превращалась в чёрный
     прямоугольник во весь рост Гавчика. */
  .totem__stamp { right: 18%; top: 4%; bottom: auto; }
}

/* Срок, цена и лимит встают в одну строку только там, где четыре колонки
   реально помещаются. Ниже 1280 px моноширинный плейсхолдер цены шире своей
   доли и наползал на название срока — лимит остаётся отдельной строкой
   под ними. */
@media (min-width: 1280px) {
  .rate {
    grid-template-columns: 13px minmax(0, 1fr) auto auto;
    column-gap: var(--s5);
  }
  .rate__lim { grid-column: auto; border-top: 0; padding-top: 0; justify-self: end; }
  .rate__price { justify-self: end; }
}

/* ==========================================================================
   5. ПОДКЛЮЧЕНИЕ — три индикатора в ряд на поднятой полосе
   ========================================================================== */

.setup {
  background: var(--raise);
  border-block: var(--bw) solid var(--line);
  padding-block: var(--s11);
  position: relative;
}
.setup > .wrap { position: relative; }
.setup__h { margin-bottom: var(--s8); }

.steps { display: grid; gap: var(--s2); }
.step {
  padding: var(--s5) var(--s5) var(--s6);
  background: var(--sink);
  border: var(--bw) solid var(--line);
}
.step__n { --sgw: 44px; margin-bottom: var(--s4); }
.step__t { margin-bottom: var(--s2); }
.step__p { color: var(--paper-dim); font-size: var(--t-sm); }

.setup__dog { width: 44%; max-width: 240px; margin: var(--s7) 0 0 auto; }

@media (min-width: 760px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .step__n { --sgw: 52px; }
}
@media (min-width: 1080px) {
  .setup > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px;
    column-gap: var(--s8);
    align-items: end;
  }
  .setup__h { grid-column: 1 / -1; }
  .steps { grid-column: 1; }
  .setup__dog { grid-column: 2; width: 100%; max-width: 210px; margin: 0; }
}

/* ==========================================================================
   6. УСТРОЙСТВА — самый тихий экран, воздуха больше всего
   ========================================================================== */

.devices { padding-block: var(--s10); }
.devices__in { position: relative; }
.devices__h { margin-bottom: var(--s10); }

.kinds { display: grid; gap: var(--s8); }
.kind__i { width: 40px; height: 40px; color: var(--lime); margin-bottom: var(--s4); }
.kind__t { margin-bottom: var(--s1); }
.kind__p {
  font-family: var(--f-ui);
  font-size: calc(0.8125rem * var(--ktext));
  letter-spacing: 0.04em;
  color: var(--paper-dim);
}

.devices__note { margin-top: var(--s9); }
.devices__dog { width: 66%; max-width: 340px; margin: var(--s8) auto 0; }

@media (min-width: 760px) {
  .kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s7); }
}
@media (min-width: 1080px) {
  .devices__in { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: var(--s8); }
  .devices__h, .kinds, .devices__note { grid-column: 1; }
  .devices__dog { grid-column: 2; grid-row: 1 / 4; align-self: end; width: 100%; max-width: 300px; margin: 0; }
}

/* ==========================================================================
   7. ЧЕСТНО — единственная цветная плита во всю ширину
   ========================================================================== */

.honest {
  background: var(--lime);
  color: #0a0a0a;
  padding-block: var(--s10);
}
.honest__h { margin-bottom: var(--s8); }
.honest__in { display: grid; gap: var(--s8); }

.bounds { display: grid; gap: var(--s7); }
.bound {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: var(--s4);
  row-gap: var(--s2);
  padding-top: var(--s5);
  border-top: var(--bw-strong) solid #0a0a0a;
}
.bound__i { width: 34px; height: 34px; grid-row: 1 / 3; }
.bound__t { font-size: var(--t-h); }
.bound__p {
  font-size: var(--t-sm);
  /* Вторичный текст на лайме — затемнённый лайм, не серый: 10:1 по замеру. */
  color: color-mix(in oklab, #0a0a0a 76%, var(--lime));
}

/* Гавчик в лаймовой куртке на лаймовой плите слился бы — под него врезано
   тёмное окно, как экран в приборной панели. */
.honest__screen {
  background: var(--ink);
  border: var(--bw-strong) solid #0a0a0a;
  padding: var(--s5) var(--s5) 0;
  display: flex;
  justify-content: center;
}
.honest__dog { width: 74%; max-width: 300px; }

@media (min-width: 900px) {
  .honest__in { grid-template-columns: minmax(0, 1fr) minmax(0, 0.52fr); column-gap: var(--s9); align-items: end; }
  .honest__dog { width: 100%; max-width: 340px; }
}

/* ==========================================================================
   8. ВОПРОСЫ — плотный список, мордочка слева от вопроса
   ========================================================================== */

/* Низ подрезан: у списка вопросов внизу своя линия, и полный воздух секции
   складывался с воздухом полосы друзей в пустую полосу почти в экран. */
.faq { padding-block: var(--s10) var(--s7); }
.faq__h { margin-bottom: var(--s7); }

.qs { display: grid; }
.q {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: var(--s4);
  align-items: start;
  border-top: var(--bw) solid var(--line);
}
.q:last-child { border-bottom: var(--bw) solid var(--line); }
.q__face { width: 56px; margin-top: var(--s5); }

.q__d { min-width: 0; }
.q__s {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding-block: var(--s5);
  cursor: pointer;
  list-style: none;
}
.q__s::-webkit-details-marker { display: none; }
.q__s:focus-visible { outline: 2px solid var(--lime); outline-offset: -4px; }
.q__t { font-weight: 600; font-size: var(--t-body); }
.q__ico {
  width: 20px; height: 20px;
  flex: none;
  margin-left: auto;
  color: var(--lime);
  transition: rotate var(--d2) var(--e-snap);
}
.q__d[open] .q__ico { rotate: 45deg; }
.q__d[open] .q__t { color: var(--lime); }

.q__a { padding-bottom: var(--s6); max-width: var(--measure); }
.q__a p { color: var(--paper-dim); font-size: var(--t-sm); }
.q__link { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 760px) {
  .q { grid-template-columns: 72px minmax(0, 1fr); column-gap: var(--s5); }
  .q__face { width: 72px; }
  .q__t { font-size: calc(1.125rem * var(--ktext)); }
}

/* ==========================================================================
   9. ДРУЗЬЯ — узкая полоса перед подвалом, розовый сигнал
   ========================================================================== */

.friends { padding-block: var(--s7) var(--s9); }
.friends__in {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  column-gap: var(--s5);
  align-items: center;
  padding: var(--s5) var(--s5) 0;
  border: var(--bw) solid color-mix(in oklab, var(--pink) 40%, transparent);
  background: color-mix(in oklab, var(--pink) 4%, transparent);
}
.friends__dog { width: 96px; align-self: end; }
.friends__txt { padding-block: var(--s4) var(--s6); }
.friends__h { margin-bottom: var(--s3); }
.friends__txt p { color: var(--paper-dim); font-size: var(--t-sm); max-width: var(--measure); }

@media (min-width: 760px) {
  .friends__in { grid-template-columns: 150px minmax(0, 1fr); column-gap: var(--s7); padding-inline: var(--s7); }
  .friends__dog { width: 150px; }
}

/* ==========================================================================
   Подвал
   ========================================================================== */

.foot-cta__t { max-width: 20ch; }
.foot-col__list { display: grid; gap: var(--s3); margin-top: var(--s4); }
.foot-col__list a { color: var(--paper-dim); font-size: var(--t-sm); }
.foot-col__list a:hover { color: var(--lime); }
.foot-col__legal { margin-top: var(--s5); font-size: calc(0.8125rem * var(--ktext)); }
.site-foot__bar .logo__paw { width: 20px; height: 20px; }
.site-foot__bar .logo__word { font-size: calc(0.8125rem * var(--kui)); }