/* ══════════════════════════════════════════════════════════════════════════
   SONARO — продающая страница.

   Дом тот же, что у кабинета: те же чернила, та же охра, те же пилюли.
   Отличий ровно три, и каждое отвечает за то, чего на странице продукта
   не бывает:
     — тайм-коды слева: середина страницы рассказывает одну встречу,
       от нажатия до готового документа, и время там настоящее;
     — тёмная глава: единственное место, где страница замолкает и слушает;
     — заголовок тоньше и крупнее: витрина, а не рабочая поверхность.
   Оформление одно, светлое — как и во всём продукте.
   ══════════════════════════════════════════════════════════════════════════ */

/* Плавная прокрутка только здесь, а не в ките: по странице продукта ходят
   не якорями, а нажатиями, и там плавность мешает — лента должна вставать
   на реплику сразу. */
html{scroll-behavior:smooth}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ── каркас ──────────────────────────────────────────────────────────────── */
.hold{max-width:1180px;margin:0 auto;padding:0 var(--a5)}

/* Колонка для страниц, которые читают подряд, а не разглядывают: описание
   данных, справка. 660 px — те же 65 знаков, что и у подзаголовков. */
.col{max-width:660px}
.col h1{font-size:clamp(30px,4vw,44px);margin-bottom:var(--a4)}
.col h3{margin-top:var(--a7)}
.col ul{margin:0;padding-left:var(--a5);display:grid;gap:var(--a3)}
.col li{line-height:1.65;color:var(--ink-2)}
.col li b{color:var(--ink)}
.col li::marker{color:var(--mark)}
.col code{
  font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:.92em;background:var(--inset);border:1px solid var(--line);
  border-radius:6px;padding:1px 6px;color:var(--ink);
}

.part{padding:var(--a9) 0}
.part.pale{background:var(--sheet);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ── типографика ─────────────────────────────────────────────────────────── */

h1{font-weight:200;font-size:clamp(36px,5.6vw,72px);line-height:1.03}
h2{font-weight:300;font-size:clamp(28px,3.6vw,42px);line-height:1.1;margin-bottom:var(--a4)}

h3{font-size:20px;line-height:1.35;letter-spacing:-.01em;margin-bottom:var(--a2)}
h4{font-size:15.5px;line-height:1.45}
p{margin:0 0 var(--a4)}
/* 660 px — 66 знаков: средняя буква Onest на 19,5-м кегле замерена
   в 10,05 px через measureText настоящим текстом. Единица `ch` тут врёт —
   это ширина нуля, а он шире средней буквы. */
.big{font-size:19.5px;line-height:1.62;color:var(--ink-2);font-weight:400;max-width:660px}

/* ── пилюли: несущий элемент системы ─────────────────────────────────────── */

.badge.is-drawn .dot + .dot{margin-left:-3px}

button.badge{cursor:pointer;font-family:var(--text);padding-right:8px;
  transition:background .2s,border-color .2s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button.badge.is-said:hover{background:#3C332B}
button.badge.is-drawn:hover{border-color:var(--ink-3);background:var(--inset)}
.badge .chev{width:12px;height:12px;flex:none;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.75;margin-left:1px;
  transition:transform .2s}

/* ── кнопки ──────────────────────────────────────────────────────────────── */

.btn.tall{height:50px;padding:0 26px;font-size:16px;font-weight:600}

.gl.big{width:20px;height:20px}

/* ── сетки ───────────────────────────────────────────────────────────────── */
/* Дети сетки не раздуваются под своё содержимое: внутри лежат макеты шире
   узкого экрана, и они прокручиваются внутри себя, а не толкают страницу вбок.
   Без этого на 375 px появлялось двенадцать пикселей горизонтальной прокрутки —
   ровно на ширину плашки, спрятанной в шаге «одной встречи». */
.beat > *, .stage > *, .proof > *, .kinds > *, .sources > *,
.plans > *, .helps > *, .whos > *, .rules > *, .gauges > *, .gains > *{min-width:0}

/* ── рама вокруг макета ──────────────────────────────────────────────────── */
.mock{
  background:var(--sheet);border-radius:var(--r4);
  box-shadow:var(--up3);overflow:hidden;border:1px solid var(--line);
}

/* ── появление при прокрутке ─────────────────────────────────────────────
   Скрывает только скрипт и только если движение разрешено: без него
   и при `prefers-reduced-motion` страница отдаётся сразу собранной.
   Смещение 12 px — это проявление, а не выезд. */
.js-motion .rise{opacity:0;transform:translateY(12px)}
.js-motion .rise.up{opacity:1;transform:none;
  transition:opacity .38s cubic-bezier(.25,.46,.45,.94),transform .38s cubic-bezier(.25,.46,.45,.94)}

/* Имя рядом со знаком набрано заголовочным шрифтом — это часть логотипа,
   а не текст интерфейса. Правило одно на шапку и подвал. */
.brand{font-family:var(--face);font-weight:400;font-size:19px;letter-spacing:-.02em}

/* ── шапка ───────────────────────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:30;
  background:rgba(251,248,244,.88);
  backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent;transition:border-color .25s,background .25s;
}
.nav.stuck{border-bottom-color:var(--line)}
.nav .in{display:flex;align-items:center;gap:var(--a5);height:66px}
.nav .links{display:flex;gap:2px;margin-left:auto}
.nav .links a{
  display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:var(--pill);
  font-size:14px;font-weight:500;color:var(--ink-2);text-decoration:none;
  transition:background .2s,color .2s;
}
.nav .links a:hover{background:var(--inset);color:var(--ink)}
/* Ход в кабинет. Стоит рядом с главной кнопкой, но тише её: установить
   расширение — то, ради чего страницу открыли впервые, войти — то, ради
   чего возвращаются. Не прячется на узком экране вместе с разделами:
   разделы — это оглавление одной страницы, а это выход на другую. */
.nav .lnk-app{
  display:inline-flex;align-items:center;height:32px;padding:0 12px;
  font-size:14px;font-weight:500;color:var(--ink-2);text-decoration:none;
  border-radius:var(--pill);white-space:nowrap;transition:background .2s,color .2s;
}
.nav .lnk-app:hover{background:var(--inset);color:var(--ink)}
@media (max-width:860px){.nav .links{display:none}.nav .lnk-app{margin-left:auto}}
/* Кнопка укорачивается до глагола раньше, чем сжимается всё остальное:
 * целиком шапка встаёт начиная с 473 px, и до этой ширины страница ехала
 * вбок — на 420 px документ был шире окна на 53 px. Прежде обе правки шли
 * одним переломом на 400 px, и полоса 401…472 оставалась без обеих.
 *
 * ШАПКА-ЦЕЛИКОМ: 482px   (знак 115 + «Мой кабинет» 65 + кнопка 212
 * + два зазора по 24 + поля 24 с двух сторон; замер 30 августа проходом
 * по ширинам от 430 до 600 с шагом в два пикселя)
 *
 * Число выросло с 473 вместе с надписью: «Поставить расширение» заняло
 * 206 px, «Установить расширение» занимает 212. Слово длиннее на шесть
 * пикселей — и полоса, на которой страница ехала вбок, сдвинулась вся.
 * Отсюда правило: правка надписи на главной кнопке — это правка замера,
 * а не только текста.
 *
 * 520 — это 482 плюс запас: промах в узкую сторону стоит выезда страницы
 * вбок, в широкую — глагола без дополнения на четырёх десятках пикселей
 * ширины. */
@media (max-width:520px){.wide{display:none}}

/* Ниже 400 px не встают уже и знак с кнопкой: замер дал 366 px документа
 * при окне в 320. Кнопка здесь не прячется — это главное действие страницы.
 * Заодно поля сужаются: 24 px с каждой стороны на узком экране это шестая
 * часть строки. */
@media (max-width:400px){
  .nav .in{gap:var(--a3);height:58px}
  .hold{padding:0 var(--a4)}
  .nav .btn{padding:0 13px;font-size:13.5px}
}

/* ── герой ───────────────────────────────────────────────────────────────── */
.hero{padding:var(--a9) 0 var(--a8)}
/* 18ch, а не 15: предел подбирается под конкретный заголовок, и прежний был
   снят с прежнего — из коротких слов. Замер на 1440 (кегль 72, ch 62 px):
   «Провели онлайн‑встречу?» занимает 1082 px, при 15ch бокс равен 929 —
   вопрос ломался пополам и уходил в четыре строки. При 18ch (1115 px)
   вопрос встаёт целой строкой, ответ — двумя. */
.hero h1{max-width:18ch}
/* «онлайн-встречу?» держится одним куском: по чёрточке заголовок рвался,
   и на первой строке повисало «Провели онлайн-». Запрет включается только
   с 480 px — ниже слово шире строки и полезло бы за край. Замер: при кегле
   36 (нижняя граница clamp, держится до 643 px ширины) слово занимает
   350 px, а бокс на экране 375 равен 343 — вылезало на 7 px в поле. */
@media (min-width:480px){ .hero h1 .nb{white-space:nowrap} }
.hero .big{margin-top:var(--a5)}
/* Выделение в подзаголовке идёт основными чернилами — так в макете
   (`<b style="color:var(--ink)">`). Без цвета оно держалось на одной
   насыщенности: замер дал у `<b>` тот же rgb(107,96,88), что у обычного
   текста, — то есть главная строка первого экрана ничем не выделялась.
   Только герой: в тёмной главе те же чернила слились бы с фоном. */
.hero .big b{color:var(--ink)}
/* Второй абзац — про кадр к фразе — идёт ближе первого: между ними шаг
   мысли, а не смена блока. На общем отступе они читаются как два разных
   сообщения, и «вау» теряется, оставшись без опоры на предыдущую строку. */
.hero .big + .big{margin-top:var(--a3)}
/* Ряд кнопок один и тот же в трёх местах: первый экран, тёмная глава,
   последний экран. Правило одно, иначе они разъедутся по отступам. */
.go{display:flex;flex-wrap:wrap;gap:var(--a3);margin-top:var(--a6)}
.hero .facts{display:flex;flex-wrap:wrap;gap:var(--a2);margin-top:var(--a5)}
/* Строка про пробные минуты идёт сразу под кнопкой: снятие возражения
   работает, пока возражение ещё на экране. Число в неё подставляет скрипт
   из того же ответа сервиса, что и карточки тарифов. */
.hero .go + .tiny{margin-top:var(--a3)}

/* Три случая на первом экране. Вдавленные плашки без рамки: рамка и бумага
   заняты карточками «кому это» ниже по странице, и одинаковый вид читался бы
   как один перечень, показанный дважды. Ширина строки держится сеткой:
   при трёх колонках на 1180 это 46 знаков, на одной — потолок ниже. */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--a4);
  margin-top:var(--a6)}
@media (max-width:920px){.cases{grid-template-columns:1fr}}
.case{background:var(--inset);border-radius:var(--r3);padding:var(--a4) var(--a5)}
.case h3{font-size:16px;margin:0 0 var(--a2)}
.case p{font-size:14.5px;line-height:1.62;color:var(--ink-2);margin:0;
  max-width:560px}

/* ── фрагмент документа: он же главный довод ─────────────────────────────── */
.sheet-wrap{max-width:1000px;margin-top:var(--a8)}
.doc-top{
  display:flex;align-items:center;gap:var(--a3);flex-wrap:wrap;
  padding:13px var(--a5);border-bottom:1px solid var(--line);background:var(--inset);
  font-size:12.5px;color:var(--ink-3);
}
.doc-top b{color:var(--ink-2);font-weight:600;font-size:13.5px}
.doc-top .sep{width:1px;height:14px;background:var(--line-2);flex:none}

.claim{padding:var(--a6) var(--a7)}
@media (max-width:640px){.claim{padding:var(--a5) var(--a5)}}
.claim .kind{display:flex;align-items:center;gap:var(--a2);margin-bottom:var(--a3)}
.claim .kind .gl{color:var(--mark)}
.claim .kind span{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mark)}
.claim .say{
  font-family:var(--face);font-weight:300;letter-spacing:-.02em;
  font-size:clamp(21px,2.4vw,27px);line-height:1.28;margin:0 0 var(--a4);max-width:22ch;
}
/* 580 px — 67 знаков при замеренной средней букве 8,64 px на 17-м кегле. */
.claim .why{font-size:17px;line-height:1.68;color:var(--ink-2);margin:0;max-width:580px}
.claim .basis{display:flex;flex-wrap:wrap;gap:var(--a2);margin-top:var(--a5)}

/* ── доказательство: три источника одной строки ──────────────────────────── */
.proof{
  border-top:1px solid var(--line);background:var(--inset);
  padding:var(--a5) var(--a7);
  display:grid;grid-template-columns:1fr 232px;gap:var(--a5);align-items:start;
}
@media (max-width:820px){.proof{grid-template-columns:1fr;padding:var(--a5)}}
.quote{border-left:2px solid var(--mark);padding-left:var(--a4)}
.quote .who{display:flex;align-items:center;gap:var(--a2);margin-bottom:6px}
.quote .who b{font-size:13.5px;font-weight:600}
.quote .who .at{font-size:12.5px;color:var(--ink-3)}
/* 560 px — 73 знака при замеренной средней букве 7,65 px на 15-м кегле. */
.quote p{font-size:15px;line-height:1.68;margin:0;max-width:560px}
.quote p + p{margin-top:var(--a2)}
.quote .hear{display:flex;align-items:center;gap:var(--a3);margin-top:var(--a4)}
.wave{
  flex:1;height:26px;min-width:80px;border-radius:var(--r1);
  background:repeating-linear-gradient(90deg,
    var(--line-2) 0 2px, transparent 2px 5px);
  -webkit-mask-image:linear-gradient(90deg,#000 0 62%,rgba(0,0,0,.35) 62% 100%);
  mask-image:linear-gradient(90deg,#000 0 62%,rgba(0,0,0,.35) 62% 100%);
}
.wave.hot{background:repeating-linear-gradient(90deg,var(--mark-edge) 0 2px,transparent 2px 5px)}

/* ── кадр экрана: рисуем, а не подкладываем картинку ─────────────────────── */
.shot{
  border:1px solid var(--line-2);border-radius:var(--r2);overflow:hidden;
  background:var(--sheet);box-shadow:var(--up1);
}
.shot .bar{height:18px;background:var(--inset-2);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:3px;padding:0 6px}
.shot .bar i{width:5px;height:5px;border-radius:50%;background:var(--line-2);display:block}
.shot .body{padding:10px;display:grid;gap:5px}
.shot .ln{height:6px;border-radius:3px;background:var(--inset-2)}
.shot .ln.w1{width:80%}.shot .ln.w2{width:56%}.shot .ln.w3{width:68%}.shot .ln.w4{width:40%}
.shot .ln.hot{background:var(--mark-edge)}
.shot .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:3px}
.shot .grid4 i{height:14px;border-radius:3px;background:var(--inset);display:block}
.shot .grid4 i.hot{background:var(--mark-wash);border:1px solid var(--mark-edge)}
.shot-cap{display:flex;align-items:center;gap:6px;margin-top:var(--a2);font-size:12px;color:var(--ink-3)}

/* ── что вы получаете ────────────────────────────────────────────────────── */
.gains{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--a5);margin-top:var(--a7)}
@media (max-width:920px){.gains{grid-template-columns:1fr}}
.gains .one{padding-top:var(--a4);border-top:2px solid var(--ink)}
.gains .one h3{margin-bottom:var(--a2)}
/* Потолок нужен именно здесь: на узком экране три колонки схлопываются
   в одну, и без него строка уезжала на 80 знаков при удобных 65…75. */
.gains .one p{font-size:15px;line-height:1.65;color:var(--ink-2);margin:0;max-width:560px}

/* ══ живая сборка ═══════════════════════════════════════════════════════════
   Сцена, а не ролик: шаги переключает скрипт, каждый шаг — настоящая стадия
   конвейера. Финальное состояние остаётся на экране статикой, поэтому сцена
   читается и без движения — при `prefers-reduced-motion` она сразу собрана.
   ═══════════════════════════════════════════════════════════════════════════ */
.forge{max-width:1000px;margin-top:var(--a7)}
.forge-head{
  display:flex;align-items:center;gap:var(--a3);flex-wrap:wrap;
  padding:11px var(--a5);border-bottom:1px solid var(--line);background:var(--inset);
  font-size:12.5px;color:var(--ink-3);
}
.forge-head b{color:var(--ink-2);font-weight:600;font-size:13.5px}
.forge-head .ctl{display:flex;gap:var(--a2);margin-left:auto}

/* Ширина колонки с названием стадии считается от замера, а не на глаз.
 * Колонка ничего не обрезает и не переносит: узкая просто пускает надпись
 * в соседнюю, молча. «РАСШИФРОВКА» набирается на 105 px и в колонке
 * на 104 px упиралась в первую букву реплики — зазор был −1 px.
 *
 * ЗАГЛАВНАЯ-БУКВА: 9.53px   (Onest 11,5 px, 600, интервал .1em, набор
 * заглавными; замер 30 августа в браузере через measureText по самому
 * широкому из четырёх названий — короткие дают 8,6…9,1)
 *
 * 152 = 24 отступ слева + 116 под надпись + 12 отступ справа. Самая
 * длинная берёт 105, запас 11. Правый отступ задан явно: надпись не должна
 * доходить до края колонки, иначе зазор до текста держится на отступе
 * соседней ячейки — на нём он и держался, пока не кончился. */
.stage{display:grid;grid-template-columns:152px 1fr;gap:0}
@media (max-width:720px){.stage{grid-template-columns:1fr}}
.stage + .stage{border-top:1px solid var(--line)}
.stage .rail{
  padding:var(--a5) var(--a3) var(--a5) var(--a5);
  font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);position:relative;
}
@media (max-width:720px){.stage .rail{padding:var(--a4) var(--a5) 0}}
.stage.live .rail{color:var(--mark)}
.stage .load{padding:var(--a5)}

/* дорожка звука */
.hearline{display:flex;align-items:center;gap:var(--a3)}
.bars{flex:1;min-width:60px;height:34px;display:flex;align-items:center;gap:2px;overflow:hidden}
.bars i{flex:1;background:var(--line-2);border-radius:2px;display:block;height:20%}
.forge[data-live="1"] .bars i{animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{height:18%}50%{height:86%}}
.forge[data-live="1"] .bars i{background:var(--mark-edge)}
.clock{font-size:13px;font-weight:600;color:var(--ink-2);flex:none}

/* куски расшифровки */
.chunks{display:flex;flex-wrap:wrap;gap:var(--a2);transition:gap .45s ease}
.chunk{
  display:inline-block;padding:6px 12px;border-radius:var(--r2);
  background:var(--inset);border:1px solid var(--line);
  font-size:15px;line-height:1.5;color:var(--ink);
  transition:opacity .32s ease,transform .32s ease,border-radius .4s ease,
             background .4s ease,border-color .4s ease,padding .4s ease;
}
/* Скрытым шаг становится только при живом скрипте: без него и при выключенном
   движении сцена стоит собранной — это её последнее состояние, оно же итог. */
.js-forge .chunk{opacity:0;transform:translateY(8px)}
.js-forge .chunk.on{opacity:1;transform:none}
.chunks.merged{gap:0}
.chunks.merged .chunk{
  background:transparent;border-color:transparent;padding:6px 0;border-radius:0;
}
.chunks.merged .chunk + .chunk{padding-left:5px}
.tally{
  display:inline-flex;align-items:center;gap:6px;margin-top:var(--a3);
  transition:opacity .3s ease,transform .3s ease;
}
.js-forge .tally{opacity:0;transform:translateY(6px)}
.js-forge .tally.on{opacity:1;transform:none}

/* собранные реплики */
.turn{
  display:flex;gap:var(--a3);align-items:flex-start;
  transition:opacity .34s ease,transform .34s ease;
}
.js-forge .turn{opacity:0;transform:translateY(8px)}
.js-forge .turn.on{opacity:1;transform:none}
.turn + .turn{margin-top:var(--a4)}
/* Плашка тянется на всю колонку, поэтому узкая колонка съедает её
 * собственный отступ справа: «Собеседник» просил 107 px в колонке на 96,
 * и последняя буква вставала вплотную к краю плашки.
 *
 * БУКВА-ПЛАШКИ: 7.39px   (Onest 12,5 px, 500; замер 30 августа в браузере
 * через measureText по слову «Собеседник»)
 * ПОМИМО-НАДПИСИ: 33px   (точка 5 + зазор 6 + отступы плашки 22)
 *
 * 112 = 33 + 79 под надпись; самая длинная берёт 74, запас 5. */
.turn .side{flex:none;width:112px;display:flex;flex-direction:column;gap:3px}
.turn .side .at{font-size:12px;color:var(--ink-3)}
.turn .whole{font-size:15px;line-height:1.68;margin:0;max-width:560px;
  border-left:2px solid var(--line-2);padding-left:var(--a4)}
.turn.hot .whole{border-left-color:var(--mark)}
@media (max-width:560px){
  .turn{flex-direction:column;gap:var(--a2)}
  .turn .side{flex-direction:row;align-items:center;width:auto;gap:var(--a2)}
}

/* строка документа */
.yield{
  background:var(--mark-wash);border:1px solid var(--mark-edge);border-radius:var(--r3);
  padding:var(--a5);
  transition:opacity .4s ease,transform .4s ease;
}
.js-forge .yield{opacity:0;transform:translateY(10px)}
.js-forge .yield.on{opacity:1;transform:none}
.yield .kind{display:flex;align-items:center;gap:var(--a2);margin-bottom:var(--a2)}
.yield .kind .gl{color:var(--mark-deep)}
.yield .kind span{font-size:11.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mark-deep)}
.yield .say{font-family:var(--face);font-weight:300;letter-spacing:-.02em;
  font-size:23px;line-height:1.25;margin:0 0 var(--a3);max-width:20ch}
.yield .basis{display:flex;flex-wrap:wrap;gap:var(--a2)}

.forge-foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--a3);
  padding:13px var(--a5);border-top:1px solid var(--line);background:var(--inset);
  font-size:13px;color:var(--ink-2);
}
.forge-foot .step-of{margin-left:auto;font-size:12.5px;color:var(--ink-3)}

/* ══ одна встреча ═══════════════════════════════════════════════════════════
   Тайм-коды слева — не украшение и не нумерация «01 / 02 / 03»: это одна
   настоящая встреча от нажатия до готового документа, и время в них то же,
   что будет в записи.
   ═══════════════════════════════════════════════════════════════════════════ */
.tale{margin-top:var(--a7)}
.beat{display:grid;grid-template-columns:112px 1fr;gap:var(--a6);align-items:start;
  padding-bottom:var(--a7)}
.beat:last-child{padding-bottom:0}
@media (max-width:760px){
  .beat{grid-template-columns:1fr;gap:var(--a3)}
}
.beat .when{
  position:relative;text-align:right;padding-right:var(--a5);
  font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.01em;
  padding-top:2px;
}
.beat .when i{display:block;font-style:normal;font-size:12.5px;font-weight:500;color:var(--ink-3);margin-top:2px}
.beat .when::after{
  content:"";position:absolute;right:-5px;top:8px;
  width:9px;height:9px;border-radius:50%;
  background:var(--sheet);border:2px solid var(--mark);
}
.beat .when::before{
  content:"";position:absolute;right:0;top:20px;bottom:calc(-1 * var(--a7) - 4px);
  width:1px;background:var(--line-2);
}
.beat:last-child .when::before{display:none}
@media (max-width:760px){
  .beat .when{text-align:left;padding-right:0;padding-left:var(--a5)}
  .beat .when::after{right:auto;left:0}
  .beat .when::before{right:auto;left:4px;top:22px;bottom:-24px}
  .beat .when i{display:inline;margin-left:var(--a2)}
}
.beat .doing h3{margin-bottom:var(--a2)}
.beat .doing p{font-size:16px;line-height:1.68;color:var(--ink-2);margin:0;max-width:560px}
.beat .show{margin-top:var(--a5)}

/* ── плашка на странице созвона ──────────────────────────────────────────── */
.stagebox{
  background:var(--inset);border:1px solid var(--line);border-radius:var(--r3);
  padding:var(--a6) var(--a5);display:flex;justify-content:center;align-items:safe center;
  overflow-x:auto;
}
.tab{
  display:inline-flex;align-items:center;gap:var(--a2);flex:none;
  background:var(--sheet);border-radius:var(--pill);
  border:1px solid var(--mark-edge);box-shadow:var(--up3);
  padding:6px 8px 6px 14px;font-family:var(--text);
}
.tab .grip{width:14px;height:14px;flex:none;color:var(--ink-3);
  fill:none;stroke:currentColor;stroke-width:1.7}
.tab .clk{font-size:14px;font-weight:600;letter-spacing:-.01em;flex:none}
.tab .div{width:1px;height:20px;background:var(--line);flex:none;margin:0 2px}
/* `padding:0` здесь обязателен, а не для красоты. Класс `.btn` берётся
   из кита, и там у него `padding: 0 18px` — на кнопку в 32 px это 36 px
   отступов, то есть под значок остаётся ноль. Замер: ширина 37,6 px,
   места внутри 0, у всех пяти кнопок обеих плашек, и значки были не видны
   вовсе — вместо них оставались цветные круги фона.
   В ките для этого случая есть `.btn-icon`, он и сбрасывает отступ. */
.tab .btn{
  width:32px;height:32px;padding:0;border-radius:50%;flex:none;cursor:pointer;
  border:1px solid transparent;background:transparent;color:var(--ink-2);
  display:flex;align-items:center;justify-content:center;
  transition:background .18s,color .18s,border-color .18s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.tab .btn svg{width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tab .btn:hover{background:var(--inset)}
.tab .btn.pin{background:var(--mark);border-color:var(--mark);color:#fff}
.tab .btn.pin:hover{background:var(--mark-deep);border-color:var(--mark-deep)}
/* Снять кадр — та же охра, но контуром: два действия «сделать сейчас» рядом
   не могут быть одинаково громкими, а тише некуда — оба в один клик. */
.tab .btn.snap{background:var(--mark-wash);border-color:var(--mark-edge);color:var(--mark-deep)}
.tab .btn.snap:hover{background:var(--mark);border-color:var(--mark);color:#fff}
.tab .btn.halt:hover{background:var(--lost-wash);color:var(--lost)}
.rec-dot{width:9px;height:9px;border-radius:50%;background:var(--lost);flex:none;
  animation:beat 1.6s ease-in-out infinite}
@keyframes beat{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}
.tab .thumb{
  width:44px;height:28px;border-radius:7px;flex:none;overflow:hidden;
  border:1px solid var(--line-2);background:var(--sheet);
}
.tab .thumb .bar{height:5px;background:var(--inset-2);border-bottom:1px solid var(--line)}
.tab .thumb .body{padding:3px;display:grid;gap:2px}
.tab .thumb .ln{height:3px;border-radius:2px;background:var(--inset-2)}
.tab .thumb .ln.hot{background:var(--mark-edge)}
.tab .note{font-size:13px;font-weight:600;color:var(--ink);flex:none}

/* ── две дорожки ─────────────────────────────────────────────────────────── */
.tracks{display:grid;gap:var(--a3);max-width:520px}
.track{display:flex;align-items:center;gap:var(--a3)}
.track .nm{width:96px;flex:none;font-size:13px;font-weight:600;color:var(--ink-2)}
.track .ln{
  flex:1;height:22px;border-radius:var(--r1);
  background:repeating-linear-gradient(90deg,var(--line-2) 0 2px,transparent 2px 5px);
}
.track.me .ln{background:repeating-linear-gradient(90deg,var(--mark-edge) 0 2px,transparent 2px 6px)}

/* ── готовый документ ────────────────────────────────────────────────────── */
.ready{max-width:460px}
.ready .top{
  display:flex;align-items:center;gap:var(--a2);padding:var(--a4) var(--a5);
  border-bottom:1px solid var(--line);
}
.ready .top b{font-size:15px;font-weight:600}
.ready ul{list-style:none;margin:0;padding:var(--a3) var(--a5) var(--a5)}
.ready li{display:flex;align-items:center;gap:var(--a3);padding:7px 0;font-size:14.5px}
.ready li + li{border-top:1px solid var(--line)}
.ready li .gl{color:var(--mark);flex:none}
.ready li b{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums}

/* ── что в документе ─────────────────────────────────────────────────────── */
.kinds{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--a5);margin-top:var(--a7)}
@media (max-width:980px){.kinds{grid-template-columns:repeat(2,1fr)}}
@media (max-width:660px){.kinds{grid-template-columns:1fr}}
.kind-card{
  background:var(--sheet);border:1px solid var(--line);border-radius:var(--r3);
  padding:var(--a5);display:flex;flex-direction:column;gap:var(--a3);
  box-shadow:var(--up1);transition:box-shadow .22s,border-color .22s,transform .22s;
}
.kind-card:hover{box-shadow:var(--up2);border-color:var(--line-2);transform:translateY(-2px)}
.kind-card .hd{display:flex;align-items:center;gap:var(--a2)}
.kind-card .hd .gl{color:var(--mark)}
.kind-card .hd h3{margin:0;font-size:16px}
.kind-card .hd .n{margin-left:auto;font-size:13px;font-weight:600;color:var(--ink-3)}
.kind-card .ex{
  font-size:15px;line-height:1.6;margin:0;padding-left:var(--a4);
  border-left:2px solid var(--mark-edge);color:var(--ink);
}
.kind-card .un{font-size:13.5px;line-height:1.55;color:var(--ink-2);margin:0}
.kind-card .foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px;padding-top:var(--a2)}

/* ══ ночь: единственная глава, где страница слушает ═════════════════════════ */
.night{background:var(--night);color:var(--night-ink);padding:var(--a9) 0}
.night .sect{color:var(--night-mark)}
.night h2{color:var(--night-ink)}
.night .big{color:var(--night-ink-2)}
.night .tiny{color:#9E8F81}   /* 5,1 : 1 на ночном фоне; прежние #8E8074 давали 4,2 */
.night a{color:var(--night-mark)}
.night :focus-visible{outline-color:var(--night-mark)}

.sources{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--a5);margin-top:var(--a7)}
@media (max-width:980px){.sources{grid-template-columns:1fr}}
.src{
  background:var(--night-2);border:1px solid var(--night-line);border-radius:var(--r3);
  padding:var(--a5);display:flex;flex-direction:column;gap:var(--a3);
}
.src .hd{display:flex;align-items:center;gap:var(--a2);
  font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--night-mark)}
.src .hd .gl{color:var(--night-mark)}
.src .body{font-size:15px;line-height:1.66;color:var(--night-ink);margin:0}
.src .body em{font-style:normal;color:var(--night-ink-2)}
/* 4,7 : 1 на подложке источника. Подпись здесь несёт довод, а не украшает,
   и 3,9 : 1 прежнего оттенка для неё мало. */
.src .foot{margin-top:auto;font-size:12.5px;color:#9E8F81;display:flex;align-items:center;gap:6px}

.n-pill{
  display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:var(--pill);
  font-size:12.5px;font-weight:500;line-height:1.5;white-space:nowrap;
  background:#3A3128;color:var(--night-ink-2);border:1px solid transparent;
}
.n-pill.said{background:var(--night-ink);color:var(--night)}
.n-pill.mark{background:rgba(224,138,69,.14);color:var(--night-mark);border-color:rgba(224,138,69,.34)}
.n-pill .dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}

.n-act{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:34px;padding:0 15px;border-radius:var(--pill);
  border:1px solid var(--night-line);background:transparent;
  font-family:var(--text);font-size:13.5px;font-weight:500;color:var(--night-ink);
  cursor:pointer;transition:background .2s,border-color .2s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.n-act:hover{background:#39302700;background:#393027;border-color:#4C4136}
.n-act.round{width:34px;padding:0;flex:none}
.n-wave{
  flex:1;height:24px;min-width:60px;border-radius:var(--r1);
  background:repeating-linear-gradient(90deg,#4C4136 0 2px,transparent 2px 5px);
}
.n-wave.hot{background:repeating-linear-gradient(90deg,var(--night-mark) 0 2px,transparent 2px 5px);opacity:.85}

/* кадр на тёмном */
.n-shot{border:1px solid var(--night-line);border-radius:var(--r2);overflow:hidden;background:#191410}
.n-shot .bar{height:16px;background:#2A231C;border-bottom:1px solid var(--night-line);
  display:flex;align-items:center;gap:3px;padding:0 6px}
.n-shot .bar i{width:5px;height:5px;border-radius:50%;background:#4C4136;display:block}
.n-shot .body{padding:9px;display:grid;gap:5px}
.n-shot .ln{height:6px;border-radius:3px;background:#332B23}
.n-shot .ln.w1{width:78%}.n-shot .ln.w2{width:54%}.n-shot .ln.w3{width:66%}
.n-shot .ln.hot{background:rgba(224,138,69,.5)}
.n-shot .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.n-shot .grid4 i{height:14px;border-radius:3px;background:#2A231C;display:block}
.n-shot .grid4 i.hot{background:rgba(224,138,69,.22);border:1px solid rgba(224,138,69,.4)}

.vow{
  margin-top:var(--a7);border-top:1px solid var(--night-line);padding-top:var(--a6);
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--a6);
}
@media (max-width:820px){.vow{grid-template-columns:1fr;gap:var(--a5)}}
.vow h3{color:var(--night-ink);margin-bottom:var(--a2)}
.vow p{font-size:15px;line-height:1.66;color:var(--night-ink-2);margin:0;max-width:520px}

/* Настоящий кадр записи вместо рисованных полосок. Довод раздела в том,
   что мелкий текст с экрана читается глазом, и рисунком это не доказывается:
   на рисунке нечего читать. */
.n-real{
  width:100%;height:auto;display:block;
  border:1px solid var(--night-line);border-radius:var(--r2);
  background:#191410;
}

/* Кнопка в тёмной главе. Здесь человек только что увидел, что пункт можно
   проверить, — это лучшее место для второго предложения на всей странице,
   и в макете его не было вовсе. */
.night-go{margin:var(--a7) 0 0}
.night-go .btn{background:var(--night-mark);border-color:var(--night-mark);color:var(--night)}
.night-go .btn:hover{background:#EFA366;border-color:#EFA366}

/* ── чтение длинного разговора ───────────────────────────────────────────── */
.reader{max-width:1000px;margin-top:var(--a7)}
.reader-top{
  display:flex;align-items:center;gap:var(--a2);flex-wrap:wrap;
  padding:11px var(--a5);border-bottom:1px solid var(--line);background:var(--inset);
}
.seek{
  display:flex;align-items:center;gap:7px;height:32px;padding:0 13px;
  border-radius:var(--pill);background:var(--sheet);border:1px solid var(--line-2);
  font-size:13.5px;color:var(--ink-3);min-width:190px;
}
.reader-top .rate{margin-left:auto;display:flex;gap:6px}

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

   Пол считается от самого узкого отрезка, а не берётся круглым числом.
   Прежние 520 px обещали в этом самом комментарии «не огрызки по три
   буквы» и не давали обещанного: «Знакомство» занимает 11 % времени,
   то есть 57 px из 520 при нужном 91, и подпись обрезалась многоточием
   на четвёртой букве. Обрезка была видимой, но обещание всё равно
   не выполнялось.

   БУКВА-ОТРЕЗКА: 7.32px          (Onest 12 px, 500; замер 30 августа
   по самому широкому из пяти названий)
   ПОМИМО-НАДПИСИ-ОТРЕЗКА: 22px   (отступы 10 + 10 и рамка 1 + 1)

   880 = 866 с запасом: 866 — это «Знакомство» (10 знаков) на своей доле
   в 11 %. Ниже примерно 930 px окна дорожка теперь прокручивается там,
   где прежде сминалась, — это тот же размен, что был выбран изначально,
   только досчитанный. */
.map{overflow-x:auto;padding:var(--a4) var(--a5) var(--a2)}
.map-track{display:flex;gap:3px;min-width:880px}
.map button{
  flex:none;height:30px;border-radius:var(--r1);cursor:pointer;
  border:1px solid var(--line);background:var(--inset);
  font-family:var(--text);font-size:12px;font-weight:500;color:var(--ink-2);
  padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background .18s,border-color .18s,color .18s;
  touch-action:manipulation;
}
.map button:hover{background:var(--inset-2);color:var(--ink)}
.map button[aria-current="true"]{background:var(--mark-wash);border-color:var(--mark-edge);color:var(--mark-deep)}
.map-legend{padding:0 var(--a5) var(--a4);font-size:12.5px;color:var(--ink-3)}

.feed{max-height:340px;overflow-y:auto;padding:0 var(--a5) var(--a5);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){.feed{scroll-behavior:auto}}
.line{
  display:grid;grid-template-columns:120px 1fr;gap:var(--a4);
  padding:9px 0;border-top:1px solid var(--line);
  scroll-margin-top:var(--a4);
}
@media (max-width:640px){.line{grid-template-columns:1fr;gap:2px}}
.line .who{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.line .who .at{font-size:12px;color:var(--ink-3)}
/* 560 px — 67 знаков при замеренной средней букве 8,38 px на 15-м кегле. */
.line p{font-size:15px;line-height:1.68;margin:0;max-width:560px}
.line.doubt p{color:var(--ink-2)}
.line.doubt p i{font-style:normal;background:var(--lost-wash);color:var(--lost);
  padding:1px 5px;border-radius:5px}
.line.now{background:var(--mark-wash);border-radius:var(--r2);
  box-shadow:0 0 0 1px var(--mark-edge);padding-left:var(--a3);padding-right:var(--a3);
  margin-left:calc(-1 * var(--a3));margin-right:calc(-1 * var(--a3));border-top-color:transparent}
.line.now + .line{border-top-color:transparent}

.reader-foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--a3);
  padding:12px var(--a5);border-top:1px solid var(--line);background:var(--inset);
  font-size:13px;color:var(--ink-2);
}

.helps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--a5);margin-top:var(--a6)}
@media (max-width:980px){.helps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.helps{grid-template-columns:1fr}}
.help .gl{color:var(--mark)}
.help h4{margin:var(--a2) 0 4px}
.help p{font-size:14px;line-height:1.6;color:var(--ink-2);margin:0}

/* ── правила, на которых держится доверие ────────────────────────────────── */
.rules{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--a5) var(--a7);margin-top:var(--a7)}
@media (max-width:820px){.rules{grid-template-columns:1fr}}
.rule-one{display:grid;grid-template-columns:26px 1fr;gap:var(--a3);align-items:start}
.rule-one .gl{color:var(--mark);width:20px;height:20px;margin-top:2px}
.rule-one h3{font-size:17px;margin-bottom:4px}
.rule-one p{font-size:15px;line-height:1.65;color:var(--ink-2);margin:0;max-width:520px}

/* ── кому ────────────────────────────────────────────────────────────────── */
.whos{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--a5);margin-top:var(--a7)}
@media (max-width:980px){.whos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.whos{grid-template-columns:1fr}}
.who-card{
  border:1px solid var(--line);border-radius:var(--r3);padding:var(--a5);
  background:var(--sheet);display:flex;flex-direction:column;gap:var(--a2);
}
.who-card .role{font-size:11.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mark)}
.who-card h3{font-size:17px;margin:0}
.who-card p{font-size:14.5px;line-height:1.62;color:var(--ink-2);margin:0}

/* Три уточнения под блоком «бесплатно». Мелко и списком: это оговорки
   к сказанному выше, а не отдельное сообщение. Точки нет — вместо неё
   черта охрой: перечень читается как продолжение абзаца. */
.fine{list-style:none;margin:var(--a6) 0 0;padding:0;display:grid;gap:var(--a3);
  max-width:660px}
.fine li{position:relative;padding-left:var(--a4);font-size:15px;
  line-height:1.62;color:var(--ink-2)}
.fine li::before{content:'';position:absolute;left:0;top:.7em;width:10px;
  height:2px;background:var(--mark)}

/* ── практика автора и границы ───────────────────────────────────────────── */
/* Реплики набраны крупнее обычного текста и без кавычек-картинок: кавычки
   в самом тексте обычные, двойные, — так пишут люди. Черта охрой слева
   отделяет речь от текста продукта надёжнее, чем любой значок. */
.tales{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--a5);
  margin-top:var(--a7)}
@media (max-width:920px){.tales{grid-template-columns:1fr}}
.tale-one{margin:0;border-left:2px solid var(--mark);padding-left:var(--a4)}
.tale-one p{margin:0;font-size:17px;line-height:1.6;color:var(--ink);
  max-width:560px}

/* Границы. Тот же ряд, что у практики, но без черты: это не речь, а условия,
   и выделять их голосом нечем. */
.bounds{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--a5);
  margin-top:var(--a7)}
@media (max-width:920px){.bounds{grid-template-columns:1fr}}
.bound{padding-top:var(--a4);border-top:2px solid var(--ink)}
.bound h3{font-size:17px;margin:0 0 var(--a2)}
.bound p{font-size:15px;line-height:1.62;color:var(--ink-2);margin:0;
  max-width:560px}

/* ── замеры вместо отзывов ───────────────────────────────────────────────── */
.gauges{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--a7);margin-top:var(--a7)}
@media (max-width:920px){.gauges{grid-template-columns:1fr;gap:var(--a5)}}
.gauge .num{
  font-family:var(--face);font-weight:200;letter-spacing:-.03em;
  font-size:clamp(34px,4.4vw,52px);line-height:1;color:var(--mark);
  display:block;margin-bottom:var(--a3);
}
.gauge h3{font-size:17px;margin-bottom:6px}
.gauge p{font-size:14.5px;line-height:1.62;color:var(--ink-2);margin:0;max-width:400px}

/* ── цена ────────────────────────────────────────────────────────────────── */
/* Карточки пакетов живут в ките: их показывает и витрина, и кабинет.
   Две вёрстки одного разошлись бы, а заметил бы это тот, кто пришёл
   платить. Сборка — в `lib/plans.js`. */

/* ── вопросы ─────────────────────────────────────────────────────────────── */
.qa{max-width:840px;margin-top:var(--a6)}
.qa details{border-top:1px solid var(--line)}
.qa details:last-of-type{border-bottom:1px solid var(--line)}
.qa summary{
  display:flex;align-items:center;gap:var(--a4);padding:var(--a4) 0;
  cursor:pointer;list-style:none;font-size:17px;font-weight:600;line-height:1.45;
  color:var(--ink);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--mark)}
.qa summary .gl{margin-left:auto;flex:none;color:var(--ink-3);transition:transform .22s}
.qa details[open] summary .gl{transform:rotate(180deg);color:var(--mark)}
/* 560 px — 70 знаков при замеренной средней букве 8,00 px на 15,5-м кегле.
   На 620 px выходило 78 — на глаз незаметно, читать тяжело. */
.qa .ans{padding:0 0 var(--a5);font-size:15.5px;line-height:1.7;color:var(--ink-2);max-width:560px}
.qa .ans p{margin:0}
.qa .ans p + p{margin-top:var(--a3)}

/* ── последний экран ─────────────────────────────────────────────────────── */
.close{
  background:var(--mark-wash);border:1px solid var(--mark-edge);
  border-radius:var(--r4);padding:var(--a8) var(--a7);
}
@media (max-width:640px){.close{padding:var(--a6) var(--a5)}}
/* СТРОКА-ПРИЗЫВА: 729px   (самая длинная строка заголовка последнего экрана,
 * «записать ближайший созвон» при кегле 42; замер 30 августа в браузере
 * по прямоугольникам слов, анимации сняты)
 *
 * 16ch держались за прежнюю надпись в три слова и рвали нынешнюю на четыре
 * строки. При 27ch (бокс 995) выходит три: 613 · 589 · 729 — на 1440 и 1280,
 * и 538 · 517 · 640 на 1024.
 *
 * Разбивает строки не этот предел, а `text-wrap: balance` из `kit.css`:
 * жадный перенос уложил бы в первую строку всё до точки (912 px из 995),
 * а balance выравнивает три строки между собой. Отсюда следствие, из-за
 * которого стоит смотреть на снимок, а не на арифметику: от 24ch и до самой
 * колонки строки выходят одни и те же, предел на них не влияет. Он держит
 * меру на случай, когда надпись снова станет короткой, — тогда замерять
 * заново. */
.close h2{max-width:27ch}
.close .big{color:var(--ink-2);max-width:560px}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--a5);margin:var(--a7) 0 var(--a6)}
@media (max-width:820px){.steps3{grid-template-columns:1fr;gap:var(--a4)}}
.step3{display:grid;grid-template-columns:30px 1fr;gap:var(--a3);align-items:start}
.step3 .n{
  width:26px;height:26px;border-radius:50%;flex:none;margin-top:1px;
  background:var(--mark);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;
}
.step3 h4{margin-bottom:2px}
.step3 p{font-size:14px;line-height:1.6;color:var(--ink-2);margin:0}

/* ── обратная связь ──────────────────────────────────────────────────────── */
/* Карточка целиком ссылка: цель указателя во всю её ширину, а не в значок.
   Ширина держится по `.big` — 660 px: строка ответа читается в той же мерке,
   что и остальной текст страницы. */
.tg{
  display:flex;align-items:center;gap:var(--a4);
  max-width:660px;margin:var(--a7) 0 0;
  padding:var(--a4) var(--a5);
  background:var(--sheet);border:1px solid var(--line);border-radius:var(--r2);
  text-decoration:none;color:inherit;box-shadow:var(--up2);
}
.tg:hover{border-color:var(--line-2)}
/* Синий кружок Telegram. Единственное место на витрине, где краска не наша:
   знак узнают по цвету раньше, чем читают подпись. */
.tg .mark{
  width:40px;height:40px;border-radius:50%;flex:none;
  background:#229ED9;display:flex;align-items:center;justify-content:center;
}
.tg .txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.tg .txt b{font-size:15px;font-weight:600;color:var(--ink)}
.tg .txt span{font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.tg .at{
  margin-left:auto;flex:none;align-self:center;
  font-size:14px;font-weight:600;color:var(--mark);
}
.tg:hover .at{text-decoration:underline}
/* На узком окне подпись уходит под текст, а не сжимает его в столбик
   по одному слову. */
@media (max-width:620px){
  .tg{flex-wrap:wrap}
  .tg .at{margin-left:56px;width:100%}
}

/* ── подвал ──────────────────────────────────────────────────────────────── */
.page-foot{border-top:1px solid var(--line);padding:var(--a7) 0;background:var(--sheet)}
.page-foot .in{display:flex;flex-wrap:wrap;gap:var(--a5);align-items:center}
.page-foot .links{display:flex;flex-wrap:wrap;gap:var(--a5);margin-left:auto}
/* min-height 24 — цель указателя. Без него строка ссылки выходила 22 px
   и промахнуться по ней было легче, чем попасть. */
.page-foot .links a{display:inline-flex;align-items:center;min-height:24px;
  font-size:14px;color:var(--ink-2);text-decoration:none}
.page-foot .links a:hover{color:var(--mark);text-decoration:underline}

/* Ход на страницы площадок в подвале. Отдельной строкой под основным рядом:
   это не разделы страницы, а другие страницы, и мешать их в один список
   значит обещать переход внутри текущей. */
.page-foot .ploshchadki{margin-top:var(--a3);gap:var(--a4);align-items:baseline}
.page-foot .ploshchadki .tiny{color:var(--ink-3)}