/* ============================================================
   ФАЙЛ: istochnik/css/sait.css
   Сайт СнапФит: одна таблица стилей на все страницы.
   Тема всегда тёмная, как у приложения, — не по системе.
   Сначала телефон, шире — в две колонки. Шрифт мягкий, как
   в розовой теме приложения. Встроенных стилей на страницах нет
   (CSP style-src 'self').

   ПРАВКА (мягкий шрифт).
   • Мягкий шрифт розовой темы приложения: Comfortaa — заголовки
     (h1–h3, названия карточек и документов), Nunito — текст,
     меню, кнопки и метки. Были системные.
   • Шрифты лежат на сайте (CSP font-src 'self'), это TTF
     приложения, сжатые в WOFF без изменений; адреса с хешем
     вписывает сборщик. font-display: swap — текст виден сразу
     системным шрифтом и сменяется мягким, как только тот придёт.
   • Comfortaa бывает от 300 до 700: заголовки, что были 750–800,
     стали 700. Comfortaa шире — у заголовков разрядка меньше,
     на страницах-текстах (.uzkaya) h1 мельче: «Политика
     конфиденциальности» на телефоне 320–412 px вылезала за край
     (и системным шрифтом — на 360 px).

   ПРАВКА (блокеры магазинов, пункт 5).
   • Текст документа на его странице (.dokument-tekst): заголовок
     «Текст документа», пометка «тот же текст, что в PDF», сам текст
     (.dokument-tekst__telo) — заголовки мельче заголовков страницы,
     абзацы, списки, таблицы в рамках; номер пункта нумерованного
     списка — уже в тексте, своего у ol нет. Текста нет — строка
     «пока только в PDF» в пунктирной рамке.
   • Телефон 320–412 px: длинное слово абзаца переносится; в клетке
     таблицы — перенос по слогам с дефисом (hyphens: auto, язык — ru);
     таблица шире экрана листается внутри обёртки .dokument-tekst__tablica
     — за край страницы ничего не вылезает.

   ПРАВКА (ТЗ «Резервный вход по звонку»).
   • Удаление аккаунта, второй способ — звонком. .forma__vybor —
     «Код в MAX» и «Подтвердить звонком» (дальше — и другие способы):
     на телефоне одна под другой, от 720 px рядом поровну; других
     способов нет — одна кнопка MAX во всю ширину, как была.
     .forma__otvet — статус и «Повторить» (нет связи) в одну
     строку. .forma__zhdem — таймер до «Не позвонили?»
     (.forma__tajmer) и сам вопрос с кнопками (.ne-pozvonili).
     .nomer-zvonka — номер для «Позвоните сами» крупной кнопкой,
     без переноса. Телефон 320–412 px: кнопки переносятся строкой
     ниже, за край ничего не вылезает.

   ПРАВКА (Яндекс ID).
   • Удаление аккаунта, ещё способ — «Подтвердить через Яндекс» в той
     же .forma__vybor (новых правил для кнопки нет). Три способа рядом
     (от 720 px) — подпись, не влезшая в кнопку, переносится по центру.
   • .itog — итог возврата из Яндекса над формой, тем же блоком, что
     форма: .itog--gotovo — помечен (зелёным, как «готово»),
     .itog--oshibka — не вышло (рамкой, как «внимание»); без вида —
     отменил сам. Новых цветов нет.

   ЧТО ИЗМЕНИЛОСЬ В ЭТОЙ ПРАВКЕ (ТЗ «Сайт: Тариф и ЮKassa»).
   • Шапка: с «Тарифом» пунктов шесть. До 719 px «Главная» — это
     логотип, пять остальных — в одну строку без листания: до 719 px
     плотнее и мельче, до 560 px у шапки поля 12 px, до 400 px (телефон
     360) — ещё плотнее, до 340 px (телефон 320) — поля 8 px. Шире —
     все шесть, как было.
   • Подвал: ссылки «Тариф», «Оферта», «Пользовательское соглашение»,
     «Политика обработки ПД», «Удаление аккаунта» (.podval__menyu) и
     реквизиты (.podval__rekvizity): исполнитель с ИНН, почта, телефон
     и адрес, если заданы, ©. На телефоне — ссылки, под ними реквизиты;
     от 860 px — реквизиты слева, ссылки справа.
   • Страница «Тариф»: .tarif-geroy — текст и кадр «Тарифа» (от 860 px
     рядом); .tarif-kartochka — цена с сервера (.tarif-kartochka__summa
     крупно, ₽ не отрывается), условия списком; .uslugi — «Бесплатно
     всегда» (от 720 px в две колонки); .zvezdochka и .snoska — звёздочка
     платной функции и сноска про оферту; .kadry и .kadr — кадры
     приложения с подписью, светлые на тёмном — в рамке и с тенью;
     .shagi — как оформить и получить.
   • Главная: .stroka-tarifa — строка «Всё бесплатно, кроме ИИ-функций»
     под «Возможностями».
   • «Скоро» больше нигде нет: .skoro, .magazin--skoro, .magazin__skoro
     убраны.
   ============================================================ */

/* Comfortaa © 2011 The Comfortaa Project Authors, Reserved Font
   Name «Comfortaa»; Nunito © 2014 The Nunito Project Authors.
   Оба — SIL Open Font License 1.1: текст лицензии лежит рядом
   со шрифтом (istochnik/shrifty/…/OFL.txt) и внутри файла шрифта. */
@font-face {
  font-family: "Comfortaa";
  src: url("/assets/shrifty/comfortaa.9091251093.woff") format("woff");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("/assets/shrifty/nunito.c2e6ffa7bf.woff") format("woff");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --fon: #050b12;
  --fon-2: #0b1621;
  --tekst: #e9f2f7;
  --tekst-2: #a3b6c4;
  --granica: rgba(150, 200, 230, .13);
  --granica-2: rgba(150, 200, 230, .24);
  --akcent: #3ad6a4;
  --akcent-2: #42e6d0;
  --akcent-tekst: #03140f;
  --akcent-myagkiy: rgba(58, 214, 164, .14);
  --cian: #22d3ee;
  --siniy: #4aa8ff;
  --laym: #b6f23a;
  --yantar: #ffb547;
  --fiolet: #a78bfa;
  --opasno: #ff7a70;
  --radius: 18px;
  --shirina: 1120px;
  --shapka: 52px;
  --shrift-tekst: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --shrift-zagolovki: "Comfortaa", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

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

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--shapka) + 16px);
}

/* Подвал прижат к низу и на короткой странице */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--fon);
  color: var(--tekst);
  font: 16px/1.6 var(--shrift-tekst);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Свечение фона стоит на месте — страница едет поверх */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(44rem 32rem at -6% -8%, rgba(34, 211, 238, .11), transparent 70%),
    radial-gradient(40rem 30rem at 106% 32%, rgba(182, 242, 58, .06), transparent 70%),
    radial-gradient(56rem 34rem at 50% 115%, rgba(58, 214, 164, .08), transparent 70%);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--akcent-2); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

::selection { background: rgba(58, 214, 164, .35); color: #fff; }

:focus-visible { outline: 2px solid var(--akcent-2); outline-offset: 3px; border-radius: 8px; }

/* Заголовки — Comfortaa, как в розовой теме приложения */
h1, h2, h3 { font-family: var(--shrift-zagolovki); font-weight: 700; line-height: 1.2; margin: 0 0 .55em; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.8rem); margin-top: 1.6em; }
h3 { font-size: 1.1rem; }
/* Страницы-тексты (документы, удаление, 404): заголовок мельче —
   «конфиденциальности» в Comfortaa длиной почти 12 em и на телефоне
   в 2rem не помещалось. Слово длиннее строки всё равно переносится,
   а не срезается краем */
.uzkaya h1 { font-size: clamp(1.5rem, 1rem + 2.6vw, 2.4rem); }
h1, h2, h3 { overflow-wrap: break-word; }
p { margin: 0 0 1em; }

/* Вторая строка заголовка — градиентом, как на картинках.
   Отступ снизу — чтобы не срезало «у», «д», «р» */
.vydelenie {
  display: block;
  padding-bottom: .1em;
  background: linear-gradient(95deg, var(--cian) 0%, var(--akcent) 45%, var(--laym) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.obertka { width: 100%; max-width: var(--shirina); margin: 0 auto; padding: 0 16px; }
.uzkaya { max-width: 800px; }

.propusk {
  position: absolute; left: -9999px; top: 8px; z-index: 20;
  background: var(--fon-2); color: var(--tekst); padding: 8px 12px; border-radius: 10px;
}
.propusk:focus { left: 8px; }

/* ── Шапка ─────────────────────────────────────────────────── */
.shapka {
  position: sticky; top: 0; z-index: 10;
  background: rgba(5, 11, 18, .84);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--granica);
  view-transition-name: shapka;
}
.shapka__ryad { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--shapka); }
.shapka__logo { flex: none; display: block; border-radius: 10px; }
.shapka__logo img { width: 136px; }
/* Меню в одну строку: не влезло — листается вбок */
.shapka__menyu {
  display: flex; gap: 2px; min-width: 0;
  margin-right: -10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.shapka__menyu::-webkit-scrollbar { display: none; }
.shapka__punkt {
  flex: none;
  padding: 7px 11px;
  border-radius: 999px;
  color: var(--tekst-2);
  font-size: .9375rem; font-weight: 600; line-height: 1.25;
  text-decoration: none; white-space: nowrap;
  transition: color .2s, background-color .2s;
}
.shapka__punkt:hover { color: var(--tekst); background: rgba(255, 255, 255, .06); }
.shapka__punkt:focus-visible { outline-offset: -2px; }
/* Подсветка своего раздела; при переходе она переезжает */
.shapka__punkt[aria-current="page"] {
  color: #d8fff1;
  background: var(--akcent-myagkiy);
  box-shadow: inset 0 0 0 1px rgba(58, 214, 164, .3);
  view-transition-name: punkt-menyu;
}

/* ── Кнопки и метки ────────────────────────────────────────── */
.knopka {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 11px 20px; border-radius: 14px; border: 0;
  background: linear-gradient(135deg, var(--akcent-2), var(--akcent));
  color: var(--akcent-tekst);
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  box-shadow: 0 8px 24px -10px rgba(58, 214, 164, .6);
  transition: filter .2s, box-shadow .2s, transform .15s;
}
.knopka:hover { filter: brightness(1.07); box-shadow: 0 10px 30px -10px rgba(58, 214, 164, .8); }
.knopka:active { transform: translateY(1px); }
.knopka[disabled] { opacity: .6; cursor: progress; }
.knopka--vtoraya { background: rgba(255, 255, 255, .04); color: var(--tekst); box-shadow: inset 0 0 0 1px var(--granica-2); }
.knopka--vtoraya:hover { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(58, 214, 164, .5); }
.knopka--opasnaya { background: var(--opasno); color: #2a0b08; box-shadow: none; }
.knopki { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.metka {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 16px; padding: 5px 12px 5px 10px;
  border: 1px solid rgba(58, 214, 164, .26); border-radius: 999px;
  background: rgba(12, 34, 42, .55);
  color: #bdeedd; font-size: .75rem; font-weight: 700; line-height: 1.4;
  letter-spacing: .07em; text-transform: uppercase;
}
.metka::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--laym); box-shadow: 0 0 10px var(--laym);
}
.metka a { color: inherit; text-decoration: none; }
.metka a:hover { text-decoration: underline; }

/* ── Слайды: четыре страницы по картинкам ──────────────────── */
.slayd { padding: 28px 0 40px; }
.slayd__ryad { display: grid; gap: 28px; align-items: center; }
.slayd__tekst, .slayd__kartinka { min-width: 0; }
.slayd__vvod { max-width: 62ch; margin-bottom: 0; color: var(--tekst-2); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); }
.slayd__shapka { max-width: 780px; margin-bottom: 24px; }
.slayd__setka { display: grid; gap: 20px; align-items: center; }

/* Картинки нарисованы под тёмный фон и растворяются в нём;
   за ними — мягкий свет в их цвет */
.slayd__kartinka { position: relative; isolation: isolate; }
.slayd__kartinka::before {
  content: "";
  position: absolute; inset: 10% 4%; z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(66, 230, 208, .2), rgba(74, 168, 255, .08) 60%, transparent);
}
.slayd__img { margin: 0 auto; }
.slayd__img--telefon { width: min(100%, 340px); }
.slayd__img--shirokaya { width: 100%; }

.punkty { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.slayd__setka .punkty { margin: 0; }
.punkt {
  --ton: var(--akcent);
  position: relative;
  padding: 13px 16px 13px 42px;
  border: 1px solid var(--granica);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
}
.punkt::before {
  content: "";
  position: absolute; left: 17px; top: 20px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ton);
  box-shadow: 0 0 12px var(--ton);
}
.punkt strong { display: block; font-size: 1.02rem; line-height: 1.35; }
.punkt p { margin: 3px 0 0; color: var(--tekst-2); font-size: .95rem; line-height: 1.5; }
.punkt--cian { --ton: var(--cian); }
.punkt--siniy { --ton: var(--siniy); }
.punkt--laym { --ton: var(--laym); }
.punkt--yantar { --ton: var(--yantar); }
.punkt--fiolet { --ton: var(--fiolet); }

.tegi { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tegi li {
  padding: 3px 12px; border-radius: 999px;
  border: 1px solid var(--granica-2); background: rgba(255, 255, 255, .04);
  font-size: .875rem; font-weight: 600;
}

/* ── Разделы главной ───────────────────────────────────────── */
.razdel { padding: 40px 0; }
.razdel--pervyy { padding-top: 36px; }
.razdel .obertka > h2:first-child { margin-top: 0; }

/* Ссылки на три другие страницы */
.stranicy { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.stranica-ssylka {
  --ton: var(--akcent-2);
  display: block; height: 100%;
  padding: 20px 20px 18px;
  border: 1px solid var(--granica); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--ton) 15%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  color: var(--tekst); text-decoration: none;
  transition: border-color .2s, transform .2s;
}
.stranica-ssylka:hover { border-color: var(--granica-2); transform: translateY(-2px); }
.stranica-ssylka__nazvanie { display: block; margin-bottom: 4px; font-family: var(--shrift-zagolovki); font-size: 1.1rem; font-weight: 700; }
.stranica-ssylka__nazvanie::after { content: " →"; content: " →" / ""; color: var(--ton); }
.stranica-ssylka__opisanie { display: block; color: var(--tekst-2); font-size: .95rem; }
.stranica-ssylka--trener { --ton: var(--siniy); }
.stranica-ssylka--pitanie { --ton: var(--akcent-2); }
.stranica-ssylka--gruppy { --ton: var(--laym); }
/* Под «Возможностями»: всё бесплатно, кроме ИИ, — ссылка на «Тариф» */
.stroka-tarifa { margin: 18px 0 0; color: var(--tekst-2); }

.skachat {
  display: grid; gap: 18px; align-items: center;
  padding: 22px 20px;
  border: 1px solid var(--granica); border-radius: 22px;
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(58, 214, 164, .12), transparent 60%),
    var(--fon-2);
}
.skachat h2 { margin-top: 0; }
.skachat p { margin: 0; color: var(--tekst-2); }

.magaziny { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 14px 12px; }
.magazin { position: relative; }
.magazin a { display: block; border-radius: 10px; }
.magazin img { width: 156px; border-radius: 10px; }

/* ── Документы ────────────────────────────────────────────── */
.dokumenty { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 12px; }
.dokument {
  display: grid; gap: 4px; padding: 16px 18px;
  border: 1px solid var(--granica); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
}
.dokument__nazvanie { font-family: var(--shrift-zagolovki); font-weight: 700; font-size: 1.05rem; }
.dokument__redakciya { color: var(--tekst-2); }
.dokument__pdf { font-weight: 600; }
.dokument-tekushchiy {
  margin: 16px 0; padding: 16px 18px; border-radius: var(--radius);
  background: var(--akcent-myagkiy); border: 1px solid rgba(58, 214, 164, .25);
}
.dokument-tekushchiy p:last-child { margin: 0; }
.redakcii { padding-left: 1.2em; }
.redakciya { margin: 6px 0; }
.redakciya__data { color: var(--tekst-2); margin-left: .4em; }

/* Текст документа — кусок из реестра (API): под «Открыть PDF», над
   «Все редакции». Разметка — только h2, h3, p, ul, ol, li, strong, em,
   table, tr, td, th, br без классов: стили — от .dokument-tekst__telo;
   таблицу API кладёт в обёртку .dokument-tekst__tablica. Телефон
   320–412 px: длинное слово абзаца переносится; в клетке таблицы слово
   переносится по слогам, с дефисом (не посреди слога), а таблица шире
   экрана листается внутри обёртки — страница вбок не едет */
.dokument-tekst { margin: 28px 0 8px; }
.dokument-tekst__zagolovok { margin-top: 0; }
.dokument-tekst__pometka { color: var(--tekst-2); font-size: .95rem; }
.dokument-tekst__tolko-pdf {
  padding: 12px 16px; border-radius: 14px;
  border: 1px dashed var(--granica-2); color: var(--tekst-2);
}
.dokument-tekst__telo {
  padding-top: 6px; border-top: 1px solid var(--granica);
  overflow-wrap: break-word; word-wrap: break-word;
}
.dokument-tekst__telo h2 { font-size: clamp(1.15rem, 1rem + .7vw, 1.4rem); margin: 1.4em 0 .5em; }
.dokument-tekst__telo h3 { font-size: 1.05rem; margin: 1.2em 0 .45em; }
.dokument-tekst__telo p { margin: 0 0 .8em; }
.dokument-tekst__telo strong { color: #fff; font-weight: 700; }
.dokument-tekst__telo ul, .dokument-tekst__telo ol { margin: 0 0 1em; padding-left: 1.3em; }
.dokument-tekst__telo li { margin: .3em 0; }
.dokument-tekst__telo li > ul, .dokument-tekst__telo li > ol { margin: .3em 0 0; }
.dokument-tekst__telo ul > li::marker { color: var(--akcent); }
/* Номер пункта — уже в тексте, как в PDF (1., 1.1., а)): свой номер
   браузера не нужен */
.dokument-tekst__telo ol { list-style: none; padding-left: 0; }
.dokument-tekst__telo li > ol { padding-left: 1.3em; }
.dokument-tekst__tablica { overflow-x: auto; margin: 0 0 1.2em; }
.dokument-tekst__telo table {
  width: 100%; border-collapse: collapse;
  font-size: .9375rem; line-height: 1.5;
}
.dokument-tekst__telo th, .dokument-tekst__telo td {
  padding: 8px 10px; border: 1px solid var(--granica-2);
  text-align: left; vertical-align: top;
  overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto;
}
.dokument-tekst__telo th { background: rgba(255, 255, 255, .05); font-weight: 700; }
/* Узкий телефон: таблица плотнее — две-три колонки встают в ширину
   и там, где браузер не умеет переносить по слогам */
@media (max-width: 400px) {
  .dokument-tekst__telo table { font-size: .875rem; }
  .dokument-tekst__telo th, .dokument-tekst__telo td { padding: 6px 5px; }
}
.primechanie { color: var(--tekst-2); font-size: .95rem; }
.slayd .primechanie { margin: 14px 0 0; }

/* ── Тариф ────────────────────────────────────────────────── */
.tarif-geroy { display: grid; gap: 28px; align-items: start; }
.tarif-geroy__tekst { min-width: 0; }
.tarif-kartochka {
  margin-top: 22px; padding: 18px 20px;
  border: 1px solid rgba(58, 214, 164, .25); border-radius: var(--radius);
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(58, 214, 164, .12), transparent 60%),
    var(--fon-2);
}
.tarif-kartochka__cena { margin: 0 0 12px; color: var(--tekst-2); font-weight: 700; }
.tarif-kartochka__summa {
  margin-right: .15em;
  color: var(--tekst); font-family: var(--shrift-zagolovki);
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.6rem); font-weight: 700; line-height: 1.1;
  white-space: nowrap;
}
.tarif-kartochka__usloviya { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.tarif-kartochka__usloviya li::marker { color: var(--akcent); }
/* «Бесплатно всегда»: что и как — коротко, плашками */
.uslugi { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.uslugi li {
  position: relative; padding: 9px 14px 9px 34px;
  border: 1px solid var(--granica); border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  color: var(--tekst-2); font-size: .95rem; line-height: 1.5;
}
.uslugi strong { color: var(--tekst); }
.uslugi li::before {
  content: ""; position: absolute; left: 14px; top: 1.05em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--laym); box-shadow: 0 0 10px var(--laym);
}
/* Звёздочка платной функции и сноска про оферту */
.zvezdochka { margin-left: 1px; color: var(--akcent-2); }
.snoska { margin: 14px 0 0; }
/* Кадры приложения: светлые на тёмном — в рамке и с тенью */
.kadry { display: grid; gap: 28px; margin-top: 18px; }
.kadr { margin: 0; display: grid; gap: 10px; justify-items: center; }
.kadr__img {
  width: 100%; max-width: 360px; border-radius: 20px;
  box-shadow: 0 0 0 1px var(--granica-2), 0 18px 50px -24px rgba(0, 0, 0, .8);
}
.kadr__podpis { max-width: 40ch; color: var(--tekst-2); font-size: .9rem; text-align: center; }
/* Как оформить и получить — шаги по порядку */
.shagi { margin: 0 0 1.2em; padding-left: 1.4em; display: grid; gap: 8px; }
.shagi li::marker { color: var(--akcent); font-weight: 700; }

.rekvizity { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; }
.rekvizity dt { color: var(--tekst-2); }
.rekvizity dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* ── Форма удаления ───────────────────────────────────────── */
.forma {
  display: grid; gap: 12px; margin: 20px 0 8px; padding: 18px;
  background: var(--fon-2); border: 1px solid var(--granica); border-radius: var(--radius);
}
.forma__metka { font-weight: 700; }
.forma__pole {
  font: inherit; font-size: 1.1rem; width: 100%; min-height: 50px; padding: 10px 14px;
  border-radius: 12px; border: 1px solid var(--granica-2); background: var(--fon); color: var(--tekst);
}
.forma__pole::placeholder { color: rgba(163, 182, 196, .6); }
.forma__pole:focus { border-color: var(--akcent); outline: none; box-shadow: 0 0 0 3px rgba(58, 214, 164, .22); }
.forma__pole--kod { letter-spacing: .3em; font-variant-numeric: tabular-nums; max-width: 12ch; }
.forma__poyasnenie { color: var(--tekst-2); margin: 0; }
.forma__knopki { display: flex; flex-wrap: wrap; gap: 10px; }
.forma__soobshchenie { margin: 0; font-weight: 600; min-height: 1.5em; }
.forma__soobshchenie--oshibka { color: var(--opasno); }
.galochka { display: flex; gap: 10px; align-items: flex-start; }
.galochka input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--akcent); flex: none; }
/* Способ подтверждения: одна кнопка — во всю ширину, как была; две
   и больше («Код в MAX», «Подтвердить звонком», дальше — другие
   способы) — на телефоне одна под другой, шире — рядом поровну */
.forma__vybor { display: grid; gap: 10px; }
/* Подпись, не влезшая в кнопку способа (три способа рядом), — по центру */
.forma__vybor .knopka { text-align: center; }
/* Итог возврата из Яндекса — над формой, тем же блоком, что форма:
   помечен — зелёным, как «готово»; не вышло — рамкой «внимание»;
   отменил сам — спокойно */
.itog {
  margin: 20px 0 8px; padding: 16px 18px; border-radius: var(--radius);
  background: var(--fon-2); border: 1px solid var(--granica-2); font-weight: 600;
}
.itog--gotovo { background: var(--akcent-myagkiy); border-color: rgba(58, 214, 164, .25); }
.itog--oshibka { background: rgba(255, 122, 112, .08); border-color: var(--opasno); }
/* Статус и «Повторить» (нет связи) — в одну строку, не влезло — ниже */
.forma__otvet { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.forma__povtorit { flex: none; }
/* Звонок: таймер до «Не позвонили?» и сам вопрос с двумя кнопками */
.forma__zhdem { display: grid; gap: 10px; }
.forma__tajmer { margin: 0; color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.ne-pozvonili { display: grid; gap: 10px; }
.ne-pozvonili__vopros { margin: 0; font-weight: 700; }
/* «Позвоните сами»: номер — крупной кнопкой, на телефоне открывает
   набор номера; номер не переносится */
.nomer-zvonka {
  justify-self: start;
  font-size: 1.3rem; letter-spacing: .02em; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lovushka { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.gotovo {
  margin: 20px 0; padding: 18px; border-radius: var(--radius);
  background: var(--akcent-myagkiy); border: 1px solid rgba(58, 214, 164, .25);
}
.gotovo h2 { margin-top: 0; }
.vnimanie { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--opasno); background: rgba(255, 122, 112, .08); }
.spisok { padding-left: 1.2em; }
.spisok li { margin: 6px 0; }
.spisok li::marker { color: var(--akcent); }

/* ── Подвал: ссылки и реквизиты исполнителя ───────────────── */
.podval { border-top: 1px solid var(--granica); padding: 16px 0 20px; color: var(--tekst-2); font-size: .875rem; }
.podval__ryad { display: grid; gap: 12px; }
.podval p { margin: 0; }
.podval a { color: var(--tekst-2); text-decoration: none; }
.podval a:hover { color: var(--tekst); text-decoration: underline; }
.podval__menyu { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.podval__rekvizity { display: grid; gap: 2px; overflow-wrap: anywhere; }
.podval__ispolnitel { color: var(--tekst); }

/* ── Телефон ──────────────────────────────────────────────── */
/* Уже 720 px: «Главная» — это логотип; пять пунктов (с «Тарифом») —
   в одну строку без листания */
@media (max-width: 719px) {
  .shapka__punkt--glavnaya { display: none; }
  .shapka__menyu { gap: 0; }
  .shapka__punkt { padding: 6px; font-size: .84375rem; }
}

/* От логотипа — значок: он слева в картинке, 34 из 122 px */
@media (max-width: 560px) {
  :root { --shapka: 48px; }
  .shapka .obertka { padding: 0 12px; }
  .shapka__ryad { gap: 8px; }
  .shapka__logo { width: 34px; overflow: hidden; }
  .shapka__logo img { width: 122px; max-width: none; }
  .shapka__menyu { margin-right: -8px; }
}

/* Узкий телефон (360): пункты ещё плотнее и чуть мельче */
@media (max-width: 400px) {
  .shapka__ryad { gap: 6px; }
  .shapka__menyu { margin-right: -6px; }
  .shapka__punkt { padding: 6px 4px; font-size: .78125rem; }
  .magazin img { width: 136px; }
}

/* Самый узкий телефон (320): поля шапки уже, пункты мельче */
@media (max-width: 340px) {
  .shapka .obertka { padding: 0 8px; }
  .shapka__punkt { padding: 6px 3px; font-size: .75rem; }
}

/* В одну колонку картинка встаёт сразу после вступления — как
   у страниц с широкой картинкой, а не после кнопок */
@media (max-width: 859px) {
  .slayd__ryad { display: flex; flex-direction: column; gap: 0; }
  .slayd__ryad .slayd__tekst { display: contents; }
  .slayd__ryad .metka { align-self: flex-start; }
  .slayd__ryad > .slayd__kartinka { order: 1; margin-top: 24px; }
  .slayd__ryad .punkty, .slayd__ryad .primechanie, .slayd__ryad .knopki { order: 2; }
}

/* ── Шире телефона ────────────────────────────────────────── */
@media (min-width: 720px) {
  .obertka { padding: 0 24px; }
  .stranicy { grid-template-columns: repeat(3, 1fr); }
  .forma__vybor { grid-auto-flow: column; grid-auto-columns: 1fr; }
  .uslugi { grid-template-columns: 1fr 1fr; }
  .kadry { grid-template-columns: 1fr 1fr; align-items: start; }
}

@media (min-width: 720px) and (max-width: 999px) {
  .slayd__setka .punkty { grid-template-columns: 1fr 1fr; }
}

/* Слайд — во весь экран под шапкой, как на старом сайте */
@media (min-width: 860px) {
  .slayd {
    display: grid; align-content: center;
    min-height: calc(100vh - var(--shapka));
    min-height: calc(100svh - var(--shapka));
    padding: 40px 0 48px;
  }
  .slayd__ryad { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 56px; }
  .slayd__ryad--obratno { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
  .slayd__ryad--obratno .slayd__kartinka { order: -1; }
  .slayd__img--telefon {
    width: auto; max-width: min(100%, 440px);
    max-height: calc(100vh - var(--shapka) - 80px);
    max-height: calc(100svh - var(--shapka) - 80px);
  }
  .skachat { grid-template-columns: minmax(0, 1fr) auto; gap: 32px; padding: 28px 32px; }
  .tarif-geroy { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
  /* Подвал: реквизиты слева, ссылки справа */
  .podval__ryad { grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 12px 32px; align-items: start; }
  .podval__menyu { order: 2; justify-content: flex-end; max-width: 460px; }
}

/* Страницы с широкой картинкой: заголовок слева, вступление справа —
   картинка поднимается на первый экран, пункты — рядом с ней */
@media (min-width: 1000px) {
  .slayd__shapka {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    column-gap: 48px; align-items: end;
    max-width: none; margin-bottom: 28px;
  }
  .slayd__shapka .metka { grid-column: 1 / -1; justify-self: start; }
  .slayd__shapka h1 { margin: 0; }
  .slayd__shapka .slayd__vvod, .slayd__shapka .tegi { grid-column: 2; }
  .slayd__setka { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 32px; }
}

/* Режим высокой контрастности: градиент в тексте не виден */
@media (forced-colors: active) {
  .vydelenie { background: none; color: CanvasText; }
}

/* ── Переходы между страницами ────────────────────────────── */
/* Только CSS: обе страницы согласны на переход (@view-transition),
   браузер сам снимает старую и новую и сменяет их. Шапка названа
   (shapka) — стоит на месте; подсветка пункта меню названа
   (punkt-menyu) — переезжает. Не умеет браузер — обычный переход,
   а содержимое всплывает при загрузке */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  html { scroll-behavior: smooth; }

  ::view-transition-old(root) { animation: 160ms ease-out both sait-ischezaet; }
  ::view-transition-new(root) { animation: 300ms cubic-bezier(.2, .7, .2, 1) both sait-proyavlyaetsya; }
  ::view-transition-group(punkt-menyu) {
    animation-duration: 340ms;
    animation-timing-function: cubic-bezier(.2, .7, .2, 1);
  }

  .glavnoe > * { animation: sait-vsplyvaet .55s cubic-bezier(.2, .7, .2, 1) backwards; }
  .glavnoe > :nth-child(2) { animation-delay: .07s; }
  .glavnoe > :nth-child(n+3) { animation-delay: .14s; }
}

@keyframes sait-ischezaet { to { opacity: 0; } }
@keyframes sait-proyavlyaetsya { from { opacity: 0; } }
@keyframes sait-vsplyvaet { from { opacity: 0; transform: translateY(14px); } }

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