/* ============================================================
   Biliardo — лендинг. Токены взяты из основного приложения
   (apps/web/src/index.css), переписаны на чистый CSS без Tailwind.
   ============================================================ */

/* ------------------------------------------------------------
   Inter — свой хостинг вместо Google Fonts. Четыре подмножества
   переменного шрифта: латиница, кириллица и два крошечных добора —
   знак тенге и казахские буквы (см. ниже, там же почему).
   font-display: swap — текст виден сразу, без «мигания пустотой».
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* ------------------------------------------------------------
   Знак тенге и казахские буквы — отдельными файлами.

   ЧТО БЫЛО НЕ ТАК. Ни ₸ (U+20B8), ни Ә Ғ Қ Ң Ө Ү Һ не попадали ни в
   одно из двух подмножеств: их там просто нет. Про ₸ в комментарии
   выше было написано, что он «отрисуется системным шрифтом, разницы
   не видно» — с одним символом это было почти правдой. С казахской
   версией правдой быть перестало: в слове «Қазақша» три буквы из семи
   рисовались бы системным шрифтом, а остальные — Inter. Разнобой
   видно прямо внутри слова.

   Полные подмножества latin-ext (85 КБ) и cyrillic-ext (26 КБ) брать
   незачем — из них нужны 15 знаков. Здесь ровно они: 1.2 КБ и 4.2 КБ.
   Оба вырезаны из того же Inter 4.001, что и основные файлы, поэтому
   метрики совпадают.

   unicode-range означает, что русская и английская версии страницы
   казахский файл не скачивают вообще: браузер берёт файл, только
   если на странице встретился знак из диапазона.

   Единственный знак, которого нет ни в одном подмножестве Inter, —
   ≈ (U+2248) в таблицах статей. Он остаётся системным: это
   симметричный математический знак среди цифр, а не буква внутри
   слова, и подмена в нём не читается.
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-tenge.woff2') format('woff2');
  unicode-range: U+20B8;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-kazakh.woff2') format('woff2');
  unicode-range: U+0492-0493, U+049A-049B, U+04A2-04A3, U+04AE-04AF,
    U+04BA-04BB, U+04D8-04D9, U+04E8-04E9;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --bg: #0a0f1c;
  --bg-2: #0f172a;

  --txt: #e2e8f0;
  --txt-2: #94a3b8;
  --txt-3: #7d8aa0;

  --green: #10b981;
  --green-l: #34d399;
  --green-d: #059669;
  --blue: #38bdf8;
  --gold: #fbbf24;
  --violet: #8b5cf6;

  /* Акценты для ТЕКСТА и иконок. Отдельно от --green-l, потому что тот
     работает ещё и заливкой: на светлом фоне мятный текст не читается
     (1.8:1), а мятная точка состояния — читается. */
  --accent: #34d399;
  --blue-t: #38bdf8;
  --gold-t: #fbbf24;
  --red-t: #f87171;
  --violet-t: #a78bfa;
  --pink-t: #e879f9;

  --card: rgba(255, 255, 255, .04);
  --card-h: rgba(255, 255, 255, .07);
  --elev: rgba(255, 255, 255, .06);
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  --line-3: rgba(255, 255, 255, .22);
  --grid-dot: rgba(255, 255, 255, .05);
  --track: rgba(255, 255, 255, .06);

  /* Поверхности, которые раньше были вписаны цифрами по месту */
  --tint: rgba(255, 255, 255, .015);
  --hdr-bg: rgba(10, 15, 28, .82);
  --mbar-bg: rgba(10, 15, 28, .92);
  --backdrop: rgba(5, 10, 22, .74);
  --modal-shadow: 0 40px 100px -30px rgba(0, 0, 0, .85);
  --step-n: rgba(226, 232, 240, .06);
  --dot-off: #64748b;
  --scroll-h: rgba(148, 163, 184, .4);
  --sel-bg: rgba(16, 185, 129, .3);
  --sel-txt: #fff;
  --orb: rgba(52, 211, 153, .45);

  /* Тёмный текст на зелёной кнопке и зелёная обводка ползунка */
  /* Тёмный текст на зелёной кнопке. Было #052e21 — на светлом конце
     градиента 7.7:1, а на тёмном всего 3.93:1, то есть ниже нормы для
     обычного текста. #00170f даёт 4.93:1 на тёмном конце и 9+ на светлом. */
  --on-accent: #00170f;
  --thumb-ring: #06231a;

  --mesh-a: rgba(16, 185, 129, .14);
  --mesh-b: rgba(56, 189, 248, .10);
  --mesh-c: rgba(139, 92, 246, .08);

  --grad: linear-gradient(135deg, #34d399 0%, #10b981 50%, #38bdf8 100%);
  --grad-gold: linear-gradient(135deg, #fde68a 0%, #fbbf24 50%, #f59e0b 100%);

  --glow-green: 0 0 24px rgba(16, 185, 129, .35);
  --glow-btn: 0 10px 30px -10px rgba(16, 185, 129, .7);
  --glow-btn-h: 0 14px 38px -10px rgba(16, 185, 129, .85);
  --glow-card: 0 24px 60px -30px rgba(16, 185, 129, .6);
  --glow-mock: 0 30px 80px -30px rgba(16, 185, 129, .45);
  --mock-bg: var(--card);
  --phone-frame: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
  --phone-scr: #070c16;
  --ease: cubic-bezier(.4, 0, .2, 1);

  --shell: 1200px;
  --pad: 20px;

  color-scheme: dark;
}

/* Один набор значений светлой темы — и для системной, и для ручной.
   Дублируется селектор, а не цвета: разъехаться нечему. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f6f8fb;
    --bg-2: #ffffff;

    --txt: #0b1220;
    --txt-2: #475569;
    --txt-3: #5b6b80;

    --accent: #047857;
    --blue-t: #0369a1;
    --gold-t: #b45309;
    --red-t: #b91c1c;
    --violet-t: #6d28d9;
    --pink-t: #a21caf;

    --card: rgba(15, 23, 42, .028);
    --card-h: rgba(15, 23, 42, .055);
    --elev: rgba(15, 23, 42, .05);
    --line: rgba(15, 23, 42, .10);
    --line-2: rgba(15, 23, 42, .17);
    --line-3: rgba(15, 23, 42, .26);
    --grid-dot: rgba(15, 23, 42, .07);
    --track: rgba(15, 23, 42, .12);

    --tint: rgba(15, 23, 42, .022);
    --hdr-bg: rgba(255, 255, 255, .84);
    --mbar-bg: rgba(255, 255, 255, .94);
    --backdrop: rgba(15, 23, 42, .45);
    --modal-shadow: 0 40px 100px -30px rgba(15, 23, 42, .3);
    --step-n: rgba(15, 23, 42, .07);
    --dot-off: #94a3b8;
    --scroll-h: rgba(71, 85, 105, .45);
    --sel-bg: rgba(4, 120, 87, .18);
    --sel-txt: #06231a;
    --orb: rgba(5, 150, 105, .5);

    --mesh-a: rgba(16, 185, 129, .13);
    --mesh-b: rgba(56, 189, 248, .11);
    --mesh-c: rgba(139, 92, 246, .07);

    --grad: linear-gradient(135deg, #059669 0%, #047857 48%, #0369a1 100%);
    --grad-gold: linear-gradient(135deg, #b45309 0%, #a16207 50%, #92400e 100%);

    /* На белом фоне зелёное сияние вокруг кнопок выглядит грязным пятном.
       Тени делаем нейтральными и слабее. */
    --glow-green: 0 0 0 4px rgba(4, 120, 87, .12);
    --glow-btn: 0 10px 24px -12px rgba(15, 23, 42, .35);
    --glow-btn-h: 0 14px 30px -12px rgba(15, 23, 42, .45);
    --glow-card: 0 20px 44px -28px rgba(15, 23, 42, .45);
    --glow-mock: 0 30px 70px -34px rgba(15, 23, 42, .45);
    --mock-bg: #0f172a;
    --phone-frame: linear-gradient(180deg, rgba(15, 23, 42, .10), rgba(15, 23, 42, .04));

    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --bg: #f6f8fb;
  --bg-2: #ffffff;

  --txt: #0b1220;
  --txt-2: #475569;
  --txt-3: #5b6b80;

  --accent: #047857;
  --blue-t: #0369a1;
  --gold-t: #b45309;
  --red-t: #b91c1c;
  --violet-t: #6d28d9;
  --pink-t: #a21caf;

  --card: rgba(15, 23, 42, .028);
  --card-h: rgba(15, 23, 42, .055);
  --elev: rgba(15, 23, 42, .05);
  --line: rgba(15, 23, 42, .10);
  --line-2: rgba(15, 23, 42, .17);
  --line-3: rgba(15, 23, 42, .26);
  --grid-dot: rgba(15, 23, 42, .07);
  --track: rgba(15, 23, 42, .12);

  --tint: rgba(15, 23, 42, .022);
  --hdr-bg: rgba(255, 255, 255, .84);
  --mbar-bg: rgba(255, 255, 255, .94);
  --backdrop: rgba(15, 23, 42, .45);
  --modal-shadow: 0 40px 100px -30px rgba(15, 23, 42, .3);
  --step-n: rgba(15, 23, 42, .07);
  --dot-off: #94a3b8;
  --scroll-h: rgba(71, 85, 105, .45);
  --sel-bg: rgba(4, 120, 87, .18);
  --sel-txt: #06231a;
  --orb: rgba(5, 150, 105, .5);

  --mesh-a: rgba(16, 185, 129, .13);
  --mesh-b: rgba(56, 189, 248, .11);
  --mesh-c: rgba(139, 92, 246, .07);

  --grad: linear-gradient(135deg, #059669 0%, #047857 48%, #0369a1 100%);
  --grad-gold: linear-gradient(135deg, #b45309 0%, #a16207 50%, #92400e 100%);

  --glow-green: 0 0 0 4px rgba(4, 120, 87, .12);
  --glow-btn: 0 10px 24px -12px rgba(15, 23, 42, .35);
  --glow-btn-h: 0 14px 30px -12px rgba(15, 23, 42, .45);
  --glow-card: 0 20px 44px -28px rgba(15, 23, 42, .45);
  --glow-mock: 0 30px 70px -34px rgba(15, 23, 42, .45);
  --mock-bg: #0f172a;
  --phone-frame: linear-gradient(180deg, rgba(15, 23, 42, .10), rgba(15, 23, 42, .04));

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Высота шапки 68 px плюс небольшой воздух. Было 88 — заголовок,
     к которому перешли по якорю, оказывался неоправданно низко. */
  scroll-padding-top: 76px;
  /* Снизу на телефоне висит панель действий: без запаса элемент,
     на который перешли табом, оказывался под ней. */
  scroll-padding-bottom: 84px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -.02em; font-weight: 700; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--sel-bg); color: var(--sel-txt); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-h); }

:focus-visible {
  outline: 2px solid var(--green-l);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--green);
  color: var(--on-accent);
  font-weight: 700;
}
.skip-link:focus { left: 8px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- каркас ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  /* viewport-fit=cover в мета-теге растягивает страницу под вырезы экрана.
     Без учёта боковых безопасных зон в альбомной ориентации айфона текст
     уходил под скруглённый угол и под «чёлку». */
  padding-inline: max(var(--pad), env(safe-area-inset-left)) max(var(--pad), env(safe-area-inset-right));
}
.shell--narrow { max-width: 880px; }

.section { position: relative; padding: 72px 0; }
@media (min-width: 768px) { .section { padding: 104px 0; } }

.section--alt { background: linear-gradient(180deg, transparent, var(--tint) 30%, transparent); }

/* Здесь пробовался content-visibility: auto для секций ниже экрана —
   он снимал ~200 мс с потока, но ломал две вещи: блоки не проявлялись
   при скролле (IntersectionObserver не видит пропущенные поддеревья) и
   переход по якорю уезжал мимо цели, потому что браузер прокручивал по
   оценочной высоте. Не возвращать без проверки этих двух сценариев. */

/* ---------- фон: mesh + сетка точек ---------- */
.bg-mesh, .bg-grid { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.bg-mesh {
  background-image:
    radial-gradient(ellipse at 18% 30%, var(--mesh-a) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 12%, var(--mesh-b) 0%, transparent 55%),
    radial-gradient(ellipse at 60% 90%, var(--mesh-c) 0%, transparent 55%);
}
.bg-grid {
  background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
}

.orbs { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.orb {
  position: absolute;
  border-radius: 50%;
  background: var(--orb);
  filter: blur(2px);
  animation: float 14s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(10px, -20px); }
}

/* ---------- типографика секций ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px;
  border: 1px solid rgba(16, 185, 129, .25);
  border-radius: 999px;
  background: rgba(16, 185, 129, .1);
  color: var(--accent);
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
}

.grad {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grad-gold {
  background: var(--grad-gold);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.sec-head { max-width: 760px; margin-inline: auto; text-align: center; }
.sec-head h2 {
  margin-top: 18px;
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 800;
  text-wrap: balance;
}
.sec-head p {
  margin-top: 16px;
  color: var(--txt-2);
  font-size: 16px;
  text-wrap: pretty;
}
@media (min-width: 768px) { .sec-head p { font-size: 17px; } }

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: 14px;
  font: inherit; font-weight: 600; font-size: 15px;
  cursor: pointer;
  text-align: center;
  transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; }

.btn--primary {
  background: linear-gradient(135deg, var(--green-l), var(--green-d));
  color: var(--on-accent);
  box-shadow: var(--glow-btn);
}
.btn--primary:hover { box-shadow: var(--glow-btn-h); transform: translateY(-1px); }

.btn--ghost {
  background: var(--elev);
  border-color: var(--line-2);
  color: var(--txt);
}
.btn--ghost:hover { background: var(--card-h); border-color: var(--line-3); }

.btn--wa { background: #25d366; color: #042413; box-shadow: 0 10px 30px -12px rgba(37, 211, 102, .7); }
.btn--wa:hover { background: #2ee06f; transform: translateY(-1px); }

.btn--lg { padding: 16px 28px; font-size: 16px; }
.btn--block { width: 100%; }

/* Главное действие страницы — скачать. Выделяем размером и светящимся
   кольцом, а не анимацией: страница считает TBT, и постоянно идущий кадр
   ради одной кнопки стоит дороже, чем даёт. Кольцо статичное, у него нет
   стоимости после первой отрисовки. */
.btn--dl {
  padding: 18px 34px;
  font-size: 17px;
  box-shadow:
    0 0 0 4px rgba(16, 185, 129, .16),
    0 14px 40px -12px rgba(16, 185, 129, .85);
}
.btn--dl:hover {
  box-shadow:
    0 0 0 6px rgba(16, 185, 129, .2),
    0 18px 48px -12px rgba(16, 185, 129, .95);
}

.hero__dl-note {
  margin-top: 12px;
  color: var(--txt-3);
  font-size: 13px;
  line-height: 1.5;
  /* min(): на узком телефоне фиксированная ширина вылезала бы за экран. */
  max-width: min(460px, 100%);
}

.price-note {
  margin-top: 10px;
  color: var(--txt-3);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ---------- карточки ---------- */
.card {
  position: relative;
  height: 100%;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card);
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card--hover:hover {
  background: var(--card-h);
  border-color: rgba(16, 185, 129, .35);
  transform: translateY(-3px);
  box-shadow: var(--glow-card);
}

.ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: rgba(16, 185, 129, .1);
  color: var(--accent);
}
.ico--blue { background: rgba(56, 189, 248, .1); color: var(--blue-t); }
.ico--gold { background: rgba(251, 191, 36, .1); color: var(--gold-t); }
.ico--violet { background: rgba(139, 92, 246, .12); color: var(--violet-t); }
.ico--pink { background: rgba(232, 121, 249, .12); color: var(--pink-t); }

.card h3 { margin-top: 18px; font-size: 18px; font-weight: 650; }
.card p { margin-top: 8px; color: var(--txt-2); font-size: 14.5px; }

.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- шапка ---------- */
.hdr {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
}
.hdr.is-stuck {
  background: var(--hdr-bg);
  backdrop-filter: blur(18px);
  border-bottom-color: var(--line);
}
.hdr__in { display: flex; align-items: center; gap: 18px; height: 68px; }

.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.02em; font-size: 19px; }
.brand img { width: 34px; height: 34px; }
.brand { white-space: nowrap; }
.brand span small { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: .04em; color: var(--txt-3); text-transform: uppercase; }

.nav { display: none; margin-left: auto; gap: 6px; }
@media (min-width: 1024px) { .nav { display: flex; } }
.nav a {
  padding: 8px 12px; border-radius: 10px;
  color: var(--txt-2); font-size: 14.5px; font-weight: 500;
  white-space: nowrap;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav a:hover { color: var(--txt); background: var(--card); }

.hdr__cta { display: flex; align-items: center; gap: 10px; margin-left: auto; }
@media (min-width: 1024px) { .hdr__cta { margin-left: 0; } }
/* На телефоне снизу всегда висит панель «Позвонить / Рассчитать» —
   третья кнопка в шапке была бы тем же действием ещё раз. */
@media (max-width: 767.98px) { .hdr__cta { display: none; } }
.hdr__cta .btn { padding: 10px 18px; font-size: 14px; }
/* На узких экранах в шапке остаётся одна кнопка — скачивание. «Связаться»
   никуда не девается: контакты есть в меню, в футере и в плавающей кнопке
   WhatsApp, а две кнопки рядом здесь начинают наезжать на меню. */
@media (max-width: 1150.98px) { .hdr__contact { display: none; } }
/* «Партнёрам» — не для владельца клуба, поэтому контуром, а не залитой:
   главная кнопка шапки остаётся одна.

   Место под неё берём у отступов: шапка упирается в ширину контейнера
   (1200 px), и без ужатия казахская и узбекская «Скачать» переносились
   на две строки. Между 1024 и 1279 px рядом с меню её нет вовсе — там
   ссылка остаётся в подвале; на планшете, где меню нет, место есть. */
@media (min-width: 1024px) and (max-width: 1279.98px) { .hdr__partner { display: none; } }
@media (min-width: 1280px) {
  .nav { gap: 0; }
  .nav a { padding-inline: 8px; }
  .hdr__cta .btn { padding-inline: 14px; white-space: nowrap; }
  .hdr__cta .hdr__partner { padding-inline: 12px; }
}

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: 44px 0 64px; }
@media (min-width: 768px) { .hero { padding: 72px 0 104px; } }

.hero__grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: 1.05fr .95fr; gap: 48px; } }

.hero h1 {
  margin-top: 22px;
  font-size: clamp(32px, 6.4vw, 60px);
  font-weight: 800;
  line-height: 1.05;
  text-wrap: balance;
}
/* Тезисы под заголовком hero: те же «галочки», но крупнее списков в тексте.
   Двойной класс — базовый .ticks идёт ниже по файлу и иначе перебил бы размеры. */
.ticks.hero__ticks { margin-top: 24px; max-width: 620px; gap: 12px; }
.ticks.hero__ticks li { font-size: 16px; }
.ticks.hero__ticks svg { margin-top: 2px; }
@media (min-width: 768px) { .ticks.hero__ticks li { font-size: 17.5px; } }

.hero__btns { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; }
@media (min-width: 560px) { .hero__btns { flex-direction: row; flex-wrap: wrap; } }

.hero__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  max-width: 560px; margin-top: 40px; padding-top: 28px;
  border-top: 1px solid var(--line);
}
.hero__stats b { display: block; font-size: clamp(20px, 3.4vw, 28px); font-weight: 800; letter-spacing: -.02em; }
.hero__stats span { display: block; margin-top: 4px; color: var(--txt-3); font-size: 12px; text-transform: uppercase; letter-spacing: .07em; }

/* макет приложения в hero */
.mock {
  position: relative;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--mock-bg);
  box-shadow: var(--glow-mock);
}
.mock__bar { display: flex; align-items: center; gap: 6px; padding-bottom: 16px; }
.mock__bar i { width: 10px; height: 10px; border-radius: 50%; }
.mock__bar i:nth-child(1) { background: rgba(239, 68, 68, .8); }
.mock__bar i:nth-child(2) { background: rgba(251, 191, 36, .8); }
.mock__bar i:nth-child(3) { background: rgba(52, 211, 153, .8); }
.mock__bar b { margin-left: 10px; color: var(--txt-3); font-size: 12px; font-weight: 500; }

.mock__tables { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tbl {
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--elev);
}
.tbl__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tbl__top b { font-size: 13.5px; font-weight: 650; }
.tbl__state { display: inline-flex; align-items: center; gap: 5px; color: var(--txt-3); font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; }
.tbl__state i { width: 6px; height: 6px; border-radius: 50%; background: var(--dot-off); animation: pulse 3s ease-in-out infinite; }
.tbl__state--on i { background: var(--green-l); }
.tbl__state--pause i { background: var(--gold); }
@keyframes pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.tbl__time {
  margin-top: 12px;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 19px; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.tbl__sum { margin-top: 3px; color: var(--txt-3); font-size: 12px; }

.mock__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; text-align: center; }
.mock__stats div { padding: 9px 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.mock__stats small { color: var(--txt-3); font-size: 11px; }
.mock__stats b { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 650; }

/* ---------- полоса преимуществ ---------- */
.strip { border-block: 1px solid var(--line); background: var(--tint); }
.strip__in { display: grid; gap: 14px; padding: 22px 0; }
@media (min-width: 640px) { .strip__in { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .strip__in { grid-template-columns: repeat(4, 1fr); padding: 26px 0; } }
.strip__i { display: flex; align-items: center; gap: 11px; font-size: 14.5px; font-weight: 550; }
.strip__i svg { flex: none; color: var(--accent); }

/* ---------- цены комплекта ---------- */
.price { display: flex; align-items: baseline; gap: 9px; margin-top: 14px; }
.price b { font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.price span { color: var(--txt-3); font-size: 12px; text-transform: uppercase; letter-spacing: .07em; }

.ticks { margin-top: 18px; display: grid; gap: 10px; }
.ticks li { display: flex; align-items: flex-start; gap: 10px; color: var(--txt-2); font-size: 14.5px; }
.ticks svg { flex: none; margin-top: 3px; color: var(--accent); }

.tag-best {
  position: absolute; top: 18px; right: 18px;
  padding: 4px 10px;
  border: 1px solid rgba(16, 185, 129, .3);
  border-radius: 999px;
  background: rgba(16, 185, 129, .14);
  color: var(--accent);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}

/* ---------- калькулятор ---------- */
.calc { display: grid; gap: 18px; margin-top: 48px; }
@media (min-width: 1024px) { .calc { grid-template-columns: 1.25fr .75fr; align-items: start; } }

.calc__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.calc__row h3 { font-size: 16px; font-weight: 650; }
.calc__row p { margin-top: 4px; color: var(--txt-3); font-size: 13.5px; }
.calc__val { text-align: right; }
.calc__val b { display: block; font-size: 32px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.calc__val span { color: var(--txt-3); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }

.stepper { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.stepper button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: none;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--elev);
  color: var(--txt);
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.stepper button:hover:not(:disabled) { background: var(--card-h); border-color: rgba(255, 255, 255, .24); }
.stepper button:disabled { opacity: .35; cursor: not-allowed; }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%;
  /* Высота — размер цели для пальца: 8 px дорожки давали площадь втрое
     меньше минимально допустимой. Видимая дорожка рисуется ниже, на
     псевдоэлементе, поэтому внешне ничего не изменилось. */
  height: 36px;
  background: transparent;
  cursor: pointer;
}
/* Заполненная часть дорожки. Долю (--fill) выставляет скрипт, цвета
   берутся из темы: раньше градиент собирался в JS с вписанными цветами
   и на светлой теме дорожка осталась бы тёмной. */
input[type="range"]::-webkit-slider-runnable-track {
  height: 8px; border-radius: 999px;
  background: linear-gradient(to right,
    var(--green) 0 var(--fill, 50%), var(--track) var(--fill, 50%) 100%);
}
input[type="range"]::-moz-range-track {
  height: 8px; border-radius: 999px;
  background: linear-gradient(to right,
    var(--green) 0 var(--fill, 50%), var(--track) var(--fill, 50%) 100%);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px;
  margin-top: -8px;
  border: 3px solid var(--thumb-ring);
  border-radius: 50%;
  background: var(--green-l);
  box-shadow: var(--glow-green);
  cursor: grab;
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  border: 3px solid var(--thumb-ring);
  border-radius: 50%;
  background: var(--green-l);
  box-shadow: var(--glow-green);
  cursor: grab;
}
.calc__scale { display: flex; justify-content: space-between; margin-top: 10px; color: var(--txt-3); font-size: 12px; }

.opts { display: grid; gap: 12px; margin-top: 26px; }
@media (min-width: 560px) { .opts { grid-template-columns: repeat(2, 1fr); } }

/* Комплект света стоит в том же ряду переключателей, что принтер и
   моноблок, но это не «ещё одна опция»: от него зависит, платный ли
   первый год тарифа. Поэтому во всю ширину и над остальными. */
@media (min-width: 560px) { .opt--main { grid-column: 1 / -1; } }
.opt {
  /* align-items: stretch обязателен: у <button> в UA-стилях стоит center,
     из-за чего внутренние строки не растягивались бы на всю ширину */
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  color: inherit; font: inherit; text-align: left;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.opt:hover { background: var(--card-h); }
.opt[aria-pressed="true"] {
  border-color: rgba(52, 211, 153, .45);
  background: rgba(16, 185, 129, .1);
  box-shadow: var(--glow-green);
}
.opt__top { display: flex; align-items: flex-start; justify-content: space-between; }
.opt__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--elev); color: var(--txt-2);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.opt[aria-pressed="true"] .opt__ico { background: rgba(16, 185, 129, .2); color: var(--accent); }
.opt__box {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border: 1.5px solid var(--line-3);
  border-radius: 8px;
  color: transparent;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.opt[aria-pressed="true"] .opt__box { border-color: var(--green); background: var(--green); color: var(--on-accent); }
.opt__name { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 2px; }
.opt__name b { font-size: 14.5px; font-weight: 650; }
.opt__name i { font-style: normal; color: var(--txt-3); font-size: 14px; font-weight: 650; }
.opt[aria-pressed="true"] .opt__name i { color: var(--accent); }
.opt small { color: var(--txt-3); font-size: 12.5px; line-height: 1.45; }

/* Липкий итог — только на широких экранах: на мобиле карточки идут друг за другом */
@media (min-width: 1024px) {
  .sum { position: sticky; top: 92px; }
}
.sum__cap { color: var(--txt-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em; }
.sum__list { display: grid; gap: 14px; margin-top: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.sum__li { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.sum__li--off { opacity: .75; }
.sum__li--off i { text-decoration: line-through; }
.sum__li b { font-size: 14px; font-weight: 600; }
.sum__li small { display: block; color: var(--txt-3); font-size: 12px; }
.sum__li i {
  font-style: normal; font-weight: 650; font-size: 14px; white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.sum__total { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 18px; }
.sum__total span { color: var(--txt-2); font-size: 14px; }
.sum__total b { font-size: clamp(26px, 4vw, 34px); font-weight: 800; letter-spacing: -.03em; }

/* Вторая строка итога: сколько клуб платит начиная со второго года.
   Прячем её от «первого года» размером, но не убираем — эту цифру
   человек должен увидеть до разговора, а не после. */
.sum__next {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-top: 6px;
  padding-top: 10px; border-top: 1px dashed var(--line);
}
.sum__next span { color: var(--txt-3); font-size: 13px; }
.sum__next b { font-size: 16px; font-weight: 700; color: var(--txt-2); }
.sum__gift { color: var(--accent); }

/* Строка о выгоде комплекта. Показывается только когда комплект снят —
   тогда первый год тарифа платный, и разница уже не очевидна из сметы. */
.sum__save {
  margin-top: 10px; padding: 10px 12px;
  border: 1px dashed var(--line-3); border-radius: 12px;
  color: var(--txt-2); font-size: 12.5px; line-height: 1.5;
}
.sum__save b { color: var(--txt); font-weight: 650; white-space: nowrap; }
.sum .btn { margin-top: 22px; }
.sum__note { margin-top: 12px; color: var(--txt-3); font-size: 12.5px; text-align: center; }
.kit-note {
  margin: 28px auto 0; max-width: 720px; text-align: center;
  color: var(--txt-2); font-size: 14px; line-height: 1.65;
}
.kit-note b { color: var(--txt); font-weight: 650; }

/* ---------- карточки тарифов ----------

   Три задачи этого блока: показать месячную цену крупно, показать скидку
   за год так, чтобы её нельзя было пропустить, и дать каждой карточке
   кнопку. Раньше кнопка была только у «Старта» — у тарифа, который
   продают чаще всего, купить было нечем. */

.plans { margin-top: 48px; }
/* Выделенная карточка приподнята, и над ней висит ленточка: обеим нужно
   место сверху, иначе они наезжают на вводный абзац раздела. */
@media (min-width: 1024px) { .plans { margin-top: 68px; } }

.plan { display: flex; flex-direction: column; }
.plan .price { margin-top: 16px; }
.plan .price b { font-size: 36px; }
.plan .ticks { margin-top: 20px; margin-bottom: 24px; }
/* Списки возможностей разной длины (6, 9 и 7 строк). Без этого кнопки
   стояли бы на трёх разных высотах. */
.plan__foot { margin-top: auto; }
/* Сноска занимает три строки независимо от длины текста. Без этого высота
   подписи разная в каждой карточке (и в каждом языке своя), и кнопки
   вставали на разных уровнях, хотя нижние края карточек совпадали. */
.plan__foot .price-note {
  /* Высота под три с половиной строки: сноски в трёх языках разной длины,
     и без общей высоты кнопки вставали на разных уровнях. Запас нужен —
     самая длинная (русский «Старт») занимает 3,4 строки. */
  margin-top: 10px; min-height: 5.2em;
  text-align: center; text-wrap: balance;
}

/* Вторая строка цены: полугодие, длинные сроки и выкуп. Мельче основной
   цены и плашки скидки, чтобы не спорить с ними за внимание. */
.price-alt {
  margin: 10px 0 0; color: var(--txt-3);
  font-size: 12.5px; line-height: 1.5;
}

/* Скидка за год. Вынесена из мелкого серого текста в отдельную плашку:
   она и есть то, ради чего платят вперёд, а в общей строке через «·»
   её просто не дочитывали. */
.price-year {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(16, 185, 129, .3);
  border-radius: 12px;
  background: rgba(16, 185, 129, .08);
  color: var(--txt-2);
  font-size: 13.5px; line-height: 1.35;
}
/* min-width: 0 — чтобы текст рядом с плашкой переносился на узком экране.
   По умолчанию элемент flex не сжимается ниже своего содержимого, и на
   телефоне строка вылезала бы за карточку. */
.price-year__t { min-width: 0; }
.price-year b { color: var(--txt); font-weight: 700; }
.price-year__off {
  flex: none;
  padding: 4px 9px;
  border: 1px solid rgba(16, 185, 129, .4);
  border-radius: 9px;
  background: rgba(16, 185, 129, .16);
  color: var(--accent);
  font-size: 14px; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* Цвет плашки берётся от иконки тарифа: три ступени должны читаться как
   лестница, а не как три одинаковые карточки. Цвета — токены темы,
   поэтому светлая тема подхватывает их сама. */
.plan--start .price-year {
  border-color: rgba(251, 191, 36, .3); background: rgba(251, 191, 36, .08);
}
.plan--start .price-year__off {
  border-color: rgba(251, 191, 36, .42); background: rgba(251, 191, 36, .16);
  color: var(--gold-t);
}
.plan--owner .price-year {
  border-color: rgba(139, 92, 246, .32); background: rgba(139, 92, 246, .09);
}
.plan--owner .price-year__off {
  border-color: rgba(139, 92, 246, .45); background: rgba(139, 92, 246, .18);
  color: var(--violet-t);
}

/* Рекомендуемый тариф. Раньше его отличал только маленький тег в углу —
   на глаз три карточки были одинаковые, и выбор ничем не подсказывался. */
.card--featured {
  border-color: rgba(16, 185, 129, .5);
  background:
    linear-gradient(180deg, rgba(16, 185, 129, .16), rgba(16, 185, 129, .05) 38%, transparent 70%),
    var(--card);
  box-shadow: 0 26px 64px -30px rgba(16, 185, 129, .85);
}
/* Галочки выделенной карточки ярче: она перечисляет то, за что платят. */
.card--featured .ticks li { color: var(--txt); }
@media (min-width: 1024px) {
  .card--featured { transform: translateY(-14px); }
  .card--featured.card--hover:hover { transform: translateY(-18px); }
}

/* Ленточка над карточкой. Подложка непрозрачная (var(--bg)), поверх неё
   тот же зелёный тон, что у обычного тега: иначе сквозь неё просвечивала
   бы граница карточки. */
.tag-best--top {
  top: -12px; right: auto; left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background-color: var(--bg);
  background-image: linear-gradient(rgba(16, 185, 129, .16), rgba(16, 185, 129, .16));
}

/* ---------- шаги ---------- */
.step { position: relative; overflow: hidden; }
.step__n {
  position: absolute; top: 12px; right: 18px;
  font-size: 52px; font-weight: 800; line-height: 1;
  color: var(--step-n);
}

/* ---------- боли → решения ---------- */
.pains { display: grid; gap: 16px; margin-top: 48px; }
@media (min-width: 768px) { .pains { grid-template-columns: repeat(2, 1fr); } }

.pain {
  display: grid; gap: 14px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.pain:hover { border-color: rgba(52, 211, 153, .3); background: var(--card-h); }

.pain__row { display: flex; gap: 12px; }
.pain__ico {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 30px; height: 30px;
  border-radius: 9px;
}
.pain__ico--bad { background: rgba(239, 68, 68, .12); color: var(--red-t); }
.pain__ico--good { background: rgba(16, 185, 129, .14); color: var(--accent); }
.pain__lbl {
  display: block;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--txt-3);
}
.pain__row--bad b { display: block; margin-top: 3px; font-size: 15.5px; font-weight: 650; }
.pain__row--good p { margin-top: 3px; color: var(--txt-2); font-size: 14.5px; }
.pain hr { height: 1px; margin: 0; border: 0; background: var(--line); }

/* ---------- кабинет владельца ---------- */
.cab { display: grid; gap: 40px; align-items: center; margin-top: 44px; }
@media (min-width: 1024px) { .cab { grid-template-columns: 1fr 1fr; gap: 52px; } }
.cab h2 { font-size: clamp(26px, 4.4vw, 40px); font-weight: 800; margin-top: 18px; text-wrap: balance; }
.cab__lead { margin-top: 18px; color: var(--txt-2); font-size: 16.5px; text-wrap: pretty; }
/* Примечание под списком: кабинет не зависит от тарифа. Тише списка,
   но не настолько, чтобы его пропустили — это снятие возражения. */
.cab__note {
  margin-top: 18px; padding: 12px 14px;
  border-left: 2px solid var(--line-3); border-radius: 0 10px 10px 0;
  background: var(--card);
  color: var(--txt-3); font-size: 13.5px; line-height: 1.6; text-wrap: pretty;
}

/* Кнопка входа в кабинет под примечанием раздела. */
.cab__cta { margin: 22px 0 0; }
.cab__list { display: grid; gap: 12px; margin-top: 24px; }
.cab__list li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; }
.cab__list svg { flex: none; margin-top: 3px; color: var(--accent); }
.cab__list b { font-weight: 650; }

/* мини-макет телефона */
.phone {
  position: relative;
  max-width: 320px; margin-inline: auto;
  padding: 12px;
  border: 1px solid var(--line-2);
  border-radius: 32px;
  background: var(--phone-frame);
  box-shadow: var(--glow-mock);
}
.phone__scr { padding: 16px 14px; border-radius: 24px; background: var(--phone-scr); }
.phone__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.phone__top b { font-size: 13px; font-weight: 700; }
.phone__live { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
.phone__live i { width: 6px; height: 6px; border-radius: 50%; background: var(--green-l); animation: pulse 2s ease-in-out infinite; }
.phone__rev { margin-top: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: rgba(16, 185, 129, .07); }
.phone__rev small { color: var(--txt-3); font-size: 11px; }
.phone__rev b { display: block; margin-top: 2px; font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.phone__rev span { color: var(--txt-3); font-size: 11.5px; }
.phone__rows { display: grid; gap: 8px; margin-top: 12px; }
.phone__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--elev); }
.phone__row b { font-size: 12.5px; font-weight: 600; }
.phone__row small { display: block; color: var(--txt-3); font-size: 10.5px; }
.phone__row i {
  font-style: normal; font-size: 12px; font-weight: 650;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.phone__row--on { border-color: rgba(52, 211, 153, .3); }
.phone__row--on i { color: var(--accent); }
.phone__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.phone__btns span {
  padding: 9px; border-radius: 11px; text-align: center;
  font-size: 11.5px; font-weight: 600;
  border: 1px solid var(--line-2); background: var(--elev); color: var(--txt-2);
}
.phone__btns span:first-child { border-color: rgba(52, 211, 153, .35); background: rgba(16, 185, 129, .14); color: var(--accent); }

/* ---------- сравнение с альтернативами ---------- */
/* Прокручиваемая область получает фокус (tabindex в разметке): без этого
   таблицу сравнения нельзя было прокрутить с клавиатуры вообще — на
   телефоне это половина таблицы, недоступная без мыши. */
.cmp-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cmp-wrap { margin-top: 44px; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 20px; background: var(--card); }
.cmp { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 14px; }
.cmp th, .cmp td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp thead th { color: var(--txt-3); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }
.cmp thead th:last-child { color: var(--accent); }
.cmp tbody th { color: var(--txt); font-size: 14px; font-weight: 650; white-space: nowrap; }
.cmp td { color: var(--txt-2); }
.cmp td:last-child { color: var(--txt); font-weight: 550; background: rgba(16, 185, 129, .06); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp__hint { margin-top: 14px; color: var(--txt-3); font-size: 12.5px; text-align: center; }

/* ---------- текстовый SEO-блок ---------- */
.prose { margin-top: 40px; display: grid; gap: 26px; }
@media (min-width: 900px) { .prose { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
.prose h3 { font-size: 19px; font-weight: 650; }
.prose h3 + p { margin-top: 10px; }
.prose p { color: var(--txt-2); font-size: 15px; }
.prose p + p { margin-top: 12px; }
.prose b { color: var(--txt); font-weight: 650; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; margin-top: 40px; }
.faq details {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.faq details[open] { border-color: rgba(52, 211, 153, .3); background: var(--card-h); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px;
  font-size: 16px; font-weight: 650;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary i {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 32px; height: 32px;
  border-radius: 10px;
  background: var(--elev);
  color: var(--txt-2);
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.faq details[open] summary i { transform: rotate(180deg); background: rgba(16, 185, 129, .15); color: var(--accent); }
.faq p { padding: 0 20px 20px; color: var(--txt-2); font-size: 15px; }

/* ---------- CTA-блок ---------- */
.cta {
  position: relative; overflow: hidden;
  padding: 36px 24px;
  border: 1px solid rgba(52, 211, 153, .22);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(16, 185, 129, .16), rgba(16, 185, 129, .04) 45%, rgba(56, 189, 248, .12));
}
@media (min-width: 768px) { .cta { padding: 56px 52px; } }
.cta__blob { position: absolute; width: 320px; height: 320px; border-radius: 50%; filter: blur(80px); z-index: 0; }
.cta__blob--a { top: -140px; right: -120px; background: rgba(16, 185, 129, .3); }
.cta__blob--b { bottom: -140px; left: -120px; background: rgba(56, 189, 248, .22); }
.cta__in { position: relative; z-index: 1; max-width: 640px; }
.cta h2 { font-size: clamp(26px, 4.6vw, 42px); font-weight: 800; text-wrap: balance; }
.cta p { margin-top: 18px; color: var(--txt-2); font-size: 16.5px; text-wrap: pretty; }
.cta__btns { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; }
@media (min-width: 560px) { .cta__btns { flex-direction: row; flex-wrap: wrap; } }
.cta__tel { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; padding: 11px 0; color: var(--txt-2); font-size: 15px; }
.cta__tel svg { color: var(--accent); }
.cta__tel:hover { color: var(--txt); }

/* ---------- контакты ---------- */
.contacts { display: grid; gap: 14px; margin-top: 44px; }
@media (min-width: 640px) { .contacts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .contacts { grid-template-columns: repeat(4, 1fr); } }
.contact { display: block; padding: 20px; border: 1px solid var(--line-2); border-radius: 18px; background: var(--card); transition: background .2s var(--ease), transform .2s var(--ease); }
.contact:hover { background: var(--card-h); transform: translateY(-2px); }
.contact__t { display: flex; align-items: center; gap: 9px; color: var(--accent); }
.contact__t b { color: var(--txt); font-size: 14.5px; font-weight: 650; }
.contact { min-height: 96px; }
.contact strong { display: block; margin-top: 10px; color: var(--txt); font-size: 15px; font-weight: 600; }
.contact small { display: block; margin-top: 4px; color: var(--txt-3); font-size: 12.5px; }

/* ---------- гео ---------- */
.geo { margin-top: 36px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); text-align: center; }
.geo b { font-size: 15px; }
.geo p { margin-top: 10px; color: var(--txt-2); font-size: 14.5px; line-height: 1.8; }

/* ---------- футер ---------- */
.ftr { border-top: 1px solid var(--line); padding: 48px 0 calc(124px + env(safe-area-inset-bottom)); background: var(--tint); }
@media (min-width: 768px) { .ftr { padding: 56px 0 40px; } }
.ftr__in { display: grid; gap: 32px; }
@media (min-width: 900px) { .ftr__in { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 34px; } }
.ftr__about p { margin-top: 16px; max-width: 380px; color: var(--txt-2); font-size: 14px; }
.ftr h3, .ftr h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--txt-3); }
.ftr ul { margin-top: 12px; display: grid; gap: 2px; }
/* padding вместо gap: ссылка становится крупнее для пальца,
   визуальный ритм остаётся тем же */
.ftr ul a, .ftr ul span { display: inline-block; padding: 11px 0; color: var(--txt-2); font-size: 14px; }
.ftr ul a:hover { color: var(--accent); }
.ftr__cities { grid-column: 1 / -1; margin-top: 8px; padding-top: 26px; border-top: 1px solid var(--line); }
.ftr__cities .near { margin-top: 12px; }

.ftr__bot {
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
  margin-top: 36px; padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--txt-3); font-size: 13px;
}

/* ---------- плавающая кнопка + мобильный бар ---------- */
.wa-fab {
  position: fixed; right: 18px; bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 45;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25d366; color: #042413;
  box-shadow: 0 12px 34px -8px rgba(37, 211, 102, .8);
  transition: transform .2s var(--ease);
}
.wa-fab:hover { transform: scale(1.06); }
@media (min-width: 768px) { .wa-fab { bottom: 24px; } }

.mbar {
  position: fixed; inset: auto 0 0 0; z-index: 46;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--mbar-bg);
  backdrop-filter: blur(18px);
}
.mbar .btn { padding: 12px 14px; font-size: 14px; }
/* На 360 px две кнопки по 163 px, а «Скачать бесплатно» с иконкой требует
   ~184 px и переносилось на вторую строку — панель становилась выше и
   съедала экран. Ужимаем на самых узких, не трогая остальные. */
@media (max-width: 389.98px) {
  .mbar { gap: 8px; padding-inline: 10px; }
  .mbar .btn { padding: 12px 8px; font-size: 13px; gap: 7px; }
}
/* Размытие подложки считается заново на каждом кадре прокрутки, и цена
   растёт с радиусом. На телефоне таких слоёв два во всю ширину экрана —
   шапка и нижняя панель. Радиус уменьшаем: визуально почти то же,
   отрисовка заметно дешевле. */
@media (max-width: 767.98px) {
  .hdr.is-stuck, .mbar { backdrop-filter: blur(10px); }
}
@media (min-width: 768px) { .mbar { display: none; } }

/* ---------- модалка требований перед скачиванием ----------
   Нативный <dialog>: Esc, фокус и подложка — из коробки. Если браузер
   его не умеет, JS не перехватывает клик и ссылка качает как раньше. */
.reqs {
  width: min(560px, calc(100vw - 32px));
  max-height: min(88vh, 760px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 22px;
  background: var(--bg-2);
  color: var(--txt);
  box-shadow: var(--modal-shadow);
  overflow: auto;
  overscroll-behavior: contain;
}
.reqs::backdrop { background: var(--backdrop); backdrop-filter: blur(4px); }
.reqs[open] { animation: reqs-in .22s var(--ease) both; }
@keyframes reqs-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }

.reqs__box { position: relative; padding: 26px 24px 24px; outline: none; }
@media (min-width: 560px) { .reqs__box { padding: 30px 30px 26px; } }

.reqs__x {
  position: absolute; top: 14px; right: 14px;
  display: grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--txt-2);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.reqs__x:hover { background: var(--card-h); color: var(--txt); }

.reqs__ico {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border: 1px solid rgba(56, 189, 248, .3); border-radius: 14px;
  background: rgba(56, 189, 248, .12); color: var(--blue-t);
}
.reqs h2 { margin: 16px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.reqs__lead { margin: 8px 0 0; color: var(--txt-2); font-size: 14.5px; }

.reqs__list { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.reqs__list li { display: flex; align-items: flex-start; gap: 11px; color: var(--txt-2); font-size: 14.5px; line-height: 1.5; }
.reqs__list b { color: var(--txt); font-weight: 600; }
.reqs__list svg { flex: none; margin-top: 3px; color: var(--accent); }
/* Пункт-предупреждение: старые Windows — самая частая причина, по которой
   установщик скачали, а программа не запустилась. */
.reqs__list li.is-warn svg { color: var(--gold-t); }

.reqs__note {
  margin: 18px 0 0; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--card);
  color: var(--txt-3); font-size: 13px; line-height: 1.55;
}

/* КНОПКИ ВИДНЫ ВСЕГДА.

   Раньше список требований выталкивал их за нижний край окна: на ноутбуке
   человек видел шесть пунктов и ни одной кнопки, и «Скачать» приходилось
   искать прокруткой — на главном действии сайта. Теперь блок кнопок
   липкий: список уезжает под него, а кнопки остаются на виду.

   Подложка под ними непрозрачная, иначе текст списка просвечивал бы
   сквозь кнопки. Сверху — короткая растяжка, чтобы обрез списка не
   выглядел обрубленным. */
.reqs__btns {
  position: sticky; bottom: 0; z-index: 1;
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 16px; padding: 14px 0 22px;
  background: var(--bg-2);
}
.reqs__btns::before {
  content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px;
  background: linear-gradient(to bottom, transparent, var(--bg-2));
  pointer-events: none;
}
@media (min-width: 480px) { .reqs__btns { flex-direction: row-reverse; justify-content: flex-start; } }
.reqs__btns .btn { width: 100%; }
@media (min-width: 480px) { .reqs__btns .btn { width: auto; } }

/* Плотнее по вертикали — чтобы в окно влезало больше и до кнопок было
   ближе. Цифры подобраны так, чтобы текст не слипался: межстрочный
   интервал не трогаем, ужимаем только промежутки между блоками. */
.reqs__box { display: flex; flex-direction: column; padding-bottom: 0; }
.reqs__ico { margin-bottom: 2px; }
.reqs h2 { margin-top: 12px; font-size: 20px; }
.reqs__lead { margin-top: 6px; font-size: 14px; }
.reqs__list { margin-top: 14px; gap: 9px; }
.reqs__list li { font-size: 14px; line-height: 1.45; }
.reqs__note { margin-top: 12px; padding: 11px 13px; font-size: 12.5px; line-height: 1.5; }

/* На низком экране заголовочная иконка уходит первой: она украшение, а
   место нужно списку и кнопкам. */
@media (max-height: 720px) {
  .reqs__ico { display: none; }
  .reqs__box { padding-top: 20px; }
  .reqs__note { display: none; }
}

/* ---------- окно выбора канала связи ----------

   Отдельное окно, а не переписанное окно требований: у них разная судьба.
   Требования показываются перед скачиванием и обязаны быть прочитаны,
   выбор канала — наоборот, должен закрыться одним движением. */
.cdlg {
  width: min(420px, calc(100vw - 32px));
  max-height: min(88vh, 640px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 22px;
  background: var(--bg-2);
  color: var(--txt);
  box-shadow: var(--modal-shadow);
  overflow: auto;
  overscroll-behavior: contain;
}
.cdlg::backdrop { background: var(--backdrop); backdrop-filter: blur(4px); }
.cdlg[open] { animation: reqs-in .22s var(--ease) both; }

.cdlg__box { position: relative; padding: 26px 22px 22px; outline: none; }
.cdlg__x {
  position: absolute; top: 12px; right: 12px;
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 0; border-radius: 10px; background: transparent;
  color: var(--txt-3); cursor: pointer;
}
.cdlg__x:hover { background: var(--card-h); color: var(--txt); }
.cdlg h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.cdlg__lead { margin: 6px 0 0; color: var(--txt-2); font-size: 14px; }

.cdlg__list { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }

/* Каждый канал — крупная цель для пальца: окно чаще открывают с телефона,
   а промах по ссылке уводит человека не туда, откуда он легко вернётся. */
.cdlg__item {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--card);
  color: var(--txt); text-decoration: none;
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}
.cdlg__item:hover { background: var(--card-h); border-color: var(--line-2); transform: translateY(-1px); }
.cdlg__ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--bg-2); }
/* min-width: 0 обязателен обоим. По умолчанию элемент строки-флекса не
   сжимается уже своего содержимого, и одна длинная строка без пробелов
   раздвигает карточку изнутри — обрезка при этом не срабатывает вовсе. */
.cdlg__item { min-width: 0; }
.cdlg__txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.cdlg__txt b { font-size: 15px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Номер и имя профиля бывают длиннее ширины окна — обрезаем многоточием,
   а не ломаем раскладку. Ссылку из кнопки «поделиться» чистим ещё на
   сохранении (contacts.ts), это вторая линия обороны. */
.cdlg__txt small {
  color: var(--txt-3); font-size: 12.5px;
  min-width: 0; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Цвет узнаётся раньше названия: у каждого канала свой. */
.cdlg__item--wa .cdlg__ico { color: #25d366; }
.cdlg__item--tg .cdlg__ico { color: #2aabee; }
.cdlg__item--ig .cdlg__ico { color: #e1306c; }
.cdlg__item--tel .cdlg__ico { color: var(--accent); }
.cdlg__item--mail .cdlg__ico { color: var(--txt-2); }

/* ---------- появление при скролле ----------
   Скрываем только при работающем JS (класс .js ставится инлайн-скриптом
   в <head>): если скрипт не выполнился, страница всё равно видна целиком. */
.js:not(.rv-off) .rv { opacity: 0; transform: translateY(22px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .rv.is-in { opacity: 1; transform: none; }
/* Каскад внутри сетки: раньше задержки писались из JS в style каждого
   элемента, теперь чистый CSS — на старте не дёргается пересчёт стилей. */
.js .grid > .rv:nth-child(3n + 2), .js .pains > .rv:nth-child(2n) { transition-delay: 60ms; }
.js .grid > .rv:nth-child(3n + 3) { transition-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js .rv, .rv { opacity: 1; transform: none; }
}

/* ============================================================
   Макеты приложения — всегда тёмные.

   Программа Biliardo тёмная. Если на светлой теме сайта показать
   светлый макет, посетитель увидит не то, что скачает. Поэтому
   «экран» остаётся тёмным на обеих темах, а чтобы текст внутри не
   пропал, переменные переопределяются локально — правила самих
   блоков ниже по файлу трогать не пришлось.
   ============================================================ */
.mock,
.phone__scr {
  --txt: #e2e8f0;
  --txt-2: #94a3b8;
  --txt-3: #7d8aa0;
  --accent: #34d399;
  --card: rgba(255, 255, 255, .04);
  --card-h: rgba(255, 255, 255, .07);
  --elev: rgba(255, 255, 255, .06);
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  --dot-off: #64748b;
  color: var(--txt);
}

/* ============================================================
   Переключатели языка и темы в шапке
   ============================================================ */
.hdr__tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
@media (min-width: 1024px) { .hdr__tools { margin-left: 0; } }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--elev);
  color: var(--txt-2);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.icon-btn:hover { background: var(--card-h); color: var(--txt); border-color: var(--line-3); }

/* Солнце и луна лежат одна поверх другой; видна та, что отвечает теме.
   Так не нужен ни JS для подмены значка, ни второй запрос за иконкой. */
.theme-btn svg { position: absolute; }
.theme-btn { position: relative; }
.theme-btn .i-sun { opacity: 0; }
.theme-btn .i-moon { opacity: 1; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-btn .i-sun { opacity: 1; }
  :root:not([data-theme="dark"]) .theme-btn .i-moon { opacity: 0; }
}
:root[data-theme="light"] .theme-btn .i-sun { opacity: 1; }
:root[data-theme="light"] .theme-btn .i-moon { opacity: 0; }

/* Выбор языка — обычный <details>: работает и без скрипта. */
.lang { position: relative; }
.lang > summary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--elev);
  color: var(--txt-2);
  font-size: 13px; font-weight: 650; letter-spacing: .02em;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary:hover { background: var(--card-h); color: var(--txt); border-color: var(--line-3); }
.lang[open] > summary { background: var(--card-h); color: var(--txt); }

.lang__menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 168px;
  padding: 6px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--bg-2);
  box-shadow: var(--modal-shadow);
}
.lang__menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--txt-2);
  font-size: 14px;
}
.lang__menu a:hover { background: var(--card-h); color: var(--txt); }
.lang__menu a[aria-current="true"] { color: var(--accent); font-weight: 650; }
.lang__menu i { font-style: normal; color: var(--txt-3); font-size: 12px; font-weight: 650; }

/* На узком телефоне в шапке остаются логотип и два переключателя.
   Расчёт на 360 px: бренд с подписью ~184 px (казахская длиннее русской),
   переключатели ~111 px, зазор 18 px — это 313 из 320 доступных. Запас в
   семь пикселей слишком мал, чтобы на него полагаться: на другом шрифте
   или при более длинном коде языка бренд начал бы сжиматься и обрезаться.
   Поэтому подпись под логотипом здесь убираем — освобождается ~130 px. */
@media (max-width: 420px) {
  .icon-btn { width: 36px; height: 36px; }
  .lang > summary { height: 36px; padding: 0 9px; }
  .brand span small { display: none; }
  .brand { font-size: 18px; }
}

/* ============================================================
   СТАТЬИ И ГОРОДСКИЕ СТРАНИЦЫ

   Длинный текст живёт по своим правилам: строка не шире ~70 знаков,
   межстрочный интервал крупнее, чем в блоках лендинга, заголовки
   с воздухом сверху. Всё на тех же токенах — светлая тема достаётся
   даром.
   ============================================================ */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; color: var(--txt-3); font-size: 13px; }
.crumbs a { color: var(--txt-3); }
.crumbs a:hover { color: var(--accent); }

.art__h1 {
  margin-top: 18px;
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 800;
  line-height: 1.12;
  text-wrap: balance;
}
.art__meta { margin-top: 14px; color: var(--txt-3); font-size: 13.5px; }
.art__lead {
  margin-top: 20px;
  color: var(--txt-2);
  font-size: 18px;
  line-height: 1.6;
  text-wrap: pretty;
}

/* Оглавление. Липким его не делаем: на телефоне оно съело бы пол-экрана,
   а на длинной статье с 14 разделами не поместилось бы и на десктопе. */
.toc {
  margin-top: 30px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
}
.toc b { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--txt-3); }
.toc ol { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 7px; list-style: decimal; }
.toc li { color: var(--txt-2); font-size: 14.5px; }
.toc a { color: var(--txt-2); }
.toc a:hover { color: var(--accent); }

.art { margin-top: 40px; font-size: 16.5px; line-height: 1.75; color: var(--txt-2); }
.art > * + * { margin-top: 18px; }
.art h2 {
  margin-top: 44px;
  font-size: clamp(22px, 3.4vw, 29px);
  font-weight: 750;
  color: var(--txt);
  text-wrap: balance;
  /* Липкая шапка перекрывала бы заголовок при переходе по оглавлению */
  scroll-margin-top: 88px;
}
.art h3 { margin-top: 30px; font-size: 19px; font-weight: 700; color: var(--txt); }
.art b, .art strong { color: var(--txt); font-weight: 650; }
.art a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.art a:hover { text-decoration-thickness: 2px; }
.art ul, .art ol { display: grid; gap: 9px; padding-left: 22px; }
.art ul { list-style: disc; }
.art ol { list-style: decimal; }
.art li::marker { color: var(--txt-3); }

/* Таблицы в статьях широкие, и на телефоне они обязаны прокручиваться
   внутри себя, а не растягивать страницу. */
.art table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.art thead th {
  text-align: left; white-space: nowrap;
  color: var(--txt-3); font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
}
.art th, .art td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.art tbody th { color: var(--txt); font-weight: 650; white-space: nowrap; }
.art tbody tr:last-child th, .art tbody tr:last-child td { border-bottom: 0; }

.art blockquote.note {
  margin: 26px 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 16px 16px 0;
  background: var(--card);
  color: var(--txt-2);
  font-size: 15.5px;
}
.art blockquote.note > * + * { margin-top: 10px; }

.art__faq { margin-top: 52px; }
.art__faq h2 { font-size: clamp(22px, 3.4vw, 29px); font-weight: 750; color: var(--txt); }
.art__faq .faq { margin-top: 22px; }

/* Карточки «читать дальше» — ссылка целиком, поэтому заголовок внутри
   не должен спорить с ней за цвет. */
a.card h3 { color: var(--txt); }
a.card:hover h3 { color: var(--accent); }

/* Городская страница: блок «города рядом» */
.near { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.near a {
  padding: 7px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--card);
  color: var(--txt-2);
  font-size: 13.5px;
}
.near a:hover { background: var(--card-h); color: var(--txt); border-color: var(--line-3); }

/* ===== Оплата подписки =====================================================
   Страницу открывают телефоном по QR с экрана кассы — значит, она в первую
   очередь мобильная: одна колонка, крупные цели для пальца, никакого
   горизонтального листания. Сетки разворачиваются в ряд только там, где
   есть ширина.

   Цвета и радиусы — общие с сайтом: человек только что видел витрину
   тарифов, и страница оплаты обязана выглядеть её продолжением, иначе
   в момент ввода денег возникает вопрос «а туда ли я попал». */

#pay { padding-top: 28px; }

.pay-h1 {
  font-size: clamp(24px, 6vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}

.pay-h2 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
  color: var(--txt);
}

.pay-lead {
  font-size: 15px;
  line-height: 1.6;
  color: var(--txt-2);
  margin-bottom: 14px;
}
.pay-lead b { color: var(--txt); }

.pay-card { height: auto; margin-bottom: 16px; }
.pay-card--mid { text-align: center; }
.pay-card--mid .pay-buttons { margin-top: 20px; }

/* --- карточка клуба --- */
.pay-club { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; }
.pay-club__n { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.pay-club__a { font-size: 14px; color: var(--txt-2); }
.pay-club__m {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin-top: 6px; font-size: 13px; color: var(--txt-3);
}

/* Обязательная галочка «это мой клуб». Крупная: по ней попадают пальцем,
   и без неё оплата не начнётся. */
.pay-mine {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--elev);
  cursor: pointer;
  font-weight: 600;
}
.pay-mine input { width: 20px; height: 20px; accent-color: var(--green); flex: none; }
.pay-mine:hover { border-color: var(--line-3); }

.pay-note { font-size: 13px; line-height: 1.55; color: var(--txt-2); margin-top: 12px; }
.pay-note--dim { color: var(--txt-3); }
.pay-note--warn { color: var(--gold-t); }
.pay-note a { color: var(--green-l); }

/* Ловушка для роботов: человек её не видит и не заполняет. */
.pay-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* --- столы --- */
.pay-tables { display: flex; align-items: center; gap: 12px; }

.pay-step {
  width: 52px; height: 52px; flex: none;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--elev);
  color: var(--txt);
  font-size: 24px; font-weight: 600; line-height: 1;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.pay-step:hover { background: var(--card-h); border-color: var(--line-3); }

.pay-num {
  flex: 1; min-width: 0;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--bg-2);
  color: var(--txt);
  font: inherit; font-size: 20px; font-weight: 700;
  text-align: center;
  -moz-appearance: textfield;
}
.pay-num::-webkit-outer-spin-button,
.pay-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pay-days { margin-top: 12px; font-size: 13px; }
.pay-days summary { cursor: pointer; color: var(--txt-2); }
.pay-days ul {
  list-style: none; margin: 10px 0 0; padding: 0;
  max-height: 200px; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 4px 12px;
}
.pay-days li {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 4px 0; color: var(--txt-3);
  border-bottom: 1px solid var(--line);
}
.pay-days li b { color: var(--txt-2); font-variant-numeric: tabular-nums; }

/* --- выбор тарифа и срока --- */
.pay-grid { display: grid; gap: 10px; }
.pay-grid--3 { grid-template-columns: 1fr; }
.pay-grid--5 { grid-template-columns: repeat(2, 1fr); }

.pay-pick { display: block; cursor: pointer; margin: 0; }
/* Сам кружок убран с глаз, но остаётся в форме и ловит клавиатуру:
   страница обязана работать и без JS. */
.pay-pick input {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.pay-pick__b {
  display: flex; flex-direction: column; gap: 4px;
  height: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.pay-pick:hover .pay-pick__b { background: var(--card-h); }
.pay-pick input:checked + .pay-pick__b {
  border-color: rgba(16, 185, 129, .5);
  background: rgba(16, 185, 129, .10);
}
.pay-pick input:focus-visible + .pay-pick__b { box-shadow: 0 0 0 2px rgba(56, 189, 248, .45); }

.pay-plan__n { font-size: 16px; font-weight: 700; }
.pay-plan__a { font-style: normal; font-size: 12px; color: var(--txt-3); }
.pay-plan__p { font-size: 13px; color: var(--txt-2); margin-top: 6px; }
.pay-plan__p b { color: var(--txt); font-size: 15px; }
.pay-plan__g { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.pay-plan__g span { font-size: 12px; color: var(--txt-3); }
.pay-plan__g span::before { content: "· "; color: var(--green); }
.pay-pick input:checked + .pay-pick__b .pay-plan__n { color: var(--green-l); }

.pay-per .pay-pick__b { align-items: center; text-align: center; gap: 2px; }
.pay-off { font-style: normal; font-size: 12px; font-weight: 700; color: var(--green-l); }
.pay-off--no { color: var(--txt-3); font-weight: 500; }

/* --- итог --- */
.pay-total { border-color: rgba(16, 185, 129, .3); background: rgba(16, 185, 129, .05); }
.pay-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pay-sum__l { font-size: 14px; color: var(--txt-2); }
.pay-sum__v { font-size: clamp(26px, 7vw, 34px); font-weight: 800; letter-spacing: -0.02em; }
.pay-sum__sub {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 4px; font-size: 13px; color: var(--txt-3);
}
.pay-saved { color: var(--green-l); font-weight: 600; }

.pay-buttons { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.pay-buttons .btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }

/* --- счёт и «оплачено» --- */
.pay-bill { display: flex; flex-direction: column; gap: 2px; }
.pay-bill__r {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.pay-bill__r span { color: var(--txt-2); }
.pay-bill__r b { color: var(--txt); text-align: right; }
.pay-bill__r--sum { border-bottom: 0; padding-top: 14px; }
.pay-bill__r--sum span { font-size: 15px; }
.pay-bill__r--sum b { font-size: 22px; font-weight: 800; }
.pay-bill--flat { margin: 18px 0; text-align: left; }

.pay-ok {
  width: 72px; height: 72px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(16, 185, 129, .14);
  border: 1px solid rgba(16, 185, 129, .4);
  color: var(--green-l);
  font-size: 34px; line-height: 1;
}

.pay-wait { margin-top: 14px; font-size: 13px; color: var(--green-l); }

@media (min-width: 720px) {
  .pay-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .pay-grid--5 { grid-template-columns: repeat(5, 1fr); }
  .pay-buttons { flex-direction: row; }
  .pay-buttons .btn { flex: 1; }
}

/* Кнопка Kaspi — их красным, а не нашим зелёным. Рядом стоит зелёная
   «оплатить иным способом», и две одинаковые кнопки заставляют читать
   обе; узнаваемый цвет платёжной системы отвечает на вопрос «куда я
   сейчас попаду» до чтения. */
.btn--kaspi {
  background: #f14635;
  color: #fff;
  box-shadow: 0 10px 30px -12px rgba(241, 70, 53, .7);
}
.btn--kaspi:hover { background: #ff5847; transform: translateY(-1px); }