/* ==========================================================================
   Третий вариант компоновки «Ось и полка» — слой лендинга, страницы входа (#/login)
   и общих компонентов (превью 2026-10-09). Подключён последним, перебивает
   landing.css / depth.css / screens.css более точными селекторами.

   Правила (DIRECTION.md): центр — для моментов (герой, заголовки секций, финал, переключатель
   срока); левый край — для того, что читают (карточки, таблица, вопросы); два полюса — для
   того, что сравнивают и нажимают (полоса «Сначала проверьте», экосистема, подвал).
   Три ширины контента: полная (--wrap), средняя --col (800 / 960), узкая --col-narrow (720 / 840).
   Движение одним набором: opacity + сдвиг 10 px, 0.38 с, кривая --ease (depth.css).

   Содержание:
     0. Токены слоя
     1. .actbar — полка действия (ОБЩИЙ компонент, его же берёт кабинет и мини-апп)
     2. Шапка и меню
     3. Герой
     4. Секции: заголовки, ритм, «Почему», шаги, сравнение
     5. Полоса «Сначала проверьте» и тарифы
     6. Платформы, вопросы, финал, экосистема
     7. Подвал
     8. Вход
     9. Отклик и движение
   ========================================================================== */

/* --- 0. Токены слоя ------------------------------------------------------- */
:root {
  --col: 800px;          /* средняя ширина: таблица сравнения, вопросы, экосистема */
  --col-narrow: 720px;   /* узкая: финальная панель */
  --cta-w: 16.625rem;    /* ширина главной кнопки героя на ≥480: (34rem − 12 px) / 2 */
  --actbar-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 2200px) {
  :root { --col: 960px; --col-narrow: 840px; }
}


/* ==========================================================================
   1. .actbar — ПОЛКА ДЕЙСТВИЯ (общий компонент)
   Телефон и планшет ≤899: липкая полка над нижней панелью. Слева контекст/сумма,
   справа главная кнопка 48 px. Заменяет липкий «Пробный доступ» лендинга, полосу оплаты
   оформления и полосу пополнения. Ноутбук ≥900 — сама полка скрыта: там её роль играет
   sticky-карточка итога (её рисует кабинет).

   Как использовать в кабинете:
     <div class="actbar is-on">
       <p class="actbar-ctx"><span class="actbar-sum">3 009 ₽</span><span class="actbar-sub">12 мес · 3 устройства</span></p>
       <button class="btn btn-primary">Оплатить</button>
     </div>
   · селекторы: .actbar, .actbar-ctx, .actbar-sum, .actbar-sub, .actbar .btn; состояние показа — .is-on;
   · положение: --actbar-bottom. На лендинге над краем экрана; в кабинете над нижней панелью:
       .cab { --actbar-bottom: calc(65px + 20px + env(safe-area-inset-bottom, 0px)); }
   · смена суммы: TG.actbar.tick(sumEl) (ui.js) или класс .is-tick на .actbar-sum;
   · показ/скрытие: TG.actbar.show(el, true|false) — ставит .is-on и inert.
   ========================================================================== */
.actbar {
  position: fixed;
  z-index: var(--z-sticky);
  left: 10px; right: 10px;
  bottom: var(--actbar-bottom);
  max-width: 34rem;
  margin-inline: auto;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 8px 8px 8px 20px;
  border-radius: 26px;
  background: var(--glass-fill), color-mix(in srgb, var(--bg) 80%, transparent);
  box-shadow: var(--glass-edge), 0 18px 40px -16px rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  /* закрыта: опущена за край и вне табуляции (visibility); открывается подъёмом 280 мс */
  transform: translateY(calc(100% + var(--actbar-bottom) + 12px));
  visibility: hidden;
  transition: transform 0.28s var(--ease), visibility 0s linear 0.28s;
}
.actbar.is-on { transform: none; visibility: visible; transition: transform 0.28s var(--ease), visibility 0s; }
@media (max-width: 899px) { .actbar { display: flex; } }
html.nav-open .actbar { transform: translateY(calc(100% + var(--actbar-bottom) + 12px)); visibility: hidden; }

.actbar-ctx { display: grid; gap: 2px; min-width: 0; margin: 0; }
.actbar-sum {
  display: inline-block; width: fit-content;
  font-size: 1.25rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums lining-nums; color: var(--ink);
}
.actbar-sub { font-size: var(--t-xs); line-height: 1.25; color: var(--ink-2); }
.actbar .btn { flex: 0 0 auto; min-height: 48px; padding-inline: 1.25rem; }
@media (max-width: 359px) { .actbar { padding-left: 14px; gap: var(--s-2); } .actbar .btn { padding-inline: 1rem; } }

/* «тик» суммы: scale 1 → 1.04 → 1, 180 мс */
@keyframes actbar-tick { 40% { transform: scale(1.04); } }
.actbar-sum.is-tick { animation: actbar-tick 0.18s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .actbar, .actbar.is-on { transition: opacity 0.1s linear, visibility 0s; transform: none; opacity: 0; }
  .actbar.is-on { opacity: 1; }
  .actbar-sum.is-tick { animation: none; }
}
/* === конец .actbar ======================================================= */


/* ==========================================================================
   2. Шапка и меню
   ========================================================================== */

/* Все кнопки шапки одной высоты: 40 на мыши, 44 на касании (раньше значок 44 стоял рядом с кнопками 40) */
@media (pointer: fine) {
  .nav .btn-icon { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
}
@media (pointer: coarse) {
  .nav .brand { min-height: 44px; }
  .nav-links a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* На телефоне поля шапки равны полям содержимого */
@media (max-width: 899px) {
  .nav .nav-inner.wrap-wide { padding-inline: var(--gutter); }
}
/* Надпись TEGRIDY на телефоне тонкая и тусклая: яркость, как в кабинете (подача, не материал) */
@media (max-width: 860px) {
  :root:not([data-theme='light']) .nav .brand-word { filter: brightness(1.5) contrast(1.05); }
}

/* Меню на телефоне: раскрывается высотой 0fr → 1fr, бургер превращается в крестик */
.nav-drawer {
  display: grid;
  grid-template-rows: 0fr;
  border-top: 0;
  visibility: hidden;
  transition: grid-template-rows 0.3s var(--ease), visibility 0s linear 0.3s;
}
.nav-drawer[data-open] { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 0.3s var(--ease), visibility 0s; }
.nav-drawer-clip { min-height: 0; overflow: clip; }
.nav-drawer[data-open] .nav-drawer-clip { border-top: 1px solid var(--line); }
@media (min-width: 1180px) { .nav-drawer { display: none; } }

.burger-i path { transform-box: fill-box; transform-origin: center; transition: transform 0.25s var(--ease), opacity 0.2s var(--ease); }
.nav-burger[aria-expanded='true'] .b1 { transform: translateY(5px) rotate(45deg); }
.nav-burger[aria-expanded='true'] .b2 { opacity: 0; }
.nav-burger[aria-expanded='true'] .b3 { transform: translateY(-5px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .nav-drawer, .nav-drawer[data-open] { transition: none; }
  .burger-i path { transition: none; }
}


/* ==========================================================================
   3. Герой — момент по центру
   ========================================================================== */

/* Пара кнопок: ≤479 столбиком на всю ширину, не шире 22rem; ≥480 в ряд, равные, контейнер ≤34rem */
.hero-actions {
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: center;
  gap: 12px;
  width: min(100%, 22rem);
  margin: 0 auto;
}
.hero-actions .btn { flex: 1 1 100%; width: auto; }
@media (min-width: 480px) {
  .hero-actions { width: min(100%, 34rem); }
  .hero-actions .btn { flex: 1 1 13.5rem; }
}

/* Подводка и подпись лежат на реках: подложка цветом фона (не тень и не свечение), чтобы токи не резали буквы */
.tile-hero .hero-lead,
.tile-hero .hero-note { text-shadow: 0 0 10px var(--bg), 0 0 22px var(--bg); }

/* Подпись: каждая фраза целиком, разделитель-точка только там, где фразы в одну строку */
.tile-hero .hero-note {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 10px;
  max-width: none; font-size: var(--t-xs);
}
.hero-note .nb { white-space: nowrap; }
@media (max-width: 819px) { .tile-hero .hero-note { max-width: 30rem; } }
@media (max-width: 559px) {
  .tile-hero .hero-note { gap: 2px 16px; max-width: 20rem; }
  .hero-note .sep { display: none; }
}

/* Короткий экран (телефон 568–700, ноутбук 720): главное действие остаётся в первом экране */
@media (max-height: 700px) {
  .tile-hero { padding-block: 12px 20px; }
  .tile-hero .hero-inner { gap: 12px; }
  .hero-coin { margin-bottom: 0; }
  .coin-shadow { display: none; }
  .tile-hero .hero-lead { font-size: 1rem; }
}
@media (max-height: 700px) and (max-width: 559px) {
  .tile-hero .hero-note { display: none; }
}

/* Телефон-ландшафт и очень низкое окно: предмет слева, текст и кнопки справа (два края) */
@media (max-height: 520px) and (min-width: 560px) {
  .tile-hero { min-height: 0; padding-block: 16px 24px; }
  .tile-hero .hero-inner {
    grid-template-columns: auto minmax(0, 32rem);
    column-gap: clamp(24px, 6vw, 56px);
    justify-content: center; justify-items: start; text-align: left; align-items: center;
  }
  .hero-coin { grid-column: 1; grid-row: 1 / span 4; margin: 0; }
  .hero-coin .coin { --d: 132px; }
  .tile-hero .t-display,
  .tile-hero .hero-lead,
  .tile-hero .hero-actions { grid-column: 2; }
  .tile-hero .t-display { font-size: clamp(1.9rem, 4.4vw, 2.6rem); max-width: none; }
  .tile-hero .hero-lead { margin-inline: 0; max-width: 34ch; }
  .tile-hero .hero-actions { justify-content: flex-start; margin-inline: 0; width: min(100%, 30rem); }
  .tile-hero .hero-note { display: none; }
}


/* ==========================================================================
   4. Секции: заголовки, ритм, «Почему», шаги, сравнение
   ========================================================================== */

/* Заголовок секции — по центру. Подводка стоит ближе к заголовку (16), чем к содержимому (32):
   она читается вместе с ним; без подводки заголовок отстоит от содержимого на 32. Одинаково у всех секций. */
.section-title { margin-bottom: var(--s-6); }
.why-lead, .how-lead {
  max-width: 42ch;
  margin: calc(var(--s-4) * -1) auto var(--s-6);
  text-align: center; text-wrap: balance; color: var(--ink-2);
}

/* «Почему»: карточки равной высоты, значок и текст слева (полка) */
.why-grid { align-items: stretch; }

/* Четыре шага: ≥820 в ряд по центру с линией-связкой, 561–819 два на два, ≤560 таймлайн */
.steps-row { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--s-7); }
@media (max-width: 819px) { .steps-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 820px) {
  /* в ряд: линия после каждого шага, кроме последнего (экранный слой прятал каждую вторую) */
  .steps-row li:nth-child(2n):not(:last-child)::after { display: block; }
}
@media (max-width: 560px) {
  .steps-row { grid-template-columns: 1fr; gap: var(--s-5); row-gap: var(--s-5); }
  .steps-row li {
    display: grid; grid-template-columns: 44px minmax(0, 1fr);
    column-gap: var(--s-4); row-gap: var(--s-1);
    justify-items: start; align-content: start; text-align: left;
  }
  .step-num { grid-column: 1; grid-row: 1 / span 4; width: 44px; height: 44px; margin: 0; font-size: var(--t-base); }
  .steps-row li > :not(.step-num) { grid-column: 2; }
  .steps-row li .t-h3 { padding-top: 8px; }
  /* вертикальная линия между номерами: от низа номера до верха следующего */
  .steps-row li:not(:last-child)::after {
    display: block; top: 52px; left: 21px; width: 2px; height: calc(100% + var(--s-5) - 60px);
    background: linear-gradient(var(--accent), var(--line));
  }
  :root.has-js .steps-row li:not(:last-child)::after { transform: scaleY(0); transform-origin: top center; }
  :root.has-js .steps-row li.seen:not(:last-child)::after { transform: scaleY(1); }
}
.how-link { align-self: start; white-space: nowrap; }

/* Сравнение: средняя ширина; шапка колонок читаема (ink-2) */
.compare-table, .faq-list { width: min(100%, var(--col)); }
.cmp-head { color: var(--ink-2); }
.cmp-l { display: none; }
.cmp-v { min-width: 0; }
@media (max-width: 760px) {
  /* шапки таблицы нет — подписи колонок стоят в каждой строке над значением */
  .cmp-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-2) var(--s-4); padding: var(--s-4); align-items: start; }
  .cmp-key { grid-column: 1 / -1; }
  .cmp-l {
    display: block; font-style: normal; font-size: var(--t-xs); font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 2px;
  }
  .cmp-free { display: grid; align-content: start; gap: 2px; }
  .cmp-row .cmp-us { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-2); row-gap: 2px; }
  .cmp-row .cmp-us .cmp-l { grid-column: 1 / -1; grid-row: 1; }
  .cmp-row .cmp-us::before { grid-column: 1; grid-row: 2; }
  .cmp-row .cmp-us .cmp-v { grid-column: 2; grid-row: 2; }
}


/* ==========================================================================
   5. Полоса «Сначала проверьте» и тарифы
   ========================================================================== */

/* Полоса — вступление к тарифам: ближе к ним, чем к таблице (по 128 до и 80 после вместо 192/192) */
.tile.risk.r5 { padding-block: var(--s-6); }
.tile.tariffs { padding-top: var(--s-7); }
.risk.r5 .r5-text .t-lead { max-width: none; text-wrap: balance; }
.risk.r5 .risk-inner .btn { min-width: 13.5rem; }
@media (max-width: 640px) { .risk.r5 .risk-inner .btn { width: 100%; max-width: 22rem; } }

/* Карточки тарифов равной высоты, кнопки на одной линии: список забирает остаток */
.plans { align-items: stretch; }
.plan { grid-template-rows: auto auto auto 1fr auto; }
/* Плашка «Чаще берут» — на верхней кромке карточки и не конкурирует с названием на любой ширине */
.plan .plan-flag { top: 0; right: var(--s-5); transform: translateY(-50%); }
@media (max-width: 739px) { .plans { max-width: 32rem; margin-inline: auto; } }
.plan-save { animation: v3-fade 0.2s var(--ease) both; }
@keyframes v3-fade { from { opacity: 0; } }

/* Переключатель срока и режима: один бегунок едет transform/width 220 мс (создаёт ui.js, .seg-run) */
.period-switch, .auth-modes { position: relative; isolation: isolate; }
.seg-run {
  position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 0;
  width: var(--w, 0px); transform: translateX(var(--x, 0px));
  border-radius: var(--r-pill);
  background: linear-gradient(160deg, #7c48f5, #5428ce);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.seg-run.is-live { transition: transform 0.22s var(--ease), width 0.22s var(--ease); }
.has-runner .seg[aria-pressed='true'] { background: transparent; box-shadow: none; }
.has-runner .seg { transition: color var(--dur-1) var(--ease); }
.has-runner .seg[aria-pressed='true'] { color: #fff; }
@media (prefers-reduced-motion: reduce) { .seg-run.is-live { transition: none; } .plan-save { animation: none; } }


/* ==========================================================================
   6. Платформы, вопросы, финал, экосистема
   ========================================================================== */

/* Платформы: семь равных плиток (значки на одной линии, подпись под значком), каждая — ссылка на инструкции */
.devices-strip > .t-sm { color: var(--ink-2); }
.pl1 .pl-list li, .pl1 .pl-list li:has(> [data-i18n='apps.router']) { width: 112px; min-width: 0; height: 104px; padding: 0; }
.pl1 .pl-list li > a {
  display: grid; justify-items: center; align-content: start; gap: 8px;
  width: 100%; height: 100%; padding: 20px 6px 0; border-radius: inherit; text-align: center;
}
.pl1 .pl-list li > a span { text-wrap: balance; line-height: 1.2; }
.pl1 .pl-list li > a:focus-visible { outline-offset: -2px; }
.pl1 .pl-list li:hover { transform: translateY(-2px); transition-duration: 0.2s; }
.pl1 .pl-list li:active { transform: scale(0.98); transition-duration: 80ms; }
@media (max-width: 520px) {
  .pl1 .pl-list li, .pl1 .pl-list li:has(> [data-i18n='apps.router']) { width: calc(25% - var(--s-2) * 3 / 4); height: 92px; }
  .pl1 .pl-list li > a { padding-top: 16px; padding-inline: 2px; }
}

/* Вопросы: слева, шеврон справа, колонка средней ширины; вопрос не крупнее, чем нужно на телефоне */
.faq-item summary { font-size: clamp(1rem, 0.92rem + 0.5vw, 1.25rem); min-height: 56px; }
.chev { transition: transform 0.2s var(--ease); }

/* Финал: заголовок секции (не 17 px) и кнопка той же ширины, что в герое */
.tile.final { padding-block: var(--s-8) var(--s-7); }
.final-wrap .final-inner {
  width: min(100%, var(--col-narrow)); max-width: none; margin-inline: auto;
  padding: clamp(2rem, 1.5rem + 3vw, 3.5rem) var(--s-5);
}
.final .final-inner .t-h2 {
  font-size: min(var(--t-h2), calc(0.6rem + 4.2vw), 2.6rem);
  max-width: 18ch; overflow-wrap: normal;
}
.final .final-inner .btn { width: min(100%, 22rem); }
@media (min-width: 480px) { .final .final-inner .btn { width: var(--cta-w); } }
@media (max-width: 420px) { .final-wrap .final-inner { padding-inline: var(--s-4); } }

/* Экосистема — после финала, спокойная строка с двумя краями: слева монета и текст, справа кнопка */
.tile.eco { padding-block: 0 var(--s-8); }
.eco-inner {
  width: min(100%, var(--col)); margin-inline: auto;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s-5); padding: var(--s-5);
  border-radius: var(--r-lg); text-align: left;
}
.coin.eco-coin { --d: 56px; }
.eco-text .t-h3 { margin-bottom: var(--s-1); }
.eco-text .t-body { font-size: var(--t-sm); max-width: 52ch; }
@media (max-width: 700px) {
  .eco-inner { grid-template-columns: auto minmax(0, 1fr); justify-items: stretch; text-align: left; gap: var(--s-4); }
  .eco-inner > .btn { grid-column: 1 / -1; width: 100%; }
  .eco-text .t-body { margin-inline: 0; }
}


/* ==========================================================================
   7. Подвал — одна система краёв: карточка ровно по колонке содержимого; бренд слева,
   колонки ссылок справа, копирайт слева на одной вертикали с брендом.
   ========================================================================== */
.foot.f2 { padding-inline: var(--gutter); }
.foot.f2 .f2-card { max-width: calc(var(--wrap) - 2 * var(--gutter)); }


/* ==========================================================================
   8. Вход (#/login)
   ========================================================================== */

/* Заголовок карточки по размеру карточки, а не секции: 46 px при ширине 346 был крупнее всего в ней */
.auth-title { font-size: clamp(1.4rem, 1.1rem + 1.3vw, 1.75rem); line-height: 1.2; }

/* Один акцент: в переключателе режима выбранный сегмент нейтральный, акцент — только у кнопки отправки */
.auth-modes { display: flex; width: 100%; }
.auth-modes .seg-run {
  background: color-mix(in srgb, var(--ink) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 20%, transparent);
}
.auth-modes.has-runner .seg[aria-pressed='true'] { color: var(--ink); }
.auth-modes:not(.has-runner) .seg[aria-pressed='true'] { background: color-mix(in srgb, var(--ink) 14%, transparent); color: var(--ink); box-shadow: none; }

/* Подсказка про длину пароля не дублирует ошибку под ней */
.field:has([aria-invalid='true']) .field-hint { display: none; }

/* Цели касания ≥44 */
@media (pointer: coarse) {
  .auth-switch, .auth-forgot .auth-switch { min-height: 44px; padding-inline: 0.5rem; }
}
.auth-foot { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.25rem; }

/* Низкое окно (телефон-ландшафт): форма в две колонки — слева выбор способа и Telegram, справа поля и кнопка */
@media (max-height: 520px) and (min-width: 640px) {
  .auth { padding-block: 16px; align-items: start; min-height: calc(100dvh - 64px); }
  .auth-card {
    align-items: start; /* форма занимает 6 строк и не растягивает первую (переключатель режима) */
    width: min(100%, 720px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--s-6); row-gap: var(--s-3);
    padding: 20px 24px; align-content: start;
  }
  .auth-card > .auth-modes, .auth-card > .auth-title, .auth-card > .auth-sub,
  .auth-card > .auth-tg, .auth-card > .auth-or { grid-column: 1; }
  .auth-card > .auth-form { grid-column: 2; grid-row: 1 / span 6; }
  .auth-card > .auth-forgot, .auth-card > .auth-foot { grid-column: 1; }
  .auth-card .field { gap: 4px; }
}


/* ==========================================================================
   9. Отклик и движение (один набор)
   ========================================================================== */

/* Нажатие — короткий отклик: scale .98, 80 мс (вместо сдвига на 1 px) */
.btn:active { transform: scale(0.98); transition-duration: 80ms; }
/* Наведение — на ступень вверх: -2 px, 0.2 с */
.plan:hover { transform: translateY(-2px); }
.window, .plan { transition-duration: 0.2s; }

/* Размытие фона под стеклом (backdrop-filter) — только у шапки, тарифов, финала, подвала и полки;
   у мелких плиток, таблицы и вопросов оно тормозило слабые телефоны (35 слоёв), а вид под ними не менялся.
   Плотность подложки держит цвет фона. */
.card.why-card,
.window,
.pl1 .pl-list li,
.period-switch,
.auth-modes,
.apps-strip li,
.btn:not(.btn-primary):not(.btn-quiet) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.card.why-card, .window { background-color: color-mix(in srgb, var(--bg) 58%, transparent); }
.pl1 .pl-list li, .period-switch, .auth-modes, .btn:not(.btn-primary):not(.btn-quiet) { background-color: color-mix(in srgb, var(--bg) 42%, transparent); }
.risk.r5 .risk-inner { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: color-mix(in srgb, var(--bg) 50%, transparent); }

/* Спокойный режим: всё выключено, остаётся короткое появление 100 мс */
@media (prefers-reduced-motion: reduce) {
  :root.has-js .reveal.is-in { transition: opacity 0.1s linear; transform: none; }
  .btn:active, .plan:hover, .pl1 .pl-list li:hover, .pl1 .pl-list li:active { transform: none; }
}


/* ==========================================================================
   10. Правки по итогам финишного ревью (2026-10-12)
   ========================================================================== */

/* 10.1 Полка .actbar лендинга. v3-cab.css (подключён позже) делает .actbar sticky и сдвигает её на 87 px
   под нижнюю панель кабинета; на лендинге панели нет, поэтому полку фиксируем по id (правила кабинета не трогаем). */
#actbar.actbar {
  position: fixed; z-index: var(--z-sticky);
  left: 10px; right: 10px; bottom: var(--actbar-bottom);
  display: none; gap: var(--s-3);
  padding: 8px 8px 8px 20px; border-radius: 26px;
  background: var(--glass-fill), color-mix(in srgb, var(--bg) 80%, transparent);
  box-shadow: var(--glass-edge), 0 18px 40px -16px rgba(0, 0, 0, 0.55);
}
@media (max-width: 899px) { #actbar.actbar { display: flex; } }
@media (max-width: 359px) {
  #actbar.actbar { padding-left: 14px; gap: var(--s-2); }
  #actbar .actbar-sub { display: none; }
}
/* низкое окно (ландшафт): компактная полка без подписи */
@media (max-height: 520px) {
  #actbar.actbar { padding: 5px 5px 5px 16px; border-radius: 22px; }
  #actbar .actbar-sub { display: none; }
  #actbar .btn { min-height: 44px; }
}
@media (prefers-reduced-transparency: reduce) {
  #actbar.actbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface); }
}

/* 10.2 Вход: колонка формы не раздувается шириной кнопки; длинный ярлык может перенестись */
.auth-form { grid-template-columns: minmax(0, 1fr); }
.auth-submit { min-width: 0; white-space: normal; line-height: 1.2; }
@media (max-width: 389px) { .auth-submit { padding-inline: 1rem; } } /* «Получить пробный доступ» в одну строку на 344–375 */

/* 10.3 Герой на ноутбуках 761–870 по высоте: монета следует за высотой окна, кнопки героя целиком в первом экране.
   На 900+ по высоте формула даёт прежние 19vw (решение владельца «логотип крупнее» сохранено). */
@media (min-width: 900px) and (min-height: 761px) {
  .hero-coin .coin { --d: clamp(140px, min(19vw, calc(100svh - 566px)), 288px); }
}
/* низкие телефоны (высота 521–700): монета 120–140 по DIRECTION */
@media (max-height: 700px) and (min-height: 521px) {
  .hero-coin .coin { --d: clamp(120px, 20svh, 140px); }
}
/* пауза монеты вне экрана: шорткат animation из coin.css сбрасывал play-state, нужна большая специфичность */
:root.has-js .hero-coin.is-paused .coin,
:root.has-js .hero-coin.is-paused .coin-shadow { animation-play-state: paused; }

/* светлая тема: русла не режут крупный заголовок, подложка цветом фона (как у подводки) */
:root[data-theme='light'] .tile-hero .t-display { text-shadow: 0 0 14px var(--bg), 0 0 30px var(--bg); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .tile-hero .t-display { text-shadow: 0 0 14px var(--bg), 0 0 30px var(--bg); }
}

/* 10.4 Тарифы: список возможностей не растягивает строки на остаток высоты — галочки соседних карточек на одних линиях */
.plan-feats { align-content: start; }

/* 10.5 Платформы: ссылка внутри плитки занимает всю высоту (li — block), значки на одной линии;
   на 700–959 семь плиток в один ряд без «сирот», на 521–699 ряды 4 + 3 */
.pl1 .pl-list li, .pl1 .pl-list li:has(> [data-i18n='apps.router']) { display: block; }
@media (min-width: 521px) and (max-width: 699px) {
  .pl1 .pl-list { gap: 8px; }
  .pl1 .pl-list li, .pl1 .pl-list li:has(> [data-i18n='apps.router']) { width: calc(25% - 6px); }
}
@media (min-width: 700px) and (max-width: 959px) {
  .pl1 .pl-list { flex-wrap: nowrap; gap: 8px; width: 100%; max-width: 44rem; } /* ширину задаём сами: при basis 0 список сжимался до 494 px */
  .pl1 .pl-list li, .pl1 .pl-list li:has(> [data-i18n='apps.router']) { flex: 1 1 0; width: auto; min-width: 0; height: 96px; }}

/* 10.6 Самый узкий телефон (320): сегменты срока в одну строку, сравнение — «бесплатный» и «Tegridy» друг под другом */
@media (max-width: 359px) {
  .period-switch .seg { white-space: nowrap; padding-inline: 0.6rem; font-size: 0.875rem; }
  .cmp-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
}
/* 360: две колонки ещё держатся, но подпись «Бесплатный VPN» на две строки не должна переноситься */
@media (min-width: 360px) and (max-width: 374px) { .cmp-l { letter-spacing: 0.02em; } }

/* 10.7 Одна роль — одна ширина главной кнопки: полоса «Сначала проверьте» и экосистема как в герое */
.risk.r5 .risk-inner .btn { min-width: var(--cta-w); }
@media (min-width: 900px) { .eco-inner > .btn { min-width: var(--cta-w); } }
/* кнопка-значок шапки на 2560 по высоте равна кнопкам шапки (rem растёт на ≥2200) */
@media (pointer: fine) and (min-width: 2200px) {
  .nav .btn-icon { width: 42px; height: 42px; min-width: 42px; min-height: 42px; }
}

/* Надпись TEGRIDY в светлой теме темнее (владелец 2026-10-12): тот же металл, поверх затемняющий фильтр; тёмная тема не затронута */
:root[data-theme='light'] :is(.brand-word, .foot-word, .legal-word, .mark-s) { filter: brightness(0.5) contrast(1.25); }
@media (prefers-color-scheme: light) { :root:not([data-theme]) :is(.brand-word, .foot-word, .legal-word, .mark-s) { filter: brightness(0.5) contrast(1.25); } }