/* Стиль лендинга RU-контура.
   Токены — из design/design_handoff_audio_notes_app/README.md: те же цвета,
   радиусы и типографика, что в приложении.
   Ни одного внешнего ресурса: шрифты лежат рядом (legal/ru/README.md — правило
   «новый SDK наружу → новая редакция политики» распространяется и на сайт). */

@font-face {
  font-family: "Outfit";
  src: url("fonts/outfit-400-3e0264b6.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("fonts/outfit-600-b2cea4d2.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("fonts/outfit-700-9390766a.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  --bg: #f8fafc;
  --bg2: #f1f5f9;
  --card: #ffffff;
  --card-border: #e2e8f0;
  --divider: #f1f5f9;

  --text-pri: #0f172a;
  --text-sec: #475569;
  --text-ter: #64748b;
  --text-dis: #94a3b8;

  --accent: #7c3aed;
  --accent-ink: #ffffff;
  --grad-a: #a855f7;
  --grad-b: #3b82f6;
  --wave-a: #a855f7;
  --wave-b: #06b6d4;

  --favorite: #ff4d6d;
  --chip-bg: #f1f5f9;
  --chip-text: #475569;
  --selected-bg: #f3e8ff;
  --selected-border: #c084fc;

  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
  --shadow-phone: 0 18px 50px rgba(15, 23, 42, 0.18);
  --shadow-fab: 0 6px 14px rgba(157, 78, 221, 0.3);

  --r-card: 16px;
  --r-panel: 24px;
  --r-pill: 100px;
  --r-tile: 10px;

  --gutter: 20px;
  --maxw: 1120px;

  --mascot-glow: none;

  /* Цвета говорящих — первые три из SpeakerColors приложения
     (android/design_system/.../theme/Color.kt). Текст на чипе всегда тёмный. */
  --speaker-a: #9b8ac4;
  --speaker-b: #6e93c9;
  --speaker-c: #4fa3a3;
  --speaker-ink: #1e1b16;
}

/* Тёмная палитра записана дважды: первая копия — для тёмной системы, пока
   читатель явно не выбрал светлую тему, вторая — для явного выбора тёмной.
   Условия живут в разных @media, и одним правилом их не записать. Обе копии
   правятся вместе (README, раздел «Тема»).
   :is() разбирает свой список «прощающе»: браузер без :has() видит
   :not(:is()) и берёт тёмную палитру по системе, как до переключателя. */
@media (prefers-color-scheme: dark) {
  :root:not(:is(:has(#theme-light:checked))) {
    --bg: #020617;
    --bg2: #0f172a;
    --card: #1e293b;
    --card-border: #334155;
    --divider: #1e293b;

    --text-pri: #f8fafc;
    --text-sec: #cbd5e1;
    --text-ter: #94a3b8;
    --text-dis: #64748b;

    --accent: #c4b5fd;
    --accent-ink: #1e1b4b;

    --favorite: #ff6b8a;
    --chip-bg: #1e293b;
    --chip-text: #cbd5e1;
    --selected-bg: #2e1065;
    --selected-border: #7c3aed;

    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
    --shadow-phone: 0 18px 50px rgba(0, 0, 0, 0.55);

    /* Свечение линии маскота — только на тёмном фоне: на светлом оно грязнит штрих. */
    --mascot-glow: drop-shadow(0 0 6px rgba(168, 85, 247, 0.55));

    --speaker-a: #b6a6e0;
    --speaker-b: #8fb0e6;
    --speaker-c: #6fc4c4;
  }
}

/* Явный выбор читателя. color-scheme переводит в ту же тему и то, что рисует
   браузер: панель плеера видео, полосу прокрутки. */
:root:has(#theme-light:checked) { color-scheme: light; }

/* Вторая копия тёмной палитры — правится вместе с первой. */
:root:has(#theme-dark:checked) {
  color-scheme: dark;

  --bg: #020617;
  --bg2: #0f172a;
  --card: #1e293b;
  --card-border: #334155;
  --divider: #1e293b;

  --text-pri: #f8fafc;
  --text-sec: #cbd5e1;
  --text-ter: #94a3b8;
  --text-dis: #64748b;

  --accent: #c4b5fd;
  --accent-ink: #1e1b4b;

  --favorite: #ff6b8a;
  --chip-bg: #1e293b;
  --chip-text: #cbd5e1;
  --selected-bg: #2e1065;
  --selected-border: #7c3aed;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-phone: 0 18px 50px rgba(0, 0, 0, 0.55);

  --mascot-glow: drop-shadow(0 0 6px rgba(168, 85, 247, 0.55));

  --speaker-a: #b6a6e0;
  --speaker-b: #8fb0e6;
  --speaker-c: #6fc4c4;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-pri);
  font-family: "Outfit", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-wrap: break-word;
}

h1, h2, h3 { line-height: 1.2; margin: 0; font-weight: 700; letter-spacing: -0.015em; }
p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: var(--accent); }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section { padding-block: 72px; }
.section--tint { background: var(--bg2); }

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dis);
  margin-bottom: 12px;
}

.lead { color: var(--text-sec); font-size: 17px; }

/* ---------- Шапка ---------- */

.site-header {
  border-bottom: 1px solid var(--card-border);
  background: var(--bg);
}

.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}

/* margin-right: auto прижимает навигацию и переключатель темы вправо; на
   телефоне навигация скрыта, и справа остаётся один переключатель. */
.brand {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  gap: 10px;
  font-weight: 700;
  font-size: 17px;
  color: var(--text-pri);
  text-decoration: none;
}

/* Знак приложения. Скругление и градиент рисует сам favicon.svg — CSS тут
   только задаёт размер, чтобы логотип и иконка вкладки были одним файлом. */
.brand__mark {
  width: 36px;
  height: 36px;
  flex: none;
}

.site-nav { display: flex; gap: 22px; font-size: 15px; }
.site-nav a { color: var(--text-sec); text-decoration: none; }
.site-nav a:hover { color: var(--accent); }

@media (max-width: 760px) { .site-nav { display: none; } }

/* ---------- Переключатель темы ---------- */

/* Три радиокнопки: палитру выбирает CSS через :has(), поэтому переключатель
   работает и без скрипта. Высота дорожки — 36 px, меньше min-height шапки на
   любом экране: шапка из-за переключателя не растёт, и кнопки магазинов в
   первом экране стоят на прежних местах. Браузер без :has() выбор применить
   не может — там переключатель скрыт, и страница следует системной теме. */
.theme-switch { display: none; }

@supports selector(:has(*)) {
  .theme-switch {
    display: flex;
    flex: none;
    gap: 2px;
    margin-left: 6px;
    padding: 2px;
    border: 1px solid var(--card-border);
    border-radius: var(--r-pill);
    background: var(--card);
  }
}

.theme-switch__option {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--text-ter);
  cursor: pointer;
}

.theme-switch__option:hover { color: var(--text-pri); }

/* Радиокнопка прозрачна и накрывает сегмент целиком: остаётся в фокусе с
   клавиатуры и под пальцем у читалки экрана. */
.theme-switch__option input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.theme-switch__option svg { width: 16px; height: 16px; }

.theme-switch__option:has(input:checked) {
  background: var(--selected-bg);
  color: var(--accent);
}

.theme-switch__option:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

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

/* ---------- Кнопки ---------- */

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.store {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 13px 22px 13px 18px;
  border-radius: var(--r-pill);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.store:hover { transform: translateY(-1px); }

.store--primary {
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  color: #ffffff;
  box-shadow: var(--shadow-fab);
}

.store--secondary {
  background: var(--card);
  color: var(--text-pri);
  border-color: var(--card-border);
  box-shadow: var(--shadow-card);
}

.store svg { width: 22px; height: 22px; flex: none; }
.store__sub { display: block; font-size: 11px; font-weight: 500; opacity: 0.78; }
.store__name { display: block; line-height: 1.15; }

.store-note { margin-top: 14px; color: var(--text-ter); font-size: 14px; }

/* ---------- Главный экран ---------- */

.hero { padding-block: 64px 8px; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: center;
}

.hero h1 { font-size: clamp(32px, 5.2vw, 52px); }

.hero h1 .accent {
  /* inline-block, чтобы акцентная фраза переносилась целиком: иначе строка
     рвётся посреди неё и градиент разъезжается на два куска. */
  display: inline-block;
  background: linear-gradient(120deg, var(--grad-a), var(--grad-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lead { margin-top: 20px; font-size: 18px; color: var(--text-sec); max-width: 34em; }
.hero__cta { margin-top: 30px; }

.hero__art { display: flex; justify-content: center; }

/* Одна колонка: макет телефона встаёт под текстом по центру, и текст с
   кнопками центрируется вместе с ним. */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__art { order: 2; }
  .hero__text { text-align: center; }
  .hero__lead { margin-inline: auto; }
  .proof { margin-inline: auto; }
  .hero .stores { justify-content: center; }
}

/* ---------- Макет телефона ---------- */

/* Авто-отступы держат рамку по центру и в блоке <figure> галереи: там она
   блочная, и text-align подписи её не двигает. */
.phone {
  width: 274px;
  flex: none;
  margin-inline: auto;
  border-radius: 34px;
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-phone);
  padding: 10px;
}

.phone__shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 26px;
  background: var(--bg2);
}

/* ---------- Доказательство ---------- */

/* Пример «до -> после» на демо-заметке со скриншота screen-detail (README,
   раздел «Первый экран»): запись с длительностью, стрелка, краткое содержание и
   участники. В одной колонке по центру встаёт сам блок, строки внутри него
   читаются от левого края. */
.proof {
  max-width: 420px;
  margin: 24px 0 0;
  text-align: left;
}

.proof__record,
.proof__result {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
}

.proof__record {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 15px;
  font-weight: 600;
}

.proof__record svg { width: 20px; height: 20px; flex: none; color: var(--accent); }

.proof__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proof__length { color: var(--text-ter); font-weight: 500; font-variant-numeric: tabular-nums; }

.proof__arrow {
  display: block;
  width: 18px;
  height: 18px;
  margin: 4px auto;
  color: var(--text-ter);
}

.proof__result {
  padding: 12px 14px;
  box-shadow: var(--shadow-card);
}

.proof__label {
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-ter);
}

/* Полный текст остаётся в документе для читалки экрана, на экране — три строки. */
.proof__summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.45;
}

.proof__people {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.proof__person {
  padding: 1px 10px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--speaker-ink);
}

.proof__person--a { background: var(--speaker-a); }
.proof__person--b { background: var(--speaker-b); }
.proof__person--c { background: var(--speaker-c); }

/* ---------- Маскот ---------- */

/* Облачко реплики одной линией. Покой — полный рисунок: без анимаций, при
   prefers-reduced-motion и на снимке обложки маскот виден целиком. Исходник
   и правила формы — web/ru/README.md, раздел «Маскот». */
.mascot { display: block; overflow: visible; filter: var(--mascot-glow); }
.mascot__line,
.mascot__mouth { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mascot__line { stroke-width: 6; }
.mascot__mouth { stroke-width: 4.5; }
.mascot__eye { fill: var(--text-pri); }
.mascot__stop-a { stop-color: var(--grad-a); }
.mascot__stop-b { stop-color: var(--grad-b); }
.mascot__stop-c { stop-color: var(--wave-b); }

/* Маскот один — в финальном призыве (change ru-landing-first-screen: первый экран
   отдан доказательству). */
.mascot--final { width: 112px; margin: 0 auto 16px; }

@media (prefers-reduced-motion: no-preference) {
  .mascot__line {
    stroke-dasharray: 1;
    animation: mascot-draw 2.4s cubic-bezier(0.5, 0, 0.2, 1) both;
  }
  .mascot__face { animation: mascot-show 0.4s 2.1s both; }
}

/* Прозрачность на первых кадрах прячет круглый кончик штриха, который Safari
   рисует в начале пути при нулевой длине видимой части. */
@keyframes mascot-draw {
  from { stroke-dashoffset: 1; opacity: 0; }
  3% { opacity: 1; }
  to { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes mascot-show {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- Три шага ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 36px;
}

.step {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
  padding: 26px 22px;
  box-shadow: var(--shadow-card);
}

.step__num {
  width: 34px;
  height: 34px;
  border-radius: var(--r-tile);
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  color: #ffffff;
  font-weight: 700;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}

.step h3 { font-size: 19px; margin-bottom: 8px; }
.step p { color: var(--text-sec); font-size: 15px; }

@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Галерея экранов ---------- */

.screens {
  display: flex;
  gap: 28px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 40px;
}

.screens figure { margin: 0; text-align: center; }
.screens figcaption { margin-top: 14px; color: var(--text-ter); font-size: 14px; }

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

/* Суммы — backend/docs/unit_economics_and_pricing.md, раздел 8 (README, раздел
   «Тарифы»). Карточка — ссылка на #install целиком, поэтому внутри только span'ы,
   заголовок и абзац; цвета — из токенов, третьей копии тёмной палитры нет. */
.plans-lead { margin-top: 12px; max-width: 60ch; }

/* Период оплаты: две радиокнопки стоят перед .tariffs соседями, и выбор
   применяет селектор «~», а не :has(), — поэтому запасная ветка не нужна, и
   скрипта тоже нет. По умолчанию — помесячно. */
.billing {
  display: flex;
  width: max-content;
  max-width: 100%;
  gap: 2px;
  margin: 32px auto 0;
  padding: 3px;
  border: 1px solid var(--card-border);
  border-radius: var(--r-pill);
  background: var(--card);
}

.billing__option {
  padding: 8px 18px;
  border-radius: var(--r-pill);
  color: var(--text-sec);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.billing__option:hover { color: var(--text-pri); }

#billing-month:checked ~ .billing .billing__option--month,
#billing-year:checked ~ .billing .billing__option--year {
  background: var(--selected-bg);
  color: var(--accent);
}

/* На выбранном сегменте фон тот же, что у «−30 %», — метка меняет цвета на
   пару метки «Самый выгодный». */
#billing-year:checked ~ .billing .tariff__save {
  background: var(--accent);
  color: var(--accent-ink);
}

#billing-month:focus-visible ~ .billing .billing__option--month,
#billing-year:focus-visible ~ .billing .billing__option--year {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.when-year,
#billing-year:checked ~ .tariffs .when-month { display: none; }
#billing-year:checked ~ .tariffs .when-year { display: inline; }

.tariffs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 28px;
  margin-top: 36px;
}

.tariff,
.packs {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
  padding: 26px 24px;
  box-shadow: var(--shadow-card);
  color: var(--text-pri);
  text-decoration: none;
}

.tariff:focus-visible,
.packs:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Градиентная рамка: заливка карточки на padding-box, градиент бренда — на
   border-box под прозрачной рамкой. Градиент одинаков в обеих темах. */
.tariff--pro {
  border: 2px solid transparent;
  padding: 25px 23px;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(135deg, var(--grad-a), var(--grad-b)) border-box;
}

.tariff__badge {
  position: absolute;
  top: 0;
  left: 22px;
  transform: translateY(-50%);
  padding: 3px 12px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tariff__name { font-size: 19px; }

.tariff__price { margin-top: 10px; }

.price {
  font-size: clamp(30px, 8vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.price__unit {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-sec);
}

.tariff__more { display: flex; flex-direction: column; flex: 1; }

.tariff__year { margin-top: 6px; min-height: 1.6em; font-size: 14px; color: var(--text-sec); font-variant-numeric: tabular-nums; }

.nowrap { white-space: nowrap; }

.tariff__save {
  display: inline-block;
  padding: 0 8px;
  border-radius: var(--r-pill);
  background: var(--selected-bg);
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
}

.tariff__old { color: var(--text-ter); white-space: nowrap; }

.tariff__volume {
  margin-top: 16px;
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
}

.tariff__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
  color: var(--text-sec);
  font-size: 15px;
  line-height: 1.45;
}

.tariff__list > span { position: relative; padding-left: 18px; }

.tariff__list > span::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
}

/* Кнопка — span: ссылка в ссылке недопустима. */
.tariff__cta {
  align-self: flex-start;
  margin-top: 22px;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  border: 1px solid var(--card-border);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-pri);
}

.tariff__cta::after { content: " →"; }

.tariff--pro .tariff__cta {
  border-color: transparent;
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  color: #ffffff;
  box-shadow: var(--shadow-fab);
}

.packs { margin-top: 20px; gap: 18px; }
.packs__more { display: block; margin-top: 8px; color: var(--text-sec); font-size: 15px; }

.packs__list { display: flex; flex-direction: column; gap: 12px; }

.pack {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--card-border);
  border-radius: var(--r-tile);
}

.pack .tariff__volume { margin-top: 0; }
.price--pack { font-size: 26px; }

.limits {
  margin-top: 24px;
  border: 1px dashed var(--card-border);
  border-radius: var(--r-card);
  padding: 18px 22px;
  color: var(--text-sec);
  font-size: 15px;
}

/* Финальный блок — цель карточек. Отступ, чтобы кнопки не прилипали к краю. */
#install { scroll-margin-top: 16px; }

/* 600–899 px: одна колонка 520 px по центру — три карточки в две колонки
   оставляют дыру под третьей. Пакеты внутри карточки — в ряд. */
@media (min-width: 600px) {
  .tariffs,
  .packs,
  .limits { max-width: 520px; margin-inline: auto; }
  .packs__list { flex-direction: row; }
  .pack { flex: 1 1 0; }
}

/* ≥ 900 px: три колонки, Про приподнят; пакеты — на всю ширину ряда. */
@media (min-width: 900px) {
  .tariffs {
    max-width: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 20px;
    align-items: stretch;
  }
  .packs,
  .limits { max-width: none; }
  .packs { flex-direction: row; align-items: center; justify-content: space-between; margin-top: 28px; }
  .packs__list { flex: 0 1 460px; }
  .tariff--pro { transform: translateY(-8px); box-shadow: var(--shadow-phone); }
}

@media (max-width: 420px) {
  .tariff,
  .packs { padding: 22px 20px; }
  .tariff--pro { padding: 21px 19px; }
  .pack { padding: 10px 14px; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .tariff,
  .packs { transition: transform 0.15s ease, box-shadow 0.15s ease; }
  .tariff:hover,
  .packs:hover { transform: translateY(-2px); }
  .final:target { border-radius: var(--r-panel); animation: install-flash 1.6s ease-out; }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .tariff--pro:hover { transform: translateY(-10px); }
}

@keyframes install-flash {
  from { background: var(--selected-bg); }
  to { background: transparent; }
}

/* ---------- Приватность ---------- */

.privacy {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 36px;
}

.fact {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
  padding: 24px 22px;
  box-shadow: var(--shadow-card);
}

.fact h3 { font-size: 17px; margin-bottom: 8px; }
.fact p { color: var(--text-sec); font-size: 15px; }

.docs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.doc {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r-pill);
  padding: 10px 18px;
  text-decoration: none;
  color: var(--text-pri);
  font-size: 15px;
  font-weight: 600;
}

.doc:hover { border-color: var(--selected-border); color: var(--accent); }
.doc svg { width: 16px; height: 16px; color: var(--text-ter); }

@media (max-width: 860px) { .privacy { grid-template-columns: 1fr; } }

/* ---------- Поддержка и вопросы ---------- */

.support-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 40px;
  margin-top: 36px;
  align-items: start;
}

.support-card {
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  color: #ffffff;
  border-radius: var(--r-panel);
  padding: 28px 26px;
  box-shadow: var(--shadow-fab);
}

.support-card h3 { font-size: 20px; margin-bottom: 10px; }
.support-card p { font-size: 15px; opacity: 0.92; }

.support-card a {
  display: inline-block;
  margin-top: 18px;
  background: #ffffff;
  color: #4c1d95;
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--r-pill);
  padding: 11px 20px;
  font-size: 15px;
}

.faq details {
  border-bottom: 1px solid var(--card-border);
  padding: 16px 0;
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  color: var(--accent);
  font-weight: 700;
  flex: none;
}

.faq details[open] summary::after { content: "–"; }
.faq p { margin-top: 10px; color: var(--text-sec); font-size: 15px; }

@media (max-width: 860px) { .support-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- Финальный призыв и подвал ---------- */

.final {
  text-align: center;
  padding-block: 72px;
}

.final h2 { font-size: clamp(26px, 4vw, 36px); }
.final p { margin: 14px auto 28px; color: var(--text-sec); max-width: 42ch; }
.final .stores { justify-content: center; }

.site-footer {
  border-top: 1px solid var(--card-border);
  background: var(--bg2);
  padding-block: 40px;
  font-size: 14px;
  color: var(--text-ter);
}

.site-footer h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dis); margin-bottom: 12px; }
.site-footer__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.site-footer a { color: var(--text-sec); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 7px; }
.site-footer__bottom { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--card-border); }

@media (max-width: 760px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* Узкий телефон: две кнопки магазинов делят одну строку поровну — столбиком они
   занимают лишние ~70 px, и блок доказательства выталкивает их под сгиб. Если
   содержимое кнопок в строку не влезает, flex-wrap переносит вторую ниже. */
@media (max-width: 420px) {
  :root { --gutter: 16px; }
  .section { padding-block: 56px; }
  .store { flex: 1 1 0; justify-content: center; padding-inline: 12px; }
}

/* Короткие экраны: iPhone SE (375×667) и телефон в ландшафте. Вертикальные
   отступы первого экрана ужимаются, иначе вторая кнопка магазина уезжает под
   нижнюю панель браузера — а обе кнопки обязаны быть видны без прокрутки. */
@media (max-height: 700px) {
  .site-header__row { min-height: 52px; }
  .hero { padding-block: 28px 8px; }
  .hero h1 { font-size: clamp(28px, 5vw, 44px); }
  .hero__lead { margin-top: 14px; font-size: 16px; }
  .hero__cta { margin-top: 20px; }
  .store-note { margin-top: 12px; }
  .proof { margin-top: 14px; }
  .proof__arrow { margin-block: 2px; }
  .proof__summary { -webkit-line-clamp: 2; line-clamp: 2; }
}

/* Короткий телефон в одной колонке (iPhone SE): заголовок, подзаголовок, блок
   доказательства и кнопки стоят друг под другом, и каждый пиксель сверху
   сдвигает кнопки к нижней панели браузера. */
@media (max-width: 900px) and (max-height: 700px) {
  .hero { padding-top: 20px; }
  .hero__cta { margin-top: 16px; }
}

/* Телефон в ландшафте: видимой высоты остаётся около 250 px, поэтому первый
   экран ужимается сильнее — заголовок мельче, подзаголовок компактнее, а макет
   телефона и блок доказательства уходят из hero совсем: в такой полосе они
   занимают место кнопок. */
@media (max-height: 450px) {
  .site-header__row { min-height: 40px; }
  .hero { padding-block: 12px 4px; }
  .hero h1 { font-size: clamp(23px, 3.2vw, 28px); }
  .hero__lead { margin-top: 8px; font-size: 14.5px; }
  .hero__cta { margin-top: 12px; }
  .hero__art,
  .proof { display: none; }
  .store { padding: 10px 18px 10px 15px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}