/*
 * Velius — лендинг.
 *
 * Стоит на тех же tokens.css и app.css, что кабинет: карточка, строка, плитка,
 * кнопка, поле и значок здесь те же самые, а не похожие. Четвёртая копия
 * токенов лендингу не нужна. Здесь — только раскладка страницы (сетки, отступы
 * секций) и то, чего в кабинете нет: крупная кнопка первого экрана, наведение
 * мышью, ссылки навигации и раскрывашки вопросов.
 *
 * Макеты: prototypes/Main.dc.html (1440) и LandingPhone.dc.html (390). Граница
 * между ними — 1100: уже этого раскладка компьютера не помещает экран клиента
 * рядом с текстом. Между телефоном и 1100 — телефонная раскладка колонкой не
 * шире 680, чтобы на планшете строки не растягивались на весь экран.
 */

html {
  scroll-behavior: smooth;
}

.l-page {
  --l-pad: 16px;
  --l-head-h: 60px;
  --l-jump-h: 52px;
  background: var(--bg-base);
}

.l-page .overline {
  margin: 0;
}

.l-page .field {
  margin-bottom: 0;
}

.l-wrap {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding-inline: var(--l-pad);
}

/* Разделы уезжают под липкую шапку — отступ на её высоту. */
.l-page section[id] {
  scroll-margin-top: calc(var(--l-head-h) + 8px);
}

/* Компьютер или телефон: каждая раскладка только прячет чужие блоки. Вернуть
   спрятанное через display: revert нельзя — он откатывает к умолчанию тега, а
   не к нашему правилу, и flex-строка становится блоком. */
@media (max-width: 1099.98px) {
  .l-desk {
    display: none !important;
  }

  /* На телефоне под шапкой ещё полоса разделов — раздел уезжает и под неё. */
  .l-page section[id] {
    scroll-margin-top: calc(var(--l-head-h) + var(--l-jump-h) + 8px);
  }
}

@media (min-width: 1100px) {
  .l-phone {
    display: none !important;
  }
}

.l-accent-ink { color: var(--accent); }
.l-dim-ink { color: var(--ink-dim); }

[data-icon] {
  display: inline-flex;
  flex: none;
}

/* ─────────────────────────────────────────── Новое: кнопки и ссылки */

.btn {
  text-decoration: none;
  white-space: nowrap;
}

.btn.is-large {
  min-height: 54px;
  padding: 0 26px;
  font-size: 16px;
}

/* Наведение. В кабинете его нет — там палец; на сайте есть мышь. */
@media (hover: hover) {
  .btn:not(:disabled):hover {
    background: var(--accent-deep);
  }

  .btn.is-ghost:not(:disabled):hover {
    background: var(--muted-soft);
    border-color: var(--outline-strong);
  }

  .auth-link:not(:disabled):hover,
  .l-link:hover {
    color: var(--accent-lift);
  }

  .l-navlink:hover {
    color: var(--ink);
  }

  .l-faq-q:hover {
    color: var(--accent);
  }
}

.l-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
}

/* ─────────────────────────────────────────── Шапка */

.l-head {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-base);
  border-bottom: var(--stroke) solid var(--glass-1-edge);
}

.l-head-in {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--l-head-h);
}

.l-brand {
  flex: 1;
  gap: 10px;
  font-size: 18px;
  color: var(--ink);
}

.l-brand .brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 11px;
  padding: 5px;
}

.l-head-actions {
  display: flex;
  gap: 10px;
}

/*
 * Разделы на телефоне — полоса под шапкой, листается вбок. Сверху, а не внизу:
 * низ экрана занят кнопками страницы и полосой жестов, а шапка и так липкая —
 * меню едет вместе с ней и всегда под пальцем. Выглядит как чипы кабинета:
 * текущий раздел подсвечен тем же акцентом, что выбранная сумма пополнения.
 */
.l-jump {
  position: relative;
  display: flex;
  gap: 6px;
  height: var(--l-jump-h);
  padding-bottom: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.l-jump::-webkit-scrollbar {
  display: none;
}

.l-jump-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border: var(--stroke) solid var(--glass-2-edge);
  border-radius: var(--r-chip);
  background: var(--glass-2-fill);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.l-jump-link.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.l-navlink.is-active {
  color: var(--ink);
}

/* ─────────────────────────────────────────── Первый экран */

.l-hero {
  padding-top: 32px;
}

.l-hero-badge {
  height: 28px;
  padding: 0 11px;
  font-size: 12px;
}

.l-hero h1 {
  margin: 18px 0 0;
  font-size: 36px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.l-lead {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.l-hero-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}

.l-hero-actions .btn {
  width: 100%;
}

/* Список с галочками — один на всю страницу: первый экран, сравнение,
   тарифы. */
.l-checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.l-checks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.45;
}

.l-checks li > [data-icon] {
  margin-top: 2px;
  color: var(--accent);
}

.l-hero-checks {
  margin-top: 22px;
  color: var(--ink-soft);
}

.l-hero-checks li {
  gap: 8px;
  font-size: 14px;
}

.l-hero-visual {
  margin-top: 32px;
}

/* Экран клиента. На телефоне рамки нет — карточка соединения стоит сама. */
.l-device,
.l-device-screen {
  display: contents;
}

/* Карточка соединения — та же, что на главной Android-клиента. */
.l-conn {
  padding: 14px;
}

.l-conn-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.l-conn-status {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.l-conn-proto {
  font-size: 11px;
  color: var(--ink-dim);
}

.l-conn-server {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.l-flag {
  flex: none;
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--glass-1-edge);
}

.l-conn-name {
  flex: 1;
  min-width: 0;
}

.l-conn-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.l-conn-sub {
  margin-top: 2px;
  font-size: 11px;
  color: var(--ink-dim);
}

.l-ping {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.l-conn .l-ping {
  font-size: 15px;
}

.dot.l-dot-ok {
  background: var(--ok);
}

.l-conn-mode {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  margin-top: 12px;
  padding: 0 12px;
  border-radius: var(--r-tile);
  background: var(--glass-2-fill);
  border: var(--stroke) solid var(--glass-2-edge);
}

.l-conn-mode-title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
}

.l-conn-mode-hint {
  font-size: 11px;
  color: var(--ink-dim);
}

/* Кнопка подключения: включено — акцентом и с ореолом, выключено — стеклом.
   Как в клиенте: подкрашенная выключенная читалась бы «почти включено». */
.l-power {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 54px;
  margin-top: 12px;
  border: var(--stroke) solid var(--glass-2-edge);
  border-radius: 18px;
  background: var(--glass-2-fill);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}

.l-power:active {
  transform: scale(0.975);
}

[data-power="on"] .l-power {
  border-color: transparent;
  background: var(--accent-strong);
  color: var(--accent-ink);
  box-shadow: var(--power-glow);
}

/* Счётчики и всплывающие карточки есть только у включённого. */
.l-page:not(.is-power-on) [data-power-only] {
  display: none !important;
}

.l-stats {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  animation: rise var(--dur) var(--ease) both;
}

.l-stats .stat {
  flex: 1 1 0;
  padding: 12px;
  text-align: left;
}

.l-stats .stat-value {
  font-size: 16px;
}

.l-stats .stat-label {
  margin-top: 2px;
}

.l-device-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--ink-dim);
}

/* Строка сервера из списка клиента — и она же строка режима в подписке. */
.l-servers {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.l-server {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: var(--r-tile);
  background: var(--glass-2-fill);
  border: var(--stroke) solid var(--glass-2-edge);
}

.l-server-body {
  flex: 1;
  min-width: 0;
}

.l-server-title {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.l-server-hint {
  margin-top: 2px;
  font-size: 11px;
  color: var(--ink-dim);
}

.l-server-pad {
  flex: none;
  width: 20px;
}

.tile.l-auto-tile {
  width: 30px;
  height: 30px;
  border-radius: var(--r-xs);
}

/* ─────────────────────────────────────────── Секции */

.l-section {
  padding-top: 72px;
}

.l-sec-head h2 {
  margin: 12px 0 0;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.l-sec-head p {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.tile.l-tile-lg {
  width: 40px;
  height: 40px;
  border-radius: var(--r-tile);
}

.l-page h3 {
  margin: 22px 0 0;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.l-caption {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-dim);
}

/* ─────────────────────────────────────────── Авто-режим */

.l-auto-rows .row-hint {
  font-size: 12px;
}

.l-sub-card {
  margin-top: 20px;
  padding: 14px;
}

.l-sub-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 2px 10px;
}

.l-sub-head .overline {
  flex: 1;
}

.l-sub-countries {
  margin: 14px 2px 8px !important;
}

.l-compare {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.l-compare-card {
  padding: 20px;
}

.l-compare-card.is-accent,
.l-price.is-accent {
  border-color: var(--accent);
}

.l-compare-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.l-compare-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.l-compare .l-checks {
  margin-top: 16px;
}

.l-compare .l-checks li {
  font-size: 14px;
}

/* ─────────────────────────────────────────── Возможности */

.l-feature-rows {
  margin-top: 20px;
}

.l-feature-rows .row {
  align-items: flex-start;
  padding: 14px 0;
}

.l-feature-rows .row-hint {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.l-feature-rows .badge {
  margin-top: 8px;
}

.l-bento-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.l-bento-card p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.l-bento-card p.is-tight {
  margin-top: 8px;
}

.l-modes {
  padding: 14px 16px 6px;
  border-radius: var(--r-md);
  background: var(--glass-2-fill);
  border: var(--stroke) solid var(--glass-2-edge);
}

.l-modes .overline {
  margin-bottom: 4px;
}

.l-mode {
  min-height: 58px;
  padding: 9px 0;
}

.l-mode .row-title,
.l-mode .row-hint {
  display: block;
}

.l-mode[aria-pressed="true"] .row-title {
  color: var(--accent);
}

.l-mode-check {
  color: var(--accent);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.l-mode[aria-pressed="true"] .l-mode-check {
  opacity: 1;
  transform: none;
}

.l-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
}

.l-push {
  margin-top: auto;
  padding-top: 16px;
}

.l-own-foot {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: auto;
  padding-top: 16px;
}

.l-own-price {
  font-size: 17px;
  font-weight: 700;
}

.l-own-list {
  justify-content: center;
}

/* ─────────────────────────────────────────── Шаги */

.l-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.l-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.l-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tile.l-step-num {
  width: 40px;
  height: 40px;
  border-radius: var(--r-tile);
  font-size: 17px;
  font-weight: 700;
}

.l-step-body {
  min-width: 0;
}

.l-step h3 {
  margin: 0;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.l-step p {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ─────────────────────────────────────────── Тарифы */

.l-plan-tabs {
  margin-top: 20px;
}

.l-prices {
  margin-top: 12px;
}

/* На телефоне показан один тариф — выбранный вкладкой. */
.l-price:not(.is-picked) {
  display: none;
}

.l-price {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-radius: var(--r-xl);
}

.l-price-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.l-price-name {
  font-size: 17px;
  font-weight: 700;
}

.l-price-sum {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 18px;
}

.l-price-value {
  font-size: 42px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.l-price-unit {
  font-size: 15px;
  color: var(--ink-soft);
}

.l-price-per {
  min-height: 20px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-dim);
}

.l-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 6px 6px 6px 14px;
  border-radius: var(--r-md);
  background: var(--glass-2-fill);
  border: var(--stroke) solid var(--glass-2-edge);
}

.l-stepper-label {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
}

.l-stepper-value {
  min-width: 26px;
  font-size: 19px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.l-price-list {
  margin-top: 20px;
  padding-top: 20px;
  border-top: var(--stroke) solid var(--glass-1-edge);
}

.l-price-cta {
  margin-top: 20px;
}

/* На телефоне у каждого тарифа своя карточка на весь экран, и главное действие
   в ней — одно: кнопка залита у всех трёх. */
.l-price .btn.is-ghost {
  border: 0;
  background: var(--accent-strong);
  color: var(--accent-ink);
  font-weight: 700;
}

.l-pay-note {
  display: flex;
  gap: 10px;
  margin: 14px 2px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Вкладки тарифов — та же обойма, что была у входа в кабинет. */
.l-plan-tabs .auth-tab[hidden] {
  display: none;
}

/* ─────────────────────────────────────────── Приложения */

.l-app-rows {
  margin-top: 20px;
}

.l-app-rows .row-hint {
  font-size: 12px;
}

.l-apk-version:not(:empty)::before {
  content: " · ";
}

/* В карточке версия — отдельной строкой под текстом: приклеенная к фразе
   через точку, она читается обрывком предложения. */
.l-app .l-apk-version {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-dim);
}

.l-app .l-apk-version::before {
  content: none;
}

.l-app .l-apk-version::first-letter {
  text-transform: uppercase;
}

.l-note {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.l-note > [data-icon] {
  margin-top: 1px;
}

/* ─────────────────────────────────────────── Вопросы */

.l-faq {
  display: grid;
  grid-template-areas:
    "intro"
    "list"
    "support";
}

.l-faq-intro { grid-area: intro; }
.l-faq-list { grid-area: list; }
.l-faq-support { grid-area: support; }

.l-faq-intro h2 {
  margin: 12px 0 0;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.l-faq-intro p {
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.l-faq-list {
  margin-top: 20px;
  padding: 2px 16px;
}

.l-faq-support {
  width: 100%;
  margin-top: 12px;
}

.l-faq-item + .l-faq-item {
  border-top: var(--stroke) solid var(--glass-1-edge);
}

.l-faq-q {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 64px;
  padding: 14px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}

.l-faq-q > span:first-child {
  flex: 1;
}

.l-faq-q [data-icon] {
  color: var(--ink-dim);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}

.l-faq-q[aria-expanded="true"] [data-icon] {
  transform: rotate(180deg);
  color: var(--accent);
}

.l-faq-a {
  margin: 0;
  padding: 0 8px 18px 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  animation: rise var(--dur) var(--ease) both;
}

/* ─────────────────────────────────────────── Подключиться */

.l-start-wrap {
  padding-bottom: 72px;
}

.l-start {
  padding: 24px 20px;
  border-radius: var(--r-xl);
}

.brand-mark.l-start-mark {
  width: 48px;
  height: 48px;
  border-radius: 17px;
  padding: 8px;
}

.l-start h2 {
  margin: 18px 0 0;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.l-start p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.l-start-form {
  margin-top: 20px;
}

.l-start-form .btn {
  margin-top: 12px;
}

.l-start p.l-start-alt {
  margin-top: 14px;
  font-size: 13px;
  text-align: center;
}

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

.l-foot {
  border-top: var(--stroke) solid var(--glass-1-edge);
}

.l-foot-in {
  display: flex;
  flex-direction: column;
  padding-top: 32px;
  padding-bottom: 40px;
}

.l-foot-brand .brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  padding: 5px;
}

.l-foot-brand .l-brand {
  font-size: 17px;
}

.l-foot-brand p {
  margin: 12px 0 0;
  max-width: 320px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.l-foot-col .overline {
  display: none;
}

.l-foot-col ul {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.l-foot-col[data-docs] .l-navlink {
  font-size: 13px;
  font-weight: 500;
}

.l-foot-copy {
  margin: 24px 0 0;
  font-size: 12px;
  color: var(--ink-dim);
}

/* ─────────────────────────────────────────── Компьютер */

@media (min-width: 760px) {
  .l-page {
    --l-pad: 32px;
  }
}

@media (min-width: 1100px) {
  .l-page {
    --l-pad: clamp(40px, 8.34vw, 120px);
    --l-head-h: 76px;
  }

  .l-wrap {
    max-width: 1440px;
  }

  /* Шапка */
  .l-head-in {
    gap: 40px;
  }

  .l-brand {
    flex: none;
    font-size: 19px;
  }

  .l-head-in .l-brand .brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    padding: 6px;
  }

  .l-nav {
    display: flex;
    flex: 1;
    gap: 28px;
  }

  /* Первый экран */
  .l-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 600px;
    gap: 48px;
    align-items: center;
    padding-top: 64px;
    padding-bottom: 40px;
  }

  .l-hero-badge {
    height: 30px;
    padding: 0 12px;
  }

  .l-hero h1 {
    margin-top: 24px;
    font-size: clamp(52px, 4.45vw, 64px);
    line-height: 1.04;
    letter-spacing: -0.035em;
  }

  .l-lead {
    max-width: 580px;
    margin-top: 22px;
    font-size: 18px;
  }

  .l-hero-actions {
    flex-direction: row;
    gap: 12px;
    margin-top: 36px;
  }

  .l-hero-actions .btn {
    width: auto;
  }

  .l-hero-checks {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 26px;
    margin-top: 32px;
  }

  .l-hero-visual {
    position: relative;
    height: 864px;
    margin-top: 0;
  }

  /* Экран клиента в рамке телефона. */
  .l-device {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 412px;
    height: 820px;
    padding: 10px;
    border-radius: 54px;
    background: var(--glass-2-fill);
    border: var(--stroke) solid var(--glass-2-edge);
    box-shadow: var(--shadow-lg);
  }

  .l-device-screen {
    display: block;
    position: relative;
    height: 100%;
    overflow: hidden;
    padding: 38px 16px 0;
    border-radius: 44px;
    background: var(--bg-base);
    border: var(--stroke) solid var(--glass-1-edge);
  }

  .l-device-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
  }

  .l-device-top .brand-mark {
    width: 30px;
    height: 30px;
    border-radius: 11px;
    padding: 5px;
  }

  .l-device-name {
    flex: 1;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  .l-device-btn {
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--r-tile);
    background: var(--glass-2-fill);
    border: var(--stroke) solid var(--glass-2-edge);
    color: var(--ink-soft);
  }

  .l-device-list-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    color: var(--ink-dim);
  }

  .l-device-list-head .overline {
    flex: 1;
  }

  .l-device-ago {
    font-size: 11px;
  }

  .l-device-list-head + .l-servers {
    margin-top: 8px;
  }

  .l-device-tabbar {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: flex;
    gap: 5px;
    height: 56px;
    padding: 5px;
    border-radius: 22px;
    background: var(--glass-3-fill);
    border: var(--stroke) solid var(--glass-3-edge);
  }

  .l-device-tabbar > span {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 17px;
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 500;
  }

  .l-device-tabbar > span.is-active {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 700;
  }

  .l-float {
    position: absolute;
    left: -40px;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 254px;
    padding: 12px 14px;
    background: var(--glass-3-fill);
    border-color: var(--glass-3-edge);
    box-shadow: var(--shadow-lg);
    animation: rise var(--dur-screen) var(--ease) both;
  }

  .l-float-a { top: 170px; }
  .l-float-b { top: 600px; }

  .l-float-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
  }

  .l-float-hint {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--ink-soft);
  }

  .l-device-caption {
    position: absolute;
    left: 188px;
    right: 0;
    bottom: 0;
    margin: 0;
  }

  /* Секции */
  .l-section {
    padding-top: 120px;
  }

  .l-sec-head {
    max-width: 720px;
  }

  .l-sec-head.is-narrow {
    max-width: 600px;
  }

  .l-sec-head h2,
  .l-faq-intro h2 {
    margin-top: 14px;
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -0.03em;
  }

  .l-sec-head p {
    margin-top: 16px;
    font-size: 17px;
  }

  .tile.l-tile-lg {
    width: 44px;
    height: 44px;
  }

  /* Авто-режим */
  .l-auto {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 480px;
    gap: 72px;
    align-items: center;
  }

  .l-auto-rows {
    max-width: 600px;
    margin-top: 32px;
  }

  .l-sub-card {
    margin-top: 0;
    padding: 18px;
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
  }

  .l-sub-head {
    margin-bottom: 12px;
  }

  .l-sub-countries {
    margin: 16px 2px 8px !important;
  }

  .l-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 56px;
  }

  .l-compare-card {
    padding: 32px;
    border-radius: var(--r-xl);
  }

  .l-compare-head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .l-compare-title {
    gap: 14px;
    font-size: 22px;
  }

  .l-compare .l-checks {
    gap: 12px;
    margin-top: 24px;
  }

  .l-compare .l-checks li {
    font-size: 15px;
  }

  /* Возможности: плитки разной ширины */
  .l-bento {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: minmax(272px, auto) minmax(330px, auto) minmax(390px, auto);
    gap: 16px;
    margin-top: 48px;
  }

  .l-bento-card {
    padding: 32px;
    border-radius: var(--r-xl);
  }

  .l-bento-card.is-column,
  .l-bento-card > .is-column {
    display: flex;
    flex-direction: column;
  }

  .l-bento-card.is-wide {
    grid-column: span 2;
    display: grid;
    gap: 32px;
  }

  .l-bento-smart {
    grid-template-columns: minmax(0, 1fr) min(320px, 50%);
  }

  .l-bento-card.l-bento-own {
    grid-template-columns: minmax(0, 1fr) min(360px, 50%);
    gap: 40px;
  }

  .l-bento-card h3 {
    margin-top: 24px;
  }

  .l-bento-card h3.is-big {
    font-size: 24px;
  }

  .l-bento-card h3.is-first {
    margin-top: 22px;
  }

  .l-bento-smart p,
  .l-bento-own p {
    margin-top: 12px;
  }

  .l-own-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Шаги */
  .l-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 48px;
  }

  .l-step {
    display: block;
    padding: 28px;
    border-radius: var(--r-xl);
  }

  .tile.l-step-num {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .l-step h3 {
    margin-top: 24px;
    font-size: 20px;
    letter-spacing: -0.015em;
  }

  .l-step p {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.6;
  }

  /* Тарифы: все три рядом */
  .l-pricing-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
  }

  .l-stepper-card {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
    padding: 8px 8px 8px 18px;
  }

  .l-stepper-card .l-stepper-value {
    min-width: 28px;
    font-size: 20px;
  }

  .l-prices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: minmax(520px, auto);
    gap: 16px;
    margin-top: 48px;
  }

  .l-price:not(.is-picked) {
    display: flex;
  }

  .l-price[hidden] {
    display: none;
  }

  .l-price {
    padding: 32px;
  }

  .l-price-sum {
    margin-top: 24px;
  }

  .l-price-value {
    font-size: 48px;
  }

  .l-price-per {
    margin-top: 12px;
  }

  .l-price-list {
    gap: 12px;
    margin: 24px 0;
    padding-top: 24px;
  }

  .l-price-cta {
    margin-top: auto;
  }

  .l-price .btn.is-ghost {
    background: var(--glass-2-fill);
    border: var(--stroke) solid var(--glass-2-edge);
    color: var(--ink);
    font-weight: 600;
  }

  .l-pay-note {
    align-items: center;
    margin: 24px 0 0;
    font-size: 14px;
  }

  /* Приложения */
  .l-apps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: minmax(300px, auto);
    gap: 16px;
    margin-top: 48px;
  }

  .l-app {
    display: flex;
    flex-direction: column;
    padding: 28px;
    border-radius: var(--r-xl);
  }

  .l-app-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .l-app p {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-soft);
  }

  .l-app-foot {
    margin-top: auto;
    padding-top: 20px;
  }

  .l-note {
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 16px 18px;
  }

  .l-note > [data-icon] {
    margin-top: 0;
  }

  /* Вопросы: слева заголовок и поддержка, справа список */
  .l-faq {
    grid-template-columns: 400px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "intro list"
      "support list";
    column-gap: 80px;
  }

  .l-faq-list {
    align-self: start;
    margin-top: 0;
    min-height: 580px;
    padding: 4px 28px;
    border-radius: var(--r-xl);
  }

  .l-faq-support {
    align-self: start;
    justify-self: start;
    width: auto;
    margin-top: 28px;
  }

  .l-faq-q {
    font-size: 17px;
  }

  .l-faq-a {
    padding: 0 40px 20px 0;
  }

  /* Подключиться */
  .l-start-wrap {
    padding-bottom: 120px;
  }

  .l-start {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: 64px;
    align-items: center;
    padding: 56px;
  }

  .brand-mark.l-start-mark {
    width: 56px;
    height: 56px;
    border-radius: 20px;
    padding: 10px;
  }

  .l-start h2 {
    margin-top: 24px;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -0.03em;
  }

  .l-start p {
    max-width: 520px;
    margin-top: 14px;
    font-size: 17px;
  }

  .l-start-form {
    margin-top: 0;
  }

  /* Подвал: знак и три колонки */
  .l-foot-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(3, 200px);
    gap: 32px;
    padding-top: 48px;
    padding-bottom: 56px;
  }

  .l-foot-brand .brand-mark {
    width: 30px;
    height: 30px;
    border-radius: 11px;
  }

  .l-foot-brand p {
    margin-top: 14px;
  }

  .l-foot-brand p.l-foot-copy {
    margin-top: 28px;
    font-size: 12px;
    color: var(--ink-dim);
  }

  .l-foot-col .overline {
    display: block;
  }

  .l-foot-col ul {
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
  }

  .l-foot-col[data-docs] .l-navlink {
    font-size: 14px;
    font-weight: 600;
  }
}

/* Узкий компьютер: экран клиента тот же, но мельче. zoom, а не transform:
   он уменьшает и место, которое макет занимает в сетке, и всплывающие
   карточки вместе с рамкой — пропорции остаются макетными. */
@media (min-width: 1100px) and (max-width: 1359.98px) {
  .l-hero {
    grid-template-columns: minmax(0, 1fr) 480px;
  }

  .l-hero-visual {
    zoom: 0.8;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ─────────────────────────────────────────── Документы (terms.html, privacy.html)
   Та же шапка и тот же подвал, что у лендинга, а текст — одной колонкой в
   карточке: длинные строки на всю ширину экрана не читаются. */

.l-doc {
  padding-bottom: 72px;
}

/* Текст — колонкой в 820 точек по центру страницы: шапка и подвал у
   документа те же, что у лендинга, и колонка у левого края на широком экране
   оставляла справа пустую половину. */
.l-page .l-doc > * {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.l-doc h1 {
  margin: 12px auto 0;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.l-doc-date {
  margin: 10px auto 0;
  font-size: 14px;
  color: var(--ink-dim);
}

.l-doc-body {
  margin-top: 24px;
  padding: 24px;
}

.l-doc-body h2 {
  margin: 28px 0 0;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
}

.l-doc-body h2:first-child {
  margin-top: 0;
}

.l-doc-body p,
.l-doc-body li {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.l-doc-body p {
  margin: 10px 0 0;
}

.l-doc-body ul {
  margin: 8px 0 0;
  padding-left: 22px;
}

.l-doc-body .l-doc-lead {
  margin: 0;
  color: var(--ink);
}

.l-doc-body a {
  color: var(--accent-ink);
}

@media (min-width: 760px) {
  .l-doc h1 {
    font-size: 38px;
  }

  .l-doc-body {
    padding: 36px 40px;
  }
}

/* ─────────────────────────────── О сервисе: документы и поддержка
   Три карточки: две ведут в документы целиком (вся карточка — ссылка, в неё
   проще попасть пальцем), третья — контакты, где ссылки — сами адреса. */
.l-about {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 20px;
}

.card.l-about-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  color: var(--ink);
  text-decoration: none;
}

a.card.l-about-card {
  transition: transform var(--dur-fast, 130ms) var(--ease), border-color var(--dur-fast, 130ms) var(--ease);
}

a.card.l-about-card:active {
  transform: scale(0.98);
}

.l-about-card h3 {
  margin: 12px 0 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.l-about-date {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}

.l-about-card p {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.l-about-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  padding-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}

.l-about-contacts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.l-about-contacts li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
}

@media (min-width: 760px) {
  .l-about {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (min-width: 1100px) {
  .l-about {
    gap: 16px;
    margin-top: 48px;
  }

  .card.l-about-card {
    padding: 28px;
    border-radius: var(--r-xl);
  }

  a.card.l-about-card:hover {
    border-color: var(--accent);
  }
}